@dxos/plugin-script 0.6.10-main.bbdfaa4 → 0.6.10-staging.00555f6

package/src/components/DetailsPanel.tsx

@@ -0,0 +1,218 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import { log } from '@dxos/log';
+import {
+  Avatar,
+  DensityProvider,
+  Icon,
+  Input,
+  type ThemedClassName,
+  Toolbar,
+  useControlledValue,
+  useDynamicRef,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { SCRIPT_PLUGIN } from '../meta';
+
+type State = 'pending' | 'responding';
+
+type Item = { type: 'request' | 'response'; text: string };
+
+export type DetailsPanelProps = ThemedClassName<{
+  functionUrl?: string;
+  binding?: string;
+  onBindingChange?: (binding: string) => void;
+}>;
+
+export const DetailsPanel = ({ classNames, functionUrl, binding: _binding, onBindingChange }: DetailsPanelProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+
+  const bindingInputRef = useRef<HTMLInputElement>(null);
+  const [binding, setBinding] = useControlledValue(_binding ?? '');
+  const handleBlur = () => {
+    onBindingChange?.(binding);
+  };
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [input, setInput] = useState('');
+  const [result, setResult] = useState('');
+  const resultRef = useDynamicRef(result);
+  const [state, setState] = useState<State | null>(null);
+
+  // TODO(burdon): Persistent history (non-space ECHO data?)
+  const [history, setHistory] = useState<Item[]>([]);
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const handleScroll = () => {
+    if (scrollerRef.current) {
+      scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+    }
+  };
+
+  const controller = useRef<AbortController>();
+  useEffect(() => {
+    return () => {
+      handleStop();
+    };
+  }, []);
+
+  const handleStop = () => {
+    controller.current?.abort('stop');
+    controller.current = undefined;
+  };
+
+  // TODO(burdon): Halt streaming request?
+  const handleClear = () => {
+    handleStop();
+    setInput('');
+    setResult('');
+    setHistory([]);
+    inputRef.current?.focus();
+  };
+
+  const handleDone = () => {
+    controller.current = undefined;
+    setHistory((history) => [...history, { type: 'response', text: resultRef.current }]);
+    setResult('');
+    setState(null);
+    handleScroll();
+  };
+
+  const handleRun = async (input: string) => {
+    if (input.trim().length === 0) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    setHistory((history) => [...history, { type: 'request', text: input }]);
+    setInput('');
+    setResult('');
+
+    // Returns a promise that resolves when a value has been received.
+    try {
+      setState('pending');
+
+      // Throws DOMException when aborted.
+      controller.current = new AbortController();
+      const response = await fetch(functionUrl!, {
+        signal: controller.current.signal,
+        method: 'POST',
+        body: input,
+      });
+
+      // TODO(burdon): Error handling.
+      if (!response.ok) {
+        setState(null);
+        return;
+      }
+
+      setState('responding');
+      const reader = response.body!.getReader();
+      const pump = async ({ done, value }: ReadableStreamReadResult<Uint8Array>): Promise<void> => {
+        setResult((result) => result + new TextDecoder().decode(value));
+        handleScroll();
+        if (!controller.current || done) {
+          handleDone();
+          return;
+        }
+
+        return reader.read().then(pump);
+      };
+
+      void reader
+        .read()
+        .then(pump)
+        .catch((err) => {
+          if (err.name !== 'AbortError') {
+            log.catch(err);
+          }
+        });
+    } catch (err) {
+      setState(null);
+      if (err !== 'stop') {
+        log.catch(err);
+      }
+    }
+  };
+
+  return (
+    <DensityProvider density='fine'>
+      <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
+        {/* TODO(burdon): Replace with Thread? */}
+        <div ref={scrollerRef} className='flex flex-col gap-6 h-full p-4 overflow-x-hidden overflow-y-auto'>
+          <MessageThread state={state} result={result} history={history} />
+        </div>
+
+        <Toolbar.Root classNames='p-2'>
+          <Input.Root>
+            <Input.TextInput
+              ref={inputRef}
+              autoFocus
+              placeholder={t('function request placeholder')}
+              value={input}
+              onChange={(ev) => setInput(ev.target.value)}
+              onKeyDown={(ev) => ev.key === 'Enter' && handleRun(input)}
+            />
+          </Input.Root>
+          <Input.Root>
+            <Input.TextInput
+              ref={bindingInputRef}
+              classNames='!w-[10rem]'
+              placeholder={t('binding placeholder')}
+              value={binding}
+              onChange={(ev) => setBinding(ev.target.value.toUpperCase())}
+              onBlur={handleBlur}
+            />
+          </Input.Root>
+          <Toolbar.Button onClick={() => handleRun(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.Root>
+      </div>
+    </DensityProvider>
+  );
+};
+
+const RobotAvatar = () => (
+  <Avatar.Root size={6} variant='circle'>
+    <Avatar.Frame>
+      <Avatar.Icon icon='ph--robot--regular' />
+    </Avatar.Frame>
+  </Avatar.Root>
+);
+
+// TODO(burdon): Replace with thread.
+// TODO(burdon): Delete individual messages.
+// TODO(burdon): Re-run question.
+const MessageThread = ({ state, result, history }: { state: State | null; result: string; history: Item[] }) => {
+  return (
+    <>
+      {history.map(({ type, text }, i) => (
+        <div key={i} className='grid grid-cols-[3rem_1fr]'>
+          <div>{type === 'response' && <RobotAvatar />}</div>
+          <div className={mx('flex', type === 'request' && 'justify-end')}>
+            <span className={mx(type === 'request' && 'p-1 px-2 rounded-lg bg-hoverSurface')}>{text}</span>
+          </div>
+        </div>
+      ))}
+      <div className='grid grid-cols-[3rem_1fr]'>
+        <div>
+          {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin-slow' />) ||
+            (result.length > 0 && <RobotAvatar />)}
+        </div>
+        <div>
+          <span>{result}</span>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/ScriptBlock/FrameContainer/FrameContainer.tsx

@@ -11,11 +11,11 @@ import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
-import { type CompilerResult } from '../../../compiler';
+import { type BundlerResult } from '../../../bundler';
 
 export type FrameContainerProps = {
   containerUrl: string;
-  result: CompilerResult;
+  result: BundlerResult;
   debug?: boolean;
 };
 

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -4,7 +4,7 @@
 
 import { Check, Play, Warning } from '@phosphor-icons/react';
 // @ts-ignore
-import esbuildWasmURL from 'esbuild-wasm/esbuild.wasm?url';
+import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { createDocAccessor, DocAccessor } from '@dxos/react-client/echo';
@@ -13,7 +13,7 @@ import { mx, getSize } from '@dxos/react-ui-theme';
 
 import { FrameContainer } from './FrameContainer';
 import { Splitter, SplitterSelector, type View } from './Splitter';
-import { Compiler, type CompilerResult, initializeCompiler } from '../../compiler';
+import { Bundler, type BundlerResult, initializeBundler } from '../../bundler';
 import { type ScriptType } from '../../types';
 import { ScriptEditor } from '../ScriptEditor';
 
@@ -55,11 +55,14 @@ export const ScriptBlock = ({
   const [view, setView] = useState<View>(controlledView ?? 'editor');
   useEffect(() => handleSetView(controlledView ?? 'editor'), [controlledView]);
 
-  const [result, setResult] = useState<CompilerResult>();
-  const compiler = useMemo(() => new Compiler({ platform: 'browser', providedModules: PROVIDED_MODULES }), []);
+  const [result, setResult] = useState<BundlerResult>();
+  const bundler = useMemo(
+    () => new Bundler({ platform: 'browser', sandboxedModules: PROVIDED_MODULES, remoteModules: {} }),
+    [],
+  );
   useEffect(() => {
     // TODO(burdon): Create useCompiler hook (with initialization).
-    void initializeCompiler({ wasmURL: esbuildWasmURL });
+    void initializeBundler({ wasmUrl });
   }, []);
   useEffect(() => {
     // TODO(burdon): Throttle and listen for update.
@@ -68,7 +71,7 @@ export const ScriptBlock = ({
         return;
       }
 
-      const result = await compiler.compile(DocAccessor.getValue(source));
+      const result = await bundler.bundle(DocAccessor.getValue(source));
       setResult(result);
     });
 
@@ -90,7 +93,7 @@ export const ScriptBlock = ({
       if (!source) {
         return;
       }
-      const result = await compiler.compile(DocAccessor.getValue(source));
+      const result = await bundler.bundle(DocAccessor.getValue(source));
       setResult(result);
       if (auto && view === 'editor') {
         setView('preview');

package/src/components/ScriptEditor.tsx

@@ -3,6 +3,9 @@
 //
 
 import { type DID } from 'iso-did/types';
+import { format } from 'prettier';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import prettierPluginTypescript from 'prettier/plugins/typescript';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { log } from '@dxos/log';
@@ -13,8 +16,10 @@ import { useTranslation } from '@dxos/react-ui';
 import { createDataExtensions, listener } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
+import { DetailsPanel } from './DetailsPanel';
 import { Toolbar } from './Toolbar';
-import { TypescriptEditor } from './TypescriptEditor';
+import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+import { Bundler } from '../bundler';
 import {
   getUserFunctionUrlInMetadata,
   publicKeyToDid,
@@ -27,9 +32,9 @@ import { FunctionType, type ScriptType } from '../types';
 export type ScriptEditorProps = {
   script: ScriptType;
   role?: string;
-};
+} & Pick<TypescriptEditorProps, 'env'>;
 
-export const ScriptEditor = ({ script, role }: ScriptEditorProps) => {
+export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
   const client = useClient();
   const identity = useIdentity();
@@ -38,6 +43,7 @@ export const ScriptEditor = ({ script, role }: ScriptEditorProps) => {
     space,
     Filter.schema(FunctionType, (fn) => fn.source === script),
   );
+
   const extensions = useMemo(
     () => [
       listener({
@@ -56,6 +62,8 @@ export const ScriptEditor = ({ script, role }: ScriptEditorProps) => {
     ],
     [script, script.source, space, identity],
   );
+
+  const [showPanel, setShowPanel] = useState(false);
   const initialValue = useMemo(() => script.source?.content, [script.source]);
   const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(getMeta(fn));
   const [error, setError] = useState<string>();
@@ -67,6 +75,24 @@ export const ScriptEditor = ({ script, role }: ScriptEditorProps) => {
     [fn],
   );
 
+  const handleFormat = useCallback(async () => {
+    if (!script.source) {
+      return;
+    }
+
+    try {
+      script.source.content = await format(script.source.content, {
+        parser: 'typescript',
+        plugins: [prettierPluginEstree, prettierPluginTypescript],
+        semi: true,
+        singleQuote: true,
+      });
+    } catch (err: any) {
+      // TODO(wittjosiah): Show error in UI.
+      log.catch(err);
+    }
+  }, [script.source]);
+
   const handleDeploy = useCallback(async () => {
     if (!script.source || !identity || !space) {
       return;
@@ -78,12 +104,22 @@ export const ScriptEditor = ({ script, role }: ScriptEditorProps) => {
       const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
       const ownerDid = (existingFunctionUrl?.split('/').at(-2) as DID) ?? publicKeyToDid(identity.identityKey);
 
+      const bundler = new Bundler({
+        platform: 'browser',
+        sandboxedModules: [],
+        remoteModules: {},
+      });
+      const buildResult = await bundler.bundle(script.source.content);
+      if (buildResult.error || !buildResult.bundle) {
+        throw buildResult.error;
+      }
+
       const { result, functionId, functionVersionNumber, errorMessage } = await uploadWorkerFunction({
         clientConfig: client.config,
         halo: client.halo,
         ownerDid,
         functionId: existingFunctionId,
-        source: script.source.content,
+        source: buildResult.bundle,
       });
       if (result !== 'success' || functionId === undefined || functionVersionNumber === undefined) {
         throw new Error(errorMessage);
@@ -103,25 +139,47 @@ export const ScriptEditor = ({ script, role }: ScriptEditorProps) => {
     }
   }, [fn, existingFunctionUrl, script, script.name, script.source]);
 
+  const functionUrl = useMemo(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+
+    const baseUrl = new URL('functions/', client.config.values.runtime?.services?.edge?.url);
+
+    // Leading slashes cause the URL to be treated as an absolute path.
+    const relativeUrl = existingFunctionUrl.replace(/^\//, '');
+    const url = new URL(`./${relativeUrl}`, baseUrl.toString());
+    space && url.searchParams.set('spaceId', space.id);
+    url.protocol = 'https';
+    return url.toString();
+  }, [existingFunctionUrl, space]);
+
   return (
     <div
       role='none'
       className={mx(role === 'article' && 'row-span-2', 'flex flex-col is-full bs-full overflow-hidden')}
     >
-      <Toolbar
-        binding={fn?.binding ?? ''}
-        onBindingChange={handleBindingChange}
-        deployed={Boolean(existingFunctionUrl) && !script.changed}
-        onDeploy={handleDeploy}
-        functionUrl={existingFunctionUrl}
-        error={error}
-      />
       <TypescriptEditor
         id={script.id}
+        env={env}
         initialValue={initialValue}
         extensions={extensions}
-        className='flex is-full bs-full overflow-hidden'
+        className='flex is-full bs-full overflow-hidden border-b border-separator'
+      />
+
+      <Toolbar
+        deployed={Boolean(existingFunctionUrl) && !script.changed}
+        functionUrl={functionUrl}
+        error={error}
+        showPanel={showPanel}
+        onDeploy={handleDeploy}
+        onFormat={handleFormat}
+        onTogglePanel={async () => setShowPanel((showDetails) => !showDetails)}
       />
+
+      {showPanel && (
+        <DetailsPanel functionUrl={functionUrl} binding={fn?.binding} onBindingChange={handleBindingChange} />
+      )}
     </div>
   );
 };

package/src/components/Toolbar.tsx

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Check, Checks, CircleNotch, Link, PencilSimple, UploadSimple, WarningCircle, X } from '@phosphor-icons/react';
-import React, { useEffect, useRef, useState } from 'react';
+import { Checks, CircleNotch, Link, MagicWand, UploadSimple, WarningCircle } from '@phosphor-icons/react';
+import React, { useState } from 'react';
 
 import {
-  Button,
   DensityProvider,
   ElevationProvider,
-  Input,
+  Icon,
+  type ThemedClassName,
   Toolbar as NaturalToolbar,
   Tooltip,
   useTranslation,
@@ -18,48 +18,28 @@ import { getSize, mx } from '@dxos/react-ui-theme';
 
 import { SCRIPT_PLUGIN } from '../meta';
 
-export type ToolbarProps = {
-  binding: string;
-  onBindingChange: (binding: string) => void;
+export type ToolbarProps = ThemedClassName<{
   deployed?: boolean;
-  onDeploy?: () => Promise<void>;
-  functionUrl?: string;
   error?: string;
-};
+  functionUrl?: string;
+  showPanel?: boolean;
+  onDeploy?: () => Promise<void>;
+  onFormat?: () => Promise<void>;
+  onTogglePanel?: () => Promise<void>;
+}>;
 
 export const Toolbar = ({
-  binding: _binding,
-  onBindingChange,
+  classNames,
   deployed,
-  onDeploy,
-  functionUrl,
   error,
+  functionUrl,
+  showPanel,
+  onDeploy,
+  onFormat,
+  onTogglePanel,
 }: ToolbarProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
   const [pending, setPending] = useState(false);
-  const [editing, setEditing] = useState(false);
-  const [binding, setBinding] = useState(_binding);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!editing && _binding !== binding) {
-      setBinding(_binding);
-    }
-  }, [_binding]);
-
-  const handleEdit = () => {
-    setEditing(true);
-    inputRef.current?.focus();
-  };
-
-  const handleSave = () => {
-    setEditing(false);
-    onBindingChange(binding);
-  };
-
-  const handleCancel = () => {
-    setEditing(false);
-  };
 
   const handleCopyLink = async () => {
     if (!functionUrl) {
@@ -75,49 +55,45 @@ export const Toolbar = ({
     setPending(false);
   };
 
+  // TODO(burdon): Factor out common toolbar components with sheet/editor?
   return (
     <DensityProvider density='fine'>
       <ElevationProvider elevation='chrome'>
-        <NaturalToolbar.Root
-          classNames='p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden'
-          style={{ contain: 'layout' }}
-        >
-          {/* TODO(wittjosiah): Binding input shouldn't be in the toolbar. */}
-          <Input.Root>
-            <Input.Label>{t('binding label')}</Input.Label>
-            <Input.TextInput
-              ref={inputRef}
-              classNames='!is-auto'
-              disabled={!editing}
-              value={binding}
-              onChange={(event) => setBinding(event.target.value.toUpperCase())}
-            />
-            {editing ? (
-              <>
-                <Button variant='ghost' onClick={handleCancel}>
-                  <X className={getSize(4)} />
-                </Button>
-                <Button variant='ghost' onClick={handleSave}>
-                  <Check className={getSize(4)} />
-                </Button>
-              </>
-            ) : (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button variant='ghost' onClick={handleEdit}>
-                    <PencilSimple className={getSize(4)} />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Portal>
-                  <Tooltip.Content>
-                    <Tooltip.Arrow />
-                    {t('edit binding label')}
-                  </Tooltip.Content>
-                </Tooltip.Portal>
-              </Tooltip.Root>
-            )}
-          </Input.Root>
+        <NaturalToolbar.Root classNames={['p-1', classNames]} style={{ contain: 'layout' }}>
+          {onFormat && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <NaturalToolbar.Button variant='ghost' onClick={onFormat}>
+                  <MagicWand className={getSize(4)} />
+                </NaturalToolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content>
+                  <Tooltip.Arrow />
+                  {t('format label')}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
+
           <div role='separator' className='grow' />
+
+          {functionUrl && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <NaturalToolbar.Button variant='ghost' onClick={handleCopyLink}>
+                  <Link className={getSize(4)} />
+                </NaturalToolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content>
+                  <Tooltip.Arrow />
+                  {t('copy link label')}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
+
           {/* TODO(wittjosiah): Better treatment for status indicators in toolbar? */}
           {error ? (
             <Tooltip.Root>
@@ -144,21 +120,7 @@ export const Toolbar = ({
               </Tooltip.Portal>
             </Tooltip.Root>
           ) : null}
-          {functionUrl && (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <NaturalToolbar.Button variant='ghost' onClick={handleCopyLink}>
-                  <Link className={getSize(4)} />
-                </NaturalToolbar.Button>
-              </Tooltip.Trigger>
-              <Tooltip.Portal>
-                <Tooltip.Content>
-                  <Tooltip.Arrow />
-                  {t('copy link label')}
-                </Tooltip.Content>
-              </Tooltip.Portal>
-            </Tooltip.Root>
-          )}
+
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <NaturalToolbar.Button variant='ghost' onClick={handleDeploy} disabled={pending}>
@@ -176,6 +138,22 @@ export const Toolbar = ({
               </Tooltip.Content>
             </Tooltip.Portal>
           </Tooltip.Root>
+
+          {onTogglePanel && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <NaturalToolbar.Button variant='ghost' onClick={onTogglePanel}>
+                  <Icon icon={showPanel ? 'ph--caret-up--regular' : 'ph--caret-down--regular'} size={4} />
+                </NaturalToolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content>
+                  <Tooltip.Arrow />
+                  {t('toggle details label')}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
         </NaturalToolbar.Root>
       </ElevationProvider>
     </DensityProvider>