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

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,15 +2,22 @@
 // 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, useControlledValue, useTranslation } from '@dxos/react-ui';
+import { AccessTokenType } from '@dxos/schema';
 
-import { getInvocationUrl, getUserFunctionUrlInMetadata } from '../edge';
 import { SCRIPT_PLUGIN } from '../meta';
-import { FunctionType, type ScriptType } from '../types';
+
+// 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;
@@ -18,16 +25,37 @@ export type ScriptSettingsPanelProps = {
 
 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 handleBindingChange = useCallback(
@@ -47,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/components/{Toolbar → ScriptToolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Toolbar';
+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;

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -3,18 +3,26 @@
 //
 
 import { javascript } from '@codemirror/lang-javascript';
+import { defaultHighlightStyle } from '@codemirror/language';
+import { Prec } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { keymap } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
-import { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover } from '@valtown/codemirror-ts';
+import { continueKeymap } from '@valtown/codemirror-continue';
+import { tsSync, tsFacet, tsLinter, tsAutocomplete, tsHover, type HoverInfo } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { useThemeContext } from '@dxos/react-ui';
+import { type ThemeMode, useThemeContext } from '@dxos/react-ui';
 import {
   autocomplete,
   createBasicExtensions,
   createThemeExtensions,
   editorFullWidth,
-  editorGutter,
+  type EditorInputMode,
   editorMonospace,
+  EditorView,
+  folding,
   InputModeExtensions,
   useTextEditor,
   type UseTextEditorProps,
@@ -23,7 +31,9 @@ import { nonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = {
   id: string;
+  inputMode?: EditorInputMode;
   env?: VirtualTypeScriptEnvironment;
+  toolbar?: boolean;
 } & Pick<UseTextEditorProps, 'className' | 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>;
 
 export const TypescriptEditor = ({
@@ -34,6 +44,8 @@ export const TypescriptEditor = ({
   extensions,
   scrollTo,
   selection,
+  toolbar,
+  inputMode = 'vscode',
 }: TypescriptEditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef, focusAttributes } = useTextEditor(
@@ -56,24 +68,77 @@ export const TypescriptEditor = ({
             content: { className: editorFullWidth },
           },
         }),
-        editorGutter,
+        // NOTE: Not using default editor gutter because folding for code works best right beside text.
+        EditorView.theme({
+          '.cm-gutters': {
+            // Match margin from content.
+            marginTop: '16px',
+          },
+        }),
+        InputModeExtensions[inputMode],
+        folding(),
+        // Continues block comments when you hit Enter.
+        Prec.high(keymap.of(continueKeymap)),
         // TODO(burdon): Factor out.
         [
           editorMonospace,
           javascript({ typescript: true }),
           // https://github.com/val-town/codemirror-ts
           autocomplete({ override: env ? [tsAutocomplete()] : [] }),
-          env ? [tsFacet.of({ env, path: `/src/${id}.ts` }), tsSync(), tsLinter(), tsHover()] : [],
-          InputModeExtensions.vscode,
+          env
+            ? [
+                tsFacet.of({ env, path: `/src/${id}.ts` }),
+                tsSync(),
+                tsLinter(),
+                tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
+              ]
+            : [],
         ],
       ].filter(nonNullable),
       selection,
       scrollTo,
     }),
-    [id, extensions, themeMode, selection, scrollTo],
+    [id, extensions, themeMode, inputMode, selection, scrollTo],
+  );
+
+  return (
+    <div ref={parentRef} data-toolbar={toolbar ? 'enabled' : 'disabled'} className={className} {...focusAttributes} />
   );
+};
+
+const createTooltipRenderer = (themeMode: ThemeMode) => {
+  const theme = themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle;
+
+  const classFromKind = (_kind: string) => {
+    // E.g., localName, methodName, parameterName, etc.
+    const kind = _kind.endsWith('Name') ? 'name' : _kind;
+    const validTag = kind in tags;
+    if (!validTag) {
+      return '';
+    }
+
+    const tag = tags[kind as keyof typeof tags];
+    if (typeof tag === 'function') {
+      return '';
+    }
+
+    return theme.style([tag]) ?? '';
+  };
+
+  return (info: HoverInfo) => {
+    const div = document.createElement('div');
+    div.className = 'p-1 rounded border border-separator bg-baseSurface xs:max-w-80 max-w-lg';
+
+    if (info.quickInfo?.displayParts) {
+      for (const part of info.quickInfo.displayParts) {
+        const span = div.appendChild(document.createElement('span'));
+        span.className = classFromKind(part.kind);
+        span.innerText = part.text;
+      }
+    }
 
-  return <div ref={parentRef} className={className} {...focusAttributes} />;
+    return { dom: div };
+  };
 };
 
 export default TypescriptEditor;