@dxos/plugin-script 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -4,103 +4,107 @@
 
 import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
-import { defaultHighlightStyle } from '@codemirror/language';
+import { HighlightStyle } from '@codemirror/language';
 import { lintKeymap } from '@codemirror/lint';
 import { Prec } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { keymap } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
 import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
-import React from 'react';
+import React, { memo } from 'react';
 
 import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
 import {
+  type BasicExtensionsOptions,
   type EditorInputMode,
   InputModeExtensions,
-  type UseTextEditorProps,
   createBasicExtensions,
   createThemeExtensions,
-  folding,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+  defaultStyles,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = ThemedClassName<
   {
     id: string;
+    role?: string;
     inputMode?: EditorInputMode;
     toolbar?: boolean;
     env?: VirtualTypeScriptEnvironment;
+    options?: BasicExtensionsOptions;
   } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>
 >;
 
-export const TypescriptEditor = ({
-  classNames,
-  id,
-  inputMode = 'vscode',
-  toolbar,
-  env,
-  initialValue,
-  extensions,
-  scrollTo,
-  selection,
-}: TypescriptEditorProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef, focusAttributes } = useTextEditor(
-    () => ({
-      id,
-      initialValue,
-      selection,
-      scrollTo,
-      extensions: [
-        extensions,
-        createBasicExtensions({
-          highlightActiveLine: true,
-          indentWithTab: true,
-          lineNumbers: true,
-          lineWrapping: false,
-          monospace: true,
-          scrollPastEnd: true,
-          search: true,
-        }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        InputModeExtensions[inputMode],
-        folding(),
-        // Continues block comments when pressing Enter.
-        Prec.high(keymap.of(continueKeymap)),
+export const TypescriptEditor = memo(
+  ({
+    classNames,
+    id,
+    role = 'article',
+    inputMode = 'vscode',
+    env,
+    options,
+    initialValue,
+    extensions,
+    scrollTo,
+    selection,
+  }: TypescriptEditorProps) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes } = useTextEditor(
+      () => ({
+        id,
+        initialValue,
+        selection,
+        scrollTo,
+        extensions: [
+          extensions,
+          createBasicExtensions({
+            highlightActiveLine: true,
+            indentWithTab: true,
+            lineNumbers: true,
+            lineWrapping: false,
+            scrollPastEnd: role !== 'section',
+            search: true,
+            ...options,
+          }),
+          createThemeExtensions({
+            monospace: true,
+            themeMode,
+            syntaxHighlighting: true,
+          }),
 
-        // TODO(burdon): Factor out.
-        javascript({ typescript: true }),
-        // https://github.com/val-town/codemirror-ts
-        keymap.of(completionKeymap),
-        autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
-        keymap.of(lintKeymap),
-        env && [
-          tsFacet.of({ env, path: `/src/${id}.ts` }),
-          tsSync(),
-          tsLinter(),
-          tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
-        ],
-      ].filter(isNonNullable),
-    }),
-    [id, extensions, themeMode, inputMode, selection, scrollTo],
-  );
+          InputModeExtensions[inputMode],
+          javascript({ typescript: true }),
+          autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
 
-  return (
-    <div
-      ref={parentRef}
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      className={mx(classNames)}
-      {...focusAttributes}
-    />
-  );
-};
+          // Continues block comments when pressing Enter.
+          Prec.high(keymap.of(continueKeymap)),
+          keymap.of(completionKeymap),
+          keymap.of(lintKeymap),
+
+          // https://github.com/val-town/codemirror-ts
+          env && [
+            // TODO(burdon): Fix type.
+            tsFacet.of({ env: env as any, path: `./src/${id}.ts` }),
+            tsSync(),
+            tsLinter(),
+            tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
+          ],
+        ].filter(isNonNullable),
+      }),
+      [themeMode, id, extensions, inputMode, selection, scrollTo, env],
+    );
+
+    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+  },
+);
 
+// TODO(burdon): Factor out (react-ui-editor).
 const createTooltipRenderer = (themeMode: ThemeMode) => {
-  const theme = themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle;
+  const theme = HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light);
 
   const classFromKind = (_kind: string) => {
     // E.g., localName, methodName, parameterName, etc.
@@ -119,18 +123,15 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
   };
 
   return (info: HoverInfo) => {
-    const div = document.createElement('div');
-    div.className = 'p-1 rounded border border-separator bg-baseSurface xs:max-w-80 max-w-lg';
-
-    if (info.quickInfo?.displayParts) {
-      for (const part of info.quickInfo.displayParts) {
-        const span = div.appendChild(document.createElement('span'));
-        span.className = classFromKind(part.kind);
-        span.innerText = part.text;
-      }
-    }
-
-    return { dom: div };
+    const children =
+      info.quickInfo?.displayParts?.map(({ kind, text }) =>
+        Domino.of('span').classNames(classFromKind(kind)).text(text),
+      ) ?? [];
+    return {
+      dom: Domino.of('div')
+        .classNames('xs:max-is-80 max-is-lg p-1 bg-baseSurface rounded border border-separator')
+        .children(...children).root,
+    };
   };
 };
 

package/src/components/index.ts

@@ -4,9 +4,12 @@
 
 import { lazy } from 'react';
 
+export * from './NotebookStack';
 export * from './Settings';
 export * from './TestPanel';
+
 export { DEPLOYMENT_DIALOG } from './DeploymentDialog';
 
 export const ScriptContainer = lazy(() => import('./ScriptContainer'));
 export const DeploymentDialog = lazy(() => import('./DeploymentDialog'));
+export const NotebookContainer = lazy(() => import('./NotebookContainer'));

package/src/e2e/ai.test.ts

@@ -0,0 +1,92 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe } from '@effect/vitest';
+import { test } from 'vitest';
+
+import { Client } from '@dxos/client';
+import { type Space } from '@dxos/client-protocol';
+import { configPreset } from '@dxos/config';
+import { Function } from '@dxos/functions';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { bundleFunction } from '@dxos/functions-runtime/native';
+import { FunctionRuntimeKind } from '@dxos/protocols';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+
+// To heavy to run in CI.
+describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e')).skip('Function', () => {
+  const config = configPreset({ edge: 'local' });
+
+  test('bundle anthropic function', { timeout: 120_000 }, async () => {
+    await bundleFunction({
+      entryPoint: new URL('../templates/anthropic.ts', import.meta.url).pathname,
+      verbose: true,
+    });
+  });
+
+  test('deploy empty function', { timeout: 120_000 }, async () => {
+    const { space, functionsServiceClient } = await setup();
+
+    await sync(space);
+    const func = await deployFunction(
+      space,
+      functionsServiceClient,
+      new URL('../templates/ping.ts', import.meta.url).pathname,
+    );
+    console.log(func);
+    throw new Error('test');
+  });
+
+  test('deploy and invoke anthropic function', { timeout: 120_000 }, async () => {
+    const { space, functionsServiceClient } = await setup();
+    await sync(space);
+    const func = await deployFunction(
+      space,
+      functionsServiceClient,
+      new URL('../templates/anthropic.ts', import.meta.url).pathname,
+    );
+
+    const result = await functionsServiceClient.invoke(func, {
+      message: 'Hello, world!',
+    });
+    console.log(result);
+  });
+
+  const setup = async () => {
+    const client = await new Client({ config, types: [Function.Function] }).initialize();
+    await client.halo.createIdentity();
+
+    const space = await client.spaces.create();
+    await space.waitUntilReady();
+    await space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED);
+
+    const functionsServiceClient = FunctionsServiceClient.fromClient(client);
+    return { client, space, functionsServiceClient };
+  };
+
+  const sync = async (space: Space) => {
+    await space.db.flush({ indexes: true });
+    await space.internal.syncToEdge({
+      onProgress: (state) =>
+        console.log(state ? `${state.unsyncedDocumentCount} documents syncing...` : 'connecting to edge...'),
+    });
+  };
+
+  const deployFunction = async (space: Space, functionsServiceClient: FunctionsServiceClient, entryPoint: string) => {
+    const artifact = await bundleFunction({
+      entryPoint,
+      verbose: true,
+    });
+    const func = await functionsServiceClient.deploy({
+      version: '0.0.1',
+      ownerPublicKey: space.key,
+      entryPoint: artifact.entryPoint,
+      assets: artifact.assets,
+      runtime: FunctionRuntimeKind.enums.WORKER_LOADER,
+    });
+
+    space.db.add(func);
+    return func;
+  };
+});

package/src/e2e/deploy.test.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { readFile } from 'node:fs/promises';
+
+import { describe, expect, test } from 'vitest';
+
+import { Client, type Config } from '@dxos/client';
+import { createEdgeIdentity } from '@dxos/client/edge';
+import { configPreset } from '@dxos/config';
+import { bundleFunction } from '@dxos/functions-runtime/bundler';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+
+describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e'))('Functions deployment', () => {
+  test('deploys FOREX (effect) function and invokes it via EDGE (main)', { timeout: 120_000 }, async () => {
+    const config = configPreset({ edge: 'main' });
+    await testDeploy(config);
+  });
+
+  test('deploys FOREX (effect) function and invokes it via EDGE (production)', { timeout: 120_000 }, async () => {
+    const config = configPreset({ edge: 'production' });
+    await testDeploy(config);
+  });
+
+  const testDeploy = async (config: Config) => {
+    await using client = await new Client({ config }).initialize();
+    await client.halo.createIdentity();
+
+    const space = await client.spaces.create();
+    await space.waitUntilReady();
+
+    // Inline echo function source.
+    const source = await readFile(new URL('../templates/forex-effect.ts', import.meta.url), 'utf-8');
+
+    // Bundle and upload.
+    const buildResult = await bundleFunction({ source });
+    if ('error' in buildResult) {
+      throw buildResult.error ?? new Error('Bundle creation failed');
+    }
+    const functionsServiceClient = FunctionsServiceClient.fromClient(client);
+
+    const func = await functionsServiceClient.deploy({
+      ownerPublicKey: space.key,
+      version: '0.0.1',
+      entryPoint: buildResult.entryPoint,
+      assets: buildResult.assets,
+    });
+
+    // Invoke deployed function via EDGE directly.
+    const edgeClient = client.edge;
+    invariant(edgeClient, 'edgeClient is required');
+    edgeClient.setIdentity(createEdgeIdentity(client));
+
+    const input = { from: 'USD', to: 'EUR' };
+    const result = await functionsServiceClient.invoke(func, input);
+    log.info('>>> result', { result, func });
+    const resultNumber = Number(result);
+    expect(resultNumber).toBeGreaterThan(0);
+    expect(resultNumber).toBeLessThan(100);
+  };
+});

package/src/hooks/deploy.ts

@@ -4,15 +4,16 @@
 
 import { useEffect, useMemo } from 'react';
 
-import { FunctionType, type ScriptType, getUserFunctionIdInMetadata } from '@dxos/functions';
+import { Obj, Query, Ref } from '@dxos/echo';
+import { Function, type Script, getUserFunctionIdInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { type Client, useClient } from '@dxos/react-client';
-import { Query, Ref, type Space, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { type Space, getSpace, useQuery } from '@dxos/react-client/echo';
 import { type TFunction } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
-import { errorMessageColors } from '@dxos/react-ui-theme';
+import { errorMessageColors } from '@dxos/ui-theme';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
@@ -24,10 +25,12 @@ export type DeployState = {
   error: string;
 };
 
+import { type ScriptToolbarStateStore } from './useToolbarState';
+
 export type CreateDeployOptions = {
-  state: Partial<DeployState>;
-  script: ScriptType;
-  fn: FunctionType;
+  state: ScriptToolbarStateStore;
+  script: Script.Script;
+  fn: Function.Function;
   space?: Space;
   existingFunctionId?: string;
   client: Client;
@@ -35,12 +38,14 @@ export type CreateDeployOptions = {
 };
 
 export const createDeploy = ({ state, script, space, fn, client, existingFunctionId, t }: CreateDeployOptions) => {
+  const { value } = state;
+
   // TODO(wittjosiah): Should this be an action?
   const errorItem = createMenuAction('error', () => {}, {
-    label: state.error ?? ['no error label', { ns: SCRIPT_PLUGIN }],
+    label: value.error ?? ['no error label', { ns: meta.id }],
     icon: 'ph--warning-circle--regular',
-    hidden: !state.error,
-    classNames: state.error && errorMessageColors,
+    hidden: !value.error,
+    classNames: value.error && errorMessageColors,
   });
 
   const deployAction = createMenuAction<DeployActionProperties>(
@@ -50,40 +55,39 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
         return;
       }
 
-      state.error = undefined;
-      state.deploying = true;
+      state.set('error', undefined);
+      state.set('deploying', true);
 
       const result = await deployScript({ script, client, space, fn, existingFunctionId });
 
       if (!result.success) {
         log.catch(result.error);
-        state.error = t('upload failed label');
+        state.set('error', t('upload failed label'));
       }
 
-      state.deploying = false;
+      state.set('deploying', false);
     },
     {
       type: 'deploy',
-      label: [state.deploying ? 'pending label' : 'deploy label', { ns: SCRIPT_PLUGIN }],
-      icon: state.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
-      disabled: state.deploying,
-      classNames: state.deploying ? '[&_svg]:animate-spin' : '',
+      label: [value.deploying ? 'publishing label' : 'deploy label', { ns: meta.id }],
+      icon: value.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
+      disabled: value.deploying,
+      classNames: value.deploying ? '[&_svg]:animate-spin' : '',
     },
   );
 
   const copyAction = createMenuAction<DeployActionProperties>(
     'copy',
     async () => {
-      if (!state.functionUrl) {
-        return;
+      if (value.functionUrl) {
+        await navigator.clipboard.writeText(value.functionUrl);
       }
-      await navigator.clipboard.writeText(state.functionUrl);
     },
     {
       type: 'copy',
-      label: ['copy link label', { ns: SCRIPT_PLUGIN }],
+      label: ['copy link label', { ns: meta.id }],
       icon: 'ph--link--regular',
-      disabled: !state.functionUrl,
+      disabled: !value.functionUrl,
     },
   );
 
@@ -97,29 +101,32 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
   };
 };
 
-export const useDeployState = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+export const useDeployState = ({ state, script }: { state: ScriptToolbarStateStore; script: Script.Script }) => {
   const { space, client, fn, existingFunctionId } = useDeployDeps({ script });
   useEffect(() => {
     if (!existingFunctionId) {
       return;
     }
 
-    state.functionUrl = getFunctionUrl({
-      script,
-      fn,
-      edgeUrl: client.config.values.runtime?.services?.edge?.url ?? '',
-    });
-  }, [existingFunctionId, space, fn, script, client.config.values.runtime?.services?.edge?.url]);
+    state.set(
+      'functionUrl',
+      getFunctionUrl({
+        script,
+        fn,
+        edgeUrl: client.config.values.runtime?.services?.edge?.url ?? '',
+      }),
+    );
+  }, [existingFunctionId, space, fn, script, client.config.values.runtime?.services?.edge?.url, state]);
 
   useEffect(() => {
-    state.deployed = isScriptDeployed({ script, fn });
-  }, [script.changed, existingFunctionId, fn, script]);
+    state.set('deployed', isScriptDeployed({ script, fn }));
+  }, [script.changed, existingFunctionId, fn, script, state]);
 };
 
-export const useDeployDeps = ({ script }: { script: ScriptType }) => {
-  const space = getSpace(script);
-  const [fn] = useQuery(space, Query.type(FunctionType, { source: Ref.make(script) }));
+export const useDeployDeps = ({ script }: { script: Script.Script }) => {
   const client = useClient();
-  const existingFunctionId = useMemo(() => fn && getUserFunctionIdInMetadata(getMeta(fn)), [fn]);
-  return { space, fn, client, existingFunctionId };
+  const space = getSpace(script);
+  const [fn] = useQuery(space?.db, Query.type(Function.Function, { source: Ref.make(script) }));
+  const existingFunctionId = useMemo(() => fn && getUserFunctionIdInMetadata(Obj.getMeta(fn)), [fn]);
+  return { client, space, fn, existingFunctionId };
 };

package/src/hooks/format.ts

@@ -6,15 +6,16 @@ import { format } from 'prettier';
 import prettierPluginEstree from 'prettier/plugins/estree';
 import prettierPluginTypescript from 'prettier/plugins/typescript';
 
-import { type ScriptType } from '@dxos/functions';
+import { Obj } from '@dxos/echo';
+import { type Script } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { createMenuAction } from '@dxos/react-ui-menu';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type FormatActionProperties = { type: 'format' };
 
-export const createFormat = (script: ScriptType) => {
+export const createFormat = (script: Script.Script) => {
   const formatAction = createMenuAction(
     'format',
     async () => {
@@ -23,19 +24,22 @@ export const createFormat = (script: ScriptType) => {
       }
 
       try {
-        script.source.target!.content = await format(script.source.target!.content, {
+        const formatted = await format(script.source.target!.content, {
           parser: 'typescript',
           plugins: [prettierPluginEstree, prettierPluginTypescript],
           semi: true,
           singleQuote: true,
         });
+        Obj.change(script.source.target!, (s) => {
+          s.content = formatted;
+        });
       } catch (err: any) {
         // TODO(wittjosiah): Show error in UI.
         log.catch(err);
       }
     },
     {
-      label: ['format label', { ns: SCRIPT_PLUGIN }],
+      label: ['format label', { ns: meta.id }],
       icon: 'ph--magic-wand--regular',
     },
   );

package/src/hooks/index.ts

@@ -8,3 +8,4 @@ export * from './template';
 
 export * from './useCreateAndDeployScriptTemplates';
 export * from './useToolbarState';
+export * from './useCompiler';

package/src/hooks/template.ts

@@ -3,35 +3,33 @@
 //
 
 import { Obj } from '@dxos/echo';
-import { FUNCTIONS_PRESET_META_KEY, type ScriptType } from '@dxos/functions';
-import { createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { FUNCTIONS_PRESET_META_KEY, type Script } from '@dxos/functions';
+import { createMenuAction } from '@dxos/react-ui-menu';
 
-import { SCRIPT_PLUGIN } from '../meta';
 import { templates } from '../templates';
 
 export type TemplateActionProperties = { type: 'template'; value: string };
 
-const createTemplateSelectGroup = () => {
-  return createMenuItemGroup('template-select', {
-    label: ['template select group label', { ns: SCRIPT_PLUGIN }],
-    variant: 'dropdownMenu',
-  });
-};
-
-const createTemplateSelectActions = (script: ScriptType) => {
+const createTemplateSelectActions = (script: Script.Script) => {
   return templates.map((template) => {
     return createMenuAction<TemplateActionProperties>(
       `template--${template.id}`,
       () => {
-        script.name = template.name;
-        script.source!.target!.content = template.source;
-        const metaKeys = Obj.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 });
+        Obj.change(script, (s) => {
+          s.name = template.name;
+          const meta = Obj.getMeta(s);
+          const oldPresetIndex = meta.keys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
+          if (oldPresetIndex >= 0) {
+            meta.keys.splice(oldPresetIndex, 1);
+          }
+          if ('presetId' in template) {
+            meta.keys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
+          }
+        });
+        if (script.source?.target) {
+          Obj.change(script.source.target, (s) => {
+            s.content = template.source;
+          });
         }
       },
       {
@@ -43,11 +41,10 @@ const createTemplateSelectActions = (script: ScriptType) => {
   });
 };
 
-export const createTemplateSelect = (script: ScriptType) => {
-  const templateSelectGroup = createTemplateSelectGroup();
+export const createTemplateSelect = (script: Script.Script) => {
   const templateSelectActions = createTemplateSelectActions(script);
   return {
-    nodes: [templateSelectGroup, ...templateSelectActions],
+    nodes: [...templateSelectActions],
     edges: [
       { source: 'root', target: 'template-select' },
       ...templateSelectActions.map((action) => ({ source: 'template-select', target: action.id })),