@vizhub/runtime 0.2.0 → 0.3.1

package/dist/types/v3/vizResolve.d.ts

@@ -0,0 +1,7 @@
+import { InputPluginOption } from "rollup";
+import { VizId } from "@vizhub/viz-types";
+import { SlugCache } from "./slugCache";
+export declare const vizResolve: ({ vizId, slugCache, }: {
+    vizId: VizId;
+    slugCache?: SlugCache;
+}) => InputPluginOption;

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

@@ -0,0 +1,10 @@
+import type { RollupBuild, RollupOptions } from "rollup";
+import { FileCollection } from "@vizhub/viz-types";
+/**
+ * Build for v4 runtime
+ */
+export declare const v4Build: ({ files, rollup, enableSourcemap, }: {
+    files: FileCollection;
+    rollup: (options: RollupOptions) => Promise<RollupBuild>;
+    enableSourcemap?: boolean;
+}) => Promise<FileCollection>;

package/dist/types.d.ts

@@ -1,2 +1 @@
-export { FileCollection } from "magic-sandbox";
 export type runtimeVersion = "v1" | "v2" | "v3" | "v4";

package/dist/utils/vizContentToFileCollection.d.ts

@@ -1,5 +1,4 @@
-import type { VizContent } from "@vizhub/viz-types";
-import type { FileCollection } from "magic-sandbox";
+import type { FileCollection, VizContent } from "@vizhub/viz-types";
 /**
  * Converts VizContent format to FileCollection format
  * VizContent has files as {id: {name, text}} structure

package/dist/v2/computeBundleJSV2.d.ts

@@ -1,5 +1,5 @@
-import { FileCollection } from "../types";
 import type { RollupBuild, RollupOptions } from "rollup";
+import { FileCollection } from "@vizhub/viz-types";
 export declare const computeBundleJSV2: ({ files, rollup, enableSourcemap, }: {
     files: FileCollection;
     rollup: (options: RollupOptions) => Promise<RollupBuild>;

package/dist/v2/getComputedIndexHtml.d.ts

@@ -1,4 +1,4 @@
+import { FileCollection } from "@vizhub/viz-types";
 import type { JSDOM } from "jsdom";
-import { FileCollection } from "../types";
 export declare const setJSDOM: (JSDOMInstance: typeof JSDOM) => void;
 export declare const getComputedIndexHtml: (files: FileCollection) => string;

package/dist/v2/v2Build.d.ts

@@ -1,5 +1,5 @@
-import { FileCollection } from "magic-sandbox";
 import type { RollupBuild, RollupOptions } from "rollup";
+import { FileCollection } from "@vizhub/viz-types";
 export declare const v2Build: ({ files, rollup, enableSourcemap, }: {
     files: FileCollection;
     rollup: (options: RollupOptions) => Promise<RollupBuild>;

package/dist/v3/cleanRollupErrorMessage.d.ts

@@ -0,0 +1,4 @@
+export declare const cleanRollupErrorMessage: ({ rawMessage, vizId, }: {
+    rawMessage: string;
+    vizId: string;
+}) => string;

package/dist/v3/cleanRollupErrorMessage.js

@@ -0,0 +1,9 @@
+// We want to remove the vizId from the error message
+// to make it more user-friendly.
+// Example error message before and after:
+// Before: "7f0b69fcb754479699172d1887817027/index.js (14:8): Expected ';', '}' or <eof>"
+// After: "./index.js (14:8): Expected ';', '}' or <eof>"
+export const cleanRollupErrorMessage = ({ rawMessage, vizId, }) => {
+    const regex = new RegExp(vizId, "g");
+    return rawMessage?.replace(regex, ".");
+};

package/dist/v3/computeBundleJSV3.d.ts

@@ -1,7 +1,6 @@
-import { FileCollection } from "../types";
 import type { RollupBuild, RollupOptions } from "rollup";
 import { VizCache } from "./vizCache";
-import { VizId } from "@vizhub/viz-types";
+import { FileCollection, VizId } from "@vizhub/viz-types";
 import { SlugCache } from "./slugCache";
 import { SvelteCompiler } from "./transformSvelte";
 export declare const computeBundleJSV3: ({ files, rollup, enableSourcemap, vizCache, vizId, slugCache, getSvelteCompiler, }: {

package/dist/v3/createVizContent.d.ts

@@ -1,5 +1,4 @@
-import { VizContent } from "@vizhub/viz-types";
-import { FileCollection } from "magic-sandbox";
+import { FileCollection, VizContent } from "@vizhub/viz-types";
 /**
  * Creates a VizContent object with the given files
  * @param files An object with file names as keys and file content as values

package/dist/v3/setupV3Runtime.d.ts

@@ -0,0 +1,15 @@
+import { VizContent, VizId } from "@vizhub/viz-types";
+export type V3Runtime = {
+    handleCodeChange: (content: VizContent) => void;
+    invalidateVizCache: (changedVizIds: Array<VizId>) => void;
+    resetSrcdoc: (changedVizIds: Array<VizId>) => void;
+};
+export declare const setupV3Runtime: ({ vizId, iframe, setSrcdocErrorMessage, getLatestContent, resolveSlugKey, writeFile, worker, }: {
+    vizId: VizId;
+    iframe: HTMLIFrameElement;
+    setSrcdocErrorMessage: (error: string | null) => void;
+    getLatestContent: (vizId: VizId) => Promise<VizContent>;
+    resolveSlugKey: (slugKey: string) => Promise<VizId>;
+    writeFile: (fileName: string, content: string) => void;
+    worker: Worker;
+}) => V3Runtime;

package/dist/v3/setupV3Runtime.js

@@ -0,0 +1,341 @@
+import { parseId } from "./parseId";
+import { cleanRollupErrorMessage } from "./cleanRollupErrorMessage";
+import { getFileText } from "@vizhub/viz-utils";
+// Flag for debugging.
+const debug = false;
+// Nothing happening.
+const IDLE = "IDLE";
+// An update has been enqueued
+// via requestAnimationFrame.
+const ENQUEUED = "ENQUEUED";
+// An update (build and run) is pending,
+// and the files have not changed.
+const PENDING_CLEAN = "PENDING_CLEAN";
+// An update (build and run) is pending,
+// and the files have changed
+// while this run is taking place.
+const PENDING_DIRTY = "PENDING_DIRTY";
+export const setupV3Runtime = ({ vizId, iframe, setSrcdocErrorMessage, getLatestContent, resolveSlugKey, writeFile, worker, }) => {
+    // Valid State Transitions:
+    //
+    //  * IDLE --> ENQUEUED
+    //    When the system is idle and files are changed.
+    //
+    //  * ENQUEUED --> PENDING_CLEAN
+    //    When the pending changes run.
+    //
+    //  * PENDING_CLEAN --> IDLE
+    //    When the pending update finishes running
+    //    and files were not changed in the mean time.
+    //
+    //  * PENDING_CLEAN --> PENDING_DIRTY
+    //    When files are changed while an update is pending.
+    //
+    //  * PENDING_DIRTY --> ENQUEUED
+    //    When the pending update finishes running
+    //    and files were changed in the mean time.
+    //
+    // When a build error happens, the state is set to IDLE.
+    // This is to prevent a build error from causing
+    // the whole system to stop working.
+    //
+    // Valid State Transitions (with build errors):
+    // TODO complete this section
+    let state = IDLE;
+    if (debug) {
+        setInterval(() => {
+            console.log("state", state);
+        }, 1000);
+    }
+    // Pending promise resolvers.
+    let pendingBuildPromise = null;
+    let pendingRunPromise = null;
+    // Logic around profiling build times.
+    const profileBuildTimes = debug;
+    let buildTimes = [];
+    const avg = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
+    const n = 100;
+    // This runs when the build worker sends a message.
+    worker.addEventListener("message", async ({ data }) => {
+        const message = data;
+        // Handle 'buildResponse' messages.
+        // These are sent by the build worker in response
+        // to a 'buildRequest' message.
+        if (message.type === "buildResponse") {
+            const buildResult = message.buildResult;
+            const error = message.error;
+            if (profileBuildTimes && buildResult) {
+                buildTimes.push(buildResult.time);
+                // Every n times, log the rolling average.
+                if (buildTimes.length % n === 0) {
+                    console.log("Average build time: " +
+                        avg(buildTimes) +
+                        " ms");
+                    buildTimes = [];
+                }
+            }
+            // Regardless of whether the build succeeded or failed,
+            // resolve the pending build promise,
+            // so that the system remains responsive.
+            if (pendingBuildPromise) {
+                pendingBuildPromise(buildResult);
+                pendingBuildPromise = null;
+            }
+            if (error) {
+                setSrcdocErrorMessage(cleanRollupErrorMessage({
+                    rawMessage: error.message,
+                    vizId,
+                }));
+            }
+        }
+        // Handle 'contentRequest' messages.
+        // These are sent by the worker when it needs
+        // to get the content of a file, in order to
+        // populate its VizCache.
+        if (message.type === "contentRequest") {
+            const { vizId } = message;
+            const content = await getLatestContent(vizId);
+            const contentResponseMessage = {
+                type: "contentResponse",
+                vizId: message.vizId,
+                content,
+            };
+            if (debug) {
+                console.log("[v3 runtime] received contentRequest, sending contentResponse", contentResponseMessage);
+            }
+            // Send the content back to the worker.
+            worker.postMessage(contentResponseMessage);
+        }
+        // Handle 'resolveSlugRequest' messages.
+        // These are sent by the worker when it needs
+        // to resolve a slug import to a viz ID.
+        if (message.type === "resolveSlugRequest") {
+            const { slugKey } = message;
+            const resolveSlugResponseMessage = {
+                type: "resolveSlugResponse",
+                slugKey,
+                requestId: message.requestId,
+                vizId: await resolveSlugKey(slugKey),
+            };
+            if (debug) {
+                console.log("[v3 runtime] received resolveSlugRequest, sending resolveSlugResponse", resolveSlugResponseMessage);
+            }
+            // Send the viz ID back to the worker.
+            worker.postMessage(resolveSlugResponseMessage);
+        }
+        // Handle 'invalidateVizCacheResponse' messages.
+        // These are sent by the worker in response to
+        // an 'invalidateVizCacheRequest' message.
+        if (message.type === "invalidateVizCacheResponse") {
+            if (debug) {
+                console.log("[v3 runtime] received invalidateVizCacheResponse", message);
+            }
+            // Leverage existing infra for executing the hot reloading.
+            handleCodeChange();
+        }
+        if (message.type === "resetSrcdocResponse") {
+            const srcdoc = message.srcdoc;
+            const error = message.error;
+            if (error) {
+                setSrcdocErrorMessage(cleanRollupErrorMessage({
+                    rawMessage: error.message,
+                    vizId,
+                }));
+            }
+            else {
+                setSrcdocErrorMessage(null);
+                // Really reset the srcdoc!
+                // console.log('Really reset the srcdoc!');
+                if (srcdoc) {
+                    iframe.srcdoc = srcdoc;
+                }
+            }
+        }
+    });
+    // This runs when the IFrame sends a message.
+    window.addEventListener("message", ({ data }) => {
+        // Handle 'runDone' and 'runError' messages.
+        // These happen in response to sending a 'runJS' message.
+        if (data.type === "runDone" ||
+            data.type === "runError") {
+            // console.log('got ' + data.type);
+            if (pendingRunPromise) {
+                // TODO pass errors out for display
+                // pendingRunPromise(data as V3WindowMessage);
+                pendingRunPromise();
+                pendingRunPromise = null;
+            }
+        }
+        if (data.type === "runError") {
+            setSrcdocErrorMessage(data.error.message);
+        }
+        if (data.type === "writeFile") {
+            if (data.fileName && data.content) {
+                writeFile(data.fileName, data.content);
+            }
+        }
+    });
+    const handleCodeChange = () => {
+        if (state === IDLE) {
+            state = ENQUEUED;
+            update();
+        }
+        else if (state === PENDING_CLEAN) {
+            state = PENDING_DIRTY;
+        }
+    };
+    // This runs when one or more imported vizzes are changed.
+    const invalidateVizCache = (changedVizIds) => {
+        // Send a message to the worker to invalidate the cache.
+        const message = {
+            type: "invalidateVizCacheRequest",
+            changedVizIds,
+        };
+        worker.postMessage(message);
+    };
+    const profileHotReloadFPS = true;
+    let updateCount = 0;
+    if (profileHotReloadFPS) {
+        setInterval(() => {
+            if (debug && updateCount > 0) {
+                console.log(updateCount +
+                    " hot reload" +
+                    (updateCount !== 1 ? "s" : "") +
+                    " in the last second");
+            }
+            updateCount = 0;
+        }, 1000);
+    }
+    const build = () => {
+        return new Promise((resolve) => {
+            pendingBuildPromise = resolve;
+            const message = {
+                type: "buildRequest",
+                vizId,
+                enableSourcemap: true,
+            };
+            worker.postMessage(message);
+        });
+    };
+    // Builds and runs the latest files.
+    const update = async () => {
+        state = PENDING_CLEAN;
+        if (debug) {
+            console.log("update: before run");
+        }
+        // Build the code. This may fail and return `undefined`.
+        const buildResult = await build();
+        // If the build was successful, run the code.
+        if (buildResult !== undefined) {
+            await run(buildResult);
+        }
+        if (debug) {
+            console.log("update: after run");
+        }
+        updateCount++;
+        // TypeScript can't comprehend that `state`
+        // may change during the await calls above.
+        // @ts-ignore
+        if (state === PENDING_DIRTY) {
+            requestAnimationFrame(update);
+            state = ENQUEUED;
+        }
+        else {
+            state = IDLE;
+        }
+    };
+    let previousCSSFiles = [];
+    const run = (buildResult) => {
+        return new Promise((resolve) => {
+            const { src, warnings, cssFiles } = buildResult;
+            // Sanity check.
+            // At this point, since there were no errors,
+            // we expect there to be a `src` property.
+            // This should never happen, but log & error just in case!
+            if (src === undefined) {
+                if (debug) {
+                    console.log("[v3 runtime] src is undefined, but no errors!");
+                }
+                throw new Error("[v3 runtime] src is undefined, but no errors!");
+            }
+            // Set pendingRunPromise because at this point,
+            // we expect an asynchronous response when the run is done.
+            // The iframe should send either a `runDone` or `runError` message.
+            pendingRunPromise = resolve;
+            // Handle build warnings
+            if (warnings.length > 0) {
+                // TODO: Distinguish between warnings and errors in UI
+                setSrcdocErrorMessage(warnings
+                    .map((warning) => warning.message)
+                    .join("\n\n"));
+            }
+            else {
+                setSrcdocErrorMessage(null); // Clear error message if no warnings
+            }
+            if (iframe.contentWindow) {
+                // For each cssFiles
+                for (const cssFile of cssFiles) {
+                    const { vizId, fileName } = parseId(cssFile);
+                    getLatestContent(vizId).then((content) => {
+                        const src = getFileText(content, fileName);
+                        if (src === null) {
+                            // The file doesn't exist.
+                            // TODO surface this error to the user
+                            // in a nicer way than this.
+                            console.warn(`Imported CSS file ${fileName} doesn't exist.`);
+                            return;
+                        }
+                        // TODO only inject CSS if it has changed.
+                        const runCSSMessage = {
+                            type: "runCSS",
+                            id: cssFile,
+                            src,
+                        };
+                        if (debug) {
+                            console.log("runCSSMessage", runCSSMessage);
+                        }
+                        iframe.contentWindow?.postMessage(runCSSMessage, window.location.origin);
+                    });
+                }
+                // Detect which CSS files have been removed
+                // and remove them from the iframe.
+                const removedCSSFiles = previousCSSFiles.filter((id) => !cssFiles.includes(id));
+                previousCSSFiles = cssFiles;
+                if (debug) {
+                    console.log("removedCSSFiles", removedCSSFiles);
+                }
+                for (const id of removedCSSFiles) {
+                    const removeCSSMessage = {
+                        type: "runCSS",
+                        id,
+                        src: "",
+                    };
+                    iframe.contentWindow?.postMessage(removeCSSMessage, window.location.origin);
+                }
+                // Clear the console before each run.
+                console.clear();
+                const runJSMessage = {
+                    type: "runJS",
+                    src,
+                };
+                iframe.contentWindow.postMessage(runJSMessage, window.location.origin);
+            }
+        });
+    };
+    const resetSrcdoc = (changedVizIds) => {
+        state = IDLE;
+        pendingBuildPromise = null;
+        pendingRunPromise = null;
+        const message = {
+            type: "resetSrcdocRequest",
+            vizId,
+            changedVizIds,
+        };
+        worker.postMessage(message);
+    };
+    return {
+        handleCodeChange,
+        invalidateVizCache,
+        resetSrcdoc,
+    };
+};

package/dist/v3/v3Build.d.ts

@@ -1,7 +1,6 @@
 import { RollupBuild, RollupOptions } from "rollup";
-import { FileCollection } from "../types";
 import { VizCache } from "./vizCache";
-import { VizId } from "@vizhub/viz-types";
+import { FileCollection, VizId } from "@vizhub/viz-types";
 import { SlugCache } from "./slugCache";
 import { SvelteCompiler } from "./transformSvelte";
 export declare const v3Build: ({ files, rollup, enableSourcemap, vizCache, vizId, slugCache, getSvelteCompiler, }: {

package/dist/v3/v3Build.js

@@ -1,7 +1,7 @@
 import { computeBundleJSV3 } from "./computeBundleJSV3";
 import { htmlTemplate } from "./htmlTemplate";
 import { parseId } from "./parseId";
-import { getFileText } from "../utils/getFileText";
+import { getFileText } from "@vizhub/viz-utils";
 export const v3Build = async ({ files, rollup, enableSourcemap = true, vizCache, vizId, slugCache, getSvelteCompiler, }) => {
     const { src, cssFiles } = await computeBundleJSV3({
         files,

package/dist/v3/vizLoad.js

@@ -1,5 +1,5 @@
 import { parseId } from "./parseId";
-import { getFileText } from "../utils/getFileText";
+import { getFileText } from "@vizhub/viz-utils";
 const debug = false;
 // Responsible for loading all imports and
 // tracking which CSS files are imported.

package/dist/v4/index.d.ts

@@ -1,5 +1,5 @@
-import { FileCollection } from "magic-sandbox";
 import type { RollupBuild, RollupOptions } from "rollup";
+import { FileCollection } from "@vizhub/viz-types";
 /**
  * Build for v4 runtime
  */

package/package.json

@@ -1,47 +1,56 @@
 {
   "name": "@vizhub/runtime",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Flexible runtime environment for data visualization sandboxes",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "npm run build:esm && npm run build:cjs && npm run build:types",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json && echo '{\"type\":\"commonjs\"}' > dist/cjs/package.json",
+    "build:types": "tsc --emitDeclarationOnly --declarationDir ./dist/types",
     "prepublishOnly": "npm run build",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
-    "prettier": "prettier {*.*,**/*.*} --write"
+    "prettier": "prettier {*.*,**/*.*} --write",
+    "upgrade": "ncu -x svelte -u"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.13.13",
+    "@types/node": "^22.14.0",
     "@types/uuid": "^10.0.0",
     "jsdom": "^26.0.0",
+    "npm-check-updates": "^17.1.16",
     "prettier": "^3.5.3",
-    "puppeteer": "^24.4.0",
-    "rollup": "^4.37.0",
+    "puppeteer": "^24.6.0",
+    "rollup": "^4.39.0",
     "sucrase": "^3.35.0",
     "svelte": "4.2.9",
-    "typescript": "^5.8.2",
-    "vitest": "^3.0.9"
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.1"
   },
   "dependencies": {
-    "@vizhub/viz-types": "^0.0.2",
-    "@vizhub/viz-utils": "^0.0.1",
-    "magic-sandbox": "^2.1.0",
+    "@vizhub/viz-types": "^0.1.0",
+    "@vizhub/viz-utils": "^0.1.0",
+    "magic-sandbox": "^2.2.0",
     "uuid": "^11.1.0"
   }
 }