@dxos/plugin-script 0.7.5-main.499c70c → 0.7.5-main.6a330ac

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { ScriptType } from '@dxos/functions';
+import { SettingsStore } from '@dxos/local-storage';
+import { Clipboard } from '@dxos/react-ui';
+
+import { ScriptCapabilities } from './capabilities';
+import { DebugPanel, ScriptSettings, ScriptContainer, ScriptSettingsPanel } from '../components';
+import { useDeployState, useToolbarState } from '../hooks';
+import { SCRIPT_PLUGIN } from '../meta';
+import { type ScriptSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${SCRIPT_PLUGIN}/settings`,
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<ScriptSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === SCRIPT_PLUGIN,
+      component: ({ data: { subject } }) => <ScriptSettings settings={subject.value} />,
+    }),
+    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);
+        // TODO(dmaretskyi): Since settings store is not reactive, this would break on the script plugin being enabled without a page reload.
+        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--function',
+      position: 'hoist',
+      filter: (data): data is { subject: ScriptType } => data.subject instanceof ScriptType,
+      component: ({ data }) => {
+        // TODO(wittjosiah): Decouple hooks from toolbar state.
+        const state = useToolbarState({ view: 'editor' });
+        useDeployState({ state, script: data.subject });
+        return <DebugPanel functionUrl={state.functionUrl} />;
+      },
+    }),
+    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/compiler/compiler.browser.test.ts

@@ -12,7 +12,7 @@ describe('Compiler', () => {
     await compiler.initialize();
     compiler.setFile('/src/x.ts', 'export const x = 100');
     compiler.setFile('/src/y.ts', 'import { x } from "./x"; export const y = x + 100;');
-    const result = await compiler.compile('/src/y.ts');
+    const result = compiler.compile('/src/y.ts');
     expect(result).to.exist;
   });
 });

package/src/components/DebugPanel/DebugPanel.tsx

@@ -7,7 +7,7 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { log } from '@dxos/log';
 import { Avatar, Icon, Input, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
+import { errorText, mx } from '@dxos/react-ui-theme';
 
 import { SCRIPT_PLUGIN } from '../../meta';
 
@@ -232,7 +232,7 @@ const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message
   const wrapper = 'p-1 px-2 rounded-lg bg-hoverSurface overflow-auto';
   return (
     <div className={mx('flex', type === 'request' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
-      {error && <div className={mx(wrapper, 'whitespace-pre text-error')}>{String(error)}</div>}
+      {error && <div className={mx(wrapper, 'whitespace-pre', errorText)}>{String(error)}</div>}
 
       {text !== undefined && (
         <div className={mx(wrapper, type === 'request' && 'bg-primary-400 dark:bg-primary-600')}>

package/src/components/FrameContainer/FrameContainer.tsx

@@ -5,17 +5,17 @@
 import React, { useEffect, useRef } from 'react';
 
 import { clientServiceBundle } from '@dxos/client-protocol';
+import { type BundleResult } from '@dxos/functions/bundler';
+import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
-import { type BundlerResult } from '../../bundler';
-
 export type FrameContainerProps = {
   containerUrl: string;
-  result: BundlerResult;
+  result: BundleResult;
   debug?: boolean;
 };
 
@@ -46,6 +46,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
   }, [iframeRef]);
 
   // Encodes compiled code via URL.
+  invariant(result.sourceHash, 'Source hash is required.');
   const sourceHash = Buffer.from(result.sourceHash).toString('hex');
   const src = result.bundle && `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}`;
 
@@ -58,7 +59,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
           <div
             className={mx(
               baseSurface,
-              'flex absolute right-2 bottom-2 w-[400px] h-[200px] ring rounded',
+              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] ring rounded',
               'z-20 overflow-x-hidden overflow-y-auto',
             )}
           >

package/src/components/ScriptContainer.tsx

@@ -2,20 +2,80 @@
 // 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 { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+import { useDeployState, useToolbarState } from '../hooks';
+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 = { editorInputMode: 'vscode' },
+  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: 'editor' });
+  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,8 +6,9 @@ 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 { DeprecatedFormInput } from '@dxos/react-ui-form';
+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 { SCRIPT_PLUGIN } from '../../meta';
 import { type ScriptSettingsProps } from '../../types';
@@ -38,10 +39,33 @@ export const ScriptSettings = ({ settings }: { settings: ScriptSettingsProps })
   };
 
   return (
-    <>
+    <DeprecatedFormContainer>
+      {/* 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>
+    </DeprecatedFormContainer>
   );
 };

package/src/components/ScriptSettingsPanel.tsx

@@ -2,33 +2,62 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ChangeEvent, useCallback } from 'react';
+import { Octokit } from '@octokit/core';
+import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
 
+import { createIntent, SettingsAction, useIntentDispatcher } from '@dxos/app-framework';
 import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
+import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
-import { Button, Icon, Input, useControlledValue, useTranslation } from '@dxos/react-ui';
+import { Button, Clipboard, Input, Separator, useControlledState, useTranslation } from '@dxos/react-ui';
+import { AccessTokenType } from '@dxos/schema';
 
 import { SCRIPT_PLUGIN } from '../meta';
 
+// TODO(wittjosiah): Factor out.
+// From https://stackoverflow.com/a/67243723/2804332
+const kebabize = (str: string) => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+
 export type ScriptSettingsPanelProps = {
   script: ScriptType;
 };
 
 export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const space = getSpace(script);
   const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
+  const [githubToken] = useQuery(space, Filter.schema(AccessTokenType, { source: 'github.com' }));
+  const gistKey = getMeta(script).keys.find(({ source }) => source === 'github.com');
+  const [gistUrl, setGistUrl] = useState<string | undefined>();
 
-  const handleNameChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      script.name = event.target.value;
-    },
-    [script],
-  );
+  useEffect(() => {
+    const token = githubToken?.token;
+    const gistId = gistKey?.id;
+    if (!token || !gistId) {
+      setGistUrl(undefined);
+      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);
+  }, [githubToken, gistKey]);
 
-  const [binding, setBinding] = useControlledValue(fn?.binding ?? '');
+  const [binding, setBinding] = useControlledState(fn?.binding ?? '');
   const handleBindingChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       setBinding(event.target.value);
@@ -46,55 +75,114 @@ export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
       spaceId: space?.id,
     });
 
-  // TODO(wittjosiah): Use ClipboardProvider.
-  const handleCopy = useCallback(() => functionUrl && navigator.clipboard.writeText(functionUrl), [functionUrl]);
+  const handleOpenTokenManager = useCallback(
+    () => dispatch(createIntent(SettingsAction.Open, { plugin: 'dxos.org/plugin/token-manager' })),
+    [],
+  );
+
+  const [publishing, setPublishing] = useState(false);
+  const handlePublish = useCallback(async () => {
+    setPublishing(true);
+    const octokit = new Octokit({ auth: githubToken.token });
+    const source = await script.source.load();
+    const filename = script.name ? kebabize(script.name) : 'composer-script';
+    const files = { [`${filename}.ts`]: { content: source.content } };
+
+    try {
+      // TODO(wittjosiah): Factor out to intent.
+      const meta = getMeta(script);
+      const githubKey = meta.keys.find(({ source }) => source === 'github.com');
+      const gistId = githubKey?.id;
+      if (gistId) {
+        await octokit.request('PATCH /gists/{gist_id}', {
+          gist_id: gistId,
+          files,
+        });
+      } else {
+        const response = await octokit.request('POST /gists', {
+          public: true,
+          files,
+        });
+        if (response.data.id) {
+          meta.keys.push({ source: 'github.com', id: response.data.id });
+        }
+      }
+    } finally {
+      setPublishing(false);
+    }
+  }, [script, githubToken]);
 
   return (
-    <div role='form' className='flex flex-col w-full p-2 gap-4'>
-      <Input.Root>
-        <div role='none' className='flex flex-col gap-1'>
-          <Input.Label>{t('name label')}</Input.Label>
-          <Input.TextInput
-            placeholder={t('object title placeholder')}
-            value={script.name ?? ''}
-            onChange={handleNameChange}
-          />
-        </div>
-      </Input.Root>
-      {fn && (
+    <>
+      <div role='form' className='flex flex-col w-full p-2 gap-4'>
+        <Input.Root>
+          <div role='none' className='flex flex-col gap-1'>
+            <Input.Label>{t('description label')}</Input.Label>
+            <Input.TextInput
+              placeholder={t('description placeholder')}
+              value={script.description ?? ''}
+              onChange={(event) => {
+                script.description = event.target.value;
+              }}
+            />
+          </div>
+        </Input.Root>
+      </div>
+      {fn && functionUrl && (
         <>
-          <hr className='border-separator' />
-          <h2>{t('remote function settings heading')}</h2>
-          <Input.Root>
-            <div role='none' className='flex flex-col gap-1'>
-              <Input.Label>{t('function url label')}</Input.Label>
-              <div role='none' className='flex gap-1'>
+          <Separator />
+          <div role='form' className='flex flex-col w-full p-2 gap-4'>
+            <h2>{t('remote function settings heading')}</h2>
+            <Input.Root>
+              <div role='none' className='flex flex-col gap-1'>
+                <Input.Label>{t('function url label')}</Input.Label>
+                <div role='none' className='flex gap-1'>
+                  <Input.TextInput
+                    disabled
+                    value={functionUrl}
+                    onChange={(event) => {
+                      fn.name = event.target.value;
+                    }}
+                  />
+                  <Clipboard.IconButton value={functionUrl} />
+                </div>
+              </div>
+            </Input.Root>
+            <Input.Root>
+              <div role='none' className='flex flex-col gap-1'>
+                <Input.Label>{t('function binding label')}</Input.Label>
                 <Input.TextInput
-                  disabled
-                  value={functionUrl}
-                  onChange={(event) => {
-                    fn.name = event.target.value;
-                  }}
+                  placeholder={t('function binding placeholder')}
+                  value={binding}
+                  onChange={handleBindingChange}
+                  onBlur={handleBindingBlur}
                 />
-                <Button onClick={handleCopy}>
-                  <Icon icon='ph--copy--regular' size={4} />
-                </Button>
               </div>
-            </div>
-          </Input.Root>
-          <Input.Root>
-            <div role='none' className='flex flex-col gap-1'>
-              <Input.Label>{t('function binding label')}</Input.Label>
-              <Input.TextInput
-                placeholder={t('function binding placeholder')}
-                value={binding}
-                onChange={handleBindingChange}
-                onBlur={handleBindingBlur}
-              />
-            </div>
-          </Input.Root>
+            </Input.Root>
+          </div>
         </>
       )}
-    </div>
+      <Separator />
+      <div className='flex flex-col w-full p-2 gap-4'>
+        <div>
+          <h2>{t('script publish settings label')}</h2>
+          <p className='text-description text-sm'>{t('script publish settings description')}</p>
+        </div>
+        {!githubToken && (
+          <div className='flex flex-col items-center justify-center gap-2'>
+            <span>{t('no github token label')}</span>
+            <Button onClick={handleOpenTokenManager}>{t('open token manager label')}</Button>
+          </div>
+        )}
+        {githubToken && (
+          <div className='flex justify-end gap-2'>
+            {gistUrl && <Clipboard.IconButton value={gistUrl} />}
+            <Button disabled={publishing} onClick={handlePublish}>
+              {t(publishing ? 'publishing label' : 'publish label')}
+            </Button>
+          </div>
+        )}
+      </div>
+    </>
   );
 };

package/src/components/{Toolbar/Toolbar.stories.tsx → ScriptToolbar/ScriptToolbar.stories.tsx}

@@ -8,7 +8,7 @@ import { type Meta } from '@storybook/react';
 
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Toolbar } from './Toolbar';
+import { ScriptToolbar } from './ScriptToolbar';
 import { templates } from '../../templates';
 
 export const Default = {
@@ -23,7 +23,7 @@ export const Default = {
 
 const meta: Meta = {
   title: 'plugins/plugin-script/Toolbar',
-  component: Toolbar,
+  component: ScriptToolbar,
   decorators: [withTheme, withLayout({ tooltips: true })],
 };
 

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type ScriptType } from '@dxos/functions';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
+import { stackItemContentToolbarClassNames } from '@dxos/react-ui-editor';
+import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+
+import {
+  type ScriptToolbarState,
+  createDeploy,
+  createFormat,
+  createTemplateSelect,
+  createView,
+  useToolbarAction,
+} from '../../hooks';
+
+export type ScriptToolbarProps = ThemedClassName<{
+  role?: string;
+  script: ScriptType;
+  state: ScriptToolbarState;
+}>;
+
+const createToolbar = (state: ScriptToolbarState) => {
+  const templateSelect = createTemplateSelect();
+  const format = createFormat();
+  const gap = createGapSeparator();
+  const deploy = createDeploy(state);
+  const view = createView(state);
+  return {
+    nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes, ...view.nodes],
+    edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges, ...view.edges],
+  };
+};
+
+export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
+  const handleAction = useToolbarAction({ state, script });
+  const toolbarCreator = useCallback(() => createToolbar(state), [state]);
+  const menu = useMenuActions(toolbarCreator);
+  return (
+    <div role='none' className={stackItemContentToolbarClassNames(role)}>
+      <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+        <MenuProvider {...menu} onAction={handleAction} attendableId={fullyQualifiedId(script)}>
+          <ToolbarMenu classNames={classNames} />
+        </MenuProvider>
+      </ElevationProvider>
+    </div>
+  );
+};

package/src/{bundler → components/ScriptToolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './bundler';
+export * from './ScriptToolbar';

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

@@ -9,6 +9,7 @@ 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';
@@ -37,6 +38,7 @@ const meta: Meta = {
   title: 'plugins/plugin-script/TypescriptEditor',
   component: TypescriptEditor,
   render: DefaultStory,
+  decorators: [withTheme],
 };
 
 export default meta;