@dxos/plugin-script 0.8.4-main.5ea62a8 → 0.8.4-main.ae835ea

package/src/components/TypescriptEditor/TypescriptEditor.stories.tsx

@@ -2,36 +2,91 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { createObject } from '@dxos/react-client/echo';
+import { Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { createDataExtensions } from '@dxos/react-ui-editor';
-import { withTheme } from '@dxos/storybook-utils';
+import { StackItem } from '@dxos/react-ui-stack';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { trim } from '@dxos/util';
+
+import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+
+const SCRIPT = trim`
+  x * 2
+`;
+
+const DefaultStory = (props: TypescriptEditorProps) => {
+  const object = useMemo(() => createObject({ content: SCRIPT }), []);
+  const [result, setResult] = useState<object | undefined>({});
 
-import { templates } from '../../templates';
+  // TODO(burdon): Make this work.
+  // const object = useMemo(() => DataType.makeText(templates[1].source), []);
+  // const script = useMemo(
+  //   () =>
+  //     Obj.make(ScriptType, {
+  //       source: Ref.make(createObject({ content: templates[0].source })),
+  //     }),
+  //   [object],
+  // );
 
-import { TypescriptEditor } from './TypescriptEditor';
+  const extensions = useMemo(
+    () => [createDataExtensions({ id: object.id, text: createDocAccessor(object, ['content']) })],
+    [],
+  );
 
-const DefaultStory = () => {
-  const object = useMemo(() => createObject({ content: templates[0].source }), []);
-  const initialValue = useMemo(() => object.content, [object]);
-  const accessor = useMemo(() => createDocAccessor(object, ['content']), [object]);
-  const extensions = useMemo(() => [createDataExtensions({ id: object.id, text: accessor })], [object.id, accessor]);
-  return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} />;
+  const handleRun = useCallback(async () => {
+    try {
+      const definitions: [string, any][] = [['x', 100]];
+
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const result = new Function(...definitions.map(([name]) => name), `return ${object.content.trim()}`)(
+        ...definitions.map(([, value]) => value),
+      );
+
+      setResult({
+        timestamp: Date.now(),
+        result,
+      });
+    } catch (err) {
+      setResult({
+        timestamp: Date.now(),
+        error: String(err),
+      });
+    }
+  }, [object]);
+
+  return (
+    <StackItem.Content toolbar>
+      {/* <ScriptToolbar script={script} state={{}} /> */}
+      <Toolbar.Root>
+        <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
+      </Toolbar.Root>
+      <div role='none' className='grid grid-rows-[1fr_min-content] bs-full overflow-hidden text-sm'>
+        <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
+        <Json data={result} classNames='shrink-0 p-2 border-t border-subduedSeparator' />
+      </div>
+    </StackItem.Content>
+  );
 };
 
 const meta = {
   title: 'plugins/plugin-script/TypescriptEditor',
-  component: TypescriptEditor as any,
+  component: TypescriptEditor,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'is-prose' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    id: 'test',
+  },
+};

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -2,11 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+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';
@@ -14,15 +14,15 @@ import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { Domino, type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import {
+  type BasicExtensionsOptions,
   type EditorInputMode,
   InputModeExtensions,
   type UseTextEditorProps,
-  autocomplete,
   createBasicExtensions,
   createThemeExtensions,
-  folding,
+  defaultStyles,
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
@@ -31,18 +31,22 @@ 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,
+  role = 'article',
   inputMode = 'vscode',
   toolbar,
   env,
+  options,
   initialValue,
   extensions,
   scrollTo,
@@ -62,21 +66,26 @@ export const TypescriptEditor = ({
           indentWithTab: true,
           lineNumbers: true,
           lineWrapping: false,
-          monospace: true,
-          scrollPastEnd: true,
+          scrollPastEnd: role !== 'section',
           search: true,
+          ...options,
+        }),
+        createThemeExtensions({
+          monospace: true,
+          themeMode,
+          syntaxHighlighting: true,
         }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         InputModeExtensions[inputMode],
-        folding(),
+
+        javascript({ typescript: true }),
+        autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
+
         // Continues block comments when pressing Enter.
         Prec.high(keymap.of(continueKeymap)),
+        keymap.of(completionKeymap),
+        keymap.of(lintKeymap),
 
-        // TODO(burdon): Factor out.
-        javascript({ typescript: true }),
         // https://github.com/val-town/codemirror-ts
-        autocomplete({ override: env ? [tsAutocomplete()] : undefined }),
-        keymap.of(lintKeymap),
         env && [
           tsFacet.of({ env, path: `/src/${id}.ts` }),
           tsSync(),
@@ -88,18 +97,13 @@ export const TypescriptEditor = ({
     [id, extensions, themeMode, inputMode, selection, scrollTo],
   );
 
-  return (
-    <div
-      ref={parentRef}
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      className={mx(classNames)}
-      {...focusAttributes}
-    />
-  );
+  // TODO(brudon): Use react-ui-editor's Editor component.
+  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.
@@ -118,18 +122,16 @@ 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 };
+    return {
+      dom: Domino.of('div')
+        .classNames('xs:max-is-80 max-is-lg p-1 bg-baseSurface rounded border border-separator')
+        .children(
+          ...(info.quickInfo?.displayParts?.map(({ kind, text }) =>
+            Domino.of('span').classNames(classFromKind(kind)).text(text),
+          ) ?? []),
+        )
+        .build(),
+    };
   };
 };
 

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/events.ts

@@ -4,8 +4,8 @@
 
 import { defineEvent } from '@dxos/app-framework';
 
-import { SCRIPT_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace ScriptEvents {
-  export const SetupCompiler = defineEvent(`${SCRIPT_PLUGIN}/event/setup-compiler`);
+  export const SetupCompiler = defineEvent(`${meta.id}/event/setup-compiler`);
 }

package/src/hooks/deploy.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useMemo } from 'react';
 
-import { FunctionType, type ScriptType, getUserFunctionIdInMetadata } from '@dxos/functions';
+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';
@@ -12,7 +12,7 @@ import { type TFunction } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
 import { errorMessageColors } from '@dxos/react-ui-theme';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
@@ -26,8 +26,8 @@ export type DeployState = {
 
 export type CreateDeployOptions = {
   state: Partial<DeployState>;
-  script: ScriptType;
-  fn: FunctionType;
+  script: Script.Script;
+  fn: Function.Function;
   space?: Space;
   existingFunctionId?: string;
   client: Client;
@@ -37,7 +37,7 @@ export type CreateDeployOptions = {
 export const createDeploy = ({ state, script, space, fn, client, existingFunctionId, t }: CreateDeployOptions) => {
   // TODO(wittjosiah): Should this be an action?
   const errorItem = createMenuAction('error', () => {}, {
-    label: state.error ?? ['no error label', { ns: SCRIPT_PLUGIN }],
+    label: state.error ?? ['no error label', { ns: meta.id }],
     icon: 'ph--warning-circle--regular',
     hidden: !state.error,
     classNames: state.error && errorMessageColors,
@@ -64,7 +64,7 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
     },
     {
       type: 'deploy',
-      label: [state.deploying ? 'pending label' : 'deploy label', { ns: SCRIPT_PLUGIN }],
+      label: [state.deploying ? 'publishing label' : 'deploy label', { ns: meta.id }],
       icon: state.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
       disabled: state.deploying,
       classNames: state.deploying ? '[&_svg]:animate-spin' : '',
@@ -74,14 +74,13 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
   const copyAction = createMenuAction<DeployActionProperties>(
     'copy',
     async () => {
-      if (!state.functionUrl) {
-        return;
+      if (state.functionUrl) {
+        await navigator.clipboard.writeText(state.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,
     },
@@ -97,7 +96,7 @@ 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: Partial<DeployState>; script: Script.Script }) => {
   const { space, client, fn, existingFunctionId } = useDeployDeps({ script });
   useEffect(() => {
     if (!existingFunctionId) {
@@ -116,10 +115,10 @@ export const useDeployState = ({ state, script }: { state: Partial<DeployState>;
   }, [script.changed, existingFunctionId, fn, script]);
 };
 
-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 space = getSpace(script);
+  const [fn] = useQuery(space, Query.type(Function.Function, { source: Ref.make(script) }));
   const existingFunctionId = useMemo(() => fn && getUserFunctionIdInMetadata(getMeta(fn)), [fn]);
-  return { space, fn, client, existingFunctionId };
+  return { client, space, fn, existingFunctionId };
 };

package/src/hooks/format.ts

@@ -6,15 +6,15 @@ import { format } from 'prettier';
 import prettierPluginEstree from 'prettier/plugins/estree';
 import prettierPluginTypescript from 'prettier/plugins/typescript';
 
-import { type ScriptType } from '@dxos/functions';
+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 () => {
@@ -35,7 +35,7 @@ export const createFormat = (script: ScriptType) => {
       }
     },
     {
-      label: ['format label', { ns: SCRIPT_PLUGIN }],
+      label: ['format label', { ns: meta.id }],
       icon: 'ph--magic-wand--regular',
     },
   );

package/src/hooks/template.ts

@@ -3,22 +3,14 @@
 //
 
 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}`,
@@ -30,7 +22,7 @@ const createTemplateSelectActions = (script: ScriptType) => {
         if (oldPresetIndex >= 0) {
           metaKeys.splice(oldPresetIndex, 1);
         }
-        if (template.presetId) {
+        if ('presetId' in template) {
           metaKeys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
         }
       },
@@ -43,11 +35,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 })),

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect/Function';
+import * as Function from 'effect/Function';
 import { useCallback, useState } from 'react';
 
 import { chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
-import { ScriptType } from '@dxos/functions';
+import { Script } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { useClient } from '@dxos/react-client';
@@ -40,12 +40,12 @@ export const useCreateAndDeployScriptTemplates = (space: Space | undefined, scri
     const deploymentResults = await Promise.all(
       scriptTemplates.map(async (template) => {
         const result = await dispatch(
-          pipe(
-            createIntent(ScriptAction.Create, { space, initialTemplateId: template.id }),
+          Function.pipe(
+            createIntent(ScriptAction.CreateScript, { space, initialTemplateId: template.id as any }),
             chain(SpaceAction.AddObject, { target: space }),
           ),
         );
-        invariant(Obj.instanceOf(ScriptType, result.data?.object));
+        invariant(Obj.instanceOf(Script.Script, result.data?.object));
 
         return deployScript({ space, client, script: result.data.object });
       }),

package/src/index.ts

@@ -5,5 +5,6 @@
 export { ScriptCapabilities } from './capabilities';
 export * from './components';
 export * from './meta';
+export * from './util';
 
 export * from './ScriptPlugin';

package/src/meta.ts

@@ -3,15 +3,17 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
-
-export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
-  id: SCRIPT_PLUGIN,
+  id: 'dxos.org/plugin/script',
   name: 'Scripts',
-  description:
-    'Scripts in Composer allow you to deploy custom functions that run on the edge. These functions can be referenced by your AI agent and called inside of cells in any Sheet. Use scripts to interact with API’s or external data inside of Composer.',
+  description: trim`
+    Write and deploy custom JavaScript functions that extend your workspace capabilities.
+    Create AI agent tools, spreadsheet formulas, and automation scripts that integrate seamlessly with other plugins.
+  `,
   icon: 'ph--code--regular',
+  iconHue: 'sky',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',
   tags: ['labs'],
   screenshots: ['https://dxos.network/plugin-details-scripts-dark.png'],

package/src/notebook/compute-graph.test.ts

@@ -0,0 +1,70 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { createNotebook } from '../testing';
+
+import { ComputeGraph } from './compute-graph';
+
+describe('notebook', () => {
+  test('parse dependency graph', async () => {
+    const notebook = createNotebook();
+    const graph = new ComputeGraph(notebook);
+    const result = graph.parse();
+
+    const getId = (i: number) => notebook.cells[i].id;
+
+    // Check dependencies.
+    expect(result.dependencyGraph).toMatchObject({
+      [getId(0)]: [getId(1), getId(2)],
+      [getId(3)]: [getId(1)],
+      [getId(4)]: [getId(0), getId(3)],
+    });
+
+    // Compute values.
+    const values = await graph.evaluate();
+    expect(values).toEqual({
+      [getId(0)]: 300,
+      [getId(2)]: 200,
+      [getId(3)]: 200,
+      [getId(4)]: 500,
+    });
+  });
+
+  test('evalScript blocks access to window and document', async () => {
+    const notebook = createNotebook();
+    // Replace one of the cells with code that tries to access window/document.
+    if (notebook.cells[2].source?.target) {
+      notebook.cells[2].source.target.content = 'b = typeof window';
+    }
+
+    const graph = new ComputeGraph(notebook);
+    graph.parse();
+    const values = await graph.evaluate();
+
+    // Should evaluate to 'undefined' since window is blocked.
+    expect(values[notebook.cells[2].id]).toBe('undefined');
+
+    // Test document access.
+    if (notebook.cells[2].source?.target) {
+      notebook.cells[2].source.target.content = 'b = typeof document';
+    }
+    graph.parse();
+    const values2 = await graph.evaluate();
+
+    // Should evaluate to 'undefined' since document is blocked.
+    expect(values2[notebook.cells[2].id]).toBe('undefined');
+
+    // Test that safe globals still work.
+    if (notebook.cells[2].source?.target) {
+      notebook.cells[2].source.target.content = 'b = Math.max(100, 200)';
+    }
+    graph.parse();
+    const values3 = await graph.evaluate();
+
+    // Should evaluate correctly.
+    expect(values3[notebook.cells[2].id]).toBe(200);
+  });
+});