@druid-ui/build 1.0.0-next.1

package/bin/gen-types.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+
+// src/gen-types.ts
+import { generateTypes } from "@bytecodealliance/jco/component";
+import { mkdir, rm, writeFile } from "fs/promises";
+import { dirname, resolve as resolve2 } from "path";
+
+// src/utils.ts
+import path from "node:path";
+import fsSync from "node:fs";
+import fs from "node:fs/promises";
+import { resolve, basename } from "node:path";
+function getPackageJsonPath(startDir = import.meta.dirname) {
+  let dir = startDir;
+  while (dir !== path.parse(dir).root) {
+    const pkgJson = path.join(dir, "package.json");
+    if (fsSync.existsSync(pkgJson)) return dir;
+    dir = path.dirname(dir);
+  }
+  throw new Error("package.json not found");
+}
+async function getWitFolder(withFiles, witPath2 = "wit-out") {
+  await fs.mkdir(witPath2, { recursive: true });
+  const baseWitPath = getPackageJsonPath();
+  const witFiles = await fs.readdir(resolve(baseWitPath, "wit"));
+  for (const file of witFiles) {
+    await fs.copyFile(
+      resolve(baseWitPath, "wit", file),
+      resolve(witPath2, file)
+    );
+  }
+  for (const file of withFiles || []) {
+    const filename = basename(file);
+    await fs.copyFile(file, resolve(witPath2, filename));
+  }
+}
+
+// src/gen-types.ts
+async function genTypes(withFiles, worldName2 = "druid-ui", typePath = "types", witPath2 = "wit-out") {
+  await getWitFolder(withFiles, witPath2);
+  const t = await generateTypes(worldName2, {
+    wit: {
+      tag: "path",
+      val: resolve2(witPath2)
+    },
+    world: worldName2,
+    instantiation: {
+      tag: "async"
+    },
+    guest: true
+  });
+  for (const [filename, contents] of t) {
+    console.log("Writing generated type:", typePath + "/" + filename);
+    await mkdir(resolve2(typePath, dirname(filename)), { recursive: true });
+    await writeFile(resolve2(typePath, filename), contents);
+  }
+  await rm(witPath2, { recursive: true });
+}
+
+// src/cmd/gen-types.ts
+var args = process.argv.slice(2);
+var witPath;
+var outDir;
+var additionalFiles = [];
+args = args.filter((arg) => {
+  if (arg.startsWith("--temp-wit-path=")) {
+    witPath = arg.slice(16);
+    return false;
+  }
+  if (arg.startsWith("--out-dir=")) {
+    outDir = arg.slice(10);
+    return false;
+  }
+  return true;
+});
+if (args.length < 1) {
+  console.error(
+    "Usage: gen-types <world-name> [additional-wit-files...] [--wit-path=<path>] [--out-dir=<path>]"
+  );
+  process.exit(1);
+}
+var worldName = args[0];
+additionalFiles.push(...args.slice(1));
+await genTypes(additionalFiles, worldName, outDir, witPath);

package/bin/index.js

@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { componentize } from "@bytecodealliance/componentize-js";
+import { build } from "esbuild";
+import fs3 from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+import { basename as basename2 } from "node:path";
+
+// src/utils.ts
+import path from "node:path";
+import fsSync from "node:fs";
+import fs from "node:fs/promises";
+import { resolve, basename } from "node:path";
+function getPackageJsonPath(startDir = import.meta.dirname) {
+  let dir = startDir;
+  while (dir !== path.parse(dir).root) {
+    const pkgJson = path.join(dir, "package.json");
+    if (fsSync.existsSync(pkgJson)) return dir;
+    dir = path.dirname(dir);
+  }
+  throw new Error("package.json not found");
+}
+async function getWitFolder(withFiles, witPath = "wit-out") {
+  await fs.mkdir(witPath, { recursive: true });
+  const baseWitPath = getPackageJsonPath();
+  const witFiles2 = await fs.readdir(resolve(baseWitPath, "wit"));
+  for (const file of witFiles2) {
+    await fs.copyFile(
+      resolve(baseWitPath, "wit", file),
+      resolve(witPath, file)
+    );
+  }
+  for (const file of withFiles || []) {
+    const filename = basename(file);
+    await fs.copyFile(file, resolve(witPath, filename));
+  }
+}
+
+// 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 };
+      });
+    }
+  };
+}
+
+// src/gen-types.ts
+import { generateTypes } from "@bytecodealliance/jco/component";
+
+// src/index.ts
+var require2 = createRequire(import.meta.url);
+var getBundleFileName = (entryFile2) => {
+  const name = basename2(entryFile2, ".tsx");
+  const outfilename = name + ".bundled.js";
+  return outfilename;
+};
+async function buildWasm(entryFile2, outfolder2 = "./dist", witExtension) {
+  await fs3.mkdir(outfolder2, { recursive: true });
+  const outfilename = getBundleFileName(entryFile2);
+  const outfile = outfolder2 + "/" + outfilename;
+  console.log("Building", entryFile2, "to", outfile);
+  await build({
+    entryPoints: [entryFile2],
+    bundle: true,
+    write: true,
+    format: "esm",
+    outfile,
+    external: ["druid:ui/*"]
+  });
+  const __filename = fileURLToPath(import.meta.url);
+  let witDist = outfolder2 + "/wit";
+  if (witExtension?.files?.length) {
+    await getWitFolder(witExtension.files, witDist);
+  } else {
+    witDist = getPackageJsonPath() + "/wit";
+  }
+  console.log("Generating WIT to", witDist);
+  const result = await componentize({
+    witPath: witDist,
+    worldName: witExtension?.worldName || "druid-ui",
+    sourcePath: outfile,
+    disableFeatures: ["clocks", "http", "random", "stdio", "fetch-event"]
+  });
+  const name = basename2(entryFile2, ".tsx");
+  await fs3.writeFile(outfolder2 + "/" + name + ".wasm", result.component);
+}
+async function buildRaw(entryFile2, outfolder2 = "./dist") {
+  const outfilename = getBundleFileName(entryFile2);
+  const outfile = outfolder2 + "/" + outfilename;
+  const rawPath = require2.resolve("@druid-ui/component/raw");
+  await build({
+    entryPoints: [entryFile2],
+    bundle: true,
+    write: true,
+    format: "esm",
+    outfile,
+    plugins: [druidExtensionPlugin()],
+    alias: {
+      "@druid-ui/component": rawPath
+    }
+  });
+}
+
+// src/cmd/index.ts
+console.log("Druid UI Build Tool");
+var args = process.argv;
+var duBuildRaw = false;
+var worldName = "druid-ui";
+var witFiles = [];
+args = args.filter((arg) => {
+  if (arg === "--raw") {
+    duBuildRaw = true;
+    return false;
+  }
+  if (arg.startsWith("--wit=")) {
+    witFiles.push(arg.slice(6));
+    return false;
+  }
+  if (arg.startsWith("--world-name=")) {
+    worldName = arg.slice(13);
+    return false;
+  }
+  return true;
+});
+var entryFile = args[2];
+if (!entryFile) {
+  console.error(
+    "Usage: ./cli <entry-file> [out-folder] [--world-name=<name>] [--wit=<file>] [--raw]"
+  );
+  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
+  });
+}
+console.log("Build complete.");

package/dist/index.js

@@ -0,0 +1,157 @@
+// src/index.ts
+import { componentize } from "@bytecodealliance/componentize-js";
+import { build } from "esbuild";
+import fs3 from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+import { basename as basename2 } from "node:path";
+
+// src/utils.ts
+import path from "node:path";
+import fsSync from "node:fs";
+import fs from "node:fs/promises";
+import { resolve, basename } from "node:path";
+function getPackageJsonPath(startDir = import.meta.dirname) {
+  let dir = startDir;
+  while (dir !== path.parse(dir).root) {
+    const pkgJson = path.join(dir, "package.json");
+    if (fsSync.existsSync(pkgJson)) return dir;
+    dir = path.dirname(dir);
+  }
+  throw new Error("package.json not found");
+}
+async function getWitFolder(withFiles, witPath = "wit-out") {
+  await fs.mkdir(witPath, { recursive: true });
+  const baseWitPath = getPackageJsonPath();
+  const witFiles = await fs.readdir(resolve(baseWitPath, "wit"));
+  for (const file of witFiles) {
+    await fs.copyFile(
+      resolve(baseWitPath, "wit", file),
+      resolve(witPath, file)
+    );
+  }
+  for (const file of withFiles || []) {
+    const filename = basename(file);
+    await fs.copyFile(file, resolve(witPath, filename));
+  }
+}
+
+// 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 };
+      });
+    }
+  };
+}
+
+// src/gen-types.ts
+import { generateTypes } from "@bytecodealliance/jco/component";
+import { mkdir, rm, writeFile } from "fs/promises";
+import { dirname, resolve as resolve2 } from "path";
+async function genTypes(withFiles, worldName = "druid-ui", typePath = "types", witPath = "wit-out") {
+  await getWitFolder(withFiles, witPath);
+  const t = await generateTypes(worldName, {
+    wit: {
+      tag: "path",
+      val: resolve2(witPath)
+    },
+    world: worldName,
+    instantiation: {
+      tag: "async"
+    },
+    guest: true
+  });
+  for (const [filename, contents] of t) {
+    console.log("Writing generated type:", typePath + "/" + filename);
+    await mkdir(resolve2(typePath, dirname(filename)), { recursive: true });
+    await writeFile(resolve2(typePath, filename), contents);
+  }
+  await rm(witPath, { recursive: true });
+}
+
+// src/index.ts
+var require2 = createRequire(import.meta.url);
+var getBundleFileName = (entryFile) => {
+  const name = basename2(entryFile, ".tsx");
+  const outfilename = name + ".bundled.js";
+  return outfilename;
+};
+async function buildWasm(entryFile, outfolder = "./dist", witExtension) {
+  await fs3.mkdir(outfolder, { recursive: true });
+  const outfilename = getBundleFileName(entryFile);
+  const outfile = outfolder + "/" + outfilename;
+  console.log("Building", entryFile, "to", outfile);
+  await build({
+    entryPoints: [entryFile],
+    bundle: true,
+    write: true,
+    format: "esm",
+    outfile,
+    external: ["druid:ui/*"]
+  });
+  const __filename = fileURLToPath(import.meta.url);
+  let witDist = outfolder + "/wit";
+  if (witExtension?.files?.length) {
+    await getWitFolder(witExtension.files, witDist);
+  } else {
+    witDist = getPackageJsonPath() + "/wit";
+  }
+  console.log("Generating WIT to", witDist);
+  const result = await componentize({
+    witPath: witDist,
+    worldName: witExtension?.worldName || "druid-ui",
+    sourcePath: outfile,
+    disableFeatures: ["clocks", "http", "random", "stdio", "fetch-event"]
+  });
+  const name = basename2(entryFile, ".tsx");
+  await fs3.writeFile(outfolder + "/" + name + ".wasm", result.component);
+}
+async function buildRaw(entryFile, outfolder = "./dist") {
+  const outfilename = getBundleFileName(entryFile);
+  const outfile = outfolder + "/" + outfilename;
+  const rawPath = require2.resolve("@druid-ui/component/raw");
+  await build({
+    entryPoints: [entryFile],
+    bundle: true,
+    write: true,
+    format: "esm",
+    outfile,
+    plugins: [druidExtensionPlugin()],
+    alias: {
+      "@druid-ui/component": rawPath
+    }
+  });
+}
+export {
+  buildRaw,
+  buildWasm,
+  genTypes
+};

package/dist/types/cmd/gen-types.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=gen-types.d.ts.map

package/dist/types/cmd/gen-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gen-types.d.ts","sourceRoot":"","sources":["../../../src/cmd/gen-types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cmd/index.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+import type { Plugin } from "esbuild";
+export declare function druidExtensionPlugin(): Plugin;
+//# sourceMappingURL=esbuild-plugin.d.ts.map

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

@@ -0,0 +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"}

package/dist/types/gen-types.d.ts

@@ -0,0 +1,2 @@
+export declare function genTypes(withFiles: string[], worldName?: string, typePath?: string, witPath?: string): Promise<void>;
+//# sourceMappingURL=gen-types.d.ts.map

package/dist/types/gen-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gen-types.d.ts","sourceRoot":"","sources":["../../src/gen-types.ts"],"names":[],"mappings":"AAKA,wBAAsB,QAAQ,CAC5B,SAAS,EAAE,MAAM,EAAE,EACnB,SAAS,SAAa,EACtB,QAAQ,SAAU,EAClB,OAAO,SAAY,iBAqBpB"}

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+export interface WitExtension {
+    worldName: string;
+    files: string[];
+}
+export declare function buildWasm(entryFile: any, outfolder?: string, witExtension?: WitExtension): Promise<void>;
+export declare function buildRaw(entryFile: any, outfolder?: string): Promise<void>;
+export * from "./gen-types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/types/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function getPackageJsonPath(startDir?: string): string;
+export declare function getWitFolder(withFiles: string[], witPath?: string): Promise<void>;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAKA,wBAAgB,kBAAkB,CAChC,QAAQ,GAAE,MAA4B,GACrC,MAAM,CAQR;AAED,wBAAsB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,OAAO,SAAY,iBAiB1E"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@druid-ui/build",
+  "version": "1.0.0-next.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "bin": {
+    "druid-ui-build": "./bin/index.js",
+    "druid-ui-gen-types": "./bin/gen-types.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "bin",
+    "wit",
+    "src"
+  ],
+  "scripts": {
+    "build": "npm run build:lib && npm run build:cli && npm run build:cli-types && npm run build:types && npm rebuild --ignore-scripts @druid-ui/build",
+    "build:lib": "esbuild src/index.ts --bundle --platform=node --format=esm --target=node22 --outfile=dist/index.js --external:@bytecodealliance/jco --external:esbuild --external:@bytecodealliance/componentize-js --external:@druid-ui/component",
+    "build:cli": "esbuild src/cmd/index.ts --bundle --platform=node --format=esm --target=node22 --outfile=bin/index.js --external:@bytecodealliance/jco --external:esbuild --external:@bytecodealliance/componentize-js --external:@druid-ui/component",
+    "build:cli-types": "esbuild src/cmd/gen-types.ts --bundle --platform=node --format=esm --target=node22 --outfile=bin/gen-types.js --external:@bytecodealliance/jco --external:esbuild --external:@bytecodealliance/componentize-js",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist/types"
+  },
+  "dependencies": {
+    "@bytecodealliance/componentize-js": "^0.19.3",
+    "@bytecodealliance/jco": "^1.15.3",
+    "@bytecodealliance/preview2-shim": "^0.17.5",
+    "esbuild": "^0.25.11"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "~5.8.3"
+  }
+}

package/src/cmd/gen-types.ts

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import { genTypes } from "../gen-types";
+
+// Expected signature: genTypes(withFiles: string[], worldName: string, typePath: string, witPath: string)
+// CLI usage: gen-types <world-name> [additional-wit-files...] [--wit-path=<path>] [--out-dir=<path>]
+// <world-name>: WIT world name to generate types for
+// [additional-wit-files...]: optional extra WIT files to include alongside built-ins
+// [--wit-path=<path>]: directory to copy built-in WIT definitions into (default: "wit-out")
+// [--out-dir=<path>]: output directory for generated TypeScript types (default: "types")
+
+let args = process.argv.slice(2);
+let witPath: string | undefined;
+let outDir: string | undefined;
+const additionalFiles: string[] = [];
+
+args = args.filter((arg) => {
+  if (arg.startsWith("--temp-wit-path=")) {
+    witPath = arg.slice(16);
+    return false;
+  }
+  if (arg.startsWith("--out-dir=")) {
+    outDir = arg.slice(10);
+    return false;
+  }
+  return true;
+});
+
+if (args.length < 1) {
+  console.error(
+    "Usage: gen-types <world-name> [additional-wit-files...] [--wit-path=<path>] [--out-dir=<path>]",
+  );
+  process.exit(1);
+}
+
+// Non-null assertion safe due to length check above
+const worldName = args[0]!;
+additionalFiles.push(...args.slice(1));
+
+await genTypes(additionalFiles, worldName, outDir, witPath);

package/src/cmd/index.ts

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+import { buildWasm, buildRaw } from "../";
+console.log("Druid UI Build Tool");
+let args = process.argv;
+
+let duBuildRaw = false;
+let worldName = "druid-ui";
+const witFiles: string[] = [];
+
+args = args.filter((arg) => {
+  if (arg === "--raw") {
+    duBuildRaw = true;
+    return false;
+  }
+  if (arg.startsWith("--wit=")) {
+    witFiles.push(arg.slice(6));
+    return false;
+  }
+  if (arg.startsWith("--world-name=")) {
+    worldName = arg.slice(13);
+    return false;
+  }
+  return true;
+});
+
+const entryFile = args[2];
+
+if (!entryFile) {
+  console.error(
+    "Usage: ./cli <entry-file> [out-folder] [--world-name=<name>] [--wit=<file>] [--raw]",
+  );
+  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,
+  });
+}
+
+console.log("Build complete.");

package/src/esbuild-plugin.ts

@@ -0,0 +1,52 @@
+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;
+
+        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 };
+      });
+    },
+  };
+}

package/src/gen-types.ts

@@ -0,0 +1,31 @@
+import { generateTypes } from "@bytecodealliance/jco/component";
+import { mkdir, rm, writeFile } from "fs/promises";
+import { dirname, resolve } from "path";
+import { getWitFolder } from "./utils";
+
+export async function genTypes(
+  withFiles: string[],
+  worldName = "druid-ui",
+  typePath = "types",
+  witPath = "wit-out"
+) {
+  await getWitFolder(withFiles, witPath);
+  const t = await generateTypes(worldName, {
+    wit: {
+      tag: "path",
+      val: resolve(witPath),
+    },
+    world: worldName,
+    instantiation: {
+      tag: "async",
+    },
+    guest: true,
+  });
+
+  for (const [filename, contents] of t) {
+    console.log("Writing generated type:", typePath + "/" + filename);
+    await mkdir(resolve(typePath, dirname(filename)), { recursive: true });
+    await writeFile(resolve(typePath, filename), contents);
+  }
+  await rm(witPath, { recursive: true });
+}

package/src/index.ts

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import { componentize } from "@bytecodealliance/componentize-js";
+import { build } from "esbuild";
+import fs from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+import { dirname, basename } from "node:path";
+import { getPackageJsonPath, getWitFolder } from "./utils";
+import { druidExtensionPlugin } from "./esbuild-plugin";
+
+const require = createRequire(import.meta.url);
+
+export interface WitExtension {
+  worldName: string;
+  files: string[];
+}
+
+const getBundleFileName = (entryFile) => {
+  const name = basename(entryFile, ".tsx");
+
+  const outfilename = name + ".bundled.js";
+  return outfilename;
+};
+
+export async function buildWasm(
+  entryFile,
+  outfolder = "./dist",
+  witExtension?: WitExtension
+) {
+  await fs.mkdir(outfolder, { recursive: true });
+
+  const outfilename = getBundleFileName(entryFile);
+
+  const outfile = outfolder + "/" + outfilename;
+  console.log("Building", entryFile, "to", outfile);
+  await build({
+    entryPoints: [entryFile],
+    bundle: true,
+    write: true,
+    format: "esm",
+    outfile: outfile,
+    external: ["druid:ui/*"],
+  });
+
+  const __filename = fileURLToPath(import.meta.url);
+
+  let witDist = outfolder + "/wit";
+
+  //if we want to extend, we need to copy the wit files into a unified folder
+  if (witExtension?.files?.length) {
+    await getWitFolder(witExtension.files, witDist);
+  } else {
+    witDist = getPackageJsonPath() + "/wit";
+  }
+
+  console.log("Generating WIT to", witDist);
+  const result = await componentize({
+    witPath: witDist,
+    worldName: witExtension?.worldName || "druid-ui",
+    sourcePath: outfile,
+    disableFeatures: ["clocks", "http", "random", "stdio", "fetch-event"],
+  });
+
+  const name = basename(entryFile, ".tsx");
+  await fs.writeFile(outfolder + "/" + name + ".wasm", result.component);
+}
+
+export async function buildRaw(entryFile, outfolder = "./dist") {
+  const outfilename = getBundleFileName(entryFile);
+
+  const outfile = outfolder + "/" + outfilename;
+
+  const rawPath = require.resolve("@druid-ui/component/raw");
+  await build({
+    entryPoints: [entryFile],
+    bundle: true,
+    write: true,
+    format: "esm",
+    outfile: outfile,
+    plugins: [druidExtensionPlugin()],
+    alias: {
+      "@druid-ui/component": rawPath,
+    },
+  });
+}
+
+export * from "./gen-types";

package/src/utils.ts

@@ -0,0 +1,35 @@
+import path from "node:path";
+import fsSync from "node:fs";
+import fs from "node:fs/promises";
+import { resolve, basename } from "node:path";
+
+export function getPackageJsonPath(
+  startDir: string = import.meta.dirname
+): string {
+  let dir = startDir;
+  while (dir !== path.parse(dir).root) {
+    const pkgJson = path.join(dir, "package.json");
+    if (fsSync.existsSync(pkgJson)) return dir;
+    dir = path.dirname(dir);
+  }
+  throw new Error("package.json not found");
+}
+
+export async function getWitFolder(withFiles: string[], witPath = "wit-out") {
+  //create outfolder/wit
+  await fs.mkdir(witPath, { recursive: true });
+
+  const baseWitPath = getPackageJsonPath();
+
+  const witFiles = await fs.readdir(resolve(baseWitPath, "wit"));
+  for (const file of witFiles) {
+    await fs.copyFile(
+      resolve(baseWitPath, "wit", file),
+      resolve(witPath, file)
+    );
+  }
+  for (const file of withFiles || []) {
+    const filename = basename(file);
+    await fs.copyFile(file, resolve(witPath, filename));
+  }
+}

package/wit/druid-component.wit

@@ -0,0 +1,16 @@
+package druid:ui;
+
+
+interface component {
+    use utils.{event, context};
+
+    init: func(ctx: context) -> string;
+    emit: func(nodeid: string, event: string, e: event);
+    async-complete: func(id: string, value: result<string>);
+}
+
+
+world druid-ui {
+    import ui;
+    export component;
+}

package/wit/druid-ui.wit

@@ -0,0 +1,37 @@
+package druid:ui;
+
+
+interface ui {
+
+    record prop { key: string, value: string, }
+
+    record props {
+        prop: list<prop>,
+        on: list<string>,
+    }
+
+    type async-id = string;
+
+    type children = option<list<string>>;
+
+    d: func(element: string, props: props, children: children) -> string;
+    log: func(msg: string);
+    set-hook: func(id: async-id, hook: string);
+    rerender: func();
+}
+
+interface utils {
+
+    resource event {
+        constructor(value: string, checked: bool);
+        prevent-default: func();
+        stop-propagation: func();
+        value: func() -> string;
+        checked: func() -> bool;
+    }
+
+    record context {
+        path: string
+    }
+
+}