@druid-ui/build 1.7.2-next.2 → 2.1.0

package/bin/index.js

@@ -3,10 +3,10 @@
 // src/index.ts
 import { componentize } from "@bytecodealliance/componentize-js";
 import { build } from "esbuild";
-import fs3 from "node:fs/promises";
+import fs2 from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { createRequire } from "node:module";
-import { basename as basename2 } from "node:path";
+import { dirname, basename as basename2 } from "node:path";
 
 // src/utils.ts
 import path from "node:path";
@@ -39,37 +39,18 @@ async function getWitFolder(withFiles, witPath = "wit-out") {
 }
 
 // src/esbuild-plugin.ts
-import fs2 from "fs/promises";
 function druidExtensionPlugin() {
   return {
     name: "druid-extension",
     setup(build2) {
-      build2.onLoad({ filter: /\.[jt]sx?$/ }, async (args2) => {
-        let code = await fs2.readFile(args2.path, "utf8");
-        if (!code.includes("druid:ui/")) return;
-        const transformNamed = (_, vars, name) => {
-          const mapped = vars.split(",").map((v) => {
-            const [left, right] = v.split(/\s+as\s+/).map((s) => s.trim());
-            return right ? `${left}: ${right}` : left;
-          }).join(", ");
-          return `const { ${mapped} } = window["druid-extension"]["${name}"];`;
-        };
-        code = code.replace(
-          /import\s*{\s*([^}]+)\s*}\s*from\s*["'](druid:ui\/[^"']+)["'];?/g,
-          transformNamed
-        ).replace(
-          /import\s+\*\s+as\s+([\w$]+)\s+from\s*["'](druid:ui\/[^"']+)["'];?/g,
-          (_, id, name) => `const ${id} = window["druid-extension"]["${name}"];`
-        ).replace(
-          /import\s+([\w$]+)\s+from\s*["'](druid:ui\/[^"']+)["'];?/g,
-          (_, id, name) => `const ${id} = window["druid-extension"]["${name}"];`
-        );
-        let loader = "js";
-        if (args2.path.endsWith(".ts")) loader = "ts";
-        else if (args2.path.endsWith(".tsx")) loader = "tsx";
-        else if (args2.path.endsWith(".jsx")) loader = "jsx";
-        return { contents: code, loader };
-      });
+      build2.onResolve({ filter: /^druid:ui\// }, (args2) => ({
+        path: args2.path,
+        namespace: "druid-ext"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "druid-ext" }, (args2) => ({
+        contents: `module.exports = window["druid-extension"]["${args2.path}"];`,
+        loader: "js"
+      }));
     }
   };
 }
@@ -79,13 +60,13 @@ import { generateTypes } from "@bytecodealliance/jco/component";
 
 // src/index.ts
 var require2 = createRequire(import.meta.url);
-var getBundleFileName = (entryFile2) => {
+var getBundleFileName = (entryFile2, suffix = "") => {
   const name = basename2(entryFile2, ".tsx");
-  const outfilename = name + ".bundled.js";
+  const outfilename = name + ".bundled" + suffix + ".js";
   return outfilename;
 };
 async function buildWasm(entryFile2, outfolder2 = "./dist", witExtension) {
-  await fs3.mkdir(outfolder2, { recursive: true });
+  await fs2.mkdir(outfolder2, { recursive: true });
   const outfilename = getBundleFileName(entryFile2);
   const outfile = outfolder2 + "/" + outfilename;
   console.log("Building", entryFile2, "to", outfile);
@@ -112,12 +93,12 @@ async function buildWasm(entryFile2, outfolder2 = "./dist", witExtension) {
     disableFeatures: ["clocks", "http", "random", "stdio", "fetch-event"]
   });
   const name = basename2(entryFile2, ".tsx");
-  await fs3.writeFile(outfolder2 + "/" + name + ".wasm", result.component);
+  await fs2.writeFile(outfolder2 + "/" + name + ".wasm", result.component);
 }
 async function buildRaw(entryFile2, outfolder2 = "./dist") {
-  const outfilename = getBundleFileName(entryFile2);
+  const outfilename = getBundleFileName(entryFile2, "-raw");
   const outfile = outfolder2 + "/" + outfilename;
-  const rawPath = require2.resolve("@druid-ui/component/raw");
+  const componentDir = dirname(require2.resolve("@druid-ui/component"));
   await build({
     entryPoints: [entryFile2],
     bundle: true,
@@ -126,22 +107,29 @@ async function buildRaw(entryFile2, outfolder2 = "./dist") {
     outfile,
     plugins: [druidExtensionPlugin()],
     alias: {
-      "@druid-ui/component": rawPath
+      "@druid-ui/component": componentDir
     }
   });
 }
 
 // src/cmd/index.ts
+import { watch } from "node:fs";
+import { resolve as resolve2 } from "node:path";
 console.log("Druid UI Build Tool");
 var args = process.argv;
 var duBuildRaw = false;
 var worldName = "druid-ui";
+var watchMode = false;
 var witFiles = [];
 args = args.filter((arg) => {
   if (arg === "--raw") {
     duBuildRaw = true;
     return false;
   }
+  if (arg === "--watch" || arg === "-w") {
+    watchMode = true;
+    return false;
+  }
   if (arg.startsWith("--wit=")) {
     witFiles.push(arg.slice(6));
     return false;
@@ -155,18 +143,42 @@ args = args.filter((arg) => {
 var entryFile = args[2];
 if (!entryFile) {
   console.error(
-    "Usage: ./cli <entry-file> [out-folder] [--world-name=<name>] [--wit=<file>] [--raw]"
+    "Usage: ./cli <entry-file> [out-folder] [--world-name=<name>] [--wit=<file>] [--raw] [--watch|-w]"
   );
   process.exit(1);
 }
 var outfolder = args[3] || "./dist";
-console.log(`Building ${entryFile} to ${outfolder}...`);
-if (duBuildRaw) {
-  await buildRaw(entryFile, outfolder);
-} else {
-  await buildWasm(entryFile, outfolder, {
-    worldName,
-    files: witFiles
+async function doBuild() {
+  console.log(`Building ${entryFile} to ${outfolder}...`);
+  try {
+    if (duBuildRaw) {
+      await buildRaw(entryFile, outfolder);
+    } else {
+      await buildWasm(entryFile, outfolder, {
+        worldName,
+        files: witFiles
+      });
+    }
+    console.log("Build complete.");
+  } catch (error) {
+    console.error("Build failed:", error);
+  }
+}
+await doBuild();
+if (watchMode) {
+  console.log("Watching for changes...");
+  const srcDir = resolve2(entryFile, "..");
+  let building = false;
+  watch(srcDir, { recursive: true }, async (_eventType, filename) => {
+    if (filename && (filename.endsWith(".tsx") || filename.endsWith(".ts") || filename.endsWith(".jsx") || filename.endsWith(".js"))) {
+      if (building) return;
+      building = true;
+      console.log(`
+File changed: ${filename}`);
+      await doBuild();
+      building = false;
+    }
+  });
+  await new Promise(() => {
   });
 }
-console.log("Build complete.");

package/dist/index.js

@@ -1,10 +1,10 @@
 // src/index.ts
 import { componentize } from "@bytecodealliance/componentize-js";
 import { build } from "esbuild";
-import fs3 from "node:fs/promises";
+import fs2 from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { createRequire } from "node:module";
-import { basename as basename2 } from "node:path";
+import { dirname as dirname2, basename as basename2 } from "node:path";
 
 // src/utils.ts
 import path from "node:path";
@@ -37,37 +37,18 @@ async function getWitFolder(withFiles, witPath = "wit-out") {
 }
 
 // src/esbuild-plugin.ts
-import fs2 from "fs/promises";
 function druidExtensionPlugin() {
   return {
     name: "druid-extension",
     setup(build2) {
-      build2.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
-        let code = await fs2.readFile(args.path, "utf8");
-        if (!code.includes("druid:ui/")) return;
-        const transformNamed = (_, vars, name) => {
-          const mapped = vars.split(",").map((v) => {
-            const [left, right] = v.split(/\s+as\s+/).map((s) => s.trim());
-            return right ? `${left}: ${right}` : left;
-          }).join(", ");
-          return `const { ${mapped} } = window["druid-extension"]["${name}"];`;
-        };
-        code = code.replace(
-          /import\s*{\s*([^}]+)\s*}\s*from\s*["'](druid:ui\/[^"']+)["'];?/g,
-          transformNamed
-        ).replace(
-          /import\s+\*\s+as\s+([\w$]+)\s+from\s*["'](druid:ui\/[^"']+)["'];?/g,
-          (_, id, name) => `const ${id} = window["druid-extension"]["${name}"];`
-        ).replace(
-          /import\s+([\w$]+)\s+from\s*["'](druid:ui\/[^"']+)["'];?/g,
-          (_, id, name) => `const ${id} = window["druid-extension"]["${name}"];`
-        );
-        let loader = "js";
-        if (args.path.endsWith(".ts")) loader = "ts";
-        else if (args.path.endsWith(".tsx")) loader = "tsx";
-        else if (args.path.endsWith(".jsx")) loader = "jsx";
-        return { contents: code, loader };
-      });
+      build2.onResolve({ filter: /^druid:ui\// }, (args) => ({
+        path: args.path,
+        namespace: "druid-ext"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "druid-ext" }, (args) => ({
+        contents: `module.exports = window["druid-extension"]["${args.path}"];`,
+        loader: "js"
+      }));
     }
   };
 }
@@ -99,13 +80,13 @@ async function genTypes(withFiles, worldName = "druid-ui", typePath = "types", w
 
 // src/index.ts
 var require2 = createRequire(import.meta.url);
-var getBundleFileName = (entryFile) => {
+var getBundleFileName = (entryFile, suffix = "") => {
   const name = basename2(entryFile, ".tsx");
-  const outfilename = name + ".bundled.js";
+  const outfilename = name + ".bundled" + suffix + ".js";
   return outfilename;
 };
 async function buildWasm(entryFile, outfolder = "./dist", witExtension) {
-  await fs3.mkdir(outfolder, { recursive: true });
+  await fs2.mkdir(outfolder, { recursive: true });
   const outfilename = getBundleFileName(entryFile);
   const outfile = outfolder + "/" + outfilename;
   console.log("Building", entryFile, "to", outfile);
@@ -132,12 +113,12 @@ async function buildWasm(entryFile, outfolder = "./dist", witExtension) {
     disableFeatures: ["clocks", "http", "random", "stdio", "fetch-event"]
   });
   const name = basename2(entryFile, ".tsx");
-  await fs3.writeFile(outfolder + "/" + name + ".wasm", result.component);
+  await fs2.writeFile(outfolder + "/" + name + ".wasm", result.component);
 }
 async function buildRaw(entryFile, outfolder = "./dist") {
-  const outfilename = getBundleFileName(entryFile);
+  const outfilename = getBundleFileName(entryFile, "-raw");
   const outfile = outfolder + "/" + outfilename;
-  const rawPath = require2.resolve("@druid-ui/component/raw");
+  const componentDir = dirname2(require2.resolve("@druid-ui/component"));
   await build({
     entryPoints: [entryFile],
     bundle: true,
@@ -146,7 +127,7 @@ async function buildRaw(entryFile, outfolder = "./dist") {
     outfile,
     plugins: [druidExtensionPlugin()],
     alias: {
-      "@druid-ui/component": rawPath
+      "@druid-ui/component": componentDir
     }
   });
 }

package/dist/types/esbuild-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"esbuild-plugin.d.ts","sourceRoot":"","sources":["../../src/esbuild-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAGtC,wBAAgB,oBAAoB,IAAI,MAAM,CAgD7C"}
+{"version":3,"file":"esbuild-plugin.d.ts","sourceRoot":"","sources":["../../src/esbuild-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,oBAAoB,IAAI,MAAM,CAuB7C"}

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AASD,wBAAsB,SAAS,CAC7B,SAAS,KAAA,EACT,SAAS,SAAW,EACpB,YAAY,CAAC,EAAE,YAAY,iBAsC5B;AAED,wBAAsB,QAAQ,CAAC,SAAS,KAAA,EAAE,SAAS,SAAW,iBAiB7D;AAED,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AASD,wBAAsB,SAAS,CAC7B,SAAS,KAAA,EACT,SAAS,SAAW,EACpB,YAAY,CAAC,EAAE,YAAY,iBAsC5B;AAED,wBAAsB,QAAQ,CAAC,SAAS,KAAA,EAAE,SAAS,SAAW,iBAoB7D;AAED,cAAc,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@druid-ui/build",
-  "version": "1.7.2-next.2",
+  "version": "2.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@bytecodealliance/componentize-js": "^0.19.3",
-    "@bytecodealliance/jco": "^1.15.3",
-    "@bytecodealliance/preview2-shim": "^0.17.5",
+    "@bytecodealliance/jco": "^1.17.5",
+    "@bytecodealliance/preview2-shim": "^0.17.7",
     "esbuild": "^0.25.11"
   },
   "devDependencies": {

package/src/cmd/index.ts

@@ -1,11 +1,15 @@
 #!/usr/bin/env node
 
 import { buildWasm, buildRaw } from "../";
+import { watch } from "node:fs";
+import { resolve } from "node:path";
+
 console.log("Druid UI Build Tool");
 let args = process.argv;
 
 let duBuildRaw = false;
 let worldName = "druid-ui";
+let watchMode = false;
 const witFiles: string[] = [];
 
 args = args.filter((arg) => {
@@ -13,6 +17,10 @@ args = args.filter((arg) => {
     duBuildRaw = true;
     return false;
   }
+  if (arg === "--watch" || arg === "-w") {
+    watchMode = true;
+    return false;
+  }
   if (arg.startsWith("--wit=")) {
     witFiles.push(arg.slice(6));
     return false;
@@ -28,20 +36,53 @@ const entryFile = args[2];
 
 if (!entryFile) {
   console.error(
-    "Usage: ./cli <entry-file> [out-folder] [--world-name=<name>] [--wit=<file>] [--raw]",
+    "Usage: ./cli <entry-file> [out-folder] [--world-name=<name>] [--wit=<file>] [--raw] [--watch|-w]",
   );
   process.exit(1);
 }
 
 const outfolder = args[3] || "./dist";
-console.log(`Building ${entryFile} to ${outfolder}...`);
-if (duBuildRaw) {
-  await buildRaw(entryFile, outfolder);
-} else {
-  await buildWasm(entryFile, outfolder, {
-    worldName,
-    files: witFiles,
-  });
+
+async function doBuild() {
+  console.log(`Building ${entryFile} to ${outfolder}...`);
+  try {
+    if (duBuildRaw) {
+      await buildRaw(entryFile, outfolder);
+    } else {
+      await buildWasm(entryFile, outfolder, {
+        worldName,
+        files: witFiles,
+      });
+    }
+    console.log("Build complete.");
+  } catch (error) {
+    console.error("Build failed:", error);
+  }
 }
 
-console.log("Build complete.");
+await doBuild();
+
+if (watchMode) {
+  console.log("Watching for changes...");
+  const srcDir = resolve(entryFile, "..");
+  let building = false;
+
+  watch(srcDir, { recursive: true }, async (_eventType, filename) => {
+    if (
+      filename &&
+      (filename.endsWith(".tsx") ||
+        filename.endsWith(".ts") ||
+        filename.endsWith(".jsx") ||
+        filename.endsWith(".js"))
+    ) {
+      if (building) return;
+      building = true;
+      console.log(`\nFile changed: ${filename}`);
+      await doBuild();
+      building = false;
+    }
+  });
+
+  // Keep the process running
+  await new Promise(() => {});
+}

package/src/esbuild-plugin.ts

@@ -1,52 +1,26 @@
 import type { Plugin } from "esbuild";
-import fs from "fs/promises";
 
 export function druidExtensionPlugin(): Plugin {
   return {
     name: "druid-extension",
     setup(build) {
-      build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
-        let code = await fs.readFile(args.path, "utf8");
-        if (!code.includes("druid:ui/")) return;
+      // Intercept all druid:ui/* imports at the resolution level.
+      // This is much more robust than regex-replacing file content,
+      // because it doesn't depend on reading source files from disk.
+      build.onResolve({ filter: /^druid:ui\// }, (args) => ({
+        path: args.path,
+        namespace: "druid-ext",
+      }));
 
-        const transformNamed = (_: string, vars: string, name: string) => {
-          const mapped = vars
-            .split(",")
-            .map((v) => {
-              const [left, right] = v.split(/\s+as\s+/).map((s) => s.trim());
-              return right ? `${left}: ${right}` : left;
-            })
-            .join(", ");
-          return `const { ${mapped} } = window["druid-extension"]["${name}"];`;
-        };
-
-        code = code
-          // named imports
-          .replace(
-            /import\s*{\s*([^}]+)\s*}\s*from\s*["'](druid:ui\/[^"']+)["'];?/g,
-            transformNamed
-          )
-          // namespace imports
-          .replace(
-            /import\s+\*\s+as\s+([\w$]+)\s+from\s*["'](druid:ui\/[^"']+)["'];?/g,
-            (_, id: string, name: string) =>
-              `const ${id} = window["druid-extension"]["${name}"];`
-          )
-          // default imports
-          .replace(
-            /import\s+([\w$]+)\s+from\s*["'](druid:ui\/[^"']+)["'];?/g,
-            (_, id: string, name: string) =>
-              `const ${id} = window["druid-extension"]["${name}"];`
-          );
-
-        // choose loader based on file extension
-        let loader: "ts" | "tsx" | "js" | "jsx" = "js";
-        if (args.path.endsWith(".ts")) loader = "ts";
-        else if (args.path.endsWith(".tsx")) loader = "tsx";
-        else if (args.path.endsWith(".jsx")) loader = "jsx";
-
-        return { contents: code, loader };
-      });
+      // Provide a virtual CJS module that re-exports everything from
+      // window["druid-extension"]["<module-path>"].
+      // esbuild handles the CJS→ESM interop automatically, so
+      // `import { d } from "druid:ui/ui"` correctly maps to
+      // `window["druid-extension"]["druid:ui/ui"].d`.
+      build.onLoad({ filter: /.*/, namespace: "druid-ext" }, (args) => ({
+        contents: `module.exports = window["druid-extension"]["${args.path}"];`,
+        loader: "js",
+      }));
     },
   };
 }

package/src/index.ts

@@ -15,17 +15,17 @@ export interface WitExtension {
   files: string[];
 }
 
-const getBundleFileName = (entryFile) => {
+const getBundleFileName = (entryFile, suffix = "") => {
   const name = basename(entryFile, ".tsx");
 
-  const outfilename = name + ".bundled.js";
+  const outfilename = name + ".bundled" + suffix + ".js";
   return outfilename;
 };
 
 export async function buildWasm(
   entryFile,
   outfolder = "./dist",
-  witExtension?: WitExtension
+  witExtension?: WitExtension,
 ) {
   await fs.mkdir(outfolder, { recursive: true });
 
@@ -66,11 +66,14 @@ export async function buildWasm(
 }
 
 export async function buildRaw(entryFile, outfolder = "./dist") {
-  const outfilename = getBundleFileName(entryFile);
+  const outfilename = getBundleFileName(entryFile, "-raw");
 
   const outfile = outfolder + "/" + outfilename;
 
-  const rawPath = require.resolve("@druid-ui/component/raw");
+  // Alias to the dist/ directory (not a specific file) so subpath imports like
+  // @druid-ui/component/jsx-runtime also resolve correctly.
+  // This resolves to dist/ which contains index.js, jsx-runtime.js, etc.
+  const componentDir = dirname(require.resolve("@druid-ui/component"));
   await build({
     entryPoints: [entryFile],
     bundle: true,
@@ -79,7 +82,7 @@ export async function buildRaw(entryFile, outfolder = "./dist") {
     outfile: outfile,
     plugins: [druidExtensionPlugin()],
     alias: {
-      "@druid-ui/component": rawPath,
+      "@druid-ui/component": componentDir,
     },
   });
 }

package/wit/druid-ui.wit

@@ -30,8 +30,6 @@ interface utils {
         checked: func() -> bool;
     }
 
-    record context {
-        path: string
-    }
+    type context = list<tuple<string, string>>;
 
 }