@dxos/plugin-script 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/src/hooks/deploy.ts

@@ -0,0 +1,158 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo } from 'react';
+
+import {
+  FunctionType,
+  getInvocationUrl,
+  getUserFunctionUrlInMetadata,
+  incrementSemverPatch,
+  type ScriptType,
+  setUserFunctionUrlInMetadata,
+  uploadWorkerFunction,
+} from '@dxos/functions';
+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 { Bundler } from '../bundler';
+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(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;
+      deployedFunction.description = script.description;
+
+      if (meta.inputSchema) {
+        deployedFunction.inputSchema = meta.inputSchema;
+      } else {
+        log.verbose('no input 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,9 @@
 // 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/echo.ts

@@ -11,5 +11,9 @@ export default async ({
   },
 }: any) => {
   const data = await request.json();
-  return new Response(JSON.stringify(data ?? {}), { headers: { 'Content-Type': 'application/json' } });
+  return new Response(JSON.stringify(data ?? {}), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
 };

package/src/templates/email.ts

@@ -3,7 +3,8 @@
 //
 
 /**
- * Stores a message into ECHO Mailbox object.
+ * Appends a message to the end of a Document configured through a trigger.
+ * Trigger must have a targetDocumentId field set in Meta.
  */
 export default async ({
   event: {
@@ -11,28 +12,30 @@ export default async ({
   },
   context: { space },
 }: any) => {
-  const {
-    data: {
-      objects: [message],
-    },
-  } = await request.json();
+  const { data, trigger } = (await request.json()) as RequestPayload;
 
-  const mailbox = await space.crud.query({ __typename: 'dxos.org/type/MailboxType' }).first();
-  if (!mailbox) {
-    return new Response('Mailbox not found.', { status: 500 });
-  }
+  const documentId = trigger.meta.targetDocumentId;
+  const document = await space.db.query({ id: documentId }, { format: 'plain' }).first();
 
-  await space.crud.push(
-    { id: mailbox.id },
-    {
-      sender: { email: message.from },
-      timestamp: new Date(message.created).toISOString(),
-      text: message.body,
-      properties: {
-        subject: message.subject,
-        to: [{ email: message.to }],
-      },
-    },
-  );
-  return new Response(JSON.stringify(message));
+  const contentId = document.content['/'].split(':')[3];
+  const documentContent = await space.db.query({ id: contentId }, { format: 'plain' }).first();
+  const modifiedContent = [
+    documentContent.content,
+    '',
+    '---',
+    `**From:** ${data.from}`,
+    `**Subject:** ${data.subject}`,
+    `**Date:** ${data.created}`,
+    '',
+    data.body,
+  ].join('\n');
+
+  await space.db.update({ id: contentId }, { content: modifiedContent });
+
+  return new Response(JSON.stringify({ success: true }));
+};
+
+type RequestPayload = {
+  data: { from: string; subject: string; created: string; body: string };
+  trigger: { meta: { targetDocumentId: string } };
 };

package/src/templates/forex-effect.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @ts-ignore
+import { defineFunction, S } from 'dxos:functions';
+import {
+  HttpClient,
+  HttpClientRequest,
+  HttpClientResponse,
+  HttpClientError,
+  // @ts-ignore
+} from 'https://esm.sh/@effect/platform@0.61.0?deps=effect@3.6.0';
+// @ts-ignore
+import type { Cause } from 'https://esm.sh/effect@3.6.0';
+// @ts-ignore
+import { Effect, Schedule } from 'https://esm.sh/effect@3.6.0';
+
+/**
+ * Returns the exchange rate between two currencies.
+ */
+export default defineFunction({
+  inputSchema: S.Struct({
+    from: S.String.annotations({ description: 'The source currency' }),
+    to: S.String.annotations({ description: 'The target currency' }),
+  }),
+
+  outputSchema: S.String,
+
+  handler: async ({
+    event: {
+      data: { from, to },
+    },
+  }: any) =>
+    HttpClientRequest.get(`https://free.ratesdb.com/v1/rates?from=${from}&to=${to}`).pipe(
+      HttpClient.fetchOk,
+      HttpClientResponse.json,
+      Effect.timeout('1 second'),
+      Effect.retry(Schedule.exponential(1000).pipe(Schedule.compose(Schedule.recurs(3)))),
+      Effect.map(({ data: { rates } }: any) => rates[to].toString()),
+    ),
+});

package/src/templates/forex.ts

@@ -1,21 +1,29 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
+// @ts-ignore
+import { defineFunction, S } from 'dxos:functions';
+
 /**
  * Returns the exchange rate between two currencies.
  */
-export default async ({
-  event: {
-    data: { request },
-  },
-}: any) => {
-  const { args: [from = 'EUR', to = 'USD'] = [] } = await request.json();
+export default defineFunction({
+  inputSchema: S.Struct({
+    from: S.String.annotations({ description: 'The source currency' }),
+    to: S.String.annotations({ description: 'The target currency' }),
+  }),
 
-  const res = await fetch(`https://free.ratesdb.com/v1/rates?from=${from}&to=${to}`);
-  const {
-    data: { rates },
-  } = await res.json();
+  handler: async ({
+    event: {
+      data: { from, to },
+    },
+  }: any) => {
+    const res = await fetch(`https://free.ratesdb.com/v1/rates?from=${from}&to=${to}`);
+    const {
+      data: { rates },
+    } = await res.json();
 
-  return new Response(rates[to].toString());
-};
+    return rates[to].toString();
+  },
+});

package/src/{templates.ts → templates/index.ts}

@@ -3,15 +3,17 @@
 //
 
 // @ts-ignore
-import chat from './templates/chat.ts?raw';
+import chat from './chat.ts?raw';
 // @ts-ignore
-import chess from './templates/chess.ts?raw';
+import chess from './chess.ts?raw';
 // @ts-ignore
-import echo from './templates/echo.ts?raw';
+import echo from './echo.ts?raw';
 // @ts-ignore
-import email from './templates/email.ts?raw';
+import email from './email.ts?raw';
 // @ts-ignore
-import forex from './templates/forex.ts?raw';
+import forex from './forex.ts?raw';
+// @ts-ignore
+import forexEffect from './forex-effect.ts?raw';
 
 const removeHeader = (str: string) => str.split('\n').slice(4).join('\n');
 
@@ -33,6 +35,11 @@ export const templates: Template[] = [
     name: 'Forex',
     source: removeHeader(forex),
   },
+  {
+    id: 'dxos.org/script/forex-effect',
+    name: 'Forex (Effect)',
+    source: removeHeader(forexEffect),
+  },
   {
     id: 'dxos.org/script/gpt',
     name: 'Gpt',

package/src/translations.ts

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
+import { ScriptType } from '@dxos/functions';
+
 import { SCRIPT_PLUGIN } from './meta';
-import { ScriptType } from './types';
 
 export default [
   {
@@ -16,6 +17,8 @@ export default [
         'object title placeholder': 'New script',
         'create object label': 'Create script',
         'create stack section label': 'Create script',
+        'description label': 'Description',
+        'description placeholder': 'Describe what the script does.',
         'binding placeholder': 'Function name',
         'function request placeholder': 'Function request',
         'deploy label': 'Deploy',
@@ -31,6 +34,22 @@ export default [
         'function url label': 'Invocation URL',
         'function binding label': 'Function binding',
         'function binding placeholder': 'BINDING',
+        'script publish settings label': 'Publishing',
+        'script publish settings description': 'Scripts can be shared publicly as Github gists.',
+        'no github token label': 'This space has no Github access token available.',
+        'open token manager label': 'Open Token Manager',
+        'publish label': 'Publish',
+        'publishing label': 'Publishing',
+        'editor input mode label': 'Editor input mode',
+        'select editor input mode placeholder': 'Select editor input mode…',
+        'settings editor input mode default label': 'Default',
+        'settings editor input mode vim label': 'Vim',
+        'settings editor input mode vscode label': 'VS Code',
+        'view group label': 'View',
+        'view editor label': 'Editor',
+        'view split label': 'Split',
+        'view debug label': 'Debug',
+        'template select group label': 'Select template',
       },
     },
   },