@dxos/plugin-script 0.6.12 → 0.6.13-main.09887cd

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -2,19 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Check, Play, Warning } from '@phosphor-icons/react';
 // @ts-ignore
 import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { createDocAccessor, DocAccessor } from '@dxos/react-client/echo';
-import { DensityProvider, Toolbar, Button } from '@dxos/react-ui';
-import { mx, getSize } from '@dxos/react-ui-theme';
+import { DensityProvider, Toolbar, Button, Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
-import { FrameContainer } from './FrameContainer';
-import { Splitter, SplitterSelector, type View } from './Splitter';
 import { Bundler, type BundlerResult, initializeBundler } from '../../bundler';
 import { type ScriptType } from '../../types';
+import { FrameContainer } from '../FrameContainer';
 import { ScriptEditor } from '../ScriptEditor';
 
 // Keep in sync with packages/apps/composer-app/script-frame/main.tsx .
@@ -29,7 +27,6 @@ const PROVIDED_MODULES = [
 
 export type ScriptBlockProps = {
   script: ScriptType;
-  view?: View;
   hideSelector?: boolean;
   classes?: {
     root?: string;
@@ -44,17 +41,8 @@ export type ScriptBlockProps = {
  * @deprecated
  */
 // TODO(burdon): Cache compiled results in context.
-export const ScriptBlock = ({
-  script,
-  view: controlledView,
-  hideSelector,
-  classes,
-  containerUrl,
-}: ScriptBlockProps) => {
+export const ScriptBlock = ({ script, hideSelector, classes, containerUrl }: ScriptBlockProps) => {
   const source = useMemo(() => script.source && createDocAccessor(script.source, ['content']), [script.source]);
-  const [view, setView] = useState<View>(controlledView ?? 'editor');
-  useEffect(() => handleSetView(controlledView ?? 'editor'), [controlledView]);
-
   const [result, setResult] = useState<BundlerResult>();
   const bundler = useMemo(
     () => new Bundler({ platform: 'browser', sandboxedModules: PROVIDED_MODULES, remoteModules: {} }),
@@ -78,16 +66,6 @@ export const ScriptBlock = ({
     return () => clearTimeout(t);
   }, [source]);
 
-  const handleSetView = useCallback(
-    (view: View) => {
-      setView(view);
-      if (!result && view !== 'editor') {
-        void handleExec(false);
-      }
-    },
-    [result],
-  );
-
   const handleExec = useCallback(
     async (auto = true) => {
       if (!source) {
@@ -95,11 +73,8 @@ export const ScriptBlock = ({
       }
       const result = await bundler.bundle(DocAccessor.getValue(source));
       setResult(result);
-      if (auto && view === 'editor') {
-        setView('preview');
-      }
     },
-    [source, view],
+    [source],
   );
 
   return (
@@ -107,29 +82,28 @@ export const ScriptBlock = ({
       {!hideSelector && (
         <DensityProvider density='fine'>
           <Toolbar.Root classNames={mx('mb-2', classes?.toolbar)}>
-            <SplitterSelector view={view} onChange={handleSetView} />
             <div className='grow' />
             {result?.bundle && !result?.error && (
               <div title={String(result.error)}>
-                <Check className={mx(getSize(5), 'text-green-500')} />
+                <Icon icon='ph--check--regular' size={5} classNames='text-green-500' />
               </div>
             )}
             {result?.error && (
               <div title={String(result.error)}>
-                <Warning className={mx(getSize(5), 'text-orange-500')} />
+                <Icon icon='ph--warning--regular' size={5} classNames='text-orange-500' />
               </div>
             )}
             <Button variant='ghost' onClick={() => handleExec()}>
-              <Play className={getSize(5)} />
+              <Icon icon='ph--play--regular' size={5} />
             </Button>
           </Toolbar.Root>
         </DensityProvider>
       )}
 
-      <Splitter view={view}>
+      <div className='flex'>
         <ScriptEditor script={script} />
         {result && <FrameContainer key={script.id} result={result} containerUrl={containerUrl} />}
-      </Splitter>
+      </div>
     </div>
   );
 };

package/src/components/ScriptContainer.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { mx } from '@dxos/react-ui-theme';
+
+import { ScriptEditor, type ScriptEditorProps } from './ScriptEditor';
+
+const ScriptContainer = ({ script, ...props }: ScriptEditorProps) => {
+  const attendableAttrs = useAttendableAttributes(fullyQualifiedId(script));
+  return (
+    <div role='none' className={mx('flex row-span-2 w-full overflow-hidden attention-surface')} {...attendableAttrs}>
+      <ScriptEditor {...props} script={script} />
+    </div>
+  );
+};
+
+export default ScriptContainer;

package/src/components/ScriptEditor.tsx

@@ -10,23 +10,14 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import {
-  create,
-  createDocAccessor,
-  Filter,
-  fullyQualifiedId,
-  getMeta,
-  getSpace,
-  useQuery,
-} from '@dxos/react-client/echo';
+import { create, createDocAccessor, Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation } from '@dxos/react-ui';
-import { useHasAttention } from '@dxos/react-ui-attention';
+import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
 import { createDataExtensions, listener } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
 import { DebugPanel } from './DebugPanel';
-import { Toolbar } from './Toolbar';
+import { type TemplateSelectProps, Toolbar, type ViewType } from './Toolbar';
 import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
 import { Bundler } from '../bundler';
 import {
@@ -34,18 +25,19 @@ import {
   publicKeyToDid,
   setUserFunctionUrlInMetadata,
   uploadWorkerFunction,
+  USERFUNCTIONS_PRESET_META_KEY,
 } from '../edge';
 import { SCRIPT_PLUGIN } from '../meta';
+import { templates } from '../templates';
 import { FunctionType, type ScriptType } from '../types';
 
-export type ScriptEditorProps = {
+export type ScriptEditorProps = ThemedClassName<{
   script: ScriptType;
-  role?: string;
-} & Pick<TypescriptEditorProps, 'env'>;
+}> &
+  Pick<TypescriptEditorProps, 'env'>;
 
-export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
+export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
-  const hasAttention = useHasAttention(fullyQualifiedId(script));
   const client = useClient();
   const identity = useIdentity();
   const space = getSpace(script);
@@ -73,7 +65,7 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
     [script, script.source, space, identity],
   );
 
-  const [showPanel, setShowPanel] = useState(false);
+  const [view, setView] = useState<ViewType>('editor');
   const initialValue = useMemo(() => script.source?.content, [script.source]);
   const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(getMeta(fn));
   const [error, setError] = useState<string>();
@@ -103,6 +95,22 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
     }
   }, [script.source]);
 
+  const handleTemplateChange: TemplateSelectProps['onTemplateSelect'] = (id) => {
+    const template = templates.find((template) => template.id === id);
+    if (template) {
+      script.name = template.name;
+      script.source!.content = template.source;
+      const metaKeys = getMeta(script).keys;
+      const oldPresetIndex = metaKeys.findIndex((key) => key.source === USERFUNCTIONS_PRESET_META_KEY);
+      if (oldPresetIndex >= 0) {
+        metaKeys.splice(oldPresetIndex, 1);
+      }
+      if (template.presetId) {
+        metaKeys.push({ source: USERFUNCTIONS_PRESET_META_KEY, id: template.presetId });
+      }
+    }
+  };
+
   const handleDeploy = useCallback(async () => {
     if (!script.source || !identity || !space) {
       return;
@@ -114,11 +122,7 @@ export const ScriptEditor = ({ env, 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 bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
       const buildResult = await bundler.bundle(script.source.content);
       if (buildResult.error || !buildResult.bundle) {
         throw buildResult.error;
@@ -134,15 +138,18 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
       if (result !== 'success' || functionId === undefined || functionVersionNumber === undefined) {
         throw new Error(errorMessage);
       }
+
       log.info('function uploaded', { functionId, functionVersionNumber });
       if (fn) {
         fn.version = functionVersionNumber;
       }
+
       const deployedFunction =
         fn ?? space.db.add(create(FunctionType, { version: functionVersionNumber, source: script }));
       const meta = getMeta(deployedFunction);
-      setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
       script.changed = false;
+      setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
+      setView('split');
     } catch (err: any) {
       log.catch(err);
       setError(t('upload failed label'));
@@ -165,38 +172,32 @@ export const ScriptEditor = ({ env, script, role }: ScriptEditorProps) => {
   }, [existingFunctionUrl, space]);
 
   return (
-    <div
-      role='none'
-      className={mx(
-        'flex flex-col is-full bs-full overflow-hidden',
-        role === 'article' && 'row-span-2',
-        hasAttention && 'attention-surface',
-      )}
-    >
-      <TypescriptEditor
-        id={script.id}
-        env={env}
-        initialValue={initialValue}
-        extensions={extensions}
-        className='flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all'
-      />
-
+    <div role='none' className={mx('flex flex-col w-full overflow-hidden divide-y divide-separator', classNames)}>
       <Toolbar
-        classNames='border-t border-separator'
         deployed={Boolean(existingFunctionUrl) && !script.changed}
         functionUrl={functionUrl}
         error={error}
-        showPanel={showPanel}
+        view={view}
+        templates={templates}
         onDeploy={handleDeploy}
         onFormat={handleFormat}
-        onTogglePanel={async () => setShowPanel((showDetails) => !showDetails)}
+        onViewChange={setView}
+        onTemplateSelect={handleTemplateChange}
       />
 
-      {showPanel && (
+      {view !== 'preview' && (
+        <TypescriptEditor
+          id={script.id}
+          env={env}
+          initialValue={initialValue}
+          extensions={extensions}
+          className='flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all'
+        />
+      )}
+
+      {view !== 'editor' && (
         <DebugPanel functionUrl={functionUrl} binding={fn?.binding} onBindingChange={handleBindingChange} />
       )}
     </div>
   );
 };
-
-export default ScriptEditor;

package/src/components/ScriptSettings/ScriptSettings.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { SettingsValue } from '@dxos/plugin-settings';
+import { type Credential } from '@dxos/protocols/proto/dxos/halo/credentials';
+import { useClient } from '@dxos/react-client';
+import { Button, useTranslation } from '@dxos/react-ui';
+
+import { SCRIPT_PLUGIN } from '../../meta';
+import { type ScriptSettingsProps } from '../../types';
+
+export const ScriptSettings = ({ settings }: { settings: ScriptSettingsProps }) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const client = useClient();
+
+  // TODO(burdon): Check token.
+  const handleAuthenticate = async () => {
+    const { identityKey } = client.halo.identity.get()!;
+    await client.halo.writeCredentials([
+      {
+        issuer: identityKey,
+        issuanceDate: new Date(),
+        subject: {
+          id: identityKey,
+          assertion: {
+            '@type': 'dxos.halo.credentials.ServiceAccess',
+            serverName: 'hub.dxos.network',
+            serverKey: identityKey,
+            identityKey,
+            capabilities: ['composer:beta'],
+          },
+        },
+      } satisfies Credential,
+    ]);
+  };
+
+  return (
+    <>
+      <SettingsValue label={t('authenticate action label')}>
+        <Button onClick={handleAuthenticate}>{t('authenticate button label')}</Button>
+      </SettingsValue>
+    </>
+  );
+};

package/src/components/ScriptSettings/index.ts

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

package/src/components/{Toolbar.stories.tsx → Toolbar/Toolbar.stories.tsx}

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
+import { templates } from '../../templates';
 
 export default {
   title: 'plugin-script/Toolbar',
@@ -14,4 +15,12 @@ export default {
   decorators: [withTheme, withLayout({ tooltips: true })],
 };
 
-export const Default = { args: { binding: 'example', deployed: true } };
+export const Default = {
+  args: {
+    binding: 'example',
+    deployed: true,
+    templates,
+    onFormat: () => console.log('Format'),
+    onTogglePanel: () => {},
+  },
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,180 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import {
+  DensityProvider,
+  ElevationProvider,
+  Icon,
+  Select,
+  type ThemedClassName,
+  ToggleGroup,
+  ToggleGroupItem,
+  type ToolbarButtonProps,
+  Toolbar as NaturalToolbar,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
+
+import { SCRIPT_PLUGIN } from '../../meta';
+import { type Template } from '../../templates';
+
+export type ToolbarProps = ThemedClassName<
+  {
+    deployed?: boolean;
+    error?: string;
+    functionUrl?: string;
+    onDeploy?: () => Promise<void>;
+    onFormat?: () => Promise<void>;
+  } & TemplateSelectProps &
+    ViewSelectorProps
+>;
+
+export const Toolbar = ({
+  classNames,
+  deployed,
+  error,
+  functionUrl,
+  view,
+  templates,
+  onDeploy,
+  onFormat,
+  onViewChange,
+  onTemplateSelect,
+}: ToolbarProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const [pending, setPending] = useState(false);
+
+  const handleCopyLink = async () => {
+    if (!functionUrl) {
+      return;
+    }
+
+    await navigator.clipboard.writeText(functionUrl);
+  };
+
+  const handleDeploy = async () => {
+    if (!pending) {
+      setPending(true);
+      await onDeploy?.();
+      setPending(false);
+    }
+  };
+
+  // TODO(burdon): Factor out common toolbar components with sheet/editor?
+  return (
+    <DensityProvider density='fine'>
+      <ElevationProvider elevation='chrome'>
+        <NaturalToolbar.Root classNames={['p-1', classNames]} style={{ contain: 'layout' }}>
+          {templates && <TemplateSelect templates={templates} onTemplateSelect={onTemplateSelect} />}
+          {onFormat && <ToolbarIconButton icon='ph--magic-wand--regular' text={t('format label')} onClick={onFormat} />}
+
+          <div role='separator' className='grow' />
+
+          {error ? (
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                <Icon icon='ph--warning-circle--regular' size={4} />
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content>
+                  <Tooltip.Arrow />
+                  {error}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          ) : null}
+
+          {functionUrl && deployed && (
+            <ToolbarIconButton icon='ph--link--regular' text={t('copy link label')} onClick={handleCopyLink} />
+          )}
+
+          {onDeploy && (
+            <ToolbarIconButton
+              icon={pending ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular'}
+              classNames={[pending && 'animate-spin']}
+              text={pending ? t('pending label') : t('deploy label')}
+              onClick={handleDeploy}
+            />
+          )}
+
+          <ViewSelector view={view} onViewChange={onViewChange} />
+        </NaturalToolbar.Root>
+      </ElevationProvider>
+    </DensityProvider>
+  );
+};
+
+const ToolbarIconButton = ({
+  icon,
+  text,
+  classNames,
+  disabled,
+  onClick,
+}: { icon: string; text: string } & Pick<ToolbarButtonProps, 'classNames' | 'disabled' | 'onClick'>) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' disabled={disabled} onClick={onClick}>
+          <Icon icon={icon} size={4} classNames={classNames} />
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content>
+          <Tooltip.Arrow />
+          {text}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+export type ViewType = 'editor' | 'split' | 'preview';
+
+export type TemplateSelectProps = {
+  templates?: Template[];
+  onTemplateSelect?: (id: string) => void;
+};
+
+export const TemplateSelect = ({ templates = [], onTemplateSelect }: TemplateSelectProps) => {
+  return (
+    <Select.Root value={''} onValueChange={onTemplateSelect}>
+      <Select.TriggerButton />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Viewport>
+            <Select.Option value={''}>Template</Select.Option>
+            {templates.map(({ id, name }) => (
+              <Select.Option key={id} value={id}>
+                {name}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
+export type ViewSelectorProps = {
+  view?: ViewType;
+  onViewChange?: (view: ViewType) => void;
+};
+
+export const ViewSelector = ({ view, onViewChange }: ViewSelectorProps) => {
+  return (
+    <ToggleGroup type='single' value={view} onValueChange={(value) => onViewChange?.(value as ViewType)}>
+      <ToggleGroupItem value='editor' classNames='bg-transparent text-subdued'>
+        <Icon icon='ph--code--regular' size={4} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='split' classNames='bg-transparent text-subdued'>
+        <Icon icon='ph--square-split-vertical--regular' size={4} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='preview' classNames='bg-transparent text-subdued'>
+        <Icon icon='ph--eye--regular' size={4} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};

package/src/components/{ScriptBlock/Splitter → Toolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Splitter';
+export * from './Toolbar';

package/src/components/{TypescriptEditor.stories.tsx → TypescriptEditor/TypescriptEditor.stories.tsx}

@@ -10,45 +10,24 @@ import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
 import { createDataExtensions } from '@dxos/react-ui-editor';
 
 import { TypescriptEditor } from './TypescriptEditor';
+import { templates } from '../../templates';
 
-// TODO(burdon): Typescript.
-// TODO(burdon): Effect schema.
-// TODO(burdon): JSX.
-// TODO(burdon): react-buddy for storybook?
-
-// Marijn
+// TODO(burdon): Features:
 // - language support for S
 // - hierarchical editor (DND)
 // - virtual document image rendering
 // - mobile rendering error
 
-const examples: string[] = [
-  [
-    '// Example function.',
-    'export default function() {',
-    '  const value = 100',
-    '  return <div>{value}</div>;',
-    '}',
-  ].join('\n'),
-  [
-    '// Example schema.',
-    'S.Struct({',
-    '  timestamp: S.Date,',
-    '  title: S.String,',
-    '  content: R.Text,',
-    "}).pipe(S.identifier('dxos.org/schema/Test'))",
-    '',
-  ].join('\n'),
-];
+// TODO(burdon): JSX.
+// TODO(burdon): Effect schema.
+// TODO(burdon): react-buddy for storybook?
 
 const Story = () => {
-  const object = useMemo(() => createEchoObject({ content: examples[0] }), []);
+  const object = useMemo(() => createEchoObject({ 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]);
-
-  // TODO(wittjosiah): Scroll past end breaks the editor.
-  return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} scrollPastEnd={false} />;
+  return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} />;
 };
 
 export default {

package/src/components/{TypescriptEditor.tsx → TypescriptEditor/TypescriptEditor.tsx}

@@ -23,13 +23,11 @@ import { nonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = {
   id: string;
-  scrollPastEnd?: boolean;
   env?: VirtualTypeScriptEnvironment;
 } & Pick<UseTextEditorProps, 'className' | 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>;
 
 export const TypescriptEditor = ({
   id,
-  scrollPastEnd,
   env,
   className,
   initialValue,
@@ -49,7 +47,7 @@ export const TypescriptEditor = ({
           indentWithTab: true,
           lineNumbers: true,
           lineWrapping: false,
-          scrollPastEnd,
+          scrollPastEnd: true,
         }),
         createThemeExtensions({
           themeMode,

package/src/components/TypescriptEditor/index.ts

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

package/src/components/index.ts

@@ -4,5 +4,6 @@
 
 import React from 'react';
 
-export const ScriptEditor = React.lazy(() => import('./ScriptEditor'));
-export const TypescriptEditor = React.lazy(() => import('./TypescriptEditor'));
+export * from './ScriptSettings';
+
+export const ScriptContainer = React.lazy(() => import('./ScriptContainer'));

package/src/edge/functions.ts

@@ -17,6 +17,7 @@ import { matchServiceCredential } from './hub-protocol';
 
 // TODO: use URL scheme for source?
 const USERFUNCTIONS_META_KEY = 'dxos.org/service/function';
+export const USERFUNCTIONS_PRESET_META_KEY = 'dxos.org/service/function-preset';
 const USERFUNCTIONS_CREDENTIAL_CAPABILITY = 'composer:beta';
 
 // TODO: Synchronize API types with server