@vizhub/runtime 0.2.0 → 0.3.1

package/dist/cjs/v3/setupV3Runtime.js

@@ -0,0 +1,345 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupV3Runtime = void 0;
+const parseId_1 = require("./parseId");
+const cleanRollupErrorMessage_1 = require("./cleanRollupErrorMessage");
+const viz_utils_1 = require("@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";
+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((0, cleanRollupErrorMessage_1.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((0, cleanRollupErrorMessage_1.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 } = (0, parseId_1.parseId)(cssFile);
+                    getLatestContent(vizId).then((content) => {
+                        const src = (0, viz_utils_1.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,
+    };
+};
+exports.setupV3Runtime = setupV3Runtime;

package/dist/cjs/v3/slugCache.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSlugCache = void 0;
+// A cache of viz IDs for slug resolution.
+// Maps slug strings (username/slug) to viz IDs.
+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 };
+};
+exports.createSlugCache = createSlugCache;

package/dist/cjs/v3/slugCache.test.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const slugCache_1 = require("./slugCache");
+(0, vitest_1.describe)("SlugCache", () => {
+    (0, vitest_1.describe)("SlugCache - get method", () => {
+        (0, vitest_1.it)("should return vizId from cache if available", async () => {
+            const initialMappings = {
+                "user1/viz-slug": "viz-123",
+            };
+            const slugCache = (0, slugCache_1.createSlugCache)({
+                initialMappings,
+                handleCacheMiss: vitest_1.vi.fn(),
+            });
+            const vizId = await slugCache.get("user1/viz-slug");
+            (0, vitest_1.expect)(vizId).toEqual("viz-123");
+            (0, vitest_1.expect)(vitest_1.vi.fn()).toHaveBeenCalledTimes(0); // handleCacheMiss should not be called
+        });
+        (0, vitest_1.it)("should resolve slug on cache miss and store it", async () => {
+            const handleCacheMissMock = vitest_1.vi
+                .fn()
+                .mockResolvedValue("viz-456");
+            const slugCache = (0, slugCache_1.createSlugCache)({
+                initialMappings: {},
+                handleCacheMiss: handleCacheMissMock,
+            });
+            const vizId = await slugCache.get("user2/new-viz");
+            (0, vitest_1.expect)(handleCacheMissMock).toHaveBeenCalledWith("user2/new-viz");
+            (0, vitest_1.expect)(vizId).toEqual("viz-456");
+            // Verify that the cache now contains the resolved mapping
+            const cachedVizId = await slugCache.get("user2/new-viz");
+            (0, vitest_1.expect)(cachedVizId).toEqual("viz-456");
+            (0, vitest_1.expect)(handleCacheMissMock).toHaveBeenCalledTimes(1); // Should only be called once
+        });
+        (0, vitest_1.it)("should throw an error if handleCacheMiss does not return a vizId", async () => {
+            const handleCacheMissMock = vitest_1.vi
+                .fn()
+                .mockResolvedValue(undefined);
+            const slugCache = (0, slugCache_1.createSlugCache)({
+                initialMappings: {},
+                handleCacheMiss: handleCacheMissMock,
+            });
+            await (0, vitest_1.expect)(slugCache.get("nonexistent/slug")).rejects.toThrow("Unresolved slug nonexistent/slug");
+        });
+        (0, vitest_1.it)("should throw an error if no handleCacheMiss is provided and slug not found", async () => {
+            const slugCache = (0, slugCache_1.createSlugCache)({
+                initialMappings: {},
+            });
+            await (0, vitest_1.expect)(slugCache.get("missing/slug")).rejects.toThrow("Unresolved slug missing/slug, cache miss handler not provided.");
+        });
+    });
+    (0, vitest_1.describe)("SlugCache - set method", () => {
+        (0, vitest_1.it)("should add new mapping to the cache", async () => {
+            const slugCache = (0, slugCache_1.createSlugCache)({
+                initialMappings: {},
+                handleCacheMiss: vitest_1.vi.fn(),
+            });
+            const slug = "user3/new-viz";
+            const vizId = "viz-789";
+            slugCache.set(slug, vizId);
+            // Verify new mapping is added
+            const resolvedVizId = await slugCache.get(slug);
+            (0, vitest_1.expect)(resolvedVizId).toEqual(vizId);
+        });
+        (0, vitest_1.it)("should update existing mapping in the cache", async () => {
+            const initialMappings = {
+                "user4/existing-viz": "old-viz-id",
+            };
+            const slugCache = (0, slugCache_1.createSlugCache)({
+                initialMappings,
+                handleCacheMiss: vitest_1.vi.fn(),
+            });
+            const slug = "user4/existing-viz";
+            const updatedVizId = "updated-viz-id";
+            // Update existing mapping
+            slugCache.set(slug, updatedVizId);
+            // Verify mapping is updated
+            const resolvedVizId = await slugCache.get(slug);
+            (0, vitest_1.expect)(resolvedVizId).toEqual(updatedVizId);
+        });
+    });
+    (0, vitest_1.describe)("SlugCache - invalidate method", () => {
+        (0, vitest_1.it)("should remove a mapping from the cache", async () => {
+            const initialMappings = {
+                "user5/to-remove": "viz-to-remove",
+            };
+            const handleCacheMissMock = vitest_1.vi.fn();
+            const slugCache = (0, slugCache_1.createSlugCache)({
+                initialMappings,
+                handleCacheMiss: handleCacheMissMock,
+            });
+            // Verify mapping exists initially
+            const initialVizId = await slugCache.get("user5/to-remove");
+            (0, vitest_1.expect)(initialVizId).toEqual("viz-to-remove");
+            // Invalidate the mapping
+            slugCache.invalidate("user5/to-remove");
+            // Trying to get it should trigger the cache miss handler
+            try {
+                await slugCache.get("user5/to-remove");
+            }
+            catch (e) {
+                // Ignore error if handleCacheMiss throws
+            }
+            (0, vitest_1.expect)(handleCacheMissMock).toHaveBeenCalledWith("user5/to-remove");
+        });
+    });
+});

package/dist/cjs/v3/transformDSV/dsvParseSrc.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dsvParseSrc = void 0;
+exports.dsvParseSrc = `var EOL = {},
+  EOF = {},
+  QUOTE = 34,
+  NEWLINE = 10,
+  RETURN = 13;
+
+function objectConverter(columns) {
+  return new Function(
+    'd',
+    'return {' +
+      columns
+        .map(function (name, i) {
+          return (
+            JSON.stringify(name) + ': d[' + i + '] || ""'
+          );
+        })
+        .join(',') +
+      '}',
+  );
+}
+
+function customConverter(columns, f) {
+  var object = objectConverter(columns);
+  return function (row, i) {
+    return f(object(row), i, columns);
+  };
+}
+
+function dsv(delimiter) {
+  var DELIMITER = delimiter.charCodeAt(0);
+
+  function parse(text, f) {
+    var convert,
+      columns,
+      rows = parseRows(text, function (row, i) {
+        if (convert) return convert(row, i - 1);
+        (columns = row),
+          (convert = f
+            ? customConverter(row, f)
+            : objectConverter(row));
+      });
+    rows.columns = columns || [];
+    return rows;
+  }
+
+  function parseRows(text, f) {
+    var rows = [], // output rows
+      N = text.length,
+      I = 0, // current character index
+      n = 0, // current line number
+      t, // current token
+      eof = N <= 0, // current token followed by EOF?
+      eol = false; // current token followed by EOL?
+
+    // Strip the trailing newline.
+    if (text.charCodeAt(N - 1) === NEWLINE) --N;
+    if (text.charCodeAt(N - 1) === RETURN) --N;
+
+    function token() {
+      if (eof) return EOF;
+      if (eol) return (eol = false), EOL;
+
+      // Unescape quotes.
+      var i,
+        j = I,
+        c;
+      if (text.charCodeAt(j) === QUOTE) {
+        while (
+          (I++ < N && text.charCodeAt(I) !== QUOTE) ||
+          text.charCodeAt(++I) === QUOTE
+        );
+        if ((i = I) >= N) eof = true;
+        else if ((c = text.charCodeAt(I++)) === NEWLINE)
+          eol = true;
+        else if (c === RETURN) {
+          eol = true;
+          if (text.charCodeAt(I) === NEWLINE) ++I;
+        }
+        return text.slice(j + 1, i - 1).replace(/""/g, '"');
+      }
+
+      // Find next delimiter or newline.
+      while (I < N) {
+        if ((c = text.charCodeAt((i = I++))) === NEWLINE)
+          eol = true;
+        else if (c === RETURN) {
+          eol = true;
+          if (text.charCodeAt(I) === NEWLINE) ++I;
+        } else if (c !== DELIMITER) continue;
+        return text.slice(j, i);
+      }
+
+      // Return last token before EOF.
+      return (eof = true), text.slice(j, N);
+    }
+
+    while ((t = token()) !== EOF) {
+      var row = [];
+      while (t !== EOL && t !== EOF)
+        row.push(t), (t = token());
+      if (f && (row = f(row, n++)) == null) continue;
+      rows.push(row);
+    }
+
+    return rows;
+  }
+
+  return {
+    parse: parse,
+  };
+}
+
+var csv = dsv(',');
+
+var csvParse = csv.parse;
+
+var tsv = dsv('\t');
+
+var tsvParse = tsv.parse;
+
+export { csvParse, tsvParse };`;

package/dist/cjs/v3/transformDSV/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformDSV = void 0;
+const parseId_1 = require("../parseId");
+const dsvParseSrc_1 = require("./dsvParseSrc");
+const DEBUG = false;
+// Escape backticks in a string so that it can be
+// used in a template literal. Also need to escape backslashes.
+const escapeBackticks = (str) => 
+// str.replace(/`/g, '\\`');
+str.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+// Responsible for loading CSV and TSV files, which are
+// in general called Delimiter-Separated Values (DSV).
+const transformDSV = () => ({
+    name: "transformDSV",
+    // `id` here is of the form
+    // `{vizId}/{fileName}`
+    transform: async (text, id) => {
+        DEBUG && console.log("[transformDSV]: load() " + id);
+        const { vizId, fileName } = (0, parseId_1.parseId)(id);
+        DEBUG &&
+            console.log("  [transformDSV] vizId: " + vizId);
+        DEBUG &&
+            console.log("  [transformDSV] fileName: " + fileName);
+        const isCSV = fileName.endsWith(".csv");
+        const isTSV = fileName.endsWith(".tsv");
+        if (isCSV || isTSV) {
+            DEBUG &&
+                console.log("    [transformDSV] tracking DSV import for " +
+                    id);
+            const parseFunction = isCSV ? "csvParse" : "tsvParse";
+            return {
+                code: `
+            ${dsvParseSrc_1.dsvParseSrc}
+            const data = ${parseFunction}(\`${escapeBackticks(text)}\`);
+            export default data;
+          `,
+                map: { mappings: "" },
+            };
+        }
+        return undefined;
+    },
+});
+exports.transformDSV = transformDSV;