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

package/src/components/Settings/ScriptPluginSettings.tsx

@@ -8,7 +8,7 @@ import { type Credential } from '@dxos/protocols/proto/dxos/halo/credentials';
 import { useClient } from '@dxos/react-client';
 import { Button, Select, useTranslation } from '@dxos/react-ui';
 import { type EditorInputMode, EditorInputModes } from '@dxos/react-ui-editor';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
 import { meta } from '../../meta';
 import { type ScriptSettingsProps } from '../../types';
@@ -39,33 +39,38 @@ export const ScriptPluginSettings = ({ settings }: { settings: ScriptSettingsPro
   };
 
   return (
-    <DeprecatedFormContainer>
-      {/* TODO(wittjosiah): Hide outside of dev environments. */}
-      <DeprecatedFormInput label={t('authenticate action label')}>
-        <Button onClick={handleAuthenticate}>{t('authenticate button label')}</Button>
-      </DeprecatedFormInput>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          {/* TODO(wittjosiah): Hide outside of dev environments. */}
+          <ControlItemInput title={t('authenticate action label')}>
+            <Button onClick={handleAuthenticate}>{t('authenticate button label')}</Button>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('editor input mode label')}>
-        <Select.Root
-          value={settings.editorInputMode ?? 'default'}
-          onValueChange={(value) => {
-            settings.editorInputMode = value as EditorInputMode;
-          }}
-        >
-          <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorInputModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`settings editor input mode ${mode} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+          <ControlItemInput title={t('editor input mode label')}>
+            <Select.Root
+              value={settings.editorInputMode ?? 'default'}
+              onValueChange={(value) => {
+                settings.editorInputMode = value as EditorInputMode;
+              }}
+            >
+              <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {EditorInputModes.map((mode) => (
+                      <Select.Option key={mode} value={mode}>
+                        {t(`settings editor input mode ${mode} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/TestPanel/TestContainer.tsx

@@ -7,9 +7,10 @@ import React from 'react';
 import { type ScriptType } from '@dxos/functions';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { TestPanel } from './TestPanel';
 import { useDeployState, useToolbarState } from '../../hooks';
 
+import { TestPanel } from './TestPanel';
+
 export type TestContainerProps = {
   role: string;
   script: ScriptType;

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

@@ -4,25 +4,16 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { createDataExtensions } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { TypescriptEditor } from './TypescriptEditor';
 import { templates } from '../../templates';
 
-// TODO(burdon): Features:
-// - language support for S
-// - hierarchical editor (DND)
-// - virtual document image rendering
-// - mobile rendering error
-
-// TODO(burdon): JSX.
-// TODO(burdon): Effect schema.
-// TODO(burdon): react-buddy for storybook?
+import { TypescriptEditor } from './TypescriptEditor';
 
 const DefaultStory = () => {
   const object = useMemo(() => createObject({ content: templates[0].source }), []);
@@ -32,13 +23,15 @@ const DefaultStory = () => {
   return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} />;
 };
 
-export const Default = {};
-
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-script/TypescriptEditor',
-  component: TypescriptEditor,
+  component: TypescriptEditor as any,
   render: DefaultStory,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -11,10 +11,10 @@ import { keymap } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
 import { continueKeymap } from '@valtown/codemirror-continue';
-import { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover, type HoverInfo } from '@valtown/codemirror-ts';
+import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { type ThemedClassName, type ThemeMode, useThemeContext } from '@dxos/react-ui';
+import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import {
   type EditorInputMode,
   InputModeExtensions,
@@ -64,6 +64,7 @@ export const TypescriptEditor = ({
           lineWrapping: false,
           monospace: true,
           scrollPastEnd: true,
+          search: true,
         }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         InputModeExtensions[inputMode],

package/src/hooks/deploy.ts

@@ -4,10 +4,10 @@
 
 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 { getMeta, getSpace, Query, Ref, type Space, useQuery } from '@dxos/react-client/echo';
+import { Query, Ref, type Space, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
 import { type TFunction } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
 import { errorMessageColors } from '@dxos/react-ui-theme';
@@ -29,12 +29,12 @@ 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 }],
@@ -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);
@@ -98,9 +98,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 +109,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 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 { space, fn, client, existingFunctionId };
 };

package/src/hooks/template.ts

@@ -4,7 +4,7 @@
 
 import { Obj } from '@dxos/echo';
 import { FUNCTIONS_PRESET_META_KEY, type ScriptType } from '@dxos/functions';
-import { createMenuItemGroup, createMenuAction } from '@dxos/react-ui-menu';
+import { createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
 
 import { SCRIPT_PLUGIN } from '../meta';
 import { templates } from '../templates';

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -55,5 +55,6 @@ export const useCreateAndDeployScriptTemplates = (space: Space | undefined, scri
     setStatus(hasErrors ? 'error' : 'success');
   }, [space, dispatch, client, scriptTemplates]);
 
+  // TODO(burdon): Return onCreateAndDeployScripts.
   return { handleCreateAndDeployScripts, status, error };
 };

package/src/templates/chess.ts

@@ -3,7 +3,7 @@
 //
 
 // @ts-ignore
-import { defineFunction, S } from 'dxos:functions';
+import { S, defineFunction } from 'dxos:functions';
 // @ts-ignore
 import { Chess } from 'https://esm.sh/chess.js@0.13.1?bundle=false';
 

package/src/templates/data-generator.ts

@@ -3,7 +3,7 @@
 //
 
 // @ts-ignore
-import { defineFunction, S, create, Expando } from 'dxos:functions';
+import { Expando, S, create, defineFunction } from 'dxos:functions';
 // @ts-ignore
 import { randText } from 'https://esm.sh/@ngneat/falso@7.1.1?bundle=false';
 
@@ -12,11 +12,15 @@ export default defineFunction({
     documentAmount: S.optional(S.Number),
     textSize: S.optional(S.Number),
     mutationAmount: S.optional(S.Number),
+    waitAfterCreation: S.optional(S.Number),
   }),
 
   outputSchema: S.Struct({}),
 
-  handler: async ({ data: { documentAmount = 1, textSize = 10, mutationAmount = 0 }, context: { space } }: any) => {
+  handler: async ({
+    data: { documentAmount = 1, textSize = 10, mutationAmount = 0, waitAfterCreation = 10_000 },
+    context: { space },
+  }: any) => {
     await space.db.graph.schemaRegistry.addSchema([Expando]);
     const result: Record<string, any> = {};
     const objects: Expando[] = [];
@@ -42,7 +46,7 @@ export default defineFunction({
 
     // Flush and wait for data to propagate.
     await space.db.flush();
-    await new Promise((resolve) => setTimeout(resolve, 10_000));
+    await new Promise((resolve) => setTimeout(resolve, waitAfterCreation));
     return { createdObjects: objects.length };
   },
 });

package/src/templates/discord.ts

@@ -3,17 +3,17 @@
 //
 
 // @ts-ignore
-import { create, defineFunction, DXN, EchoObject, Filter, ObjectId, S } from 'dxos:functions';
+import { DXN, EchoObject, Filter, ObjectId, S, create, defineFunction } from 'dxos:functions';
 // @ts-ignore
-import { FetchHttpClient } from 'https://esm.sh/@effect/platform@0.77.2?deps=effect@3.14.21&bundle=false';
+import { FetchHttpClient } from 'https://esm.sh/@effect/platform@0.89.0?deps=effect@3.17.0&bundle=false';
 import {
   DiscordConfig,
   DiscordREST,
   DiscordRESTMemoryLive,
   // @ts-ignore
-} from 'https://esm.sh/dfx@0.113.0?deps=effect@3.14.21&bundle=false';
+} from 'https://esm.sh/dfx@0.113.0?deps=effect@3.17.0&bundle=false';
 // @ts-ignore
-import { Effect, Config, Redacted, Ref } from 'https://esm.sh/effect@3.14.21?bundle=false';
+import { Config, Effect, Redacted, Ref } from 'https://esm.sh/effect@3.17.0?bundle=false';
 
 const MessageSchema = S.Struct({
   id: ObjectId,

package/src/templates/forex-effect.ts

@@ -5,13 +5,13 @@
 // @ts-ignore
 import { S, defineFunction } from 'dxos:functions';
 import {
+  FetchHttpClient,
   HttpClient,
   HttpClientRequest,
-  FetchHttpClient,
   // @ts-ignore
-} from 'https://esm.sh/@effect/platform@0.77.2?deps=effect@3.14.21&bundle=false';
+} from 'https://esm.sh/@effect/platform@0.89.0?deps=effect@3.17.0&bundle=false';
 // @ts-ignore
-import { Effect, Schedule } from 'https://esm.sh/effect@3.14.21?bundle=false';
+import { Effect, Schedule } from 'https://esm.sh/effect@3.17.0?bundle=false';
 
 export default defineFunction({
   description: 'Returns the exchange rate between two currencies.',

package/src/templates/forex.ts

@@ -3,7 +3,7 @@
 //
 
 // @ts-ignore
-import { defineFunction, S } from 'dxos:functions';
+import { S, defineFunction } from 'dxos:functions';
 
 export default defineFunction({
   description: 'Returns the exchange rate between two currencies.',

package/src/templates/gmail.ts

@@ -3,18 +3,18 @@
 //
 
 // @ts-ignore
-import { create, defineFunction, EchoObject, Filter, ObjectId, S } from 'dxos:functions';
+import { EchoObject, Filter, ObjectId, S, create, defineFunction } from 'dxos:functions';
 // @ts-ignore
 import {
+  FetchHttpClient,
   HttpClient,
   HttpClientRequest,
-  FetchHttpClient,
   // @ts-ignore
-} from 'https://esm.sh/@effect/platform@0.77.2?deps=effect@3.14.21&bundle=false';
+} from 'https://esm.sh/@effect/platform@0.89.0?deps=effect@3.17.0&bundle=false';
 // @ts-ignore
 import { format, subDays } from 'https://esm.sh/date-fns@3.3.1?bundle=false';
 // @ts-ignore
-import { pipe, Chunk, Effect, Ref, Schedule, Stream } from 'https://esm.sh/effect@3.14.21?bundle=false';
+import { Chunk, Effect, Ref, Schedule, Stream, pipe } from 'https://esm.sh/effect@3.17.0?bundle=false';
 
 export default defineFunction({
   inputSchema: S.Struct({
@@ -98,7 +98,7 @@ export default defineFunction({
             sender,
             blocks: [
               {
-                type: 'text',
+                _tag: 'text',
                 text: Buffer.from(content, 'base64').toString('utf-8'),
               },
             ],
@@ -174,57 +174,16 @@ const ActorSchema = S.Struct({
   role: S.optional(ActorRole),
 });
 
-const AbstractContentBlock = S.Struct({
+const Base = S.Struct({
   pending: S.optional(S.Boolean),
 });
-type AbstractContentBlock = S.Schema.Type<typeof AbstractContentBlock>;
-const TextContentBlock = S.extend(
-  AbstractContentBlock,
-  S.Struct({
-    type: S.Literal('text'),
-    disposition: S.optional(S.String),
-    text: S.String,
-  }),
-).pipe(S.mutable);
-type TextContentBlock = S.Schema.Type<typeof TextContentBlock>;
-const JsonContentBlock = S.extend(
-  AbstractContentBlock,
-  S.Struct({
-    type: S.Literal('json'),
-    disposition: S.optional(S.String),
-    data: S.String,
-  }),
-).pipe(S.mutable);
-type JsonContentBlock = S.Schema.Type<typeof JsonContentBlock>;
-const Base64ImageSource = S.Struct({
-  type: S.Literal('base64'),
-  mediaType: S.String,
-  data: S.String,
+type Base = S.Schema.Type<typeof Base>;
+const Text = S.TaggedStruct('text', {
+  mimeType: S.optional(S.String),
+  text: S.String,
+  ...Base.fields,
 }).pipe(S.mutable);
-const HttpImageSource = S.Struct({
-  type: S.Literal('http'),
-  url: S.String,
-}).pipe(S.mutable);
-const ImageSource = S.Union(Base64ImageSource, HttpImageSource);
-type ImageSource = S.Schema.Type<typeof ImageSource>;
-const ImageContentBlock = S.extend(
-  AbstractContentBlock,
-  S.Struct({
-    type: S.Literal('image'),
-    id: S.optional(S.String),
-    source: S.optional(ImageSource),
-  }),
-).pipe(S.mutable);
-type ImageContentBlock = S.Schema.Type<typeof ImageContentBlock>;
-const ReferenceContentBlock = S.extend(
-  AbstractContentBlock,
-  S.Struct({
-    type: S.Literal('reference'),
-    reference: S.Any,
-  }),
-).pipe(S.mutable);
-type ReferenceContentBlock = S.Schema.Type<typeof ReferenceContentBlock>;
-const MessageContentBlock = S.Union(TextContentBlock, JsonContentBlock, ImageContentBlock, ReferenceContentBlock);
+interface Text extends S.Schema.Type<typeof Text> {}
 
 const MessageType = S.Struct({
   id: ObjectId,
@@ -234,7 +193,7 @@ const MessageType = S.Struct({
   sender: ActorSchema.annotations({
     description: 'Identity of the message sender.',
   }),
-  blocks: S.Array(MessageContentBlock).annotations({
+  blocks: S.Array(Text).annotations({
     description: 'Contents of the message.',
   }),
   properties: S.optional(

package/src/translations.ts

@@ -21,6 +21,7 @@ export const translations = [
       },
       [meta.id]: {
         'plugin name': 'Scripts',
+        'settings title': 'Scripts plugin settings',
         'description label': 'Description',
         'description placeholder': 'Enter description',
         'binding placeholder': 'Function name',

package/src/util/deploy.ts

@@ -7,9 +7,8 @@ import { Obj, Ref } from '@dxos/echo';
 import {
   FunctionType,
   type ScriptType,
-  getUserFunctionUrlInMetadata,
-  makeFunctionUrl,
-  setUserFunctionUrlInMetadata,
+  getUserFunctionIdInMetadata,
+  setUserFunctionIdInMetadata,
 } from '@dxos/functions';
 import { Bundler } from '@dxos/functions/bundler';
 import { incrementSemverPatch, uploadWorkerFunction } from '@dxos/functions/edge';
@@ -19,8 +18,8 @@ import { type Space } from '@dxos/react-client/echo';
 import { updateFunctionMetadata } from './functions';
 
 export const isScriptDeployed = ({ script, fn }: { script: ScriptType; fn: any }): boolean => {
-  const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(Obj.getMeta(fn));
-  return Boolean(existingFunctionUrl) && !script.changed;
+  const existingFunctionId = fn && getUserFunctionIdInMetadata(Obj.getMeta(fn));
+  return Boolean(existingFunctionId) && !script.changed;
 };
 
 type DeployScriptProps = {
@@ -28,10 +27,10 @@ type DeployScriptProps = {
   client: Client;
   space: Space;
   fn?: FunctionType;
-  existingFunctionUrl?: string;
+  existingFunctionId?: string;
 };
 
-type DeployScriptResult = { success: boolean; error?: Error; functionUrl?: string };
+type DeployScriptResult = { success: boolean; error?: Error; functionId?: string };
 
 /**
  * Deploy a script to a space, handling bundling and uploading to the FaaS infrastructure.
@@ -41,7 +40,7 @@ export const deployScript = async ({
   client,
   space,
   fn,
-  existingFunctionUrl,
+  existingFunctionId,
 }: DeployScriptProps): Promise<DeployScriptResult> => {
   const validationError = validateDeployInputs(script, space);
   if (validationError) {
@@ -49,11 +48,10 @@ export const deployScript = async ({
   }
 
   try {
-    const existingFunctionId = extractFunctionId(existingFunctionUrl);
-
-    const { bundle, error } = await bundleScript(script.source!.target!.content);
-    if (error || !bundle) {
-      throw error || new Error('Bundle creation failed');
+    const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
+    const buildResult = await bundler.bundle({ source: script.source!.target!.content });
+    if ('error' in buildResult) {
+      throw buildResult.error || new Error('Bundle creation failed');
     }
 
     const { functionId, version, meta } = await uploadWorkerFunction({
@@ -61,7 +59,8 @@ export const deployScript = async ({
       ownerPublicKey: space.key,
       version: fn ? incrementSemverPatch(fn.version) : '0.0.1',
       functionId: existingFunctionId,
-      source: bundle,
+      entryPoint: buildResult.entryPoint,
+      assets: { [buildResult.entryPoint]: buildResult.asset },
     });
 
     if (functionId === undefined || version === undefined) {
@@ -72,10 +71,9 @@ export const deployScript = async ({
     script.changed = false;
     updateFunctionMetadata(script, storedFunction, meta, functionId);
 
-    const functionUrl = makeFunctionUrl({ functionId });
-    setUserFunctionUrlInMetadata(Obj.getMeta(storedFunction), functionUrl);
+    setUserFunctionIdInMetadata(Obj.getMeta(storedFunction), functionId);
 
-    return { success: true, functionUrl };
+    return { success: true, functionId };
   } catch (err: any) {
     log.catch(err);
     return { success: false, error: err };
@@ -92,21 +90,6 @@ const validateDeployInputs = (script: ScriptType, space: Space): Error | null =>
   return null;
 };
 
-const extractFunctionId = (functionUrl?: string): string | undefined => {
-  return functionUrl?.split('/').at(-1);
-};
-
-const bundleScript = async (source: string): Promise<{ bundle?: string; error?: Error }> => {
-  const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
-  const buildResult = await bundler.bundle({ source });
-
-  if (buildResult.error || !buildResult.bundle) {
-    return { error: buildResult.error || new Error('Bundle creation failed') };
-  }
-
-  return { bundle: buildResult.bundle };
-};
-
 const createOrUpdateFunctionInSpace = (
   space: Space,
   fn: FunctionType | undefined,
@@ -115,9 +98,13 @@ const createOrUpdateFunctionInSpace = (
   version: string,
 ): FunctionType => {
   if (fn) {
+    fn.name = script.name ?? 'New Function';
     fn.version = version;
     return fn;
   } else {
-    return space.db.add(Obj.make(FunctionType, { name: functionId, version, source: Ref.make(script) }));
+    const fn = Obj.make(FunctionType, { name: script.name ?? 'New Function', version, source: Ref.make(script) });
+    space.db.add(fn);
+    setUserFunctionIdInMetadata(Obj.getMeta(fn), functionId);
+    return fn;
   }
 };

package/src/util/functions.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
+import { type ScriptType, getInvocationUrl, getUserFunctionIdInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { getMeta, getSpace } from '@dxos/react-client/echo';
 
@@ -19,13 +19,13 @@ export const getFunctionUrl = ({
   edgeUrl: string;
 }): string | undefined => {
   const space = getSpace(script);
-  const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(getMeta(fn));
+  const existingFunctionId = fn && getUserFunctionIdInMetadata(getMeta(fn));
 
-  if (!existingFunctionUrl) {
+  if (!existingFunctionId) {
     return undefined;
   }
 
-  return getInvocationUrl(existingFunctionUrl, edgeUrl, {
+  return getInvocationUrl(existingFunctionId, edgeUrl, {
     spaceId: space?.id,
   });
 };

package/dist/lib/browser/ScriptContainer-Z6SIGRRC.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ScriptContainer.tsx", "../../../src/components/ScriptToolbar/ScriptToolbar.tsx", "../../../src/components/TypescriptEditor/TypescriptEditor.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useMemo } from 'react';\n\nimport { type ScriptType } from '@dxos/functions';\nimport { createDocAccessor, getSpace } from '@dxos/react-client/echo';\nimport { useIdentity } from '@dxos/react-client/halo';\nimport { createDataExtensions, listener, stackItemContentEditorClassNames } from '@dxos/react-ui-editor';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { ScriptToolbar } from './ScriptToolbar';\nimport { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';\nimport { useDeployState, useToolbarState } from '../hooks';\nimport { type ScriptSettingsProps } from '../types';\n\nexport type ScriptEditorProps = {\n  role: string;\n  script: ScriptType;\n  settings?: ScriptSettingsProps;\n} & Pick<TypescriptEditorProps, 'env'>;\n\nexport const ScriptContainer = ({ role, script, settings = { editorInputMode: 'vscode' }, env }: ScriptEditorProps) => {\n  const identity = useIdentity();\n  const space = getSpace(script);\n  const state = useToolbarState();\n  useDeployState({ state, script });\n\n  const extensions = useMemo(\n    () =>\n      script.source.target\n        ? [\n            listener({\n              onChange: (text) => {\n                if (script.source.target?.content !== text) {\n                  script.changed = true;\n                }\n              },\n            }),\n            createDataExtensions({\n              id: script.id,\n              text: createDocAccessor(script.source.target, ['content']),\n              space,\n              identity,\n            }),\n          ]\n        : [],\n    [identity, space, script, script.source.target],\n  );\n\n  return (\n    <StackItem.Content toolbar>\n      <ScriptToolbar state={state} role={role} script={script} />\n      <TypescriptEditor\n        id={script.id}\n        env={env}\n        initialValue={script.source?.target?.content}\n        extensions={extensions}\n        classNames={stackItemContentEditorClassNames(role)}\n        inputMode={settings.editorInputMode}\n        toolbar\n      />\n    </StackItem.Content>\n  );\n};\n\nexport default ScriptContainer;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport React, { useMemo } from 'react';\n\nimport { type ScriptType } from '@dxos/functions';\nimport { fullyQualifiedId } from '@dxos/react-client/echo';\nimport { ElevationProvider, useTranslation, type ThemedClassName } from '@dxos/react-ui';\nimport { createGapSeparator, MenuProvider, rxFromSignal, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';\n\nimport {\n  type CreateDeployOptions,\n  type ScriptToolbarState,\n  createDeploy,\n  createFormat,\n  createTemplateSelect,\n  useDeployDeps,\n} from '../../hooks';\nimport { SCRIPT_PLUGIN } from '../../meta';\n\nconst createToolbar = ({ state, script, ...options }: CreateDeployOptions) =>\n  Rx.make((get) =>\n    get(\n      rxFromSignal(() => {\n        const templateSelect = createTemplateSelect(script);\n        const format = createFormat(script);\n        const gap = createGapSeparator();\n        const deploy = createDeploy({ state, script, ...options });\n        return {\n          nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],\n          edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],\n        };\n      }),\n    ),\n  );\n\nexport type ScriptToolbarProps = ThemedClassName<{\n  role?: string;\n  script: ScriptType;\n  state: ScriptToolbarState;\n}>;\n\nexport const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {\n  const { t } = useTranslation(SCRIPT_PLUGIN);\n  const options = useDeployDeps({ script });\n  const toolbarCreator = useMemo(() => createToolbar({ state, script, t, ...options }), [state, script, options, t]);\n  const menu = useMenuActions(toolbarCreator);\n\n  return (\n    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>\n      <MenuProvider {...menu} attendableId={fullyQualifiedId(script)}>\n        <ToolbarMenu classNames={classNames} />\n      </MenuProvider>\n    </ElevationProvider>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { javascript } from '@codemirror/lang-javascript';\nimport { defaultHighlightStyle } from '@codemirror/language';\nimport { lintKeymap } from '@codemirror/lint';\nimport { Prec } from '@codemirror/state';\nimport { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';\nimport { keymap } from '@codemirror/view';\nimport { tags } from '@lezer/highlight';\nimport { type VirtualTypeScriptEnvironment } from '@typescript/vfs';\nimport { continueKeymap } from '@valtown/codemirror-continue';\nimport { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover, type HoverInfo } from '@valtown/codemirror-ts';\nimport React from 'react';\n\nimport { type ThemedClassName, type ThemeMode, useThemeContext } from '@dxos/react-ui';\nimport {\n  type EditorInputMode,\n  InputModeExtensions,\n  type UseTextEditorProps,\n  autocomplete,\n  createBasicExtensions,\n  createThemeExtensions,\n  folding,\n  useTextEditor,\n} from '@dxos/react-ui-editor';\nimport { mx } from '@dxos/react-ui-theme';\nimport { isNonNullable } from '@dxos/util';\n\nexport type TypescriptEditorProps = ThemedClassName<\n  {\n    id: string;\n    inputMode?: EditorInputMode;\n    toolbar?: boolean;\n    env?: VirtualTypeScriptEnvironment;\n  } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>\n>;\n\nexport const TypescriptEditor = ({\n  classNames,\n  id,\n  inputMode = 'vscode',\n  toolbar,\n  env,\n  initialValue,\n  extensions,\n  scrollTo,\n  selection,\n}: TypescriptEditorProps) => {\n  const { themeMode } = useThemeContext();\n  const { parentRef, focusAttributes } = useTextEditor(\n    () => ({\n      id,\n      initialValue,\n      selection,\n      scrollTo,\n      extensions: [\n        extensions,\n        createBasicExtensions({\n          highlightActiveLine: true,\n          indentWithTab: true,\n          lineNumbers: true,\n          lineWrapping: false,\n          monospace: true,\n          scrollPastEnd: true,\n        }),\n        createThemeExtensions({ themeMode, syntaxHighlighting: true }),\n        InputModeExtensions[inputMode],\n        folding(),\n        // Continues block comments when pressing Enter.\n        Prec.high(keymap.of(continueKeymap)),\n\n        // TODO(burdon): Factor out.\n        javascript({ typescript: true }),\n        // https://github.com/val-town/codemirror-ts\n        autocomplete({ override: env ? [tsAutocomplete()] : undefined }),\n        keymap.of(lintKeymap),\n        env && [\n          tsFacet.of({ env, path: `/src/${id}.ts` }),\n          tsSync(),\n          tsLinter(),\n          tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),\n        ],\n      ].filter(isNonNullable),\n    }),\n    [id, extensions, themeMode, inputMode, selection, scrollTo],\n  );\n\n  return (\n    <div\n      ref={parentRef}\n      data-toolbar={toolbar ? 'enabled' : 'disabled'}\n      className={mx(classNames)}\n      {...focusAttributes}\n    />\n  );\n};\n\nconst createTooltipRenderer = (themeMode: ThemeMode) => {\n  const theme = themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle;\n\n  const classFromKind = (_kind: string) => {\n    // E.g., localName, methodName, parameterName, etc.\n    const kind = _kind.endsWith('Name') ? 'name' : _kind;\n    const validTag = kind in tags;\n    if (!validTag) {\n      return '';\n    }\n\n    const tag = tags[kind as keyof typeof tags];\n    if (typeof tag === 'function') {\n      return '';\n    }\n\n    return theme.style([tag]) ?? '';\n  };\n\n  return (info: HoverInfo) => {\n    const div = document.createElement('div');\n    div.className = 'p-1 rounded border border-separator bg-baseSurface xs:max-w-80 max-w-lg';\n\n    if (info.quickInfo?.displayParts) {\n      for (const part of info.quickInfo.displayParts) {\n        const span = div.appendChild(document.createElement('span'));\n        span.className = classFromKind(part.kind);\n        span.innerText = part.text;\n      }\n    }\n\n    return { dom: div };\n  };\n};\n\nexport default TypescriptEditor;\n"],
-  "mappings": "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",
-  "names": ["React", "useMemo", "createDocAccessor", "getSpace", "useIdentity", "createDataExtensions", "listener", "stackItemContentEditorClassNames", "StackItem", "Rx", "React", "useMemo", "fullyQualifiedId", "ElevationProvider", "useTranslation", "createGapSeparator", "MenuProvider", "rxFromSignal", "ToolbarMenu", "useMenuActions", "createToolbar", "state", "script", "options", "Rx", "make", "get", "rxFromSignal", "templateSelect", "createTemplateSelect", "format", "createFormat", "gap", "createGapSeparator", "deploy", "createDeploy", "nodes", "edges", "ScriptToolbar", "role", "classNames", "t", "useTranslation", "SCRIPT_PLUGIN", "useDeployDeps", "toolbarCreator", "useMemo", "menu", "useMenuActions", "ElevationProvider", "elevation", "MenuProvider", "attendableId", "fullyQualifiedId", "ToolbarMenu", "javascript", "defaultHighlightStyle", "lintKeymap", "Prec", "oneDarkHighlightStyle", "keymap", "tags", "continueKeymap", "tsSync", "tsFacet", "tsLinter", "tsAutocomplete", "tsHover", "React", "useThemeContext", "InputModeExtensions", "autocomplete", "createBasicExtensions", "createThemeExtensions", "folding", "useTextEditor", "mx", "isNonNullable", "TypescriptEditor", "classNames", "id", "inputMode", "toolbar", "env", "initialValue", "extensions", "scrollTo", "selection", "themeMode", "useThemeContext", "parentRef", "focusAttributes", "useTextEditor", "createBasicExtensions", "highlightActiveLine", "indentWithTab", "lineNumbers", "lineWrapping", "monospace", "scrollPastEnd", "createThemeExtensions", "syntaxHighlighting", "InputModeExtensions", "folding", "Prec", "high", "keymap", "of", "continueKeymap", "javascript", "typescript", "autocomplete", "override", "tsAutocomplete", "undefined", "lintKeymap", "tsFacet", "path", "tsSync", "tsLinter", "tsHover", "renderTooltip", "createTooltipRenderer", "filter", "isNonNullable", "React", "div", "ref", "data-toolbar", "className", "mx", "theme", "oneDarkHighlightStyle", "defaultHighlightStyle", "classFromKind", "_kind", "kind", "endsWith", "validTag", "tags", "tag", "style", "info", "document", "createElement", "quickInfo", "displayParts", "part", "span", "appendChild", "innerText", "text", "dom", "ScriptContainer", "role", "script", "settings", "editorInputMode", "env", "identity", "useIdentity", "space", "getSpace", "state", "useToolbarState", "useDeployState", "extensions", "useMemo", "source", "target", "listener", "onChange", "text", "content", "changed", "createDataExtensions", "id", "createDocAccessor", "React", "StackItem", "Content", "toolbar", "ScriptToolbar", "TypescriptEditor", "initialValue", "classNames", "stackItemContentEditorClassNames", "inputMode"]
-}