@dxos/plugin-script 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe

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,13 @@
 // 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 { chain, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 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 +41,15 @@ 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);
+  });
+});

package/src/notebook/compute-graph.ts

@@ -0,0 +1,206 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Signal, signal } from '@preact/signals-core';
+
+import { log } from '@dxos/log';
+
+import { type Notebook } from '../types';
+
+import { evalScript } from './eval';
+import { type ParsedExpression, VirtualTypeScriptParser } from './vfs-parser';
+
+/**
+ * Compute graph that evaluates the notebook cells.
+ */
+// TODO(burdon): Reconcile with @dxos/conductor.
+export class ComputeGraph {
+  private readonly _parser = new VirtualTypeScriptParser();
+
+  private _expressions = signal<Record<string, ParsedExpression>>({});
+  private _valuesByCellId = signal<Record<string, any>>({});
+  private _valuesByName = signal<Record<string, any>>({});
+
+  constructor(private readonly _notebook: Notebook.Notebook) {}
+
+  /**
+   * Parsed expressions by cell ID.
+   */
+  get expressions(): Signal<Record<string, ParsedExpression>> {
+    return this._expressions;
+  }
+
+  /**
+   * Computed values by cell ID.
+   */
+  get values(): Signal<Record<string, any>> {
+    return this._valuesByCellId;
+  }
+
+  /**
+   * Computed values by name.
+   */
+  get valuesByName(): Signal<Record<string, any>> {
+    return this._valuesByName;
+  }
+
+  /**
+   * Get computed value by cell ID.
+   */
+  getValue(cellId: string) {
+    return this._valuesByCellId.value[cellId];
+  }
+
+  /**
+   * Compute values.
+   */
+  async evaluate() {
+    // Parse expressions.
+    const { expressions, dependencyGraph } = this.parse();
+    this._valuesByCellId.value = {};
+    this._valuesByName.value = {};
+
+    // Create a map of cell IDs to expressions for easy lookup.
+    const cellExpressions = new Map<string, ParsedExpression>();
+    Object.entries(expressions).forEach(([id, expr]) => {
+      cellExpressions.set(id, expr);
+    });
+
+    // Topological sort to determine evaluation order.
+    const evaluationOrder = this.topologicalSort(Object.keys(expressions), dependencyGraph);
+
+    // Values by reference name.
+    const valuesByName: Record<string, any> = {};
+    const valuesByCellId: Record<string, any> = {};
+
+    // Evaluate cells in dependency order.
+    for (const cellId of evaluationOrder) {
+      const expr = cellExpressions.get(cellId);
+      if (!expr) {
+        log.error('no expression for cell', { cellId });
+        continue;
+      }
+
+      const cellSource = this._notebook.cells.find((cell) => cell.id === cellId)?.source?.target?.content;
+      if (!cellSource) {
+        log.error('no source for cell', { cellId });
+        continue;
+      }
+
+      try {
+        // For assignments or declarations, evaluate and store the value.
+        if (expr.name && expr.value !== undefined) {
+          // If the parser extracted a literal value, use it directly.
+          valuesByName[expr.name] = expr.value;
+          valuesByCellId[cellId] = expr.value;
+        } else if (expr.name) {
+          // For non-literal assignments, we need to evaluate the expression.
+          // The parser identifies it's an assignment, so we can extract the RHS.
+          const equalIndex = cellSource.indexOf('=');
+          if (equalIndex !== -1) {
+            // Find the actual assignment operator (not in strings or other contexts).
+            let rhs = cellSource.substring(equalIndex + 1).trim();
+
+            // Handle semicolon at the end.
+            if (rhs.endsWith(';')) {
+              rhs = rhs.slice(0, -1).trim();
+            }
+
+            const result = await this.eval(rhs, valuesByName);
+            valuesByName[expr.name] = result;
+            if (typeof result !== 'function') {
+              valuesByCellId[cellId] = result;
+            }
+          }
+        } else {
+          // For expressions without assignment, just evaluate.
+          const result = await this.eval(cellSource, valuesByName);
+          valuesByCellId[cellId] = result;
+        }
+      } catch (error) {
+        // TODO(burdon): Set error state.
+        log.error('error evaluating cell', { cellId, error });
+      }
+    }
+
+    this._valuesByCellId.value = valuesByCellId;
+    this._valuesByName.value = valuesByName;
+    return valuesByCellId;
+  }
+
+  private async eval(source: string, values: Record<string, any>) {
+    return evalScript(source, values);
+  }
+
+  /**
+   * Parse expressions.
+   */
+  parse() {
+    const expressions = this._notebook.cells
+      .filter((cell) => cell.type === 'script')
+      .reduce<Record<string, ParsedExpression>>((acc, cell) => {
+        const text = cell.source?.target?.content.trim();
+        if (text) {
+          const parsed = this._parser.parseExpression(text);
+          acc[cell.id] = parsed;
+        }
+
+        return acc;
+      }, {});
+
+    // Build dependency graph.
+    const dependencyGraph = this.buildDependencyGraph(expressions);
+    this._expressions.value = expressions;
+    return { expressions, dependencyGraph };
+  }
+
+  private topologicalSort(nodes: string[], dependencies: Record<string, string[]>): string[] {
+    const visited = new Set<string>();
+    const result: string[] = [];
+
+    const visit = (node: string) => {
+      if (visited.has(node)) {
+        return;
+      }
+
+      visited.add(node);
+
+      // Visit dependencies first.
+      const deps = dependencies[node] || [];
+      deps.forEach((dep) => visit(dep));
+      result.push(node);
+    };
+
+    // Visit all nodes.
+    nodes.forEach((node) => visit(node));
+    return result;
+  }
+
+  private buildDependencyGraph(expressions: Record<string, ParsedExpression>): Record<string, string[]> {
+    // Create a map of variable names to their cell IDs.
+    const nameToCellId = new Map<string, string>();
+    Object.entries(expressions).forEach(([id, expr]) => {
+      if (expr.name) {
+        nameToCellId.set(expr.name, id);
+      }
+    });
+
+    // Build the dependency graph using cell IDs.
+    const graph: Record<string, string[]> = {};
+    Object.entries(expressions).forEach(([id, expr]) => {
+      if (expr.references && expr.references.length > 0) {
+        // Map variable references to cell IDs.
+        const dependencyCellIds = expr.references
+          .map((ref) => nameToCellId.get(ref))
+          .filter((cellId): cellId is string => cellId !== undefined && cellId !== id);
+
+        if (dependencyCellIds.length > 0) {
+          graph[id] = dependencyCellIds;
+        }
+      }
+    });
+
+    return graph;
+  }
+}

package/src/notebook/eval.ts

@@ -0,0 +1,105 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { trim } from '@dxos/util';
+
+/**
+ * Evaluate the script (with dependencies as arguments).
+ */
+export const evalScript = async (code: string, deps: Record<string, any> = {}) => {
+  // Create a sandboxed environment that blocks access to window and document.
+  const sandbox = {
+    ...deps,
+
+    // Block access to global objects.
+    console: undefined,
+    document: undefined,
+    global: undefined,
+    globalThis: undefined,
+    self: undefined,
+    window: undefined,
+
+    // Allow some safe globals.
+    Array,
+    Boolean,
+    Date,
+    Error,
+    JSON,
+    Map,
+    Math,
+    Number,
+    Object,
+    Promise,
+    RegExp,
+    Set,
+    String,
+
+    // Functions.
+    isFinite,
+    isNaN,
+    parseFloat,
+    parseInt,
+
+    // Note: undefined and null are not included as they are keywords, not variables.
+  };
+
+  // Create function with all sandbox keys as parameters.
+  const sandboxKeys = Object.keys(sandbox);
+  const sandboxValues = Object.values(sandbox);
+
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  const fn = new Function(
+    ...sandboxKeys,
+    trim`
+      'use strict';
+      return ${code};
+    `,
+  );
+
+  return fn(...sandboxValues);
+};
+
+/**
+ * Globals.
+ */
+export const builtIns = new Set([
+  // Types.
+  'Array',
+  'Date',
+  'Error',
+  'JSON',
+  'Map',
+  'Math',
+  'Number',
+  'Object',
+  'Promise',
+  'RegExp',
+  'Set',
+  'String',
+
+  // Functions.
+  'isFinite',
+  'isNaN',
+  'parseFloat',
+  'parseInt',
+]);
+
+/**
+ * Default system definitions.
+ */
+export const systemDefinitions = trim`
+  interface Array<T> { length: number; [n: number]: T; }
+  interface Boolean {}
+  interface Function {}
+  interface IArguments {}
+  interface Number {}
+  interface Object {}
+  interface RegExp {}
+  interface String { length: number; }
+
+  interface CallableFunction extends Function {}
+  interface NewableFunction extends Function {}
+
+  declare var console: { log(...args: any[]): void };
+`;

package/src/notebook/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './compute-graph';