@vizhub/runtime 0.0.1

package/src/v2Runtime/bundle.test.js

@@ -0,0 +1,151 @@
+import { describe, it, expect } from 'vitest';
+import { bundle } from './bundle';
+
+// From https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/presenters/test/test.js
+
+// Convenience for testing.
+const removeSourceMap = (files) => {
+  files[0].text = files[0].text.split(
+    '\n//# sourceMappingURL',
+  )[0];
+  return files;
+};
+
+describe('v2 bundle', () => {
+  it('should bundle files using Rollup', async () => {
+    const files = [
+      {
+        name: 'index.js',
+        text: 'import { foo } from "./foo.js"; console.log(foo);',
+      },
+      { name: 'foo.js', text: 'export const foo = "bar";' },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: '(function () {\n\t\'use strict\';\n\n\tconst foo = "bar";\n\n\tconsole.log(foo);\n\n}());\n',
+      },
+    ]);
+  });
+
+  it('should refer to global d3 in bundle for d3 package', async () => {
+    const files = [
+      {
+        name: 'index.js',
+        text: 'import { select } from "d3"; console.log(select);',
+      },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: "(function (d3) {\n\t'use strict';\n\n\tconsole.log(d3.select);\n\n}(d3));\n",
+      },
+    ]);
+  });
+
+  it('should refer to global React in bundle for React package', async () => {
+    const files = [
+      {
+        name: 'index.js',
+        text: 'import React from "react"; console.log(React);',
+      },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: "(function (React) {\n\t'use strict';\n\n\tReact = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;\n\n\tconsole.log(React);\n\n}(React));\n",
+      },
+    ]);
+  });
+
+  it('should refer to global ReactDOM in bundle for ReactDOM package', async () => {
+    const files = [
+      {
+        name: 'index.js',
+        text: 'import ReactDOM from "react-dom"; console.log(ReactDOM);',
+      },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: "(function (ReactDOM) {\n\t'use strict';\n\n\tReactDOM = ReactDOM && Object.prototype.hasOwnProperty.call(ReactDOM, 'default') ? ReactDOM['default'] : ReactDOM;\n\n\tconsole.log(ReactDOM);\n\n}(ReactDOM));\n",
+      },
+    ]);
+  });
+
+  it('should transpile JSX', async () => {
+    const files = [
+      { name: 'index.js', text: '<div>Hello JSX!</div>' },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: "(function () {\n\t'use strict';\n\n\tReact.createElement( 'div', null, \"Hello JSX!\" );\n\n}());\n",
+      },
+    ]);
+  });
+
+  it('should not transpile ES6', async () => {
+    const files = [
+      {
+        name: 'index.js',
+        text: 'const fn = a => a * a; console.log(fn(4));',
+      },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: "(function () {\n\t'use strict';\n\n\tconst fn = a => a * a; console.log(fn(4));\n\n}());\n",
+      },
+    ]);
+  });
+
+  it('should allow generators', async () => {
+    const files = [
+      {
+        name: 'index.js',
+        text: 'console.log(function* () { yield 5; }().next().value)',
+      },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: "(function () {\n\t'use strict';\n\n\tconsole.log(function* () { yield 5; }().next().value);\n\n}());\n",
+      },
+    ]);
+  });
+
+  it('should allow characters outside of the Latin1 range', async () => {
+    const files = [
+      { name: 'index.js', text: 'console.log("Привет")' },
+    ];
+    expect(removeSourceMap(await bundle(files))).toEqual([
+      {
+        name: 'bundle.js',
+        text: '(function () {\n\t\'use strict\';\n\n\tconsole.log("Привет");\n\n}());\n',
+      },
+    ]);
+  });
+});
+//   TODO Svelt Support
+//   See https://github.com/vizhub-core/vizhub3/issues/185
+//   //describe('Svelte', () => {
+//   //  it('should bundle files using Rollup', async () => {
+//   //    const files = [
+//   //      {
+//   //        name: 'index.js',
+//   //        text:
+//   //          "import App from './App.svelte'; const app = new App({ target: document.body, }); export default app;",
+//   //      },
+//   //      { name: 'App.svelte', text: '<script>console.log(foo);</script>' },
+//   //    ];
+//   //    assert.deepEqual(removeSourceMap(await bundle(files)), [
+//   //      {
+//   //        name: 'bundle.js',
+//   //        text:
+//   //          'var bundle = (function () {\n\t\'use strict\';\n\n\tconst globals={};const noop={};const dispatch_dev={};const validate_slots={};const SvelteComponentDev={};const init={};const safe_not_equal={};\n\n\t/* code.svelte generated by Svelte v3.31.0 */\n\n\tconst { console: console_1 } = globals;\n\n\tfunction create_fragment(ctx) {\n\t\tconst block = {\n\t\t\tc: noop,\n\t\t\tl: function claim(nodes) {\n\t\t\t\tthrow new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");\n\t\t\t},\n\t\t\tm: noop,\n\t\t\tp: noop,\n\t\t\ti: noop,\n\t\t\to: noop,\n\t\t\td: noop\n\t\t};\n\n\t\tdispatch_dev("SvelteRegisterBlock", {\n\t\t\tblock,\n\t\t\tid: create_fragment.name,\n\t\t\ttype: "component",\n\t\t\tsource: "",\n\t\t\tctx\n\t\t});\n\n\t\treturn block;\n\t}\n\n\tfunction instance($$self, $$props) {\n\t\tlet { $$slots: slots = {}, $$scope } = $$props;\n\t\tvalidate_slots("Code", slots, []);\n\t\tconsole.log(foo);\n\t\tconst writable_props = [];\n\n\t\tObject.keys($$props).forEach(key => {\n\t\t\tif (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(`<Code> was created with unknown prop \'${key}\'`);\n\t\t});\n\n\t\treturn [];\n\t}\n\n\tclass Code extends SvelteComponentDev {\n\t\tconstructor(options) {\n\t\t\tsuper(options);\n\t\t\tinit(this, options, instance, create_fragment, safe_not_equal, {});\n\n\t\t\tdispatch_dev("SvelteRegisterComponent", {\n\t\t\t\tcomponent: this,\n\t\t\t\ttagName: "Code",\n\t\t\t\toptions,\n\t\t\t\tid: create_fragment.name\n\t\t\t});\n\t\t}\n\t}\n\n\tconst app = new Code({ target: document.body, });\n\n\treturn app;\n\n}());\n',
+//   //      },
+//   //    ]);
+//   //  });
+//   //});
+// });

package/src/v2Runtime/computeSrcDocV2.test.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect } from 'vitest';
+import { primordialViz } from 'entities/test/fixtures';
+import { computeSrcDocV2 } from './computeSrcDocV2';
+import { setJSDOM } from './getComputedIndexHtml';
+import { JSDOM } from 'jsdom';
+
+setJSDOM(JSDOM);
+
+describe('v2 computeSrcDocV2', () => {
+  it('TODO should compute correct srcdoc', async () => {
+    expect(true).toEqual(true);
+    // console.log('`' + computeSrcDocV2(primordialViz.content) + '`');
+    expect(await computeSrcDocV2(primordialViz.content))
+      .toEqual(`<script>(function() {
+      var XHR = window.XMLHttpRequest;
+      window.XMLHttpRequest = function() {
+        this.xhr = new XHR();
+        return this;
+      }
+      window.XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
+        if(__fileNames.indexOf(url) >= 0) {
+          this.file = url;
+          this.responseText = __files[url];
+          if(url.indexOf(".xml") === url.length - 4) {
+            try {
+              var oParser = new DOMParser();
+              var oDOM = oParser.parseFromString(this.responseText, "text/xml");
+              this.responseXML = oDOM;
+            } catch(e) {}
+          }
+          // we indicate that the request is done
+          this.readyState = 4;
+          this.status = 200;
+        } else {
+          // pass thru to the normal xhr
+          this.xhr.open(method, url, async, user, password);
+        }
+      };
+      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) {
+        //we need to remap the fake XHR to the real one inside the onload/onreadystatechange functions
+        var that = this;
+        // unfortunately we need to do our copying of handlers in the next tick as
+        // it seems with normal XHR you can add them after firing off send... which seems
+        // unwise to do in the first place, but this is needed to support jQuery...
+        setTimeout(function() {
+          // we wire up all the listeners to the real XHR
+          that.xhr.onerror = this.onerror;
+          that.xhr.onprogress = this.onprogress;
+          if(that.responseType || that.responseType === '')
+              that.xhr.responseType = that.responseType
+          // if the onload callback is used we need to copy over
+          // the real response data to the fake object
+          if(that.onload) {
+            var 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) { console.log("onload", e) }
+              try {
+                if(that.responseType == '') {
+                    that.responseXML = this.responseXML;
+                    that.responseText = this.responseText;
+                }
+                if(that.responseType == 'text') {
+                    that.responseText = this.responseText;
+                }
+              } catch(e) { console.log("onload responseText/XML", e) }
+              onload();
+            }
+          }
+          // if the readystate change callback is used we need
+          // to copy over the real response data to our fake xhr instance
+          if(that.onreadystatechange) {
+            var 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){
+                 console.log("e", e)
+              }
+              ready();
+            }
+          }
+          // if this request is for a local file, we short-circuit and just
+          // end the request, since all the data should be on our fake request object
+          if(that.file) {
+            if(that.onreadystatechange)
+              return that.onreadystatechange();
+            if(that.onload)
+              return that.onload(); //untested
+          }
+          // if this is a real request, we pass through the send call
+          that.xhr.send(data)
+        }, 0)
+      }
+  
+      var originalFetch = window.fetch;
+      window.fetch = function(input, init) {
+      
+        var url = input;
+        if (input instanceof Request) {
+          url = input.url
+        }
+      
+        // This is a hack that seems to fix a problem with the way Mapbox is requesting its TileJSON
+        // Not sure what blob:// protocol is anyway...
+        url = url.replace('blob://', 'http://')
+          
+        if(__fileNames.indexOf(url) >= 0) {
+      
+          var responseText = __files[url];
+          return Promise.resolve({
+            ok: true,
+            status: 200,
+            statusText: 'ok',
+            url: url,
+            text: function(){ return Promise.resolve(responseText) },
+            json: function(){ return Promise.resolve(responseText).then(JSON.parse) },
+            blob: function(){ return Promise.resolve(new Blob([responseText])) },
+            // Inspired by https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
+            arrayBuffer: function() {
+              var buffer = new ArrayBuffer(responseText.length * 2);
+              var bufferView = new Uint16Array(buffer);
+              for (var i = 0, length = responseText.length; i < length; i++) {
+                bufferView[i] = responseText.charCodeAt(i);
+              }
+              return Promise.resolve(buffer);
+            }
+          })
+        }
+      
+        return originalFetch(input, init)
+      }
+      
+    })()</script><meta charset="utf-8"><script>var __filesURI = "%7B%22README.md%22%3A%22Test%20%5BMarkdown%5D(https%3A%2F%2Fwww.markdownguide.org%2F).%5Cn%23%20Introduction%5Cn%5CnThis%20is%20a%20test.%22%7D";
+var __files = JSON.parse(decodeURIComponent(__filesURI));
+var __fileNames = ["README.md"];</script><body style="font-size:26em">Hello</body>`);
+  });
+});

package/src/v2Runtime/computeSrcDocV2.ts

@@ -0,0 +1,34 @@
+import { Content, FilesV2, getFileText } from 'entities';
+import magicSandbox from './magicSandbox';
+import { getComputedIndexHtml } from './getComputedIndexHtml';
+import { transformFiles } from './transformFiles';
+import { bundle } from './bundle';
+import { v3FilesToV2Files } from './v3FilesToV2Files';
+
+// Inspired by https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/presenters/src/computeSrcDoc.js
+
+export const computeSrcDocV2 = async (content: Content) => {
+  // Migrate V3 files to V2 files.
+  let filesV2: FilesV2 = v3FilesToV2Files(content.files);
+
+  // Since we do not include `bundle.js` in the migrated content,
+  // we need to add it back in, computed from the files on the fly.
+  // ... but only if there is an `index.js` file.
+  const indexJS = getFileText(content, 'index.js');
+  if (indexJS) {
+    const filesV2BundleJSOnly = await bundle(filesV2);
+    // Bundle the files using Rollup.
+    // This will add a `bundle.js` file to the files.
+    // Includes ES module bundling and JSX support.
+    filesV2 = [...filesV2, ...filesV2BundleJSOnly];
+  }
+
+  // Compute the index.html file from the files.
+  const template = getComputedIndexHtml(filesV2);
+
+  // Transform files to match what MagicSandbox expects.
+  const files = transformFiles(filesV2);
+
+  // Use MagicSandbox to inject the bundle.js script tag.
+  return magicSandbox(template, files);
+};

package/src/v2Runtime/getComputedIndexHtml.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import {
+  getComputedIndexHtml,
+  setJSDOM,
+} from './getComputedIndexHtml';
+import { JSDOM } from 'jsdom';
+
+setJSDOM(JSDOM);
+
+describe('v2 getComputedIndexHtml', () => {
+  it('should return empty string if missing index.html', async () => {
+    const files = [];
+    expect(getComputedIndexHtml(files)).toEqual(``);
+  });
+
+  it('should preserve existing index.html if no bundle and no package.json', async () => {
+    const text =
+      '<html><body><h1>Hello World</h1></body></html>';
+    const files = [{ name: 'index.html', text }];
+    expect(getComputedIndexHtml(files)).toEqual(text);
+  });
+
+  it('should add bundle.js, no package.json', async () => {
+    const text =
+      '<html><body><script src="bundle.js"></script></body></html>';
+    const files = [
+      { name: 'index.html', text },
+      { name: 'index.js', text: 'console.log("Hello")' },
+    ];
+    // console.log(JSON.stringify(getComputedIndexHtml(files), null, 2));
+    expect(getComputedIndexHtml(files)).toEqual(text);
+  });
+});

package/src/v2Runtime/getComputedIndexHtml.ts

@@ -0,0 +1,106 @@
+// From https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/presenters/src/getComputedIndexHtml.js
+
+import {
+  dependencies,
+  getConfiguredLibraries,
+  dependencySource,
+} from './packageJson';
+import { FilesV2 } from 'entities';
+import { getText } from './getText';
+
+// const isPackageJSONEnabled = true;
+
+let parser;
+
+// If we're in the browser, use native DOMParser.
+if (typeof window !== 'undefined') {
+  parser = new DOMParser();
+}
+
+// Expose a way to inject a DOMParser implementation
+// when we're in a Node environment (tests, API server).
+export const setJSDOM = (JSDOM) => {
+  parser = new new JSDOM().window.DOMParser();
+};
+
+const injectBundleScript = (htmlTemplate, files) => {
+  const doc = parser.parseFromString(
+    htmlTemplate,
+    'text/html',
+  );
+  // console.log('doc', doc);
+  if (
+    getText(files, 'bundle.js') &&
+    !doc.querySelector('[src="bundle.js"]')
+  ) {
+    const bundleScriptTag = doc.createElement('script');
+    // This will be fed through MagicSandbox.
+    bundleScriptTag.src = 'bundle.js';
+    doc.body.appendChild(bundleScriptTag);
+    return `<!DOCTYPE html>${doc.documentElement.outerHTML}`;
+  } else {
+    return htmlTemplate;
+  }
+};
+
+const injectDependenciesScript = (htmlTemplate, files) => {
+  const deps = Object.entries(dependencies(files) || {});
+
+  if (deps.length === 0) return htmlTemplate;
+
+  if (!parser)
+    throw new Error(
+      'DOM parser is not defined. Did you forget to call setJSDOM()?',
+    );
+
+  const doc = parser.parseFromString(
+    htmlTemplate,
+    'text/html',
+  );
+  const libraries = getConfiguredLibraries(files);
+
+  deps
+    .map(([name, version]) =>
+      dependencySource({ name, version }, libraries),
+    )
+    .forEach((url) => {
+      const scriptTag = doc.createElement('script');
+      scriptTag.src = url;
+
+      doc.head.appendChild(scriptTag);
+    });
+
+  return `<!DOCTYPE html>${doc.documentElement.outerHTML}`;
+};
+
+// Compute the index.html file from the files.
+// Includes:
+// - bundle.js script tag
+// - dependencies script tag(s)
+export const getComputedIndexHtml = (files: FilesV2) => {
+  try {
+    // Isolate the index.html file.
+    const htmlTemplate = getText(files, 'index.html');
+
+    // If there is no index.html file, return an empty string.
+    if (!htmlTemplate) {
+      return '';
+    }
+
+    // Inject bundle.js script tag if needed.
+    const htmlWithBundleScriptTemplate = injectBundleScript(
+      htmlTemplate,
+      files,
+    );
+
+    // Inject dependencies script tag(s) if needed, based on package.json.
+    const indexHtml = injectDependenciesScript(
+      htmlWithBundleScriptTemplate,
+      files,
+    );
+
+    return indexHtml;
+  } catch (err) {
+    console.log(err);
+  }
+};

package/src/v2Runtime/getText.ts

@@ -0,0 +1,19 @@
+import { FilesV2 } from 'entities';
+
+// From https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/presenters/src/accessors.js#L23
+const getFileIndex = (files: FilesV2, name: string) => {
+  for (let i = 0; i < files.length; i++) {
+    if (files[i].name === name) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+const getFile = (files: FilesV2, name: string) =>
+  files[getFileIndex(files, name)];
+
+export const getText = (files: FilesV2, name: string) => {
+  const file = getFile(files, name);
+  return file ? file.text || '' : '';
+};