@vizhub/runtime 0.2.0 → 0.3.1

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

@@ -0,0 +1,24 @@
+export const reactDomImportPkg = {
+    "index.html": `
+    <script src='bundle.js'></script>
+  `,
+    "index.js": 'import ReactDOM from "react-dom"; console.log(typeof ReactDOM);',
+    "package.json": `{
+    "dependencies": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "vizhub": {
+      "libraries": {
+        "react": {
+          "global": "React",
+          "path": "/umd/react.production.min.js"
+        },
+        "react-dom": {
+          "global": "ReactDOM",
+          "path": "/umd/react-dom.production.min.js"
+        }
+      }
+    }
+  }`,
+};

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

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

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

@@ -0,0 +1,17 @@
+export const reactImportPkg = {
+    "index.html": `<script src='bundle.js'></script>`,
+    "index.js": 'import React from "react"; console.log(typeof React);',
+    "package.json": `{
+    "dependencies": {
+      "react": "18.2.0"
+    },
+    "vizhub": {
+      "libraries": {
+        "react": {
+          "global": "React",
+          "path": "/umd/react.production.min.js"
+        }
+      }
+    }
+  }`,
+};

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

@@ -0,0 +1,19 @@
+export const sourceMapErrorFixture = {
+    "index.html": "<script src='bundle.js'></script>",
+    "index.js": `
+import { generateError } from "./error.js";
+
+// Line numbers are important for this test
+// This will be line 6 in the original source
+generateError();
+
+// Add a console log to help debug
+console.log("If you see this, the error was caught by the window.onerror handler");
+`,
+    "error.js": `
+export function generateError() {
+  // This is line 3 in error.js
+  throw new Error("Test error for sourcemap validation");
+}
+`,
+};

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

@@ -0,0 +1,6 @@
+export const unicodeSupport = {
+    "index.html": `
+    <script src='bundle.js'></script>
+  `,
+    "index.js": 'console.log("Привет")',
+};

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

@@ -0,0 +1,7 @@
+export const basicIndexJS = {
+    "index.js": `
+    export const main = () => {
+      console.log("Hello main!");
+    }
+  `,
+};

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

@@ -0,0 +1,9 @@
+export const cssImport = {
+    "index.js": `
+    import './styles.css';
+    console.log(getComputedStyle(document.body).color);
+  `,
+    "styles.css": `
+    body { color: red; }
+  `,
+};

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

@@ -0,0 +1,11 @@
+export const csvImport = {
+    "index.js": `
+    import data from './data.csv';
+    console.log(data[0].variety);
+  `,
+    "data.csv": `"sepal.length","sepal.width","petal.length","petal.width","variety"
+5.1,3.5,1.4,.2,"Setosa"
+4.9,3,1.4,.2,"Setosa"
+4.7,3.2,1.3,.2,"Setosa"
+4.6,3.1,1.5,.2,"Setosa"`,
+};

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

@@ -0,0 +1,12 @@
+export const csvStrangeChars = {
+    "index.js": `
+    import data from './data.csv';
+    console.log(data[0].Country);
+  `,
+    "data.csv": `Country,Users,New users,Engaged sessions,Engagement rate,Engaged sessions per user,Average engagement time,Event count,Conversions,Total revenue
+Türkiye,180,177,133,0.5450819672131147,0.7388888888888889,86.22777777777777,1007,0,0
+(not set),28,27,2,0.06896551724137931,0.07142857142857142,7.178571428571429,101,0,0
+Myanmar (Burma),11,11,29,0.58,2.6363636363636362,141.0909090909091,209,0,0
+Côte d'Ivoire,10,10,8,0.6666666666666666,0.8,33.4,57,0,0
+Réunion,1,1,0,0,0,0,5,0,0`,
+};

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

@@ -0,0 +1,9 @@
+export { basicIndexJS } from "./basicIndexJS";
+export { sampleVizContent } from "./vizContent";
+export { jsExport } from "./jsExport";
+export { cssImport } from "./cssImport";
+export { csvImport } from "./csvImport";
+export { csvStrangeChars } from "./csvStrangeChars";
+export { sampleContent, sampleContentVizImport, sampleContentVizImportSlug, sampleContentWithCSS, sampleContentVizImportWithCSS, } from "./vizImport";
+export { svelte } from "./svelte";
+export { sourcemap } from "./sourcemap";

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

@@ -0,0 +1,10 @@
+export const jsExport = {
+    "index.js": `
+    import { innerMessage } from './message';
+    export const message = "Outer " + innerMessage;
+    console.log(message);
+  `,
+    "message.js": `
+    export const innerMessage = "Inner";
+  `,
+};

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

@@ -0,0 +1,10 @@
+export const sourcemap = {
+    "index.js": `
+    const x = 1;
+    const y = 2;
+    console.log(x + y);
+    
+    // The error should resolve to this line number, 6.
+    throw new Error("Hello main!");
+  `,
+};

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

@@ -0,0 +1,18 @@
+export const svelte = {
+    "App.svelte": `
+    <script>
+      const name = 'Svelte';
+      console.log(name);
+    </script>
+    <h1>Hello {name}!</h1>
+  `,
+    "index.js": `
+    import App from './App.svelte';
+
+    export const main = (container) => {
+      new App({
+        target: container,
+      });
+    };
+  `,
+};

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

@@ -0,0 +1,11 @@
+import { createVizContent } from "../../../v3/createVizContent";
+// Content for testing JS imports
+export const sampleVizContent = createVizContent({
+    "index.js": `
+    import { innerMessage } from './message';
+    export const message = "Outer " + innerMessage;
+  `,
+    "message.js": `
+    export const innerMessage = "Inner";
+  `,
+});

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

@@ -0,0 +1,85 @@
+// Sample content for testing JS imports
+export const sampleContent = {
+    id: "84bddfb1cc0545f299e5083c3e71e0bb",
+    files: {
+        "7548392": {
+            name: "index.js",
+            text: `
+        import { innerMessage } from './message';
+        export const message = "Outer " + innerMessage;
+      `,
+        },
+        "6714854": {
+            name: "message.js",
+            text: `
+        export const innerMessage = "Inner";
+      `,
+        },
+    },
+    title: "Sample Content for Exporting",
+};
+// Sample content for testing JS imports
+// across vizzes by id
+export const sampleContentVizImport = {
+    id: "a6014044e0c6425f911a7e128e1928a6",
+    files: {
+        "7548392": {
+            name: "index.js",
+            text: `
+        import { message } from '@joe/${sampleContent.id}';
+        console.log("Imported from viz: " + message);
+      `,
+        },
+    },
+    title: "Sample Content for Viz Importing",
+};
+// Sample content for testing JS imports
+// across vizzes by slug
+export const sampleContentVizImportSlug = {
+    id: "6f8aec8c3cd348d7a7d4661cc8d75c9a",
+    files: {
+        "7548392": {
+            name: "index.js",
+            text: `
+        import { message } from '@joe/sample-content-slug';
+        console.log("Imported from viz with slug: " + message);
+      `,
+        },
+    },
+    title: "Sample Content for Viz Importing",
+};
+// Sample content for testing CSS imports
+export const sampleContentWithCSS = {
+    id: "cd52ba7f80834807b72e66ce4abac185",
+    files: {
+        "5473849": {
+            name: "index.js",
+            text: `
+        import './styles.css';
+      `,
+        },
+        "0175432": {
+            name: "styles.css",
+            text: `
+        body { color: red; }
+      `,
+        },
+    },
+    title: "Sample Content for CSS Importing",
+};
+// Sample content for testing CSS imports
+// across vizzes
+export const sampleContentVizImportWithCSS = {
+    id: "816040d214484b41b653bd6916a11fd9",
+    files: {
+        "7548392": {
+            name: "index.js",
+            text: `
+        // Import for the CSS side effect
+        import '@joe/${sampleContentWithCSS.id}';
+        console.log(getComputedStyle(document.body).color);
+      `,
+        },
+    },
+    title: "Sample Content for Viz Importing with CSS",
+};

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

@@ -0,0 +1,31 @@
+export const d3Usage = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <title>D3 Test</title>
+    </head>
+    <body>
+      <div id="chart"></div>
+      <script type="module" src="index.js"></script>
+    </body>
+  </html>`,
+    "index.js": `import * as d3 from 'd3';
+
+const svg = d3.select('#chart')
+  .append('svg')
+  .attr('width', 100)
+  .attr('height', 100);
+
+svg.append('circle')
+  .attr('cx', 50)
+  .attr('cy', 50)
+  .attr('r', 40)
+  .style('fill', 'blue');
+
+console.log('D3 chart rendered successfully');`,
+    "package.json": `{
+  "dependencies": {
+    "d3": "^7.8.5"
+  }
+}`,
+};

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

@@ -0,0 +1,18 @@
+export const esmBuild = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <title>ESM Build Test</title>
+    </head>
+    <body>
+      <script type="module" src="index.js"></script>
+    </body>
+  </html>`,
+    "index.js": `import { format } from 'date-fns';
+console.log(format(new Date(), 'yyyy-MM-dd'));`,
+    "package.json": `{
+    "dependencies": {
+      "date-fns": "2.30.0"
+    }
+  }`,
+};

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

@@ -0,0 +1,18 @@
+export const fetchInterception = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <title>Fetch Interception Test</title>
+    </head>
+    <body>
+      <script type="module" src="index.js"></script>
+    </body>
+  </html>`,
+    "index.js": `
+    fetch("data.json")
+      .then(response => response.json())
+      .then(data => console.log(data.message));`,
+    "data.json": `{
+    "message": "Fetch intercepted successfully"
+ }`,
+};

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

@@ -0,0 +1,9 @@
+export { jsScriptTagTypeModule } from "./jsScriptTagTypeModule";
+export { jsScriptTagTypeModules } from "./jsScriptTagTypeModules";
+export { fetchInterception } from "./fetchInterception";
+export { esmBuild } from "./esmBuild";
+export { reactJsx } from "./reactJsx";
+export { d3Usage } from "./d3Usage";
+export { threeJsUsage } from "./threeJsUsage";
+export { reactHooks } from "./reactHooks";
+export { typeScriptSupport } from "./typeScriptSupport";

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

@@ -0,0 +1,18 @@
+export const jsScriptTagTypeModule = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <script type="importmap">
+      {
+        "imports": {
+          "greeter": "data:text/javascript;charset=utf-8,export const greeting = \\"Hello, ES Module!\\";"
+        }
+      }
+      </script>
+    </head>
+    <body>
+      <script type="module" src="index.js"></script>
+    </body>
+  </html>`,
+    "index.js": `import { greeting } from 'greeter';\nconsole.log(greeting);`,
+};

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

@@ -0,0 +1,12 @@
+export const jsScriptTagTypeModules = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+    </head>
+    <body>
+      <script type="module" src="index.js"></script>
+    </body>
+  </html>`,
+    "index.js": `import { greeting } from './greeter.js';\nconsole.log(greeting);`,
+    "greeter.js": `export const greeting = "Hello, ES Module File!";`,
+};

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

@@ -0,0 +1,47 @@
+export const reactHooks = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <title>React Hooks Test</title>
+    </head>
+    <body>
+      <div id="root"></div>
+      <script type="module" src="index.jsx"></script>
+    </body>
+  </html>`,
+    "index.jsx": `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Counter from './Counter.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <Counter />
+  </React.StrictMode>
+);`,
+    "Counter.jsx": `import React, { useState, useEffect } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  
+  useEffect(() => {
+    console.log('React Hooks working: count is ' + count);
+  }, [count]);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+
+export default Counter;`,
+    "package.json": `{
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}`,
+};

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

@@ -0,0 +1,34 @@
+export const reactJsx = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <title>React JSX Test</title>
+    </head>
+    <body>
+      <div id="root"></div>
+      <script type="module" src="index.jsx"></script>
+    </body>
+  </html>`,
+    "index.jsx": `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);`,
+    "App.jsx": `import React from 'react';
+
+function App() {
+  return <div>Hello React JSX!</div>;
+}
+
+export default App;`,
+    "package.json": `{
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}`,
+};

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

@@ -0,0 +1,24 @@
+export const threeJsUsage = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <title>Three.js Test</title>
+      <script type="importmap">
+        {
+          "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.175.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.175.0/examples/jsm/"
+          }
+        }
+      </script>
+    </head>
+    <body>
+      <script type="module" src="index.js"></script>
+    </body>
+  </html>`,
+    "index.js": `
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    console.log('Three.js imports:', typeof THREE, typeof OrbitControls);
+  `,
+};

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

@@ -0,0 +1,29 @@
+export const typeScriptSupport = {
+    "index.html": `<!DOCTYPE html>
+  <html>
+    <head>
+      <title>TypeScript Test</title>
+    </head>
+    <body>
+      <div id="app"></div>
+      <script type="module" src="index.ts"></script>
+    </body>
+  </html>`,
+    "index.ts": `import { Person } from './person';
+
+const person: Person = {
+  name: 'John Doe',
+  age: 30
+};
+
+document.getElementById('app')!.innerHTML = \`
+  <h1>Hello, \${person.name}!</h1>
+  <p>You are \${person.age} years old.</p>
+\`;
+
+console.log('TypeScript is working');`,
+    "person.ts": `export interface Person {
+  name: string;
+  age: number;
+}`,
+};

package/dist/esm/test/testInBrowser.js

@@ -0,0 +1,47 @@
+import { rollup } from "rollup";
+import { expect } from "vitest";
+import { buildHTML } from "../index";
+const DEBUG = false;
+export async function testInBrowser({ browser, files, vizCache, slugCache, vizId, expectedLog, evaluateInBrowser, getSvelteCompiler, }) {
+    const page = await browser.newPage();
+    try {
+        // Capture console.log output
+        const logs = [];
+        page.on("console", (message) => logs.push(message.text()));
+        // Capture page errors
+        page.on("pageerror", (error) => {
+            console.error("[testInBrowser] pageerror:", error);
+        });
+        // Load the HTML
+        const html = await buildHTML({
+            files,
+            vizCache,
+            slugCache,
+            vizId,
+            rollup,
+            getSvelteCompiler,
+        });
+        await page.setContent(html);
+        // Wait a bit for scripts to execute
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        DEBUG && console.log("[testInBrowser] html:", html);
+        DEBUG && console.log("[testInBrowser] logs:", logs);
+        // Check console output
+        if (typeof expectedLog === "string") {
+            expect(logs).toContain(expectedLog);
+        }
+        else {
+            // If it's a RegExp, find a log that matches
+            const matchingLog = logs.find((log) => expectedLog.test(log));
+            expect(matchingLog).toBeDefined();
+        }
+        // If evaluateInBrowser is provided, run it and expect the result to be truthy
+        if (evaluateInBrowser) {
+            const result = await evaluateInBrowser(page);
+            expect(result).toBeTruthy();
+        }
+    }
+    finally {
+        await page.close();
+    }
+}

package/dist/esm/test/testStackTrace.js

@@ -0,0 +1,55 @@
+import { rollup } from "rollup";
+import { expect } from "vitest";
+import { buildHTML } from "../index";
+const DEBUG = false;
+// Invokes Puppeteer to test the HTML in a browser,
+// and isolates the console.log output to check against expectedLog.
+// Captures stack trace from an error in the page and validates that sourcemaps are working
+export async function testStackTrace({ browser, files, expectedLineNumber, }) {
+    const page = await browser.newPage();
+    let errorCaptured = false;
+    try {
+        // Enable sourcemaps for proper stack traces
+        const html = await buildHTML({
+            files,
+            rollup,
+            enableSourcemap: true,
+        });
+        // Capture page errors with their stack traces
+        page.on("pageerror", (error) => {
+            errorCaptured = true;
+            const stack = error.stack || "";
+            DEBUG &&
+                console.log("[testStackTrace] Error stack:", stack);
+            // Verify the error message contains the expected text
+            expect(error.message).toContain("Hello main!");
+            // Find any stack frame with a line number close to what we expect
+            // Different browsers format stack traces differently
+            const stackLines = stack.split("\n");
+            let foundExpectedLineNumber = false;
+            for (const line of stackLines) {
+                // Look for patterns like: at generateError (error.js:3:3) or at file:///path/bundle.js:20:3
+                const lineMatches = line.match(/:(\d+):/);
+                if (lineMatches && lineMatches[1]) {
+                    const lineNumber = parseInt(lineMatches[1], 10);
+                    DEBUG &&
+                        console.log(`[testStackTrace] Found line number in stack: ${lineNumber}`);
+                    // Check if this line number matches any of our expected line numbers
+                    if (expectedLineNumber === lineNumber) {
+                        foundExpectedLineNumber = true;
+                        break;
+                    }
+                }
+            }
+            expect(foundExpectedLineNumber, `Stack trace should contain expected line number(s): ${expectedLineNumber}`).toBe(true);
+        });
+        await page.setContent(html);
+        // Wait a bit for scripts to execute and error to be thrown
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        // Verify that we actually captured an error
+        expect(errorCaptured, "An error should have been thrown").toBe(true);
+    }
+    finally {
+        await page.close();
+    }
+}