@vizhub/runtime 0.3.8 → 0.4.0

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

@@ -1,114 +0,0 @@
-import puppeteer from "puppeteer";
-import { describe, it, beforeAll, afterAll } from "vitest";
-import { compile } from "svelte/compiler";
-import { testInBrowser } from "./testInBrowser";
-import { basicIndexJS, jsExport, cssImport, csvImport, csvStrangeChars, svelte, sampleContent, sampleContentVizImport, sampleContentVizImportSlug, sampleContentWithCSS, sampleContentVizImportWithCSS, sourcemap, } from "./fixtures/v3";
-import { setJSDOM } from "../v2/getComputedIndexHtml";
-import { JSDOM } from "jsdom";
-import { createVizCache } from "../v3/vizCache";
-import { createSlugCache } from "../v3/slugCache";
-import { testStackTrace } from "./testStackTrace";
-setJSDOM(JSDOM);
-let browser;
-beforeAll(async () => {
-    browser = await puppeteer.launch();
-});
-afterAll(async () => {
-    await browser.close();
-});
-describe("VizHub Runtime v3", () => {
-    it("should run main without index.html", async () => {
-        await testInBrowser({
-            browser,
-            files: basicIndexJS,
-            expectedLog: "Hello main!",
-        });
-    });
-    it("should handle JS exports", async () => {
-        await testInBrowser({
-            browser,
-            files: jsExport,
-            expectedLog: "Outer Inner",
-        });
-    });
-    it("should handle CSS imports", async () => {
-        await testInBrowser({
-            browser,
-            files: cssImport,
-            expectedLog: "rgb(255, 0, 0)",
-        });
-    });
-    it("should handle CSV imports", async () => {
-        await testInBrowser({
-            browser,
-            files: csvImport,
-            expectedLog: "Setosa",
-        });
-    });
-    it("should handle CSV with strange characters", async () => {
-        await testInBrowser({
-            browser,
-            files: csvStrangeChars,
-            expectedLog: "Türkiye",
-        });
-    });
-    it("should handle viz imports", async () => {
-        await testInBrowser({
-            browser,
-            expectedLog: "Imported from viz: Outer Inner",
-            vizCache: createVizCache({
-                initialContents: [
-                    sampleContent,
-                    sampleContentVizImport,
-                ],
-            }),
-            vizId: sampleContentVizImport.id,
-        });
-    });
-    it("should handle viz imports with slug", async () => {
-        await testInBrowser({
-            browser,
-            expectedLog: "Imported from viz with slug: Outer Inner",
-            vizCache: createVizCache({
-                initialContents: [
-                    sampleContent,
-                    sampleContentVizImportSlug,
-                ],
-            }),
-            vizId: sampleContentVizImportSlug.id,
-            slugCache: createSlugCache({
-                initialMappings: {
-                    "joe/sample-content-slug": sampleContent.id,
-                },
-            }),
-        });
-    });
-    it("should handle viz imports with CSS", async () => {
-        await testInBrowser({
-            browser,
-            expectedLog: "rgb(255, 0, 0)",
-            vizCache: createVizCache({
-                initialContents: [
-                    sampleContentWithCSS,
-                    sampleContentVizImportWithCSS,
-                ],
-            }),
-            vizId: sampleContentVizImportWithCSS.id,
-        });
-    });
-    it("should handle Svelte components", async () => {
-        await testInBrowser({
-            browser,
-            files: svelte,
-            expectedLog: "Svelte",
-            getSvelteCompiler: async () => compile,
-        });
-    });
-    it("should provide sourcemaps with correct line numbers in stack traces", async () => {
-        await testStackTrace({
-            browser,
-            files: sourcemap,
-            expectedLineNumber: 6,
-        });
-    });
-});

package/dist/esm/test/v4.test.js

@@ -1,100 +0,0 @@
-import puppeteer from "puppeteer";
-import { describe, it, beforeAll, afterAll } from "vitest";
-import { testInBrowser } from "./testInBrowser";
-import { jsScriptTagTypeModule, jsScriptTagTypeModules, fetchInterception, esmBuild, reactJsx, d3Usage, threeJsUsage, reactHooks, typeScriptSupport, } from "./fixtures/v4";
-let browser;
-beforeAll(async () => {
-    browser = await puppeteer.launch();
-});
-afterAll(async () => {
-    await browser.close();
-});
-describe("VizHub Runtime v4", () => {
-    it("should handle script type=module with import maps", async () => {
-        await testInBrowser({
-            browser,
-            files: jsScriptTagTypeModule,
-            expectedLog: "Hello, ES Module!",
-        });
-    });
-    it("should handle script type=module with file imports", async () => {
-        await testInBrowser({
-            browser,
-            files: jsScriptTagTypeModules,
-            expectedLog: "Hello, ES Module File!",
-        });
-    });
-    it("should handle fetch interception", async () => {
-        await testInBrowser({
-            browser,
-            files: fetchInterception,
-            expectedLog: "Fetch intercepted successfully",
-        });
-    });
-    it.skip("should handle ESM builds from npm packages", async () => {
-        await testInBrowser({
-            browser,
-            files: esmBuild,
-            expectedLog: new RegExp(/\d{4}-\d{2}-\d{2}/), // matches date format yyyy-MM-dd
-        });
-    });
-    it.skip("should handle React JSX", async () => {
-        await testInBrowser({
-            browser,
-            files: reactJsx,
-            expectedLog: "Hello React JSX!",
-            evaluateInBrowser: async (page) => {
-                return await page.evaluate(() => {
-                    return document.querySelector("#root div")
-                        ?.textContent;
-                });
-            },
-        });
-    });
-    it.skip("should handle D3 usage", async () => {
-        await testInBrowser({
-            browser,
-            files: d3Usage,
-            expectedLog: "D3 chart rendered successfully",
-            evaluateInBrowser: async (page) => {
-                return await page.evaluate(() => {
-                    return (document.querySelector("#chart svg circle") !==
-                        null);
-                });
-            },
-        });
-    });
-    it("should handle Three.js usage", async () => {
-        await testInBrowser({
-            browser,
-            files: threeJsUsage,
-            expectedLog: "Three.js imports: object function",
-        });
-    });
-    it.skip("should handle React hooks", async () => {
-        await testInBrowser({
-            browser,
-            files: reactHooks,
-            expectedLog: "React Hooks working: count is 0",
-            evaluateInBrowser: async (page) => {
-                return await page.evaluate(() => {
-                    return (document.querySelector("#root p")
-                        ?.textContent === "You clicked 0 times");
-                });
-            },
-        });
-    });
-    it.skip("should handle TypeScript support", async () => {
-        await testInBrowser({
-            browser,
-            files: typeScriptSupport,
-            expectedLog: "TypeScript is working",
-            evaluateInBrowser: async (page) => {
-                return await page.evaluate(() => {
-                    return (document.querySelector("#app h1")
-                        ?.textContent === "Hello, John Doe!");
-                });
-            },
-        });
-    });
-});

package/dist/esm/types.js

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

package/dist/esm/utils/vizContentToFileCollection.js

@@ -1,20 +0,0 @@
-/**
- * Converts VizContent format to FileCollection format
- * VizContent has files as {id: {name, text}} structure
- * FileCollection is a simple {name: text} structure
- * TODO move to viz-utils
- */
-export const vizContentToFileCollection = (vizContent) => {
-    const fileCollection = {};
-    // Extract files from vizContent
-    const { files } = vizContent;
-    // Return empty object if files is undefined
-    if (!files) {
-        return fileCollection;
-    }
-    // Convert each VizFile to the FileCollection format
-    Object.values(files).forEach((file) => {
-        fileCollection[file.name] = file.text;
-    });
-    return fileCollection;
-};

package/dist/esm/utils/vizContentToFileCollection.test.js

@@ -1,75 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { vizContentToFileCollection } from "./vizContentToFileCollection";
-describe("vizContentToFileCollection", () => {
-    it("should convert VizContent files to FileCollection format", () => {
-        const mockVizContent = {
-            id: "test-viz-123",
-            files: {
-                file1: {
-                    name: "index.html",
-                    text: "<html>Test</html>",
-                },
-                file2: {
-                    name: "script.js",
-                    text: 'console.log("Hello");',
-                },
-            },
-        };
-        const result = vizContentToFileCollection(mockVizContent);
-        expect(result).toEqual({
-            "index.html": "<html>Test</html>",
-            "script.js": 'console.log("Hello");',
-        });
-    });
-    it("should return an empty object when no files exist", () => {
-        const mockVizContent = {
-            id: "empty-viz",
-            files: {},
-        };
-        const result = vizContentToFileCollection(mockVizContent);
-        expect(result).toEqual({});
-    });
-    it("should return an empty object when no files property", () => {
-        const mockVizContent = {
-            id: "empty-viz",
-            // @ts-ignore
-            files: undefined,
-        };
-        const result = vizContentToFileCollection(mockVizContent);
-        expect(result).toEqual({});
-    });
-    it("should handle files with special characters in names", () => {
-        const mockVizContent = {
-            id: "special-chars-viz",
-            files: {
-                fileId1: {
-                    name: "file with spaces.txt",
-                    text: "content",
-                },
-                fileId2: { name: "data.csv", text: "a,b,c\n1,2,3" },
-            },
-        };
-        const result = vizContentToFileCollection(mockVizContent);
-        expect(result).toEqual({
-            "file with spaces.txt": "content",
-            "data.csv": "a,b,c\n1,2,3",
-        });
-    });
-    it("should preserve file content exactly", () => {
-        const longText = `function complex() {
-      return {
-        nested: {
-          data: [1, 2, 3]
-        }
-      };
-    }`;
-        const mockVizContent = {
-            id: "preserve-content-viz",
-            files: {
-                fileId: { name: "complex.js", text: longText },
-            },
-        };
-        const result = vizContentToFileCollection(mockVizContent);
-        expect(result["complex.js"]).toBe(longText);
-    });
-});

package/dist/esm/v2/computeBundleJSV2.js

@@ -1,29 +0,0 @@
-import { virtualFileSystem } from "../common/virtualFileSystem.js";
-import { sucrasePlugin } from "../common/sucrasePlugin.js";
-import { getGlobals, packageJSON, } from "../common/packageJson.js";
-export const computeBundleJSV2 = async ({ files, rollup, enableSourcemap = true, }) => {
-    const indexJSContent = files["index.js"];
-    if (!indexJSContent) {
-        throw new Error("Missing index.js");
-    }
-    const inputOptions = {
-        input: "./index.js",
-        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 pkg = packageJSON(files);
-    const globals = getGlobals(pkg);
-    const outputOptions = {
-        format: "iife",
-        globals,
-        sourcemap: enableSourcemap,
-    };
-    const { output } = await bundle.generate(outputOptions);
-    return output[0].code;
-};

package/dist/esm/v2/getComputedIndexHtml.js

@@ -1,81 +0,0 @@
-import { dependencies, getConfiguredLibraries, dependencySource, } from "../common/packageJson.js";
-let parser;
-const DEBUG = false;
-// Expose a way to inject a DOMParser implementation
-// when we're in a Node environment (tests, API server).
-export const setJSDOM = (JSDOMInstance) => {
-    const dom = new JSDOMInstance();
-    parser = new dom.window.DOMParser();
-};
-// If we're in the browser, use native DOMParser.
-if (typeof window !== "undefined") {
-    parser = new DOMParser();
-}
-const injectScripts = (htmlTemplate, files) => {
-    if (!parser) {
-        throw new Error("DOM parser is not defined. Did you forget to call setJSDOM()?");
-    }
-    const doc = parser.parseFromString(htmlTemplate, "text/html");
-    // Ensure we have a head element
-    if (!doc.head) {
-        const head = doc.createElement("head");
-        doc.documentElement.insertBefore(head, doc.documentElement.firstChild);
-    }
-    // Ensure we have a body element
-    if (!doc.body) {
-        const body = doc.createElement("body");
-        doc.documentElement.appendChild(body);
-    }
-    // Handle dependencies first (in head)
-    const deps = Object.entries(dependencies(files));
-    if (deps.length > 0) {
-        const libraries = getConfiguredLibraries(files);
-        // Remove any existing dependency scripts
-        deps.forEach(([name]) => {
-            const selector = `script[src*="${name}@"]`;
-            const existingScripts = doc.querySelectorAll(selector);
-            existingScripts.forEach((script) => script.remove());
-        });
-        // Add dependency scripts in order
-        deps
-            .map(([name, version]) => dependencySource({ name, version }, libraries))
-            .forEach((url) => {
-            const scriptTag = doc.createElement("script");
-            scriptTag.src = url;
-            doc.head.appendChild(scriptTag);
-        });
-    }
-    // Handle bundle.js (in body)
-    if (files["bundle.js"] || files["index.js"]) {
-        // Remove any existing bundle.js script tags
-        const existingScripts = doc.querySelectorAll('script[src="bundle.js"]');
-        existingScripts.forEach((script) => script.remove());
-        const bundleScriptTag = doc.createElement("script");
-        bundleScriptTag.src = "bundle.js";
-        doc.body.appendChild(bundleScriptTag);
-    }
-    return `<!DOCTYPE html>${doc.documentElement.outerHTML}`;
-};
-// Compute the index.html file from the files.
-// Includes:
-// - bundle.js script tag
-// - dependencies script tag(s)
-export const getComputedIndexHtml = (files) => {
-    // Isolate the index.html file.
-    const htmlTemplate = files["index.html"];
-    // If there is no index.html file, return an empty string.
-    if (!htmlTemplate &&
-        !files["index.js"] &&
-        !files["bundle.js"]) {
-        DEBUG &&
-            console.log("[getComputedIndexHtml] No index.html file found");
-        return "";
-    }
-    // If index.html is empty but we have JS files, create a minimal HTML template
-    const template = htmlTemplate ||
-        "<!DOCTYPE html><html><head></head><body></body></html>";
-    const indexHtml = injectScripts(template, files);
-    DEBUG &&
-        console.log("[getComputedIndexHtml] indexHtml", indexHtml);
-    return indexHtml;
-};

package/dist/esm/v2/getComputedIndexHtml.test.js

@@ -1,134 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { getComputedIndexHtml, setJSDOM, } from "./getComputedIndexHtml";
-import { JSDOM } from "jsdom";
-import { d3ImportPkg } from "../test/fixtures/v2/d3ImportPkg";
-setJSDOM(JSDOM);
-describe("v2 getComputedIndexHtml", () => {
-    it("should return empty string if missing index.html", async () => {
-        const files = {};
-        expect(getComputedIndexHtml(files)).toEqual(``);
-    });
-    it("should preserve existing index.html if no bundle and no package.json", async () => {
-        const text = "<!DOCTYPE html><html><head></head><body><h1>Hello World</h1></body></html>";
-        const files = { "index.html": text };
-        expect(getComputedIndexHtml(files)).toEqual(text);
-    });
-    it("should add bundle.js, no package.json", async () => {
-        const text = '<!DOCTYPE html><html><head></head><body><script src="bundle.js"></script></body></html>';
-        const files = {
-            "index.html": text,
-            "index.js": 'console.log("Hello")',
-        };
-        // console.log(JSON.stringify(getComputedIndexHtml(files), null, 2));
-        expect(getComputedIndexHtml(files)).toEqual(text);
-    });
-    it("should handle d3 dependency from package.json", async () => {
-        const files = d3ImportPkg;
-        const result = getComputedIndexHtml(files);
-        // Create a DOM to parse and check the result
-        const dom = new JSDOM(result);
-        const document = dom.window.document;
-        // Check that we have the d3 script in the head
-        const d3Script = document.querySelector('head script[src*="d3@6.7.0"]');
-        expect(d3Script).not.toBeNull();
-        // Check that we have the bundle.js script in the body
-        const bundleScript = document.querySelector('body script[src="bundle.js"]');
-        expect(bundleScript).not.toBeNull();
-        // Verify the order: d3 in head, bundle.js in body
-        expect(result.indexOf("d3@6.7.0")).toBeLessThan(result.indexOf("<body>"));
-        expect(result.indexOf("<body>")).toBeLessThan(result.indexOf("bundle.js"));
-    });
-    // Edge cases and degenerate inputs
-    it("should handle malformed HTML in index.html", async () => {
-        const malformedHtml = "<html><head>No closing head tag<body>No closing body tag";
-        const files = {
-            "index.html": malformedHtml,
-            "index.js": 'console.log("Hello")',
-        };
-        const result = getComputedIndexHtml(files);
-        // Should still have both head and body tags
-        expect(result).toContain("<head>");
-        expect(result).toContain("</head>");
-        expect(result).toContain("<body>");
-        expect(result).toContain("</body>");
-        // Should have bundle.js in the body
-        const dom = new JSDOM(result);
-        const bundleScript = dom.window.document.querySelector('body script[src="bundle.js"]');
-        expect(bundleScript).not.toBeNull();
-    });
-    it("should handle HTML without html, head, or body tags", async () => {
-        const minimalHtml = "<div>Just a div</div>";
-        const files = {
-            "index.html": minimalHtml,
-            "index.js": 'console.log("Hello")',
-            "package.json": JSON.stringify({
-                dependencies: {
-                    d3: "6.7.0",
-                },
-            }),
-        };
-        const result = getComputedIndexHtml(files);
-        // Should create proper HTML structure
-        expect(result).toContain("<html>");
-        expect(result).toContain("<head>");
-        expect(result).toContain("<body>");
-        // Should have d3 in head and bundle.js in body
-        const dom = new JSDOM(result);
-        const document = dom.window.document;
-        const d3Script = document.querySelector('head script[src*="d3@6.7.0"]');
-        expect(d3Script).not.toBeNull();
-        const bundleScript = document.querySelector('body script[src="bundle.js"]');
-        expect(bundleScript).not.toBeNull();
-        // Original content should be preserved
-        expect(result).toContain("<div>Just a div</div>");
-    });
-    it("should handle empty index.html", async () => {
-        const files = {
-            "index.html": "",
-            "index.js": 'console.log("Hello")',
-        };
-        const result = getComputedIndexHtml(files);
-        // Should create a minimal HTML structure with bundle.js
-        expect(result).toContain("<html>");
-        expect(result).toContain("<body>");
-        expect(result).toContain('script src="bundle.js"');
-    });
-    it("should handle multiple existing script tags", async () => {
-        const html = `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <script src="existing1.js"></script>
-          <script src="bundle.js"></script>
-        </head>
-        <body>
-          <script src="existing2.js"></script>
-          <script src="bundle.js"></script>
-        </body>
-      </html>
-    `;
-        const files = {
-            "index.html": html,
-            "index.js": 'console.log("Hello")',
-            "package.json": JSON.stringify({
-                dependencies: {
-                    d3: "6.7.0",
-                },
-            }),
-        };
-        const result = getComputedIndexHtml(files);
-        // Create DOM to analyze the result
-        const dom = new JSDOM(result);
-        const document = dom.window.document;
-        // Should keep existing scripts
-        expect(document.querySelectorAll('script[src="existing1.js"]').length).toBe(1);
-        expect(document.querySelectorAll('script[src="existing2.js"]').length).toBe(1);
-        // Should have exactly one bundle.js script in the body
-        const bundleScripts = document.querySelectorAll('script[src="bundle.js"]');
-        expect(bundleScripts.length).toBe(1);
-        expect(bundleScripts[0].parentElement).toBe(document.body);
-        // Should have d3 script in the head
-        const d3Script = document.querySelector('head script[src*="d3@6.7.0"]');
-        expect(d3Script).not.toBeNull();
-    });
-});

package/dist/esm/v2/index.js

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

package/dist/esm/v2/v2Build.js

@@ -1,11 +0,0 @@
-import { getComputedIndexHtml } from "./getComputedIndexHtml.js";
-import { computeBundleJSV2 } from "./computeBundleJSV2.js";
-export const v2Build = async ({ files, rollup, enableSourcemap, }) => ({
-    ...files,
-    "bundle.js": await computeBundleJSV2({
-        files,
-        rollup,
-        enableSourcemap,
-    }),
-    "index.html": getComputedIndexHtml(files),
-});

package/dist/esm/v3/cleanRollupErrorMessage.js

@@ -1,9 +0,0 @@
-// 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/esm/v3/computeBundleJSV3.js

@@ -1,48 +0,0 @@
-import { sucrasePlugin } from "../common/sucrasePlugin.js";
-import { getGlobals, packageJSON, } from "../common/packageJson.js";
-import { transformDSV } from "./transformDSV/index.js";
-import { vizResolve } from "./vizResolve.js";
-import { vizLoad } from "./vizLoad.js";
-import { transformSvelte, } from "./transformSvelte.js";
-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/esm/v3/createVizContent.js

@@ -1,23 +0,0 @@
-import { generateVizId } from "@vizhub/viz-utils";
-/**
- * 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 = generateVizId();
-    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,
-    };
-};