Merge pull request #25 from GangWangAI/fix/playground-browser-dev-boot

fix(playground): make browser playground boot in repo dev mode

Author: NathanFlurry

packages/playground/backend/server.ts

@@ -21,10 +21,14 @@ import { fileURLToPath } from "node:url";
 const DEFAULT_PORT = Number(process.env.PORT ?? "4173");
 const playgroundDir = resolve(fileURLToPath(new URL("..", import.meta.url)));
 const secureExecDir = resolve(playgroundDir, "../secure-exec");
+const secureExecCoreDir = resolve(playgroundDir, "../secure-exec-core");
+const secureExecBrowserDir = resolve(playgroundDir, "../secure-exec-browser");
 
 /* Map URL prefixes to filesystem directories outside playgroundDir */
 const PATH_ALIASES: Array<{ prefix: string; dir: string }> = [
 	{ prefix: "/secure-exec/", dir: secureExecDir },
+	{ prefix: "/secure-exec-core/", dir: secureExecCoreDir },
+	{ prefix: "/secure-exec-browser/", dir: secureExecBrowserDir },
 ];
 
 const mimeTypes = new Map<string, string>([

packages/playground/frontend/index.html

@@ -9,6 +9,15 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <script defer src="/vendor/typescript.js"></script>
     <script defer src="/vendor/monaco/vs/loader.js"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "secure-exec/browser": "/secure-exec/dist/browser-runtime.js",
+          "@secure-exec/core": "/secure-exec-core/dist/index.js",
+          "@secure-exec/browser": "/secure-exec-browser/dist/index.js"
+        }
+      }
+    </script>
     <style>
       :root {
         color-scheme: dark;

packages/playground/scripts/build-worker.ts

@@ -4,18 +4,22 @@ import { fileURLToPath } from "node:url";
 import { build } from "esbuild";
 
 const playgroundDir = resolve(fileURLToPath(new URL("..", import.meta.url)));
-const workerSourcePath = resolve(playgroundDir, "../secure-exec/src/browser/worker.ts");
+const workerSourcePath = resolve(playgroundDir, "../secure-exec-browser/src/worker.ts");
 const workerSourceDir = dirname(workerSourcePath);
 const workerOutputPath = resolve(playgroundDir, "secure-exec-worker.js");
 const appSourcePath = resolve(playgroundDir, "frontend/app.ts");
 const appOutputPath = resolve(playgroundDir, "dist/app.js");
 
 const BRIDGE_IMPORT_BLOCK = `\tlet bridgeModule: Record<string, unknown>;
 \ttry {
-\t\tbridgeModule = await dynamicImportModule("../bridge/index.js");
+\t\tbridgeModule = await dynamicImportModule("@secure-exec/core/internal/bridge");
 \t} catch {
-\t\t// Vite browser tests execute source files directly, so \`.ts\` fallback is required.
-\t\tbridgeModule = await dynamicImportModule("../bridge/index.ts");
+\t\t// Vite browser tests may need source fallback.
+\t\ttry {
+\t\t\tbridgeModule = await dynamicImportModule("@secure-exec/core/internal/bridge");
+\t\t} catch {
+\t\t\tthrow new Error("Failed to load bridge module from @secure-exec/core");
+\t\t}
 \t}`;
 
 async function writeGeneratedBundle(outputPath: string, sourcePath: string): Promise<void> {
@@ -27,10 +31,10 @@ async function buildWorkerBundle(): Promise<void> {
 	const originalSource = await readFile(workerSourcePath, "utf8");
 	const patchedSource = originalSource
 		.replace(
-			'import { mkdir } from "../fs-helpers.js";',
-			'import { mkdir } from "../fs-helpers.js";\nimport * as browserWorkerBridgeModule from "../bridge/index.ts";',
+			'import { validatePermissionSource } from "./permission-validation.js";',
+			'import { validatePermissionSource } from "./permission-validation.js";\nimport importedBridgeModule from "@secure-exec/core/internal/bridge";',
 		)
-		.replace(BRIDGE_IMPORT_BLOCK, "\tconst bridgeModule = browserWorkerBridgeModule;");
+		.replace(BRIDGE_IMPORT_BLOCK, "\tconst bridgeModule = { default: importedBridgeModule };");
 
 	await build({
 		bundle: true,