@dxos/plugin-debug 0.6.8-main.046e6cf

package/src/components/Wireframe.tsx

@@ -0,0 +1,35 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { mx } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Make focusable and attendable with input.
+export const Wireframe = ({ label, data, className }: { label?: string; data?: any; className?: string }) => {
+  const attendableAttrs = createAttendableAttributes(data);
+  const { width, height, ref } = useResizeDetector();
+  return (
+    <div ref={ref} className={mx('relative grow', className)} {...attendableAttrs}>
+      <div className='absolute inset-2 flex flex-col overflow-hidden font-mono'>
+        <div className='flex justify-between'>
+          <div>{label}</div>
+          <div>{`[${width}x${height}]`}</div>
+        </div>
+        <div className='flex grow overflow-auto'>
+          {data && (
+            <pre className='text-neutral-500 text-sm whitespace-pre-line'>{JSON.stringify(data, undefined, 1)}</pre>
+          )}
+        </div>
+      </div>
+      <svg width={width} height={height} className='bg-transparent [&>*]:stroke-neutral-500'>
+        <rect x={0} y={0} width={width} height={height} strokeWidth={1} fill='none' />
+        <line x1={0} y1={0} x2={width} y2={height} strokeWidth={1} />
+        <line x1={0} y1={height} x2={width} y2={0} strokeWidth={1} />
+      </svg>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+// Lazily load components for content surfaces.
+export const DebugGlobal = React.lazy(() => import('./DebugGlobal'));
+export const DebugSpace = React.lazy(() => import('./DebugSpace'));
+export const DevtoolsMain = React.lazy(() => import('./DevtoolsMain'));
+
+export * from './DebugSettings';
+export * from './DebugStatus';
+export * from './Wireframe';

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DebugPlugin } from './DebugPlugin';
+
+export * from './DebugPlugin';
+
+export default DebugPlugin;

package/src/meta.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Bug, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const DEBUG_PLUGIN = 'dxos.org/plugin/debug';
+
+export default pluginMeta({
+  id: DEBUG_PLUGIN,
+  name: 'Debug',
+  description: 'DXOS debugging tools.',
+  tags: ['experimental'],
+  iconComponent: (props: IconProps) => <Bug {...props} />,
+  iconSymbol: 'ph--bug--regular',
+});

package/src/scaffolding/generator.ts

@@ -0,0 +1,143 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  createShapeId,
+  defaultBindingUtils,
+  defaultShapeUtils,
+  defaultTools,
+  Editor,
+  type TLParentId,
+} from '@tldraw/tldraw';
+
+import { sleep } from '@dxos/async';
+import { next as A } from '@dxos/automerge/automerge';
+import {
+  SpaceObjectGenerator,
+  type TestGeneratorMap,
+  type TestMutationsMap,
+  type TestSchemaMap,
+} from '@dxos/echo-generator';
+import { create } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { DocumentType, TextType } from '@dxos/plugin-markdown/types';
+import { TLDrawStoreAdapter } from '@dxos/plugin-sketch';
+import { CanvasType, DiagramType, TLDRAW_SCHEMA } from '@dxos/plugin-sketch/types';
+import { faker } from '@dxos/random';
+import { createDocAccessor, type Space } from '@dxos/react-client/echo';
+
+export enum SchemasNames {
+  document = 'dxos.org/type/Document',
+  diagram = 'dxos.org/type/Diagram',
+}
+
+export const SchemasMap: TestSchemaMap<SchemasNames> = {
+  [SchemasNames.document]: DocumentType,
+  [SchemasNames.diagram]: DiagramType,
+};
+
+export const ObjectGenerators: TestGeneratorMap<SchemasNames> = {
+  [SchemasNames.document]: () => {
+    const name = faker.lorem.sentence();
+    return { name, content: create(TextType, { content: '' }), threads: [] };
+  },
+
+  [SchemasNames.diagram]: () => {
+    const name = faker.lorem.sentence();
+    return {
+      name,
+      canvas: create(CanvasType, { schema: TLDRAW_SCHEMA, content: {} }),
+    };
+  },
+};
+
+export const MutationsGenerators: TestMutationsMap<SchemasNames> = {
+  [SchemasNames.document]: async (object, params) => {
+    const accessor = createDocAccessor<DocumentType>(object.content, ['content']);
+
+    for (let i = 0; i < params.count; i++) {
+      const length = object.content?.content?.length ?? 0;
+      accessor.handle.change((doc) => {
+        A.splice(
+          doc,
+          accessor.path.slice(),
+          0,
+          params.maxContentLength >= length ? 0 : params.mutationSize,
+          faker.string.hexadecimal({ length: params.mutationSize - 1 }) + ' ',
+        );
+      });
+
+      // Release the event loop.
+      if (i % 100 === 0 || i === params.count - 1) {
+        log.info('Mutation:', { mutationIdx: i });
+        await sleep(1);
+      }
+    }
+  },
+
+  [SchemasNames.diagram]: async (object, params) => {
+    const store = new TLDrawStoreAdapter();
+    await store.open(createDocAccessor<CanvasType>(object.canvas, ['content']));
+    const app = new Editor({
+      store: store.store!,
+      shapeUtils: defaultShapeUtils,
+      bindingUtils: defaultBindingUtils,
+      tools: defaultTools,
+      getContainer: () => document.getElementsByTagName('body')[0],
+    });
+
+    //
+    // Draw spiral.
+    //
+    const r = 100;
+    const a = 0.05;
+    const cx = 200;
+    const cy = 200;
+
+    for (let i = 0; i < params.count; i++) {
+      const t = i;
+      const t1 = i + 1;
+      const x = cx + a * t * r * Math.cos(t);
+      const y = cy + a * t * r * Math.sin(t);
+      const x1 = cx + a * t1 * r * Math.cos(t1);
+      const y1 = cy + a * t1 * r * Math.sin(t1);
+
+      app.createShape({
+        id: createShapeId(),
+        isLocked: false,
+        meta: {},
+        opacity: 1,
+        parentId: 'page:page' as TLParentId,
+        props: {
+          arrowheadEnd: 'none',
+          arrowheadStart: 'none',
+          bend: 0,
+          color: 'black',
+          dash: 'draw',
+          start: { x, y },
+          end: { x: x1, y: y1 },
+          fill: 'none',
+          font: 'draw',
+          labelColor: 'black',
+          labelPosition: 0.5,
+          scale: 1,
+          size: 'm',
+        },
+        rotation: 0,
+        type: 'arrow',
+        typeName: 'shape',
+        x: 0,
+        y: 0,
+      });
+
+      // Release the event loop.
+      if (i % 100 === 0) {
+        await sleep(1);
+      }
+    }
+  },
+};
+
+export const createSpaceObjectGenerator = (space: Space) =>
+  new SpaceObjectGenerator(space, SchemasMap, ObjectGenerators, MutationsGenerators);

package/src/scaffolding/index.ts

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

package/src/translations.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DEBUG_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [DEBUG_PLUGIN]: {
+        'plugin name': 'Debug',
+        'mutation count': 'Number of mutations',
+        'mutation period': 'Mutation period',
+        'open devtools label': 'Open DevTools',
+        'devtools label': 'DevTools',
+        'debug label': 'Debug',
+        'settings show debug panel': 'Show Debug panel.',
+        'settings show devtools panel': 'Show DevTools panel.',
+        'settings wireframe': 'Show wireframes.',
+        'settings repair': 'Run repair tool.',
+        'settings download diagnostics': 'Download diagnostics.',
+        'settings uploaded': 'Uploaded to IPFS',
+        'settings uploaded to clipboard': 'URL copied to clipboard.',
+        'settings repair success': 'Repair succeeded',
+        'settings repair failed': 'Repair failed',
+        'settings choose storage adaptor': 'Storage adaptor (worker reload required).',
+        'settings storage adaptor idb label': 'IndexedDB',
+        'settings storage adaptor opfs label': 'OPFS',
+        'settings data store label': 'Data Store',
+        'settings storage adapter changed alert':
+          'Warning: Swapping the storage adapter will make your data unavailable.',
+        'settings space fragmentation': 'Enable AM space fragmentation',
+      },
+    },
+  },
+];

package/src/types.test.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+describe('sanity', () => {
+  test('basic', () => {
+    expect(true).to.be.true;
+  });
+});

package/src/types.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Context, createContext } from 'react';
+
+import type {
+  GraphBuilderProvides,
+  IntentResolverProvides,
+  SettingsProvides,
+  SurfaceProvides,
+  TranslationsProvides,
+} from '@dxos/app-framework';
+import type { TimerCallback, TimerOptions } from '@dxos/async';
+
+import { DEBUG_PLUGIN } from './meta';
+
+const DEBUG_ACTION = `${DEBUG_PLUGIN}/action`;
+export enum DebugAction {
+  OPEN_DEVTOOLS = `${DEBUG_ACTION}/open-devtools`,
+}
+
+export type DebugContextType = {
+  running: boolean;
+  start: (cb: TimerCallback, options: TimerOptions) => void;
+  stop: () => void;
+};
+
+export const DebugContext: Context<DebugContextType> = createContext<DebugContextType>({
+  running: false,
+  start: () => {},
+  stop: () => {},
+});
+
+export type DebugSettingsProps = {
+  devtools?: boolean;
+  debug?: boolean;
+  wireframe?: boolean;
+};
+
+export type DebugPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  SettingsProvides<DebugSettingsProps> &
+  TranslationsProvides;