@vizhub/runtime 0.3.8 → 0.5.0

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

@@ -1,24 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,85 +0,0 @@
-// 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

@@ -1,31 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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();
-    }
-}