@dxos/plugin-script 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

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

@@ -1,55 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useMemo } from 'react';
-
-import { ScriptType } from '@dxos/functions';
-import { TextType } from '@dxos/plugin-markdown/types';
-import { create, createObject, makeRef } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { ScriptBlock } from './ScriptBlock';
-// @ts-ignore
-import mainUrl from '../FrameContainer/frame?url';
-
-const typename = 'example.com/type/contact';
-
-const code = [
-  "import { Filter, useQuery, useSpaces} from '@dxos/react-client/echo';",
-  "import { Chart, Explorer, Globe } from '@dxos/plugin-explorer';",
-  '',
-  'export default () => {',
-  '  const spaces = useSpaces();',
-  '  const space = spaces[1]',
-  `  const objects = useQuery(space, Filter.typename('${typename}'));`,
-  '  return <Chart items={objects} accessor={object => ({ x: object.lat, y: object.lng })} />',
-  '}',
-].join('\n');
-
-const DefaultStory = () => {
-  // TODO(burdon): Review what's the right way to create automerge-backed objects.
-  const object = useMemo(
-    () => createObject(create(ScriptType, { source: makeRef(create(TextType, { content: code })) })),
-    [],
-  );
-
-  // TODO(dmaretskyi): Not sure how to provide `containerUrl` here since the html now lives in composer-app.
-  // TODO(burdon): Normalize html/frame.tsx with composer-app to test locally.
-  return <ScriptBlock script={object} containerUrl={mainUrl} />;
-};
-
-export const Default = {};
-
-const meta: Meta = {
-  title: 'plugins/plugin-script/ScriptBlock',
-  component: ScriptBlock,
-  render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withTheme, withLayout({ fullscreen: true, tooltips: true })],
-};
-
-export default meta;

package/src/components/ScriptBlock/ScriptBlock.tsx

@@ -1,102 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-// @ts-ignore
-import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { type ScriptType } from '@dxos/functions';
-import { createDocAccessor, DocAccessor } from '@dxos/react-client/echo';
-import { Toolbar, Button, Icon } from '@dxos/react-ui';
-
-import { Bundler, type BundlerResult, initializeBundler } from '../../bundler';
-import { FrameContainer } from '../FrameContainer';
-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;
-  hideSelector?: boolean;
-
-  // 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, hideSelector, containerUrl }: ScriptBlockProps) => {
-  const source = useMemo(() => script.source && createDocAccessor(script.source.target!, ['content']), [script.source]);
-  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 initializeBundler({ wasmUrl });
-  }, []);
-  useEffect(() => {
-    // TODO(burdon): Throttle and listen for update.
-    const t = setTimeout(async () => {
-      if (!source) {
-        return;
-      }
-
-      const result = await bundler.bundle(DocAccessor.getValue(source));
-      setResult(result);
-    });
-
-    return () => clearTimeout(t);
-  }, [source]);
-
-  const handleExec = useCallback(
-    async (auto = true) => {
-      if (!source) {
-        return;
-      }
-      const result = await bundler.bundle(DocAccessor.getValue(source));
-      setResult(result);
-    },
-    [source],
-  );
-
-  return (
-    <div className='flex flex-col grow overflow-hidden'>
-      {!hideSelector && (
-        <Toolbar.Root>
-          <div className='grow' />
-          {result?.bundle && !result?.error && (
-            <div title={String(result.error)}>
-              <Icon icon='ph--check--regular' size={5} classNames='text-green-500' />
-            </div>
-          )}
-          {result?.error && (
-            <div title={String(result.error)}>
-              <Icon icon='ph--warning--regular' size={5} classNames='text-orange-500' />
-            </div>
-          )}
-          <Button variant='ghost' onClick={() => handleExec()}>
-            <Icon icon='ph--play--regular' size={5} />
-          </Button>
-        </Toolbar.Root>
-      )}
-
-      <div className='flex'>
-        <ScriptEditor script={script} />
-        {result && <FrameContainer key={script.id} result={result} containerUrl={containerUrl} />}
-      </div>
-    </div>
-  );
-};

package/src/components/ScriptBlock/index.ts

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

package/src/components/ScriptEditor.tsx

@@ -1,193 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { format } from 'prettier';
-import prettierPluginEstree from 'prettier/plugins/estree';
-import prettierPluginTypescript from 'prettier/plugins/typescript';
-import React, { useCallback, useMemo, useState } from 'react';
-
-import {
-  FUNCTIONS_PRESET_META_KEY,
-  FunctionType,
-  type ScriptType,
-  getInvocationUrl,
-  getUserFunctionUrlInMetadata,
-  setUserFunctionUrlInMetadata,
-  uploadWorkerFunction,
-  incrementSemverPatch,
-} from '@dxos/functions';
-import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { create, createDocAccessor, Filter, getMeta, getSpace, makeRef, useQuery } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-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 { type TemplateSelectProps, Toolbar, type ViewType } from './Toolbar';
-import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
-import { Bundler } from '../bundler';
-import { SCRIPT_PLUGIN } from '../meta';
-import { templates } from '../templates';
-
-export type ScriptEditorProps = ThemedClassName<{
-  script: ScriptType;
-}> &
-  Pick<TypescriptEditorProps, 'env'>;
-
-export const ScriptEditor = ({ classNames, script, env }: ScriptEditorProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
-  const client = useClient();
-  const identity = useIdentity();
-  const space = getSpace(script);
-  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
-
-  const extensions = useMemo(
-    () => [
-      listener({
-        onChange: (text) => {
-          if (script.source.target && script.source.target.content !== text) {
-            script.changed = true;
-          }
-        },
-      }),
-      createDataExtensions({
-        id: script.id,
-        text: script.source.target && createDocAccessor(script.source.target, ['content']),
-        space,
-        identity,
-      }),
-    ],
-    [script, script.source.target, space, identity],
-  );
-
-  const [view, setView] = useState<ViewType>('editor');
-  const existingFunctionUrl = fn && getUserFunctionUrlInMetadata(getMeta(fn));
-  const [error, setError] = useState<string>();
-
-  const handleFormat = useCallback(async () => {
-    if (!script.source) {
-      return;
-    }
-
-    try {
-      script.source.target!.content = await format(script.source.target!.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 handleTemplateChange: TemplateSelectProps['onTemplateSelect'] = (id) => {
-    const template = templates.find((template) => template.id === id);
-    if (template) {
-      script.name = template.name;
-      script.source!.target!.content = template.source;
-      const metaKeys = getMeta(script).keys;
-      const oldPresetIndex = metaKeys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
-      if (oldPresetIndex >= 0) {
-        metaKeys.splice(oldPresetIndex, 1);
-      }
-      if (template.presetId) {
-        metaKeys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
-      }
-    }
-  };
-
-  const handleDeploy = useCallback(async () => {
-    if (!script.source || !identity || !space) {
-      return;
-    }
-
-    setError(undefined);
-
-    try {
-      const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
-
-      const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
-      const buildResult = await bundler.bundle(script.source.target!.content);
-      if (buildResult.error || !buildResult.bundle) {
-        throw buildResult.error;
-      }
-
-      const { functionId, version, meta } = await uploadWorkerFunction({
-        client,
-        spaceId: space.id,
-        version: fn ? incrementSemverPatch(fn.version) : '0.0.1',
-        functionId: existingFunctionId,
-        source: buildResult.bundle,
-      });
-      if (functionId === undefined || version === undefined) {
-        throw new Error(`Upload didn't return expected data: functionId=${functionId}, version=${version}`);
-      }
-
-      log.info('function uploaded', { functionId, version });
-      if (fn) {
-        fn.version = version;
-      }
-
-      const deployedFunction =
-        fn ?? space.db.add(create(FunctionType, { name: functionId, version, source: makeRef(script) }));
-
-      script.changed = false;
-
-      if (meta.inputSchema) {
-        deployedFunction.inputSchema = meta.inputSchema;
-      } else {
-        log.verbose('no input schema in function metadata', { functionId });
-      }
-
-      setUserFunctionUrlInMetadata(getMeta(deployedFunction), `/${space.id}/${functionId}`);
-
-      setView('split');
-    } catch (err: any) {
-      log.catch(err);
-      setError(t('upload failed label'));
-    }
-  }, [fn, existingFunctionUrl, script, script.name, script.source, space?.id ?? null]);
-
-  const functionUrl = useMemo(() => {
-    if (!existingFunctionUrl) {
-      return;
-    }
-
-    return getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
-      spaceId: space?.id,
-    });
-  }, [existingFunctionUrl, space]);
-
-  return (
-    <div role='none' className={mx('flex flex-col w-full overflow-hidden divide-y divide-separator', classNames)}>
-      <Toolbar
-        deployed={Boolean(existingFunctionUrl) && !script.changed}
-        functionUrl={functionUrl}
-        error={error}
-        view={view}
-        templates={templates}
-        onDeploy={handleDeploy}
-        onFormat={handleFormat}
-        onViewChange={setView}
-        onTemplateSelect={handleTemplateChange}
-      />
-
-      {view !== 'preview' && (
-        <TypescriptEditor
-          id={script.id}
-          env={env}
-          initialValue={script.source?.target?.content}
-          extensions={extensions}
-          className='flex is-full bs-full overflow-hidden ch-focus-ring-inset-over-all'
-        />
-      )}
-
-      {view !== 'editor' && <DebugPanel functionUrl={functionUrl} />}
-    </div>
-  );
-};

package/src/components/Toolbar/Toolbar.tsx

@@ -1,177 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useState } from 'react';
-
-import {
-  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 (
-    <ElevationProvider elevation='positioned'>
-      <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>
-  );
-};
-
-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>
-  );
-};