fix(clerk-js): Update sandbox with separate UI module (#7398)

Author: brkalow

.changeset/blue-stars-tie.md

@@ -0,0 +1,2 @@
+---
+---

package.json

@@ -12,6 +12,7 @@
  "clean": "turbo clean",
  "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/chrome-extension",
  "dev:js": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:current --filter=@clerk/clerk-js",
+ "dev:sandbox": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:sandbox --filter=@clerk/clerk-js --filter=@clerk/ui",
  "format": "turbo format && node scripts/format-non-workspace.mjs",
  "format:check": "turbo format:check && node scripts/format-non-workspace.mjs --check",
  "preinstall": "npx only-allow pnpm",

packages/clerk-js/package.json

@@ -35,7 +35,7 @@
  "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",
- "build:sandbox": "rspack build --config rspack.config.js --env production --env sandbox",
+ "build:sandbox": "pnpm --filter @clerk/ui build:umd && rspack build --config rspack.config.js --env production --env sandbox",
  "build:stats": "rspack build --config rspack.config.js --env production --json=stats.json --env variant=\"clerk.browser\"",
  "bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json",
  "bundlewatch:fix": "node bundlewatch-fix.mjs",

packages/clerk-js/rspack.config.js

@@ -252,11 +252,17 @@ const prodConfig = ({ mode, env, analysis }) => {
  ? {
  entry: { sandbox: './sandbox/app.ts' },
  plugins: [
+ new rspack.CopyRspackPlugin({
+ patterns: [{ from: path.resolve(__dirname, '../ui/dist/*.js'), to: '[name][ext]' }],
+ }),
  new rspack.HtmlRspackPlugin({
  minify: false,
  template: './sandbox/template.html',
  inject: false,
  hash: true,
+ templateParameters: {
+ uiScriptUrl: './ui.browser.js',
+ },
  }),
  ],
  }
@@ -456,6 +462,9 @@ const devConfig = ({ mode, env }) => {
  minify: false,
  template: './sandbox/template.html',
  inject: false,
+ templateParameters: {
+ uiScriptUrl: 'http://localhost:4001/npm/ui.browser.js',
+ },
  }),
  ].filter(Boolean),
  devtool: 'eval-cheap-source-map',

packages/clerk-js/sandbox/app.ts

@@ -378,6 +378,7 @@ void (async () => {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ clerkUiCtor: window.__internal_ClerkUiCtor,
  });
  renderCurrentRoute();
  updateVariables();

packages/clerk-js/sandbox/template.html

@@ -355,6 +355,12 @@
  </main>
 
  <!-- This app is in the Team SDK organization. -->
+ <!-- Load the UI bundle first, so window.__internal_ClerkUiCtor is available -->
+ <script
+ type="text/javascript"
+ src="<%= uiScriptUrl %>"
+ crossorigin="anonymous"
+ ></script>
  <script
  type="text/javascript"
  src="/<%= htmlRspackPlugin.files.js[0] %>"

packages/clerk-js/src/global.d.ts

@@ -17,4 +17,6 @@ const __BUILD_VARIANT_CHIPS__: boolean;
 interface Window {
  __internal_onBeforeSetActive: (intent?: 'sign-out') => Promise<void> | void;
  __internal_onAfterSetActive: () => Promise<void> | void;
+ // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+ __internal_ClerkUiCtor?: import('@clerk/shared/types').ClerkUiConstructor;
 }

packages/ui/package.json

@@ -54,6 +54,7 @@
  "clean": "rimraf ./dist",
  "dev": "tsdown --watch src",
  "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4001}",
+ "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4001",
  "format": "node ../../scripts/format-package.mjs",
  "format:check": "node ../../scripts/format-package.mjs --check",
  "lint:attw": "attw --pack . --exclude-entrypoints themes/shadcn.css --profile esm-only",

turbo.json

@@ -79,6 +79,11 @@
  "dependsOn": ["^build", "dev"],
  "persistent": true
  },
+ "dev:sandbox": {
+ "cache": false,
+ "dependsOn": ["^build"],
+ "persistent": true
+ },
  "clean": {
  "cache": false
  },