@dxos/plugin-script 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -12,20 +12,20 @@ import { tags } from '@lezer/highlight';
 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 React, { memo } from 'react';
 
-import { Domino, type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+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 BasicExtensionsOptions,
   type EditorInputMode,
   InputModeExtensions,
-  type UseTextEditorProps,
   createBasicExtensions,
   createThemeExtensions,
   defaultStyles,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = ThemedClassName<
@@ -39,71 +39,68 @@ export type TypescriptEditorProps = ThemedClassName<
   } & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>
 >;
 
-export const TypescriptEditor = ({
-  classNames,
-  id,
-  role = 'article',
-  inputMode = 'vscode',
-  toolbar,
-  env,
-  options,
-  initialValue,
-  extensions,
-  scrollTo,
-  selection,
-}: TypescriptEditorProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef, focusAttributes } = useTextEditor(
-    () => ({
-      id,
-      initialValue,
-      selection,
-      scrollTo,
-      extensions: [
-        extensions,
-        createBasicExtensions({
-          highlightActiveLine: true,
-          indentWithTab: true,
-          lineNumbers: true,
-          lineWrapping: false,
-          monospace: true,
-          scrollPastEnd: role !== 'section',
-          search: true,
-          ...options,
-        }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        InputModeExtensions[inputMode],
+export const TypescriptEditor = memo(
+  ({
+    classNames,
+    id,
+    role = 'article',
+    inputMode = 'vscode',
+    env,
+    options,
+    initialValue,
+    extensions,
+    scrollTo,
+    selection,
+  }: TypescriptEditorProps) => {
+    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,
+          }),
 
-        javascript({ typescript: true }),
-        autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
+          InputModeExtensions[inputMode],
+          javascript({ typescript: true }),
+          autocompletion({ override: env ? [tsAutocomplete()] : undefined }),
 
-        // Continues block comments when pressing Enter.
-        Prec.high(keymap.of(continueKeymap)),
-        keymap.of(completionKeymap),
-        keymap.of(lintKeymap),
+          // 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 && [
-          tsFacet.of({ env, path: `/src/${id}.ts` }),
-          tsSync(),
-          tsLinter(),
-          tsHover({ renderTooltip: createTooltipRenderer(themeMode) }),
-        ],
-      ].filter(isNonNullable),
-    }),
-    [id, extensions, themeMode, inputMode, selection, scrollTo],
-  );
+          // 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],
+    );
 
-  // TODO(brudon): Use react-ui-editor's Editor component.
-  return (
-    <div
-      ref={parentRef}
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      className={mx(classNames)}
-      {...focusAttributes}
-    />
-  );
-};
+    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+  },
+);
 
 // TODO(burdon): Factor out (react-ui-editor).
 const createTooltipRenderer = (themeMode: ThemeMode) => {
@@ -126,15 +123,14 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
   };
 
   return (info: HoverInfo) => {
+    const children =
+      info.quickInfo?.displayParts?.map(({ kind, text }) =>
+        Domino.of('span').classNames(classFromKind(kind)).text(text),
+      ) ?? [];
     return {
       dom: Domino.of('div')
-        .classNames('xs:max-is-80 max-is-lg p-1 bg-baseSurface rounded border border-separator')
-        .children(
-          ...(info.quickInfo?.displayParts?.map(({ kind, text }) =>
-            Domino.of('span').classNames(classFromKind(kind)).text(text),
-          ) ?? []),
-        )
-        .build(),
+        .classNames('xs:max-w-80 max-w-lg p-1 bg-base-surface rounded-sm border border-separator')
+        .children(...children).root,
     };
   };
 };

package/src/components/index.ts

@@ -2,14 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
+export * from './FrameContainer';
 export * from './NotebookStack';
-export * from './Settings';
+export * from './QueryEditor';
+export * from './ScriptToolbar';
 export * from './TestPanel';
-
-export { DEPLOYMENT_DIALOG } from './DeploymentDialog';
-
-export const ScriptContainer = lazy(() => import('./ScriptContainer'));
-export const DeploymentDialog = lazy(() => import('./DeploymentDialog'));
-export const NotebookContainer = lazy(() => import('./NotebookContainer'));
+export * from './TypescriptEditor';

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,61 @@
+//
+// 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';
+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}>
+      <DeploymentDialog accessToken={accessToken} scriptTemplates={scriptTemplates} />
+    </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, IconButton, 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>
+      <div className='flex justify-between items-center'>
+        <Dialog.Title>{t('deployment dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <IconButton icon='ph--x--regular' size={4} label='Close' iconOnly density='fine' variant='ghost' />
+        </Dialog.Close>
+      </div>
+      <div role='none' className='py-4'>
+        {/* TODO: Implement deployment logic and UI. */}
+        <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>
+      </div>
+      <div role='none' className='flex flex-row-reverse gap-1'>
+        <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.Close asChild disabled={status === 'pending'}>
+          <Button disabled={status === 'pending'}>{t('deployment dialog skip button label')}</Button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  );
+};

package/src/containers/DeploymentDialog/index.ts

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

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

@@ -0,0 +1,87 @@
+//
+// 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 { AgentFunctions } from '@dxos/assistant-toolkit';
+import { Filter } from '@dxos/echo';
+import { Function, serializeFunction } from '@dxos/functions';
+import { AssistantPlugin } from '@dxos/plugin-assistant';
+import { AutomationPlugin } from '@dxos/plugin-automation';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { ExplorerPlugin } from '@dxos/plugin-explorer';
+import { Markdown, MarkdownPlugin } from '@dxos/plugin-markdown';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Config, useClient } from '@dxos/react-client';
+import { useQuery } from '@dxos/react-client/echo';
+import { withLayout, withTheme } 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.default;
+    const notebooks = useQuery(space?.db, Filter.type(Notebook.Notebook));
+    return <NotebookContainer {...args} subject={notebooks[0]} />;
+  },
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-prose-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, Function.Function, Markdown.Document],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* Effect.promise(() => client.spaces.waitUntilReady());
+              const space = client.spaces.default;
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              space.db.add(createNotebook());
+              space.db.add(Markdown.make({ content: '# Hello World' }));
+              space.db.add(serializeFunction(AgentFunctions.Prompt));
+            }),
+        }),
+        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,
+  },
+};