@vizhub/runtime 0.2.0 → 0.3.1

package/dist/esm/common/packageJson.js

@@ -0,0 +1,71 @@
+const EMPTY_PKG_JSON = {
+    dependencies: {},
+    vizhub: {},
+    license: "MIT",
+};
+const DEBUG = false;
+export const packageJSON = (files) => {
+    const packageJsonText = files["package.json"];
+    DEBUG &&
+        console.log("[packageJSON] packageJsonText:", packageJsonText);
+    try {
+        const pkg = packageJsonText
+            ? JSON.parse(packageJsonText)
+            : EMPTY_PKG_JSON;
+        DEBUG &&
+            console.log("[packageJSON] pkg:", JSON.stringify(pkg, null, 2));
+        return pkg;
+    }
+    catch {
+        DEBUG &&
+            console.log("[packageJSON] Error parsing package.json");
+        return EMPTY_PKG_JSON;
+    }
+};
+export const dependencies = (files) => packageJSON(files).dependencies || {};
+export const getConfiguredLibraries = (files) => {
+    const vizhubConfig = packageJSON(files).vizhub || {};
+    return vizhubConfig.libraries || {};
+};
+export const dependencySource = ({ name, version }, libraries, cdn = "jsdelivr") => {
+    const path = libraries[name]
+        ? libraries[name].path || ""
+        : "";
+    const src = cdn === "jsdelivr"
+        ? `https://cdn.jsdelivr.net/npm/${name}@${version}${path}`
+        : `https://unpkg.com/${name}@${version}${path}`;
+    return src;
+};
+export const getLicense = (files) => {
+    const license = packageJSON(files).license;
+    if (typeof license === "object" &&
+        license !== null &&
+        "type" in license) {
+        return license.type;
+    }
+    return license || EMPTY_PKG_JSON.license;
+};
+export const getConfiguredGlobals = (pkg) => {
+    const libraries = pkg?.vizhub?.libraries;
+    if (libraries) {
+        return Object.entries(libraries).reduce((accumulator, [packageName, config]) => {
+            if (config.global) {
+                accumulator[packageName] = config.global;
+            }
+            return accumulator;
+        }, {});
+    }
+    return {};
+};
+const defaultGlobals = {
+    d3: "d3",
+    react: "React",
+    "react-dom": "ReactDOM",
+};
+export const getGlobals = (pkg) => {
+    const configuredGlobals = getConfiguredGlobals(pkg);
+    return {
+        ...defaultGlobals,
+        ...configuredGlobals,
+    };
+};

package/dist/esm/common/packageJson.test.js

@@ -0,0 +1,146 @@
+import { describe, it, expect } from "vitest";
+import { packageJSON, dependencies, getConfiguredLibraries, dependencySource, getLicense, } from "./packageJson";
+describe("packageJson", () => {
+    const mockFiles = {
+        "package.json": JSON.stringify({
+            dependencies: {
+                react: "17.0.2",
+                d3: "7.0.0",
+            },
+            vizhub: {
+                libraries: {
+                    d3: { path: "/dist/d3.min.js" },
+                },
+            },
+            license: "Apache-2.0",
+        }),
+    };
+    const emptyFiles = {};
+    const invalidFiles = {
+        "package.json": "invalid json",
+    };
+    describe("packageJSON", () => {
+        it("should parse valid package.json", () => {
+            const result = packageJSON(mockFiles);
+            expect(result).toHaveProperty("dependencies");
+            expect(result.dependencies).toHaveProperty("react", "17.0.2");
+        });
+        it("should return empty object for missing package.json", () => {
+            const result = packageJSON(emptyFiles);
+            expect(result).toEqual({
+                dependencies: {},
+                vizhub: {},
+                license: "MIT",
+            });
+        });
+        it("should handle invalid JSON", () => {
+            const result = packageJSON(invalidFiles);
+            expect(result).toEqual({
+                dependencies: {},
+                vizhub: {},
+                license: "MIT",
+            });
+        });
+    });
+    describe("dependencies", () => {
+        it("should return dependencies from package.json", () => {
+            const result = dependencies(mockFiles);
+            expect(result).toEqual({
+                react: "17.0.2",
+                d3: "7.0.0",
+            });
+        });
+        it("should return empty object when no dependencies", () => {
+            const result = dependencies(emptyFiles);
+            expect(result).toEqual({});
+        });
+    });
+    describe("getConfiguredLibraries", () => {
+        it("should return configured libraries", () => {
+            const result = getConfiguredLibraries(mockFiles);
+            expect(result).toEqual({
+                d3: { path: "/dist/d3.min.js" },
+            });
+        });
+        it("should return empty object when no libraries configured", () => {
+            const result = getConfiguredLibraries(emptyFiles);
+            expect(result).toEqual({});
+        });
+    });
+    describe("dependencySource", () => {
+        it("should generate correct URL with path - jsdelivr", () => {
+            const dependency = { name: "d3", version: "7.0.0" };
+            const libraries = { d3: { path: "/dist/d3.min.js" } };
+            const result = dependencySource(dependency, libraries);
+            expect(result).toBe("https://cdn.jsdelivr.net/npm/d3@7.0.0/dist/d3.min.js");
+        });
+        it("should generate correct URL without path - jsdelivr", () => {
+            const dependency = {
+                name: "react",
+                version: "17.0.2",
+            };
+            const libraries = {};
+            const result = dependencySource(dependency, libraries);
+            expect(result).toBe("https://cdn.jsdelivr.net/npm/react@17.0.2");
+        });
+        it("should generate correct URL with path - unpkg", () => {
+            const dependency = { name: "d3", version: "7.0.0" };
+            const libraries = { d3: { path: "/dist/d3.min.js" } };
+            const result = dependencySource(dependency, libraries, "unpkg");
+            expect(result).toBe("https://unpkg.com/d3@7.0.0/dist/d3.min.js");
+        });
+        it("should generate correct URL without path - unpkg", () => {
+            const dependency = {
+                name: "react",
+                version: "17.0.2",
+            };
+            const libraries = {};
+            const result = dependencySource(dependency, libraries, "unpkg");
+            expect(result).toBe("https://unpkg.com/react@17.0.2");
+        });
+    });
+    describe("getLicense", () => {
+        it("should return license from package.json", () => {
+            const result = getLicense(mockFiles);
+            expect(result).toBe("Apache-2.0");
+        });
+        it("should return default MIT license when not specified", () => {
+            const result = getLicense(emptyFiles);
+            expect(result).toBe("MIT");
+        });
+    });
+    describe("Edge cases", () => {
+        it("should handle malformed library configuration", () => {
+            const malformedFiles = {
+                "package.json": JSON.stringify({
+                    dependencies: { d3: "7.0.0" },
+                    vizhub: { libraries: { d3: null } },
+                }),
+            };
+            const result = getConfiguredLibraries(malformedFiles);
+            expect(result).toEqual({ d3: null });
+        });
+        it("should handle empty version strings", () => {
+            const dependency = { name: "react", version: "" };
+            const result = dependencySource(dependency, {});
+            expect(result).toBe("https://cdn.jsdelivr.net/npm/react@");
+        });
+        it("should handle special characters in dependency names", () => {
+            const specialCharDep = {
+                name: "@angular/core",
+                version: "14.0.0",
+            };
+            const result = dependencySource(specialCharDep, {});
+            expect(result).toBe("https://cdn.jsdelivr.net/npm/@angular/core@14.0.0");
+        });
+        it("should handle unusual license formats", () => {
+            const unusualLicenseFiles = {
+                "package.json": JSON.stringify({
+                    license: { type: "MIT" },
+                }),
+            };
+            const result = getLicense(unusualLicenseFiles);
+            expect(result).toBe("MIT");
+        });
+    });
+});

package/dist/esm/common/sucrasePlugin.js

@@ -0,0 +1,24 @@
+import { transform } from "sucrase";
+export function sucrasePlugin() {
+    return {
+        name: "sucrase",
+        transform(code, id) {
+            // Transform .js, .jsx, and .tsx files
+            if (!id.match(/\.(?:js|[jt]sx)$/)) {
+                return null;
+            }
+            const result = transform(code, {
+                transforms: ["jsx", "typescript"],
+                filePath: id, // For source maps
+                sourceMapOptions: {
+                    compiledFilename: "bundle.js",
+                },
+                production: true,
+            });
+            return {
+                code: result.code,
+                map: result.sourceMap,
+            };
+        },
+    };
+}

package/dist/esm/common/virtualFileSystem.js

@@ -0,0 +1,75 @@
+const normalizePath = (filepath) => {
+    // Remove leading ./
+    let normalized = filepath.replace(/^\.\//, "");
+    // Replace multiple slashes with single slash
+    normalized = normalized.replace(/\/+/g, "/");
+    // Remove trailing slash
+    normalized = normalized.replace(/\/$/, "");
+    return normalized;
+};
+const joinPaths = (base, relative) => {
+    // Get directory name of base path
+    const baseDir = base.includes("/")
+        ? base.slice(0, base.lastIndexOf("/"))
+        : "";
+    // Handle .. by removing one directory level
+    const parts = relative.split("/");
+    const resultParts = baseDir
+        ? baseDir.split("/")
+        : [];
+    for (const part of parts) {
+        if (part === "..") {
+            resultParts.pop();
+        }
+        else if (part !== "." && part !== "") {
+            resultParts.push(part);
+        }
+    }
+    return resultParts.join("/");
+};
+export const virtualFileSystem = (files) => {
+    return {
+        name: "virtual-file-system",
+        resolveId(source, importer) {
+            // Handle relative paths
+            if (source.startsWith("./") ||
+                source.startsWith("../")) {
+                const resolvedPath = importer
+                    ? normalizePath(joinPaths(importer, source))
+                    : normalizePath(source);
+                // Try exact match first
+                if (files[resolvedPath]) {
+                    return resolvedPath;
+                }
+                // Try with extensions if no exact match is found
+                const extensions = [".js", ".jsx", ".ts", ".tsx"];
+                for (const ext of extensions) {
+                    const pathWithExt = resolvedPath + ext;
+                    if (files[pathWithExt]) {
+                        return pathWithExt;
+                    }
+                }
+            }
+            // Handle bare module imports
+            if (files[source]) {
+                return source;
+            }
+            // Try bare imports with extensions
+            const extensions = [".js", ".jsx", ".ts", ".tsx"];
+            for (const ext of extensions) {
+                const pathWithExt = source + ext;
+                if (files[pathWithExt]) {
+                    return pathWithExt;
+                }
+            }
+            return null;
+        },
+        load(id) {
+            // Return the contents if the file exists in our virtual system
+            if (files[id]) {
+                return files[id];
+            }
+            return null;
+        },
+    };
+};

package/dist/esm/determineRuntimeVersion.js

@@ -0,0 +1,22 @@
+export const determineRuntimeVersion = (files) => {
+    if (Object.keys(files).length === 0) {
+        return null;
+    }
+    const hasIndexHTML = "index.html" in files;
+    const hasIndexJS = "index.js" in files;
+    const hasIndexJSX = "index.jsx" in files;
+    if (hasIndexHTML) {
+        const hasModuleScript = files["index.html"].includes('type="module"');
+        if (hasModuleScript) {
+            return "v4";
+        }
+        if (hasIndexJS || hasIndexJSX) {
+            return "v2";
+        }
+        return "v1";
+    }
+    if (!hasIndexHTML && hasIndexJS) {
+        return "v3";
+    }
+    return null;
+};

package/dist/esm/determineRuntimeVersion.test.js

@@ -0,0 +1,101 @@
+import { describe, it, expect } from "vitest";
+import { determineRuntimeVersion } from "./determineRuntimeVersion";
+import { jsScriptTagTypeModule, jsScriptTagTypeModules, fetchInterception, esmBuild, } from "./test/fixtures/v4";
+describe("determineRuntimeVersion", () => {
+    it("should return null when there are no files", () => {
+        const mockFiles = {};
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe(null);
+    });
+    it("should return v1 when only index.html exists", () => {
+        const mockFiles = {
+            "index.html": "<html></html>",
+        };
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe("v1");
+    });
+    it("should return v2 when both index.html and index.js exist", () => {
+        const mockFiles = {
+            "index.html": "<html></html>",
+            "index.js": 'console.log("Hello");',
+        };
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe("v2");
+    });
+    it("should return v2 when both index.html and index.jsx exist", () => {
+        const mockFiles = {
+            "index.html": "<html></html>",
+            "index.jsx": 'console.log("Hello");',
+        };
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe("v2");
+    });
+    it("should return v3 when only index.js exists", () => {
+        const mockFiles = {
+            "index.js": 'console.log("Hello");',
+        };
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe("v3");
+    });
+    it("should return null when only index.jsx exists (no v3 support for JSX)", () => {
+        const mockFiles = {
+            "index.jsx": 'console.log("Hello");',
+        };
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe(null);
+    });
+    it("should return v4 when index.html contains script type=module with importmap", () => {
+        const mockFiles = {
+            "index.html": `
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <script type="importmap">
+              { "imports": { "test": "./test.js" } }
+            </script>
+          </head>
+          <body>
+            <script type="module" src="index.js"></script>
+          </body>
+        </html>
+      `,
+            "index.js": 'import { hello } from "test"; console.log(hello);',
+            "test.js": 'export const hello = "world";',
+        };
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe("v4");
+    });
+    it("should return v4 when multiple module scripts are present", () => {
+        const mockFiles = {
+            "index.html": `
+        <!DOCTYPE html>
+        <html>
+          <body>
+            <script type="module" src="index.js"></script>
+          </body>
+        </html>
+      `,
+            "index.js": 'import { hello } from "./utils.js"; console.log(hello);',
+            "utils.js": 'export const hello = "world";',
+        };
+        const result = determineRuntimeVersion(mockFiles);
+        expect(result).toBe("v4");
+    });
+    // Test v4 fixtures
+    it("should detect v4 for jsScriptTagTypeModule fixture", () => {
+        const result = determineRuntimeVersion(jsScriptTagTypeModule);
+        expect(result).toBe("v4");
+    });
+    it("should detect v4 for jsScriptTagTypeModules fixture", () => {
+        const result = determineRuntimeVersion(jsScriptTagTypeModules);
+        expect(result).toBe("v4");
+    });
+    it("should detect v4 for fetchInterception fixture", () => {
+        const result = determineRuntimeVersion(fetchInterception);
+        expect(result).toBe("v4");
+    });
+    it("should detect v4 for esmBuild fixture", () => {
+        const result = determineRuntimeVersion(esmBuild);
+        expect(result).toBe("v4");
+    });
+});

package/dist/esm/index.js

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

package/dist/esm/test/fixtures/v1/basicHTML.js

@@ -0,0 +1,15 @@
+export const basicHTML = {
+    "index.html": `<!DOCTYPE html>
+<html>
+  <head>
+    <title>My HTML Document</title>
+  </head>
+  <body>
+    <h1>Hello, World!</h1>
+    <p>This is my first HTML document.</p>
+    <script>
+      console.log('Hello, World!');
+    </script>
+  </body>
+</html>`,
+};

package/dist/esm/test/fixtures/v1/fetchProxy.js

@@ -0,0 +1,12 @@
+export const fetchProxy = {
+    "index.html": `<!DOCTYPE html>
+<html>
+  <body>
+    <script src="index.js"></script>
+  </body>
+</html>`,
+    "index.js": `fetch("data.csv")
+        .then((response) => response.text())
+        .then(console.log);`,
+    "data.csv": `Hello, Fetch!`,
+};

package/dist/esm/test/fixtures/v1/index.js

@@ -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/esm/test/fixtures/v1/jsScriptTag.js

@@ -0,0 +1,9 @@
+export const jsScriptTag = {
+    "index.html": `<!DOCTYPE html>
+<html>
+  <body>
+    <script src="index.js"></script>
+  </body>
+</html>`,
+    "index.js": `console.log('Hello, JS!');`,
+};

package/dist/esm/test/fixtures/v1/protocolTest.js

@@ -0,0 +1,15 @@
+export const protocolTest = {
+    "index.html": `<!DOCTYPE html>
+<html>
+  <head>
+    <link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
+  </head>
+  <body>
+    <div>Protocol Test</div>
+    <script>
+      console.log('Protocol test loaded');
+    </script>
+  </body>
+</html>`,
+};

package/dist/esm/test/fixtures/v1/styleTest.js

@@ -0,0 +1,15 @@
+export const styleTest = {
+    "index.html": `<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <div id="test">Test</div>
+    <script>
+      console.log(window.getComputedStyle(document.getElementById('test')).color);
+    </script>
+  </body>
+</html>`,
+    "styles.css": `#test { color: rgb(255, 0, 0); }`,
+};

package/dist/esm/test/fixtures/v1/xmlTest.js

@@ -0,0 +1,19 @@
+export const xmlTest = {
+    "index.html": `<!DOCTYPE html>
+<html>
+  <body>
+    <script>
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', 'data.xml');
+      xhr.onload = () => {
+        console.log(xhr.responseXML.documentElement.nodeName);
+      };
+      xhr.send();
+    </script>
+  </body>
+</html>`,
+    "data.xml": `<?xml version="1.0" encoding="UTF-8"?>
+<root>
+  <item>Test</item>
+</root>`,
+};

package/dist/esm/test/fixtures/v2/basicBundle.js

@@ -0,0 +1,5 @@
+export const basicBundle = {
+    "index.html": "<script src='bundle.js'></script>",
+    "index.js": 'import { foo } from "./foo.js"; console.log(foo);',
+    "foo.js": 'export const foo = "bar";',
+};

package/dist/esm/test/fixtures/v2/basicBundleNoExtension.js

@@ -0,0 +1,5 @@
+export const basicBundleNoExtension = {
+    "index.html": "<script src='bundle.js'></script>",
+    "index.js": 'import { foo } from "./foo"; console.log(foo);',
+    "foo.js": 'export const foo = "bar";',
+};

package/dist/esm/test/fixtures/v2/d3Import.js

@@ -0,0 +1,7 @@
+export const d3Import = {
+    "index.html": `
+    <script src='https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.js'></script>
+    <script src='bundle.js'></script>
+  `,
+    "index.js": 'import { select } from "d3"; console.log(typeof select);',
+};

package/dist/esm/test/fixtures/v2/d3ImportPkg.js

@@ -0,0 +1,19 @@
+export const d3ImportPkg = {
+    "index.html": `
+    <script src='bundle.js'></script>
+  `,
+    "index.js": 'import { select } from "d3"; console.log(typeof select);',
+    "package.json": `{
+    "dependencies": {
+      "d3": "6.7.0"
+    },
+    "vizhub": {
+      "libraries": {
+        "d3": {
+          "global": "d3",
+          "path": "/dist/d3.min.js"
+        }
+      }
+    }
+  }`,
+};

package/dist/esm/test/fixtures/v2/d3RosettaImportPkg.js

@@ -0,0 +1,19 @@
+export const d3RosettaImportPkg = {
+    "index.html": `
+    <script src='bundle.js'></script>
+  `,
+    "index.js": 'import { one } from "d3-rosetta"; console.log(typeof one);',
+    "package.json": `{
+    "dependencies": {
+      "d3-rosetta": "1.0.0"
+    },
+    "vizhub": {
+      "libraries": {
+        "d3-rosetta": {
+          "global": "d3Rosetta",
+          "path": "/dist/d3-rosetta.umd.js"
+        }
+      }
+    }
+  }`,
+};

package/dist/esm/test/fixtures/v2/es6Preserve.js

@@ -0,0 +1,6 @@
+export const es6Preserve = {
+    "index.html": `
+    <script src='bundle.js'></script>
+  `,
+    "index.js": "const fn = a => a * a; console.log(fn(4));",
+};

package/dist/esm/test/fixtures/v2/generatorSupport.js

@@ -0,0 +1,6 @@
+export const generatorSupport = {
+    "index.html": `
+    <script src='bundle.js'></script>
+  `,
+    "index.js": "console.log(function* () { yield 5; }().next().value)",
+};

package/dist/esm/test/fixtures/v2/index.js

@@ -0,0 +1,15 @@
+export { basicBundle } from "./basicBundle";
+export { basicBundleNoExtension } from "./basicBundleNoExtension";
+export { d3Import } from "./d3Import";
+export { d3ImportPkg } from "./d3ImportPkg";
+export { reactImport } from "./reactImport";
+export { reactImportPkg } from "./reactImportPkg";
+export { reactDomImport } from "./reactDomImport";
+export { reactDomImportPkg } from "./reactDomImportPkg";
+export { jsxTranspile } from "./jsxTranspile";
+export { es6Preserve } from "./es6Preserve";
+export { generatorSupport } from "./generatorSupport";
+export { unicodeSupport } from "./unicodeSupport";
+export { d3RosettaImportPkg } from "./d3RosettaImportPkg";
+// Make sure to add the sourceMapErrorFixture to the exports
+export * from "./sourceMapErrorFixture";

package/dist/esm/test/fixtures/v2/jsxTranspile.js

@@ -0,0 +1,6 @@
+export const jsxTranspile = {
+    "index.html": `
+    <script src='bundle.js'></script>
+  `,
+    "index.js": "<div>Hello JSX!</div>",
+};

package/dist/esm/test/fixtures/v2/reactDomImport.js

@@ -0,0 +1,8 @@
+export const reactDomImport = {
+    "index.html": `
+    <script src='https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js'></script>
+    <script src='https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js'></script>
+    <script src='bundle.js'></script>
+  `,
+    "index.js": 'import ReactDOM from "react-dom"; console.log(typeof ReactDOM);',
+};