@vizhub/runtime 0.3.7 → 0.4.0

package/dist/v3/computeBundleJSV3.js

@@ -1,48 +0,0 @@
-import { sucrasePlugin } from "../common/sucrasePlugin";
-import { getGlobals, packageJSON, } from "../common/packageJson";
-import { transformDSV } from "./transformDSV";
-import { vizResolve } from "./vizResolve";
-import { vizLoad } from "./vizLoad";
-import { transformSvelte, } from "./transformSvelte";
-export const computeBundleJSV3 = async ({ files, rollup, enableSourcemap = true, vizCache, vizId, slugCache, getSvelteCompiler, }) => {
-    // Track CSS imports
-    const cssFilesSet = new Set();
-    const trackCSSImport = (cssFile) => {
-        cssFilesSet.add(cssFile);
-    };
-    const indexJSContent = files["index.js"];
-    if (!indexJSContent) {
-        throw new Error("Missing index.js");
-    }
-    const inputOptions = {
-        input: "./index.js",
-        plugins: [
-            vizResolve({ vizId, slugCache }),
-            transformDSV(),
-            sucrasePlugin(),
-            transformSvelte({ getSvelteCompiler }),
-            vizLoad({ vizCache, trackCSSImport }),
-        ],
-        onwarn(warning, warn) {
-            // Suppress "treating module as external dependency" warnings
-            if (warning.code === "UNRESOLVED_IMPORT")
-                return;
-            warn(warning);
-        },
-    };
-    const bundle = await rollup(inputOptions);
-    const pkg = packageJSON(files);
-    const globals = getGlobals(pkg);
-    const outputOptions = {
-        format: "umd",
-        name: "Viz",
-        sourcemap: enableSourcemap ? true : false,
-        compact: true,
-        globals,
-    };
-    const { output } = await bundle.generate(outputOptions);
-    return {
-        src: output[0].code,
-        cssFiles: Array.from(cssFilesSet),
-    };
-};

package/dist/v3/createVizContent.js

@@ -1,23 +0,0 @@
-import { v4 as uuidv4 } from "uuid";
-/**
- * Creates a VizContent object with the given files
- * @param files An object with file names as keys and file content as values
- * @param title Optional title for the content
- * @returns A VizContent object with randomly generated IDs
- */
-export const createVizContent = (files, title = "Sample Content for Exporting") => {
-    const contentId = uuidv4().replace(/-/g, "");
-    const contentFiles = {};
-    Object.entries(files).forEach(([fileName, fileContent]) => {
-        const fileId = Math.floor(Math.random() * 10000000).toString();
-        contentFiles[fileId] = {
-            name: fileName,
-            text: fileContent,
-        };
-    });
-    return {
-        id: contentId,
-        files: contentFiles,
-        title,
-    };
-};

package/dist/v3/extractVizImport.js

@@ -1,23 +0,0 @@
-export const extractVizImport = (str) => {
-    // Updated regular expression pattern
-    // Username: Alphanumeric characters, including underscores and hyphens
-    // ID: Alphanumeric characters, including underscores, hyphens, and possibly other special characters
-    const pattern = /^@([a-zA-Z0-9_-]+)\/([a-zA-Z0-9_-]+)$/;
-    const match = str.match(pattern);
-    if (match) {
-        // Extract the username and id
-        return {
-            userName: match[1],
-            idOrSlug: match[2],
-        };
-    }
-    else {
-        // Return null if the string does not match
-        return null;
-    }
-};
-// // Example usages
-// const result1 = extractDetails("@curran/21f72bf74ef04ea0b9c9b82aaaec859a");
-// console.log(result1); // { username: "curran", id: "21f72bf74ef04ea0b9c9b82aaaec859a" }
-// const result2 = extractDetails("@curran/scatter-plot");
-// console.log(result2); // { username: "curran", id: "scatter-plot" }

package/dist/v3/extractVizImport.test.js

@@ -1,30 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { extractVizImport } from "./extractVizImport";
-describe("v3 extractVizImport", () => {
-    it("should correctly extract username and viz id", () => {
-        const result = extractVizImport("@curran/21f72bf74ef04ea0b9c9b82aaaec859a");
-        expect(result).toEqual({
-            userName: "curran",
-            idOrSlug: "21f72bf74ef04ea0b9c9b82aaaec859a",
-        });
-    });
-    it("should correctly extract username and alphanumeric id", () => {
-        const result = extractVizImport("@curran/scatter-plot");
-        expect(result).toEqual({
-            userName: "curran",
-            idOrSlug: "scatter-plot",
-        });
-    });
-    it("should return null for non-matching strings", () => {
-        const result = extractVizImport("not-a-matching-string");
-        expect(result).toBeNull();
-    });
-    it("should handle cases with invalid characters in username", () => {
-        const result = extractVizImport("@c!urran/valid-id");
-        expect(result).toBeNull();
-    });
-    it("should handle cases with invalid characters in id", () => {
-        const result = extractVizImport("@curran/invalid id");
-        expect(result).toBeNull();
-    });
-});

package/dist/v3/htmlTemplate.js

@@ -1,89 +0,0 @@
-function randomDigits() {
-    return Math.random().toString().slice(2, 7);
-}
-export const htmlTemplate = ({ cdn, src, styles, }) => {
-    // Random container id to avoid conflicts and guarantee
-    // the code is portable.
-    const containerSuffix = randomDigits();
-    const vizContainerId = `viz-container-${containerSuffix}`;
-    return `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">${cdn}${styles}
-  <style>
-    body {
-      margin: 0;
-      overflow: hidden;
-    }
-    #${vizContainerId} {
-      height: 100vh;
-    }
-  </style>
-</head>
-<body>
-  <div id="${vizContainerId}"></div>
-  <script id="injected-script">${src}</script>
-  <script>
-    (() => {
-      let cleanup;
-      const render = () => {
-        const container = document.getElementById('${vizContainerId}');
-        typeof cleanup === 'function' && cleanup();
-        cleanup = Viz.main(container, { state: window.state, setState, writeFile });
-      };
-      const setState = (next) => {
-        window.state = next(window.state);
-        render();
-      };
-      const writeFile = (fileName, content) => {
-        parent.postMessage({ type: 'writeFile', fileName, content }, "*");
-      };
-      const run = () => {
-        try {
-          setState((state) => state || {});
-        } catch (error) {
-          console.error(error);
-          parent.postMessage({ type: 'runError', error }, "*");
-        }
-      }
-      run();
-      const runJS = (src) => {
-        document.getElementById('injected-script')?.remove();
-        const script = document.createElement('script');
-        script.textContent = src;
-        script.id = 'injected-script';
-        document.body.appendChild(script);
-        run();
-      };
-      const runCSS = (src, id) => {
-        const styleElementId = 'injected-style' + id;
-        let style = document.getElementById(styleElementId);
-        if (!style) {
-          style = document.createElement('style');
-          style.type = 'text/css';
-          style.id = styleElementId;
-          document.head.appendChild(style);
-        }
-        style.textContent = src;
-      };
-      onmessage = (message) => {
-        switch (message.data.type) {
-          case 'runJS':
-            runJS(message.data.src);
-            parent.postMessage({ type: 'runDone' }, "*");
-            break;
-          case 'runCSS':
-            runCSS(message.data.src, message.data.id);
-            break;
-          case 'ping':
-            parent.postMessage({ type: 'pong' }, "*");
-            break;
-          default:
-            break;
-        }
-      }
-    })();
-  </script>
-</body>
-</html>`;
-};

package/dist/v3/index.js

@@ -1 +0,0 @@
-export { v3Build } from "./v3Build";

package/dist/v3/parseId.js

@@ -1,5 +0,0 @@
-export const parseId = (id) => {
-    const [vizId, ...fileNameParts] = id.split("/");
-    const fileName = fileNameParts.join("/");
-    return { vizId, fileName };
-};

package/dist/v3/parseId.test.js

@@ -1,25 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { parseId } from "./parseId";
-describe("parseId", () => {
-    it("should correctly parse viz id and filename", () => {
-        const result = parseId("21f72bf74ef04ea0b9c9b82aaaec859a/index.js");
-        expect(result).toEqual({
-            vizId: "21f72bf74ef04ea0b9c9b82aaaec859a",
-            fileName: "index.js",
-        });
-    });
-    it("should handle alphanumeric ids", () => {
-        const result = parseId("scatter-plot/visualization.js");
-        expect(result).toEqual({
-            vizId: "scatter-plot",
-            fileName: "visualization.js",
-        });
-    });
-    it("should handle complex filenames", () => {
-        const result = parseId("my-viz/nested/path/file.test.js");
-        expect(result).toEqual({
-            vizId: "my-viz",
-            fileName: "nested/path/file.test.js",
-        });
-    });
-});

package/dist/v3/setupV3Runtime.js

@@ -1,341 +0,0 @@
-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/slugCache.js

@@ -1,35 +0,0 @@
-// A cache of viz IDs for slug resolution.
-// Maps slug strings (username/slug) to viz IDs.
-export const createSlugCache = ({ initialMappings = {}, handleCacheMiss, }) => {
-    // Track the mapping of slugs to viz IDs
-    const slugMap = new Map(Object.entries(initialMappings));
-    // Gets the viz ID for a slug.
-    // Returns the cached ID if it exists.
-    // Otherwise, calls handleCacheMiss to resolve the slug.
-    const get = async (slug) => {
-        const cachedVizId = slugMap.get(slug);
-        // Cache hit
-        if (cachedVizId !== undefined) {
-            return cachedVizId;
-        }
-        // Cache miss
-        if (!handleCacheMiss) {
-            throw new Error(`Unresolved slug ${slug}, cache miss handler not provided.`);
-        }
-        const resolvedVizId = await handleCacheMiss(slug);
-        if (resolvedVizId) {
-            slugMap.set(slug, resolvedVizId);
-            return resolvedVizId;
-        }
-        throw new Error(`Unresolved slug ${slug}`);
-    };
-    // Updates the mapping of a slug to a viz ID in the cache.
-    const set = (slug, vizId) => {
-        slugMap.set(slug, vizId);
-    };
-    // Removes a slug mapping from the cache.
-    const invalidate = (slug) => {
-        slugMap.delete(slug);
-    };
-    return { get, set, invalidate };
-};