@dxos/plugin-script 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/components/QueryEditor/QueryEditor.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+import { ScriptTarget } from 'typescript';
+
+import queryApi from '@dxos/echo-query/api.d.ts?raw';
+import { useAsyncEffect } from '@dxos/react-ui';
+
+import { Compiler } from '../../compiler';
+import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEditor';
+
+const GLOBALS = `
+  namespace QueryAPI {
+    ${queryApi}
+  }
+
+  declare global {
+    const Query: typeof QueryAPI.Query;
+    const Filter: typeof QueryAPI.Filter;
+    const Order: typeof QueryAPI.Order;
+  }
+
+  export {};
+`;
+
+export type QueryEditorProps = Omit<TypescriptEditorProps, 'env'>;
+
+export const QueryEditor = (props: QueryEditorProps) => {
+  const [compiler, setCompiler] = useState<Compiler>();
+
+  useAsyncEffect(async () => {
+    const compiler = new Compiler({
+      lib: ['ES5'],
+      target: ScriptTarget.ES2022,
+    });
+    await compiler.initialize(GLOBALS);
+    setCompiler(compiler);
+  }, []);
+
+  if (!compiler) {
+    return null;
+  }
+
+  return <TypescriptEditor {...props} env={compiler.environment} />;
+};

package/src/components/QueryEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './QueryEditor';

package/src/components/ScriptToolbar/ScriptToolbar.stories.tsx

@@ -2,29 +2,68 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { Atom, Registry } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
 
-import { type Meta } from '@storybook/react-vite';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Script } from '@dxos/functions';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { type ScriptToolbarState, type ScriptToolbarStateStore } from '../../hooks';
+import { translations } from '../../translations';
 
 import { ScriptToolbar } from './ScriptToolbar';
-import { templates } from '../../templates';
-
-export const Default = {
-  args: {
-    binding: 'example',
-    deployed: true,
-    templates,
-    onFormat: () => console.log('Format'),
-    onTogglePanel: () => {},
-  },
+
+// Create a mock store for stories.
+const createMockStore = (initialState: ScriptToolbarState = {}): ScriptToolbarStateStore => {
+  const registry = Registry.make();
+  const atom = Atom.make<ScriptToolbarState>(initialState);
+  return {
+    atom,
+    get value() {
+      return registry.get(atom);
+    },
+    update: (updater) => registry.set(atom, updater(registry.get(atom))),
+    set: (key, value) => registry.set(atom, { ...registry.get(atom), [key]: value }),
+  };
 };
 
-const meta: Meta = {
-  title: 'plugins/plugin-script/Toolbar',
-  component: ScriptToolbar,
-  decorators: [withTheme, withLayout()],
+const ScriptToolbarStory = () => {
+  const state = useMemo(() => createMockStore(), []);
+  const script = useMemo(
+    () =>
+      Script.make({
+        name: 'test',
+        description: 'test',
+        source: 'test',
+      }),
+    [],
+  );
+  return <ScriptToolbar state={state} script={script} />;
 };
 
+const meta = {
+  title: 'plugins/plugin-script/components/Toolbar',
+  component: ScriptToolbarStory,
+  // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+  decorators: [
+    withTheme(),
+    withLayout({ classNames: 'w-document-max-width' }),
+    withPluginManager({
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof ScriptToolbarStory>;
+
 export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -2,57 +2,61 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { ElevationProvider, useTranslation, type ThemedClassName } from '@dxos/react-ui';
-import { createGapSeparator, MenuProvider, rxFromSignal, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import { Obj } from '@dxos/echo';
+import { type Script } from '@dxos/functions';
+import { ElevationProvider, useTranslation } from '@dxos/react-ui';
+import {
+  type ActionGraphProps,
+  Menu,
+  type MenuRootProps,
+  createGapSeparator,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
 
 import {
   type CreateDeployOptions,
-  type ScriptToolbarState,
+  type ScriptToolbarStateStore,
   createDeploy,
   createFormat,
   createTemplateSelect,
   useDeployDeps,
 } from '../../hooks';
-import { SCRIPT_PLUGIN } from '../../meta';
-
-const createToolbar = ({ state, script, ...options }: CreateDeployOptions) =>
-  Rx.make((get) =>
-    get(
-      rxFromSignal(() => {
-        const templateSelect = createTemplateSelect(script);
-        const format = createFormat(script);
-        const gap = createGapSeparator();
-        const deploy = createDeploy({ state, script, ...options });
-        return {
-          nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
-          edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
-        };
-      }),
-    ),
-  );
+import { meta } from '../../meta';
 
-export type ScriptToolbarProps = ThemedClassName<{
+export type ScriptToolbarProps = Partial<MenuRootProps> & {
   role?: string;
-  script: ScriptType;
-  state: ScriptToolbarState;
-}>;
+  script: Script.Script;
+  state: ScriptToolbarStateStore;
+};
 
-export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+export const ScriptToolbar = ({ script, role, state, ...props }: ScriptToolbarProps) => {
+  const { t } = useTranslation(meta.id);
   const options = useDeployDeps({ script });
-  const toolbarCreator = useMemo(() => createToolbar({ state, script, t, ...options }), [state, script, options, t]);
-  const menu = useMenuActions(toolbarCreator);
+  const menu = useMemo(() => createToolbarActions({ state, script, t, ...options }), [state, script, options, t]);
+  const actions = useMenuActions(menu);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menu} attendableId={fullyQualifiedId(script)}>
-        <ToolbarMenu classNames={classNames} />
-      </MenuProvider>
+      <Menu.Root {...props} {...actions} attendableId={Obj.getDXN(script).toString()}>
+        <Menu.Toolbar />
+      </Menu.Root>
     </ElevationProvider>
   );
 };
+
+const createToolbarActions = ({ state, script, ...options }: CreateDeployOptions): Atom.Atom<ActionGraphProps> =>
+  Atom.make((get) => {
+    // Subscribe to state changes.
+    get(state.atom);
+    const templateSelect = createTemplateSelect(script);
+    const format = createFormat(script);
+    const gap = createGapSeparator();
+    const deploy = createDeploy({ state, script, ...options });
+    return {
+      nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
+      edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
+    };
+  });

package/src/components/TestPanel/TestPanel.tsx

@@ -5,18 +5,23 @@
 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 { Avatar, Icon, Input, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { errorText, mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 type State = 'pending' | 'responding';
 
 /**
  * Request or response.
  */
-type Message = { type: 'request' | 'response'; text?: string; data?: any; error?: Error };
+type Message = {
+  type: 'request' | 'response';
+  text?: string;
+  data?: any;
+  error?: Error;
+};
 
 export type TestPanelProps = ThemedClassName<{
   functionUrl?: string;
@@ -24,7 +29,7 @@ export type TestPanelProps = ThemedClassName<{
 
 // TODO(burdon): Need persistent history (currently lost when switching tabs)..
 export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const [input, setInput] = useState('');
@@ -41,7 +46,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
     }
   };
 
-  const controller = useRef<AbortController>();
+  const controller = useRef<AbortController>(null);
   useEffect(() => {
     return () => {
       handleStop();
@@ -50,7 +55,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
 
   const handleStop = () => {
     controller.current?.abort('stop');
-    controller.current = undefined;
+    controller.current = null;
   };
 
   const handleClear = () => {
@@ -61,8 +66,16 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
     inputRef.current?.focus();
   };
 
-  const handleResponse = ({ text, data, error }: { text?: string; data?: any; error?: Error } = {}) => {
-    controller.current = undefined;
+  const handleResponse = ({
+    text,
+    data,
+    error,
+  }: {
+    text?: string;
+    data?: any;
+    error?: Error;
+  } = {}) => {
+    controller.current = null;
     setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
     setResult('');
     setState(null);
@@ -108,7 +121,9 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
       // Check for error.
       if (!response.ok) {
         const text = await response.text();
-        handleResponse({ error: new Error(text || response.statusText || String(response.status)) });
+        handleResponse({
+          error: new Error(text || response.statusText || String(response.status)),
+        });
         return;
       }
 
@@ -163,7 +178,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
       {/* TODO(burdon): Replace with Thread. */}
       <MessageThread ref={scrollerRef} state={state} result={result} history={history} />
       {/* TODO(burdon): Replace with Form based on the function's input schema. */}
-      <Toolbar.Root classNames='p-2'>
+      <Toolbar.Root>
         <Input.Root>
           <Input.TextInput
             ref={inputRef}
@@ -174,12 +189,20 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
             onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
           />
         </Input.Root>
-        <Toolbar.Button onClick={() => handleRequest(input)}>
-          <Icon icon='ph--play--regular' size={4} />
-        </Toolbar.Button>
-        <Toolbar.Button onClick={() => (state ? handleStop() : handleClear())}>
-          <Icon icon={state ? 'ph--stop--regular' : 'ph--trash--regular'} size={4} />
-        </Toolbar.Button>
+        <Toolbar.IconButton
+          icon='ph--play--regular'
+          size={4}
+          label='Execute'
+          iconOnly
+          onClick={() => handleRequest(input)}
+        />
+        <Toolbar.IconButton
+          icon={state ? 'ph--stop--regular' : 'ph--trash--regular'}
+          size={4}
+          label={state ? 'Stop' : 'Clear'}
+          iconOnly
+          onClick={() => (state ? handleStop() : handleClear())}
+        />
       </Toolbar.Root>
     </div>
   );
@@ -196,48 +219,50 @@ type MessageThreadProps = {
 const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
   ({ state, history, result }: MessageThreadProps, forwardedRef) => {
     return (
-      <div ref={forwardedRef} className='flex flex-col gap-6 h-full p-2 overflow-x-hidden overflow-y-auto'>
-        {history.map((message, i) => (
-          <div key={i} className='grid grid-cols-[2rem_1fr_2rem]'>
-            <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
-            <div className='overflow-auto'>
-              <MessageItem message={message} />
-            </div>
-          </div>
-        ))}
-
-        {result?.length > 0 && (
-          <div className='grid grid-cols-[2rem_1fr_2rem]'>
-            <div className='p-1'>
-              {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />) || (
-                <Icon icon='ph--robot--regular' size={6} classNames='animate-[pulse_1s_ease-in-out_infinite]' />
-              )}
+      <ScrollArea.Root orientation='vertical' classNames='h-full' ref={forwardedRef}>
+        <ScrollArea.Viewport classNames='gap-6 p-2'>
+          {history.map((message, i) => (
+            <div key={i} className='grid grid-cols-[2rem_1fr_2rem]'>
+              <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
+              <div className='overflow-auto'>
+                <MessageItem message={message} />
+              </div>
             </div>
-            <div className='overflow-auto'>
-              <MessageItem message={{ type: 'response', text: result }} />
+          ))}
+
+          {result?.length > 0 && (
+            <div className='grid grid-cols-[2rem_1fr_2rem]'>
+              <div className='p-1'>
+                {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />) || (
+                  <Icon icon='ph--robot--regular' size={6} classNames='animate-[pulse_1s_ease-in-out_infinite]' />
+                )}
+              </div>
+              <div className='overflow-auto'>
+                <MessageItem message={{ type: 'response', text: result }} />
+              </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
     );
   },
 );
 
 const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
   const { type, text, data, error } = message;
-  const wrapper = 'p-1 px-2 rounded-md bg-hoverSurface overflow-auto';
+  const wrapper = 'p-1 px-2 rounded-md bg-hover-surface overflow-auto';
   return (
     <div className={mx('flex', type === 'request' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
-      {error && <div className={mx(wrapper, 'whitespace-pre', errorText)}>{String(error)}</div>}
+      {error && <div className={mx(wrapper, 'whitespace-pre text-error-text')}>{String(error)}</div>}
 
       {text !== undefined && (
-        <div className={mx(wrapper, type === 'request' && 'bg-primary-400 dark:bg-primary-600')}>
+        <div className={mx(wrapper, type === 'request' && 'bg-primary-500 dark:bg-primary-600')}>
           {text || '\u00D8'}
         </div>
       )}
 
       {data && (
-        <SyntaxHighlighter language='json' className={mx(wrapper, 'px-8 py-2 text-xs')}>
+        <SyntaxHighlighter language='json' className={mx(wrapper, 'text-xs')}>
           {JSON.stringify(data, null, 2)}
         </SyntaxHighlighter>
       )}

package/src/components/TestPanel/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './TestContainer';
 export * from './TestPanel';

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

@@ -2,43 +2,98 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-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';
-
-// TODO(burdon): Features:
-// - language support for S
-// - hierarchical editor (DND)
-// - virtual document image rendering
-// - mobile rendering error
-
-// TODO(burdon): JSX.
-// TODO(burdon): Effect schema.
-// TODO(burdon): react-buddy for storybook?
-
-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} />;
-};
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { createDataExtensions } from '@dxos/ui-editor';
+import { trim } from '@dxos/util';
+
+import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+
+const SCRIPT = trim`
+  x * 2
+`;
+
+const DefaultStory = (props: TypescriptEditorProps) => {
+  const object = useMemo(() => createObject({ content: SCRIPT }), []);
+  const [result, setResult] = useState<object | undefined>({});
+
+  // 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],
+  // );
+
+  const extensions = useMemo(
+    () => [
+      createDataExtensions({
+        id: object.id,
+        text: createDocAccessor(object, ['content']),
+      }),
+    ],
+    [],
+  );
+
+  const handleRun = useCallback(async () => {
+    try {
+      const definitions: [string, any][] = [['x', 100]];
 
-export const Default = {};
+      // 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),
+      );
 
-const meta: Meta = {
-  title: 'plugins/plugin-script/TypescriptEditor',
+      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 role='none' className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
+          <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
+          <Json data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+        </div>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  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 = {
+  args: {
+    id: 'test',
+  },
+};