@dxos/plugin-script 0.8.4-main.c4373fc → 0.8.4-main.d9fc60f731

package/src/components/DeploymentDialog/DeploymentDialog.tsx

@@ -1,106 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useMemo } from 'react';
-
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { getSpace } from '@dxos/react-client/echo';
-import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
-import { type DataType } from '@dxos/schema';
-
-import { useCreateAndDeployScriptTemplates } from '../../hooks/useCreateAndDeployScriptTemplates';
-import { meta } from '../../meta';
-import { type Template } from '../../templates';
-
-export const DEPLOYMENT_DIALOG = `${meta.id}/deployment/dialog`;
-
-// TODO(ZaymonFC):
-//  - Show activity and feedback to the user.
-//  - Only take an array of templateIds and get the name from the data.
-//  - Pending / onError states.
-
-export type DeploymentDialogProps = {
-  accessToken: DataType.AccessToken;
-  scriptTemplates: Template[];
-};
-
-export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDialogProps) => {
-  const { t } = useTranslation(meta.id);
-  const space = useMemo(() => getSpace(accessToken), [accessToken]);
-
-  // TODO(ZaymonFC): Thinking further. All of this should get moved to intents to run async in the background.
-  //   Deployment shouldn't be tied to the lifecycle of the dialogue component.
-  const { handleCreateAndDeployScripts, status } = useCreateAndDeployScriptTemplates(space, scriptTemplates);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  useEffect(() => {
-    if (status === 'success') {
-      // TODO(ZaymonFC): We can probably re-use this toast for normal script deployment.
-      void dispatch(
-        createIntent(LayoutAction.AddToast, {
-          part: 'toast',
-          subject: {
-            id: `${meta.id}/deployment-success`,
-            icon: 'ph--check--regular',
-            duration: Infinity,
-            title: ['script deployment toast label', { ns: meta.id, count: scriptTemplates.length }],
-            description: ['script deployment toast description', { ns: meta.id, count: scriptTemplates.length }],
-            closeLabel: ['script deployment toast close label', { ns: meta.id, count: scriptTemplates.length }],
-          },
-        }),
-      );
-      void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
-    }
-    if (status === 'error') {
-      void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
-      void dispatch(
-        createIntent(LayoutAction.AddToast, {
-          part: 'toast',
-          subject: {
-            id: `${meta.id}/deployment-error`,
-            icon: 'ph--warning--regular',
-            duration: Infinity,
-            title: ['script deployment error toast label', { ns: meta.id, count: scriptTemplates.length }],
-            description: ['script deployment error toast description', { ns: meta.id, count: scriptTemplates.length }],
-            closeLabel: ['script deployment error toast close label', { ns: meta.id, count: scriptTemplates.length }],
-          },
-        }),
-      );
-    }
-  }, [status, dispatch]);
-
-  return (
-    <Dialog.Content>
-      <div className='flex justify-between items-center'>
-        <Dialog.Title>{t('deployment dialog title')}</Dialog.Title>
-        <Dialog.Close asChild>
-          <Button density='fine' variant='ghost'>
-            <Icon icon='ph--x--regular' size={4} />
-          </Button>
-        </Dialog.Close>
-      </div>
-      <div role='none' className='plb-4'>
-        {/* TODO: Implement deployment logic and UI. */}
-        <p>{t('deployment dialog scripts found message', { count: scriptTemplates.length })}</p>
-        <ul className='pbs-2'>
-          {scriptTemplates.map((template) => {
-            return <li key={template.id}>{template.name}</li>;
-          })}
-        </ul>
-      </div>
-      <div role='none' className='flex flex-row-reverse gap-1'>
-        <Button variant='primary' onClick={handleCreateAndDeployScripts} disabled={status === 'pending'}>
-          {status === 'pending'
-            ? t('deployment dialog deploy functions pending button label', { count: scriptTemplates.length })
-            : t('deployment dialog deploy functions button label', { count: scriptTemplates.length })}
-        </Button>
-        <Dialog.Close asChild disabled={status === 'pending'}>
-          <Button disabled={status === 'pending'}>{t('deployment dialog skip button label')}</Button>
-        </Dialog.Close>
-      </div>
-    </Dialog.Content>
-  );
-};
-
-export default DeploymentDialog;

package/src/components/DeploymentDialog/index.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { DEPLOYMENT_DIALOG, DeploymentDialog } from './DeploymentDialog';
-
-export { DEPLOYMENT_DIALOG };
-
-export default DeploymentDialog;

package/src/components/FrameContainer/FrameContainer.tsx

@@ -1,84 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useEffect, useRef } from 'react';
-
-import { clientServiceBundle } from '@dxos/client-protocol';
-import { type BundleResult } from '@dxos/functions/bundler';
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { baseSurface, mx } from '@dxos/react-ui-theme';
-import { createProtoRpcPeer } from '@dxos/rpc';
-import { createIFramePort } from '@dxos/rpc-tunnel';
-
-export type FrameContainerProps = {
-  containerUrl: string;
-  result: BundleResult;
-  debug?: boolean;
-};
-
-/**
- * IFrame container for the compiled script.
- */
-export const FrameContainer = ({ containerUrl, result, debug = true }: FrameContainerProps) => {
-  const client = useClient();
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  useEffect(() => {
-    if (iframeRef.current) {
-      // Connect iframe to client.
-      const rpc = createProtoRpcPeer({
-        exposed: clientServiceBundle,
-        handlers: (client as any)._services.services, // TODO(burdon): Remove cast?
-        port: createIFramePort({
-          channel: 'frame',
-          iframe: iframeRef.current,
-          origin: '*',
-        }),
-      });
-
-      rpc.open().catch((e) => log.catch(e));
-      return () => {
-        rpc.close().catch((e) => log.catch(e));
-      };
-    }
-  }, [iframeRef]);
-
-  // Encodes compiled code via URL.
-  invariant(result.sourceHash, 'Source hash is required.');
-  const sourceHash = Buffer.from(result.sourceHash).toString('hex');
-  const src =
-    'bundle' in result ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}` : undefined;
-
-  return (
-    <>
-      <iframe ref={iframeRef} sandbox='allow-scripts' src={src} style={{ width: '100%', height: '100%' }} />
-
-      {debug && (
-        <div className='relative'>
-          <div
-            className={mx(
-              baseSurface,
-              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] ring rounded',
-              'z-20 overflow-x-hidden overflow-y-auto',
-            )}
-          >
-            <pre className='text-xs whitespace-break-spaces break-all p-2'>
-              {JSON.stringify(
-                {
-                  timestamp: result.timestamp,
-                  sourceHash,
-                  error: 'error' in result ? result.error : undefined,
-                  src,
-                },
-                undefined,
-                2,
-              )}
-            </pre>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};

package/src/components/FrameContainer/frame.html

@@ -1,25 +0,0 @@
-<html>
-<head>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script type="importmap">
-    __IMPORT_MAP__
-  </script>
-
-  <script type="module">
-    import RefreshRuntime from '/@react-refresh';
-    RefreshRuntime.injectIntoGlobalHook(window);
-    window.$RefreshReg$ = () => {};
-    window.$RefreshSig$ = () => (type) => type;
-    window.__vite_plugin_react_preamble_installed__ = true;
-  </script>
-  <script type="module" src="/@vite/client"></script>
-</head>
-<body>
-  <div id="root"></div>
-
-  <!-- Prevent vite from compiling this. -->
-  <script type="module">
-    eval('import("@frame/main")');
-  </script>
-</body>
-</html>

package/src/components/FrameContainer/frame.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { ClientProvider } from '@dxos/react-client';
-
-const init = async (f: () => Promise<Record<string, any>>) =>
-  Object.entries(await f()).reduce<Record<string, any>>((map, [key, module]) => {
-    map[key] = module;
-    return map;
-  }, {});
-
-const main = async () => {
-  const { ClientServicesProxy } = await import('@dxos/react-client');
-  const { createIFramePort } = await import('@dxos/rpc-tunnel');
-
-  // @ts-ignore
-  window.__DXOS_SANDBOX_MODULES__ = await init(async () => ({
-    // prettier-ignore
-    'react': await import('react'),
-    'react-dom/client': await import('react-dom/client'),
-    '@dxos/client': await import('@dxos/client'),
-    '@dxos/react-client': await import('@dxos/react-client'),
-    '@dxos/react-client/echo': await import('@dxos/react-client/echo'),
-    '@dxos/plugin-explorer': await import('@dxos/plugin-explorer'),
-  }));
-
-  // eslint-disable-next-line @typescript-eslint/no-implied-eval
-  const Component = Function('React', "return React.lazy(() => import('@frame/bundle'))")(React);
-
-  const services = new ClientServicesProxy(
-    createIFramePort({
-      channel: 'frame',
-      origin: '*',
-    }),
-  );
-
-  // TODO(burdon): Error handling.
-  createRoot(document.getElementById('root')!).render(
-    <div className='flex fixed inset-0'>
-      <ClientProvider services={() => services}>
-        <Component />
-      </ClientProvider>
-    </div>,
-  );
-};
-
-void main();

package/src/components/FrameContainer/index.ts

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

package/src/components/NotebookContainer.stories.tsx

@@ -1,36 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { createNotebook } from '../testing';
-import { translations } from '../translations';
-
-import { NotebookContainer } from './NotebookContainer';
-
-const meta = {
-  title: 'plugins/plugin-script/NotebookContainer',
-  component: NotebookContainer,
-  decorators: [withTheme, withClientProvider()],
-  parameters: {
-    layout: {
-      type: 'column',
-      className: 'is-prose',
-    },
-    translations,
-  },
-} satisfies Meta<typeof NotebookContainer>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    notebook: createNotebook(),
-  },
-};

package/src/components/NotebookContainer.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { Ref } from '@dxos/echo';
-import { Toolbar, useTranslation } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
-
-import { meta } from '../meta';
-import { ComputeGraph } from '../notebook';
-import { type Notebook } from '../types';
-
-import { NotebookStack, type NotebookStackProps } from './NotebookStack';
-import { type TypescriptEditorProps } from './TypescriptEditor';
-
-export type NotebookContainerProps = {
-  role?: string;
-  notebook?: Notebook.Notebook;
-} & Pick<TypescriptEditorProps, 'env'>;
-
-export const NotebookContainer = ({ notebook, env }: NotebookContainerProps) => {
-  const { t } = useTranslation(meta.id);
-
-  const graph = useMemo(() => notebook && new ComputeGraph(notebook), [notebook]);
-
-  const handleCompute = useCallback(() => {
-    graph?.evaluate();
-  }, [graph]);
-
-  const handleCellInsert = useCallback<NonNullable<NotebookStackProps['onCellInsert']>>(
-    (after) => {
-      const idx = after ? notebook!.cells.findIndex((cell) => cell.id === after) : notebook!.cells.length;
-      notebook?.cells.splice(idx, 0, {
-        id: crypto.randomUUID(),
-        script: Ref.make(DataType.makeText('\n\n\n')),
-      });
-    },
-    [notebook],
-  );
-
-  const handleCellDelete = useCallback<NonNullable<NotebookStackProps['onCellDelete']>>(
-    (id: string) => {
-      const idx = notebook!.cells.findIndex((cell) => cell.id === id);
-      if (idx !== -1) {
-        notebook!.cells.splice(idx, 1);
-      }
-    },
-    [notebook],
-  );
-
-  return (
-    <StackItem.Content classNames='container-max-width border-l border-r border-subduedSeparator' toolbar>
-      <Toolbar.Root>
-        <Toolbar.IconButton
-          icon='ph--plus--regular'
-          iconOnly
-          label={t('add cell label')}
-          onClick={() => handleCellInsert('')}
-        />
-        <Toolbar.IconButton
-          icon='ph--play--fill'
-          iconOnly
-          label={t('compute label')}
-          classNames='text-green-500'
-          onClick={handleCompute}
-        />
-      </Toolbar.Root>
-      <NotebookStack
-        notebook={notebook}
-        graph={graph}
-        env={env}
-        onCellInsert={handleCellInsert}
-        onCellDelete={handleCellDelete}
-      />
-    </StackItem.Content>
-  );
-};
-
-export default NotebookContainer;

package/src/components/ScriptContainer.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { type ScriptType } from '@dxos/functions';
-import { createDocAccessor, getSpace } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { createDataExtensions, listener, stackItemContentEditorClassNames } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { useDeployState, useToolbarState } from '../hooks';
-import { type ScriptSettings } from '../types';
-
-import { ScriptToolbar } from './ScriptToolbar';
-import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
-
-export type ScriptEditorProps = {
-  role: string;
-  script: ScriptType;
-  settings?: ScriptSettings;
-} & Pick<TypescriptEditorProps, 'env'>;
-
-export const ScriptContainer = ({ role, script, settings = { editorInputMode: 'vscode' }, env }: ScriptEditorProps) => {
-  const identity = useIdentity();
-  const space = getSpace(script);
-  const state = useToolbarState();
-  useDeployState({ state, script });
-
-  const extensions = useMemo(
-    () =>
-      script.source.target
-        ? [
-            listener({
-              onChange: (text) => {
-                if (script.source.target?.content !== text) {
-                  script.changed = true;
-                }
-              },
-            }),
-            createDataExtensions({
-              id: script.id,
-              text: createDocAccessor(script.source.target, ['content']),
-              space,
-              identity,
-            }),
-          ]
-        : [],
-    [identity, space, script, script.source.target],
-  );
-
-  return (
-    <StackItem.Content toolbar>
-      <ScriptToolbar state={state} role={role} script={script} />
-      <TypescriptEditor
-        id={script.id}
-        env={env}
-        initialValue={script.source?.target?.content}
-        extensions={extensions}
-        classNames={stackItemContentEditorClassNames(role)}
-        inputMode={settings.editorInputMode}
-        toolbar
-      />
-    </StackItem.Content>
-  );
-};
-
-export default ScriptContainer;