@vizhub/runtime 0.0.1 → 0.0.2

package/src/v3Runtime/build.ts

@@ -1,270 +0,0 @@
-import {
-  OutputOptions,
-  RollupOptions,
-  RollupCache,
-  RollupLog,
-  RollupBuild,
-} from 'rollup';
-import { V3BuildError, V3BuildResult } from './types';
-import {
-  Content,
-  V3PackageJson,
-  VizId,
-  getFileText,
-} from 'entities';
-import { vizResolve } from './vizResolve';
-import { VizCache } from './vizCache';
-import { vizLoad } from './vizLoad';
-import { transformDSV } from './transformDSV';
-import { transformSvelte } from './transformSvelte';
-import { missingIndexJSError } from 'gateways';
-import {
-  invalidPackageJSONError,
-  missingImportError,
-  rollupError,
-} from 'gateways/src/errors';
-
-const debug = false;
-
-// From https://github.com/Rich-Harris/magic-string/blob/master/src/SourceMap.js
-// Modified to support Web Workers
-// Upstream PR: https://github.com/Rich-Harris/magic-string/pull/269
-function getBtoa() {
-  if (typeof btoa === 'function') {
-    return (str) => btoa(unescape(encodeURIComponent(str)));
-  } else if (typeof Buffer === 'function') {
-    return (str) =>
-      Buffer.from(str, 'utf-8').toString('base64');
-  } else {
-    return () => {
-      throw new Error(
-        'Unsupported environment: `window.btoa` or `Buffer` should be supported.',
-      );
-    };
-  }
-}
-
-const niceBTOA = getBtoa();
-
-const getGlobals = (pkg: V3PackageJson) => {
-  const libraries = pkg?.vizhub?.libraries;
-  if (libraries) {
-    return Object.entries(libraries).reduce(
-      (accumulator, [packageName, config]) => {
-        accumulator[packageName] = config.global;
-        return accumulator;
-      },
-      {},
-    );
-  }
-  return null;
-};
-
-// Rollup cache for incremental builds!
-// See https://rollupjs.org/guide/en/#cache
-// Manual benchmarks for scatter plot example:
-// Without cache: avg = 5.9 ms
-// With cache: avg = 5.2 ms
-let cache: RollupCache | undefined;
-
-const isWebWorker =
-  typeof self !== 'undefined' && self.window === self;
-
-// Builds the code.
-// Throws errors if the build fails.
-export const build = async ({
-  vizId,
-  enableSourcemap = false,
-  enableCache = isWebWorker,
-  rollup,
-  vizCache,
-  resolveSlug,
-  getSvelteCompiler,
-}: {
-  // The ID of the viz being built.
-  vizId: VizId;
-  enableSourcemap?: boolean;
-  enableCache?: boolean;
-  rollup: (options: RollupOptions) => Promise<RollupBuild>;
-
-  // The viz cache, prepopulated with at least the viz being built.
-  vizCache: VizCache;
-
-  // Resolves a slug import to a viz ID.
-  resolveSlug?: ({ userName, slug }) => Promise<VizId>;
-
-  // Gets the Svelte compiler.
-  // This is synchronous because it either gets loaded
-  // from a CDN with importScripts (which is synchronous)
-  // or from a local node package (imported statically).
-  getSvelteCompiler?: () => Promise<any>;
-}): Promise<V3BuildResult> => {
-  if (debug) {
-    console.log('  build.ts: build()');
-    console.log('  vizId:', vizId);
-  }
-  const startTime = Date.now();
-  const warnings: Array<V3BuildError> = [];
-  let src: string | undefined;
-  let pkg: V3PackageJson | undefined;
-
-  const content: Content = await vizCache.get(vizId);
-
-  const indexJSContent = getFileText(content, 'index.js');
-  const cssFilesSet = new Set<string>();
-  if (!indexJSContent) {
-    throw missingIndexJSError();
-  } else {
-    const trackCSSImport = (cssFile: string) => {
-      cssFilesSet.add(cssFile);
-    };
-    const inputOptions: RollupOptions = {
-      input: './index.js',
-      plugins: [
-        vizResolve({ vizId, resolveSlug }),
-        // urlLoad(),
-        transformDSV(),
-        transformSvelte({ getSvelteCompiler }),
-        vizLoad({ vizCache, trackCSSImport }),
-        // vizLoadJS({ vizCache }),
-        // cssResolve
-        // csvResolve
-        // jsonResolve
-        // defaultResolve - protect against file system access
-      ],
-      onwarn: (warning: RollupLog) => {
-        warnings.push(JSON.parse(JSON.stringify(warning)));
-      },
-    };
-
-    // If cache is enabled AND there is a cache
-    // from the previous build, use it.
-    if (enableCache && cache) {
-      inputOptions.cache = cache;
-    }
-
-    const outputOptions: OutputOptions = {
-      format: 'umd',
-      name: 'Viz',
-      // TODO disable sourcemaps during hot reloading
-      sourcemap: enableSourcemap ? true : false,
-      // sourcemap: false,
-      compact: true,
-    };
-
-    const packageJSONContent = getFileText(
-      content,
-      'package.json',
-    );
-
-    if (packageJSONContent) {
-      try {
-        pkg = JSON.parse(packageJSONContent);
-      } catch (error) {
-        throw invalidPackageJSONError(error.message);
-      }
-    }
-
-    if (pkg) {
-      const globals = getGlobals(pkg);
-      if (globals) {
-        inputOptions.external = Object.keys(globals);
-        outputOptions.globals = globals;
-      }
-    }
-
-    try {
-      if (debug) {
-        console.log('  Invoking `rollup`');
-      }
-      const bundle = await rollup(inputOptions);
-      if (enableCache) {
-        cache = bundle.cache;
-      }
-      if (debug) {
-        console.log('  Invoking `bundle.generate`');
-      }
-      const { code, map } = (
-        await bundle.generate(outputOptions)
-      ).output[0];
-
-      // TODO benchmark performance and build size with vs. without sourcemaps
-      // Idea: no sourcemaps when interacting, sourcemaps after interact is done.
-      // Idea: cache builds on the server, don't store builds in ShareDB at all
-
-      // Escape script ending tags that may appear within strings,
-      // so that they don't break the server-rendered HTML.
-      src = code.replace('</script>', '<\\/script>');
-
-      // If sourcemaps are enabled, tack them onto the end inline.
-      if (enableSourcemap && map !== null && !debug) {
-        // Note that map.toUrl breaks in Web Worker as window.btoa is not defined.
-        // Inspired by https://github.com/Rich-Harris/magic-string/blob/abf373f2ed53d00e184ab236828853dd35a62763/src/SourceMap.js#L31
-        src +=
-          '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
-          niceBTOA(map.toString());
-        // src += '\n//# sourceMappingURL=' + map.toUrl();
-      }
-      if (debug) {
-        console.log('  Built with Rollup');
-        console.log(src?.slice(0, 200));
-      }
-    } catch (error) {
-      if (debug) {
-        console.log('  Caught error in build.ts:');
-        console.log(error);
-      }
-      // Detect missing import error from vizLoad plugin.
-      if (
-        error.code === 'PLUGIN_ERROR' &&
-        error.plugin === 'vizLoad' &&
-        error.hook === 'load'
-      ) {
-        // Remove unwieldy vizId from warning message,
-        // but keep slugs.
-        // Example:
-        // Missing import: Could not load 7f0b69fcb754479699172d1887817027/missing.js (imported by 7f0b69fcb754479699172d1887817027/index.js): Imported file "missing.js" not found.
-
-        const cleanMessage = error.message.replace(
-          /[0-9a-f]{32}\//g,
-          '',
-        );
-        throw missingImportError(cleanMessage);
-      }
-
-      throw rollupError(error.message);
-    }
-  }
-
-  for (const warning of warnings) {
-    // In VizHub, we want to treat certain warnings as errors.
-    if (warning.code === 'UNRESOLVED_IMPORT') {
-      // We don't treat it as an external dependency,
-      // so remove that message text as it may be confusing.
-      const cleanMessage = warning.message.replace(
-        ' – treating it as an external dependency',
-        '',
-      );
-      throw missingImportError(cleanMessage);
-    }
-  }
-
-  if (debug) {
-    console.log('  returning src in build.ts:');
-    console.log('  src:');
-    console.log(src?.slice(0, 200));
-  }
-
-  if (debug) {
-    console.log('  warnings:');
-    console.log(JSON.stringify(warnings, null, 2));
-  }
-
-  return {
-    warnings,
-    src,
-    pkg,
-    cssFiles: Array.from(cssFilesSet),
-    time: Date.now() - startTime,
-  };
-};

package/src/v3Runtime/cleanRollupErrorMessage.ts

@@ -1,15 +0,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>"
-export const cleanRollupErrorMessage = ({
-  rawMessage,
-  vizId,
-}: {
-  rawMessage: string;
-  vizId: string;
-}) => {
-  const regex = new RegExp(vizId, 'g');
-  return rawMessage?.replace(regex, '.');
-};

package/src/v3Runtime/computeSrcDocV3.ts

@@ -1,151 +0,0 @@
-import { getFileText } from 'entities';
-import { ResolvedVizFileId, V3BuildResult } from './types';
-import { VizCache } from './vizCache';
-import { parseId } from './parseId';
-
-const debug = false;
-
-function randomDigits() {
-  return Math.random().toString().slice(2, 7);
-}
-
-// Generates iframe srcdoc for first run.
-export const computeSrcDocV3 = async ({
-  vizCache,
-  buildResult,
-}: {
-  vizCache: VizCache;
-  buildResult: V3BuildResult;
-}) => {
-  const { pkg, src, cssFiles } = buildResult;
-
-  let cdn = '';
-  let styles = '';
-
-  if (debug) {
-    console.log('computeSrcDocV3:');
-    console.log('  src:');
-    console.log(src?.slice(0, 200));
-  }
-
-  // Inject CDN scripts for dependencies.
-  if (
-    pkg &&
-    pkg.dependencies &&
-    pkg.vizhub &&
-    pkg.vizhub.libraries
-  ) {
-    const {
-      dependencies,
-      vizhub: { libraries },
-    } = pkg;
-
-    cdn = Object.keys(dependencies)
-      .map((dependency, i) => {
-        const version = dependencies[dependency];
-        const path = libraries[dependency].path;
-        const src = `https://cdn.jsdelivr.net/npm/${dependency}@${version}${path}`;
-        const indent = i > 0 ? '    ' : '\n    ';
-        return `${indent}<script src="${src}"></script>`;
-      })
-      .join('\n');
-  }
-
-  // Inject CSS files.
-  if (cssFiles.length > 0) {
-    for (let i = 0; i < cssFiles.length; i++) {
-      const id: ResolvedVizFileId = cssFiles[i];
-      const indent = i > 0 ? '    ' : '\n    ';
-      const styleElementId = 'injected-style' + id;
-      const { vizId, fileName } = parseId(id);
-      const content = await vizCache.get(vizId);
-      const src = getFileText(content, fileName);
-      styles += `${indent}<style id="${styleElementId}">${src}</style>`;
-    }
-  }
-
-  const containerSuffix = randomDigits();
-
-  const vizContainerId = `viz-container-${containerSuffix}`;
-
-  return `<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">${cdn}${styles}
-    <style>
-      body {
-        margin: 0;
-        overflow: hidden;
-      }
-      #${vizContainerId} {
-        height: 100vh;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="${vizContainerId}"></div>
-    <script id="injected-script">${src}</script>
-    <script>
-      (() => {
-        let cleanup;
-        const render = () => {
-          const container = document.getElementById('${vizContainerId}');
-          typeof cleanup === 'function' && cleanup();
-          cleanup = Viz.main(container, { state: window.state, setState, writeFile });
-        };
-        const setState = (next) => {
-          window.state = next(window.state);
-          render();
-        };
-        const writeFile = (fileName, content) => {
-          parent.postMessage({ type: 'writeFile', fileName, content }, "*");
-        };
-        const run = () => {
-          try {
-            setState((state) => state || {});
-          } catch (error) {
-            console.error(error);
-            parent.postMessage({ type: 'runError', error }, "*");
-          }
-        }
-        run();
-        const runJS = (src) => {
-          document.getElementById('injected-script')?.remove();
-          const script = document.createElement('script');
-          script.textContent = src;
-          script.id = 'injected-script';
-          document.body.appendChild(script);
-          run();
-        };
-        const runCSS = (src, id) => {
-          const styleElementId = 'injected-style' + id;
-          let style = document.getElementById(styleElementId);
-          if (!style) {
-            style = document.createElement('style');
-            style.type = 'text/css';
-            style.id = styleElementId;
-            document.head.appendChild(style);
-          }
-          style.textContent = src;
-        };
-        onmessage = (message) => {
-          switch (message.data.type) {
-            case 'runJS':
-              runJS(message.data.src);
-              parent.postMessage({ type: 'runDone' }, "*");
-              break;
-            case 'runCSS':
-              runCSS(message.data.src, message.data.id);
-              break;
-            case 'ping':
-              parent.postMessage({ type: 'pong' }, "*");
-              break;
-            default:
-              break;
-          }
-        }
-      })();
-    </script>
-  </body>
-</html>`;
-};

package/src/v3Runtime/extractVizImport.test.ts

@@ -1,41 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { extractVizImport } from './extractVizImport';
-
-describe('v3 extractVizImport', () => {
-  it('should correctly extract username and viz id', () => {
-    const result = extractVizImport(
-      '@curran/21f72bf74ef04ea0b9c9b82aaaec859a',
-    );
-    expect(result).toEqual({
-      userName: 'curran',
-      idOrSlug: '21f72bf74ef04ea0b9c9b82aaaec859a',
-    });
-  });
-
-  it('should correctly extract username and alphanumeric id', () => {
-    const result = extractVizImport('@curran/scatter-plot');
-    expect(result).toEqual({
-      userName: 'curran',
-      idOrSlug: 'scatter-plot',
-    });
-  });
-
-  it('should return null for non-matching strings', () => {
-    const result = extractVizImport(
-      'not-a-matching-string',
-    );
-    expect(result).toBeNull();
-  });
-
-  it('should handle cases with invalid characters in username', () => {
-    const result = extractVizImport('@c!urran/valid-id');
-    expect(result).toBeNull();
-  });
-
-  it('should handle cases with invalid characters in id', () => {
-    const result = extractVizImport('@curran/invalid id');
-    expect(result).toBeNull();
-  });
-
-  // Add more test cases as needed for edge cases or specific behaviors
-});

package/src/v3Runtime/extractVizImport.ts

@@ -1,34 +0,0 @@
-import { UserName, VizId } from 'entities';
-
-export type VizImport = {
-  userName: UserName;
-  idOrSlug: VizId | string;
-};
-
-export const extractVizImport = (
-  str: string,
-): VizImport | null => {
-  // 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;
-  }
-};
-
-// // 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/src/v3Runtime/generateRollupErrorMessage.ts

@@ -1,84 +0,0 @@
-// Inspired by
-//  * https://github.com/rollup/rollup/blob/c5337ef28a71c796e768a9f0edb3d7259a93f1aa/cli/logging.ts#L4
-//  * https://github.com/vizhub-core/vizhub-legacy/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/VizRunnerContext/generateRunErrorMessage.js#L2
-import { RollupError } from 'rollup';
-import { ResolvedVizFileId } from './types';
-import { parseId } from './parseId';
-
-// Clean up the file id for human consumption.
-export default function relativeId(
-  id: ResolvedVizFileId,
-): string {
-  // TODO consider exposing vizId or slug in the UI if the
-  // error originates from a viz that is imported from.
-  const { fileName } = parseId(id);
-  return fileName;
-}
-
-export const generateRollupErrorMessage = (
-  error: RollupError,
-) => {
-  const name = error.name || (error.cause as Error)?.name;
-  const nameSection = name ? `${name}: ` : '';
-
-  const message = `${nameSection}${error.message}`;
-
-  const outputLines = [`[!] ${message.toString()}`];
-
-  if (error.url) {
-    outputLines.push(error.url);
-  }
-
-  if (error.loc) {
-    outputLines.push(
-      `${relativeId((error.loc.file || error.id)!)} (${
-        error.loc.line
-      }:${error.loc.column})`,
-    );
-  } else if (error.id) {
-    outputLines.push(relativeId(error.id));
-  }
-
-  if (error.frame) {
-    outputLines.push(error.frame);
-  }
-
-  if (error.stack) {
-    outputLines.push(
-      error.stack?.replace(
-        `${nameSection}${error.message}\n`,
-        '',
-      ),
-    );
-  }
-
-  outputLines.push('', '');
-
-  return outputLines.join('\n');
-
-  //   const lines = [];
-  //   let message = error.message;
-  //   if (error.name) {
-  //     message = `${error.name}: ${message}`;
-  //   }
-  //   lines.push(message);
-  //   if (error.url) {
-  //     lines.push(error.url);
-  //   }
-  //   if (error.loc) {
-  //     lines.push(
-  //       `${error.loc.file || error.id} (line ${
-  //         error.loc.line
-  //       })`,
-  //     );
-  //   } else if (error.id) {
-  //     lines.push(error.id);
-  //   }
-  //   if (error.frame) {
-  //     lines.push(error.frame);
-  //   }
-  //   // if (error.stack) {
-  //   //   lines.push(error.stack);
-  //   // }
-  //   return lines.join('\n');
-};

package/src/v3Runtime/importFromViz.ts

@@ -1,36 +0,0 @@
-// // Virtual file system for Rollup
-// // A Rollup plugin for a virtual file system.
-// // Inspired by https://github.com/Permutatrix/rollup-plugin-hypothetical/blob/master/index.js
-
-// import { InputPluginOption } from 'rollup';
-// import { extractVizImport } from './extractVizImport';
-// import { Content, VizId, getFileText } from 'entities';
-// import { VizCache } from './vizCache';
-
-// export const importFromViz = (
-//   vizCache: VizCache,
-// ): InputPluginOption => ({
-//   name: 'importFromViz',
-//   // If we are import from another viz, like this:
-//   // import { message } from "@curran/21f72bf74ef04ea0b9c9b82aaaec859a";
-//   // import { message } from "@curran/scatter-plot";
-//   // then this import is the responsibility of this plugin.
-//   resolveId: async (id: string) => {
-//     console.log('importFromViz: resolveId() ' + id);
-//     const vizImport = extractVizImport(id);
-//     if (vizImport) {
-//       return vizImport.vizId;
-//     } else {
-//       return null;
-//     }
-//   },
-//   load: (id: string) => {
-//     const vizId: VizId = id as VizId;
-//     const content: Content = vizCache.get(vizId);
-//     const code = getFileText(content, 'index.js');
-//     // console.log('importFromViz: load() ' + id);
-//     // console.log('  content:');
-//     // console.log(content);
-//     return code;
-//   },
-// });

package/src/v3Runtime/index.ts

@@ -1 +0,0 @@
-export type { V3BuildResult } from './types';

package/src/v3Runtime/parseId.ts

@@ -1,14 +0,0 @@
-import { VizId } from 'entities';
-import { ResolvedVizFileId } from './types';
-
-export const parseId = (
-  id: ResolvedVizFileId,
-): {
-  vizId: VizId;
-  fileName: string;
-} => {
-  const [vizId, fileName]: [VizId, string] = id.split(
-    '/',
-  ) as [VizId, string];
-  return { vizId, fileName };
-};