@dxos/plugin-script 0.8.4-main.28f8d3d → 0.8.4-main.406dc2a

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,
@@ -63,20 +67,22 @@ export const TypescriptEditor = ({
           lineNumbers: true,
           lineWrapping: false,
           monospace: true,
-          scrollPastEnd: true,
+          scrollPastEnd: role !== 'section',
           search: true,
+          ...options,
         }),
         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,6 +94,7 @@ export const TypescriptEditor = ({
     [id, extensions, themeMode, inputMode, selection, scrollTo],
   );
 
+  // TODO(brudon): Use react-ui-editor's Editor component.
   return (
     <div
       ref={parentRef}
@@ -98,8 +105,9 @@ export const TypescriptEditor = ({
   );
 };
 
+// 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 +126,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, getUserFunctionUrlInMetadata } from '@dxos/functions';
+import { FunctionType, type ScriptType, 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' };
@@ -29,15 +29,15 @@ export type CreateDeployOptions = {
   script: ScriptType;
   fn: FunctionType;
   space?: Space;
-  existingFunctionUrl?: string;
+  existingFunctionId?: string;
   client: Client;
   t: TFunction;
 };
 
-export const createDeploy = ({ state, script, space, fn, client, existingFunctionUrl, t }: 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,
@@ -53,7 +53,7 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
       state.error = undefined;
       state.deploying = true;
 
-      const result = await deployScript({ script, client, space, fn, existingFunctionUrl });
+      const result = await deployScript({ script, client, space, fn, existingFunctionId });
 
       if (!result.success) {
         log.catch(result.error);
@@ -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,
     },
@@ -98,9 +97,9 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
 };
 
 export const useDeployState = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
-  const { space, client, fn, existingFunctionUrl } = useDeployDeps({ script });
+  const { space, client, fn, existingFunctionId } = useDeployDeps({ script });
   useEffect(() => {
-    if (!existingFunctionUrl) {
+    if (!existingFunctionId) {
       return;
     }
 
@@ -109,17 +108,17 @@ export const useDeployState = ({ state, script }: { state: Partial<DeployState>;
       fn,
       edgeUrl: client.config.values.runtime?.services?.edge?.url ?? '',
     });
-  }, [existingFunctionUrl, space, fn, script, client.config.values.runtime?.services?.edge?.url]);
+  }, [existingFunctionId, space, fn, script, client.config.values.runtime?.services?.edge?.url]);
 
   useEffect(() => {
     state.deployed = isScriptDeployed({ script, fn });
-  }, [script.changed, existingFunctionUrl, fn, script]);
+  }, [script.changed, existingFunctionId, fn, script]);
 };
 
 export const useDeployDeps = ({ script }: { script: ScriptType }) => {
+  const client = useClient();
   const space = getSpace(script);
   const [fn] = useQuery(space, Query.type(FunctionType, { source: Ref.make(script) }));
-  const client = useClient();
-  const existingFunctionUrl = useMemo(() => fn && getUserFunctionUrlInMetadata(getMeta(fn)), [fn]);
-  return { space, fn, client, existingFunctionUrl };
+  const existingFunctionId = useMemo(() => fn && getUserFunctionIdInMetadata(getMeta(fn)), [fn]);
+  return { client, space, fn, existingFunctionId };
 };

package/src/hooks/format.ts

@@ -10,7 +10,7 @@ import { type ScriptType } 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' };
 
@@ -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

@@ -6,14 +6,15 @@ import { Obj } from '@dxos/echo';
 import { FUNCTIONS_PRESET_META_KEY, type ScriptType } from '@dxos/functions';
 import { createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { templates } from '../templates';
 
 export type TemplateActionProperties = { type: 'template'; value: string };
 
 const createTemplateSelectGroup = () => {
+  // TODO(burdon): This should not be in the toolbar (move to create Object dialog).
   return createMenuItemGroup('template-select', {
-    label: ['template select group label', { ns: SCRIPT_PLUGIN }],
+    label: ['template select group label', { ns: meta.id }],
     variant: 'dropdownMenu',
   });
 };
@@ -30,7 +31,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 });
         }
       },

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -2,7 +2,7 @@
 // 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';
@@ -40,8 +40,8 @@ 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 }),
           ),
         );

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

@@ -4,13 +4,11 @@
 
 import { type PluginMeta } from '@dxos/app-framework';
 
-export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
-
 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.',
+    'Scripts enable 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.',
   icon: 'ph--code--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',
   tags: ['labs'],

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 = (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 './notebook';

package/src/notebook/notebook.test.ts

@@ -0,0 +1,70 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { createNotebook } from '../testing';
+
+import { ComputeGraph } from './notebook';
+
+describe('notebook', () => {
+  test('parse dependency graph', () => {
+    const notebook = createNotebook();
+    const computer = new ComputeGraph(notebook);
+    const result = computer.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 = computer.evaluate();
+    expect(values).toEqual({
+      [getId(0)]: 300,
+      [getId(2)]: 200,
+      [getId(3)]: 200,
+      [getId(4)]: 500,
+    });
+  });
+
+  test('evalScript blocks access to window and document', () => {
+    const notebook = createNotebook();
+    // Replace one of the cells with code that tries to access window/document.
+    if (notebook.cells[2].script?.target) {
+      notebook.cells[2].script.target.content = 'b = typeof window';
+    }
+
+    const computer = new ComputeGraph(notebook);
+    computer.parse();
+    const values = computer.evaluate();
+
+    // Should evaluate to 'undefined' since window is blocked.
+    expect(values[notebook.cells[2].id]).toBe('undefined');
+
+    // Test document access.
+    if (notebook.cells[2].script?.target) {
+      notebook.cells[2].script.target.content = 'b = typeof document';
+    }
+    computer.parse();
+    const values2 = computer.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].script?.target) {
+      notebook.cells[2].script.target.content = 'b = Math.max(100, 200)';
+    }
+    computer.parse();
+    const values3 = computer.evaluate();
+
+    // Should evaluate correctly.
+    expect(values3[notebook.cells[2].id]).toBe(200);
+  });
+});