@vizhub/runtime 4.0.1 → 4.0.2

package/README.md

@@ -337,6 +337,88 @@ npm install @vizhub/runtime
 
 ### Basic Usage
 
+#### createRuntime(options)
+
+Creates a runtime environment that manages code execution in an iframe with worker-based build support.
+
+```typescript
+const runtime = createRuntime({
+  iframe: HTMLIFrameElement,
+  worker: Worker,
+  setBuildErrorMessage?: (error: string | null) => void,
+  getLatestContent?: (vizId: string) => Promise<VizContent | null>,
+  resolveSlugKey?: (slugKey: string) => Promise<string | null>,
+  writeFile?: (fileName: string, content: string) => void
+});
+```
+
+##### Options
+
+- **iframe**: `HTMLIFrameElement` - The iframe element where the viz will be rendered
+- **worker**: `Worker` - Web Worker instance that handles code building
+- **setBuildErrorMessage**: `(error: string | null) => void` - Optional callback for handling build errors
+- **getLatestContent**: `(vizId: string) => Promise<VizContent | null>` - Optional function to fetch viz content for cross-viz imports
+- **resolveSlugKey**: `(slugKey: string) => Promise<string | null>` - Optional function to resolve viz slugs to IDs
+- **writeFile**: `(fileName: string, content: string) => void` - Optional callback when code running in the iframe writes files
+
+##### Returns
+
+Returns a `VizHubRuntime` object with methods:
+
+- **run**: `(options: RunOptions) => void` - Executes code in the iframe
+  - **options.files**: `FileCollection` - Map of filenames to file contents
+  - **options.enableHotReloading**: `boolean` - Enable hot reloading (v3 runtime only)
+  - **options.enableSourcemap**: `boolean` - Enable source maps for debugging
+  - **options.vizId**: `string` - ID of current viz (required for v3)
+- **cleanup**: `() => void` - Removes event listeners from worker and iframe
+- **invalidateVizCache**: `(changedVizIds: string[]) => Promise<void>` - Invalidates cache for specified viz IDs
+
+##### Example
+
+```javascript
+import { createRuntime } from "@vizhub/runtime";
+import BuildWorker from "./buildWorker?worker";
+
+// Get iframe from DOM
+const iframe = document.getElementById("viz-iframe");
+
+// Create worker
+const worker = new BuildWorker();
+
+// Initialize runtime
+const runtime = createRuntime({
+  iframe,
+  worker,
+  setBuildErrorMessage: (error) => {
+    error && console.error("Build error:", error);
+  },
+  getLatestContent: async (vizId) => {
+    // Fetch viz content from your backend
+    return await fetchVizContent(vizId);
+  },
+  resolveSlugKey: async (slugKey) => {
+    // Resolve slug to vizId from your backend
+    return await resolveSlug(slugKey);
+  },
+});
+
+// Run code in the iframe
+runtime.run({
+  files: {
+    "index.js":
+      'console.log("Hello from VizHub runtime!");',
+  },
+  enableHotReloading: true,
+  enableSourcemap: true,
+  vizId: "example-viz",
+});
+
+// Clean up when done
+runtime.cleanup();
+```
+
+### Building HTML Only
+
 ```javascript
 import { build } from "@vizhub/runtime";
 import { rollup } from "rollup";

package/dist/build/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/build/build.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAGL,SAAS,EACT,cAAc,EAEd,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAUtC,eAAO,MAAM,KAAK,GAAU,oFAQzB;IAGD,KAAK,CAAC,EAAE,cAAc,CAAC;IAGvB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IAQ1D,eAAe,CAAC,EAAE,OAAO,CAAC;IAI1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,cAAc,CAAC,CAAC;CACnD,KAAG,OAAO,CAAC,WAAW,CAmItB,CAAC"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/build/build.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAGL,SAAS,EACT,cAAc,EAEd,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAUtC,eAAO,MAAM,KAAK,GAAU,oFAQzB;IAGD,KAAK,CAAC,EAAE,cAAc,CAAC;IAGvB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IAQ1D,eAAe,CAAC,EAAE,OAAO,CAAC;IAI1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,cAAc,CAAC,CAAC;CACnD,KAAG,OAAO,CAAC,WAAW,CAuItB,CAAC"}

package/dist/build/types.d.ts

@@ -1,6 +1,7 @@
 export type runtimeVersion = "v1" | "v2" | "v3" | "v4";
 export type BuildResult = {
     html: string;
+    runtimeVersion: runtimeVersion;
     css?: string;
     js?: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/build/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAGvD,MAAM,MAAM,WAAW,GAAG;IAKxB,IAAI,EAAE,MAAM,CAAC;IAIb,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/build/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAGvD,MAAM,MAAM,WAAW,GAAG;IAKxB,IAAI,EAAE,MAAM,CAAC;IAGb,cAAc,EAAE,cAAc,CAAC;IAI/B,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}

package/dist/{build-C3ij8Dz4.js → build-B0moD9Cl.js}

@@ -1,5 +1,5 @@
 import { magicSandbox as $ } from "magic-sandbox";
-import { isVizId as V, getFileText as L, generateVizId as D, fileCollectionToVizFiles as B, vizFilesToFileCollection as A } from "@vizhub/viz-utils";
+import { isVizId as J, getFileText as L, generateVizId as D, fileCollectionToVizFiles as B, vizFilesToFileCollection as A } from "@vizhub/viz-utils";
 import { transform as q } from "sucrase";
 const Nt = () => (Math.random() + "").slice(2);
 function C(t = {}) {
@@ -54,7 +54,7 @@ const P = {
   d3: "d3",
   react: "React",
   "react-dom": "ReactDOM"
-}, U = (t) => {
+}, V = (t) => {
   const e = G(t);
   return {
     ...Y,
@@ -219,8 +219,8 @@ export { csvParse, tsvParse };`, Q = (t) => (
       if (!s.endsWith(".js") && !s.endsWith(".css") && !s.endsWith(".csv") && !s.endsWith(".svelte") && (s += ".js"), r) {
         const {
           vizId: i,
-          fileName: c
-        } = b(r), a = c.split("/").slice(0, -1).join("/"), l = a ? `${a}/${s}` : s;
+          fileName: a
+        } = b(r), c = a.split("/").slice(0, -1).join("/"), l = c ? `${c}/${s}` : s;
         return `${i}/${l}`;
       }
       return t + "/" + s;
@@ -228,7 +228,7 @@ export { csvParse, tsvParse };`, Q = (t) => (
     const o = Z(n);
     if (o) {
       let s;
-      if (V(o.idOrSlug))
+      if (J(o.idOrSlug))
         s = o.idOrSlug;
       else {
         if (!e)
@@ -252,21 +252,21 @@ export { csvParse, tsvParse };`, Q = (t) => (
   // `id` here is of the form
   // `{vizId}/{fileName}`
   load: async (o) => {
-    const s = b(o), i = s.vizId, c = s.fileName;
-    if (c.endsWith(".css"))
+    const s = b(o), i = s.vizId, a = s.fileName;
+    if (a.endsWith(".css"))
       return e(o), "";
-    let a = null;
+    let c = null;
     if (i === n && r)
-      a = r[c] || null;
+      c = r[a] || null;
     else {
       const l = await t.get(i);
-      a = L(l, c);
+      c = L(l, a);
     }
-    if (a === null)
+    if (c === null)
       throw new Error(
-        `Imported file "${c}" not found.`
+        `Imported file "${a}" not found.`
       );
-    return a;
+    return c;
   }
 }), M = /* @__PURE__ */ new Map();
 let I;
@@ -321,8 +321,8 @@ const x = "https://cdn.jsdelivr.net/npm/svelte@4.2.9", Ct = `${x}/compiler.cjs`,
   slugCache: s,
   getSvelteCompiler: i
 }) => {
-  const c = /* @__PURE__ */ new Set(), a = (d) => {
-    c.add(d);
+  const a = /* @__PURE__ */ new Set(), c = (d) => {
+    a.add(d);
   };
   if (!t["index.js"])
     throw new Error("Missing index.js");
@@ -336,7 +336,7 @@ const x = "https://cdn.jsdelivr.net/npm/svelte@4.2.9", Ct = `${x}/compiler.cjs`,
       ...r ? [
         tt({
           vizCache: r,
-          trackCSSImport: a,
+          trackCSSImport: c,
           vizId: o,
           files: t
         })
@@ -352,13 +352,13 @@ const x = "https://cdn.jsdelivr.net/npm/svelte@4.2.9", Ct = `${x}/compiler.cjs`,
     compact: !0
   }, w = S(t);
   if (w) {
-    const d = U(w);
+    const d = V(w);
     d && (u.external = Object.keys(d), m.globals = d);
   }
   const y = await e(u), { output: f } = await y.generate(m);
   return {
     src: f[0].code,
-    cssFiles: Array.from(c)
+    cssFiles: Array.from(a)
   };
 };
 function rt() {
@@ -458,7 +458,7 @@ const st = ({
   slugCache: s,
   getSvelteCompiler: i
 }) => {
-  const { src: c, cssFiles: a } = await nt({
+  const { src: a, cssFiles: c } = await nt({
     files: t,
     rollup: e,
     enableSourcemap: n,
@@ -468,15 +468,15 @@ const st = ({
     getSvelteCompiler: i
   });
   let l = [];
-  if (a.length > 0)
-    for (let f = 0; f < a.length; f++) {
-      const d = a[f], h = b(d), E = h.vizId, j = h.fileName;
+  if (c.length > 0)
+    for (let f = 0; f < c.length; f++) {
+      const d = c[f], h = b(d), E = h.vizId, j = h.fileName;
       let v = null;
       if (E === o && t)
         v = t[j] || null;
       else {
-        const J = await r.get(E);
-        v = L(J, j);
+        const z = await r.get(E);
+        v = L(z, j);
       }
       v && l.push(v);
     }
@@ -499,9 +499,10 @@ const st = ({
     }).join("");
   }
   return {
-    html: st({ cdn: w, src: c, styles: m }),
+    html: st({ cdn: w, src: a, styles: m }),
     css: u,
-    js: c
+    js: a,
+    runtimeVersion: "v3"
   };
 }, it = ({
   initialContents: t,
@@ -511,16 +512,16 @@ const st = ({
     t.map((i) => [i.id, i])
   );
   return { get: async (i) => {
-    const c = n.get(i);
-    if (c !== void 0)
-      return c;
+    const a = n.get(i);
+    if (a !== void 0)
+      return a;
     if (!e)
       throw new Error(
         `Unresolved import from vizId ${i}, cache miss handler not provided.`
       );
-    const a = await e(i);
-    if (a)
-      return n.set(i, a), a;
+    const c = await e(i);
+    if (c)
+      return n.set(i, c), c;
     throw new Error(
       `Unresolved import from vizId ${i}`
     );
@@ -540,9 +541,9 @@ const st = ({
     throw new Error(
       `Unresolved slug ${s}, cache miss handler not provided.`
     );
-  const c = await e(s);
-  if (c)
-    return t[s] = c, c;
+  const a = await e(s);
+  if (a)
+    return t[s] = a, a;
   throw new Error(`Unresolved slug ${s}`);
 }, set: (s, i) => {
   t[s] = i;
@@ -574,12 +575,12 @@ const st = ({
   const r = Object.entries(R(e));
   if (r.length) {
     const s = T(e);
-    r.forEach(([c]) => {
-      n = ut(n, new RegExp(`${c}@`));
+    r.forEach(([a]) => {
+      n = ut(n, new RegExp(`${a}@`));
     });
     const i = r.map(
-      ([c, a]) => F({ name: c, version: a }, s)
-    ).map((c) => `<script src="${c}"><\/script>`).join(`
+      ([a, c]) => F({ name: a, version: c }, s)
+    ).map((a) => `<script src="${a}"><\/script>`).join(`
 `);
     n = W(
       n,
@@ -589,9 +590,9 @@ const st = ({
     );
   }
   if (e["bundle.js"] !== void 0 || e["index.js"] !== void 0) {
-    const s = '<script src="bundle.js"><\/script>', i = /<script\b[^>]*\bsrc=["']bundle\.js["'][^>]*>\s*<\/script>/gi, c = [...n.matchAll(i)];
-    c.length === 1 && (() => {
-      const l = c[0].index ?? -1;
+    const s = '<script src="bundle.js"><\/script>', i = /<script\b[^>]*\bsrc=["']bundle\.js["'][^>]*>\s*<\/script>/gi, a = [...n.matchAll(i)];
+    a.length === 1 && (() => {
+      const l = a[0].index ?? -1;
       if (l === -1) return !1;
       const u = n.search(/<body\b[^>]*>/i), m = n.search(/<\/body>/i);
       return u !== -1 && m !== -1 && l > u && l < m;
@@ -609,7 +610,7 @@ const st = ({
   for (const s of r)
     s === ".." ? o.pop() : s !== "." && s !== "" && o.push(s);
   return o.join("/");
-}, z = (t) => ({
+}, U = (t) => ({
   name: "virtual-file-system",
   resolveId(e, n) {
     const r = n != null && n.startsWith(
@@ -620,10 +621,10 @@ const st = ({
       if (t[s])
         return p + s;
       const i = [".js", ".jsx", ".ts", ".tsx"];
-      for (const c of i) {
-        const a = s + c;
-        if (t[a])
-          return p + a;
+      for (const a of i) {
+        const c = s + a;
+        if (t[c])
+          return p + c;
       }
     }
     if (t[e])
@@ -656,19 +657,19 @@ const st = ({
     );
   const s = {
     input: "./" + r,
-    plugins: [z(t), C()],
+    plugins: [U(t), C()],
     onwarn(u, m) {
       u.code !== "UNRESOLVED_IMPORT" && m(u);
     }
   }, i = {
     format: "iife",
     sourcemap: n
-  }, c = S(t);
-  if (c) {
-    const u = U(c);
+  }, a = S(t);
+  if (a) {
+    const u = V(a);
     u && (s.external = Object.keys(u), i.globals = u);
   }
-  const a = await e(s), { output: l } = await a.generate(i);
+  const c = await e(s), { output: l } = await c.generate(i);
   return l[0].code;
 }, ht = async ({
   files: t,
@@ -709,7 +710,7 @@ const st = ({
   const s = {
     input: t.startsWith("./") ? t : `./${t}`,
     plugins: [
-      z(e),
+      U(e),
       C({
         // Enable JSX runtime
         // so we don't need to import React
@@ -728,13 +729,13 @@ const st = ({
     //   DEBUG && console.log("isExternal", isExternal);
     //   return isExternal;
     // },
-    onwarn(a, l) {
+    onwarn(c, l) {
     }
-  }, i = await n(s), { output: c } = await i.generate({
+  }, i = await n(s), { output: a } = await i.generate({
     format: "es",
     sourcemap: r
   });
-  return c[0].code;
+  return a[0].code;
 }, N = (t, e) => new RegExp(`<${e}\\b`, "i").test(t) && new RegExp(`</${e}>`, "i").test(t), xt = (t) => {
   const e = t.trim();
   return N(e, "html") && N(e, "head") && N(e, "body") ? e : `<html><head></head><body>${e}</body></html>`;
@@ -790,14 +791,14 @@ ${r}
   if (o.length === 0)
     return t;
   const s = /* @__PURE__ */ new Map();
-  for (const c of o) {
-    const a = await gt({
-      entryPoint: c,
+  for (const a of o) {
+    const c = await gt({
+      entryPoint: a,
       files: t,
       rollup: e,
       enableSourcemap: n
     });
-    s.set(c, a);
+    s.set(a, c);
   }
   const i = jt(t, s);
   return {
@@ -813,7 +814,7 @@ ${r}
   slugCache: s,
   getSvelteCompiler: i
 }) => {
-  var c;
+  var a;
   try {
     if (g && console.log(
       "[build] files:",
@@ -827,15 +828,16 @@ ${r}
         "vizId is required when using vizCache"
       );
     if (!t && r && o && (t = A(
-      (c = await r.get(o)) == null ? void 0 : c.files
+      (a = await r.get(o)) == null ? void 0 : a.files
     )), !t)
       throw new Error("Upable to extract viz files");
-    const a = at(t);
-    if (g && console.log("[build] version:", a), a === "v1")
+    const c = at(t);
+    if (g && console.log("[build] version:", c), c === "v1")
       return {
-        html: $(t)
+        html: $(t),
+        runtimeVersion: c
       };
-    if (a === "v2") {
+    if (c === "v2") {
       if (!e)
         throw new Error(
           "Rollup is required for v2 runtime"
@@ -843,10 +845,11 @@ ${r}
       return {
         html: $(
           await ht({ files: t, rollup: e, enableSourcemap: n })
-        )
+        ),
+        runtimeVersion: c
       };
     }
-    if (a === "v3") {
+    if (c === "v3") {
       if (!e)
         throw new Error(
           "Rollup is required for v3 runtime"
@@ -879,7 +882,7 @@ ${r}
         getSvelteCompiler: i
       });
     }
-    if (a === "v4") {
+    if (c === "v4") {
       if (!e)
         throw new Error(
           "Rollup is required for v4 runtime"
@@ -891,17 +894,18 @@ ${r}
       }), {
         html: $(
           await St({ files: t, rollup: e, enableSourcemap: n })
-        )
+        ),
+        runtimeVersion: c
       };
     }
     throw new Error(
-      `Unsupported runtime version: ${a}`
+      `Unsupported runtime version: ${c}`
     );
-  } catch (a) {
-    throw a instanceof Error && a.message.indexOf(p) && (a.message = a.message.replace(
+  } catch (c) {
+    throw c instanceof Error && c.message.indexOf(p) && (c.message = c.message.replace(
       p,
       ""
-    )), a;
+    )), c;
   }
 };
 export {
@@ -915,4 +919,4 @@ export {
   Ct as s,
   ot as v
 };
-//# sourceMappingURL=build-C3ij8Dz4.js.map
+//# sourceMappingURL=build-B0moD9Cl.js.map