feat(devtools): devtools to draw dependency graphs in page

package.json

@@ -21,6 +21,7 @@
     "build:extra:vue": "pnpm -F ccstate-vue build",
     "build:extra:solid": "pnpm -F ccstate-solid build",
     "build:extra:svelte": "pnpm -F ccstate-svelte build",
+    "build:extra:devtools": "pnpm -F ccstate-devtools build",
     "lint": "pnpm '/^lint:.*/'",
     "lint:type": "pnpm -F ccstate exec tsc --noEmit && pnpm -F ccstate-babel exec tsc --noEmit",
     "lint:eslint": "eslint .",

packages/babel/rollup.config.mjs

@@ -1,16 +1,12 @@
 // @ts-check
-import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { babel } from '@rollup/plugin-babel';
 import { dts } from 'rollup-plugin-dts';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { ModuleKind, ModuleResolutionKind } from 'typescript';
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 const projectRootDir = path.resolve(__dirname);
 
-/** @type {import('./package.json')} */
-const pkg = JSON.parse(fs.readFileSync('./package.json', { encoding: 'utf-8' }));
 const extensions = ['.ts', '.js'];
 
 function external(id) {

packages/ccstate/src/debug/__tests__/trace.test.ts

@@ -0,0 +1,293 @@
+import { expect, it } from 'vitest';
+import { computed, state } from '../../core';
+import { createDebugStore } from '../console-inspector';
+
+it('get derived graph', () => {
+  const count$ = state(0, { debugLabel: 'count$' });
+  const derived$ = computed((get) => get(count$) + 1, {
+    debugLabel: 'derived$',
+  });
+  const store = createDebugStore();
+  store.set(count$, (x) => x + 1);
+  store.set(count$, (x) => x + 1);
+  store.get(derived$);
+  expect(store.getDependenciesGraph(derived$)).toEqual([
+    [
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'derived$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 3,
+      },
+      {
+        epoch: 1,
+        signal: {
+          debugLabel: 'count$',
+          id: expect.any(Number) as number,
+          init: 0,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 2,
+      },
+      1,
+    ],
+  ]);
+
+  store.set(count$, (x) => x + 1);
+  store.get(derived$);
+  expect(store.getDependenciesGraph(derived$)).toEqual([
+    [
+      {
+        epoch: 1,
+        signal: {
+          debugLabel: 'derived$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 4,
+      },
+      {
+        epoch: 2,
+        signal: {
+          debugLabel: 'count$',
+          id: expect.any(Number) as number,
+          init: 0,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 3,
+      },
+      2,
+    ],
+  ]);
+});
+
+it('branch trace', () => {
+  const count$ = state(0, { debugLabel: 'count$' });
+  const base$ = computed((get) => get(count$), {
+    debugLabel: 'base$',
+  });
+  const mid$ = computed((get) => get(base$) + 1, {
+    debugLabel: 'mid$',
+  });
+  const branch$ = state(true, {
+    debugLabel: 'branch$',
+  });
+  const top$ = computed(
+    (get) => {
+      if (get(branch$)) {
+        return get(mid$);
+      }
+
+      return get(base$);
+    },
+    {
+      debugLabel: 'top$',
+    },
+  );
+
+  const store = createDebugStore();
+  store.get(top$);
+  expect(store.getDependenciesGraph(top$)).toEqual([
+    [
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'top$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 1,
+      },
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'branch$',
+          id: expect.any(Number) as number,
+          init: true,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: true,
+      },
+      0,
+    ],
+    [
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'top$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 1,
+      },
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'mid$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 1,
+      },
+      0,
+    ],
+    [
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'mid$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 1,
+      },
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'base$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      0,
+    ],
+    [
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'base$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'count$',
+          id: expect.any(Number) as number,
+          init: 0,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      0,
+    ],
+  ]);
+
+  store.set(branch$, false);
+  store.get(top$);
+  expect(store.getDependenciesGraph(top$)).toEqual([
+    [
+      {
+        epoch: 1,
+        signal: {
+          debugLabel: 'top$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      {
+        epoch: 1,
+        signal: {
+          debugLabel: 'branch$',
+          id: expect.any(Number) as number,
+          init: true,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: false,
+      },
+      1,
+    ],
+    [
+      {
+        epoch: 1,
+        signal: {
+          debugLabel: 'top$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'base$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      0,
+    ],
+    [
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'base$',
+          id: expect.any(Number) as number,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          read: expect.any(Function),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      {
+        epoch: 0,
+        signal: {
+          debugLabel: 'count$',
+          id: expect.any(Number) as number,
+          init: 0,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          toString: expect.any(Function),
+        },
+        val: 0,
+      },
+      0,
+    ],
+  ]);
+});

packages/ccstate/src/debug/debug-store.ts

@@ -1,7 +1,8 @@
-import type { StoreInterceptor, SubscribeOptions } from '../../types/core/store';
-import type { DebugStore, NestedAtom } from '../../types/debug/debug-store';
+import type { ComputedState, SignalState, StoreInterceptor, SubscribeOptions } from '../../types/core/store';
+import type { DebugStore, Edge, NestedAtom } from '../../types/debug/debug-store';
 import type { Computed, Command, Subscribe, State } from '../core';
 import { StoreImpl } from '../core/store/store';
+import { canReadAsCompute } from '../core/typing-util';
 
 export class DebugStoreImpl extends StoreImpl implements DebugStore {
   private readonly mountedAtomListenersCount = new Map<State<unknown> | Computed<unknown>, number>();
@@ -82,6 +83,37 @@ export class DebugStoreImpl extends StoreImpl implements DebugStore {
     const mountState = this.stateMap.get(atom);
     return mountState?.mounted !== undefined;
   };
+
+  getDependenciesGraph = (computed$: Computed<unknown>): Edge[] => {
+    const stateMap = this.context.stateMap;
+    function fillDependenciesGraph(computed$: Computed<unknown>, result: Edge[]) {
+      const computedState = stateMap.get(computed$) as ComputedState<unknown>;
+      for (const [child$, epoch] of computedState.dependencies.entries()) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-non-null-assertion
+        const childState = stateMap.get(child$)! as SignalState<unknown>;
+        result.push([
+          {
+            signal: computed$,
+            val: computedState.val,
+            epoch: computedState.epoch,
+          },
+          {
+            signal: child$,
+            val: childState.val,
+            epoch: childState.epoch,
+          },
+          epoch,
+        ]);
+        if (canReadAsCompute(child$)) {
+          fillDependenciesGraph(child$, result);
+        }
+      }
+    }
+
+    const result: Edge[] = [];
+    fillDependenciesGraph(computed$, result);
+    return result;
+  };
 }
 
 export function createDebugStoreInternal(interceptor?: StoreInterceptor): DebugStore {

packages/ccstate/src/debug/index.ts

@@ -1,2 +1,4 @@
 export { createDebugStore } from './console-inspector';
 export type { DebugStore } from '../../types/debug/debug-store';
+
+export type { DAGNode, Edge } from '../../types/debug/debug-store';

packages/ccstate/types/debug/debug-store.ts

@@ -1,10 +1,17 @@
-import type { Command, Computed, State } from '../core/signal';
+import type { Command, Computed, Signal, State } from '../core/signal';
 import type { Store } from '../core/store';
 
 export type NestedAtom = (State<unknown> | Computed<unknown> | Command<unknown, unknown[]> | NestedAtom)[];
+export interface DAGNode<T> {
+  signal: Signal<T>;
+  val: T;
+  epoch: number;
+}
+export type Edge = [DAGNode<unknown>, DAGNode<unknown>, number];
 
 export interface DebugStore extends Store {
   getReadDependencies: (atom: Computed<unknown>) => NestedAtom;
+  getDependenciesGraph: (atom: Computed<unknown>) => Edge[];
   getReadDependents: (atom: State<unknown> | Computed<unknown>) => NestedAtom;
   isMounted: (atom: State<unknown> | Computed<unknown>) => boolean;
   getSubscribeGraph: () => NestedAtom;

packages/devtools/CHANGELOG.md

@@ -0,0 +1,5 @@
+# ccstate-devtools
+
+## 4.1.0
+
+init package