@dxos/plugin-script 0.6.13-staging.1e988a3 → 0.6.14-main.1366248

package/package.json

@@ -1,39 +1,32 @@
 {
   "name": "@dxos/plugin-script",
-  "version": "0.6.13-staging.1e988a3",
+  "version": "0.6.14-main.1366248",
   "description": "Braneframe notebook plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
   "exports": {
-    ".": {
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": {
-        "default": "./dist/lib/node/index.cjs"
-      },
-      "types": "./dist/types/src/index.d.ts"
-    },
     "./edge": {
+      "types": "./dist/types/src/edge/index.d.ts",
       "browser": "./dist/lib/browser/edge/index.mjs",
-      "node": {
-        "default": "./dist/lib/node/edge/index.cjs"
-      },
-      "types": "./dist/types/src/edge/index.d.ts"
+      "node": "./dist/lib/node-esm/edge/index.mjs"
+    },
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
     },
     "./meta": {
+      "types": "./dist/types/src/meta.d.ts",
       "browser": "./dist/lib/browser/meta.mjs",
-      "node": {
-        "default": "./dist/lib/node/meta.cjs"
-      },
-      "types": "./dist/types/src/meta.d.ts"
+      "node": "./dist/lib/node-esm/meta.mjs"
     },
     "./types": {
+      "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
-      "node": {
-        "default": "./dist/lib/node/types/index.cjs"
-      },
-      "types": "./dist/types/src/types/index.d.ts"
+      "node": "./dist/lib/node-esm/types/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -55,14 +48,15 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.0",
+    "@codemirror/autocomplete": "^6.18.1",
     "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/lint": "^6.8.1",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/lint": "^6.8.2",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.29.1",
-    "@lezer/common": "^1.2.1",
+    "@codemirror/view": "^6.34.1",
+    "@effect/schema": "^0.75.1",
+    "@lezer/common": "^1.2.2",
     "@preact/signals-core": "^1.6.0",
     "@typescript/vfs": "^1.6.0",
     "@valtown/codemirror-ts": "^2.2.0",
@@ -72,32 +66,33 @@
     "lodash.get": "^4.4.2",
     "prettier": "^3.2.4",
     "react-syntax-highlighter": "^15.5.0",
-    "typescript": "^5.5.4",
-    "@dxos/app-framework": "0.6.13-staging.1e988a3",
-    "@dxos/async": "0.6.13-staging.1e988a3",
-    "@dxos/crypto": "0.6.13-staging.1e988a3",
-    "@dxos/client": "0.6.13-staging.1e988a3",
-    "@dxos/debug": "0.6.13-staging.1e988a3",
-    "@dxos/client-protocol": "0.6.13-staging.1e988a3",
-    "@dxos/echo-schema": "0.6.13-staging.1e988a3",
-    "@dxos/invariant": "0.6.13-staging.1e988a3",
-    "@dxos/log": "0.6.13-staging.1e988a3",
-    "@dxos/plugin-client": "0.6.13-staging.1e988a3",
-    "@dxos/keys": "0.6.13-staging.1e988a3",
-    "@dxos/plugin-graph": "0.6.13-staging.1e988a3",
-    "@dxos/plugin-explorer": "0.6.13-staging.1e988a3",
-    "@dxos/plugin-stack": "0.6.13-staging.1e988a3",
-    "@dxos/plugin-markdown": "0.6.13-staging.1e988a3",
-    "@dxos/plugin-theme": "0.6.13-staging.1e988a3",
-    "@dxos/plugin-space": "0.6.13-staging.1e988a3",
-    "@dxos/protocols": "0.6.13-staging.1e988a3",
-    "@dxos/react-client": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui-editor": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui-attention": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui-syntax-highlighter": "0.6.13-staging.1e988a3",
-    "@dxos/rpc": "0.6.13-staging.1e988a3",
-    "@dxos/rpc-tunnel": "0.6.13-staging.1e988a3",
-    "@dxos/util": "0.6.13-staging.1e988a3"
+    "typescript": "^5.6.2",
+    "@dxos/app-framework": "0.6.14-main.1366248",
+    "@dxos/client": "0.6.14-main.1366248",
+    "@dxos/client-protocol": "0.6.14-main.1366248",
+    "@dxos/async": "0.6.14-main.1366248",
+    "@dxos/debug": "0.6.14-main.1366248",
+    "@dxos/echo-schema": "0.6.14-main.1366248",
+    "@dxos/invariant": "0.6.14-main.1366248",
+    "@dxos/keys": "0.6.14-main.1366248",
+    "@dxos/crypto": "0.6.14-main.1366248",
+    "@dxos/log": "0.6.14-main.1366248",
+    "@dxos/plugin-client": "0.6.14-main.1366248",
+    "@dxos/plugin-graph": "0.6.14-main.1366248",
+    "@dxos/plugin-explorer": "0.6.14-main.1366248",
+    "@dxos/plugin-markdown": "0.6.14-main.1366248",
+    "@dxos/plugin-theme": "0.6.14-main.1366248",
+    "@dxos/plugin-stack": "0.6.14-main.1366248",
+    "@dxos/plugin-space": "0.6.14-main.1366248",
+    "@dxos/protocols": "0.6.14-main.1366248",
+    "@dxos/react-client": "0.6.14-main.1366248",
+    "@dxos/react-ui-data": "0.6.14-main.1366248",
+    "@dxos/react-ui-attention": "0.6.14-main.1366248",
+    "@dxos/react-ui-editor": "0.6.14-main.1366248",
+    "@dxos/react-ui-syntax-highlighter": "0.6.14-main.1366248",
+    "@dxos/rpc-tunnel": "0.6.14-main.1366248",
+    "@dxos/rpc": "0.6.14-main.1366248",
+    "@dxos/util": "0.6.14-main.1366248"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -106,21 +101,21 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/echo-generator": "0.6.13-staging.1e988a3",
-    "@dxos/random": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui-mosaic": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui-theme": "0.6.13-staging.1e988a3",
-    "@dxos/storybook-utils": "0.6.13-staging.1e988a3"
+    "vite": "5.4.7",
+    "@dxos/echo-generator": "0.6.14-main.1366248",
+    "@dxos/random": "0.6.14-main.1366248",
+    "@dxos/react-ui-mosaic": "0.6.14-main.1366248",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248",
+    "@dxos/storybook-utils": "0.6.14-main.1366248"
   },
-  "optionalDependencies": {
+  "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui-mosaic": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui-theme": "0.6.13-staging.1e988a3",
-    "@dxos/react-ui": "0.6.13-staging.1e988a3"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-mosaic": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248"
   },
   "publishConfig": {
     "access": "public"

package/src/ScriptPlugin.tsx

@@ -2,12 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Code, type IconProps } from '@phosphor-icons/react';
 // @ts-ignore
 import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
 import React from 'react';
 
-import { parseIntentPlugin, type PluginDefinition, resolvePlugin, NavigationAction } from '@dxos/app-framework';
+import { NavigationAction, parseIntentPlugin, type PluginDefinition, resolvePlugin } from '@dxos/app-framework';
 import { create } from '@dxos/echo-schema';
 import { parseClientPlugin } from '@dxos/plugin-client';
 import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
@@ -17,11 +16,11 @@ import { loadObjectReferences } from '@dxos/react-client/echo';
 
 import { initializeBundler } from './bundler';
 import { Compiler } from './compiler';
-import { ScriptEditor } from './components';
+import { AutomationPanel, ScriptContainer, ScriptSettings, ScriptSettingsPanel } from './components';
 import meta, { SCRIPT_PLUGIN } from './meta';
+import { templates } from './templates';
 import translations from './translations';
-import { FunctionType, ScriptType } from './types';
-import { ScriptAction, type ScriptPluginProvides } from './types';
+import { FunctionType, ScriptAction, type ScriptPluginProvides, ScriptType } from './types';
 
 export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
   const compiler = new Compiler();
@@ -45,12 +44,12 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
       await initializeBundler({ wasmUrl });
     },
     provides: {
+      settings: {},
       metadata: {
         records: {
           [ScriptType.typename]: {
             placeholder: ['object title placeholder', { ns: SCRIPT_PLUGIN }],
-            icon: (props: IconProps) => <Code {...props} />,
-            iconSymbol: 'ph--code--regular',
+            icon: 'ph--code--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (script: ScriptType) => loadObjectReferences(script, (script) => [script.source]),
           },
@@ -60,6 +59,12 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
       echo: {
         schema: [ScriptType, FunctionType],
       },
+      space: {
+        onSpaceCreate: {
+          label: ['create object label', { ns: SCRIPT_PLUGIN }],
+          action: ScriptAction.CREATE,
+        },
+      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -93,8 +98,7 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
                   },
                   properties: {
                     label: ['create object label', { ns: SCRIPT_PLUGIN }],
-                    icon: (props: IconProps) => <Code {...props} />,
-                    iconSymbol: 'ph--code--regular',
+                    icon: 'ph--code--regular',
                     testId: 'scriptPlugin.createObject',
                   },
                 },
@@ -103,29 +107,36 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
           });
         },
       },
-      stack: {
-        creators: [
-          {
-            id: 'create-stack-section-script',
-            testId: 'scriptPlugin.createSection',
-            type: ['plugin name', { ns: SCRIPT_PLUGIN }],
-            label: ['create stack section label', { ns: SCRIPT_PLUGIN }],
-            icon: (props: any) => <Code {...props} />,
-            intent: {
-              plugin: SCRIPT_PLUGIN,
-              action: ScriptAction.CREATE,
-            },
-          },
-        ],
-      },
       surface: {
         component: ({ data, role }) => {
-          if (role && !['article', 'section'].includes(role)) {
-            return null;
-          }
+          switch (role) {
+            case 'settings': {
+              return data.plugin === meta.id ? <ScriptSettings settings={{}} /> : null;
+            }
+
+            case 'article': {
+              if (data.object instanceof ScriptType) {
+                return <ScriptContainer script={data.object} env={compiler.environment} />;
+              }
+              break;
+            }
+
+            case 'complementary--automation': {
+              if (data.subject instanceof ScriptType) {
+                return {
+                  node: <AutomationPanel subject={data.subject as any} />,
+                  disposition: 'hoist',
+                };
+              }
+              break;
+            }
 
-          if (data.object instanceof ScriptType) {
-            return <ScriptEditor env={compiler.environment} script={data.object} role={role} />;
+            case 'complementary--settings': {
+              if (data.subject instanceof ScriptType) {
+                return <ScriptSettingsPanel script={data.subject} />;
+              }
+              break;
+            }
           }
 
           return null;
@@ -135,7 +146,13 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
         resolver: (intent) => {
           switch (intent.action) {
             case ScriptAction.CREATE: {
-              return { data: create(ScriptType, { source: create(TextType, { content: example }) }) };
+              return {
+                data: create(ScriptType, {
+                  source: create(TextType, {
+                    content: templates[0].source,
+                  }),
+                }),
+              };
             }
           }
         },
@@ -143,14 +160,3 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
     },
   };
 };
-
-// TODO(burdon): Import.
-const example = [
-  'export default async ({ ',
-  '  event: { data: { request } },',
-  '  context: { space, ai } ',
-  '}: any) => {',
-  "  return new Response('Hello DXOS!');",
-  '};',
-  '',
-].join('\n');

package/src/bundler/bundler.test.ts

@@ -2,11 +2,21 @@
 // Copyright 2022 DXOS.org
 //
 
-import { describe, expect, test } from 'vitest';
+// @ts-ignore
+import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
+import { beforeAll, describe, expect, test } from 'vitest';
 
-import { Bundler } from './bundler';
+import { isNode } from '@dxos/util';
+
+import { Bundler, initializeBundler } from './bundler';
 
 describe('Bundler', () => {
+  beforeAll(async () => {
+    if (!isNode()) {
+      await initializeBundler({ wasmUrl });
+    }
+  });
+
   test('Basic', async () => {
     const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
     const result = await bundler.bundle('const x = 100'); // TODO(burdon): Test import.

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { type EchoReactiveObject } from '@dxos/client/echo';
+import { failUndefined } from '@dxos/debug';
+import { useClient } from '@dxos/react-client';
+import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Select } from '@dxos/react-ui';
+
+import { getInvocationUrl, getUserFunctionUrlInMetadata } from '../../edge';
+import { FunctionType, ScriptType } from '../../types';
+import { DebugPanel } from '../DebugPanel';
+
+export interface AutomationPanelProps {
+  subject: EchoReactiveObject<any>;
+}
+
+export const AutomationPanel = ({ subject }: AutomationPanelProps) => {
+  const space = getSpace(subject);
+
+  // TODO(dmaretskyi): Parametric query.
+  const functions = useQuery(
+    space ?? undefined,
+    Filter.schema(FunctionType, (fn) => (subject instanceof ScriptType ? fn.source === subject : fn.binding != null)),
+    {},
+    [subject],
+  );
+  const [selectedFunction, setSelectedFunction] = useState<FunctionType | null>(null);
+  const functionToChatWith = subject instanceof ScriptType ? functions[0] : selectedFunction;
+
+  return (
+    <div className='h-full flex flex-col'>
+      {!(subject instanceof ScriptType) && (
+        <BindingSelect
+          selectedFunction={selectedFunction}
+          setSelectedFunction={setSelectedFunction}
+          functions={functions}
+        />
+      )}
+      {functionToChatWith && <ChatPanel fn={functionToChatWith} subject={subject} />}
+      {subject instanceof ScriptType && functions.length === 0 && <p>Deploy function to interact with it.</p>}
+    </div>
+  );
+};
+
+export interface ChatPanelProps {
+  fn: FunctionType;
+  subject: EchoReactiveObject<any>;
+}
+
+const ChatPanel = ({ fn, subject }: ChatPanelProps) => {
+  const client = useClient();
+  const space = getSpace(fn);
+  const existingFunctionUrl = getUserFunctionUrlInMetadata(getMeta(fn));
+  const functionUrl = useMemo(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+
+    return getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: space?.id,
+      subjectId: subject?.id,
+    });
+  }, [existingFunctionUrl, space, subject]);
+
+  return <DebugPanel functionUrl={functionUrl} classNames='flex-1' />;
+};
+
+export interface BindingSelectProps {
+  selectedFunction: FunctionType | null;
+  setSelectedFunction: (fn: FunctionType) => void;
+  functions: FunctionType[];
+}
+
+const BindingSelect = ({ selectedFunction, setSelectedFunction, functions }: BindingSelectProps) => {
+  return (
+    <Select.Root
+      value={selectedFunction?.id}
+      onValueChange={(id) => setSelectedFunction(functions.find((fn) => fn.id === id) ?? failUndefined())}
+    >
+      <Select.TriggerButton placeholder='Select value' />
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {functions.map(({ id, binding }) => (
+              <Select.Option key={id} value={id}>
+                {binding}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};

package/src/components/AutomationPanel/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { AutomationPanel } from './AutomationPanel';
+
+export * from './AutomationPanel';
+
+export default AutomationPanel;