@vizhub/runtime 0.3.0 → 0.3.1

package/dist/cjs/test/v4.test.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const puppeteer_1 = __importDefault(require("puppeteer"));
+const vitest_1 = require("vitest");
+const testInBrowser_1 = require("./testInBrowser");
+const v4_1 = require("./fixtures/v4");
+let browser;
+(0, vitest_1.beforeAll)(async () => {
+    browser = await puppeteer_1.default.launch();
+});
+(0, vitest_1.afterAll)(async () => {
+    await browser.close();
+});
+(0, vitest_1.describe)("VizHub Runtime v4", () => {
+    (0, vitest_1.it)("should handle script type=module with import maps", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.jsScriptTagTypeModule,
+            expectedLog: "Hello, ES Module!",
+        });
+    });
+    (0, vitest_1.it)("should handle script type=module with file imports", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.jsScriptTagTypeModules,
+            expectedLog: "Hello, ES Module File!",
+        });
+    });
+    (0, vitest_1.it)("should handle fetch interception", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.fetchInterception,
+            expectedLog: "Fetch intercepted successfully",
+        });
+    });
+    vitest_1.it.skip("should handle ESM builds from npm packages", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.esmBuild,
+            expectedLog: new RegExp(/\d{4}-\d{2}-\d{2}/), // matches date format yyyy-MM-dd
+        });
+    });
+    vitest_1.it.skip("should handle React JSX", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.reactJsx,
+            expectedLog: "Hello React JSX!",
+            evaluateInBrowser: async (page) => {
+                return await page.evaluate(() => {
+                    return document.querySelector("#root div")
+                        ?.textContent;
+                });
+            },
+        });
+    });
+    vitest_1.it.skip("should handle D3 usage", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.d3Usage,
+            expectedLog: "D3 chart rendered successfully",
+            evaluateInBrowser: async (page) => {
+                return await page.evaluate(() => {
+                    return (document.querySelector("#chart svg circle") !==
+                        null);
+                });
+            },
+        });
+    });
+    (0, vitest_1.it)("should handle Three.js usage", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.threeJsUsage,
+            expectedLog: "Three.js imports: object function",
+        });
+    });
+    vitest_1.it.skip("should handle React hooks", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.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");
+                });
+            },
+        });
+    });
+    vitest_1.it.skip("should handle TypeScript support", async () => {
+        await (0, testInBrowser_1.testInBrowser)({
+            browser,
+            files: v4_1.typeScriptSupport,
+            expectedLog: "TypeScript is working",
+            evaluateInBrowser: async (page) => {
+                return await page.evaluate(() => {
+                    return (document.querySelector("#app h1")
+                        ?.textContent === "Hello, John Doe!");
+                });
+            },
+        });
+    });
+});

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils/vizContentToFileCollection.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vizContentToFileCollection = void 0;
+/**
+ * Converts VizContent format to FileCollection format
+ * VizContent has files as {id: {name, text}} structure
+ * FileCollection is a simple {name: text} structure
+ */
+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;
+};
+exports.vizContentToFileCollection = vizContentToFileCollection;

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const vizContentToFileCollection_1 = require("./vizContentToFileCollection");
+(0, vitest_1.describe)("vizContentToFileCollection", () => {
+    (0, vitest_1.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 = (0, vizContentToFileCollection_1.vizContentToFileCollection)(mockVizContent);
+        (0, vitest_1.expect)(result).toEqual({
+            "index.html": "<html>Test</html>",
+            "script.js": 'console.log("Hello");',
+        });
+    });
+    (0, vitest_1.it)("should return an empty object when no files exist", () => {
+        const mockVizContent = {
+            id: "empty-viz",
+            files: {},
+        };
+        const result = (0, vizContentToFileCollection_1.vizContentToFileCollection)(mockVizContent);
+        (0, vitest_1.expect)(result).toEqual({});
+    });
+    (0, vitest_1.it)("should return an empty object when no files property", () => {
+        const mockVizContent = {
+            id: "empty-viz",
+            // @ts-ignore
+            files: undefined,
+        };
+        const result = (0, vizContentToFileCollection_1.vizContentToFileCollection)(mockVizContent);
+        (0, vitest_1.expect)(result).toEqual({});
+    });
+    (0, vitest_1.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 = (0, vizContentToFileCollection_1.vizContentToFileCollection)(mockVizContent);
+        (0, vitest_1.expect)(result).toEqual({
+            "file with spaces.txt": "content",
+            "data.csv": "a,b,c\n1,2,3",
+        });
+    });
+    (0, vitest_1.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 = (0, vizContentToFileCollection_1.vizContentToFileCollection)(mockVizContent);
+        (0, vitest_1.expect)(result["complex.js"]).toBe(longText);
+    });
+});

package/dist/cjs/v2/computeBundleJSV2.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeBundleJSV2 = void 0;
+const virtualFileSystem_1 = require("../common/virtualFileSystem");
+const sucrasePlugin_1 = require("../common/sucrasePlugin");
+const packageJson_1 = require("../common/packageJson");
+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: [(0, virtualFileSystem_1.virtualFileSystem)(files), (0, sucrasePlugin_1.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 = (0, packageJson_1.packageJSON)(files);
+    const globals = (0, packageJson_1.getGlobals)(pkg);
+    const outputOptions = {
+        format: "iife",
+        globals,
+        sourcemap: enableSourcemap,
+    };
+    const { output } = await bundle.generate(outputOptions);
+    return output[0].code;
+};
+exports.computeBundleJSV2 = computeBundleJSV2;

package/dist/cjs/v2/getComputedIndexHtml.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComputedIndexHtml = exports.setJSDOM = void 0;
+const packageJson_1 = require("../common/packageJson");
+let parser;
+const DEBUG = false;
+// Expose a way to inject a DOMParser implementation
+// when we're in a Node environment (tests, API server).
+const setJSDOM = (JSDOMInstance) => {
+    const dom = new JSDOMInstance();
+    parser = new dom.window.DOMParser();
+};
+exports.setJSDOM = setJSDOM;
+// 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((0, packageJson_1.dependencies)(files));
+    if (deps.length > 0) {
+        const libraries = (0, packageJson_1.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]) => (0, packageJson_1.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)
+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;
+};
+exports.getComputedIndexHtml = getComputedIndexHtml;

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

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const getComputedIndexHtml_1 = require("./getComputedIndexHtml");
+const jsdom_1 = require("jsdom");
+const d3ImportPkg_1 = require("../test/fixtures/v2/d3ImportPkg");
+(0, getComputedIndexHtml_1.setJSDOM)(jsdom_1.JSDOM);
+(0, vitest_1.describe)("v2 getComputedIndexHtml", () => {
+    (0, vitest_1.it)("should return empty string if missing index.html", async () => {
+        const files = {};
+        (0, vitest_1.expect)((0, getComputedIndexHtml_1.getComputedIndexHtml)(files)).toEqual(``);
+    });
+    (0, vitest_1.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 };
+        (0, vitest_1.expect)((0, getComputedIndexHtml_1.getComputedIndexHtml)(files)).toEqual(text);
+    });
+    (0, vitest_1.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));
+        (0, vitest_1.expect)((0, getComputedIndexHtml_1.getComputedIndexHtml)(files)).toEqual(text);
+    });
+    (0, vitest_1.it)("should handle d3 dependency from package.json", async () => {
+        const files = d3ImportPkg_1.d3ImportPkg;
+        const result = (0, getComputedIndexHtml_1.getComputedIndexHtml)(files);
+        // Create a DOM to parse and check the result
+        const dom = new jsdom_1.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"]');
+        (0, vitest_1.expect)(d3Script).not.toBeNull();
+        // Check that we have the bundle.js script in the body
+        const bundleScript = document.querySelector('body script[src="bundle.js"]');
+        (0, vitest_1.expect)(bundleScript).not.toBeNull();
+        // Verify the order: d3 in head, bundle.js in body
+        (0, vitest_1.expect)(result.indexOf("d3@6.7.0")).toBeLessThan(result.indexOf("<body>"));
+        (0, vitest_1.expect)(result.indexOf("<body>")).toBeLessThan(result.indexOf("bundle.js"));
+    });
+    // Edge cases and degenerate inputs
+    (0, vitest_1.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 = (0, getComputedIndexHtml_1.getComputedIndexHtml)(files);
+        // Should still have both head and body tags
+        (0, vitest_1.expect)(result).toContain("<head>");
+        (0, vitest_1.expect)(result).toContain("</head>");
+        (0, vitest_1.expect)(result).toContain("<body>");
+        (0, vitest_1.expect)(result).toContain("</body>");
+        // Should have bundle.js in the body
+        const dom = new jsdom_1.JSDOM(result);
+        const bundleScript = dom.window.document.querySelector('body script[src="bundle.js"]');
+        (0, vitest_1.expect)(bundleScript).not.toBeNull();
+    });
+    (0, vitest_1.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 = (0, getComputedIndexHtml_1.getComputedIndexHtml)(files);
+        // Should create proper HTML structure
+        (0, vitest_1.expect)(result).toContain("<html>");
+        (0, vitest_1.expect)(result).toContain("<head>");
+        (0, vitest_1.expect)(result).toContain("<body>");
+        // Should have d3 in head and bundle.js in body
+        const dom = new jsdom_1.JSDOM(result);
+        const document = dom.window.document;
+        const d3Script = document.querySelector('head script[src*="d3@6.7.0"]');
+        (0, vitest_1.expect)(d3Script).not.toBeNull();
+        const bundleScript = document.querySelector('body script[src="bundle.js"]');
+        (0, vitest_1.expect)(bundleScript).not.toBeNull();
+        // Original content should be preserved
+        (0, vitest_1.expect)(result).toContain("<div>Just a div</div>");
+    });
+    (0, vitest_1.it)("should handle empty index.html", async () => {
+        const files = {
+            "index.html": "",
+            "index.js": 'console.log("Hello")',
+        };
+        const result = (0, getComputedIndexHtml_1.getComputedIndexHtml)(files);
+        // Should create a minimal HTML structure with bundle.js
+        (0, vitest_1.expect)(result).toContain("<html>");
+        (0, vitest_1.expect)(result).toContain("<body>");
+        (0, vitest_1.expect)(result).toContain('script src="bundle.js"');
+    });
+    (0, vitest_1.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 = (0, getComputedIndexHtml_1.getComputedIndexHtml)(files);
+        // Create DOM to analyze the result
+        const dom = new jsdom_1.JSDOM(result);
+        const document = dom.window.document;
+        // Should keep existing scripts
+        (0, vitest_1.expect)(document.querySelectorAll('script[src="existing1.js"]').length).toBe(1);
+        (0, vitest_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"]');
+        (0, vitest_1.expect)(bundleScripts.length).toBe(1);
+        (0, vitest_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"]');
+        (0, vitest_1.expect)(d3Script).not.toBeNull();
+    });
+});

package/dist/cjs/v2/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.v2Build = void 0;
+var v2Build_1 = require("./v2Build");
+Object.defineProperty(exports, "v2Build", { enumerable: true, get: function () { return v2Build_1.v2Build; } });

package/dist/cjs/v2/v2Build.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.v2Build = void 0;
+const getComputedIndexHtml_1 = require("./getComputedIndexHtml");
+const computeBundleJSV2_1 = require("./computeBundleJSV2");
+const v2Build = async ({ files, rollup, enableSourcemap, }) => ({
+    ...files,
+    "bundle.js": await (0, computeBundleJSV2_1.computeBundleJSV2)({
+        files,
+        rollup,
+        enableSourcemap,
+    }),
+    "index.html": (0, getComputedIndexHtml_1.getComputedIndexHtml)(files),
+});
+exports.v2Build = v2Build;

package/dist/cjs/v3/cleanRollupErrorMessage.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanRollupErrorMessage = void 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>"
+const cleanRollupErrorMessage = ({ rawMessage, vizId, }) => {
+    const regex = new RegExp(vizId, "g");
+    return rawMessage?.replace(regex, ".");
+};
+exports.cleanRollupErrorMessage = cleanRollupErrorMessage;

package/dist/cjs/v3/computeBundleJSV3.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeBundleJSV3 = void 0;
+const sucrasePlugin_1 = require("../common/sucrasePlugin");
+const packageJson_1 = require("../common/packageJson");
+const transformDSV_1 = require("./transformDSV");
+const vizResolve_1 = require("./vizResolve");
+const vizLoad_1 = require("./vizLoad");
+const transformSvelte_1 = require("./transformSvelte");
+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: [
+            (0, vizResolve_1.vizResolve)({ vizId, slugCache }),
+            (0, transformDSV_1.transformDSV)(),
+            (0, sucrasePlugin_1.sucrasePlugin)(),
+            (0, transformSvelte_1.transformSvelte)({ getSvelteCompiler }),
+            (0, vizLoad_1.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 = (0, packageJson_1.packageJSON)(files);
+    const globals = (0, packageJson_1.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),
+    };
+};
+exports.computeBundleJSV3 = computeBundleJSV3;

package/dist/cjs/v3/createVizContent.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createVizContent = void 0;
+const uuid_1 = require("uuid");
+/**
+ * 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
+ */
+const createVizContent = (files, title = "Sample Content for Exporting") => {
+    const contentId = (0, uuid_1.v4)().replace(/-/g, "");
+    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,
+    };
+};
+exports.createVizContent = createVizContent;

package/dist/cjs/v3/extractVizImport.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractVizImport = void 0;
+const extractVizImport = (str) => {
+    // Updated regular expression pattern
+    // Username: Alphanumeric characters, including underscores and hyphens
+    // ID: Alphanumeric characters, including underscores, hyphens, and possibly other special characters
+    const pattern = /^@([a-zA-Z0-9_-]+)\/([a-zA-Z0-9_-]+)$/;
+    const match = str.match(pattern);
+    if (match) {
+        // Extract the username and id
+        return {
+            userName: match[1],
+            idOrSlug: match[2],
+        };
+    }
+    else {
+        // Return null if the string does not match
+        return null;
+    }
+};
+exports.extractVizImport = extractVizImport;
+// // Example usages
+// const result1 = extractDetails("@curran/21f72bf74ef04ea0b9c9b82aaaec859a");
+// console.log(result1); // { username: "curran", id: "21f72bf74ef04ea0b9c9b82aaaec859a" }
+// const result2 = extractDetails("@curran/scatter-plot");
+// console.log(result2); // { username: "curran", id: "scatter-plot" }

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const extractVizImport_1 = require("./extractVizImport");
+(0, vitest_1.describe)("v3 extractVizImport", () => {
+    (0, vitest_1.it)("should correctly extract username and viz id", () => {
+        const result = (0, extractVizImport_1.extractVizImport)("@curran/21f72bf74ef04ea0b9c9b82aaaec859a");
+        (0, vitest_1.expect)(result).toEqual({
+            userName: "curran",
+            idOrSlug: "21f72bf74ef04ea0b9c9b82aaaec859a",
+        });
+    });
+    (0, vitest_1.it)("should correctly extract username and alphanumeric id", () => {
+        const result = (0, extractVizImport_1.extractVizImport)("@curran/scatter-plot");
+        (0, vitest_1.expect)(result).toEqual({
+            userName: "curran",
+            idOrSlug: "scatter-plot",
+        });
+    });
+    (0, vitest_1.it)("should return null for non-matching strings", () => {
+        const result = (0, extractVizImport_1.extractVizImport)("not-a-matching-string");
+        (0, vitest_1.expect)(result).toBeNull();
+    });
+    (0, vitest_1.it)("should handle cases with invalid characters in username", () => {
+        const result = (0, extractVizImport_1.extractVizImport)("@c!urran/valid-id");
+        (0, vitest_1.expect)(result).toBeNull();
+    });
+    (0, vitest_1.it)("should handle cases with invalid characters in id", () => {
+        const result = (0, extractVizImport_1.extractVizImport)("@curran/invalid id");
+        (0, vitest_1.expect)(result).toBeNull();
+    });
+});