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

package/src/ScriptPlugin.tsx

@@ -3,104 +3,76 @@
 //
 
 // @ts-ignore
-import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
-import React from 'react';
 
-import { createIntent, createResolver, createSurface, type PluginDefinition } from '@dxos/app-framework';
+import {
+  Capabilities,
+  contributes,
+  createIntent,
+  defineModule,
+  definePlugin,
+  Events,
+  oneOf,
+} from '@dxos/app-framework';
+import { type Space } from '@dxos/client/echo';
 import { FunctionType, ScriptType } from '@dxos/functions';
-import { create, makeRef, RefArray } from '@dxos/live-object';
-import { TextType } from '@dxos/plugin-markdown/types';
+import { RefArray } from '@dxos/live-object';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
-import { initializeBundler } from './bundler';
-import { Compiler } from './compiler';
-import { AutomationPanel, ScriptContainer, ScriptSettings, ScriptSettingsPanel } from './components';
-import meta, { SCRIPT_PLUGIN } from './meta';
-import { templates } from './templates';
+import { Compiler, IntentResolver, ReactSurface, ScriptSettings } from './capabilities';
+import { meta, SCRIPT_PLUGIN } from './meta';
 import translations from './translations';
-import { ScriptAction, type ScriptPluginProvides } from './types';
+import { ScriptAction } from './types';
 
-export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
-  const compiler = new Compiler();
-
-  return {
-    meta,
-    initialize: async () => {
-      await compiler.initialize();
-      // TODO(wittjosiah): Fetch types for https modules.
-      compiler.setFile('/src/typings.d.ts', "declare module 'https://*';");
-      // TODO(wittjosiah): Proper function handler types.
-      // TODO(wittjosiah): Remove.
-      compiler.setFile(
-        '/src/runtime.ts',
-        `
-        export const Filter: any = {};
-        export type FunctionHandler = ({ event, context }: { event: any; context: any }) => Promise<Response>;
-        export const functionHandler = (handler: FunctionHandler) => handler;
-      `,
-      );
-      await initializeBundler({ wasmUrl });
-    },
-    provides: {
-      settings: {},
-      metadata: {
-        records: {
-          [ScriptType.typename]: {
-            createObject: (props: { name?: string }) => createIntent(ScriptAction.Create, props),
+export const ScriptPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/settings`,
+      activatesOn: Events.SetupSettings,
+      activate: ScriptSettings,
+    }),
+    defineModule({
+      id: `${meta.id}/module/compiler`,
+      activatesOn: Events.Startup,
+      activate: Compiler,
+    }),
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/metadata`,
+      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
+      activate: () =>
+        contributes(Capabilities.Metadata, {
+          id: ScriptType.typename,
+          metadata: {
+            creationSchema: ScriptAction.CreateScriptSchema,
+            createObject: (props: ScriptAction.CreateScriptProps, { space }: { space: Space }) =>
+              createIntent(ScriptAction.Create, { ...props, space }),
             placeholder: ['object title placeholder', { ns: SCRIPT_PLUGIN }],
             icon: 'ph--code--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: async (script: ScriptType) => await RefArray.loadAll([script.source]),
           },
-        },
-      },
-      translations,
-      echo: {
-        schema: [ScriptType],
-        system: [FunctionType],
-      },
-      surface: {
-        definitions: () => [
-          createSurface({
-            id: `${SCRIPT_PLUGIN}/settings`,
-            role: 'settings',
-            filter: (data): data is any => data.subject === SCRIPT_PLUGIN,
-            component: () => <ScriptSettings settings={{}} />,
-          }),
-          createSurface({
-            id: `${SCRIPT_PLUGIN}/article`,
-            role: 'article',
-            filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
-            component: ({ data }) => <ScriptContainer script={data.subject} env={compiler.environment} />,
-          }),
-          createSurface({
-            id: `${SCRIPT_PLUGIN}/automation`,
-            role: 'complementary--automation',
-            disposition: 'hoist',
-            filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
-            component: ({ data }) => <AutomationPanel subject={data.subject} />,
-          }),
-          createSurface({
-            id: `${SCRIPT_PLUGIN}/settings-panel`,
-            role: 'complementary--settings',
-            filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
-            component: ({ data }) => <ScriptSettingsPanel script={data.subject} />,
-          }),
-        ],
-      },
-      intent: {
-        resolvers: () =>
-          createResolver(ScriptAction.Create, ({ name }) => ({
-            data: {
-              object: create(ScriptType, {
-                source: makeRef(
-                  create(TextType, {
-                    content: templates[0].source,
-                  }),
-                ),
-              }),
-            },
-          })),
-      },
-    },
-  };
-};
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupClient,
+      activate: () => [
+        contributes(ClientCapabilities.SystemSchema, [FunctionType]),
+        contributes(ClientCapabilities.Schema, [ScriptType]),
+      ],
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.Startup,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      activate: IntentResolver,
+    }),
+  ]);

package/src/bundler/bundler.test.ts

@@ -38,8 +38,8 @@ describe('Bundler', () => {
   test('HTTPS Import', async () => {
     const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
     const result = await bundler.bundle(`
-      import { Octokit } from 'https://esm.sh/octokit';
-      const octokit = new Octokit();
+      import { invariant } from 'https://esm.sh/@dxos/invariant';
+      invariant(true);
     `);
     expect(result.bundle).to.exist;
     expect(result.error).to.not.exist;

package/src/capabilities/capabilities.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineCapability } from '@dxos/app-framework';
+
+import { type Compiler } from '../compiler';
+import { SCRIPT_PLUGIN } from '../meta';
+
+export namespace ScriptCapabilities {
+  export const Compiler = defineCapability<Compiler>(`${SCRIPT_PLUGIN}/capability/compiler`);
+}

package/src/capabilities/compiler.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// @ts-ignore
+import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
+
+import { contributes } from '@dxos/app-framework';
+
+import { ScriptCapabilities } from './capabilities';
+import { initializeBundler } from '../bundler';
+import { Compiler } from '../compiler';
+
+export default async () => {
+  const compiler = new Compiler();
+
+  await compiler.initialize();
+  // TODO(wittjosiah): Fetch types for https modules.
+  compiler.setFile('/src/typings.d.ts', "declare module 'https://*';");
+  // TODO(wittjosiah): Proper function handler types.
+  // TODO(wittjosiah): Remove.
+  compiler.setFile(
+    '/src/runtime.ts',
+    `
+        export const Filter: any = {};
+        export type FunctionHandler = ({ event, context }: { event: any; context: any }) => Promise<Response>;
+        export const functionHandler = (handler: FunctionHandler) => handler;
+      `,
+  );
+  await initializeBundler({ wasmUrl });
+
+  return contributes(ScriptCapabilities.Compiler, compiler);
+};

package/src/capabilities/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const Compiler = lazy(() => import('./compiler'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const ReactSurface = lazy(() => import('./react-surface'));
+export const ScriptSettings = lazy(() => import('./settings'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Octokit } from '@octokit/core';
+
+import { contributes, Capabilities, createResolver } from '@dxos/app-framework';
+import { ScriptType } from '@dxos/functions';
+import { create, makeRef } from '@dxos/live-object';
+import { TextType } from '@dxos/schema';
+
+import { templates } from '../templates';
+import { ScriptAction } from '../types';
+
+export default () =>
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver(ScriptAction.Create, async ({ name, gistUrl, space }) => {
+      let content = templates[0].source;
+      const gistId = gistUrl?.split('/').at(-1);
+      if (gistId) {
+        // TODO(wittjosiah): Capability which contributes Octokit?
+        // NOTE: AccessToken not needed to read public gists.
+        const octokit = new Octokit();
+        const response = await octokit.request('GET /gists/{gist_id}', {
+          gist_id: gistId,
+        });
+        const gistContent = Object.values(response.data.files ?? {})[0]?.content;
+        if (gistContent) {
+          content = gistContent;
+        }
+      }
+
+      return {
+        data: {
+          object: create(ScriptType, {
+            name,
+            source: makeRef(create(TextType, { content })),
+          }),
+        },
+      };
+    }),
+  );

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { ScriptType } from '@dxos/functions';
+import { Clipboard } from '@dxos/react-ui';
+
+import { ScriptCapabilities } from './capabilities';
+import { AutomationPanel, ScriptSettings, ScriptContainer, ScriptSettingsPanel } from '../components';
+import { SCRIPT_PLUGIN } from '../meta';
+import { type ScriptSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/settings`,
+      role: 'settings',
+      filter: (data): data is any => data.subject === SCRIPT_PLUGIN,
+      component: () => {
+        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(SCRIPT_PLUGIN)!.value;
+        return <ScriptSettings settings={settings} />;
+      },
+    }),
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/article`,
+      role: 'article',
+      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      component: ({ data, role }) => {
+        const compiler = useCapability(ScriptCapabilities.Compiler);
+        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(SCRIPT_PLUGIN)!.value;
+        return <ScriptContainer role={role} script={data.subject} settings={settings} env={compiler.environment} />;
+      },
+    }),
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/automation`,
+      role: 'complementary--automation',
+      disposition: 'hoist',
+      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      component: ({ data }) => <AutomationPanel subject={data.subject} />,
+    }),
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/settings-panel`,
+      role: 'complementary--settings',
+      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      component: ({ data }) => (
+        <Clipboard.Provider>
+          <ScriptSettingsPanel script={data.subject} />
+        </Clipboard.Provider>
+      ),
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { SCRIPT_PLUGIN } from '../meta';
+import { ScriptSettingsSchema } from '../types';
+
+export default () => {
+  const settings = create(ScriptSettingsSchema, { editorInputMode: 'vscode' });
+  return contributes(Capabilities.Settings, { schema: ScriptSettingsSchema, prefix: SCRIPT_PLUGIN, value: settings });
+};

package/src/components/ScriptContainer.tsx

@@ -2,20 +2,75 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { type ScriptType } from '@dxos/functions';
+import { createDocAccessor, getSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { createDataExtensions, listener, stackItemContentEditorClassNames } from '@dxos/react-ui-editor';
+import { StackItem } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 
-import { ScriptEditor, type ScriptEditorProps } from './ScriptEditor';
+import { DebugPanel } from './DebugPanel';
+import { ScriptToolbar } from './ScriptToolbar';
+import { useDeployState } from './ScriptToolbar/deploy';
+import { useToolbarState } from './ScriptToolbar/useToolbarState';
+import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+import { type ScriptSettingsProps } from '../types';
+
+export type ScriptEditorProps = ThemedClassName<{
+  script: ScriptType;
+  settings: ScriptSettingsProps;
+  role?: string;
+}> &
+  Pick<TypescriptEditorProps, 'env'>;
+
+export const ScriptContainer = ({ role, classNames, script, settings, env }: ScriptEditorProps) => {
+  const identity = useIdentity();
+  const space = getSpace(script);
+
+  const extensions = useMemo(
+    () => [
+      listener({
+        onChange: (text) => {
+          if (script.source.target && script.source.target.content !== text) {
+            script.changed = true;
+          }
+        },
+      }),
+      createDataExtensions({
+        id: script.id,
+        text: script.source.target && createDocAccessor(script.source.target, ['content']),
+        space,
+        identity,
+      }),
+    ],
+    [script, script.source.target, space, identity],
+  );
+
+  const state = useToolbarState({ view: 'split' });
+  useDeployState({ state, script });
 
-const ScriptContainer = ({ script, ...props }: ScriptEditorProps) => {
-  const attendableAttrs = useAttendableAttributes(fullyQualifiedId(script));
   return (
-    <div role='none' className={mx('flex row-span-2 w-full overflow-hidden attention-surface')} {...attendableAttrs}>
-      <ScriptEditor {...props} script={script} />
-    </div>
+    <StackItem.Content toolbar>
+      <ScriptToolbar state={state} role={role} script={script} />
+      <div role='none' className={mx('flex flex-col w-full overflow-hidden divide-y divide-separator', classNames)}>
+        {state.view !== 'debug' && (
+          <TypescriptEditor
+            id={script.id}
+            env={env}
+            initialValue={script.source?.target?.content}
+            extensions={extensions}
+            className={stackItemContentEditorClassNames(role)}
+            inputMode={settings.editorInputMode}
+            toolbar
+          />
+        )}
+
+        {state.view !== 'editor' && <DebugPanel functionUrl={state.functionUrl} />}
+      </div>
+    </StackItem.Content>
   );
 };
 

package/src/components/ScriptSettings/ScriptSettings.tsx

@@ -6,7 +6,8 @@ import React from 'react';
 
 import { type Credential } from '@dxos/protocols/proto/dxos/halo/credentials';
 import { useClient } from '@dxos/react-client';
-import { Button, useTranslation } from '@dxos/react-ui';
+import { Button, Select, useTranslation } from '@dxos/react-ui';
+import { type EditorInputMode, EditorInputModes } from '@dxos/react-ui-editor';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SCRIPT_PLUGIN } from '../../meta';
@@ -39,9 +40,32 @@ export const ScriptSettings = ({ settings }: { settings: ScriptSettingsProps })
 
   return (
     <>
+      {/* TODO(wittjosiah): Hide outside of dev environments. */}
       <DeprecatedFormInput label={t('authenticate action label')}>
         <Button onClick={handleAuthenticate}>{t('authenticate button label')}</Button>
       </DeprecatedFormInput>
+
+      <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>
     </>
   );
 };