@vizhub/runtime 0.1.4 → 0.3.0

package/dist/buildHTML.js

@@ -0,0 +1,67 @@
+import { magicSandbox } from "magic-sandbox";
+import { determineRuntimeVersion } from "./determineRuntimeVersion";
+import { v2Build } from "./v2";
+import { v3Build } from "./v3";
+import { v4Build } from "./v4";
+import { createVizCache } from "./v3/vizCache";
+import { createVizContent } from "./v3/createVizContent";
+import { vizContentToFileCollection } from "./utils/vizContentToFileCollection";
+const DEBUG = false;
+export const buildHTML = async ({ files, rollup, enableSourcemap = true, vizCache, vizId, slugCache, getSvelteCompiler, }) => {
+    if (!files && !vizCache) {
+        throw new Error("Either files or vizCache is required");
+    }
+    if (!files && vizCache && !vizId) {
+        throw new Error("vizId is required when using vizCache");
+    }
+    if (!files && vizCache && vizId) {
+        files = vizContentToFileCollection(await vizCache.get(vizId));
+    }
+    if (!files) {
+        throw new Error("Upable to extract viz files");
+    }
+    const version = determineRuntimeVersion(files);
+    DEBUG && console.log("[buildHTML] version:", version);
+    if (version === "v1") {
+        return magicSandbox(files);
+    }
+    if (version === "v2") {
+        if (!rollup) {
+            throw new Error("Rollup is required for v2 runtime");
+        }
+        return magicSandbox(await v2Build({ files, rollup, enableSourcemap }));
+    }
+    if (version === "v3") {
+        if (!rollup) {
+            throw new Error("Rollup is required for v3 runtime");
+        }
+        if (!vizCache && !vizId) {
+            const vizContent = createVizContent(files);
+            vizId = vizContent.id;
+            vizCache = createVizCache({
+                initialContents: [vizContent],
+                handleCacheMiss: async () => {
+                    throw new Error("Cache miss handler not implemented");
+                },
+            });
+        }
+        if (!vizCache || !vizId) {
+            throw new Error("vizCache and vizId are required for v3 runtime");
+        }
+        return await v3Build({
+            files,
+            rollup,
+            vizCache,
+            vizId,
+            slugCache,
+            getSvelteCompiler,
+        });
+    }
+    if (version === "v4") {
+        if (!rollup) {
+            throw new Error("Rollup is required for v4 runtime");
+        }
+        return magicSandbox(await v4Build({ files, rollup, enableSourcemap }));
+    }
+    throw new Error(`Unsupported runtime version: ${version}`);
+};

package/dist/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/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/common/packageJson.test.d.ts

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

package/dist/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/common/sucrasePlugin.d.ts

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

package/dist/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/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/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/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/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/determineRuntimeVersion.test.d.ts

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

package/dist/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/fixtures/basicHTML.d.ts

@@ -0,0 +1,2 @@
+import { VizFiles } from "@vizhub/viz-types";
+export declare const basicHTML: VizFiles;

package/dist/fixtures/basicHTML.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.basicHTML = void 0;
+const viz_types_1 = require("@vizhub/viz-types");
+exports.basicHTML = {
+    [(0, viz_types_1.generateVizFileId)()]: {
+        name: "index.html",
+        text: `<!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/fixtures/fetchProxy.d.ts

@@ -0,0 +1,2 @@
+import { VizFiles } from "@vizhub/viz-types";
+export declare const fetchProxy: VizFiles;

package/dist/fixtures/fetchProxy.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchProxy = void 0;
+const viz_types_1 = require("@vizhub/viz-types");
+exports.fetchProxy = {
+    [(0, viz_types_1.generateVizFileId)()]: {
+        name: "index.html",
+        text: `<!DOCTYPE html>
+<html>
+  <body>
+    <script src="index.js"></script>
+  </body>
+</html>`,
+    },
+    [(0, viz_types_1.generateVizFileId)()]: {
+        name: "index.js",
+        text: `fetch("data.csv")
+        .then((response) => response.text())
+        .then(console.log);`,
+    },
+    [(0, viz_types_1.generateVizFileId)()]: {
+        name: "data.csv",
+        text: `Hello, Fetch!`,
+    },
+};

package/dist/fixtures/index.d.ts

@@ -0,0 +1,3 @@
+export { basicHTML } from "./basicHTML";
+export { jsScriptTag } from "./jsScriptTag";
+export { fetchProxy } from "./fetchProxy";

package/dist/fixtures/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchProxy = exports.jsScriptTag = exports.basicHTML = void 0;
+var basicHTML_1 = require("./basicHTML");
+Object.defineProperty(exports, "basicHTML", { enumerable: true, get: function () { return basicHTML_1.basicHTML; } });
+var jsScriptTag_1 = require("./jsScriptTag");
+Object.defineProperty(exports, "jsScriptTag", { enumerable: true, get: function () { return jsScriptTag_1.jsScriptTag; } });
+var fetchProxy_1 = require("./fetchProxy");
+Object.defineProperty(exports, "fetchProxy", { enumerable: true, get: function () { return fetchProxy_1.fetchProxy; } });

package/dist/fixtures/jsScriptTag.d.ts

@@ -0,0 +1,2 @@
+import { VizFiles } from "@vizhub/viz-types";
+export declare const jsScriptTag: VizFiles;

package/dist/fixtures/jsScriptTag.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsScriptTag = void 0;
+const viz_types_1 = require("@vizhub/viz-types");
+exports.jsScriptTag = {
+    [(0, viz_types_1.generateVizFileId)()]: {
+        name: "index.html",
+        text: `<!DOCTYPE html>
+<html>
+  <body>
+    <script src="index.js"></script>
+  </body>
+</html>`,
+    },
+    [(0, viz_types_1.generateVizFileId)()]: {
+        name: "index.js",
+        text: `console.log('Hello, JS!');`,
+    },
+};