@dxos/plugin-script 0.6.9 → 0.6.10-main.48c066e

package/src/bundler/bundler.ts

@@ -0,0 +1,246 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type BuildOptions } from 'esbuild';
+import { build, initialize, type BuildResult, type Plugin } from 'esbuild-wasm';
+
+import { subtleCrypto } from '@dxos/crypto';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+
+export type Import = {
+  moduleUrl: string;
+  defaultImport: boolean;
+  namedImports: string[];
+};
+
+export type BundlerResult = {
+  timestamp: number;
+  sourceHash: Buffer;
+  imports?: Import[];
+  bundle?: string;
+  error?: any;
+};
+
+export type BundlerOptions = {
+  platform: BuildOptions['platform'];
+  sandboxedModules: string[];
+  remoteModules: Record<string, string>;
+};
+
+let initialized: Promise<void>;
+export const initializeBundler = async (options: { wasmUrl: string }) => {
+  await (initialized ??= initialize({
+    wasmURL: options.wasmUrl,
+  }));
+};
+
+/**
+ * ESBuild bundler.
+ */
+export class Bundler {
+  constructor(private readonly _options: BundlerOptions) {}
+
+  async bundle(source: string): Promise<BundlerResult> {
+    const { sandboxedModules: providedModules, ...options } = this._options;
+
+    const createResult = async (result?: Partial<BundlerResult>) => {
+      return {
+        timestamp: Date.now(),
+        sourceHash: Buffer.from(await subtleCrypto.digest('SHA-256', Buffer.from(source))),
+        ...result,
+      };
+    };
+
+    if (this._options.platform === 'browser') {
+      invariant(initialized, 'Compiler not initialized.');
+      await initialized;
+    }
+
+    const imports = analyzeSourceFileImports(source);
+
+    // https://esbuild.github.io/api/#build
+    try {
+      const result = await build({
+        platform: options.platform,
+        conditions: ['workerd', 'browser'],
+        metafile: true,
+        write: false,
+        entryPoints: ['memory:main.tsx'],
+        bundle: true,
+        format: 'esm',
+        plugins: [
+          {
+            name: 'memory',
+            setup: (build) => {
+              build.onResolve({ filter: /^\.\/runtime\.js$/ }, ({ path }) => {
+                return { path, external: true };
+              });
+
+              build.onResolve({ filter: /^memory:/ }, ({ path }) => {
+                return { path: path.split(':')[1], namespace: 'memory' };
+              });
+
+              build.onLoad({ filter: /.*/, namespace: 'memory' }, ({ path }) => {
+                if (path === 'main.tsx') {
+                  return {
+                    contents: source,
+                    loader: 'tsx',
+                  };
+                }
+              });
+
+              for (const module of providedModules) {
+                build.onResolve({ filter: new RegExp(`^${module}$`) }, ({ path }) => {
+                  return { path, namespace: 'injected-module' };
+                });
+              }
+
+              build.onLoad({ filter: /.*/, namespace: 'injected-module' }, ({ path }) => {
+                const namedImports = imports.find((entry) => entry.moduleIdentifier === path)?.namedImports ?? [];
+                return {
+                  contents: `
+                  const { ${namedImports.join(',')} } = window.__DXOS_SANDBOX_MODULES__[${JSON.stringify(path)}];
+                  export { ${namedImports.join(',')} };
+                  export default window.__DXOS_SANDBOX_MODULES__[${JSON.stringify(path)}].default;
+                `,
+                  loader: 'tsx',
+                };
+              });
+            },
+          },
+          httpPlugin,
+        ],
+      });
+
+      log('compile complete', result.metafile);
+
+      return await createResult({
+        imports: this.analyzeImports(result),
+        bundle: result.outputFiles![0].text,
+      });
+    } catch (err) {
+      return await createResult({ error: err });
+    }
+  }
+
+  // TODO(dmaretskyi): In the future we can replace the compiler with SWC with plugins running in WASM.
+  analyzeImports(result: BuildResult): Import[] {
+    invariant(result.outputFiles);
+
+    // TODO(dmaretskyi): Support import aliases and wildcard imports.
+    const parsedImports = allMatches(IMPORT_REGEX, result.outputFiles[0].text);
+    return Object.values(result.metafile!.outputs)[0].imports.map((entry): Import => {
+      const namedImports: string[] = [];
+
+      const parsedImport = parsedImports.find((capture) => capture?.[4] === entry.path);
+      if (parsedImport?.[2]) {
+        NAMED_IMPORTS_REGEX.lastIndex = 0;
+        const namedImportsMatch = NAMED_IMPORTS_REGEX.exec(parsedImport[2]);
+        if (namedImportsMatch) {
+          namedImportsMatch[1].split(',').forEach((importName) => {
+            namedImports.push(importName.trim());
+          });
+        }
+      }
+
+      return {
+        moduleUrl: entry.path,
+        defaultImport: !!parsedImport?.[1],
+        namedImports,
+      };
+    });
+  }
+
+  analyzeSourceFileImports(code: string) {
+    // TODO(dmaretskyi): Support import aliases and wildcard imports.
+    const parsedImports = allMatches(IMPORT_REGEX, code);
+    return parsedImports.map((capture) => {
+      return {
+        defaultImportName: capture[1],
+        namedImports: capture[2]?.split(',').map((importName) => importName.trim()),
+        wildcardImportName: capture[3],
+        moduleIdentifier: capture[4],
+        quotes: capture[5],
+      };
+    });
+  }
+}
+
+// https://regex101.com/r/FEN5ks/1
+// https://stackoverflow.com/a/73265022
+// $1 = default import name (can be non-existent)
+// $2 = destructured exports (can be non-existent)
+// $3 = wildcard import name (can be non-existent)
+// $4 = module identifier
+// $5 = quotes used (either ' or ")
+const IMPORT_REGEX =
+  /import(?:(?:(?:[ \n\t]+([^ *\n\t{},]+)[ \n\t]*(?:,|[ \n\t]+))?([ \n\t]*{(?:[ \n\t]*[^ \n\t"'{}]+[ \n\t]*,?)+})?[ \n\t]*)|[ \n\t]*\*[ \n\t]*as[ \n\t]+([^ \n\t{}]+)[ \n\t]+)from[ \n\t]*(?:['"])([^'"\n]+)(['"])/gm;
+
+const NAMED_IMPORTS_REGEX = /[ \n\t]*{((?:[ \n\t]*[^ \n\t"'{}]+[ \n\t]*,?)+)}[ \n\t]*/gm;
+
+const allMatches = (regex: RegExp, str: string) => {
+  regex.lastIndex = 0;
+
+  let match;
+  const matches = [];
+  while ((match = regex.exec(str))) {
+    matches.push(match);
+  }
+
+  return matches;
+};
+
+type ParsedImport = {
+  defaultImportName?: string;
+  namedImports: string[];
+  wildcardImportName?: string;
+  moduleIdentifier: string;
+  quotes: string;
+};
+
+const analyzeSourceFileImports = (code: string): ParsedImport[] => {
+  // TODO(dmaretskyi): Support import aliases and wildcard imports.
+  const parsedImports = allMatches(IMPORT_REGEX, code);
+  return parsedImports.map((capture) => {
+    return {
+      defaultImportName: capture[1],
+      namedImports: capture[2]
+        ?.trim()
+        .slice(1, -1)
+        .split(',')
+        .map((importName) => importName.trim()),
+      wildcardImportName: capture[3],
+      moduleIdentifier: capture[4],
+      quotes: capture[5],
+    };
+  });
+};
+
+const httpPlugin: Plugin = {
+  name: 'http',
+  setup: (build) => {
+    // Intercept import paths starting with "http:" and "https:" so esbuild doesn't attempt to map them to a file system location.
+    // Tag them with the "http-url" namespace to associate them with this plugin.
+    build.onResolve({ filter: /^https?:\/\// }, (args) => ({
+      path: args.path,
+      namespace: 'http-url',
+    }));
+
+    // We also want to intercept all import paths inside downloaded files and resolve them against the original URL.
+    // All of these files will be in the "http-url" namespace.
+    // Make sure to keep the newly resolved URL in the "http-url" namespace so imports inside it will also be resolved as URLs recursively.
+    build.onResolve({ filter: /.*/, namespace: 'http-url' }, (args) => ({
+      path: new URL(args.path, args.importer).toString(),
+      namespace: 'http-url',
+    }));
+
+    // When a URL is loaded, we want to actually download the content from the internet.
+    // This has just enough logic to be able to handle the example import from unpkg.com but in reality this would probably need to be more complex.
+    build.onLoad({ filter: /.*/, namespace: 'http-url' }, async (args) => {
+      const response = await fetch(args.path);
+      return { contents: await response.text(), loader: 'jsx' };
+    });
+  },
+};

package/src/bundler/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './bundler';

package/src/compiler/compiler.browser.test.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { Compiler } from './compiler';
+
+describe('Compiler', () => {
+  test('Basic', async () => {
+    const compiler = new Compiler();
+    await compiler.initialize();
+    compiler.setFile('/src/x.ts', 'export const x = 100');
+    compiler.setFile('/src/y.ts', 'import { x } from "./x"; export const y = x + 100;');
+    const result = await compiler.compile('/src/y.ts');
+    expect(result).to.exist;
+  });
+});

package/src/compiler/compiler.ts

@@ -1,210 +1,51 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
-import { type BuildOptions } from 'esbuild';
-import { build, initialize, type BuildResult } from 'esbuild-wasm';
+import {
+  createDefaultMapFromCDN,
+  createSystem,
+  createVirtualTypeScriptEnvironment,
+  type VirtualTypeScriptEnvironment,
+} from '@typescript/vfs';
+import ts from 'typescript';
 
-import { subtleCrypto } from '@dxos/crypto';
 import { invariant } from '@dxos/invariant';
 
-export type Import = {
-  moduleUrl: string;
-  defaultImport: boolean;
-  namedImports: string[];
+const defaultOptions: ts.CompilerOptions = {
+  lib: ['DOM', 'es2022'],
+  target: ts.ScriptTarget.ES2022,
 };
 
-export type CompilerResult = {
-  timestamp: number;
-  sourceHash: Buffer;
-  imports?: Import[];
-  bundle?: string;
-  error?: any;
-};
-
-export type CompilerOptions = {
-  platform: BuildOptions['platform'];
-  providedModules: string[];
-};
-
-let initialized: Promise<void>;
-export const initializeCompiler = async (options: { wasmURL: string }) => {
-  await (initialized ??= initialize({
-    wasmURL: options.wasmURL,
-  }));
-};
-
-/**
- * ESBuild compiler.
- */
 export class Compiler {
-  constructor(private readonly _options: CompilerOptions) {}
-
-  async compile(source: string): Promise<CompilerResult> {
-    const { providedModules, ...options } = this._options;
+  private _env: VirtualTypeScriptEnvironment | undefined;
+  private _fsMap: Map<string, string> | undefined;
 
-    const createResult = async (result?: Partial<CompilerResult>) => {
-      return {
-        timestamp: Date.now(),
-        sourceHash: Buffer.from(await subtleCrypto.digest('SHA-256', Buffer.from(source))),
-        ...result,
-      };
-    };
+  constructor(private readonly _options: ts.CompilerOptions = defaultOptions) {}
 
-    if (this._options.platform === 'browser') {
-      invariant(initialized, 'Compiler not initialized.');
-      await initialized;
+  async initialize() {
+    if (this._env) {
+      return;
     }
 
-    const imports = analyzeSourceFileImports(source);
-
-    // https://esbuild.github.io/api/#build
-    try {
-      const result = await build({
-        ...options,
-        metafile: true,
-        write: false,
-        entryPoints: ['memory:main.tsx'],
-        bundle: true,
-        format: 'esm',
-        plugins: [
-          {
-            name: 'memory',
-            setup: (build) => {
-              build.onResolve({ filter: /^memory:/ }, ({ path }) => {
-                return { path: path.split(':')[1], namespace: 'memory' };
-              });
-
-              build.onLoad({ filter: /.*/, namespace: 'memory' }, ({ path }) => {
-                const imports = ["import React from 'react';"];
-                if (path === 'main.tsx') {
-                  return {
-                    contents: [...imports, source].join('\n'),
-                    loader: 'tsx',
-                  };
-                }
-              });
-
-              for (const module of providedModules) {
-                build.onResolve({ filter: new RegExp(`^${module}$`) }, ({ path }) => {
-                  return { path, namespace: 'injected-module' };
-                });
-              }
-
-              build.onLoad({ filter: /.*/, namespace: 'injected-module' }, ({ path }) => {
-                const namedImports = imports.find((entry) => entry.moduleIdentifier === path)?.namedImports ?? [];
-                return {
-                  contents: `
-                  const { ${namedImports.join(',')} } = window.__DXOS_SANDBOX_MODULES__[${JSON.stringify(path)}];
-                  export { ${namedImports.join(',')} };
-                  export default window.__DXOS_SANDBOX_MODULES__[${JSON.stringify(path)}].default;
-                `,
-                  loader: 'tsx',
-                };
-              });
-            },
-          },
-        ],
-      });
-
-      return await createResult({
-        imports: this.analyzeImports(result),
-        bundle: result.outputFiles![0].text,
-      });
-    } catch (err) {
-      return await createResult({ error: err });
-    }
+    // TODO(wittjosiah): Figure out how to get workers working in plugin packages.
+    //   https://github.com/val-town/codemirror-ts?tab=readme-ov-file#setup-worker
+    this._fsMap = await createDefaultMapFromCDN(this._options, '5.5.4', true, ts);
+    const system = createSystem(this._fsMap);
+    this._env = createVirtualTypeScriptEnvironment(system, [], ts, this._options);
   }
 
-  // TODO(dmaretskyi): In the future we can replace the compiler with SWC with plugins running in WASM.
-  analyzeImports(result: BuildResult): Import[] {
-    invariant(result.outputFiles);
-
-    // TODO(dmaretskyi): Support import aliases and wildcard imports.
-    const parsedImports = allMatches(IMPORT_REGEX, result.outputFiles[0].text);
-    return Object.values(result.metafile!.outputs)[0].imports.map((entry): Import => {
-      const namedImports: string[] = [];
-
-      const parsedImport = parsedImports.find((capture) => capture?.[4] === entry.path);
-      if (parsedImport?.[2]) {
-        NAMED_IMPORTS_REGEX.lastIndex = 0;
-        const namedImportsMatch = NAMED_IMPORTS_REGEX.exec(parsedImport[2]);
-        if (namedImportsMatch) {
-          namedImportsMatch[1].split(',').forEach((importName) => {
-            namedImports.push(importName.trim());
-          });
-        }
-      }
-
-      return {
-        moduleUrl: entry.path,
-        defaultImport: !!parsedImport?.[1],
-        namedImports,
-      };
-    });
+  get environment() {
+    invariant(this._env, 'Compiler environment not initialized.');
+    return this._env;
   }
 
-  analyzeSourceFileImports(code: string) {
-    // TODO(dmaretskyi): Support import aliases and wildcard imports.
-    const parsedImports = allMatches(IMPORT_REGEX, code);
-    return parsedImports.map((capture) => {
-      return {
-        defaultImportName: capture[1],
-        namedImports: capture[2]?.split(',').map((importName) => importName.trim()),
-        wildcardImportName: capture[3],
-        moduleIdentifier: capture[4],
-        quotes: capture[5],
-      };
-    });
+  setFile(fileName: string, content: string) {
+    invariant(this._fsMap, 'File system map not initialized.');
+    this.environment.createFile(fileName, content);
   }
-}
-
-// https://regex101.com/r/FEN5ks/1
-// https://stackoverflow.com/a/73265022
-// $1 = default import name (can be non-existent)
-// $2 = destructured exports (can be non-existent)
-// $3 = wildcard import name (can be non-existent)
-// $4 = module identifier
-// $5 = quotes used (either ' or ")
-const IMPORT_REGEX =
-  /import(?:(?:(?:[ \n\t]+([^ *\n\t{},]+)[ \n\t]*(?:,|[ \n\t]+))?([ \n\t]*{(?:[ \n\t]*[^ \n\t"'{}]+[ \n\t]*,?)+})?[ \n\t]*)|[ \n\t]*\*[ \n\t]*as[ \n\t]+([^ \n\t{}]+)[ \n\t]+)from[ \n\t]*(?:['"])([^'"\n]+)(['"])/gm;
 
-const NAMED_IMPORTS_REGEX = /[ \n\t]*{((?:[ \n\t]*[^ \n\t"'{}]+[ \n\t]*,?)+)}[ \n\t]*/gm;
-
-const allMatches = (regex: RegExp, str: string) => {
-  regex.lastIndex = 0;
-
-  let match;
-  const matches = [];
-  while ((match = regex.exec(str))) {
-    matches.push(match);
+  compile(fileName: string) {
+    return this.environment.languageService.getEmitOutput(fileName);
   }
-
-  return matches;
-};
-
-type ParsedImport = {
-  defaultImportName?: string;
-  namedImports: string[];
-  wildcardImportName?: string;
-  moduleIdentifier: string;
-  quotes: string;
-};
-
-const analyzeSourceFileImports = (code: string): ParsedImport[] => {
-  // TODO(dmaretskyi): Support import aliases and wildcard imports.
-  const parsedImports = allMatches(IMPORT_REGEX, code);
-  return parsedImports.map((capture) => {
-    return {
-      defaultImportName: capture[1],
-      namedImports: capture[2]
-        ?.trim()
-        .slice(1, -1)
-        .split(',')
-        .map((importName) => importName.trim()),
-      wildcardImportName: capture[3],
-      moduleIdentifier: capture[4],
-      quotes: capture[5],
-    };
-  });
-};
+}

package/src/compiler/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
 export * from './compiler';

package/src/components/ScriptBlock/FrameContainer/FrameContainer.tsx

@@ -11,11 +11,11 @@ import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
-import { type CompilerResult } from '../../../compiler';
+import { type BundlerResult } from '../../../bundler';
 
 export type FrameContainerProps = {
   containerUrl: string;
-  result: CompilerResult;
+  result: BundlerResult;
   debug?: boolean;
 };
 

package/src/components/ScriptBlock/ScriptBlock.stories.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
+import '@dxos-theme';
 
 import React, { useEffect, useMemo } from 'react';
 

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -4,7 +4,7 @@
 
 import { Check, Play, Warning } from '@phosphor-icons/react';
 // @ts-ignore
-import esbuildWasmURL from 'esbuild-wasm/esbuild.wasm?url';
+import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { createDocAccessor, DocAccessor } from '@dxos/react-client/echo';
@@ -13,7 +13,7 @@ import { mx, getSize } from '@dxos/react-ui-theme';
 
 import { FrameContainer } from './FrameContainer';
 import { Splitter, SplitterSelector, type View } from './Splitter';
-import { Compiler, type CompilerResult, initializeCompiler } from '../../compiler';
+import { Bundler, type BundlerResult, initializeBundler } from '../../bundler';
 import { type ScriptType } from '../../types';
 import { ScriptEditor } from '../ScriptEditor';
 
@@ -55,11 +55,14 @@ export const ScriptBlock = ({
   const [view, setView] = useState<View>(controlledView ?? 'editor');
   useEffect(() => handleSetView(controlledView ?? 'editor'), [controlledView]);
 
-  const [result, setResult] = useState<CompilerResult>();
-  const compiler = useMemo(() => new Compiler({ platform: 'browser', providedModules: PROVIDED_MODULES }), []);
+  const [result, setResult] = useState<BundlerResult>();
+  const bundler = useMemo(
+    () => new Bundler({ platform: 'browser', sandboxedModules: PROVIDED_MODULES, remoteModules: {} }),
+    [],
+  );
   useEffect(() => {
     // TODO(burdon): Create useCompiler hook (with initialization).
-    void initializeCompiler({ wasmURL: esbuildWasmURL });
+    void initializeBundler({ wasmUrl });
   }, []);
   useEffect(() => {
     // TODO(burdon): Throttle and listen for update.
@@ -68,7 +71,7 @@ export const ScriptBlock = ({
         return;
       }
 
-      const result = await compiler.compile(DocAccessor.getValue(source));
+      const result = await bundler.bundle(DocAccessor.getValue(source));
       setResult(result);
     });
 
@@ -90,7 +93,7 @@ export const ScriptBlock = ({
       if (!source) {
         return;
       }
-      const result = await compiler.compile(DocAccessor.getValue(source));
+      const result = await bundler.bundle(DocAccessor.getValue(source));
       setResult(result);
       if (auto && view === 'editor') {
         setView('preview');

package/src/components/ScriptBlock/Splitter/Splitter.stories.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
+import '@dxos-theme';
 
 import React, { useState } from 'react';