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

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-base 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;

package/src/index.ts

@@ -2,13 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ScriptPlugin } from './ScriptPlugin';
-
-export default ScriptPlugin;
-
 export * from './bundler';
-export * from './compiler';
+export { ScriptCapabilities } from './capabilities';
 export * from './components';
-export * from './types';
+export * from './meta';
 
 export * from './ScriptPlugin';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
 
-export default {
+export const meta = {
   id: SCRIPT_PLUGIN,
   name: 'Scripts',
   description: 'Distributed functions.',

package/src/templates/email.ts

@@ -3,7 +3,8 @@
 //
 
 /**
- * Stores a message into ECHO Mailbox object.
+ * Appends a message to the end of a Document configured through a trigger.
+ * Trigger must have a targetDocumentId field set in Meta.
  */
 export default async ({
   event: {
@@ -11,28 +12,30 @@ export default async ({
   },
   context: { space },
 }: any) => {
-  const {
-    data: {
-      objects: [message],
-    },
-  } = await request.json();
+  const { data, trigger } = (await request.json()) as RequestPayload;
 
-  const mailbox = await space.crud.query({ __typename: 'dxos.org/type/MailboxType' }).first();
-  if (!mailbox) {
-    return new Response('Mailbox not found.', { status: 500 });
-  }
+  const documentId = trigger.meta.targetDocumentId;
+  const document = await space.db.query({ id: documentId }, { format: 'plain' }).first();
 
-  await space.crud.push(
-    { id: mailbox.id },
-    {
-      sender: { email: message.from },
-      timestamp: new Date(message.created).toISOString(),
-      text: message.body,
-      properties: {
-        subject: message.subject,
-        to: [{ email: message.to }],
-      },
-    },
-  );
-  return new Response(JSON.stringify(message));
+  const contentId = document.content['/'].split(':')[3];
+  const documentContent = await space.db.query({ id: contentId }, { format: 'plain' }).first();
+  const modifiedContent = [
+    documentContent.content,
+    '',
+    '---',
+    `**From:** ${data.from}`,
+    `**Subject:** ${data.subject}`,
+    `**Date:** ${data.created}`,
+    '',
+    data.body,
+  ].join('\n');
+
+  await space.db.update({ id: contentId }, { content: modifiedContent });
+
+  return new Response(JSON.stringify({ success: true }));
+};
+
+type RequestPayload = {
+  data: { from: string; subject: string; created: string; body: string };
+  trigger: { meta: { targetDocumentId: string } };
 };

package/src/{templates.ts → templates/index.ts}

@@ -3,15 +3,15 @@
 //
 
 // @ts-ignore
-import chat from './templates/chat.ts?raw';
+import chat from './chat.ts?raw';
 // @ts-ignore
-import chess from './templates/chess.ts?raw';
+import chess from './chess.ts?raw';
 // @ts-ignore
-import echo from './templates/echo.ts?raw';
+import echo from './echo.ts?raw';
 // @ts-ignore
-import email from './templates/email.ts?raw';
+import email from './email.ts?raw';
 // @ts-ignore
-import forex from './templates/forex.ts?raw';
+import forex from './forex.ts?raw';
 
 const removeHeader = (str: string) => str.split('\n').slice(4).join('\n');
 

package/src/translations.ts

@@ -2,11 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
+import { ScriptType } from '@dxos/functions';
+
 import { SCRIPT_PLUGIN } from './meta';
 
 export default [
   {
     'en-US': {
+      [ScriptType.typename]: {
+        'typename label': 'Script',
+      },
       [SCRIPT_PLUGIN]: {
         'plugin name': 'Scripts',
         'object title placeholder': 'New script',
@@ -27,6 +32,22 @@ export default [
         'function url label': 'Invocation URL',
         'function binding label': 'Function binding',
         'function binding placeholder': 'BINDING',
+        'script publish settings label': 'Publishing',
+        'script publish settings description': 'Scripts can be shared publicly as Github gists.',
+        'no github token label': 'This space has no Github access token available.',
+        'open token manager label': 'Open Token Manager',
+        'publish label': 'Publish',
+        'publishing label': 'Publishing',
+        'editor input mode label': 'Editor input mode',
+        'select editor input mode placeholder': 'Select editor input mode…',
+        'settings editor input mode default label': 'Default',
+        'settings editor input mode vim label': 'Vim',
+        'settings editor input mode vscode label': 'VS Code',
+        'view group label': 'View',
+        'view editor label': 'Editor',
+        'view split label': 'Split',
+        'view debug label': 'Debug',
+        'template select group label': 'Select template',
       },
     },
   },

package/src/types.ts

@@ -2,37 +2,38 @@
 // Copyright 2023 DXOS.org
 //
 
-import type {
-  IntentResolverProvides,
-  MetadataRecordsProvides,
-  SettingsProvides,
-  SurfaceProvides,
-  TranslationsProvides,
-} from '@dxos/app-framework';
+import { TitleAnnotationId } from '@effect/schema/AST';
+
+import { SpaceSchema } from '@dxos/client/echo';
 import { S } from '@dxos/echo-schema';
 import { ScriptType } from '@dxos/functions';
-import { type SchemaProvides } from '@dxos/plugin-space';
+import { EditorInputMode } from '@dxos/react-ui-editor';
 
 import { SCRIPT_PLUGIN } from './meta';
 
 export namespace ScriptAction {
   const SCRIPT_ACTION = `${SCRIPT_PLUGIN}/action`;
 
+  export const CreateScriptSchema = S.Struct({
+    name: S.optional(S.String),
+    // TODO(wittjosiah): Placeholder annotation?
+    gistUrl: S.optional(S.String.annotations({ [TitleAnnotationId]: 'Import from Gist (url)' })),
+  });
+
+  export type CreateScriptProps = S.Schema.Type<typeof CreateScriptSchema>;
+
   export class Create extends S.TaggedClass<Create>()(`${SCRIPT_ACTION}/create`, {
-    input: S.Struct({
-      name: S.optional(S.String),
-    }),
+    input: S.extend(CreateScriptSchema, S.Struct({ space: SpaceSchema })),
     output: S.Struct({
       object: ScriptType,
     }),
   }) {}
 }
 
-export type ScriptSettingsProps = {};
+export const ScriptSettingsSchema = S.mutable(
+  S.Struct({
+    editorInputMode: EditorInputMode,
+  }),
+);
 
-export type ScriptPluginProvides = IntentResolverProvides &
-  MetadataRecordsProvides &
-  SchemaProvides &
-  SettingsProvides<ScriptSettingsProps> &
-  SurfaceProvides &
-  TranslationsProvides;
+export type ScriptSettingsProps = S.Schema.Type<typeof ScriptSettingsSchema>;