Clerk UI Versioning p1

eslint.config.mjs

@@ -442,7 +442,7 @@ export default tseslint.config([
         { definedTags: ['inline', 'unionReturnHeadings', 'displayFunctionSignature', 'paramExtension'], typed: false },
       ],
       'jsdoc/require-hyphen-before-param-description': 'warn',
-      'jsdoc/require-description': 'warn',
+      'jsdoc/require-description': 'off',
       'jsdoc/require-description-complete-sentence': 'warn',
       'jsdoc/require-param': ['warn', { ignoreWhenAllParamsMissing: true }],
       'jsdoc/require-param-description': 'warn',
@@ -455,6 +455,16 @@ export default tseslint.config([
       ],
     },
   },
+  {
+    name: 'repo/jsdoc-internal',
+    files: ['packages/shared/src/**/internal/**/*.{ts,tsx}', 'packages/shared/src/**/*.{ts,tsx}'],
+    plugins: {
+      jsdoc: pluginJsDoc,
+    },
+    rules: {
+      'jsdoc/require-jsdoc': 'off',
+    },
+  },
   ...pluginYml.configs['flat/recommended'],
   {
     name: 'eslint-prettier',

packages/clerk-js/package.json

@@ -32,7 +32,6 @@
   ],
   "scripts": {
     "build": "pnpm build:bundle && pnpm build:declarations",
-    "postbuild": "node ../../scripts/search-for-rhc.mjs file dist/clerk.no-rhc.mjs",
     "build:analyze": "rspack build --config rspack.config.js --env production --env variant=\"clerk.browser\" --env analysis --analyze",
     "build:bundle": "pnpm clean && rspack build --config rspack.config.js --env production",
     "build:declarations": "tsc -p tsconfig.declarations.json",
@@ -52,6 +51,7 @@
     "lint": "eslint src",
     "lint:attw": "attw --pack . --profile node16 --ignore-rules named-exports",
     "lint:publint": "publint || true",
+    "postbuild:disabled": "node ../../scripts/search-for-rhc.mjs file dist/clerk.no-rhc.mjs",
     "test": "vitest --watch=false",
     "test:sandbox:integration": "playwright test",
     "test:sandbox:integration:ui": "playwright test --ui",
@@ -61,26 +61,18 @@
   "browserslist": "last 2 years",
   "dependencies": {
     "@base-org/account": "2.0.1",
-    "@clerk/localizations": "workspace:^",
     "@clerk/shared": "workspace:^",
+    "@clerk/ui": "workspace:^",
     "@coinbase/wallet-sdk": "4.3.0",
-    "@emotion/cache": "11.11.0",
-    "@emotion/react": "11.11.1",
-    "@floating-ui/react": "0.27.12",
-    "@floating-ui/react-dom": "^2.1.3",
-    "@formkit/auto-animate": "^0.8.2",
     "@stripe/stripe-js": "5.6.0",
     "@swc/helpers": "^0.5.17",
     "@zxcvbn-ts/core": "3.0.4",
     "@zxcvbn-ts/language-common": "3.0.4",
     "alien-signals": "2.0.6",
     "browser-tabs-lock": "1.3.0",
-    "copy-to-clipboard": "3.3.3",
     "core-js": "3.41.0",
     "crypto-js": "^4.2.0",
     "dequal": "2.0.3",
-    "input-otp": "1.4.2",
-    "qrcode.react": "4.2.0",
     "regenerator-runtime": "0.14.1",
     "swr": "2.3.4"
   },
@@ -99,10 +91,6 @@
     "minimatch": "^10.0.3",
     "webpack-merge": "^5.10.0"
   },
-  "peerDependencies": {
-    "react": "catalog:peer-react",
-    "react-dom": "catalog:peer-react"
-  },
   "engines": {
     "node": ">=18.17.0"
   },

packages/clerk-js/rspack.config.js

@@ -5,6 +5,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
 const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+const { svgLoader, typescriptLoaderProd, typescriptLoaderDev } = require('../../scripts/rspack-common');
 
 const isProduction = mode => mode === 'production';
 const isDevelopment = mode => !isProduction(mode);
@@ -117,20 +118,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
             chunks: 'all',
             enforce: true,
           },
-          /**
-           * Sign up is shared between the SignUp component and the SignIn component.
-           */
-          signUp: {
-            minChunks: 1,
-            name: 'signup',
-            test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')),
-          },
-          common: {
-            minChunks: 1,
-            name: 'ui-common',
-            priority: -20,
-            test: module => !!(module.resource && !module.resource.includes('/ui/components')),
-          },
           defaultVendors: {
             minChunks: 1,
             test: /[\\/]node_modules[\\/]/,
@@ -152,116 +139,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
   };
 };
 
-/** @type { () => (import('@rspack/core').RuleSetRule) }  */
-const svgLoader = () => {
-  return {
-    test: /\.svg$/,
-    resolve: {
-      fullySpecified: false,
-    },
-    use: {
-      loader: '@svgr/webpack',
-      options: {
-        svgo: true,
-        svgoConfig: {
-          floatPrecision: 3,
-          transformPrecision: 1,
-          plugins: ['preset-default', 'removeDimensions', 'removeStyleElement'],
-        },
-      },
-    },
-  };
-};
-
-/** @type { (opts?: { targets?: string, useCoreJs?: boolean }) => (import('@rspack/core').RuleSetRule[]) } */
-const typescriptLoaderProd = (
-  { targets = packageJSON.browserslist, useCoreJs = false } = { targets: packageJSON.browserslist, useCoreJs: false },
-) => {
-  return [
-    {
-      test: /\.(jsx?|tsx?)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: 'builtin:swc-loader',
-        options: {
-          env: {
-            targets,
-            ...(useCoreJs
-              ? {
-                  mode: 'usage',
-                  coreJs: require('core-js/package.json').version,
-                }
-              : {}),
-          },
-          jsc: {
-            parser: {
-              syntax: 'typescript',
-              tsx: true,
-            },
-            externalHelpers: true,
-            transform: {
-              react: {
-                runtime: 'automatic',
-                importSource: '@emotion/react',
-                development: false,
-                refresh: false,
-              },
-            },
-          },
-        },
-      },
-    },
-    {
-      test: /\.m?js$/,
-      exclude: /node_modules[\\/]core-js/,
-      use: {
-        loader: 'builtin:swc-loader',
-        options: {
-          env: {
-            targets,
-            ...(useCoreJs
-              ? {
-                  mode: 'usage',
-                  coreJs: '3.41.0',
-                }
-              : {}),
-          },
-          isModule: 'unknown',
-        },
-      },
-    },
-  ];
-};
-
-/** @type { () => (import('@rspack/core').RuleSetRule[]) } */
-const typescriptLoaderDev = () => {
-  return [
-    {
-      test: /\.(jsx?|tsx?)$/,
-      exclude: /node_modules/,
-      loader: 'builtin:swc-loader',
-      options: {
-        jsc: {
-          target: 'esnext',
-          parser: {
-            syntax: 'typescript',
-            tsx: true,
-          },
-          externalHelpers: true,
-          transform: {
-            react: {
-              runtime: 'automatic',
-              importSource: '@emotion/react',
-              development: true,
-              refresh: true,
-            },
-          },
-        },
-      },
-    },
-  ];
-};
-
 /**
  * Used for production builds that have dynamicly loaded chunks.
  * @type { (opts?: { targets?: string, useCoreJs?: boolean }) => (import('@rspack/core').Configuration) }
@@ -613,7 +490,7 @@ const devConfig = ({ mode, env }) => {
       cache: true,
       experiments: {
         cache: {
-          type: 'persistent',
+          type: 'memory',
         },
       },
     };

packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts

@@ -1,15 +1,15 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
+import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { inCrossOriginIframe } from '../../../../utils';
 import { getCookieDomain } from '../../getCookieDomain';
 import { getSecureAttribute } from '../../getSecureAttribute';
 import { createClientUatCookie } from '../clientUat';
 
 vi.mock('@clerk/shared/cookie');
 vi.mock('@clerk/shared/date');
-vi.mock('../../../../utils');
+vi.mock('@clerk/shared/internal/clerk-js/runtime');
 vi.mock('../../getCookieDomain');
 vi.mock('../../getSecureAttribute');
 

packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts

@@ -1,14 +1,14 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
+import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { inCrossOriginIframe } from '../../../../utils';
 import { getSecureAttribute } from '../../getSecureAttribute';
 import { createSessionCookie } from '../session';
 
 vi.mock('@clerk/shared/cookie');
 vi.mock('@clerk/shared/date');
-vi.mock('../../../../utils');
+vi.mock('@clerk/shared/internal/clerk-js/runtime');
 vi.mock('../../getSecureAttribute');
 
 describe('createSessionCookie', () => {

packages/clerk-js/src/core/auth/cookies/clientUat.ts

@@ -1,9 +1,9 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
+import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { getSuffixedCookieName } from '@clerk/shared/keys';
 import type { ClientResource } from '@clerk/shared/types';
 
-import { inCrossOriginIframe } from '../../../utils';
 import { getCookieDomain } from '../getCookieDomain';
 import { getSecureAttribute } from '../getSecureAttribute';
 

packages/clerk-js/src/core/auth/cookies/devBrowser.ts

@@ -1,9 +1,9 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
+import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { getSuffixedCookieName } from '@clerk/shared/keys';
 
-import { inCrossOriginIframe } from '../../../utils';
 import { getSecureAttribute } from '../getSecureAttribute';
 
 export type DevBrowserCookieHandler = {

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -1,8 +1,8 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
+import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { getSuffixedCookieName } from '@clerk/shared/keys';
 
-import { inCrossOriginIframe } from '../../../utils';
 import { getSecureAttribute } from '../getSecureAttribute';
 
 const SESSION_COOKIE_NAME = '__session';