@vizhub/runtime 0.3.8 → 0.5.0

package/dist/magicSandbox/generateInterceptorScript.d.ts

@@ -1,4 +0,0 @@
-/**
- * Generates the script that intercepts XMLHttpRequest and fetch calls
- */
-export declare function generateInterceptorScript(fileNames: string[], filesString: string): string;

package/dist/magicSandbox/generateInterceptorScript.js

@@ -1,178 +0,0 @@
-/**
- * Generates the script that intercepts XMLHttpRequest and fetch calls
- */
-export function generateInterceptorScript(fileNames, filesString) {
-    return `<script>
-  (function() {
-    // Store file data for interception
-    const __filesURI = "${filesString}";
-    const __files = JSON.parse(decodeURIComponent(__filesURI));
-    const __fileNames = ${JSON.stringify(fileNames)};
-  
-    // Override XMLHttpRequest
-    const OriginalXHR = window.XMLHttpRequest;
-    window.XMLHttpRequest = function() {
-      this.xhr = new OriginalXHR();
-      return this;
-    };
-  
-    // Override open method to intercept file requests
-    window.XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
-      if (__fileNames.includes(url)) {
-        this.file = url;
-        this.responseText = __files[url];
-        
-        // Handle XML files
-        if (url.endsWith(".xml")) {
-          try {
-            const parser = new DOMParser();
-            this.responseXML = parser.parseFromString(this.responseText, "text/xml");
-          } catch (e) {}
-        }
-        
-        // Mark as completed
-        this.readyState = 4;
-        this.status = 200;
-      } else {
-        // Pass through to real XHR
-        this.xhr.open(method, url, async, user, password);
-      }
-    };
-  
-    // Implement other XHR methods
-    window.XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
-      if (this.file) return;
-      return this.xhr.setRequestHeader(header, value);
-    };
-    
-    window.XMLHttpRequest.prototype.abort = function() {
-      return this.xhr.abort();
-    };
-    
-    window.XMLHttpRequest.prototype.getAllResponseHeaders = function() {
-      return this.xhr.getAllResponseHeaders();
-    };
-    
-    window.XMLHttpRequest.prototype.getResponseHeader = function(header) {
-      return this.xhr.getResponseHeader(header);
-    };
-    
-    window.XMLHttpRequest.prototype.overrideMimeType = function(mime) {
-      return this.xhr.overrideMimeType(mime);
-    };
-    
-    window.XMLHttpRequest.prototype.send = function(data) {
-      const that = this;
-      
-      // Process in next tick to support libraries that attach handlers after send
-      setTimeout(() => {
-        // Wire up event handlers
-        that.xhr.onerror = that.onerror;
-        that.xhr.onprogress = that.onprogress;
-        
-        if (that.responseType || that.responseType === '') {
-          that.xhr.responseType = that.responseType;
-        }
-        
-        // Handle onload
-        if (that.onload) {
-          const onload = that.onload;
-          that.xhr.onload = that.onload = function() {
-            try {
-              that.response = this.response;
-              that.readyState = this.readyState;
-              that.status = this.status;
-              that.statusText = this.statusText;
-            } catch (e) {}
-            
-            try {
-              if (that.responseType === '') {
-                that.responseXML = this.responseXML;
-                that.responseText = this.responseText;
-              }
-              if (that.responseType === 'text') {
-                that.responseText = this.responseText;
-              }
-            } catch (e) {}
-            
-            onload();
-          };
-        }
-        
-        // Handle onreadystatechange
-        if (that.onreadystatechange) {
-          const ready = that.onreadystatechange;
-          that.xhr.onreadystatechange = function() {
-            try {
-              that.readyState = this.readyState;
-              that.responseText = this.responseText;
-              that.responseXML = this.responseXML;
-              that.responseType = this.responseType;
-              that.status = this.status;
-              that.statusText = this.statusText;
-            } catch (e) {}
-            
-            ready();
-          };
-        }
-        
-        // For local files, trigger callbacks directly
-        if (that.file) {
-          if (that.onreadystatechange) {
-            return that.onreadystatechange();
-          }
-          if (that.onload) {
-            return that.onload();
-          }
-        }
-        
-        // For real requests, pass through
-        that.xhr.send(data);
-      }, 0);
-    };
-  
-    // Override fetch API
-    const originalFetch = window.fetch;
-    window.fetch = function(input, init) {
-      let url = input;
-      
-      if (input instanceof Request) {
-        url = input.url;
-      }
-      
-      // Fix blob:// protocol issues
-      if (typeof url === 'string') {
-        url = url.replace('blob://', 'http://');
-      }
-      
-      // Intercept requests for local files
-      if (__fileNames.includes(url)) {
-        const responseText = __files[url];
-        
-        return Promise.resolve({
-          ok: true,
-          status: 200,
-          statusText: 'ok',
-          url: url,
-          text: () => Promise.resolve(responseText),
-          json: () => Promise.resolve(JSON.parse(responseText)),
-          blob: () => Promise.resolve(new Blob([responseText])),
-          arrayBuffer: () => {
-            const buffer = new ArrayBuffer(responseText.length * 2);
-            const bufferView = new Uint16Array(buffer);
-            
-            for (let i = 0; i < responseText.length; i++) {
-              bufferView[i] = responseText.charCodeAt(i);
-            }
-            
-            return Promise.resolve(buffer);
-          }
-        });
-      }
-      
-      // Pass through to original fetch
-      return originalFetch(input, init);
-    };
-  })();
-  </script>`;
-}

package/dist/magicSandbox/index.d.ts

@@ -1,19 +0,0 @@
-/**
- * Magic Sandbox
- *
- * Originally created for Blockbuilder by Ian Johnson (@enjalot)
- * Contributors: Geoffery Miller (@georules), Paweł Kowalski (@pavelloz),
- * Erik Hazzard (@erikhazzard), Curran Kelleher (@curran), Micah Stubbs (@micahstubbs)
- *
- * This utility transforms HTML templates and handles file references to create
- * a sandboxed environment that intercepts file requests.
- */
-type FileContent = {
-    content: string;
-};
-type FileCollection = Record<string, FileContent>;
-/**
- * Transforms HTML and files to create a sandboxed environment
- */
-export default function magicSandbox(template: string, files: FileCollection): string;
-export {};

package/dist/magicSandbox/index.js

@@ -1,48 +0,0 @@
-import { fixProtocollessUrls } from './fixProtocollessUrls';
-import { generateInterceptorScript } from './generateInterceptorScript';
-/**
- * Escapes special characters in a string for use in regular expressions
- */
-function escapeRegExp(str) {
-    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-/**
- * Transforms HTML and files to create a sandboxed environment
- */
-export default function magicSandbox(template, files) {
-    // Fix protocol-less URLs (//example.com) to use HTTPS
-    template = fixProtocollessUrls(template);
-    // Process files and track which ones need to be handled by XHR/fetch
-    const referencedFiles = {};
-    for (const [filename, file] of Object.entries(files)) {
-        if (!file.content)
-            continue;
-        if (filename === "index.html" || filename === "thumbnail.png")
-            continue;
-        // Replace <script src="file.js"> with inline <script>content</script>
-        if (filename.endsWith(".js")) {
-            const scriptPattern = new RegExp(`<script.*?src=["']${escapeRegExp(filename)}["'].*?>`, "g");
-            if (template.match(scriptPattern)) {
-                template = template.replace(scriptPattern, `<script>${file.content}`);
-                continue;
-            }
-        }
-        // Replace <link href="file.css"> with inline <style>content</style>
-        if (filename.endsWith(".css")) {
-            const linkPattern = new RegExp(`<link.*?href=["']${escapeRegExp(filename)}["'].*?>`, "g");
-            if (template.match(linkPattern)) {
-                template = template.replace(linkPattern, `<style>${file.content}</style>`);
-                continue;
-            }
-        }
-        // Skip HTML files for XHR/fetch interception
-        if (!filename.endsWith(".html")) {
-            referencedFiles[filename] = file.content;
-        }
-    }
-    // Encode file references for use in the sandboxed environment
-    const fileNames = Object.keys(referencedFiles);
-    const filesString = encodeURIComponent(JSON.stringify(referencedFiles));
-    // Assemble the final HTML with meta tag and override scripts
-    return `<meta charset="utf-8">${generateInterceptorScript(fileNames, filesString)}${template}`;
-}

package/dist/test/fixtures/basicHTML.d.ts

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

package/dist/test/fixtures/basicHTML.js

@@ -1,19 +0,0 @@
-import { generateVizFileId } from "@vizhub/viz-types";
-export const basicHTML = {
-    [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/test/fixtures/fetchProxy.d.ts

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

package/dist/test/fixtures/fetchProxy.js

@@ -1,22 +0,0 @@
-import { generateVizFileId } from "@vizhub/viz-types";
-export const fetchProxy = {
-    [generateVizFileId()]: {
-        name: "index.html",
-        text: `<!DOCTYPE html>
-<html>
-  <body>
-    <script src="index.js"></script>
-  </body>
-</html>`,
-    },
-    [generateVizFileId()]: {
-        name: "index.js",
-        text: `fetch("data.csv")
-        .then((response) => response.text())
-        .then(console.log);`,
-    },
-    [generateVizFileId()]: {
-        name: "data.csv",
-        text: `Hello, Fetch!`,
-    },
-};

package/dist/test/fixtures/index.d.ts

@@ -1,6 +0,0 @@
-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/test/fixtures/index.js

@@ -1,6 +0,0 @@
-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/test/fixtures/jsScriptTag.d.ts

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

package/dist/test/fixtures/jsScriptTag.js

@@ -1,16 +0,0 @@
-import { generateVizFileId } from "@vizhub/viz-types";
-export const jsScriptTag = {
-    [generateVizFileId()]: {
-        name: "index.html",
-        text: `<!DOCTYPE html>
-<html>
-  <body>
-    <script src="index.js"></script>
-  </body>
-</html>`,
-    },
-    [generateVizFileId()]: {
-        name: "index.js",
-        text: `console.log('Hello, JS!');`,
-    },
-};

package/dist/test/fixtures/magicSandbox/basicHTML.d.ts

@@ -1,5 +0,0 @@
-export declare const basicHTML: {
-    "index.html": {
-        content: string;
-    };
-};

package/dist/test/fixtures/magicSandbox/basicHTML.js

@@ -1,17 +0,0 @@
-export const basicHTML = {
-    "index.html": {
-        content: `<!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/test/fixtures/magicSandbox/fetchProxy.d.ts

@@ -1,11 +0,0 @@
-export declare const fetchProxy: {
-    "index.html": {
-        content: string;
-    };
-    "index.js": {
-        content: string;
-    };
-    "data.csv": {
-        content: string;
-    };
-};

package/dist/test/fixtures/magicSandbox/fetchProxy.js

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

package/dist/test/fixtures/magicSandbox/index.d.ts

@@ -1,6 +0,0 @@
-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/test/fixtures/magicSandbox/index.js

@@ -1,6 +0,0 @@
-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/test/fixtures/magicSandbox/jsScriptTag.d.ts

@@ -1,8 +0,0 @@
-export declare const jsScriptTag: {
-    "index.html": {
-        content: string;
-    };
-    "index.js": {
-        content: string;
-    };
-};

package/dist/test/fixtures/magicSandbox/jsScriptTag.js

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

package/dist/test/fixtures/magicSandbox/protocolTest.d.ts

@@ -1,5 +0,0 @@
-export declare const protocolTest: {
-    "index.html": {
-        content: string;
-    };
-};

package/dist/test/fixtures/magicSandbox/protocolTest.js

@@ -1,17 +0,0 @@
-export const protocolTest = {
-    "index.html": {
-        content: `<!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/test/fixtures/magicSandbox/styleTest.d.ts

@@ -1,8 +0,0 @@
-export declare const styleTest: {
-    "index.html": {
-        content: string;
-    };
-    "styles.css": {
-        content: string;
-    };
-};

package/dist/test/fixtures/magicSandbox/styleTest.js

@@ -1,19 +0,0 @@
-export const styleTest = {
-    "index.html": {
-        content: `<!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": {
-        content: `#test { color: rgb(255, 0, 0); }`
-    }
-};

package/dist/test/fixtures/magicSandbox/xmlTest.d.ts

@@ -1,8 +0,0 @@
-export declare const xmlTest: {
-    "index.html": {
-        content: string;
-    };
-    "data.xml": {
-        content: string;
-    };
-};

package/dist/test/fixtures/magicSandbox/xmlTest.js

@@ -1,23 +0,0 @@
-export const xmlTest = {
-    "index.html": {
-        content: `<!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": {
-        content: `<?xml version="1.0" encoding="UTF-8"?>
-<root>
-  <item>Test</item>
-</root>`
-    }
-};

package/dist/test/fixtures/protocolTest.d.ts

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

package/dist/test/fixtures/protocolTest.js

@@ -1,19 +0,0 @@
-import { generateVizFileId } from "@vizhub/viz-types";
-export const protocolTest = {
-    [generateVizFileId()]: {
-        name: "index.html",
-        text: `<!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/test/fixtures/styleTest.d.ts

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

package/dist/test/fixtures/styleTest.js

@@ -1,22 +0,0 @@
-import { generateVizFileId } from "@vizhub/viz-types";
-export const styleTest = {
-    [generateVizFileId()]: {
-        name: "index.html",
-        text: `<!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>`,
-    },
-    [generateVizFileId()]: {
-        name: "styles.css",
-        text: `#test { color: rgb(255, 0, 0); }`,
-    },
-};

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

@@ -1,15 +0,0 @@
-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/test/fixtures/v1/fetchProxy.js

@@ -1,12 +0,0 @@
-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/test/fixtures/v1/index.js

@@ -1,6 +0,0 @@
-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/test/fixtures/v1/jsScriptTag.js

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

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

@@ -1,15 +0,0 @@
-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/test/fixtures/v1/styleTest.js

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