@dxos/plugin-script 0.8.4-main.3c1ae3b → 0.8.4-main.3fbcb4aa9b

package/src/e2e/ai.test.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe } from '@effect/vitest';
+import { test } from 'vitest';
+
+import { Client } from '@dxos/client';
+import { type Space } from '@dxos/client-protocol';
+import { Operation } from '@dxos/compute';
+import { configPreset } from '@dxos/config';
+import { Context } from '@dxos/context';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { bundleFunction } from '@dxos/functions-runtime/native';
+import { FunctionRuntimeKind } from '@dxos/protocols';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+
+// To heavy to run in CI.
+describe.skip('Function', { tags: ['functions-e2e'] }, () => {
+  const config = configPreset({ edge: 'local' });
+
+  test('bundle anthropic function', { timeout: 120_000 }, async () => {
+    await bundleFunction({
+      entryPoint: new URL('../templates/anthropic.ts', import.meta.url).pathname,
+      verbose: true,
+    });
+  });
+
+  test('deploy empty function', { timeout: 120_000 }, async () => {
+    const { space, functionsServiceClient } = await setup();
+
+    await sync(space);
+    const func = await deployFunction(
+      space,
+      functionsServiceClient,
+      new URL('../templates/ping.ts', import.meta.url).pathname,
+    );
+    console.log(func);
+    throw new Error('test');
+  });
+
+  test('deploy and invoke anthropic function', { timeout: 120_000 }, async () => {
+    const { space, functionsServiceClient } = await setup();
+    await sync(space);
+    const func = await deployFunction(
+      space,
+      functionsServiceClient,
+      new URL('../templates/anthropic.ts', import.meta.url).pathname,
+    );
+
+    const result = await functionsServiceClient.invoke(Context.default(), func, {
+      message: 'Hello, world!',
+    });
+    console.log(result);
+  });
+
+  const setup = async () => {
+    const client = await new Client({ config, types: [Operation.PersistentOperation] }).initialize();
+    await client.halo.createIdentity();
+
+    const space = await client.spaces.create();
+    await space.waitUntilReady();
+    await space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED);
+
+    const functionsServiceClient = FunctionsServiceClient.fromClient(client);
+    return { client, space, functionsServiceClient };
+  };
+
+  const sync = async (space: Space) => {
+    await space.db.flush();
+    await space.internal.syncToEdge({
+      onProgress: (state) =>
+        console.log(state ? `${state.unsyncedDocumentCount} documents syncing...` : 'connecting to edge...'),
+    });
+  };
+
+  const deployFunction = async (space: Space, functionsServiceClient: FunctionsServiceClient, entryPoint: string) => {
+    const artifact = await bundleFunction({
+      entryPoint,
+      verbose: true,
+    });
+    const func = await functionsServiceClient.deploy(Context.default(), {
+      version: '0.0.1',
+      ownerPublicKey: space.key,
+      entryPoint: artifact.entryPoint,
+      assets: artifact.assets,
+      runtime: FunctionRuntimeKind.enums.WORKER_LOADER,
+    });
+
+    space.db.add(func);
+    return func;
+  };
+});

package/src/e2e/deploy.test.ts

@@ -3,18 +3,20 @@
 //
 
 import { readFile } from 'node:fs/promises';
-
 import { describe, expect, test } from 'vitest';
 
 import { Client, type Config } from '@dxos/client';
 import { createEdgeIdentity } from '@dxos/client/edge';
 import { configPreset } from '@dxos/config';
+import { Context } from '@dxos/context';
 import { bundleFunction } from '@dxos/functions-runtime/bundler';
 import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 
-describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e'))('Functions deployment', () => {
+// TODO(wittjosiah): Re-enable once @dxos/compute.js is available at the R2 dev bucket
+// (https://pub-5745ae82e450484aa28f75fc6a175935.r2.dev/dev/@dxos/compute.js currently 404s).
+describe.skip('Functions deployment', { tags: ['functions-e2e'] }, () => {
   test('deploys FOREX (effect) function and invokes it via EDGE (main)', { timeout: 120_000 }, async () => {
     const config = configPreset({ edge: 'main' });
     await testDeploy(config);
@@ -42,7 +44,7 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e'))('Functions d
     }
     const functionsServiceClient = FunctionsServiceClient.fromClient(client);
 
-    const func = await functionsServiceClient.deploy({
+    const func = await functionsServiceClient.deploy(Context.default(), {
       ownerPublicKey: space.key,
       version: '0.0.1',
       entryPoint: buildResult.entryPoint,
@@ -50,12 +52,12 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e'))('Functions d
     });
 
     // Invoke deployed function via EDGE directly.
-    const edgeClient = client.edge;
+    const edgeClient = client.edge.http;
     invariant(edgeClient, 'edgeClient is required');
     edgeClient.setIdentity(createEdgeIdentity(client));
 
     const input = { from: 'USD', to: 'EUR' };
-    const result = await functionsServiceClient.invoke(func, input);
+    const result = await functionsServiceClient.invoke(Context.default(), func, input);
     log.info('>>> result', { result, func });
     const resultNumber = Number(result);
     expect(resultNumber).toBeGreaterThan(0);

package/src/hooks/deploy.ts

@@ -4,16 +4,18 @@
 
 import { useEffect, useMemo } from 'react';
 
+import { Script, Operation } from '@dxos/compute';
 import { Obj, Query, Ref } from '@dxos/echo';
-import { Function, type Script, getUserFunctionIdInMetadata } from '@dxos/functions';
+import { getUserFunctionIdInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { type Client, useClient } from '@dxos/react-client';
 import { type Space, getSpace, useQuery } from '@dxos/react-client/echo';
 import { type TFunction } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
-import { errorMessageColors } from '@dxos/react-ui-theme';
+import { messageValence } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
 
-import { meta } from '../meta';
 import { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
@@ -25,10 +27,12 @@ export type DeployState = {
   error: string;
 };
 
+import { type ScriptToolbarStateStore } from './useToolbarState';
+
 export type CreateDeployOptions = {
-  state: Partial<DeployState>;
+  state: ScriptToolbarStateStore;
   script: Script.Script;
-  fn: Function.Function;
+  fn: Operation.PersistentOperation;
   space?: Space;
   existingFunctionId?: string;
   client: Client;
@@ -36,12 +40,14 @@ export type CreateDeployOptions = {
 };
 
 export const createDeploy = ({ state, script, space, fn, client, existingFunctionId, t }: CreateDeployOptions) => {
+  const { value } = state;
+
   // TODO(wittjosiah): Should this be an action?
   const errorItem = createMenuAction('error', () => {}, {
-    label: state.error ?? ['no error label', { ns: meta.id }],
+    label: value.error ?? ['no-error.label', { ns: meta.id }],
     icon: 'ph--warning-circle--regular',
-    hidden: !state.error,
-    classNames: state.error && errorMessageColors,
+    hidden: !value.error,
+    classNames: value.error && messageValence('error'),
   });
 
   const deployAction = createMenuAction<DeployActionProperties>(
@@ -51,75 +57,78 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
         return;
       }
 
-      state.error = undefined;
-      state.deploying = true;
+      state.set('error', undefined);
+      state.set('deploying', true);
 
       const result = await deployScript({ script, client, space, fn, existingFunctionId });
 
       if (!result.success) {
         log.catch(result.error);
-        state.error = t('upload failed label');
+        state.set('error', t('upload-failed.label'));
       }
 
-      state.deploying = false;
+      state.set('deploying', false);
     },
     {
       type: 'deploy',
-      label: [state.deploying ? 'publishing label' : 'deploy label', { ns: meta.id }],
-      icon: state.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
-      disabled: state.deploying,
-      classNames: state.deploying ? '[&_svg]:animate-spin' : '',
+      label: [value.deploying ? 'publishing.label' : 'deploy.label', { ns: meta.id }],
+      icon: value.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
+      disabled: value.deploying,
+      classNames: value.deploying ? '[&_svg]:animate-spin' : '',
     },
   );
 
   const copyAction = createMenuAction<DeployActionProperties>(
     'copy',
     async () => {
-      if (state.functionUrl) {
-        await navigator.clipboard.writeText(state.functionUrl);
+      if (value.functionUrl) {
+        await navigator.clipboard.writeText(value.functionUrl);
       }
     },
     {
       type: 'copy',
-      label: ['copy link label', { ns: meta.id }],
+      label: ['copy-link.label', { ns: meta.id }],
       icon: 'ph--link--regular',
-      disabled: !state.functionUrl,
+      disabled: !value.functionUrl,
     },
   );
 
   return {
     nodes: [errorItem, deployAction, copyAction],
     edges: [
-      { source: 'root', target: 'error' },
-      { source: 'root', target: 'deploy' },
-      { source: 'root', target: 'copy' },
+      { source: 'root', target: 'error', relation: 'child' },
+      { source: 'root', target: 'deploy', relation: 'child' },
+      { source: 'root', target: 'copy', relation: 'child' },
     ],
   };
 };
 
-export const useDeployState = ({ state, script }: { state: Partial<DeployState>; script: Script.Script }) => {
+export const useDeployState = ({ state, script }: { state: ScriptToolbarStateStore; script: Script.Script }) => {
   const { space, client, fn, existingFunctionId } = useDeployDeps({ script });
   useEffect(() => {
     if (!existingFunctionId) {
       return;
     }
 
-    state.functionUrl = getFunctionUrl({
-      script,
-      fn,
-      edgeUrl: client.config.values.runtime?.services?.edge?.url ?? '',
-    });
-  }, [existingFunctionId, space, fn, script, client.config.values.runtime?.services?.edge?.url]);
+    state.set(
+      'functionUrl',
+      getFunctionUrl({
+        script,
+        fn,
+        edgeUrl: client.config.values.runtime?.services?.edge?.url ?? '',
+      }),
+    );
+  }, [existingFunctionId, space, fn, script, client.config.values.runtime?.services?.edge?.url, state]);
 
   useEffect(() => {
-    state.deployed = isScriptDeployed({ script, fn });
-  }, [script.changed, existingFunctionId, fn, script]);
+    state.set('deployed', isScriptDeployed({ script, fn }));
+  }, [script.changed, existingFunctionId, fn, script, state]);
 };
 
 export const useDeployDeps = ({ script }: { script: Script.Script }) => {
   const client = useClient();
   const space = getSpace(script);
-  const [fn] = useQuery(space, Query.type(Function.Function, { source: Ref.make(script) }));
+  const [fn] = useQuery(space?.db, Query.type(Operation.PersistentOperation, { source: Ref.make(script) }));
   const existingFunctionId = useMemo(() => fn && getUserFunctionIdInMetadata(Obj.getMeta(fn)), [fn]);
   return { client, space, fn, existingFunctionId };
 };

package/src/hooks/format.ts

@@ -6,11 +6,12 @@ import { format } from 'prettier';
 import prettierPluginEstree from 'prettier/plugins/estree';
 import prettierPluginTypescript from 'prettier/plugins/typescript';
 
-import { type Script } from '@dxos/functions';
+import { type Script } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { createMenuAction } from '@dxos/react-ui-menu';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 export type FormatActionProperties = { type: 'format' };
 
@@ -23,19 +24,22 @@ export const createFormat = (script: Script.Script) => {
       }
 
       try {
-        script.source.target!.content = await format(script.source.target!.content, {
+        const formatted = await format(script.source.target!.content, {
           parser: 'typescript',
           plugins: [prettierPluginEstree, prettierPluginTypescript],
           semi: true,
           singleQuote: true,
         });
+        Obj.update(script.source.target!, (obj) => {
+          obj.content = formatted;
+        });
       } catch (err: any) {
         // TODO(wittjosiah): Show error in UI.
         log.catch(err);
       }
     },
     {
-      label: ['format label', { ns: meta.id }],
+      label: ['format.label', { ns: meta.id }],
       icon: 'ph--magic-wand--regular',
     },
   );
@@ -46,6 +50,7 @@ export const createFormat = (script: Script.Script) => {
       {
         source: 'root',
         target: 'format',
+        relation: 'child',
       },
     ],
   };

package/src/hooks/template.ts

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Script } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
-import { FUNCTIONS_PRESET_META_KEY, type Script } from '@dxos/functions';
+import { FUNCTIONS_PRESET_META_KEY } from '@dxos/functions';
 import { createMenuAction } from '@dxos/react-ui-menu';
 
 import { templates } from '../templates';
@@ -15,15 +16,21 @@ const createTemplateSelectActions = (script: Script.Script) => {
     return createMenuAction<TemplateActionProperties>(
       `template--${template.id}`,
       () => {
-        script.name = template.name;
-        script.source!.target!.content = template.source;
-        const metaKeys = Obj.getMeta(script).keys;
-        const oldPresetIndex = metaKeys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
-        if (oldPresetIndex >= 0) {
-          metaKeys.splice(oldPresetIndex, 1);
-        }
-        if ('presetId' in template) {
-          metaKeys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
+        Obj.update(script, (script) => {
+          script.name = template.name;
+          const meta = Obj.getMeta(script);
+          const oldPresetIndex = meta.keys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
+          if (oldPresetIndex >= 0) {
+            meta.keys.splice(oldPresetIndex, 1);
+          }
+          if ('presetId' in template) {
+            meta.keys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
+          }
+        });
+        if (script.source?.target) {
+          Obj.update(script.source.target, (obj) => {
+            obj.content = template.source;
+          });
         }
       },
       {
@@ -40,8 +47,8 @@ export const createTemplateSelect = (script: Script.Script) => {
   return {
     nodes: [...templateSelectActions],
     edges: [
-      { source: 'root', target: 'template-select' },
-      ...templateSelectActions.map((action) => ({ source: 'template-select', target: action.id })),
+      { source: 'root', target: 'template-select', relation: 'child' },
+      ...templateSelectActions.map((action) => ({ source: 'template-select', target: action.id, relation: 'child' })),
     ],
   };
 };

package/src/hooks/useCompiler.ts

@@ -2,12 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCapabilities, usePluginManager } from '@dxos/app-framework/react';
+import { useCapabilities, usePluginManager } from '@dxos/app-framework/ui';
+import { runAndForwardErrors } from '@dxos/effect';
 import { useAsyncEffect } from '@dxos/react-ui';
 
-import { ScriptCapabilities } from '../capabilities';
+import { ScriptEvents } from '#types';
+import { ScriptCapabilities } from '#types';
+
 import type { Compiler } from '../compiler';
-import { ScriptEvents } from '../events';
 
 /**
  * Asynchronously sets up the compiler and returns it.
@@ -16,7 +18,7 @@ import { ScriptEvents } from '../events';
 export const useCompiler = (): Compiler | undefined => {
   const manager = usePluginManager();
   useAsyncEffect(async () => {
-    await manager.activate(ScriptEvents.SetupCompiler);
+    await manager.activate(ScriptEvents.SetupCompiler).pipe(runAndForwardErrors);
   }, [manager]);
   const [compiler] = useCapabilities(ScriptCapabilities.Compiler);
   return compiler;

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -2,20 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Function from 'effect/Function';
 import { useCallback, useState } from 'react';
 
-import { chain, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { Script } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
-import { Script } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { SpaceAction } from '@dxos/plugin-space/types';
+import { SpaceOperation } from '@dxos/plugin-space';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 
+import { ScriptOperation } from '#types';
+
 import { type Template } from '../templates';
-import { ScriptAction } from '../types';
 import { deployScript } from '../util';
 
 type DeploymentStatus = 'idle' | 'pending' | 'success' | 'error';
@@ -28,7 +27,7 @@ type DeploymentStatus = 'idle' | 'pending' | 'success' | 'error';
  * All creation / deployment operations run concurrently for improved performance.
  */
 export const useCreateAndDeployScriptTemplates = (space: Space | undefined, scriptTemplates: Template[]) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const [status, setStatus] = useState<DeploymentStatus>('idle');
   const [error, setError] = useState<Error | undefined>(undefined);
@@ -40,24 +39,20 @@ export const useCreateAndDeployScriptTemplates = (space: Space | undefined, scri
 
     const deploymentResults = await Promise.all(
       scriptTemplates.map(async (template) => {
-        const result = await dispatch(
-          Function.pipe(
-            createIntent(ScriptAction.CreateScript, {
-              space,
-              initialTemplateId: template.id as any,
-            }),
-            chain(SpaceAction.AddObject, { target: space }),
-          ),
-        );
-        invariant(Obj.instanceOf(Script.Script, result.data?.object));
-
-        return deployScript({ space, client, script: result.data.object });
+        const createResult = await invokePromise(ScriptOperation.CreateScript, {
+          db: space.db,
+          initialTemplateId: template.id as any,
+        });
+        invariant(Obj.instanceOf(Script.Script, createResult.data?.object));
+        await invokePromise(SpaceOperation.AddObject, { target: space.db, object: createResult.data.object });
+
+        return deployScript({ space, client, script: createResult.data.object });
       }),
     );
 
     const hasErrors = deploymentResults.some((result) => !result.success);
     setStatus(hasErrors ? 'error' : 'success');
-  }, [space, dispatch, client, scriptTemplates]);
+  }, [space, invokePromise, client, scriptTemplates]);
 
   // TODO(burdon): Return onCreateAndDeployScripts.
   return { handleCreateAndDeployScripts, status, error };

package/src/hooks/useToolbarState.ts

@@ -2,15 +2,40 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Atom } from '@effect-atom/atom-react';
 import { useMemo } from 'react';
 
-import { live } from '@dxos/live-object';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
 
 import { type DeployState } from './deploy';
 
 export type ScriptToolbarState = Partial<DeployState>;
 
-// TODO(burdon): Replace with context provider?
-export const useToolbarState = (initialState: ScriptToolbarState = {}) => {
-  return useMemo(() => live<ScriptToolbarState>(initialState), []);
+export type ScriptToolbarStateStore = {
+  atom: Atom.Writable<ScriptToolbarState>;
+  get value(): ScriptToolbarState;
+  update: (updater: (current: ScriptToolbarState) => ScriptToolbarState) => void;
+  set: <K extends keyof ScriptToolbarState>(key: K, value: ScriptToolbarState[K]) => void;
+};
+
+export const useToolbarState = (initialState: ScriptToolbarState = {}): ScriptToolbarStateStore => {
+  const registry = useCapability(Capabilities.AtomRegistry);
+  const atom = useMemo(() => Atom.make<ScriptToolbarState>(initialState), []);
+
+  return useMemo(
+    () => ({
+      atom,
+      get value() {
+        return registry.get(atom);
+      },
+      update: (updater: (current: ScriptToolbarState) => ScriptToolbarState) => {
+        registry.set(atom, updater(registry.get(atom)));
+      },
+      set: <K extends keyof ScriptToolbarState>(key: K, v: ScriptToolbarState[K]) => {
+        registry.set(atom, { ...registry.get(atom), [key]: v });
+      },
+    }),
+    [atom, registry],
+  );
 };

package/src/index.ts

@@ -2,9 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { ScriptCapabilities } from './capabilities';
-export * from './components';
+export * from './blueprints';
 export * from './meta';
+export * from './types';
 export * from './util';
-
-export * from './ScriptPlugin';

package/src/meta.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
-  id: 'dxos.org/plugin/script',
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.script',
   name: 'Scripts',
   description: trim`
     Write and deploy custom JavaScript functions that extend your workspace capabilities.
@@ -22,5 +22,5 @@ export const meta: PluginMeta = {
 // TODO(ZaymonFC): Configure by scopes?
 export const defaultScriptsForIntegration: Record<string, string[]> = {
   // TODO(wittjosiah): Also include content extraction scripts in the default set.
-  'gmail.com': ['dxos.org/script/gmail'],
+  'gmail.com': ['org.dxos.script.gmail'],
 };

package/src/notebook/compute-graph.test.ts

@@ -2,16 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Registry } from '@effect-atom/atom-react';
 import { describe, expect, test } from 'vitest';
 
-import { createNotebook } from '../testing';
+import { Obj } from '@dxos/echo';
+
+import { createNotebook } from '#testing';
 
 import { ComputeGraph } from './compute-graph';
 
 describe('notebook', () => {
   test('parse dependency graph', async () => {
+    const registry = Registry.make();
     const notebook = createNotebook();
-    const graph = new ComputeGraph(notebook);
+    const graph = new ComputeGraph(notebook, registry);
     const result = graph.parse();
 
     const getId = (i: number) => notebook.cells[i].id;
@@ -34,13 +38,17 @@ describe('notebook', () => {
   });
 
   test('evalScript blocks access to window and document', async () => {
+    const registry = Registry.make();
     const notebook = createNotebook();
     // Replace one of the cells with code that tries to access window/document.
-    if (notebook.cells[2].source?.target) {
-      notebook.cells[2].source.target.content = 'b = typeof window';
+    const sourceTarget = notebook.cells[2].source?.target;
+    if (sourceTarget) {
+      Obj.update(sourceTarget, (sourceTarget) => {
+        sourceTarget.content = 'b = typeof window';
+      });
     }
 
-    const graph = new ComputeGraph(notebook);
+    const graph = new ComputeGraph(notebook, registry);
     graph.parse();
     const values = await graph.evaluate();
 
@@ -48,8 +56,10 @@ describe('notebook', () => {
     expect(values[notebook.cells[2].id]).toBe('undefined');
 
     // Test document access.
-    if (notebook.cells[2].source?.target) {
-      notebook.cells[2].source.target.content = 'b = typeof document';
+    if (sourceTarget) {
+      Obj.update(sourceTarget, (sourceTarget) => {
+        sourceTarget.content = 'b = typeof document';
+      });
     }
     graph.parse();
     const values2 = await graph.evaluate();
@@ -58,8 +68,10 @@ describe('notebook', () => {
     expect(values2[notebook.cells[2].id]).toBe('undefined');
 
     // Test that safe globals still work.
-    if (notebook.cells[2].source?.target) {
-      notebook.cells[2].source.target.content = 'b = Math.max(100, 200)';
+    if (sourceTarget) {
+      Obj.update(sourceTarget, (sourceTarget) => {
+        sourceTarget.content = 'b = Math.max(100, 200)';
+      });
     }
     graph.parse();
     const values3 = await graph.evaluate();