feat(clerk-js): Emit sandbox to dist on build (#4608)

clerk · Nov 20, 2024 · 27526a3 · 27526a3
1 parent 75bff25
commit 27526a3
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 12 deletions.
diff --git a/.changeset/large-bulldogs-tap.md b/.changeset/large-bulldogs-tap.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json
@@ -34,12 +34,13 @@
     "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:stats": "rspack build --config rspack.config.js --env production --json=stats.json --env variant=\"clerk.browser\"",
     "bundlewatch": "pnpm dlx bundlewatch --config bundlewatch.config.json",
     "clean": "rimraf ./dist",
     "dev": "rspack serve --config rspack.config.js",
     "dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
-    "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4000",
+    "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4000 --env sandbox=1",
     "lint": "eslint src/",
     "lint:attw": "attw --pack .",
     "lint:publint": "publint || true",

diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js
@@ -308,11 +308,27 @@ const entryForVariant = variant => {
  * @param {object} config
  * @param {'development'|'production'} config.mode
  * @param {boolean} config.analysis
+ * @param {object} config.env
  * @returns {(import('@rspack/core').Configuration)[]}
  */
-const prodConfig = ({ mode, analysis }) => {
+const prodConfig = ({ mode, env, analysis }) => {
+  const isSandbox = !!env.sandbox;
+
   const clerkBrowser = merge(
     entryForVariant(variants.clerkBrowser),
+    isSandbox
+      ? {
+          entry: { sandbox: './sandbox/app.js' },
+          plugins: [
+            new rspack.HtmlRspackPlugin({
+              minify: false,
+              template: './sandbox/template.html',
+              inject: false,
+              hash: true,
+            }),
+          ],
+        }
+      : {},
     common({ mode }),
     commonForProd(),
     commonForProdChunked(),
@@ -404,19 +420,28 @@ const devConfig = ({ mode, env }) => {
   // accept an optional devOrigin environment option to change the origin of the dev server.
   // By default we use https://js.lclclerk.com which is what our local dev proxy looks for.
   const devUrl = new URL(env.devOrigin || 'https://js.lclclerk.com');
+  const isSandbox = !!env.sandbox;
 
   /** @type {() => import('@rspack/core').Configuration} */
   const commonForDev = () => {
     return {
       module: {
         rules: [svgLoader(), ...typescriptLoaderDev(), clerkUICSSLoader()],
       },
-      plugins: [new ReactRefreshPlugin(/** @type {any} **/ ({ overlay: { sockHost: devUrl.host } }))],
+      plugins: [
+        new ReactRefreshPlugin(/** @type {any} **/ ({ overlay: { sockHost: devUrl.host } })),
+        isSandbox &&
+          new rspack.HtmlRspackPlugin({
+            minify: false,
+            template: './sandbox/template.html',
+            inject: false,
+          }),
+      ].filter(Boolean),
       devtool: 'eval-cheap-source-map',
       output: {
-        publicPath: `${devUrl.origin}/npm`,
+        publicPath: isSandbox ? `` : `${devUrl.origin}/npm`,
         crossOriginLoading: 'anonymous',
-        filename: `${variant}.js`,
+        filename: `[name].js`,
         libraryTarget: 'umd',
       },
       optimization: {
@@ -430,10 +455,11 @@ const devConfig = ({ mode, env }) => {
         hot: true,
         liveReload: false,
         client: { webSocketURL: `auto://${devUrl.host}/ws` },
-        static: './sandbox',
-        historyApiFallback: {
-          index: '/index.html',
-        },
+        ...(isSandbox
+          ? {
+              historyApiFallback: true,
+            }
+          : {}),
       },
     };
   };
@@ -448,6 +474,7 @@ const devConfig = ({ mode, env }) => {
     // prettier-ignore
     [variants.clerkBrowser]: merge(
       entryForVariant(variants.clerkBrowser),
+      isSandbox ? { entry: { sandbox: './sandbox/app.js' } } : {},
       common({ mode }),
       commonForDev(),
     ),
@@ -476,5 +503,5 @@ module.exports = env => {
   const mode = env.production ? 'production' : 'development';
   const analysis = !!env.analysis;
 
-  return isProduction(mode) ? prodConfig({ mode, analysis }) : devConfig({ mode, env });
+  return isProduction(mode) ? prodConfig({ mode, env, analysis }) : devConfig({ mode, env });
 };
diff --git a/packages/clerk-js/sandbox/app.js b/packages/clerk-js/sandbox/app.js
@@ -177,5 +177,7 @@ function addCurrentRouteIndicator(currentRoute) {
       signUpUrl: '/sign-up',
     });
     renderCurrentRoute();
+  } else {
+    console.error(`Unknown route: "${route}".`);
   }
 })();
diff --git a/packages/clerk-js/sandbox/index.html → packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/index.html → packages/clerk-js/sandbox/template.html
@@ -200,12 +200,12 @@
     <!-- This app is in the Team SDK organization. -->
     <script
       type="text/javascript"
-      src="/npm/clerk.browser.js"
+      src="/<%= htmlRspackPlugin.files.js[0] %>"
       data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
     ></script>
     <script
       type="text/javascript"
-      src="/app.js"
+      src="/<%= htmlRspackPlugin.files.js[1] %>"
     ></script>
   </body>
 </html>
diff --git a/packages/clerk-js/turbo.json b/packages/clerk-js/turbo.json
@@ -22,6 +22,11 @@
         "!node_modules/**"
       ]
     },
+    "build:sandbox": {
+      "dependsOn": ["^build"],
+      "inputs": ["sandbox/**"],
+      "outputs": ["dist/**"]
+    },
     "test": {
       "inputs": [
         "*.d.ts",