@dxos/plugin-script 0.7.5-main.499c70c → 0.7.5-main.6a330ac

package/dist/types/src/components/Toolbar/Toolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAIL,KAAK,eAAe,EAOrB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG,eAAe,CACxC;IACE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC,GAAG,mBAAmB,GACrB,iBAAiB,CACpB,CAAC;AAEF,eAAO,MAAM,OAAO,uHAWjB,YAAY,sBA4Dd,CAAC;AA0BF,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,cAAc,oCAA0C,mBAAmB,sBAkBvF,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,YAAY,2BAA4B,iBAAiB,sBAcrE,CAAC"}

package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAO7C,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/src/components/Toolbar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Toolbar';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Toolbar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/types/src/templates.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../src/templates.ts"],"names":[],"mappings":"AAiBA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAAQ,EA6B/B,CAAC"}

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/AutomationPanel/AutomationPanel.tsx

@@ -1,104 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useMemo, useState } from 'react';
-
-import { failUndefined } from '@dxos/debug';
-import { FunctionType, ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
-import { useClient } from '@dxos/react-client';
-import { Filter, getMeta, getSpace, type ReactiveEchoObject, useQuery } from '@dxos/react-client/echo';
-import { Select, useTranslation } from '@dxos/react-ui';
-
-import { SCRIPT_PLUGIN } from '../../meta';
-import { DebugPanel } from '../DebugPanel';
-
-export interface AutomationPanelProps {
-  subject: ReactiveEchoObject<any>;
-}
-
-export const AutomationPanel = ({ subject }: AutomationPanelProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
-  const space = getSpace(subject);
-
-  // TODO(dmaretskyi): Parametric query.
-  const functions = useQuery(
-    space ?? undefined,
-    subject instanceof ScriptType
-      ? Filter.schema(FunctionType, { source: subject })
-      : Filter.schema(FunctionType, (fn) => fn.binding != null),
-    {},
-    [subject],
-  );
-
-  const [selectedFunction, setSelectedFunction] = useState<FunctionType | null>(null);
-  const chatFunction = subject instanceof ScriptType ? functions[0] : selectedFunction;
-
-  return (
-    <div className='h-full flex flex-col'>
-      {!(subject instanceof ScriptType) && (
-        <BindingSelect
-          selectedFunction={selectedFunction}
-          setSelectedFunction={setSelectedFunction}
-          functions={functions}
-        />
-      )}
-      {chatFunction && <ChatPanel fn={chatFunction} subject={subject} />}
-      {subject instanceof ScriptType && functions.length === 0 && <div className='p-1'>{t('not deployed')}</div>}
-    </div>
-  );
-};
-
-export interface ChatPanelProps {
-  fn: FunctionType;
-  subject: ReactiveEchoObject<any>;
-}
-
-const ChatPanel = ({ fn, subject }: ChatPanelProps) => {
-  const client = useClient();
-  const space = getSpace(fn);
-  const existingFunctionUrl = getUserFunctionUrlInMetadata(getMeta(fn));
-  const functionUrl = useMemo(() => {
-    if (!existingFunctionUrl) {
-      return;
-    }
-
-    return getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
-      spaceId: space?.id,
-      subjectId: subject?.id,
-    });
-  }, [existingFunctionUrl, space, subject]);
-
-  return <DebugPanel functionUrl={functionUrl} classNames='flex-1' />;
-};
-
-export interface BindingSelectProps {
-  selectedFunction: FunctionType | null;
-  setSelectedFunction: (fn: FunctionType) => void;
-  functions: FunctionType[];
-}
-
-const BindingSelect = ({ selectedFunction, setSelectedFunction, functions }: BindingSelectProps) => {
-  return (
-    <Select.Root
-      value={selectedFunction?.id}
-      onValueChange={(id) => setSelectedFunction(functions.find((fn) => fn.id === id) ?? failUndefined())}
-    >
-      <Select.TriggerButton placeholder='Select value' />
-      <Select.Portal>
-        <Select.Content>
-          <Select.ScrollUpButton />
-          <Select.Viewport>
-            {functions.map(({ id, binding }) => (
-              <Select.Option key={id} value={id}>
-                {binding}
-              </Select.Option>
-            ))}
-          </Select.Viewport>
-          <Select.ScrollDownButton />
-          <Select.Arrow />
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-  );
-};

package/src/components/AutomationPanel/index.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { AutomationPanel } from './AutomationPanel';
-
-export * from './AutomationPanel';
-
-export default AutomationPanel;

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';