@dxos/plugin-script 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -3,27 +3,37 @@
 //
 
 import { javascript } from '@codemirror/lang-javascript';
+import { defaultHighlightStyle } from '@codemirror/language';
+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 { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover } from '@valtown/codemirror-ts';
+import { continueKeymap } from '@valtown/codemirror-continue';
+import { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover, type HoverInfo } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { useThemeContext } from '@dxos/react-ui';
+import { type ThemeMode, useThemeContext } from '@dxos/react-ui';
 import {
   autocomplete,
   createBasicExtensions,
   createThemeExtensions,
   editorFullWidth,
-  editorGutter,
+  type EditorInputMode,
   editorMonospace,
+  EditorView,
+  folding,
   InputModeExtensions,
   useTextEditor,
   type UseTextEditorProps,
 } from '@dxos/react-ui-editor';
-import { nonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = {
   id: string;
+  inputMode?: EditorInputMode;
   env?: VirtualTypeScriptEnvironment;
+  toolbar?: boolean;
 } & Pick<UseTextEditorProps, 'className' | 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>;
 
 export const TypescriptEditor = ({
@@ -34,6 +44,8 @@ export const TypescriptEditor = ({
   extensions,
   scrollTo,
   selection,
+  toolbar,
+  inputMode = 'vscode',
 }: TypescriptEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef, focusAttributes } = useTextEditor(
@@ -56,24 +68,77 @@ export const TypescriptEditor = ({
             content: { className: editorFullWidth },
           },
         }),
-        editorGutter,
+        // NOTE: Not using default editor gutter because folding for code works best right beside text.
+        EditorView.theme({
+          '.cm-gutters': {
+            // Match margin from content.
+            marginTop: '16px',
+          },
+        }),
+        InputModeExtensions[inputMode],
+        folding(),
+        // Continues block comments when you hit Enter.
+        Prec.high(keymap.of(continueKeymap)),
         // TODO(burdon): Factor out.
         [
           editorMonospace,
           javascript({ typescript: true }),
           // https://github.com/val-town/codemirror-ts
           autocomplete({ override: env ? [tsAutocomplete()] : [] }),
-          env ? [tsFacet.of({ env, path: `/src/${id}.ts` }), tsSync(), tsLinter(), tsHover()] : [],
-          InputModeExtensions.vscode,
+          env
+            ? [
+                tsFacet.of({ env, path: `/src/${id}.ts` }),
+                tsSync(),
+                tsLinter(),
+                tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
+              ]
+            : [],
         ],
-      ].filter(nonNullable),
+      ].filter(isNonNullable),
       selection,
       scrollTo,
     }),
-    [id, extensions, themeMode, selection, scrollTo],
+    [id, extensions, themeMode, inputMode, selection, scrollTo],
+  );
+
+  return (
+    <div ref={parentRef} data-toolbar={toolbar ? 'enabled' : 'disabled'} className={className} {...focusAttributes} />
   );
+};
+
+const createTooltipRenderer = (themeMode: ThemeMode) => {
+  const theme = themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle;
+
+  const classFromKind = (_kind: string) => {
+    // E.g., localName, methodName, parameterName, etc.
+    const kind = _kind.endsWith('Name') ? 'name' : _kind;
+    const validTag = kind in tags;
+    if (!validTag) {
+      return '';
+    }
+
+    const tag = tags[kind as keyof typeof tags];
+    if (typeof tag === 'function') {
+      return '';
+    }
+
+    return theme.style([tag]) ?? '';
+  };
+
+  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 <div ref={parentRef} className={className} {...focusAttributes} />;
+    return { dom: div };
+  };
 };
 
 export default TypescriptEditor;

package/src/events.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineEvent } from '@dxos/app-framework';
+
+import { SCRIPT_PLUGIN } from './meta';
+
+export namespace ScriptEvents {
+  export const SetupCompiler = defineEvent(`${SCRIPT_PLUGIN}/event/setup-compiler`);
+}

package/src/hooks/deploy.ts

@@ -0,0 +1,169 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo } from 'react';
+
+import {
+  FunctionType,
+  type ScriptType,
+  getInvocationUrl,
+  getUserFunctionUrlInMetadata,
+  incrementSemverPatch,
+  setUserFunctionUrlInMetadata,
+  uploadWorkerFunction,
+} from '@dxos/functions';
+import { Bundler } from '@dxos/functions/bundler';
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { Filter, create, getMeta, getSpace, makeRef, useQuery } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { createMenuAction } from '@dxos/react-ui-menu';
+
+import { type ViewState } from './view';
+import { SCRIPT_PLUGIN } from '../meta';
+
+export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
+
+export type DeployState = ViewState & {
+  deploying: boolean;
+  deployed: boolean;
+  functionUrl: string;
+  error: string;
+};
+
+export const createDeploy = (state: Partial<DeployState>) => {
+  const errorItem = createMenuAction('error', {
+    label: state.error ?? ['no error label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--warning-circle--regular',
+    hidden: !state.error,
+  });
+
+  const deployAction = createMenuAction<DeployActionProperties>('deploy', {
+    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' : '',
+  });
+
+  const copyAction = createMenuAction<DeployActionProperties>('copy', {
+    type: 'copy',
+    label: ['copy link label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--link--regular',
+    disabled: !state.functionUrl,
+  });
+
+  return {
+    nodes: [errorItem, deployAction, copyAction],
+    edges: [
+      { source: 'root', target: 'error' },
+      { source: 'root', target: 'deploy' },
+      { source: 'root', target: 'copy' },
+    ],
+  };
+};
+
+const useDeployDeps = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+  const space = getSpace(script);
+  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
+  const client = useClient();
+  const existingFunctionUrl = useMemo(() => fn && getUserFunctionUrlInMetadata(getMeta(fn)), [fn]);
+  return { space, fn, client, existingFunctionUrl };
+};
+
+export const useDeployState = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+  const { space, client, existingFunctionUrl } = useDeployDeps({ state, script });
+  useEffect(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+
+    state.functionUrl = getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: space?.id,
+    });
+  }, [existingFunctionUrl, space]);
+
+  useEffect(() => {
+    state.deployed = Boolean(existingFunctionUrl) && !script.changed;
+  }, [script.changed, existingFunctionUrl]);
+};
+
+export const useDeployHandler = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+  const { space, fn, client, existingFunctionUrl } = useDeployDeps({ state, script });
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+
+  return useCallback(async () => {
+    if (!script.source || !space) {
+      return;
+    }
+
+    state.error = undefined;
+    state.deploying = true;
+
+    try {
+      const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
+
+      const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
+      const buildResult = await bundler.bundle({ source: script.source.target!.content });
+      if (buildResult.error || !buildResult.bundle) {
+        throw buildResult.error;
+      }
+
+      const { functionId, version, meta } = await uploadWorkerFunction({
+        client,
+        spaceId: space.id,
+        version: fn ? incrementSemverPatch(fn.version) : '0.0.1',
+        functionId: existingFunctionId,
+        source: buildResult.bundle,
+      });
+      if (functionId === undefined || version === undefined) {
+        throw new Error(`Upload didn't return expected data: functionId=${functionId}, version=${version}`);
+      }
+
+      log.info('function uploaded', { functionId, version });
+      if (fn) {
+        fn.version = version;
+      }
+
+      const deployedFunction =
+        fn ?? space.db.add(create(FunctionType, { name: functionId, version, source: makeRef(script) }));
+
+      script.changed = false;
+      if (script.description !== undefined && script.description.trim() !== '') {
+        deployedFunction.description = script.description;
+      } else if (meta.description) {
+        deployedFunction.description = meta.description;
+      } else {
+        log.verbose('no description in function metadata', { functionId });
+      }
+
+      if (meta.inputSchema) {
+        deployedFunction.inputSchema = meta.inputSchema;
+      } else {
+        log.verbose('no input schema in function metadata', { functionId });
+      }
+      if (meta.outputSchema) {
+        deployedFunction.outputSchema = meta.outputSchema;
+      } else {
+        log.verbose('no output schema in function metadata', { functionId });
+      }
+
+      setUserFunctionUrlInMetadata(getMeta(deployedFunction), `/${space.id}/${functionId}`);
+
+      state.view = 'split';
+    } catch (err: any) {
+      log.catch(err);
+      state.error = t('upload failed label');
+    }
+    state.deploying = false;
+  }, [fn, client, t, existingFunctionUrl, script, script.name, script.source, space?.id ?? null]);
+};
+
+export const useCopyHandler = ({ state }: { state: Partial<DeployState> }) =>
+  useCallback(async () => {
+    if (!state.functionUrl) {
+      return;
+    }
+    await navigator.clipboard.writeText(state.functionUrl);
+  }, [state.functionUrl]);

package/src/hooks/format.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { format } from 'prettier';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import prettierPluginTypescript from 'prettier/plugins/typescript';
+import { useCallback } from 'react';
+
+import { type ScriptType } from '@dxos/functions';
+import { log } from '@dxos/log';
+import { createMenuAction } from '@dxos/react-ui-menu';
+
+import { SCRIPT_PLUGIN } from '../meta';
+
+export type FormatActionProperties = { type: 'format' };
+
+export const createFormat = () => {
+  const formatAction = createMenuAction('format', {
+    label: ['format label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--magic-wand--regular',
+  });
+
+  return {
+    nodes: [formatAction],
+    edges: [{ source: 'root', target: 'format' }],
+  };
+};
+
+export const useFormatHandler = ({ script }: { script: ScriptType }) =>
+  useCallback(async () => {
+    if (!script.source) {
+      return;
+    }
+
+    try {
+      script.source.target!.content = await format(script.source.target!.content, {
+        parser: 'typescript',
+        plugins: [prettierPluginEstree, prettierPluginTypescript],
+        semi: true,
+        singleQuote: true,
+      });
+    } catch (err: any) {
+      // TODO(wittjosiah): Show error in UI.
+      log.catch(err);
+    }
+  }, [script.source]);

package/src/hooks/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './deploy';
+export * from './format';
+export * from './template';
+export * from './view';
+
+export * from './useToolbarAction';
+export * from './useToolbarState';

package/src/hooks/template.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { FUNCTIONS_PRESET_META_KEY, type ScriptType } from '@dxos/functions';
+import { getMeta } from '@dxos/live-object';
+import { createMenuItemGroup, 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 = () => {
+  return templates.map((template) => {
+    return createMenuAction<TemplateActionProperties>(`template--${template.id}`, {
+      label: template.name,
+      value: template.id,
+      type: 'template',
+    });
+  });
+};
+
+export const createTemplateSelect = () => {
+  const templateSelectGroup = createTemplateSelectGroup();
+  const templateSelectActions = createTemplateSelectActions();
+  return {
+    nodes: [templateSelectGroup, ...templateSelectActions],
+    edges: [
+      { source: 'root', target: 'template-select' },
+      ...templateSelectActions.map((action) => ({ source: 'template-select', target: action.id })),
+    ],
+  };
+};
+
+export const useTemplateSelectHandler = ({ script }: { script: ScriptType }) => {
+  return useCallback(
+    (templateId: string) => {
+      const template = templates.find((template) => template.id === templateId);
+      if (template) {
+        script.name = template.name;
+        script.source!.target!.content = template.source;
+        const metaKeys = 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 });
+        }
+      }
+    },
+    [script],
+  );
+};

package/src/hooks/useToolbarAction.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { type ScriptType } from '@dxos/functions';
+import { log } from '@dxos/log';
+import { type MenuAction, type MenuActionHandler } from '@dxos/react-ui-menu';
+
+import { type DeployActionProperties, useDeployHandler, useCopyHandler } from './deploy';
+import { type FormatActionProperties, useFormatHandler } from './format';
+import { type TemplateActionProperties, useTemplateSelectHandler } from './template';
+import { type ScriptToolbarState } from './useToolbarState';
+import { type ViewActionProperties } from './view';
+
+export type ScriptToolbarActionProperties =
+  | TemplateActionProperties
+  | ViewActionProperties
+  | FormatActionProperties
+  | DeployActionProperties;
+
+export type ScriptToolbarAction = MenuAction<ScriptToolbarActionProperties>;
+
+export const useToolbarAction = (props: { state: ScriptToolbarState; script: ScriptType }) => {
+  const handleTemplateSelect = useTemplateSelectHandler(props);
+  const handleFormat = useFormatHandler(props);
+  const handleDeploy = useDeployHandler(props);
+  const handleCopy = useCopyHandler(props);
+  return useCallback(
+    ((action: ScriptToolbarAction) => {
+      switch (action.properties.type) {
+        case 'template':
+          handleTemplateSelect(action.properties.value);
+          break;
+        case 'view':
+          props.state.view = action.properties.value;
+          break;
+        case 'format':
+          void handleFormat();
+          break;
+        case 'deploy':
+          void handleDeploy();
+          break;
+        case 'copy':
+          void handleCopy();
+          break;
+        default:
+          log.error('Unknown action type', action);
+      }
+    }) as MenuActionHandler,
+    [handleTemplateSelect, handleFormat, handleDeploy, handleCopy],
+  );
+};

package/src/hooks/useToolbarState.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { create } from '@dxos/live-object';
+
+import { type DeployState } from './deploy';
+import { type ViewState } from './view';
+
+export type ScriptToolbarState = Partial<DeployState & ViewState>;
+
+export const useToolbarState = (initialState: ScriptToolbarState = {}) => {
+  return useMemo(() => create<ScriptToolbarState>(initialState), []);
+};

package/src/hooks/view.ts

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+
+import { SCRIPT_PLUGIN } from '../meta';
+
+export type ViewType = 'editor' | 'split' | 'debug';
+
+export type ViewState = { view: ViewType };
+
+export type ViewActionProperties = { type: 'view'; value: ViewType };
+
+const views: Record<ViewType, string> = {
+  editor: 'ph--code--regular',
+  split: 'ph--square-split-vertical--regular',
+  debug: 'ph--bug--regular',
+};
+
+const createViewGroupItem = (state: Partial<ViewState>) => {
+  return createMenuItemGroup('view', {
+    label: ['view group label', { ns: SCRIPT_PLUGIN }],
+    variant: 'dropdownMenu',
+    applyActive: true,
+    value: state.view,
+  });
+};
+
+const createViewActions = (state: Partial<ViewState>) => {
+  return Object.entries(views).map(([viewType, icon]) => {
+    return createMenuAction<ViewActionProperties>(`view--${viewType}`, {
+      type: 'view',
+      value: viewType as ViewType,
+      label: [`view ${viewType} label`, { ns: SCRIPT_PLUGIN }],
+      icon,
+      checked: state.view === viewType,
+    });
+  });
+};
+
+export const createView = (state: Partial<ViewState>) => {
+  const viewGroupItem = createViewGroupItem(state);
+  const viewActions = createViewActions(state);
+  return {
+    nodes: [viewGroupItem, ...viewActions],
+    edges: [
+      { source: 'root', target: 'view' },
+      ...viewActions.map((action) => ({ source: 'view', target: action.id })),
+    ],
+  };
+};

package/src/index.ts

@@ -2,13 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ScriptPlugin } from './ScriptPlugin';
-
-export default ScriptPlugin;
-
-export * from './bundler';
-export * from './compiler';
+export { ScriptCapabilities } from './capabilities';
 export * from './components';
-export * from './types';
+export * from './meta';
 
 export * from './ScriptPlugin';

package/src/meta.ts

@@ -6,11 +6,13 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
 
-export default {
+export const meta = {
   id: SCRIPT_PLUGIN,
   name: 'Scripts',
-  description: 'Distributed functions.',
+  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.',
   icon: 'ph--code--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-explorer',
   tags: ['experimental'],
+  screenshots: ['https://dxos.network/plugin-details-scripts-dark.png'],
 } satisfies PluginMeta;

package/src/templates/chat.ts

@@ -57,11 +57,11 @@ export default async ({
   let prompt = promptObject.template;
   for (const input of promptObject.inputs) {
     let value: string | null = null;
-    if (input.type === ChainInputType.VALUE) {
+    if (input.type === TemplateInputType.VALUE) {
       value = String(input.value);
-    } else if (input.type === ChainInputType.RETRIEVER) {
+    } else if (input.type === TemplateInputType.RETRIEVER) {
       value = await getContext({ space });
-    } else if (input.type === ChainInputType.PASS_THROUGH) {
+    } else if (input.type === TemplateInputType.PASS_THROUGH) {
       value = message.text;
     }
     if (value) {
@@ -90,7 +90,7 @@ const getContext = async ({ space }: any) => {
   return context;
 };
 
-enum ChainInputType {
+enum TemplateInputType {
   VALUE = 0,
   PASS_THROUGH = 1,
   RETRIEVER = 2,