@dxos/plugin-script 0.6.8-main.046e6cf

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -0,0 +1,132 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Check, Play, Warning } from '@phosphor-icons/react';
+// @ts-ignore
+import esbuildWasmURL 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 { FrameContainer } from './FrameContainer';
+import { Splitter, SplitterSelector, type View } from './Splitter';
+import { Compiler, type CompilerResult, initializeCompiler } from '../../compiler';
+import { type ScriptType } from '../../types';
+import { ScriptEditor } from '../ScriptEditor';
+
+// Keep in sync with packages/apps/composer-app/script-frame/main.tsx .
+const PROVIDED_MODULES = [
+  'react',
+  'react-dom/client',
+  '@dxos/client',
+  '@dxos/react-client',
+  '@dxos/react-client/echo',
+  '@dxos/plugin-explorer',
+];
+
+export type ScriptBlockProps = {
+  script: ScriptType;
+  view?: View;
+  hideSelector?: boolean;
+  classes?: {
+    root?: string;
+    toolbar?: string;
+  };
+
+  // Url to the page used to host the script in the iframe.
+  containerUrl: string;
+};
+
+/**
+ * @deprecated
+ */
+// TODO(burdon): Cache compiled results in context.
+export const ScriptBlock = ({
+  script,
+  view: controlledView,
+  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<CompilerResult>();
+  const compiler = useMemo(() => new Compiler({ platform: 'browser', providedModules: PROVIDED_MODULES }), []);
+  useEffect(() => {
+    // TODO(burdon): Create useCompiler hook (with initialization).
+    void initializeCompiler({ wasmURL: esbuildWasmURL });
+  }, []);
+  useEffect(() => {
+    // TODO(burdon): Throttle and listen for update.
+    const t = setTimeout(async () => {
+      if (!source) {
+        return;
+      }
+
+      const result = await compiler.compile(DocAccessor.getValue(source));
+      setResult(result);
+    });
+
+    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) {
+        return;
+      }
+      const result = await compiler.compile(DocAccessor.getValue(source));
+      setResult(result);
+      if (auto && view === 'editor') {
+        setView('preview');
+      }
+    },
+    [source, view],
+  );
+
+  return (
+    <div className={mx('flex flex-col grow overflow-hidden', classes?.root)}>
+      {!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')} />
+              </div>
+            )}
+            {result?.error && (
+              <div title={String(result.error)}>
+                <Warning className={mx(getSize(5), 'text-orange-500')} />
+              </div>
+            )}
+            <Button variant='ghost' onClick={() => handleExec()}>
+              <Play className={getSize(5)} />
+            </Button>
+          </Toolbar.Root>
+        </DensityProvider>
+      )}
+
+      <Splitter view={view}>
+        <ScriptEditor script={script} />
+        {result && <FrameContainer key={script.id} result={result} containerUrl={containerUrl} />}
+      </Splitter>
+    </div>
+  );
+};

package/src/components/ScriptBlock/Splitter/Splitter.stories.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useState } from 'react';
+
+import { DensityProvider } from '@dxos/react-ui';
+
+import { Splitter, SplitterSelector, type View } from './Splitter';
+
+const Story = () => {
+  const [view, setView] = useState<View>();
+  return (
+    <div>
+      <DensityProvider density='fine'>
+        <SplitterSelector view={view} onChange={setView} />
+      </DensityProvider>
+      <Splitter view={view}>
+        <div>1</div>
+        <div>2</div>
+      </Splitter>
+    </div>
+  );
+};
+
+export default {
+  title: 'plugin-script/Splitter',
+  component: Splitter,
+  render: Story,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

package/src/components/ScriptBlock/Splitter/Splitter.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Code, SquareSplitHorizontal, Eye } from '@phosphor-icons/react';
+import React, { type ReactNode } from 'react';
+
+import { ToggleGroup, ToggleGroupItem, Toolbar } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+export type View = 'editor' | 'preview' | 'split';
+
+export type SplitterProps = {
+  view?: View;
+  className?: string;
+  children?: ReactNode[];
+};
+
+// TODO(burdon): Surfaces?
+export const Splitter = ({ view = 'split', className, children = [] }: SplitterProps) => {
+  const [left, right] = children;
+  return (
+    <div className={mx('flex overflow-hidden grow', className)}>
+      {left && view !== 'preview' && <div className='flex flex-1 shrink-0 overflow-hidden'>{left}</div>}
+      {right && view !== 'editor' && <div className='flex flex-1 shrink-0 overflow-hidden'>{right}</div>}
+    </div>
+  );
+};
+
+export type SplitterSelectorProps = {
+  view?: View;
+  onChange?: (view: View) => void;
+  className?: string;
+};
+
+export const SplitterSelector = ({ view, onChange, className }: SplitterSelectorProps) => {
+  return (
+    <Toolbar.Root classNames={className}>
+      <ToggleGroup type='single' value={view} onValueChange={(value) => onChange?.(value as View)}>
+        <ToggleGroupItem value='editor'>
+          <Code className={getSize(5)} />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='split'>
+          <SquareSplitHorizontal className={getSize(5)} />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='preview'>
+          <Eye className={getSize(5)} />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </Toolbar.Root>
+  );
+};

package/src/components/ScriptBlock/Splitter/index.ts

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

package/src/components/ScriptBlock/index.ts

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

package/src/components/ScriptEditor.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type DID } from 'iso-did/types';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { createDocAccessor, getMeta, getSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { useTranslation } from '@dxos/react-ui';
+import { createDataExtensions, listener } from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+import { Toolbar } from './Toolbar';
+import { TypescriptEditor } from './TypescriptEditor';
+import {
+  getUserFunctionUrlInMetadata,
+  publicKeyToDid,
+  setUserFunctionUrlInMetadata,
+  uploadWorkerFunction,
+} from '../edge';
+import { SCRIPT_PLUGIN } from '../meta';
+import { type ScriptType } from '../types';
+
+export type ScriptEditorProps = {
+  script: ScriptType;
+  role?: string;
+};
+
+export const ScriptEditor = ({ script, role }: ScriptEditorProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const client = useClient();
+  const identity = useIdentity();
+  const space = getSpace(script);
+  const extensions = useMemo(
+    () => [
+      listener({
+        onChange: (text) => {
+          if (script.source && script.source?.content !== text) {
+            script.changed = true;
+          }
+        },
+      }),
+      createDataExtensions({
+        id: script.id,
+        text: script.source && createDocAccessor(script.source, ['content']),
+        space,
+        identity,
+      }),
+    ],
+    [script, script.source, space, identity],
+  );
+  const initialValue = useMemo(() => script.source?.content, [script.source]);
+  const existingFunctionUrl = getUserFunctionUrlInMetadata(getMeta(script));
+  const [error, setError] = useState<string>();
+
+  const handleBindingChange = useCallback(
+    (binding: string) => {
+      script.binding = binding;
+    },
+    [script],
+  );
+
+  const handleDeploy = useCallback(async () => {
+    if (!script.source || !identity) {
+      return;
+    }
+
+    setError(undefined);
+
+    try {
+      const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
+      const ownerDid = (existingFunctionUrl?.split('/').at(-2) as DID) ?? publicKeyToDid(identity.identityKey);
+
+      const { result, functionId, functionVersionNumber, errorMessage } = await uploadWorkerFunction({
+        clientConfig: client.config,
+        halo: client.halo,
+        ownerDid,
+        functionId: existingFunctionId,
+        name: script.name,
+        source: script.source.content,
+      });
+      if (result !== 'success' || functionId === undefined) {
+        throw new Error(errorMessage);
+      }
+      log.info('function uploaded', { functionId, functionVersionNumber });
+      const meta = getMeta(script);
+      setUserFunctionUrlInMetadata(meta, `/${ownerDid}/${functionId}`);
+      script.changed = false;
+    } catch (err: any) {
+      log.catch(err);
+      setError(t('upload failed label'));
+    }
+  }, [existingFunctionUrl, script, script.name, script.source]);
+
+  return (
+    <div role='none' className={mx(role === 'article' && 'row-span-2', 'is-full pli-2')}>
+      <Toolbar
+        binding={script.binding ?? ''}
+        onBindingChange={handleBindingChange}
+        deployed={Boolean(existingFunctionUrl) && !script.changed}
+        onDeploy={handleDeploy}
+        functionUrl={existingFunctionUrl}
+        error={error}
+      />
+      <TypescriptEditor id={script.id} initialValue={initialValue} extensions={extensions} />
+    </div>
+  );
+};
+
+export default ScriptEditor;

package/src/components/Toolbar.stories.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+// import React from 'react';
+
+import { Toolbar } from './Toolbar';
+
+export default {
+  title: 'plugin-script/Toolbar',
+  component: Toolbar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = { args: { binding: 'example', deployed: true } };

package/src/components/Toolbar.tsx

@@ -0,0 +1,163 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Check, Checks, CircleNotch, Link, PencilSimple, UploadSimple, WarningCircle, X } from '@phosphor-icons/react';
+import React, { useRef, useState } from 'react';
+
+import {
+  Button,
+  DensityProvider,
+  ElevationProvider,
+  Input,
+  Toolbar as NaturalToolbar,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { SCRIPT_PLUGIN } from '../meta';
+
+export type ToolbarProps = {
+  binding: string;
+  onBindingChange: (binding: string) => void;
+  deployed?: boolean;
+  onDeploy?: () => Promise<void>;
+  functionUrl?: string;
+  error?: string;
+};
+
+export const Toolbar = ({ binding, onBindingChange, deployed, onDeploy, functionUrl, error }: ToolbarProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const [pending, setPending] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleEdit = () => {
+    setEditing(true);
+    inputRef.current?.focus();
+  };
+
+  const handleSave = () => {
+    setEditing(false);
+    onBindingChange(inputRef.current?.value || '');
+  };
+
+  const handleCancel = () => {
+    setEditing(false);
+  };
+
+  const handleCopyLink = async () => {
+    if (!functionUrl) {
+      return;
+    }
+
+    await navigator.clipboard.writeText(functionUrl);
+  };
+
+  const handleDeploy = async () => {
+    setPending(true);
+    await onDeploy?.();
+    setPending(false);
+  };
+
+  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} defaultValue={binding} disabled={!editing} classNames='!is-auto' />
+            {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>
+          <div role='separator' className='grow' />
+          {/* TODO(wittjosiah): Better treatment for status indicators in toolbar? */}
+          {error ? (
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                <WarningCircle className={getSize(4)} />
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content>
+                  <Tooltip.Arrow />
+                  {error}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          ) : deployed ? (
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                <Checks className={getSize(4)} />
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content>
+                  <Tooltip.Arrow />
+                  {t('deployed label')}
+                </Tooltip.Content>
+              </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}>
+                {pending ? (
+                  <CircleNotch className={mx('spinner', getSize(4))} />
+                ) : (
+                  <UploadSimple className={getSize(4)} />
+                )}
+              </NaturalToolbar.Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content>
+                <Tooltip.Arrow />
+                {pending ? t('pending label') : t('deploy label')}
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </NaturalToolbar.Root>
+      </ElevationProvider>
+    </DensityProvider>
+  );
+};

package/src/components/TypescriptEditor.stories.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// TODO(burdon): Typescript.
+// TODO(burdon): Effect schema.
+// TODO(burdon): JSX.
+// TODO(burdon): react-buddy for storybook?
+
+// Marijn
+// - language support for S
+// - hierarchical editor (DND)
+// - virtual document image rendering
+// - mobile rendering error
+
+import '@dxosTheme';
+
+import React, { useMemo } from 'react';
+
+import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
+import { createDataExtensions } from '@dxos/react-ui-editor';
+
+import { TypescriptEditor } from './TypescriptEditor';
+
+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'),
+];
+
+const Story = () => {
+  const object = useMemo(() => createEchoObject({ content: examples[0] }), []);
+  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} />;
+};
+
+export default {
+  title: 'plugin-script/TypescriptEditor',
+  component: TypescriptEditor,
+  render: Story,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

package/src/components/TypescriptEditor.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { javascript } from '@codemirror/lang-javascript';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import React from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import {
+  autocomplete,
+  createBasicExtensions,
+  createThemeExtensions,
+  editorContent,
+  useTextEditor,
+  type UseTextEditorProps,
+} from '@dxos/react-ui-editor';
+import { nonNullable } from '@dxos/util';
+
+export type TypescriptEditorProps = {
+  id: string;
+  className?: string;
+  scrollPastEnd?: boolean;
+} & Pick<UseTextEditorProps, 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>;
+
+export const TypescriptEditor = ({
+  id,
+  extensions,
+  initialValue,
+  scrollTo,
+  selection,
+  className,
+  scrollPastEnd,
+}: TypescriptEditorProps) => {
+  const { themeMode } = useThemeContext();
+
+  const { parentRef, focusAttributes } = useTextEditor(
+    () => ({
+      id,
+      initialValue,
+      extensions: [
+        extensions,
+        // TODO(wittjosiah): Highlight active line doesn't work.
+        createBasicExtensions({ highlightActiveLine: true, indentWithTab: true, lineNumbers: true, scrollPastEnd }),
+        // TODO(wittjosiah): Factor out syntax highlighting to theme extensions.
+        themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            content: { className: editorContent },
+          },
+        }),
+        javascript({ typescript: true }),
+        autocomplete(),
+      ].filter(nonNullable),
+      selection,
+      scrollTo,
+    }),
+    [id, initialValue, extensions, themeMode, selection, scrollTo],
+  );
+
+  return <div ref={parentRef} className={className} {...focusAttributes} />;
+};
+
+export default TypescriptEditor;

package/src/components/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+export const ScriptEditor = React.lazy(() => import('./ScriptEditor'));
+export const TypescriptEditor = React.lazy(() => import('./TypescriptEditor'));

package/src/edge/codec.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { PublicKey } from '@dxos/keys';
+
+import { HeaderCodec, type EncodedKey } from './header-codec';
+
+export const codec = new HeaderCodec<PublicKey>({
+  isKey: (value: any): value is PublicKey => value instanceof PublicKey,
+  encode: (key: PublicKey): EncodedKey => ({ __k: key.toHex() }),
+  decode: (value: EncodedKey): PublicKey => PublicKey.fromHex(value.__k),
+});