@dxos/app-graph 0.7.5-main.9d2a38b → 0.7.5-main.e9bb01b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-graph",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.e9bb01b",
   "description": "Constructs knowledge graphs for the purpose of building applications on top of",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,14 +25,14 @@
   "dependencies": {
     "@preact/signals-core": "^1.6.0",
     "main-thread-scheduling": "^14.1.1",
-    "@dxos/debug": "0.7.5-main.9d2a38b",
-    "@dxos/echo-schema": "0.7.5-main.9d2a38b",
-    "@dxos/async": "0.7.5-main.9d2a38b",
-    "@dxos/echo-signals": "0.7.5-main.9d2a38b",
-    "@dxos/live-object": "0.7.5-main.9d2a38b",
-    "@dxos/invariant": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b"
+    "@dxos/async": "0.7.5-main.e9bb01b",
+    "@dxos/debug": "0.7.5-main.e9bb01b",
+    "@dxos/echo-schema": "0.7.5-main.e9bb01b",
+    "@dxos/echo-signals": "0.7.5-main.e9bb01b",
+    "@dxos/invariant": "0.7.5-main.e9bb01b",
+    "@dxos/log": "0.7.5-main.e9bb01b",
+    "@dxos/util": "0.7.5-main.e9bb01b",
+    "@dxos/live-object": "0.7.5-main.e9bb01b"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -41,18 +41,18 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/react-client": "0.7.5-main.9d2a38b",
-    "@dxos/storybook-utils": "0.7.5-main.9d2a38b"
+    "@dxos/random": "0.7.5-main.e9bb01b",
+    "@dxos/react-client": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b",
+    "@dxos/storybook-utils": "0.7.5-main.e9bb01b"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/react-ui": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b"
   },
   "publishConfig": {
     "access": "public"

package/src/graph-builder.test.ts

@@ -5,6 +5,8 @@
 import { batch, signal } from '@preact/signals-core';
 import { describe, expect, test } from 'vitest';
 
+import { updateCounter } from '@dxos/echo-schema/testing';
+
 import { ACTION_TYPE, ROOT_ID, ROOT_TYPE } from './graph';
 import { GraphBuilder, createExtension, memoize } from './graph-builder';
 import { type Node } from './node';
@@ -175,6 +177,40 @@ describe('GraphBuilder', () => {
       expect(node.properties.label).to.equal('updated');
     });
 
+    test('updates with new extensions', async () => {
+      const name = signal('default');
+      const builder = new GraphBuilder();
+      builder.addExtension(
+        createExtension({
+          id: 'connector',
+          connector: () => [{ id: EXAMPLE_ID, type: EXAMPLE_TYPE, data: name, properties: { label: name.value } }],
+        }),
+      );
+      const graph = builder.graph;
+      await graph.expand(graph.root);
+
+      let nodes: Node[] = [];
+      using updates = updateCounter(() => {
+        nodes = graph.nodes(graph.root);
+      });
+
+      expect(updates.count).to.equal(0);
+      expect(nodes).has.length(1);
+      expect(nodes[0].id).to.equal(EXAMPLE_ID);
+
+      builder.addExtension(
+        createExtension({
+          id: 'connector-2',
+          connector: () => [{ id: exampleId(2), type: EXAMPLE_TYPE, data: 0 }],
+        }),
+      );
+
+      expect(updates.count).to.equal(1);
+      expect(nodes).has.length(2);
+      expect(nodes[0].id).to.equal(EXAMPLE_ID);
+      expect(nodes[1].id).to.equal(exampleId(2));
+    });
+
     test('removes', async () => {
       const nodes = signal([
         { id: exampleId(1), type: EXAMPLE_TYPE, data: 1 },

package/src/graph-builder.ts

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { effect, type Signal, signal } from '@preact/signals-core';
+import { effect, type Signal, signal, untracked } from '@preact/signals-core';
 
 import { Trigger, type UnsubscribeCallback } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 import { create } from '@dxos/live-object';
 import { log } from '@dxos/log';
-import { byDisposition, type Disposition, isNode, type MaybePromise, nonNullable } from '@dxos/util';
+import { byPosition, type Position, isNode, type MaybePromise, nonNullable } from '@dxos/util';
 
 import { ACTION_GROUP_TYPE, ACTION_TYPE, Graph, ROOT_ID, type GraphParams } from './graph';
 import { type ActionData, actionGroupSymbol, type Node, type NodeArg, type Relation } from './node';
@@ -63,7 +63,7 @@ export type CreateExtensionOptions<T = any> = {
   id: string;
   relation?: Relation;
   type?: string;
-  disposition?: Disposition;
+  position?: Position;
   filter?: (node: Node) => node is Node<T>;
   resolver?: ResolverExtension;
   connector?: ConnectorExtension<GuardedNodeType<CreateExtensionOptions<T>['filter']>>;
@@ -75,16 +75,16 @@ export type CreateExtensionOptions<T = any> = {
  * Create a graph builder extension.
  */
 export const createExtension = <T = any>(extension: CreateExtensionOptions<T>): BuilderExtension[] => {
-  const { id, disposition = 'static', resolver, connector, actions, actionGroups, ...rest } = extension;
+  const { id, position = 'static', resolver, connector, actions, actionGroups, ...rest } = extension;
   const getId = (key: string) => `${id}/${key}`;
   return [
-    resolver ? { id: getId('resolver'), disposition, resolver } : undefined,
-    connector ? { ...rest, id: getId('connector'), disposition, connector } : undefined,
+    resolver ? { id: getId('resolver'), position, resolver } : undefined,
+    connector ? { ...rest, id: getId('connector'), position, connector } : undefined,
     actionGroups
       ? ({
           ...rest,
           id: getId('actionGroups'),
-          disposition,
+          position,
           type: ACTION_GROUP_TYPE,
           relation: 'outbound',
           connector: ({ node }) =>
@@ -95,7 +95,7 @@ export const createExtension = <T = any>(extension: CreateExtensionOptions<T>):
       ? ({
           ...rest,
           id: getId('actions'),
-          disposition,
+          position,
           type: ACTION_TYPE,
           relation: 'outbound',
           connector: ({ node }) => actions({ node })?.map((arg) => ({ ...arg, type: ACTION_TYPE })),
@@ -174,7 +174,7 @@ export const toSignal = <T>(
 
 export type BuilderExtension = Readonly<{
   id: string;
-  disposition: Disposition;
+  position: Position;
   resolver?: ResolverExtension;
   connector?: ConnectorExtension;
   // Only for connector.
@@ -185,6 +185,14 @@ export type BuilderExtension = Readonly<{
 
 type ExtensionArg = BuilderExtension | BuilderExtension[] | ExtensionArg[];
 
+export const flattenExtensions = (extension: ExtensionArg, acc: BuilderExtension[] = []): BuilderExtension[] => {
+  if (Array.isArray(extension)) {
+    return [...acc, ...extension.flatMap((ext) => flattenExtensions(ext, acc))];
+  } else {
+    return [...acc, extension];
+  }
+};
+
 /**
  * The builder provides an extensible way to compose the construction of the graph.
  */
@@ -244,17 +252,24 @@ export class GraphBuilder {
     return this._graph;
   }
 
+  /**
+   * @reactive
+   */
+  get extensions() {
+    return Object.values(this._extensions);
+  }
+
   /**
    * Register a node builder which will be called in order to construct the graph.
    */
   addExtension(extension: ExtensionArg): GraphBuilder {
-    if (Array.isArray(extension)) {
-      extension.forEach((ext) => this.addExtension(ext));
-      return this;
-    }
-
-    this._dispatcher.state[extension.id] = [];
-    this._extensions[extension.id] = extension;
+    const extensions = flattenExtensions(extension);
+    untracked(() => {
+      extensions.forEach((extension) => {
+        this._dispatcher.state[extension.id] = [];
+        this._extensions[extension.id] = extension;
+      });
+    });
     return this;
   }
 
@@ -262,7 +277,9 @@ export class GraphBuilder {
    * Remove a node builder from the graph builder.
    */
   removeExtension(id: string): GraphBuilder {
-    delete this._extensions[id];
+    untracked(() => {
+      delete this._extensions[id];
+    });
     return this;
   }
 
@@ -326,7 +343,7 @@ export class GraphBuilder {
     this._resolverSubscriptions.set(
       nodeId,
       effect(() => {
-        const extensions = Object.values(this._extensions).toSorted(byDisposition);
+        const extensions = Object.values(this._extensions).toSorted(byPosition);
         for (const { id, resolver } of extensions) {
           if (!resolver) {
             continue;
@@ -384,7 +401,7 @@ export class GraphBuilder {
 
         // TODO(wittjosiah): Consider allowing extensions to collaborate on the same node by merging their results.
         const nodes: NodeArg<any>[] = [];
-        const extensions = Object.values(this._extensions).toSorted(byDisposition);
+        const extensions = Object.values(this._extensions).toSorted(byPosition);
         for (const { id, connector, filter, type, relation = 'outbound' } of extensions) {
           if (
             !connector ||