@signaltree/core 7.3.0 → 7.6.0

package/dist/enhancers/devtools/devtools.js

@@ -1,5 +1,7 @@
-import { signal } from '@angular/core';
+import { effect, signal } from '@angular/core';
 import { copyTreeProperties } from '../utils/copy-tree-properties.js';
+import { getPathNotifier } from '../../lib/path-notifier.js';
+import { snapshotState, applyState } from '../../lib/utils.js';
 
 function createActivityTracker() {
   const modules = new Map();
@@ -130,16 +132,149 @@ function createModularMetrics() {
     }
   };
 }
+function toArray(value) {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function matchesPattern(pattern, path) {
+  if (pattern === '**') return true;
+  if (pattern === path) return true;
+  if (pattern.endsWith('.*')) {
+    const prefix = pattern.slice(0, -2);
+    return path.startsWith(prefix + '.');
+  }
+  return false;
+}
+function defaultFormatPath(path) {
+  const segments = path.split('.');
+  let formatted = '';
+  for (const segment of segments) {
+    if (!segment) continue;
+    if (/^\d+$/.test(segment)) {
+      formatted += `[${segment}]`;
+    } else {
+      formatted += formatted ? `.${segment}` : segment;
+    }
+  }
+  return formatted || path;
+}
+function computeChangedPaths(prev, next, maxDepth, maxArrayLength, path = '', depth = 0, output = []) {
+  if (prev === next) return output;
+  if (depth >= maxDepth) {
+    if (path) output.push(path);
+    return output;
+  }
+  if (prev === null || next === null || prev === undefined || next === undefined) {
+    if (path) output.push(path);
+    return output;
+  }
+  const prevType = typeof prev;
+  const nextType = typeof next;
+  if (prevType !== 'object' || nextType !== 'object') {
+    if (path) output.push(path);
+    return output;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    if (prev.length !== next.length) {
+      if (path) output.push(path);
+      return output;
+    }
+    if (prev.length > maxArrayLength) {
+      if (path) output.push(path);
+      return output;
+    }
+    for (let i = 0; i < prev.length; i += 1) {
+      computeChangedPaths(prev[i], next[i], maxDepth, maxArrayLength, path ? `${path}.${i}` : `${i}`, depth + 1, output);
+    }
+    return output;
+  }
+  const prevObj = prev;
+  const nextObj = next;
+  const keys = new Set([...Object.keys(prevObj), ...Object.keys(nextObj)]);
+  if (keys.size === 0) {
+    if (path) output.push(path);
+    return output;
+  }
+  for (const key of keys) {
+    computeChangedPaths(prevObj[key], nextObj[key], maxDepth, maxArrayLength, path ? `${path}.${key}` : key, depth + 1, output);
+  }
+  return output;
+}
+function sanitizeState(value, options, depth = 0, seen = new WeakSet()) {
+  const {
+    maxDepth,
+    maxArrayLength,
+    maxStringLength
+  } = options;
+  if (value === null || value === undefined) return value;
+  if (typeof value === 'string') {
+    if (value.length > maxStringLength) {
+      return `${value.slice(0, maxStringLength)}…`;
+    }
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') return value;
+  if (typeof value === 'bigint') return `${value.toString()}n`;
+  if (typeof value === 'symbol') return String(value);
+  if (typeof value === 'function') return '[Function]';
+  if (depth >= maxDepth) return '[MaxDepth]';
+  if (value instanceof Date) return value.toISOString();
+  if (value instanceof RegExp) return value.toString();
+  if (value instanceof Error) {
+    return {
+      name: value.name,
+      message: value.message,
+      stack: value.stack
+    };
+  }
+  if (typeof value === 'object') {
+    const obj = value;
+    if (seen.has(obj)) return '[Circular]';
+    seen.add(obj);
+    if (value instanceof Map) {
+      const entries = Array.from(value.entries()).slice(0, maxArrayLength);
+      return entries.map(([k, v]) => [sanitizeState(k, options, depth + 1, seen), sanitizeState(v, options, depth + 1, seen)]);
+    }
+    if (value instanceof Set) {
+      const values = Array.from(value.values()).slice(0, maxArrayLength);
+      return values.map(v => sanitizeState(v, options, depth + 1, seen));
+    }
+    if (Array.isArray(value)) {
+      const list = value.slice(0, maxArrayLength);
+      return list.map(item => sanitizeState(item, options, depth + 1, seen));
+    }
+    const result = {};
+    for (const [key, val] of Object.entries(obj)) {
+      result[key] = sanitizeState(val, options, depth + 1, seen);
+    }
+    return result;
+  }
+  return value;
+}
 function devTools(config = {}) {
   const {
     enabled = true,
     treeName = 'SignalTree',
     name,
     enableBrowserDevTools = true,
+    enableTimeTravel = true,
     enableLogging = true,
-    performanceThreshold = 16
+    performanceThreshold = 16,
+    includePaths,
+    excludePaths,
+    formatPath,
+    rateLimitMs,
+    maxSendsPerSecond,
+    maxDepth = 10,
+    maxArrayLength = 50,
+    maxStringLength = 2000,
+    serialize
   } = config;
   const displayName = name ?? treeName;
+  const pathInclude = toArray(includePaths);
+  const pathExclude = toArray(excludePaths);
+  const sendRateLimitMs = maxSendsPerSecond && maxSendsPerSecond > 0 ? Math.ceil(1000 / maxSendsPerSecond) : rateLimitMs ?? 0;
+  const formatPathFn = formatPath ?? defaultFormatPath;
   return tree => {
     if (!enabled) {
       const noopMethods = {
@@ -152,9 +287,227 @@ function devTools(config = {}) {
     const logger = enableLogging ? createCompositionLogger() : createNoopLogger();
     const metrics = createModularMetrics();
     const compositionHistory = [];
+    const compositionChain = [];
+    const trackComposition = modules => {
+      compositionHistory.push({
+        timestamp: new Date(),
+        chain: [...modules]
+      });
+      metrics.updateMetrics({
+        compositionChain: modules
+      });
+      logger.logComposition(modules, 'with');
+    };
     const activeProfiles = new Map();
     let browserDevTools = null;
+    let isConnected = false;
+    let isApplyingExternalState = false;
+    let unsubscribeDevTools = null;
+    let unsubscribeNotifier = null;
+    let unsubscribeFlush = null;
+    let pendingPaths = [];
+    let effectRef = null;
+    let effectPrimed = false;
+    let sendScheduled = false;
+    let pendingAction = null;
+    let pendingExplicitAction = false;
+    let pendingSource;
+    let pendingDuration;
+    let lastSnapshot = undefined;
+    let lastSendAt = 0;
+    let sendTimer = null;
+    const isPathAllowed = path => {
+      if (pathInclude.length > 0) {
+        const matched = pathInclude.some(pattern => matchesPattern(pattern, path));
+        if (!matched) return false;
+      }
+      if (pathExclude.length > 0) {
+        const blocked = pathExclude.some(pattern => matchesPattern(pattern, path));
+        if (blocked) return false;
+      }
+      return true;
+    };
+    const readSnapshot = () => {
+      try {
+        if ('$' in tree) {
+          return snapshotState(tree.$);
+        }
+      } catch {}
+      return originalTreeCall();
+    };
+    const buildSerializedState = rawState => {
+      if (serialize) {
+        try {
+          return serialize(rawState);
+        } catch {}
+      }
+      return sanitizeState(rawState, {
+        maxDepth,
+        maxArrayLength,
+        maxStringLength
+      });
+    };
+    const buildAction = (type, payload, meta) => ({
+      type,
+      ...(payload !== undefined && {
+        payload
+      }),
+      ...(meta && {
+        meta: meta
+      })
+    });
+    const flushSend = () => {
+      sendScheduled = false;
+      if (!browserDevTools || isApplyingExternalState) return;
+      const rawSnapshot = readSnapshot();
+      const currentSnapshot = rawSnapshot ?? {};
+      const sanitized = buildSerializedState(currentSnapshot);
+      const defaultPaths = lastSnapshot === undefined ? [] : computeChangedPaths(lastSnapshot, currentSnapshot, maxDepth, maxArrayLength);
+      const mergedPaths = Array.from(new Set([...pendingPaths, ...defaultPaths.filter(path => path && isPathAllowed(path))]));
+      const formattedPaths = mergedPaths.map(path => formatPathFn(path));
+      if (pathInclude.length > 0 && formattedPaths.length === 0 && !pendingExplicitAction) {
+        pendingAction = null;
+        pendingExplicitAction = false;
+        pendingSource = undefined;
+        pendingDuration = undefined;
+        pendingPaths = [];
+        lastSnapshot = currentSnapshot;
+        return;
+      }
+      const effectiveAction = pendingExplicitAction ? pendingAction : formattedPaths.length === 1 ? buildAction(`SignalTree/${formattedPaths[0]}`, formattedPaths[0]) : formattedPaths.length > 1 ? buildAction('SignalTree/batch', formattedPaths) : buildAction('SignalTree/update');
+      const actionMeta = {
+        timestamp: Date.now(),
+        ...(pendingSource && {
+          source: pendingSource
+        }),
+        ...(pendingDuration !== undefined && {
+          duration: pendingDuration,
+          slow: pendingDuration > performanceThreshold
+        }),
+        ...(formattedPaths.length > 0 && {
+          paths: formattedPaths
+        })
+      };
+      const actionToSend = buildAction(effectiveAction?.type ?? 'SignalTree/update', effectiveAction?.payload, actionMeta);
+      try {
+        browserDevTools.send(actionToSend, sanitized);
+      } catch {} finally {
+        pendingAction = null;
+        pendingExplicitAction = false;
+        pendingSource = undefined;
+        pendingDuration = undefined;
+        pendingPaths = [];
+        lastSnapshot = currentSnapshot;
+        lastSendAt = Date.now();
+      }
+    };
+    const scheduleSend = (action, meta) => {
+      if (isApplyingExternalState) return;
+      if (action !== undefined) {
+        pendingAction = action;
+        pendingExplicitAction = true;
+      }
+      if (meta?.source) {
+        if (!pendingSource) {
+          pendingSource = meta.source;
+        } else if (pendingSource !== meta.source) {
+          pendingSource = 'mixed';
+        }
+      }
+      if (meta?.duration !== undefined) {
+        pendingDuration = pendingDuration === undefined ? meta.duration : Math.max(pendingDuration, meta.duration);
+      }
+      if (!browserDevTools) return;
+      if (sendScheduled) return;
+      sendScheduled = true;
+      queueMicrotask(() => {
+        if (!browserDevTools) {
+          sendScheduled = false;
+          return;
+        }
+        const now = Date.now();
+        const waitMs = Math.max(0, sendRateLimitMs - (now - lastSendAt));
+        if (waitMs > 0) {
+          if (sendTimer) return;
+          sendTimer = setTimeout(() => {
+            sendTimer = null;
+            flushSend();
+          }, waitMs);
+          return;
+        }
+        flushSend();
+      });
+    };
+    const parseDevToolsState = state => {
+      if (typeof state === 'string') {
+        try {
+          return JSON.parse(state);
+        } catch {
+          return undefined;
+        }
+      }
+      return state;
+    };
+    const applyExternalState = state => {
+      if (state === undefined || state === null) return;
+      isApplyingExternalState = true;
+      try {
+        if ('$' in tree) {
+          applyState(tree.$, state);
+        } else {
+          originalTreeCall(state);
+        }
+      } finally {
+        isApplyingExternalState = false;
+        lastSnapshot = readSnapshot();
+        pendingPaths = [];
+      }
+    };
+    const handleDevToolsMessage = message => {
+      if (!enableTimeTravel) return;
+      if (!message || typeof message !== 'object') return;
+      const msg = message;
+      if (msg.type !== 'DISPATCH' || !msg.payload?.type) return;
+      const actionType = msg.payload.type;
+      if (actionType === 'JUMP_TO_STATE' || actionType === 'JUMP_TO_ACTION') {
+        const nextState = parseDevToolsState(msg.state);
+        applyExternalState(nextState);
+        return;
+      }
+      if (actionType === 'ROLLBACK') {
+        const nextState = parseDevToolsState(msg.state);
+        applyExternalState(nextState);
+        if (browserDevTools) {
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+        }
+        return;
+      }
+      if (actionType === 'COMMIT') {
+        if (browserDevTools) {
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+        }
+        return;
+      }
+      if (actionType === 'IMPORT_STATE') {
+        const lifted = msg.payload.nextLiftedState;
+        const computedStates = lifted?.computedStates ?? [];
+        const index = lifted?.currentStateIndex ?? computedStates.length - 1;
+        const entry = computedStates[index];
+        const nextState = parseDevToolsState(entry?.state);
+        applyExternalState(nextState);
+        if (browserDevTools) {
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+        }
+      }
+    };
     const initBrowserDevTools = () => {
+      if (isConnected) return;
       if (!enableBrowserDevTools || typeof window === 'undefined' || !('__REDUX_DEVTOOLS_EXTENSION__' in window)) {
         return;
       }
@@ -169,9 +522,20 @@ function devTools(config = {}) {
           }
         });
         browserDevTools = {
-          send: connection.send
+          send: connection.send,
+          subscribe: connection.subscribe
         };
-        browserDevTools.send('@@INIT', tree());
+        if (browserDevTools.subscribe && !unsubscribeDevTools) {
+          browserDevTools.subscribe(handleDevToolsMessage);
+          unsubscribeDevTools = () => {
+            browserDevTools?.subscribe?.(() => void 0);
+          };
+        }
+        const rawSnapshot = readSnapshot();
+        const sanitized = buildSerializedState(rawSnapshot);
+        browserDevTools.send('@@INIT', sanitized);
+        lastSnapshot = rawSnapshot;
+        isConnected = true;
         console.log(`🔗 Connected to Redux DevTools as "${displayName}"`);
       } catch (e) {
         console.warn('[SignalTree] Failed to connect to Redux DevTools:', e);
@@ -193,13 +557,16 @@ function devTools(config = {}) {
         }
       }
       const duration = performance.now() - startTime;
-      const newState = originalTreeCall();
+      originalTreeCall();
       metrics.trackModuleUpdate('core', duration);
       if (duration > performanceThreshold) {
         logger.logPerformanceWarning('core', 'update', duration, performanceThreshold);
       }
       if (browserDevTools) {
-        browserDevTools.send('UPDATE', newState);
+        scheduleSend(undefined, {
+          source: 'tree.update',
+          duration
+        });
       }
       return result;
     };
@@ -210,6 +577,15 @@ function devTools(config = {}) {
         if (typeof enhancer !== 'function') {
           throw new Error('Enhancer must be a function');
         }
+        const enhancerName = enhancer.name || 'anonymousEnhancer';
+        compositionChain.push(enhancerName);
+        trackComposition([...compositionChain]);
+        scheduleSend(buildAction('SignalTree/with', {
+          enhancer: enhancerName,
+          chain: [...compositionChain]
+        }), {
+          source: 'composition'
+        });
         return enhancer(enhancedTree);
       },
       writable: false,
@@ -234,16 +610,7 @@ function devTools(config = {}) {
       activityTracker,
       logger,
       metrics: metrics.signal,
-      trackComposition: modules => {
-        compositionHistory.push({
-          timestamp: new Date(),
-          chain: [...modules]
-        });
-        metrics.updateMetrics({
-          compositionChain: modules
-        });
-        logger.logComposition(modules, 'with');
-      },
+      trackComposition,
       startModuleProfiling: module => {
         const profileId = `${module}_${Date.now()}`;
         activeProfiles.set(profileId, {
@@ -262,8 +629,14 @@ function devTools(config = {}) {
         }
       },
       connectDevTools: name => {
+        if (!browserDevTools || !isConnected) {
+          initBrowserDevTools();
+        }
         if (browserDevTools) {
-          browserDevTools.send('@@INIT', originalTreeCall());
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+          lastSnapshot = rawSnapshot;
           console.log(`🔗 Connected to Redux DevTools as "${name}"`);
         }
       },
@@ -280,9 +653,65 @@ function devTools(config = {}) {
       },
       disconnectDevTools() {
         browserDevTools = null;
+        isConnected = false;
+        if (unsubscribeNotifier) {
+          unsubscribeNotifier();
+          unsubscribeNotifier = null;
+        }
+        if (unsubscribeFlush) {
+          unsubscribeFlush();
+          unsubscribeFlush = null;
+        }
+        if (unsubscribeDevTools) {
+          unsubscribeDevTools();
+          unsubscribeDevTools = null;
+        }
+        if (effectRef) {
+          effectRef.destroy();
+          effectRef = null;
+        }
+        if (sendTimer) {
+          clearTimeout(sendTimer);
+          sendTimer = null;
+        }
+        pendingPaths = [];
+        sendScheduled = false;
+        pendingAction = null;
+        pendingExplicitAction = false;
+        pendingSource = undefined;
+        pendingDuration = undefined;
+        lastSnapshot = undefined;
       }
     };
     enhancedTree['__devTools'] = devToolsInterface;
+    try {
+      initBrowserDevTools();
+      const notifier = getPathNotifier();
+      unsubscribeNotifier = notifier.subscribe('**', (_value, _prev, path) => {
+        if (!isPathAllowed(path)) return;
+        pendingPaths.push(path);
+      });
+      unsubscribeFlush = notifier.onFlush(() => {
+        if (!browserDevTools) {
+          pendingPaths = [];
+          return;
+        }
+        if (pendingPaths.length === 0) return;
+        scheduleSend(undefined, {
+          source: 'path-notifier'
+        });
+      });
+      effectRef = effect(() => {
+        void originalTreeCall();
+        if (!effectPrimed) {
+          effectPrimed = true;
+          return;
+        }
+        scheduleSend(undefined, {
+          source: 'signal'
+        });
+      });
+    } catch {}
     return Object.assign(enhancedTree, methods);
   };
 }

package/dist/lib/entity-signal.js

@@ -20,13 +20,11 @@ function createEntitySignal(config, pathNotifier, basePath) {
     mapSignal.set(map);
   }
   function createEntityNode(id, entity) {
-    const node = () => storage.get(id);
+    const node = () => mapSignal().get(id);
     for (const key of Object.keys(entity)) {
       Object.defineProperty(node, key, {
         get: () => {
-          const current = storage.get(id);
-          const value = current?.[key];
-          return () => value;
+          return () => mapSignal().get(id)?.[key];
         },
         enumerable: true,
         configurable: true
@@ -46,7 +44,8 @@ function createEntitySignal(config, pathNotifier, basePath) {
   const findCache = new WeakMap();
   const api = {
     byId(id) {
-      const entity = storage.get(id);
+      const map = mapSignal();
+      const entity = map.get(id);
       if (!entity) return undefined;
       return getOrCreateNode(id, entity);
     },

package/dist/lib/signal-tree.js

@@ -359,9 +359,6 @@ function createBuilder(baseTree) {
           } catch {}
         }
       }
-      for (const factory of derivedQueue) {
-        newBuilder.derived(factory);
-      }
       return newBuilder;
     },
     enumerable: false,

package/dist/lib/utils.js

@@ -260,5 +260,40 @@ function unwrap(node) {
 function snapshotState(state) {
   return unwrap(state);
 }
+function applyState(stateNode, snapshot) {
+  if (snapshot === null || snapshot === undefined) return;
+  if (typeof snapshot !== 'object') return;
+  for (const key of Object.keys(snapshot)) {
+    const val = snapshot[key];
+    const target = stateNode[key];
+    if (isNodeAccessor(target)) {
+      if (val && typeof val === 'object') {
+        try {
+          applyState(target, val);
+        } catch {
+          try {
+            target(val);
+          } catch {}
+        }
+      } else {
+        try {
+          target(val);
+        } catch {}
+      }
+    } else if (isSignal(target)) {
+      try {
+        target.set?.(val);
+      } catch {
+        try {
+          target(val);
+        } catch {}
+      }
+    } else {
+      try {
+        stateNode[key] = val;
+      } catch {}
+    }
+  }
+}
 
-export { composeEnhancers, createLazySignalTree, isAnySignal, isBuiltInObject, isEntityMapMarker, isNodeAccessor, snapshotState, toWritableSignal, unwrap };
+export { applyState, composeEnhancers, createLazySignalTree, isAnySignal, isBuiltInObject, isEntityMapMarker, isNodeAccessor, snapshotState, toWritableSignal, unwrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signaltree/core",
-  "version": "7.3.0",
+  "version": "7.6.0",
   "description": "Reactive JSON for Angular. JSON branches, reactive leaves. No actions. No reducers. No selectors.",
   "license": "MIT",
   "type": "module",

package/src/lib/types.d.ts

@@ -246,11 +246,21 @@ export interface DevToolsConfig {
     enableBrowserDevTools?: boolean;
     enableLogging?: boolean;
     performanceThreshold?: number;
+    enableTimeTravel?: boolean;
     name?: string;
     treeName?: string;
     enabled?: boolean;
     logActions?: boolean;
     maxAge?: number;
+    rateLimitMs?: number;
+    maxSendsPerSecond?: number;
+    includePaths?: string[];
+    excludePaths?: string[];
+    formatPath?: (path: string) => string;
+    maxDepth?: number;
+    maxArrayLength?: number;
+    maxStringLength?: number;
+    serialize?: (state: unknown) => unknown;
     features?: {
         jump?: boolean;
         skip?: boolean;