npm - @dxos/plugin-script - Versions diffs - 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b - Mend

@dxos/plugin-script 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (497) hide show

package/src/capabilities/settings/settings.ts ADDED Viewed

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+import * as Effect from 'effect/Effect';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
+import { meta } from '../../meta';
+import { ScriptCapabilities, ScriptSettings } from '../../types';
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: ScriptSettings,
+      defaultValue: () => ({
+        editorInputMode: 'vscode' as const,
+      }),
+    });
+    return [
+      Capability.contributes(ScriptCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: ScriptSettings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/compiler/compiler.ts CHANGED Viewed

@@ -12,6 +12,8 @@ import ts from 'typescript';
 import { invariant } from '@dxos/invariant';
+const GLOBALS = 'globals.d.ts';
 const defaultOptions: ts.CompilerOptions = {
   lib: ['DOM', 'es2022'],
   target: ts.ScriptTarget.ES2022,
@@ -23,16 +25,21 @@ export class Compiler {
   constructor(private readonly _options: ts.CompilerOptions = defaultOptions) {}
-  async initialize(): Promise<void> {
+  async initialize(globals?: string): Promise<void> {
     if (this._env) {
       return;
     }
     // TODO(wittjosiah): Figure out how to get workers working in plugin packages.
     //   https://github.com/val-town/codemirror-ts?tab=readme-ov-file#setup-worker
-    this._fsMap = await createDefaultMapFromCDN(this._options, '5.5.4', true, ts);
+    this._fsMap = await createDefaultMapFromCDN(this._options, '5.7.2', true, ts);
+    if (globals) {
+      this._fsMap.set(GLOBALS, globals);
+    }
+    const rootFiles = globals ? [GLOBALS] : [];
     const system = createSystem(this._fsMap);
-    this._env = createVirtualTypeScriptEnvironment(system, [], ts, this._options);
+    this._env = createVirtualTypeScriptEnvironment(system, rootFiles, ts, this._options);
   }
   get environment() {

package/src/components/FrameContainer/FrameContainer.tsx CHANGED Viewed

@@ -5,13 +5,13 @@
 import React, { useEffect, useRef } from 'react';
 import { clientServiceBundle } from '@dxos/client-protocol';
-import { type BundleResult } from '@dxos/functions/bundler';
+import { type BundleResult } from '@dxos/functions-runtime/bundler';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
+import { mx } from '@dxos/ui-theme';
 export type FrameContainerProps = {
   containerUrl: string;
@@ -49,7 +49,9 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
   invariant(result.sourceHash, 'Source hash is required.');
   const sourceHash = Buffer.from(result.sourceHash).toString('hex');
   const src =
-    'bundle' in result ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}` : undefined;
+    'bundle' in result
+      ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(new TextDecoder().decode(Object.values(result.bundle as any)[0] as Uint8Array))}`
+      : undefined;
   return (
     <>
@@ -59,8 +61,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
         <div className='relative'>
           <div
             className={mx(
-              baseSurface,
-              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] ring rounded',
+              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] bg-base-surface ring rounded-sm',
               'z-20 overflow-x-hidden overflow-y-auto',
             )}
           >

package/src/components/FrameContainer/frame.html CHANGED Viewed

@@ -1,25 +1,25 @@
 <html>
-<head>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script type="importmap">
-    __IMPORT_MAP__
-  </script>
+  <head>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="importmap">
+      __IMPORT_MAP__
+    </script>
-  <script type="module">
-    import RefreshRuntime from '/@react-refresh';
-    RefreshRuntime.injectIntoGlobalHook(window);
-    window.$RefreshReg$ = () => {};
-    window.$RefreshSig$ = () => (type) => type;
-    window.__vite_plugin_react_preamble_installed__ = true;
-  </script>
-  <script type="module" src="/@vite/client"></script>
-</head>
-<body>
-  <div id="root"></div>
+    <script type="module">
+      import RefreshRuntime from '/@react-refresh';
+      RefreshRuntime.injectIntoGlobalHook(window);
+      window.$RefreshReg$ = () => {};
+      window.$RefreshSig$ = () => (type) => type;
+      window.__vite_plugin_react_preamble_installed__ = true;
+    </script>
+    <script type="module" src="/@vite/client"></script>
+  </head>
+  <body>
+    <div id="root"></div>
-  <!-- Prevent vite from compiling this. -->
-  <script type="module">
-    eval('import("@frame/main")');
-  </script>
-</body>
+    <!-- Prevent vite from compiling this. -->
+    <script type="module">
+      eval('import("@frame/main")');
+    </script>
+  </body>
 </html>

package/src/components/NotebookStack/NotebookCell.tsx CHANGED Viewed

@@ -4,27 +4,23 @@
 import React, { useCallback, useMemo } from 'react';
-import { Surface } from '@dxos/app-framework';
-import { Query, Ref } from '@dxos/echo';
-import { QueryBuilder } from '@dxos/echo-query';
+import { Surface } from '@dxos/app-framework/ui';
+import { type Database, Obj } from '@dxos/echo';
+import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { useChatProcessor, useChatServices } from '@dxos/plugin-assistant';
-import { Chat } from '@dxos/plugin-assistant';
-import { Graph } from '@dxos/plugin-explorer/types';
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { type Space } from '@dxos/react-client/echo';
-import { useAsyncEffect, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { TemplateEditor } from '@dxos/plugin-assistant';
+import { useThemeContext, useTranslation } from '@dxos/react-ui';
 import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import { EditorContent, type EditorContentProps } from '@dxos/react-ui-editor';
 import {
-  Editor,
-  type EditorProps,
+  type BasicExtensionsOptions,
   createBasicExtensions,
   createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-} 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';
 import { meta } from '../../meta';
@@ -34,90 +30,61 @@ import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEdito
 import { type NotebookMenuProps } from './NotebookMenu';
-const editorStyles = 'p-2 pis-3';
-const valueStyles = 'p-1 pis-3';
+const editorStyles = 'p-2 ps-3';
+const valueStyles = 'p-1 ps-3';
 export type NotebookCellProps = {
-  space?: Space;
+  db?: Database.Database;
   graph?: ComputeGraph;
   dragging?: boolean;
   cell: Notebook.Cell;
+  promptResults?: Record<string, string>;
 } & (Pick<NotebookMenuProps, 'onCellInsert' | 'onCellDelete'> & Pick<TypescriptEditorProps, 'env'>);
-// TODO(burdon): Display errors.
-export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCellProps) => {
+// TODO(burdon): Show evaluation errors.
+export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }: NotebookCellProps) => {
   const { t } = useTranslation(meta.id);
-  //
-  // Common.
-  //
   const extensions = useMemo(() => {
-    return cell.script?.target
-      ? [createDataExtensions({ id: cell.id, text: createDocAccessor(cell.script.target, ['content']) })].filter(
-          isNonNullable,
-        )
+    return cell.source?.target
+      ? [
+          createDataExtensions({
+            id: cell.id,
+            text: createDocAccessor(cell.source.target, ['content']),
+          }),
+        ].filter(isNonNullable)
       : [];
-  }, [cell.script?.target]);
-  //
-  // Query.
-  //
-  const view = cell.view?.target;
-  const builder = useMemo(() => new QueryBuilder(), []);
-  useAsyncEffect(async () => {
-    if (!space || !cell.script?.target) {
-      return;
-    }
-    if (cell.type === 'query') {
-      const query = cell.script.target.content;
-      const filter = builder.build(query);
-      if (filter) {
-        const ast = Query.select(filter).ast;
-        const view = cell.view?.target;
-        if (!view) {
-          const graph = Graph.make({ query: { ast } });
-          const { view } = await Graph.makeView({ space, presentation: graph });
-          cell.view = Ref.make(view);
-        } else {
-          view.query.ast = ast;
-        }
-      }
-    }
-  }, [space, builder, cell, cell.script?.target?.content]);
+  }, [cell.source?.target]);
+  const explorerGraph = cell.graph?.target;
   const handleQueryChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
     (value: string) => {
-      invariant(cell.script?.target);
-      cell.script.target.content = value;
+      invariant(cell.source?.target);
+      Obj.change(cell.source.target, (s) => {
+        s.content = value;
+      });
     },
     [cell],
   );
-  //
-  // Prompt.
-  // TODO(burdon): Add values to context or system message (via blueprint?).
-  //
-  const services = useChatServices({ space, chat: cell.chat?.target });
-  const processor = useChatProcessor({ chat: cell.chat?.target, services });
   switch (cell.type) {
     case 'markdown':
-      if (!cell.script?.target) {
+      if (!cell.source?.target) {
         return null;
       }
       return (
-        <MarkdownEditor
+        <NotebookTextEditor
           id={cell.id}
           classNames={editorStyles}
-          initialValue={cell.script.target.content}
+          initialValue={cell.source.target.content}
           extensions={extensions}
         />
       );
     case 'script':
-      if (!cell.script?.target) {
+      if (!cell.source?.target) {
         return null;
       }
@@ -127,7 +94,7 @@ export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCell
             id={cell.id}
             role='section'
             classNames={editorStyles}
-            initialValue={cell.script.target.content}
+            initialValue={cell.source.target.content}
             extensions={extensions}
             env={env}
             options={{
@@ -141,33 +108,40 @@ export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCell
       );
     case 'query':
-      if (!cell.script?.target) {
+      if (!cell.source?.target) {
         return null;
       }
+      // TODO(burdon): Remove app-framework deps (via render prop).
       return (
-        <div className={mx('bs-full overflow-hidden grid', view && !dragging && 'grid-rows-[min-content_1fr]')}>
+        <div className={mx('h-full overflow-hidden grid', explorerGraph && !dragging && 'grid-rows-[min-content_1fr]')}>
           <QueryEditor
             id={cell.id}
-            classNames={[editorStyles, 'border-b border-subduedSeparator']}
-            db={space?.db}
-            value={cell.script.target.content}
+            classNames={[editorStyles, 'border-b border-subdued-separator']}
+            db={db}
+            value={cell.source.target.content}
             onChange={handleQueryChange}
           />
-          {view && !dragging && <Surface role='section' limit={1} data={{ subject: view }} />}
+          {explorerGraph && !dragging && <Surface.Surface role='section' limit={1} data={{ subject: explorerGraph }} />}
         </div>
       );
+    // TODO(burdon): Use streaming response from Chat.
     case 'prompt':
-      if (!cell.chat?.target || !processor) {
+      if (!cell.prompt?.target) {
         return null;
       }
       return (
-        <Chat.Root chat={cell.chat.target} processor={processor}>
-          <Chat.Thread overscroll={0} />
-          <Chat.Prompt settings={false} classNames='p-2 border-t border-subduedSeparator' />
-        </Chat.Root>
+        <>
+          <TemplateEditor
+            id={cell.id}
+            template={cell.prompt.target.instructions}
+            lineNumbers={false}
+            classNames={editorStyles}
+          />
+          <NotebookPromptResult cell={cell} promptResults={promptResults} />
+        </>
       );
     default:
@@ -176,8 +150,8 @@ export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCell
 };
 const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
-  const name = graph?.expressions.value[cell.id]?.name;
-  const value = graph?.values.value[cell.id];
+  const name = graph?.getExpressions()[cell.id]?.name;
+  const value = graph?.getValue(cell.id);
   if (value == null) {
     return null;
   }
@@ -185,13 +159,13 @@ const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
   return (
     <div
       className={mx(
-        'flex is-full bg-groupSurface border-t border-subduedSeparator text-description font-mono',
+        'flex w-full bg-group-surface border-y border-subdued-separator text-description font-mono',
         valueStyles,
       )}
     >
       {name && (
         <>
-          <span className='text-successText'>{name}</span>
+          <span className='text-success-text'>{name}</span>
           <span className='text-description'>&nbsp;=&nbsp;</span>
         </>
       )}
@@ -200,18 +174,42 @@ const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
   );
 };
-const MarkdownEditor = ({ extensions: extensionsParam, ...props }: EditorProps) => {
+const NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
+  if (!cell.prompt) {
+    return null;
+  }
+  const value = promptResults?.[cell.prompt.dxn.toString()];
+  if (value == null) {
+    return null;
+  }
+  return (
+    <div className={mx('flex w-full bg-group-surface text-description border-y border-subdued-separator', valueStyles)}>
+      <NotebookTextEditor readOnly value={value} />
+    </div>
+  );
+};
+const NotebookTextEditor = ({
+  extensions: extensionsProp,
+  readOnly,
+  ...props
+}: EditorContentProps & Pick<BasicExtensionsOptions, 'readOnly'>) => {
   const { t } = useTranslation(meta.id);
   const { themeMode } = useThemeContext();
   const extensions = useMemo(() => {
     return [
-      createBasicExtensions({ placeholder: t('notebook markdown placeholder') }),
+      createBasicExtensions({
+        placeholder: t('notebook markdown placeholder'),
+        readOnly,
+      }),
       createThemeExtensions({ themeMode, syntaxHighlighting: true }),
       createMarkdownExtensions(),
       decorateMarkdown(),
-      extensionsParam,
+      extensionsProp,
     ].filter(isNonNullable);
-  }, [extensionsParam]);
+  }, [extensionsProp]);
-  return <Editor {...props} extensions={extensions} moveToEnd />;
+  return <EditorContent {...props} extensions={extensions} selectionEnd />;
 };

package/src/components/NotebookStack/NotebookStack.stories.tsx CHANGED Viewed

@@ -3,8 +3,13 @@
 //
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useMemo } from 'react';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AutomationPlugin } from '@dxos/plugin-automation';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { corePlugins } from '@dxos/plugin-testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { createNotebook } from '../../testing';
@@ -12,21 +17,38 @@ import { translations } from '../../translations';
 import { NotebookStack } from './NotebookStack';
+const NotebookStackStory = () => {
+  const notebook = useMemo(() => createNotebook(), []);
+  return <NotebookStack notebook={notebook} />;
+};
 const meta = {
-  title: 'plugins/plugin-script/NotebookStack',
-  component: NotebookStack,
-  decorators: [withTheme, withLayout({ container: 'column', classNames: 'is-prose' }), withClientProvider()],
+  title: 'plugins/plugin-script/components/NotebookStack',
+  component: NotebookStackStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-prose-max-width' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* Effect.promise(() => client.spaces.waitUntilReady());
+            }),
+        }),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
   parameters: {
     translations,
   },
-} satisfies Meta<typeof NotebookStack>;
+} satisfies Meta<typeof NotebookStackStory>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {
-  args: {
-    notebook: createNotebook(),
-  },
-};
+export const Default: Story = {};

package/src/components/NotebookStack/NotebookStack.tsx CHANGED Viewed

@@ -14,13 +14,13 @@ import { type TypescriptEditorProps } from '../TypescriptEditor';
 import { NotebookCell, type NotebookCellProps } from './NotebookCell';
 import { NotebookMenu } from './NotebookMenu';
-const minSectionHeight = 'min-bs-[16rem]';
+const minSectionHeight = 'min-h-[16rem]';
 export type NotebookStackProps = ThemedClassName<
   {
     notebook?: Notebook.Notebook;
     onRearrange?: StackProps['onRearrange'];
-  } & (Pick<NotebookSectionProps, 'space' | 'graph' | 'onCellInsert' | 'onCellDelete'> &
+  } & (Pick<NotebookSectionProps, 'db' | 'graph' | 'promptResults' | 'onCellInsert' | 'onCellDelete'> &
     Pick<TypescriptEditorProps, 'env'>)
 >;
@@ -37,14 +37,21 @@ export const NotebookStack = ({ classNames, notebook, onRearrange, ...props }: N
 type NotebookSectionProps = NotebookCellProps;
-const NotebookSection = ({ cell, space, env, onCellInsert, onCellDelete, ...props }: NotebookSectionProps) => {
+const NotebookSection = ({
+  cell,
+  db,
+  env,
+  promptResults,
+  onCellInsert,
+  onCellDelete,
+  ...props
+}: NotebookSectionProps) => {
   const { t } = useTranslation(meta.id);
-  const resizable = cell.type === 'query' || cell.type === 'prompt';
+  const resizable = cell.type === 'query';
-  // TOOD(burdon): Set size if no extrinsic size (provider).
   return (
     <StackItem.Root role='section' item={cell} draggable classNames={resizable && minSectionHeight}>
-      <StackItem.Heading classNames='bs-full p-1 justify-between attention-surface'>
+      <StackItem.Heading classNames='h-full p-1 justify-between dx-attention-surface'>
         <StackItem.DragHandle asChild>
           <IconButton variant='ghost' icon='ph--dots-six-vertical--regular' iconOnly label='Drag handle' />
         </StackItem.DragHandle>
@@ -65,14 +72,14 @@ const NotebookSection = ({ cell, space, env, onCellInsert, onCellDelete, ...prop
       {/* TODO(burdon): Move drag preview to outer stack (uniformly). */}
       <StackItem.DragPreview>
         {({ item: cell }) => (
-          <StackItem.Content classNames='overflow-visible bg-groupSurface border border-subduedSeparator'>
-            <NotebookCell space={space} cell={cell} env={env} dragging />
+          <StackItem.Content classNames='overflow-visible bg-group-surface border border-subdued-separator'>
+            <NotebookCell db={db} cell={cell} env={env} dragging />
           </StackItem.Content>
         )}
       </StackItem.DragPreview>
       <StackItem.Content classNames='overflow-visible'>
-        <NotebookCell space={space} cell={cell} env={env} {...props} />
+        <NotebookCell db={db} cell={cell} env={env} promptResults={promptResults} {...props} />
       </StackItem.Content>
     </StackItem.Root>
   );

package/src/components/QueryEditor/QueryEditor.stories.tsx ADDED Viewed

@@ -0,0 +1,102 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useMemo, useState } from 'react';
+import { createDocAccessor } from '@dxos/echo-db';
+import { QuerySandbox } from '@dxos/echo-query';
+import { createObject } from '@dxos/react-client/echo';
+import { Panel, Toolbar, useAsyncEffect } 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 { QueryEditor, type QueryEditorProps } from './QueryEditor';
+const SCRIPT = trim`
+  Query.select(Filter.type('dxos.org/type/Person'))
+`;
+const DefaultStory = (props: QueryEditorProps) => {
+  const object = useMemo(() => createObject({ content: SCRIPT }), []);
+  const [result, setResult] = useState<object | undefined>({});
+  const [sandbox, setSandbox] = useState<QuerySandbox>();
+  useAsyncEffect(async () => {
+    const sandbox = new QuerySandbox();
+    await sandbox.open();
+    setSandbox(sandbox);
+    return () => {
+      void sandbox.close();
+    };
+  }, []);
+  const extensions = useMemo(
+    () => [
+      createDataExtensions({
+        id: object.id,
+        text: createDocAccessor(object, ['content']),
+      }),
+    ],
+    [],
+  );
+  const handleRun = useCallback(async () => {
+    try {
+      const result = sandbox?.eval(object.content);
+      setResult({
+        timestamp: Date.now(),
+        result,
+      });
+    } catch (err) {
+      setResult({
+        timestamp: Date.now(),
+        error: String(err),
+      });
+    }
+  }, [object, sandbox]);
+  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'>
+          <QueryEditor {...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/QueryEditor',
+  component: QueryEditor,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({
+      layout: 'column',
+      classNames: 'w-prose-max-width',
+    }),
+  ],
+} satisfies Meta<typeof DefaultStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    id: 'test',
+  },
+};