@dxos/plugin-script 0.6.8-main.046e6cf

package/src/ScriptPlugin.tsx

@@ -0,0 +1,137 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Code, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { parseIntentPlugin, type PluginDefinition, resolvePlugin, NavigationAction } from '@dxos/app-framework';
+import { create } from '@dxos/echo-schema';
+import { parseClientPlugin } from '@dxos/plugin-client';
+import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { TextType } from '@dxos/plugin-markdown/types';
+import { SpaceAction } from '@dxos/plugin-space';
+import { loadObjectReferences } from '@dxos/react-client/echo';
+
+import { ScriptEditor } from './components';
+import meta, { SCRIPT_PLUGIN } from './meta';
+import translations from './translations';
+import { ScriptType } from './types';
+import { ScriptAction, type ScriptPluginProvides } from './types';
+
+export type ScriptPluginProps = {
+  containerUrl: string;
+};
+
+export const ScriptPlugin = ({ containerUrl }: ScriptPluginProps): PluginDefinition<ScriptPluginProvides> => {
+  return {
+    meta,
+    provides: {
+      metadata: {
+        records: {
+          [ScriptType.typename]: {
+            placeholder: ['object title placeholder', { ns: SCRIPT_PLUGIN }],
+            icon: (props: IconProps) => <Code {...props} />,
+            iconSymbol: 'ph--code--regular',
+            // TODO(wittjosiah): Move out of metadata.
+            loadReferences: (script: ScriptType) => loadObjectReferences(script, (script) => [script.source]),
+          },
+        },
+      },
+      translations,
+      echo: {
+        schema: [ScriptType],
+      },
+      graph: {
+        builder: (plugins) => {
+          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          if (!client || !dispatch) {
+            return [];
+          }
+
+          return createExtension({
+            id: ScriptAction.CREATE,
+            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
+            actions: ({ node }) => {
+              const id = node.id.split('/').at(-1);
+              const [spaceId, objectId] = id?.split(':') ?? [];
+              const space = client.spaces.get().find((space) => space.id === spaceId);
+              const object = objectId && space?.db.getObjectById(objectId);
+              const target = objectId ? object : space;
+              if (!target) {
+                return;
+              }
+
+              return [
+                {
+                  id: `${SCRIPT_PLUGIN}/create/${node.id}`,
+                  data: async () => {
+                    await dispatch([
+                      { plugin: SCRIPT_PLUGIN, action: ScriptAction.CREATE },
+                      { action: SpaceAction.ADD_OBJECT, data: { target } },
+                      { action: NavigationAction.OPEN },
+                    ]);
+                  },
+                  properties: {
+                    label: ['create object label', { ns: SCRIPT_PLUGIN }],
+                    icon: (props: IconProps) => <Code {...props} />,
+                    iconSymbol: 'ph--code--regular',
+                    testId: 'scriptPlugin.createObject',
+                  },
+                },
+              ];
+            },
+          });
+        },
+      },
+      stack: {
+        creators: [
+          {
+            id: 'create-stack-section-script',
+            testId: 'scriptPlugin.createSectionSpaceScript',
+            type: ['plugin name', { ns: SCRIPT_PLUGIN }],
+            label: ['create stack section label', { ns: SCRIPT_PLUGIN }],
+            icon: (props: any) => <Code {...props} />,
+            intent: {
+              plugin: SCRIPT_PLUGIN,
+              action: ScriptAction.CREATE,
+            },
+          },
+        ],
+      },
+      surface: {
+        component: ({ data, role }) => {
+          if (role && !['article', 'section'].includes(role)) {
+            return null;
+          }
+
+          if (data.object instanceof ScriptType) {
+            return <ScriptEditor script={data.object} role={role} />;
+          }
+
+          return null;
+        },
+      },
+      intent: {
+        resolver: (intent) => {
+          switch (intent.action) {
+            case ScriptAction.CREATE: {
+              return { data: create(ScriptType, { source: create(TextType, { content: example }) }) };
+            }
+          }
+        },
+      },
+    },
+  };
+};
+
+// TODO(burdon): Import.
+const example = [
+  'export default {',
+  '  async fetch(request, env, ctx) {',
+  "    return new Response('Hello World, from ScriptPlugin!');",
+  '  }',
+  '}',
+  '',
+].join('\n');

package/src/compiler/compiler.test.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+import { Compiler } from './compiler';
+
+describe('Compiler', () => {
+  test('Basic', async () => {
+    const compiler = new Compiler({ platform: 'node', providedModules: [] });
+    const result = await compiler.compile('const x = 100'); // TODO(burdon): Test import.
+    expect(result).to.exist;
+  });
+});

package/src/compiler/compiler.ts

@@ -0,0 +1,210 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type BuildOptions } from 'esbuild';
+import { build, initialize, type BuildResult } from 'esbuild-wasm';
+
+import { subtleCrypto } from '@dxos/crypto';
+import { invariant } from '@dxos/invariant';
+
+export type Import = {
+  moduleUrl: string;
+  defaultImport: boolean;
+  namedImports: string[];
+};
+
+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;
+
+    const createResult = async (result?: Partial<CompilerResult>) => {
+      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({
+        ...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(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],
+    };
+  });
+};

package/src/compiler/index.ts

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

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

@@ -0,0 +1,82 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useEffect, useRef } from 'react';
+
+import { clientServiceBundle } from '@dxos/client-protocol';
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { baseSurface, mx } from '@dxos/react-ui-theme';
+import { createProtoRpcPeer } from '@dxos/rpc';
+import { createIFramePort } from '@dxos/rpc-tunnel';
+
+import { type CompilerResult } from '../../../compiler';
+
+export type FrameContainerProps = {
+  containerUrl: string;
+  result: CompilerResult;
+  debug?: boolean;
+};
+
+/**
+ * IFrame container for the compiled script.
+ */
+export const FrameContainer = ({ containerUrl, result, debug = true }: FrameContainerProps) => {
+  const client = useClient();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useEffect(() => {
+    if (iframeRef.current) {
+      // Connect iframe to client.
+      const rpc = createProtoRpcPeer({
+        exposed: clientServiceBundle,
+        handlers: (client as any)._services.services, // TODO(burdon): Remove cast?
+        port: createIFramePort({
+          channel: 'frame',
+          iframe: iframeRef.current,
+          origin: '*',
+        }),
+      });
+
+      rpc.open().catch((e) => log.catch(e));
+      return () => {
+        rpc.close().catch((e) => log.catch(e));
+      };
+    }
+  }, [iframeRef]);
+
+  // Encodes compiled code via URL.
+  const sourceHash = Buffer.from(result.sourceHash).toString('hex');
+  const src = result.bundle && `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}`;
+
+  return (
+    <>
+      <iframe ref={iframeRef} sandbox='allow-scripts' src={src} style={{ width: '100%', height: '100%' }} />
+
+      {debug && (
+        <div className='relative'>
+          <div
+            className={mx(
+              baseSurface,
+              'flex absolute right-2 bottom-2 w-[400px] h-[200px] ring rounded',
+              'z-[100] overflow-x-hidden overflow-y-auto',
+            )}
+          >
+            <pre className='text-xs whitespace-break-spaces break-all p-2'>
+              {JSON.stringify(
+                {
+                  timestamp: result.timestamp,
+                  sourceHash,
+                  error: result.error,
+                  src,
+                },
+                undefined,
+                2,
+              )}
+            </pre>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/ScriptBlock/FrameContainer/frame.html

@@ -0,0 +1,25 @@
+<html>
+<head>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script type="importmap">
+    __IMPORT_MAP__
+  </script>
+
+  <script type="module">
+    import RefreshRuntime from '/@react-refresh';
+    RefreshRuntime.injectIntoGlobalHook(window);
+    window.$RefreshReg$ = () => {};
+    window.$RefreshSig$ = () => (type) => type;
+    window.__vite_plugin_react_preamble_installed__ = true;
+  </script>
+  <script type="module" src="/@vite/client"></script>
+</head>
+<body>
+  <div id="root"></div>
+
+  <!-- Prevent vite from compiling this. -->
+  <script type="module">
+    eval('import("@frame/main")');
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,51 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { ClientProvider } from '@dxos/react-client';
+
+const init = async (f: () => Promise<Record<string, any>>) =>
+  Object.entries(await f()).reduce<Record<string, any>>((map, [key, module]) => {
+    map[key] = module;
+    return map;
+  }, {});
+
+const main = async () => {
+  const { ClientServicesProxy } = await import('@dxos/react-client');
+  const { createIFramePort } = await import('@dxos/rpc-tunnel');
+
+  // @ts-ignore
+  window.__DXOS_SANDBOX_MODULES__ = await init(async () => ({
+    // prettier-ignore
+    'react': await import('react'),
+    'react-dom/client': await import('react-dom/client'),
+    '@dxos/client': await import('@dxos/client'),
+    '@dxos/react-client': await import('@dxos/react-client'),
+    '@dxos/react-client/echo': await import('@dxos/react-client/echo'),
+    '@dxos/plugin-explorer': await import('@dxos/plugin-explorer'),
+  }));
+
+  // eslint-disable-next-line no-new-func
+  const Component = Function('React', "return React.lazy(() => import('@frame/bundle'))")(React);
+
+  const services = new ClientServicesProxy(
+    createIFramePort({
+      channel: 'frame',
+      origin: '*',
+    }),
+  );
+
+  // TODO(burdon): Error handling.
+  createRoot(document.getElementById('root')!).render(
+    <div className='flex fixed inset-0'>
+      <ClientProvider services={() => services}>
+        <Component />
+      </ClientProvider>
+    </div>,
+  );
+};
+
+void main();

package/src/components/ScriptBlock/FrameContainer/index.ts

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

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

@@ -0,0 +1,64 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useEffect, useMemo } from 'react';
+
+import { createSpaceObjectGenerator, TestSchemaType } from '@dxos/echo-generator';
+import { TextType } from '@dxos/plugin-markdown/types';
+import { useClient } from '@dxos/react-client';
+import { create, createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/storybook-utils';
+
+// @ts-ignore
+import mainUrl from './FrameContainer/frame?url';
+import { ScriptBlock } from './ScriptBlock';
+import { ScriptType } from '../../types';
+
+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('example.com/type/contact'));",
+  '  return <Chart items={objects} accessor={object => ({ x: object.lat, y: object.lng })} />',
+  '}',
+].join('\n');
+
+const Story = () => {
+  const client = useClient();
+  // TODO(dmaretskyi): Review what's the right way to create automerge-backed objects.
+  const object = useMemo(
+    () => createEchoObject(create(ScriptType, { source: create(TextType, { content: code }) })),
+    [code],
+  );
+  const accessor = useMemo(() => createDocAccessor(object, ['content']), [object]);
+  useEffect(() => {
+    const generator = createSpaceObjectGenerator(client.spaces.default);
+    generator.addSchemas();
+    void generator.createObjects({ [TestSchemaType.organization]: 20, [TestSchemaType.contact]: 50 }).catch();
+  }, []);
+
+  // 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 (
+    <div className={'flex fixed inset-0'}>{accessor && <ScriptBlock script={object} containerUrl={mainUrl} />}</div>
+  );
+};
+
+export default {
+  title: 'plugin-script/ScriptBlock',
+  component: ScriptBlock,
+  render: () => <ClientRepeater component={Story} createSpace />,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};