@dxos/plugin-script 0.7.4 → 0.7.5-labs.a279d8c

package/src/components/ScriptEditor.tsx

@@ -1,191 +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 { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { create, createDocAccessor, Filter, getMeta, getSpace, 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 {
-  getInvocationUrl,
-  getUserFunctionUrlInMetadata,
-  setUserFunctionUrlInMetadata,
-  uploadWorkerFunction,
-  FUNCTIONS_PRESET_META_KEY,
-  incrementSemverPatch,
-} from '../edge';
-import { SCRIPT_PLUGIN } from '../meta';
-import { templates } from '../templates';
-import { FunctionType, type ScriptType } from '../types';
-
-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 && 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 [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.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 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 === 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.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: 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?.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='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>
-  );
-};
-
-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/edge/functions.ts

@@ -1,116 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type DID } from 'iso-did/types';
-
-import { type Client } from '@dxos/client';
-import { type ObjectMeta } from '@dxos/echo-schema';
-import { EdgeHttpClient, type EdgeIdentity } from '@dxos/edge-client';
-import { invariant } from '@dxos/invariant';
-import type { PublicKey, SpaceId } from '@dxos/keys';
-import { log } from '@dxos/log';
-import { type UploadFunctionResponseBody } from '@dxos/protocols';
-
-// TODO: use URL scheme for source?
-const FUNCTIONS_META_KEY = 'dxos.org/service/function';
-
-export const FUNCTIONS_PRESET_META_KEY = 'dxos.org/service/function-preset';
-
-export type UploadWorkerArgs = {
-  client: Client;
-  name?: string;
-  source: string;
-  version: string;
-  functionId?: string;
-  spaceId: SpaceId;
-};
-
-export const uploadWorkerFunction = async ({
-  client,
-  name,
-  version,
-  source,
-  spaceId,
-  functionId,
-}: UploadWorkerArgs): Promise<UploadFunctionResponseBody> => {
-  const edgeUrl = client.config.values.runtime?.services?.edge?.url;
-  invariant(edgeUrl, 'Edge is not configured.');
-  const edgeClient = new EdgeHttpClient(edgeUrl);
-  const edgeIdentity = createEdgeIdentity(client);
-  edgeClient.setIdentity(edgeIdentity);
-  const response = await edgeClient.uploadFunction({ spaceId, functionId }, { name, version, script: source });
-
-  log('Uploaded', {
-    functionId,
-    source,
-    name,
-    identityKey: edgeIdentity.identityKey,
-    response,
-  });
-
-  return response;
-};
-
-export const getUserFunctionUrlInMetadata = (meta: ObjectMeta) => {
-  return meta.keys.find((key) => key.source === FUNCTIONS_META_KEY)?.id;
-};
-
-export const setUserFunctionUrlInMetadata = (meta: ObjectMeta, functionUrl: string) => {
-  const key = meta.keys.find((key) => key.source === FUNCTIONS_META_KEY);
-  if (key) {
-    if (key.id !== functionUrl) {
-      throw new Error('Metadata mismatch');
-    }
-  } else {
-    meta.keys.push({ source: FUNCTIONS_META_KEY, id: functionUrl });
-  }
-};
-
-export const getInvocationUrl = (functionUrl: string, edgeUrl: string, options: InvocationOptions = {}) => {
-  const baseUrl = new URL('functions/', edgeUrl);
-
-  // Leading slashes cause the URL to be treated as an absolute path.
-  const relativeUrl = functionUrl.replace(/^\//, '');
-  const url = new URL(`./${relativeUrl}`, baseUrl.toString());
-  options.spaceId && url.searchParams.set('spaceId', options.spaceId);
-  options.subjectId && url.searchParams.set('subjectId', options.subjectId);
-  url.protocol = 'https';
-  return url.toString();
-};
-
-const createEdgeIdentity = (client: Client): EdgeIdentity => {
-  const identity = client.halo.identity.get();
-  const device = client.halo.device;
-  if (!identity || !device) {
-    throw new Error('Identity not available');
-  }
-  return {
-    identityKey: identity.identityKey.toHex(),
-    peerKey: device.deviceKey.toHex(),
-    presentCredentials: async ({ challenge }) => {
-      const identityService = client.services.services.IdentityService!;
-      const authCredential = await identityService.createAuthCredential();
-      return identityService.signPresentation({
-        presentation: { credentials: [authCredential] },
-        nonce: challenge,
-      });
-    },
-  };
-};
-
-export const incrementSemverPatch = (version: string): string => {
-  const [major, minor, patch] = version.split('.');
-  const patchNum = Number(patch);
-  invariant(!Number.isNaN(patchNum), 'Unexpected function version format.');
-  return [major, minor, String(patchNum + 1)].join('.');
-};
-
-export const publicKeyToDid = (key: PublicKey): DID => {
-  return `did:key:${key.toHex()}`;
-};
-
-export type InvocationOptions = {
-  spaceId?: SpaceId;
-  subjectId?: string;
-};

package/src/edge/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-// TODO(wittjosiah): Factor out.
-
-export * from './functions';

package/src/types/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './schema';
-export * from './types';

package/src/types/schema.ts

@@ -1,44 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { JsonSchemaType, ref, S, TypedObject } from '@dxos/echo-schema';
-import { TextType } from '@dxos/plugin-markdown/types';
-
-/**
- * Source script.
- */
-export class ScriptType extends TypedObject({
-  typename: 'dxos.org/type/Script',
-  version: '0.1.0',
-})({
-  // TODO(burdon): Change to URI?
-  name: S.optional(S.String),
-  description: S.optional(S.String),
-  // TODO(burdon): Change to hash of deployed content.
-  // Whether source has changed since last deploy.
-  changed: S.optional(S.Boolean),
-  source: ref(TextType),
-}) {}
-
-/**
- * Function deployment.
- */
-// TODO(burdon): Move to core/functions.
-export class FunctionType extends TypedObject({
-  typename: 'dxos.org/type/Function',
-  version: '0.1.0',
-})({
-  // TODO(burdon): Rename to id/uri?
-  name: S.NonEmptyString,
-  version: S.String,
-
-  // Reference to a source script if it exists within ECHO.
-  // TODO(burdon): Don't ref ScriptType directly (core).
-  source: S.optional(ref(ScriptType)),
-
-  inputSchema: S.optional(JsonSchemaType),
-
-  // Local binding to a function name.
-  binding: S.optional(S.String),
-}) {}

package/src/types/types.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type {
-  GraphBuilderProvides,
-  IntentResolverProvides,
-  MetadataRecordsProvides,
-  SettingsProvides,
-  SurfaceProvides,
-  TranslationsProvides,
-} from '@dxos/app-framework';
-import { type SchemaProvides } from '@dxos/plugin-space';
-
-import { SCRIPT_PLUGIN } from '../meta';
-
-export enum ScriptAction {
-  CREATE = `${SCRIPT_PLUGIN}/create`,
-}
-
-export type ScriptSettingsProps = {};
-
-export type ScriptPluginProvides = GraphBuilderProvides &
-  IntentResolverProvides &
-  MetadataRecordsProvides &
-  SchemaProvides &
-  SettingsProvides<ScriptSettingsProps> &
-  SurfaceProvides &
-  TranslationsProvides;