@dxos/plugin-debug 0.7.2 → 0.7.3-staging.0905f03

package/dist/types/src/components/index.d.ts

@@ -3,8 +3,9 @@ export declare const DebugApp: import("react").LazyExoticComponent<import("react
 }>>;
 export declare const DebugSpace: import("react").LazyExoticComponent<import("react").FC<{
     space: import("packages/sdk/client-protocol/dist/types/src").Space;
-    onAddObjects?: (objects: import("packages/core/echo/echo-schema/dist/types/src").ReactiveObject<any>[]) => void;
+    onAddObjects?: (objects: import("packages/core/echo/live-object/dist/types/src").ReactiveObject<any>[]) => void;
 }>>;
+export declare const SpaceGenerator: import("react").LazyExoticComponent<({ space, onCreateObjects }: import("./SpaceGenerator/SpaceGenerator").SpaceGeneratorProps) => import("react").JSX.Element>;
 export * from './DebugObjectPanel';
 export * from './DebugSettings';
 export * from './DebugStatus';

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;GAAmC,CAAC;AACzD,eAAO,MAAM,UAAU;;;GAAqC,CAAC;AAE7D,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;GAAmC,CAAC;AACzD,eAAO,MAAM,UAAU;;;GAAqC,CAAC;AAC7D,eAAO,MAAM,cAAc,iKAAyC,CAAC;AAErE,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-debug",
-  "version": "0.7.2",
+  "version": "0.7.3-staging.0905f03",
   "description": "DXOS Surface plugin for testing.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,43 +30,50 @@
     "src"
   ],
   "dependencies": {
+    "@antv/graphlib": "^2.0.4",
+    "@antv/layout": "^1.2.13",
     "@preact/signals-core": "^1.6.0",
     "@tldraw/tldraw": "^3.0.0",
     "date-fns": "^3.3.1",
+    "effect": "^3.9.2",
     "lodash.get": "^4.4.2",
     "react-json-tree": "^0.18.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.7.2",
-    "@dxos/async": "0.7.2",
-    "@dxos/automerge": "0.7.2",
-    "@dxos/client-services": "0.7.2",
-    "@dxos/config": "0.7.2",
-    "@dxos/echo-generator": "0.7.2",
-    "@dxos/echo-pipeline": "0.7.2",
-    "@dxos/invariant": "0.7.2",
-    "@dxos/devtools": "0.7.2",
-    "@dxos/keys": "0.7.2",
-    "@dxos/echo-schema": "0.7.2",
-    "@dxos/local-storage": "0.7.2",
-    "@dxos/log": "0.7.2",
-    "@dxos/plugin-client": "0.7.2",
-    "@dxos/plugin-deck": "0.7.2",
-    "@dxos/plugin-graph": "0.7.2",
-    "@dxos/plugin-sketch": "0.7.2",
-    "@dxos/plugin-markdown": "0.7.2",
-    "@dxos/plugin-space": "0.7.2",
-    "@dxos/plugin-status-bar": "0.7.2",
-    "@dxos/protocols": "0.7.2",
-    "@dxos/plugin-theme": "0.7.2",
-    "@dxos/react-client": "0.7.2",
-    "@dxos/plugin-table": "0.7.2",
-    "@dxos/react-hooks": "0.7.2",
-    "@dxos/random": "0.7.2",
-    "@dxos/react-ui-attention": "0.7.2",
-    "@dxos/react-ui-form": "0.7.2",
-    "@dxos/react-ui-syntax-highlighter": "0.7.2",
-    "@dxos/react-ui-table": "0.7.2",
-    "@dxos/util": "0.7.2"
+    "workerize-loader": "^2.0.2",
+    "@dxos/app-framework": "0.7.3-staging.0905f03",
+    "@dxos/automerge": "0.7.3-staging.0905f03",
+    "@dxos/client-services": "0.7.3-staging.0905f03",
+    "@dxos/async": "0.7.3-staging.0905f03",
+    "@dxos/echo-generator": "0.7.3-staging.0905f03",
+    "@dxos/devtools": "0.7.3-staging.0905f03",
+    "@dxos/config": "0.7.3-staging.0905f03",
+    "@dxos/echo-pipeline": "0.7.3-staging.0905f03",
+    "@dxos/echo-schema": "0.7.3-staging.0905f03",
+    "@dxos/keys": "0.7.3-staging.0905f03",
+    "@dxos/live-object": "0.7.3-staging.0905f03",
+    "@dxos/local-storage": "0.7.3-staging.0905f03",
+    "@dxos/log": "0.7.3-staging.0905f03",
+    "@dxos/invariant": "0.7.3-staging.0905f03",
+    "@dxos/plugin-client": "0.7.3-staging.0905f03",
+    "@dxos/plugin-deck": "0.7.3-staging.0905f03",
+    "@dxos/plugin-markdown": "0.7.3-staging.0905f03",
+    "@dxos/plugin-graph": "0.7.3-staging.0905f03",
+    "@dxos/plugin-sheet": "0.7.3-staging.0905f03",
+    "@dxos/plugin-space": "0.7.3-staging.0905f03",
+    "@dxos/plugin-sketch": "0.7.3-staging.0905f03",
+    "@dxos/plugin-status-bar": "0.7.3-staging.0905f03",
+    "@dxos/plugin-table": "0.7.3-staging.0905f03",
+    "@dxos/random": "0.7.3-staging.0905f03",
+    "@dxos/plugin-theme": "0.7.3-staging.0905f03",
+    "@dxos/react-client": "0.7.3-staging.0905f03",
+    "@dxos/protocols": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-attention": "0.7.3-staging.0905f03",
+    "@dxos/react-hooks": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-form": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-syntax-highlighter": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-table": "0.7.3-staging.0905f03",
+    "@dxos/schema": "0.7.3-staging.0905f03",
+    "@dxos/util": "0.7.3-staging.0905f03"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -76,17 +83,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/storybook-utils": "0.7.2",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2"
+    "@dxos/react-ui-theme": "0.7.3-staging.0905f03",
+    "@dxos/react-ui": "0.7.3-staging.0905f03",
+    "@dxos/storybook-utils": "0.7.3-staging.0905f03"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.7.2",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2"
+    "@dxos/random": "0.7.3-staging.0905f03",
+    "@dxos/react-ui": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-theme": "0.7.3-staging.0905f03"
   },
   "publishConfig": {
     "access": "public"

package/src/DebugPlugin.tsx

@@ -17,10 +17,19 @@ import { Devtools } from '@dxos/devtools';
 import { invariant } from '@dxos/invariant';
 import { type ClientPluginProvides, parseClientPlugin } from '@dxos/plugin-client';
 import { createExtension, Graph, type Node, toSignal } from '@dxos/plugin-graph';
-import { SpaceAction } from '@dxos/plugin-space';
+import { memoizeQuery, SpaceAction } from '@dxos/plugin-space';
 import { CollectionType } from '@dxos/plugin-space/types';
 import { type Client } from '@dxos/react-client';
-import { create, getTypename, isEchoObject, isSpace, parseId, type Space, SpaceState } from '@dxos/react-client/echo';
+import {
+  create,
+  getTypename,
+  isEchoObject,
+  isSpace,
+  parseId,
+  type ReactiveObject,
+  type Space,
+  SpaceState,
+} from '@dxos/react-client/echo';
 import { Main } from '@dxos/react-ui';
 import {
   baseSurface,
@@ -29,7 +38,15 @@ import {
   topbarBlockPaddingStart,
 } from '@dxos/react-ui-theme';
 
-import { DebugApp, DebugObjectPanel, DebugSettings, DebugSpace, DebugStatus, Wireframe } from './components';
+import {
+  DebugApp,
+  DebugObjectPanel,
+  DebugSettings,
+  DebugSpace,
+  DebugStatus,
+  SpaceGenerator,
+  Wireframe,
+} from './components';
 import meta, { DEBUG_PLUGIN } from './meta';
 import translations from './translations';
 import {
@@ -153,11 +170,27 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
               filter: (node): node is Node<Space> => !!settings.debug && isSpace(node.data),
               connector: ({ node }) => {
                 const space = node.data;
+                const state = toSignal(
+                  (onChange) => space.state.subscribe(() => onChange()).unsubscribe,
+                  () => space.state.get(),
+                );
+                if (state !== SpaceState.SPACE_READY) {
+                  return;
+                }
+
+                // Not adding the debug node until the root collection is available aligns the behaviour of this
+                // extension with that of the space plugin adding objects. This ensures that the debug node is added at
+                // the same time as objects and prevents order from changing as the nodes are added.
+                const collection = space.properties[CollectionType.typename] as CollectionType | undefined;
+                if (!collection) {
+                  return;
+                }
+
                 return [
                   {
                     id: `${space.id}-debug`, // TODO(burdon): Change to slashes consistently.
                     type: 'dxos.org/plugin/debug/space',
-                    data: { space },
+                    data: { space, type: 'dxos.org/plugin/debug/space' },
                     properties: {
                       label: ['debug label', { ns: DEBUG_PLUGIN }],
                       icon: 'ph--bug--regular',
@@ -181,7 +214,13 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
 
                 const [subjectId] = id.split('~');
                 const { spaceId, objectId } = parseId(subjectId);
-                const space = client.spaces.get().find((space) => space.id === spaceId);
+                const spaces = toSignal(
+                  (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+                  () => client.spaces.get(),
+                );
+                const space = spaces?.find(
+                  (space) => space.state.get() === SpaceState.SPACE_READY && space.id === spaceId,
+                );
                 if (!objectId) {
                   // TODO(burdon): Ref SPACE_PLUGIN ns.
                   const label = space
@@ -204,18 +243,7 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
                   };
                 }
 
-                const object = toSignal(
-                  (onChange) => {
-                    const timeout = setTimeout(async () => {
-                      await space?.db.query({ id: objectId }).first();
-                      onChange();
-                    });
-
-                    return () => clearTimeout(timeout);
-                  },
-                  () => space?.db.getObjectById(objectId),
-                  subjectId,
-                );
+                const [object] = memoizeQuery(space, { id: objectId });
                 if (!object || !subjectId) {
                   return;
                 }
@@ -283,30 +311,37 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
               component = <Devtools />;
             } else if (!primary || typeof primary !== 'object' || !settings.debug) {
               component = null;
-            } else if ('space' in primary && isSpace(primary.space)) {
-              component = (
-                <DebugSpace
-                  space={primary.space}
-                  onAddObjects={(objects) => {
-                    if (!isSpace(primary.space)) {
-                      return;
-                    }
+            } else if (
+              'type' in primary &&
+              primary.type === 'dxos.org/plugin/debug/space' &&
+              'space' in primary &&
+              isSpace(primary.space)
+            ) {
+              const handleCreateObject = (objects: ReactiveObject<any>[]) => {
+                if (!isSpace(primary.space)) {
+                  return;
+                }
 
-                    const collection =
-                      primary.space.state.get() === SpaceState.SPACE_READY &&
-                      primary.space.properties[CollectionType.typename];
-                    if (!(collection instanceof CollectionType)) {
-                      return;
-                    }
+                const collection =
+                  primary.space.state.get() === SpaceState.SPACE_READY &&
+                  primary.space.properties[CollectionType.typename];
+                if (!(collection instanceof CollectionType)) {
+                  return;
+                }
+
+                void context.resolvePlugin(parseIntentPlugin).provides.intent.dispatch(
+                  objects.map((object) => ({
+                    action: SpaceAction.ADD_OBJECT,
+                    data: { target: collection, object },
+                  })),
+                );
+              };
 
-                    void context.resolvePlugin(parseIntentPlugin).provides.intent.dispatch(
-                      objects.map((object) => ({
-                        action: SpaceAction.ADD_OBJECT,
-                        data: { target: collection, object },
-                      })),
-                    );
-                  }}
-                />
+              const deprecated = false;
+              component = deprecated ? (
+                <DebugSpace space={primary.space} onAddObjects={handleCreateObject} />
+              ) : (
+                <SpaceGenerator space={primary.space} onCreateObjects={handleCreateObject} />
               );
             } else if ('graph' in primary && primary.graph instanceof Graph) {
               component = <DebugApp graph={primary.graph} />;

package/src/components/DebugObjectPanel.tsx

@@ -11,9 +11,10 @@ export type DebugObjectPanelProps = {
   object: ReactiveEchoObject<any>;
 };
 
+// TODO(burdon): Get schema and traverse references.
 export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
   return (
-    <div role='form' className='flex flex-col'>
+    <div className='flex flex-col'>
       <SyntaxHighlighter classNames='flex text-xs' language='json'>
         {JSON.stringify(object, null, 2)}
       </SyntaxHighlighter>

package/src/components/DebugSpace/DebugSpace.tsx

@@ -5,7 +5,7 @@
 import React, { type FC, useContext, useMemo, useState } from 'react';
 
 import { createSpaceObjectGenerator } from '@dxos/echo-generator';
-import { type ReactiveObject } from '@dxos/echo-schema';
+import { type ReactiveObject } from '@dxos/live-object';
 import { DocumentType } from '@dxos/plugin-markdown/types';
 import { Invitation } from '@dxos/protocols/proto/dxos/client/services';
 import { faker } from '@dxos/random';
@@ -149,7 +149,7 @@ export const DebugSpace: FC<{
           />
 
           <IconButton
-            icon={running ? 'ph--hand-palm--regular' : 'ph--play--regular'}
+            icon={running ? 'ph--pause-circle--regular' : 'ph--play-circle--regular'}
             iconOnly
             label='Start/stop'
             size={5}

package/src/components/DebugSpace/ObjectCreator.tsx

@@ -92,7 +92,7 @@ export const ObjectCreator = ({ space, onAddObjects }: ObjectCreatorProps) => {
           <Table.Main<CreateObjectsParams> columns={columns} data={objects} />
         </Table.Viewport>
       </Table.Root>
-      <Toolbar.Root classNames='p-2'>
+      <Toolbar.Root classNames='p-1'>
         <IconButton icon='ph--plus--regular' label='Create' onClick={handleCreate} />
       </Toolbar.Root>
     </>

package/src/components/{SurfaceDebug.tsx → DebugSurface.tsx}

@@ -16,7 +16,7 @@ export type SurfaceDebugProps = ThemedClassName<{}>;
  * Show surface info.
  * NOTE: Remove from @dxos/app-framework if removing this.
  */
-export const SurfaceDebug = ({ classNames }: SurfaceDebugProps) => {
+export const DebugSurface = ({ classNames }: SurfaceDebugProps) => {
   const context = useSurfaceRoot();
   const [surfaces, setSurfaces] = useState<DebugInfo[]>([]);
   const renderMap = useMemo(() => new Map<string, { last: number; delta: number }>(), []);

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -0,0 +1,141 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type AbstractSchema, type BaseObject } from '@dxos/echo-schema';
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { DocumentType, TextType } from '@dxos/plugin-markdown/types';
+import { addressToA1Notation, createSheet } from '@dxos/plugin-sheet';
+import { type CellValue } from '@dxos/plugin-sheet/types';
+import { SheetType } from '@dxos/plugin-sheet/types';
+import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
+import { faker } from '@dxos/random';
+import { Filter, type Space } from '@dxos/react-client/echo';
+import { TableType } from '@dxos/react-ui-table';
+import { createView } from '@dxos/schema';
+import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { range } from '@dxos/util';
+
+const generator: ValueGenerator = faker as any;
+
+// TODO(burdon): Add objects to collections.
+// TODO(burdon): Create docs.
+// TODO(burdon): Create sketches.
+// TODO(burdon): Create sheets.
+// TODO(burdon): Create comments.
+// TODO(burdon): Reuse in testbench-app.
+// TODO(burdon): Mutator running in background (factor out): from echo-generator.
+
+export type ObjectGenerator<T extends BaseObject> = (
+  space: Space,
+  n: number,
+  cb?: (objects: ReactiveObject<any>[]) => void,
+) => Promise<ReactiveObject<T>[]>;
+
+export const staticGenerators = new Map<string, ObjectGenerator<any>>([
+  [
+    DocumentType.typename,
+    async (space, n, cb) => {
+      const objects = range(n).map(() => {
+        const obj = space.db.add(
+          create(DocumentType, {
+            name: faker.commerce.productName(),
+            content: create(TextType, { content: faker.lorem.sentences(5) }),
+            threads: [],
+          }),
+        );
+
+        return obj;
+      });
+
+      cb?.(objects);
+      return objects;
+    },
+  ],
+  [
+    DiagramType.typename,
+    async (space, n, cb) => {
+      const objects = range(n).map(() => {
+        // TODO(burdon): Generate diagram.
+        const obj = space.db.add(
+          create(DiagramType, {
+            name: faker.commerce.productName(),
+            canvas: create(CanvasType, { content: {} }),
+          }),
+        );
+
+        return obj;
+      });
+
+      cb?.(objects);
+      return objects;
+    },
+  ],
+  // TODO(burdon): Create unit tests.
+  [
+    SheetType.typename,
+    async (space, n, cb) => {
+      const objects = range(n).map(() => {
+        const cells: Record<string, CellValue> = {};
+        const year = new Date().getFullYear();
+        const cols = 4;
+        const rows = 16;
+        for (let col = 1; col <= cols; col++) {
+          for (let row = 1; row <= rows; row++) {
+            const cell = addressToA1Notation({ col, row });
+            if (row === 1) {
+              cells[cell] = { value: `${year} Q${col}` };
+            } else if (row === rows) {
+              const from = addressToA1Notation({ col, row: 2 });
+              const to = addressToA1Notation({ col, row: rows - 1 });
+              cells[cell] = { value: `=SUM(${from}:${to})` };
+            } else if (row > 2 && row < rows - 1) {
+              cells[cell] = { value: Math.floor(Math.random() * 10_000) };
+            }
+          }
+        }
+
+        // TODO(burdon): Set width.
+        // TODO(burdon): Set formatting for columns.
+        return space.db.add(
+          createSheet({
+            name: faker.commerce.productName(),
+            cells,
+          }),
+        );
+      });
+
+      cb?.(objects);
+      return objects;
+    },
+  ],
+]);
+
+export const createGenerator = <T extends BaseObject>(type: AbstractSchema<T>): ObjectGenerator<T> => {
+  return async (
+    space: Space,
+    n: number,
+    cb?: (objects: ReactiveObject<any>[]) => void,
+  ): Promise<ReactiveObject<T>[]> => {
+    // Find or create mutable schema.
+    const mutableSchema = await space.db.schemaRegistry.query();
+    const schema =
+      mutableSchema.find((schema) => schema.typename === type.typename) ?? space.db.schemaRegistry.addSchema(type);
+
+    // Create objects.
+    const generate = createAsyncGenerator(generator, schema.schema, { db: space.db });
+    const objects = await generate.createObjects(n);
+
+    // Find or create table and view.
+    const { objects: tables } = await space.db.query(Filter.schema(TableType)).run();
+    const table = tables.find((table) => table.view?.query?.type === type.typename);
+    if (!table) {
+      const name = type.typename.split('/').pop() ?? type.typename;
+      const view = createView({ name, typename: type.typename, jsonSchema: schema.jsonSchema });
+      const table = space.db.add(create(TableType, { name, view }));
+      cb?.([table]);
+    }
+
+    return objects;
+  };
+};

package/src/components/SpaceGenerator/SchemaTable.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { IconButton } from '@dxos/react-ui';
+
+export type SchemaTableProps = {
+  types: any[];
+  objects?: Record<string, number | undefined>;
+  label: string;
+  onClick: (typename: string) => void;
+};
+
+export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTableProps) => {
+  return (
+    <div className='grid grid-cols-[1fr_80px_40px] gap-1 overflow-hidden'>
+      <div className='grid grid-cols-subgrid col-span-3'>
+        <div className='px-2 text-sm text-primary-500'>{label}</div>
+        <div className='px-2 text-xs text-subdued text-right'>count</div>
+      </div>
+      {types.map((type) => (
+        <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>
+          <div className='px-2 text-sm font-mono text-green-500'>{type.typename}</div>
+          <div className='px-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
+          <IconButton
+            variant='ghost'
+            icon='ph--plus--regular'
+            iconOnly
+            label='Create data'
+            onClick={() => onClick(type.typename)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { SpaceGenerator } from './SpaceGenerator';
+
+const DefaultStory = () => {
+  const [space] = useSpaces();
+  if (!space) {
+    return null;
+  }
+
+  return <SpaceGenerator space={space} />;
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-debug/SpaceGenerator',
+  component: SpaceGenerator,
+  render: render(DefaultStory),
+  decorators: [withClientProvider({ createSpace: true }), withLayout({ tooltips: true }), withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+export const Default = {};