@dxos/plugin-script 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

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

@@ -2,36 +2,98 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { createDocAccessor } from '@dxos/echo-db';
+import { createObject } from '@dxos/react-client/echo';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { createDataExtensions } from '@dxos/ui-editor';
+import { trim } from '@dxos/util';
+
+import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+
+const SCRIPT = trim`
+  x * 2
+`;
 
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { createDataExtensions } from '@dxos/react-ui-editor';
-import { withTheme } from '@dxos/storybook-utils';
+const DefaultStory = (props: TypescriptEditorProps) => {
+  const object = useMemo(() => createObject({ content: SCRIPT }), []);
+  const [result, setResult] = useState<object | undefined>({});
 
-import { templates } from '../../templates';
+  // TODO(burdon): Make this work.
+  // const object = useMemo(() => Text.make(templates[1].source), []);
+  // const script = useMemo(
+  //   () =>
+  //     Obj.make(ScriptType, {
+  //       source: Ref.make(createObject({ content: templates[0].source })),
+  //     }),
+  //   [object],
+  // );
 
-import { TypescriptEditor } from './TypescriptEditor';
+  const extensions = useMemo(
+    () => [
+      createDataExtensions({
+        id: object.id,
+        text: createDocAccessor(object, ['content']),
+      }),
+    ],
+    [],
+  );
 
-const DefaultStory = () => {
-  const object = useMemo(() => createObject({ content: templates[0].source }), []);
-  const initialValue = useMemo(() => object.content, [object]);
-  const accessor = useMemo(() => createDocAccessor(object, ['content']), [object]);
-  const extensions = useMemo(() => [createDataExtensions({ id: object.id, text: accessor })], [object.id, accessor]);
-  return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} />;
+  const handleRun = useCallback(async () => {
+    try {
+      const definitions: [string, any][] = [['x', 100]];
+
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const result = new Function(...definitions.map(([name]) => name), `return ${object.content.trim()}`)(
+        ...definitions.map(([, value]) => value),
+      );
+
+      setResult({
+        timestamp: Date.now(),
+        result,
+      });
+    } catch (err) {
+      setResult({
+        timestamp: Date.now(),
+        error: String(err),
+      });
+    }
+  }, [object]);
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <div className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
+          <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
+          <JsonHighlighter data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+        </div>
+      </Panel.Content>
+    </Panel.Root>
+  );
 };
 
 const meta = {
-  title: 'plugins/plugin-script/TypescriptEditor',
-  component: TypescriptEditor as any,
+  title: 'plugins/plugin-script/components/TypescriptEditor',
+  component: TypescriptEditor,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-document-max-width' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    id: 'test',
+  },
+};

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -4,103 +4,114 @@
 
 import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
-import { defaultHighlightStyle } from '@codemirror/language';
+import { HighlightStyle } from '@codemirror/language';
 import { lintKeymap } from '@codemirror/lint';
 import { Prec } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { keymap } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
+import { composeRefs } from '@radix-ui/react-compose-refs';
 import { type VirtualTypeScriptEnvironment } from '@typescript/vfs';
 import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
 import React from 'react';
 
 import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
 import {
-  type EditorInputMode,
+  type BasicExtensionsOptions,
   InputModeExtensions,
-  type UseTextEditorProps,
   createBasicExtensions,
   createThemeExtensions,
-  folding,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+  defaultStyles,
+} from '@dxos/ui-editor';
+import { type EditorInputMode } from '@dxos/ui-editor/types';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = ThemedClassName<
   {
     id: string;
+    role?: string;
     inputMode?: EditorInputMode;
     toolbar?: boolean;
     env?: VirtualTypeScriptEnvironment;
+    options?: BasicExtensionsOptions;
   } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>
 >;
 
-export const TypescriptEditor = ({
-  classNames,
-  id,
-  inputMode = 'vscode',
-  toolbar,
-  env,
-  initialValue,
-  extensions,
-  scrollTo,
-  selection,
-}: TypescriptEditorProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef, focusAttributes } = useTextEditor(
-    () => ({
+export const TypescriptEditor = composable<HTMLDivElement, TypescriptEditorProps>(
+  (
+    {
+      classNames,
       id,
+      role = 'article',
+      inputMode = 'vscode',
+      env,
+      options,
       initialValue,
-      selection,
+      extensions,
       scrollTo,
-      extensions: [
-        extensions,
-        createBasicExtensions({
-          highlightActiveLine: true,
-          indentWithTab: true,
-          lineNumbers: true,
-          lineWrapping: false,
-          monospace: true,
-          scrollPastEnd: true,
-          search: true,
-        }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        InputModeExtensions[inputMode],
-        folding(),
-        // Continues block comments when pressing Enter.
-        Prec.high(keymap.of(continueKeymap)),
+      selection,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes } = useTextEditor(
+      () => ({
+        id,
+        initialValue,
+        selection,
+        scrollTo,
+        extensions: [
+          extensions,
+          createBasicExtensions({
+            highlightActiveLine: true,
+            indentWithTab: true,
+            lineNumbers: true,
+            lineWrapping: false,
+            scrollPastEnd: role !== 'section',
+            search: true,
+            ...options,
+          }),
+          createThemeExtensions({
+            monospace: true,
+            themeMode,
+            syntaxHighlighting: true,
+          }),
 
-        // TODO(burdon): Factor out.
-        javascript({ typescript: true }),
-        // https://github.com/val-town/codemirror-ts
-        keymap.of(completionKeymap),
-        autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
-        keymap.of(lintKeymap),
-        env && [
-          tsFacet.of({ env, path: `/src/${id}.ts` }),
-          tsSync(),
-          tsLinter(),
-          tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
-        ],
-      ].filter(isNonNullable),
-    }),
-    [id, extensions, themeMode, inputMode, selection, scrollTo],
-  );
+          InputModeExtensions[inputMode],
+          javascript({ typescript: true }),
+          autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
 
-  return (
-    <div
-      ref={parentRef}
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      className={mx(classNames)}
-      {...focusAttributes}
-    />
-  );
-};
+          // Continues block comments when pressing Enter.
+          Prec.high(keymap.of(continueKeymap)),
+          keymap.of(completionKeymap),
+          keymap.of(lintKeymap),
+
+          // https://github.com/val-town/codemirror-ts
+          env && [
+            // TODO(burdon): Fix type.
+            tsFacet.of({ env: env as any, path: `./src/${id}.ts` }),
+            tsSync(),
+            tsLinter(),
+            tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
+          ],
+        ].filter(isNonNullable),
+      }),
+      [themeMode, id, extensions, inputMode, selection, scrollTo, env],
+    );
 
+    return (
+      <div {...composableProps(props, { classNames, ...focusAttributes })} ref={composeRefs(parentRef, forwardedRef)} />
+    );
+  },
+);
+
+// TODO(burdon): Factor out (react-ui-editor).
 const createTooltipRenderer = (themeMode: ThemeMode) => {
-  const theme = themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle;
+  const theme = HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light);
 
   const classFromKind = (_kind: string) => {
     // E.g., localName, methodName, parameterName, etc.
@@ -119,18 +130,15 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
   };
 
   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 { dom: div };
+    const children =
+      info.quickInfo?.displayParts?.map(({ kind, text }) =>
+        Domino.of('span').classNames(classFromKind(kind)).text(text),
+      ) ?? [];
+    return {
+      dom: Domino.of('div')
+        .classNames('xs:max-w-80 max-w-lg p-1 bg-base-surface rounded-sm border border-separator')
+        .append(...children).root,
+    };
   };
 };
 

package/src/components/index.ts

@@ -2,11 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
+import { type ComponentType, lazy } from 'react';
 
-export * from './Settings';
+export * from './FramePanel';
+export * from './NotebookStack';
+export * from './QueryEditor';
+export * from './ScriptToolbar';
 export * from './TestPanel';
-export { DEPLOYMENT_DIALOG } from './DeploymentDialog';
+export * from './TypescriptEditor';
 
-export const ScriptContainer = lazy(() => import('./ScriptContainer'));
-export const DeploymentDialog = lazy(() => import('./DeploymentDialog'));
+export const ScriptPluginSettings: ComponentType<any> = lazy(() => import('./ScriptPluginSettings'));

package/src/constants.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from '#meta';
+
+export const DEPLOYMENT_DIALOG = `${meta.id}.deployment.dialog`;

package/src/containers/DeploymentDialog/DeploymentDialog.stories.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { Dialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { AccessToken } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { DeploymentDialog } from './DeploymentDialog';
+
+const DeploymentDialogStory = () => {
+  const accessToken = useMemo(
+    () =>
+      Obj.make(AccessToken.AccessToken, {
+        source: 'example.com',
+        token: 'example-token',
+      }),
+    [],
+  );
+  const scriptTemplates = useMemo(
+    () => [
+      { id: 't-1', name: 'Script 1', source: 'template1' },
+      { id: 't-2', name: 'Script 2', source: 'template2' },
+      { id: 't-3', name: 'Script 3', source: 'template3' },
+    ],
+    [],
+  );
+  return (
+    <Dialog.Root defaultOpen={true}>
+      <Dialog.Overlay>
+        <DeploymentDialog accessToken={accessToken} scriptTemplates={scriptTemplates} />
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-script/containers/DeploymentDialog',
+  component: DeploymentDialogStory,
+  parameters: { translations },
+  // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
+    }),
+  ],
+} satisfies Meta<typeof DeploymentDialogStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/DeploymentDialog/DeploymentDialog.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useMemo } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { getSpace } from '@dxos/react-client/echo';
+import { Button, Dialog, useTranslation } from '@dxos/react-ui';
+import { type AccessToken } from '@dxos/types';
+
+import { useCreateAndDeployScriptTemplates } from '#hooks';
+import { meta } from '#meta';
+
+import { type Template } from '../../templates';
+
+// TODO(ZaymonFC):
+//  - Show activity and feedback to the user.
+//  - Only take an array of templateIds and get the name from the data.
+//  - Pending / onError states.
+
+export type DeploymentDialogProps = {
+  accessToken: AccessToken.AccessToken;
+  scriptTemplates: Template[];
+};
+
+export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDialogProps) => {
+  const { t } = useTranslation(meta.id);
+  const space = useMemo(() => getSpace(accessToken), [accessToken]);
+
+  // TODO(ZaymonFC): Thinking further. All of this should get moved to intents to run async in the background.
+  //   Deployment shouldn't be tied to the lifecycle of the dialogue component.
+  const { handleCreateAndDeployScripts, status } = useCreateAndDeployScriptTemplates(space, scriptTemplates);
+  const { invokePromise } = useOperationInvoker();
+
+  useEffect(() => {
+    if (status === 'success') {
+      // TODO(ZaymonFC): We can probably re-use this toast for normal script deployment.
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${meta.id}.deployment-success`,
+        icon: 'ph--check--regular',
+        duration: Infinity,
+        title: ['script-deployment-toast.label', { ns: meta.id, count: scriptTemplates.length }],
+        description: ['script-deployment-toast.description', { ns: meta.id, count: scriptTemplates.length }],
+        closeLabel: ['script-deployment-toast-close.label', { ns: meta.id, count: scriptTemplates.length }],
+      });
+      void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+    }
+    if (status === 'error') {
+      void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${meta.id}.deployment-error`,
+        icon: 'ph--warning--regular',
+        duration: Infinity,
+        title: ['script-deployment-error-toast.label', { ns: meta.id, count: scriptTemplates.length }],
+        description: ['script-deployment-error-toast.description', { ns: meta.id, count: scriptTemplates.length }],
+        closeLabel: ['script-deployment-error-toast-close.label', { ns: meta.id, count: scriptTemplates.length }],
+      });
+    }
+  }, [status, invokePromise]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('deployment-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <p>
+          {t('deployment-dialog-scripts-found.message', {
+            count: scriptTemplates.length,
+          })}
+        </p>
+        <ul className='pt-2'>
+          {scriptTemplates.map((template) => {
+            return <li key={template.id}>{template.name}</li>;
+          })}
+        </ul>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button disabled={status === 'pending'}>{t('deployment-dialog-skip-button.label')}</Button>
+        </Dialog.Close>
+        <Button variant='primary' onClick={handleCreateAndDeployScripts} disabled={status === 'pending'}>
+          {status === 'pending'
+            ? t('deployment-dialog-deploy-functions-pending-button.label', {
+                count: scriptTemplates.length,
+              })
+            : t('deployment-dialog-deploy-functions-button.label', {
+                count: scriptTemplates.length,
+              })}
+        </Button>
+      </Dialog.ActionBar>
+    </Dialog.Content>
+  );
+};

package/src/containers/DeploymentDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { DeploymentDialog as default } from './DeploymentDialog';

package/src/containers/NotebookContainer/NotebookContainer.stories.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { SERVICES_CONFIG } from '@dxos/ai/testing';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AgentPrompt } from '@dxos/assistant-toolkit';
+import { Operation } from '@dxos/compute';
+import { Filter } from '@dxos/echo';
+import { AssistantPlugin } from '@dxos/plugin-assistant/plugin';
+import { AutomationPlugin } from '@dxos/plugin-automation/plugin';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { ExplorerPlugin } from '@dxos/plugin-explorer/plugin';
+import { Markdown } from '@dxos/plugin-markdown';
+import { MarkdownPlugin } from '@dxos/plugin-markdown/plugin';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Config, useClient } from '@dxos/react-client';
+import { useQuery } from '@dxos/react-client/echo';
+import { withLayout } from '@dxos/react-ui/testing';
+import { DataTypes } from '@dxos/schema';
+
+import { createNotebook } from '#testing';
+import { translations } from '#translations';
+import { Notebook } from '#types';
+
+import { NotebookContainer } from './NotebookContainer';
+
+const meta: Meta<typeof NotebookContainer> = {
+  title: 'plugins/plugin-script/containers/NotebookContainer',
+  component: NotebookContainer,
+  render: (args) => {
+    const client = useClient();
+    const space = client.spaces.get()[0];
+    const notebooks = useQuery(space?.db, Filter.type(Notebook.Notebook));
+    return <NotebookContainer {...args} subject={notebooks[0]} attendableId='test' />;
+  },
+  decorators: [
+    withLayout({ layout: 'column', classNames: 'w-document-max-width' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          // TODO(wittjosiah): ComputeRuntime requires edge to be configured or it will throw.
+          config: new Config({
+            runtime: {
+              services: SERVICES_CONFIG.REMOTE,
+            },
+          }),
+          types: [...DataTypes, Notebook.Notebook, Operation.PersistentOperation, Markdown.Document],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+
+              personalSpace.db.add(createNotebook());
+              personalSpace.db.add(Markdown.make({ content: '# Hello World' }));
+              personalSpace.db.add(Operation.serialize(AgentPrompt));
+            }),
+        }),
+        AssistantPlugin(),
+        AutomationPlugin(),
+        ExplorerPlugin(),
+        MarkdownPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    role: 'article',
+    subject: undefined as any,
+  },
+};