@dxos/plugin-script 0.8.4-main.c1de068 → 0.8.4-main.e098934

package/src/components/Settings/ScriptObjectSettings.tsx

@@ -3,14 +3,14 @@
 //
 
 import { Octokit } from '@octokit/core';
-import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
+import React, { type ChangeEvent, useCallback, useState } from 'react';
 
-import { createIntent, SettingsAction, useIntentDispatcher } from '@dxos/app-framework';
-import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
+import { SettingsAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionIdInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Filter, getMeta, getSpace, Ref, useQuery } from '@dxos/react-client/echo';
-import { Button, Clipboard, Input, useControlledState, useTranslation } from '@dxos/react-ui';
+import { Filter, Ref, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Button, Clipboard, Input, useAsyncEffect, useControlledState, useTranslation } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
 
 import { SCRIPT_PLUGIN } from '../../meta';
@@ -50,10 +50,10 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
   const space = getSpace(object);
   const [fn] = useQuery(space, Filter.type(FunctionType, { source: Ref.make(object) }));
 
-  const functionPath = fn && getUserFunctionUrlInMetadata(getMeta(fn));
+  const functionId = fn && getUserFunctionIdInMetadata(getMeta(fn));
   const functionUrl =
-    functionPath &&
-    getInvocationUrl(functionPath, client.config.values.runtime?.services?.edge?.url ?? '', {
+    functionId &&
+    getInvocationUrl(functionId, client.config.values.runtime?.services?.edge?.url ?? '', {
       spaceId: space?.id,
     });
 
@@ -116,7 +116,7 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
   const gistKey = getMeta(object).keys.find(({ source }) => source === 'github.com');
   const [gistUrl, setGistUrl] = useState<string | undefined>();
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
     const token = githubToken?.token;
     const gistId = gistKey?.id;
     if (!token || !gistId) {
@@ -124,20 +124,16 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
       return;
     }
 
-    const timeout = setTimeout(async () => {
-      try {
-        const octokit = new Octokit({ auth: githubToken.token });
-        const response = await octokit.request('GET /gists/{gist_id}', {
-          gist_id: gistId,
-        });
-        setGistUrl(response.data.html_url);
-      } catch (err) {
-        log.catch(err);
-        setGistUrl(undefined);
-      }
-    });
-
-    return () => clearTimeout(timeout);
+    try {
+      const octokit = new Octokit({ auth: githubToken.token });
+      const response = await octokit.request('GET /gists/{gist_id}', {
+        gist_id: gistId,
+      });
+      setGistUrl(response.data.html_url);
+    } catch (err) {
+      log.catch(err);
+      setGistUrl(undefined);
+    }
   }, [githubToken, gistKey]);
 
   const handleOpenTokenManager = useCallback(

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/TestPanel/TestPanel.tsx

@@ -237,7 +237,7 @@ const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message
       )}
 
       {data && (
-        <SyntaxHighlighter language='json' className={mx(wrapper, 'px-8 py-2 text-xs')}>
+        <SyntaxHighlighter language='json' className={mx(wrapper, 'text-xs')}>
           {JSON.stringify(data, null, 2)}
         </SyntaxHighlighter>
       )}

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

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
 import { defaultHighlightStyle } from '@codemirror/language';
 import { lintKeymap } from '@codemirror/lint';
@@ -11,15 +12,14 @@ 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,
   type UseTextEditorProps,
-  autocomplete,
   createBasicExtensions,
   createThemeExtensions,
   folding,
@@ -64,6 +64,7 @@ export const TypescriptEditor = ({
           lineWrapping: false,
           monospace: true,
           scrollPastEnd: true,
+          search: true,
         }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         InputModeExtensions[inputMode],
@@ -74,7 +75,8 @@ export const TypescriptEditor = ({
         // TODO(burdon): Factor out.
         javascript({ typescript: true }),
         // https://github.com/val-town/codemirror-ts
-        autocomplete({ override: env ? [tsAutocomplete()] : undefined }),
+        keymap.of(completionKeymap),
+        autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
         keymap.of(lintKeymap),
         env && [
           tsFacet.of({ env, path: `/src/${id}.ts` }),

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',