@vizhub/runtime 0.3.0 → 0.3.1

package/dist/esm/v3/transformSvelte.js

@@ -0,0 +1,77 @@
+import { parseId } from "./parseId";
+const debug = false;
+// The cache of fetched files.
+const fetchedFileCache = new Map();
+let compile;
+const svelteURL = "https://cdn.jsdelivr.net/npm/svelte@4.2.9";
+export const svelteCompilerUrl = `${svelteURL}/compiler.cjs`;
+// Responsible for transforming Svelte files.
+// Inspired by:
+//  * https://github.com/sveltejs/sites/blob/master/packages/repl/src/lib/workers/compiler/index.js#L2
+//  * https://github.com/sveltejs/sites/blob/master/packages/repl/src/lib/workers/bundler/index.js#L358
+//  * https://github.com/sveltejs/rollup-plugin-svelte/blob/master/index.js#L146C4-L146C51
+export const transformSvelte = ({ getSvelteCompiler, }) => ({
+    name: "transformSvelte",
+    load: async (resolved) => {
+        if (!resolved.startsWith(svelteURL)) {
+            return;
+        }
+        if (debug) {
+            console.log("[transformSvelte]: load() " + resolved);
+        }
+        const cachedFile = fetchedFileCache.get(resolved);
+        if (cachedFile)
+            return cachedFile;
+        const fetchedFile = await fetch(resolved).then((res) => res.text());
+        fetchedFileCache.set(resolved, fetchedFile);
+        return fetchedFile;
+    },
+    // From https://github.com/sveltejs/sites/blob/master/packages/repl/src/lib/workers/bundler/index.js#L255C2-L271C5
+    resolveId: async (importee, importer) => {
+        if (debug) {
+            console.log("[transformSvelte] resolveId() " + importee);
+            console.log("importee: " + importee);
+            console.log("importer: " + importer);
+        }
+        // importing from Svelte
+        if (importee === `svelte`) {
+            return `${svelteURL}/src/runtime/index.js`;
+        }
+        if (importee.startsWith(`svelte/`)) {
+            const sub_path = importee.slice(7);
+            return `${svelteURL}/src/runtime/${sub_path}/index.js`;
+        }
+        // importing from a URL
+        if (/^https?:/.test(importee))
+            return importee;
+        // Relative imports
+        if (importee.startsWith(".")) {
+            if (importer && importer.startsWith(svelteURL)) {
+                const resolved = new URL(importee, importer).href;
+                const url = new URL(importee, importer).href;
+                if (debug) {
+                    console.log("[transformSvelte] resolveId() " + resolved);
+                }
+                return resolved;
+            }
+        }
+    },
+    transform: async (code, id) => {
+        const { fileName } = parseId(id);
+        const isSvelte = fileName.endsWith(".svelte");
+        if (isSvelte) {
+            if (!compile) {
+                if (!getSvelteCompiler) {
+                    throw new Error("Svelte compiler not available");
+                }
+                compile = await getSvelteCompiler();
+            }
+            const compiled = compile(code, {
+                filename: fileName,
+                hydratable: true,
+            });
+            return compiled.js;
+        }
+        return undefined;
+    },
+});

package/dist/esm/v3/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/v3/v3Build.js

@@ -0,0 +1,30 @@
+import { computeBundleJSV3 } from "./computeBundleJSV3";
+import { htmlTemplate } from "./htmlTemplate";
+import { parseId } from "./parseId";
+import { getFileText } from "@vizhub/viz-utils";
+export const v3Build = async ({ files, rollup, enableSourcemap = true, vizCache, vizId, slugCache, getSvelteCompiler, }) => {
+    const { src, cssFiles } = await computeBundleJSV3({
+        files,
+        rollup,
+        enableSourcemap,
+        vizCache,
+        vizId,
+        slugCache,
+        getSvelteCompiler,
+    });
+    // Generate CSS styles from imported CSS files
+    let styles = "";
+    // Inject CSS files.
+    if (cssFiles.length > 0) {
+        for (let i = 0; i < cssFiles.length; i++) {
+            const id = cssFiles[i];
+            const indent = i > 0 ? "    " : "\n    ";
+            const styleElementId = "injected-style" + id;
+            const { vizId, fileName } = parseId(id);
+            const content = await vizCache.get(vizId);
+            const src = getFileText(content, fileName);
+            styles += `${indent}<style id="${styleElementId}">${src}</style>`;
+        }
+    }
+    return htmlTemplate({ cdn: "", src, styles });
+};

package/dist/esm/v3/vizCache.js

@@ -0,0 +1,36 @@
+// A cache of viz content.
+// For use in resolving imports from other vizzes.
+// Runs both on the server and in the browser.
+export const createVizCache = ({ initialContents, handleCacheMiss, }) => {
+    // Track the content of cached vizzes.
+    const contentMap = new Map(initialContents.map((content) => [content.id, content]));
+    // Gets the content of a viz.
+    // Returns the cached content if it exists.
+    // Otherwise, calls handleCacheMiss to fetch the content.
+    const get = async (vizId) => {
+        const cachedContent = contentMap.get(vizId);
+        // Cache hit
+        if (cachedContent !== undefined) {
+            return cachedContent;
+        }
+        // Cache miss
+        if (!handleCacheMiss) {
+            throw new Error(`Unresolved import from vizId ${vizId}, cache miss handler not provided.`);
+        }
+        const freshContent = await handleCacheMiss(vizId);
+        if (freshContent) {
+            contentMap.set(vizId, freshContent);
+            return freshContent;
+        }
+        // TODO surface this error to the user
+        throw new Error(`Unresolved import from vizId ${vizId}`);
+    };
+    // Updates the content of a viz in the cache.
+    const set = (content) => {
+        contentMap.set(content.id, content);
+    };
+    const invalidate = (vizId) => {
+        contentMap.delete(vizId);
+    };
+    return { get, set, invalidate };
+};

package/dist/esm/v3/vizCache.test.js

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi } from "vitest";
+import { createVizCache } from "./vizCache";
+import { sampleVizContent } from "../test/fixtures/v3";
+describe("VizCache", () => {
+    describe("VizCache - get method", () => {
+        it("should return content from cache if available", async () => {
+            const vizCache = createVizCache({
+                initialContents: [sampleVizContent],
+                handleCacheMiss: vi.fn(),
+            });
+            const content = await vizCache.get(sampleVizContent.id);
+            expect(content).toEqual(sampleVizContent);
+            expect(vi.fn()).toHaveBeenCalledTimes(0); // handleCacheMiss should not be called
+        });
+        it("should fetch content on cache miss and store it", async () => {
+            const handleCacheMissMock = vi
+                .fn()
+                .mockResolvedValue(sampleVizContent);
+            const vizCache = createVizCache({
+                initialContents: [],
+                handleCacheMiss: handleCacheMissMock,
+            });
+            const content = await vizCache.get(sampleVizContent.id);
+            expect(handleCacheMissMock).toHaveBeenCalledWith(sampleVizContent.id);
+            expect(content).toEqual(sampleVizContent);
+            // Verify that the cache now contains the fetched content
+            const cachedContent = await vizCache.get(sampleVizContent.id);
+            expect(cachedContent).toEqual(sampleVizContent);
+        });
+        it("should throw an error if handleCacheMiss does not return content", async () => {
+            const handleCacheMissMock = vi
+                .fn()
+                .mockResolvedValue(undefined);
+            const vizCache = createVizCache({
+                initialContents: [],
+                handleCacheMiss: handleCacheMissMock,
+            });
+            await expect(vizCache.get("nonexistentId")).rejects.toThrow("Unresolved import from vizId nonexistentId");
+        });
+        // Add tests for set
+    });
+    describe("VizCache - set method", () => {
+        it("should add new content to the cache", async () => {
+            const vizCache = createVizCache({
+                initialContents: [],
+                handleCacheMiss: vi.fn(),
+            });
+            const newContent = {
+                id: "newContent",
+                files: {},
+                title: "New Content",
+            };
+            vizCache.set(newContent);
+            // Verify new content is added
+            const content = await vizCache.get(newContent.id);
+            expect(content).toEqual(newContent);
+        });
+        it("should update existing content in the cache", async () => {
+            const updatedContent = {
+                ...sampleVizContent,
+                title: "Updated Content Title",
+            };
+            const vizCache = createVizCache({
+                initialContents: [sampleVizContent],
+                handleCacheMiss: vi.fn(),
+            });
+            // Update existing content
+            vizCache.set(updatedContent);
+            // Verify content is updated
+            const content = await vizCache.get(updatedContent.id);
+            expect(content).toEqual(updatedContent);
+        });
+        it("should keep the cache consistent after multiple set operations", async () => {
+            const vizCache = createVizCache({
+                initialContents: [],
+                handleCacheMiss: vi.fn(),
+            });
+            // Adding multiple contents
+            const contentA = {
+                id: "contentA",
+                files: {},
+                title: "Content A",
+            };
+            const contentB = {
+                id: "contentB",
+                files: {},
+                title: "Content B",
+            };
+            vizCache.set(contentA);
+            vizCache.set(contentB);
+            // Verify both contents are retrievable
+            const retrievedA = await vizCache.get(contentA.id);
+            const retrievedB = await vizCache.get(contentB.id);
+            expect(retrievedA).toEqual(contentA);
+            expect(retrievedB).toEqual(contentB);
+        });
+    });
+});

package/dist/esm/v3/vizLoad.js

@@ -0,0 +1,46 @@
+import { parseId } from "./parseId";
+import { getFileText } from "@vizhub/viz-utils";
+const debug = false;
+// Responsible for loading all imports and
+// tracking which CSS files are imported.
+// Throws an error if a file is imported but not found.
+export const vizLoad = ({ vizCache, trackCSSImport, }) => ({
+    name: "vizLoad",
+    // `id` here is of the form
+    // `{vizId}/{fileName}`
+    load: async (id) => {
+        if (debug) {
+            console.log("[vizLoadCSS]: load() " + id);
+        }
+        const { vizId, fileName } = parseId(id);
+        if (debug) {
+            console.log("  [vizLoadCSS] vizId: " + vizId);
+            console.log("  [vizLoadCSS] fileName: " + fileName);
+        }
+        // For CSS imports, all we need to do here is
+        // keep track of them so they can be injected
+        // into the IFrame later.
+        if (fileName.endsWith(".css")) {
+            if (debug) {
+                console.log("    [vizResolve] tracking CSS import for " + id);
+            }
+            // The import is tracked here so that it can be
+            // injected into the IFrame later, external to the
+            // Rollup build.
+            trackCSSImport(id);
+            // TODO consider using Rollup's `emitFile` to emit a CSS file.
+            return "";
+        }
+        const content = await vizCache.get(vizId);
+        const fileText = getFileText(content, fileName);
+        // If a file is imported but not found, throw an error.
+        if (fileText === null) {
+            throw new Error(`Imported file "${fileName}" not found.`);
+            // TODO ideally show username/slug instead of vizId
+            // `Imported file "${fileName}" not found in viz ${vizId}`,
+            // `Imported file "${fileName}" not found.`,
+            // );
+        }
+        return fileText;
+    },
+});

package/dist/esm/v3/vizResolve.js

@@ -0,0 +1,69 @@
+import { extractVizImport } from "./extractVizImport";
+import { parseId } from "./parseId";
+import { isVizId } from "@vizhub/viz-utils";
+const debug = false;
+export const vizResolve = ({ vizId, slugCache, }) => ({
+    name: "vizResolve",
+    resolveId: async (id, importer) => {
+        if (debug) {
+            console.log("[vizIdResolve] resolveId() " + id);
+            console.log("  importer: " + importer);
+        }
+        // Handle virtual file system resolution
+        // .e.g. `import { foo } from './foo.js'`
+        // .e.g. `import { foo } from './foo'`
+        if (id.startsWith("./") &&
+            !importer?.startsWith("https://")) {
+            let fileName = id.substring(2);
+            // Handle CSS files
+            // e.g. `import './styles.css'`
+            // Handle JS files
+            // e.g. `import { foo } from './foo.js'`
+            // e.g. `import { foo } from './foo'`
+            if (!fileName.endsWith(".js") &&
+                !fileName.endsWith(".css") &&
+                !fileName.endsWith(".csv") &&
+                !fileName.endsWith(".svelte")) {
+                fileName += ".js";
+            }
+            // const js = (name: string) =>
+            // name.endsWith('.js') ? name : name + '.js';
+            // If there is an importer, then the file is not part of
+            // the entry point, so it should be resolved relative
+            // to the importer's directory
+            if (importer) {
+                const { vizId: importerVizId, fileName: importerFileName, } = parseId(importer);
+                // Get the directory of the importing file
+                const importerDir = importerFileName
+                    .split("/")
+                    .slice(0, -1)
+                    .join("/");
+                // Combine the directory with the imported file name
+                const resolvedFileName = importerDir
+                    ? `${importerDir}/${fileName}`
+                    : fileName;
+                return `${importerVizId}/${resolvedFileName}`;
+            }
+            return vizId + "/" + fileName;
+        }
+        // Handle viz import resolution
+        // e.g. `import { foo } from '@curran/98e6d6509a1e407897d4f238a330efec'`
+        // e.g. `import { foo } from '@curran/scatter-plot'`
+        const vizImport = extractVizImport(id);
+        if (vizImport) {
+            let vizId;
+            if (isVizId(vizImport.idOrSlug)) {
+                vizId = vizImport.idOrSlug;
+            }
+            else {
+                if (!slugCache) {
+                    throw new Error("slugCache is required to import by slug in v3 runtime");
+                }
+                vizId = await slugCache.get(`${vizImport.userName}/${vizImport.idOrSlug}`);
+            }
+            return vizId + "/index.js";
+        }
+        // If neither condition is met, return undefined.
+        return undefined;
+    },
+});

package/dist/esm/v4/index.js

@@ -0,0 +1,134 @@
+import { JSDOM } from "jsdom";
+import { virtualFileSystem } from "../common/virtualFileSystem";
+import { sucrasePlugin } from "../common/sucrasePlugin";
+import { dependencies, getConfiguredLibraries, dependencySource, } from "../common/packageJson";
+const DEBUG = false;
+/**
+ * Extract module script entry points from index.html
+ */
+const extractModuleEntryPoints = (html) => {
+    const dom = new JSDOM(html);
+    const document = dom.window.document;
+    const moduleScripts = document.querySelectorAll('script[type="module"]');
+    const entryPoints = [];
+    moduleScripts.forEach((script) => {
+        const src = script.getAttribute("src");
+        if (src) {
+            entryPoints.push(src);
+        }
+    });
+    return entryPoints;
+};
+/**
+ * Bundle an ES module entry point
+ */
+const bundleESModule = async ({ entryPoint, files, rollup, enableSourcemap = true, }) => {
+    const inputOptions = {
+        input: `./${entryPoint}`,
+        plugins: [virtualFileSystem(files), sucrasePlugin()],
+        onwarn(warning, warn) {
+            // Suppress "treating module as external dependency" warnings
+            if (warning.code === "UNRESOLVED_IMPORT")
+                return;
+            warn(warning);
+        },
+    };
+    const bundle = await rollup(inputOptions);
+    const outputOptions = {
+        format: "es",
+        sourcemap: enableSourcemap,
+    };
+    const { output } = await bundle.generate(outputOptions);
+    return output[0].code;
+};
+/**
+ * Generate an import map for all dependencies
+ */
+const generateImportMap = (files) => {
+    const deps = dependencies(files);
+    if (Object.keys(deps).length === 0) {
+        return null;
+    }
+    const libraries = getConfiguredLibraries(files);
+    const imports = {};
+    Object.entries(deps).forEach(([name, version]) => {
+        const url = dependencySource({ name, version }, libraries);
+        imports[name] = url;
+    });
+    return JSON.stringify({ imports }, null, 2);
+};
+/**
+ * Update HTML to include import map and bundled modules
+ */
+const updateHTML = (files, bundledModules) => {
+    const html = files["index.html"] || "";
+    if (!html) {
+        return "";
+    }
+    const dom = new JSDOM(html);
+    const document = dom.window.document;
+    // Replace script src with bundled content
+    bundledModules.forEach((code, src) => {
+        const scripts = document.querySelectorAll(`script[src="${src}"]`);
+        scripts.forEach((script) => {
+            const newScript = document.createElement("script");
+            newScript.setAttribute("type", "module");
+            newScript.textContent = code;
+            script.parentNode?.replaceChild(newScript, script);
+        });
+    });
+    // Add import map if needed
+    const importMap = generateImportMap(files);
+    if (importMap) {
+        // Check if import map already exists
+        const existingImportMap = document.querySelector('script[type="importmap"]');
+        if (!existingImportMap) {
+            const importMapScript = document.createElement("script");
+            importMapScript.setAttribute("type", "importmap");
+            importMapScript.textContent = importMap;
+            const head = document.head || document.querySelector("head");
+            if (head) {
+                head.prepend(importMapScript);
+            }
+            else {
+                const html = document.documentElement;
+                const newHead = document.createElement("head");
+                newHead.appendChild(importMapScript);
+                html.insertBefore(newHead, html.firstChild);
+            }
+        }
+    }
+    return `<!DOCTYPE html>${document.documentElement.outerHTML}`;
+};
+/**
+ * Build for v4 runtime
+ */
+export const v4Build = async ({ files, rollup, enableSourcemap = true, }) => {
+    // Extract entry points
+    const html = files["index.html"] || "";
+    const entryPoints = extractModuleEntryPoints(html);
+    if (entryPoints.length === 0) {
+        DEBUG &&
+            console.log("[v4Build] No module entry points found");
+        // Fall back to a default approach if no module entry points
+        // Just return the HTML as-is if there are no module scripts
+        return files;
+    }
+    // Bundle each entry point
+    const bundledModules = new Map();
+    for (const entryPoint of entryPoints) {
+        const code = await bundleESModule({
+            entryPoint,
+            files,
+            rollup,
+            enableSourcemap,
+        });
+        bundledModules.set(entryPoint, code);
+    }
+    // Update HTML with bundled modules and import map
+    const updatedHTML = updateHTML(files, bundledModules);
+    return {
+        ...files,
+        "index.html": updatedHTML,
+    };
+};

package/dist/types/buildHTML.d.ts

@@ -0,0 +1,14 @@
+import { FileCollection } from "@vizhub/viz-types";
+import type { RollupBuild, RollupOptions } from "rollup";
+import { VizCache } from "./v3/vizCache";
+import { SlugCache } from "./v3/slugCache";
+import { SvelteCompiler } from "./v3/transformSvelte";
+export declare const buildHTML: ({ files, rollup, enableSourcemap, vizCache, vizId, slugCache, getSvelteCompiler, }: {
+    files?: FileCollection;
+    rollup?: (options: RollupOptions) => Promise<RollupBuild>;
+    enableSourcemap?: boolean;
+    vizCache?: VizCache;
+    vizId?: string;
+    slugCache?: SlugCache;
+    getSvelteCompiler?: () => Promise<SvelteCompiler>;
+}) => Promise<string>;

package/dist/types/common/packageJson.d.ts

@@ -0,0 +1,39 @@
+import { FileCollection } from "@vizhub/viz-types";
+export type Licence = string;
+export interface PackageJson {
+    dependencies?: {
+        [key: string]: string;
+    };
+    vizhub?: {
+        libraries?: {
+            [key: string]: VizHubLibraryConfig;
+        };
+    };
+    license?: Licence | {
+        type: string;
+    };
+}
+export interface Dependency {
+    name: string;
+    version: string;
+}
+export interface VizHubLibraryConfig {
+    path?: string;
+    global?: string;
+}
+export interface VizHubLibraryConfigs {
+    [key: string]: VizHubLibraryConfig;
+}
+export declare const packageJSON: (files: FileCollection) => PackageJson;
+export declare const dependencies: (files: FileCollection) => {
+    [key: string]: string;
+};
+export declare const getConfiguredLibraries: (files: FileCollection) => {
+    [key: string]: VizHubLibraryConfig;
+};
+export declare const dependencySource: ({ name, version }: Dependency, libraries: VizHubLibraryConfigs, cdn?: string) => string;
+export declare const getLicense: (files: FileCollection) => string | {
+    type: string;
+} | undefined;
+export declare const getConfiguredGlobals: (pkg: PackageJson) => Record<string, string>;
+export declare const getGlobals: (pkg: PackageJson) => Record<string, string>;

package/dist/types/common/packageJson.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/common/sucrasePlugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "rollup";
+export declare function sucrasePlugin(): Plugin;

package/dist/types/common/virtualFileSystem.d.ts

@@ -0,0 +1,3 @@
+import { FileCollection } from "@vizhub/viz-types";
+import { Plugin } from "rollup";
+export declare const virtualFileSystem: (files: FileCollection) => Plugin;

package/dist/types/determineRuntimeVersion.d.ts

@@ -0,0 +1,3 @@
+import { FileCollection } from "@vizhub/viz-types";
+import { runtimeVersion } from "./types";
+export declare const determineRuntimeVersion: (files: FileCollection) => runtimeVersion | null;

package/dist/types/determineRuntimeVersion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { buildHTML } from "./buildHTML.js";
+export { createVizCache, VizCache } from "./v3/vizCache.js";
+export { createSlugCache, SlugCache, } from "./v3/slugCache.js";

package/dist/types/test/fixtures/v1/basicHTML.d.ts

@@ -0,0 +1,3 @@
+export declare const basicHTML: {
+    "index.html": string;
+};

package/dist/types/test/fixtures/v1/fetchProxy.d.ts

@@ -0,0 +1,5 @@
+export declare const fetchProxy: {
+    "index.html": string;
+    "index.js": string;
+    "data.csv": string;
+};

package/dist/types/test/fixtures/v1/index.d.ts

@@ -0,0 +1,6 @@
+export { basicHTML } from "./basicHTML";
+export { jsScriptTag } from "./jsScriptTag";
+export { fetchProxy } from "./fetchProxy";
+export { styleTest } from "./styleTest";
+export { xmlTest } from "./xmlTest";
+export { protocolTest } from "./protocolTest";

package/dist/types/test/fixtures/v1/jsScriptTag.d.ts

@@ -0,0 +1,4 @@
+export declare const jsScriptTag: {
+    "index.html": string;
+    "index.js": string;
+};

package/dist/types/test/fixtures/v1/protocolTest.d.ts

@@ -0,0 +1,3 @@
+export declare const protocolTest: {
+    "index.html": string;
+};

package/dist/types/test/fixtures/v1/styleTest.d.ts

@@ -0,0 +1,4 @@
+export declare const styleTest: {
+    "index.html": string;
+    "styles.css": string;
+};

package/dist/types/test/fixtures/v1/xmlTest.d.ts

@@ -0,0 +1,4 @@
+export declare const xmlTest: {
+    "index.html": string;
+    "data.xml": string;
+};

package/dist/types/test/fixtures/v2/basicBundle.d.ts

@@ -0,0 +1,5 @@
+export declare const basicBundle: {
+    "index.html": string;
+    "index.js": string;
+    "foo.js": string;
+};

package/dist/types/test/fixtures/v2/basicBundleNoExtension.d.ts

@@ -0,0 +1,5 @@
+export declare const basicBundleNoExtension: {
+    "index.html": string;
+    "index.js": string;
+    "foo.js": string;
+};

package/dist/types/test/fixtures/v2/d3Import.d.ts

@@ -0,0 +1,4 @@
+export declare const d3Import: {
+    "index.html": string;
+    "index.js": string;
+};

package/dist/types/test/fixtures/v2/d3ImportPkg.d.ts

@@ -0,0 +1,5 @@
+export declare const d3ImportPkg: {
+    "index.html": string;
+    "index.js": string;
+    "package.json": string;
+};

package/dist/types/test/fixtures/v2/d3RosettaImportPkg.d.ts

@@ -0,0 +1,5 @@
+export declare const d3RosettaImportPkg: {
+    "index.html": string;
+    "index.js": string;
+    "package.json": string;
+};

package/dist/types/test/fixtures/v2/es6Preserve.d.ts

@@ -0,0 +1,4 @@
+export declare const es6Preserve: {
+    "index.html": string;
+    "index.js": string;
+};