@dxos/plugin-script 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/bundler/bundler.test.ts

@@ -1,54 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-// @ts-ignore
-import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
-import { beforeAll, describe, expect, test } from 'vitest';
-
-import { isNode } from '@dxos/util';
-
-import { Bundler, initializeBundler } from './bundler';
-
-describe('Bundler', () => {
-  beforeAll(async () => {
-    if (!isNode()) {
-      await initializeBundler({ wasmUrl });
-    }
-  });
-
-  test('Basic', async () => {
-    const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
-    const result = await bundler.bundle('const x = 100'); // TODO(burdon): Test import.
-    expect(result.bundle).to.exist;
-    expect(result.error).to.not.exist;
-  });
-
-  test('Import', async () => {
-    const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
-    const result = await bundler.bundle(`
-      import { Filter } from './runtime.js';
-
-      const query = Filter.typename('dxos.org/type/Example');
-    `);
-    expect(result.bundle).to.exist;
-    expect(result.error).to.not.exist;
-  });
-
-  test('HTTPS Import', async () => {
-    const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
-    const result = await bundler.bundle(`
-      import { Octokit } from 'https://esm.sh/octokit';
-      const octokit = new Octokit();
-    `);
-    expect(result.bundle).to.exist;
-    expect(result.error).to.not.exist;
-  });
-
-  test('Error', async () => {
-    const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
-    const result = await bundler.bundle("import missing from './module'; missing();");
-    expect(result.bundle).to.not.exist;
-    expect(result.error).to.exist;
-  });
-});

package/src/bundler/bundler.ts

@@ -1,250 +0,0 @@
-//
-// 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: /^dxos:functions$/ }, ({ path }) => {
-                return { path: './runtime.js', 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/components/ScriptBlock/ScriptBlock.stories.tsx

@@ -1,55 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useMemo } from 'react';
-
-import { ScriptType } from '@dxos/functions';
-import { TextType } from '@dxos/plugin-markdown/types';
-import { create, createObject, makeRef } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { ScriptBlock } from './ScriptBlock';
-// @ts-ignore
-import mainUrl from '../FrameContainer/frame?url';
-
-const typename = 'example.com/type/contact';
-
-const code = [
-  "import { Filter, useQuery, useSpaces} from '@dxos/react-client/echo';",
-  "import { Chart, Explorer, Globe } from '@dxos/plugin-explorer';",
-  '',
-  'export default () => {',
-  '  const spaces = useSpaces();',
-  '  const space = spaces[1]',
-  `  const objects = useQuery(space, Filter.typename('${typename}'));`,
-  '  return <Chart items={objects} accessor={object => ({ x: object.lat, y: object.lng })} />',
-  '}',
-].join('\n');
-
-const DefaultStory = () => {
-  // TODO(burdon): Review what's the right way to create automerge-backed objects.
-  const object = useMemo(
-    () => createObject(create(ScriptType, { source: makeRef(create(TextType, { content: code })) })),
-    [],
-  );
-
-  // TODO(dmaretskyi): Not sure how to provide `containerUrl` here since the html now lives in composer-app.
-  // TODO(burdon): Normalize html/frame.tsx with composer-app to test locally.
-  return <ScriptBlock script={object} containerUrl={mainUrl} />;
-};
-
-export const Default = {};
-
-const meta: Meta = {
-  title: 'plugins/plugin-script/ScriptBlock',
-  component: ScriptBlock,
-  render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withTheme, withLayout({ fullscreen: true, tooltips: true })],
-};
-
-export default meta;

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -1,102 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-// @ts-ignore
-import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { type ScriptType } from '@dxos/functions';
-import { createDocAccessor, DocAccessor } from '@dxos/react-client/echo';
-import { Toolbar, Button, Icon } from '@dxos/react-ui';
-
-import { Bundler, type BundlerResult, initializeBundler } from '../../bundler';
-import { FrameContainer } from '../FrameContainer';
-import { ScriptEditor } from '../ScriptEditor';
-
-// Keep in sync with packages/apps/composer-app/script-frame/main.tsx .
-const PROVIDED_MODULES = [
-  'react',
-  'react-dom/client',
-  '@dxos/client',
-  '@dxos/react-client',
-  '@dxos/react-client/echo',
-  '@dxos/plugin-explorer',
-];
-
-export type ScriptBlockProps = {
-  script: ScriptType;
-  hideSelector?: boolean;
-
-  // Url to the page used to host the script in the iframe.
-  containerUrl: string;
-};
-
-/**
- * @deprecated
- */
-// TODO(burdon): Cache compiled results in context.
-export const ScriptBlock = ({ script, hideSelector, containerUrl }: ScriptBlockProps) => {
-  const source = useMemo(() => script.source && createDocAccessor(script.source.target!, ['content']), [script.source]);
-  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 initializeBundler({ wasmUrl });
-  }, []);
-  useEffect(() => {
-    // TODO(burdon): Throttle and listen for update.
-    const t = setTimeout(async () => {
-      if (!source) {
-        return;
-      }
-
-      const result = await bundler.bundle(DocAccessor.getValue(source));
-      setResult(result);
-    });
-
-    return () => clearTimeout(t);
-  }, [source]);
-
-  const handleExec = useCallback(
-    async (auto = true) => {
-      if (!source) {
-        return;
-      }
-      const result = await bundler.bundle(DocAccessor.getValue(source));
-      setResult(result);
-    },
-    [source],
-  );
-
-  return (
-    <div className='flex flex-col grow overflow-hidden'>
-      {!hideSelector && (
-        <Toolbar.Root>
-          <div className='grow' />
-          {result?.bundle && !result?.error && (
-            <div title={String(result.error)}>
-              <Icon icon='ph--check--regular' size={5} classNames='text-green-500' />
-            </div>
-          )}
-          {result?.error && (
-            <div title={String(result.error)}>
-              <Icon icon='ph--warning--regular' size={5} classNames='text-orange-500' />
-            </div>
-          )}
-          <Button variant='ghost' onClick={() => handleExec()}>
-            <Icon icon='ph--play--regular' size={5} />
-          </Button>
-        </Toolbar.Root>
-      )}
-
-      <div className='flex'>
-        <ScriptEditor script={script} />
-        {result && <FrameContainer key={script.id} result={result} containerUrl={containerUrl} />}
-      </div>
-    </div>
-  );
-};

package/src/components/ScriptBlock/index.ts

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

package/src/components/ScriptEditor.tsx

@@ -1,193 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { format } from 'prettier';
-import prettierPluginEstree from 'prettier/plugins/estree';
-import prettierPluginTypescript from 'prettier/plugins/typescript';
-import React, { useCallback, useMemo, useState } from 'react';
-
-import {
-  FUNCTIONS_PRESET_META_KEY,
-  FunctionType,
-  type ScriptType,
-  getInvocationUrl,
-  getUserFunctionUrlInMetadata,
-  setUserFunctionUrlInMetadata,
-  uploadWorkerFunction,
-  incrementSemverPatch,
-} from '@dxos/functions';
-import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { create, createDocAccessor, Filter, getMeta, getSpace, makeRef, useQuery } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
-import { createDataExtensions, listener } from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
-
-import { DebugPanel } from './DebugPanel';
-import { type TemplateSelectProps, Toolbar, type ViewType } from './Toolbar';
-import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
-import { Bundler } from '../bundler';
-import { SCRIPT_PLUGIN } from '../meta';
-import { templates } from '../templates';
-
-export type ScriptEditorProps = ThemedClassName<{
-  script: ScriptType;
-}> &
-  Pick<TypescriptEditorProps, 'env'>;
-
-export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
-  const client = useClient();
-  const identity = useIdentity();
-  const space = getSpace(script);
-  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
-
-  const extensions = useMemo(
-    () => [
-      listener({
-        onChange: (text) => {
-          if (script.source.target && script.source.target.content !== text) {
-            script.changed = true;
-          }
-        },
-      }),
-      createDataExtensions({
-        id: script.id,
-        text: script.source.target && createDocAccessor(script.source.target, ['content']),
-        space,
-        identity,
-      }),
-    ],
-    [script, script.source.target, space, identity],
-  );
-
-  const [view, setView] = useState<ViewType>('editor');
-  const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(getMeta(fn));
-  const [error, setError] = useState<string>();
-
-  const handleFormat = useCallback(async () => {
-    if (!script.source) {
-      return;
-    }
-
-    try {
-      script.source.target!.content = await format(script.source.target!.content, {
-        parser: 'typescript',
-        plugins: [prettierPluginEstree, prettierPluginTypescript],
-        semi: true,
-        singleQuote: true,
-      });
-    } catch (err: any) {
-      // TODO(wittjosiah): Show error in UI.
-      log.catch(err);
-    }
-  }, [script.source]);
-
-  const handleTemplateChange: TemplateSelectProps['onTemplateSelect'] = (id) => {
-    const template = templates.find((template) => template.id === id);
-    if (template) {
-      script.name = template.name;
-      script.source!.target!.content = template.source;
-      const metaKeys = getMeta(script).keys;
-      const oldPresetIndex = metaKeys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
-      if (oldPresetIndex >= 0) {
-        metaKeys.splice(oldPresetIndex, 1);
-      }
-      if (template.presetId) {
-        metaKeys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
-      }
-    }
-  };
-
-  const handleDeploy = useCallback(async () => {
-    if (!script.source || !identity || !space) {
-      return;
-    }
-
-    setError(undefined);
-
-    try {
-      const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
-
-      const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
-      const buildResult = await bundler.bundle(script.source.target!.content);
-      if (buildResult.error || !buildResult.bundle) {
-        throw buildResult.error;
-      }
-
-      const { functionId, version, meta } = await uploadWorkerFunction({
-        client,
-        spaceId: space.id,
-        version: fn ? incrementSemverPatch(fn.version) : '0.0.1',
-        functionId: existingFunctionId,
-        source: buildResult.bundle,
-      });
-      if (functionId === undefined || version === undefined) {
-        throw new Error(`Upload didn't return expected data: functionId=${functionId}, version=${version}`);
-      }
-
-      log.info('function uploaded', { functionId, version });
-      if (fn) {
-        fn.version = version;
-      }
-
-      const deployedFunction =
-        fn ?? space.db.add(create(FunctionType, { name: functionId, version, source: makeRef(script) }));
-
-      script.changed = false;
-
-      if (meta.inputSchema) {
-        deployedFunction.inputSchema = meta.inputSchema;
-      } else {
-        log.verbose('no input schema in function metadata', { functionId });
-      }
-
-      setUserFunctionUrlInMetadata(getMeta(deployedFunction), `/${space.id}/${functionId}`);
-
-      setView('split');
-    } catch (err: any) {
-      log.catch(err);
-      setError(t('upload failed label'));
-    }
-  }, [fn, existingFunctionUrl, script, script.name, script.source, space?.id ?? null]);
-
-  const functionUrl = useMemo(() => {
-    if (!existingFunctionUrl) {
-      return;
-    }
-
-    return getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
-      spaceId: space?.id,
-    });
-  }, [existingFunctionUrl, space]);
-
-  return (
-    <div role='none' className={mx('flex flex-col w-full overflow-hidden divide-y divide-separator', classNames)}>
-      <Toolbar
-        deployed={Boolean(existingFunctionUrl) && !script.changed}
-        functionUrl={functionUrl}
-        error={error}
-        view={view}
-        templates={templates}
-        onDeploy={handleDeploy}
-        onFormat={handleFormat}
-        onViewChange={setView}
-        onTemplateSelect={handleTemplateChange}
-      />
-
-      {view !== 'preview' && (
-        <TypescriptEditor
-          id={script.id}
-          env={env}
-          initialValue={script.source?.target?.content}
-          extensions={extensions}
-          className='flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all'
-        />
-      )}
-
-      {view !== 'editor' && <DebugPanel functionUrl={functionUrl} />}
-    </div>
-  );
-};