@nice-code/state 0.4.6 → 0.4.8

package/build/devtools/browser/index.js

@@ -161,7 +161,7 @@ class StateDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceStateDevtools.tsx
-import { useEffect as useEffect2, useId, useMemo as useMemo2, useReducer, useState as useState3 } from "react";
+import { useEffect as useEffect2, useId, useMemo, useReducer, useState as useState3 } from "react";
 
 // src/devtools/core/devtools_colors.ts
 var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
@@ -253,6 +253,25 @@ function summarizeChange(change) {
 function topLevel(path) {
   return path.length > 0 ? String(path[0]) : "(root)";
 }
+function changeGroupKey(change) {
+  return `${change.storeId}|${safeStringify(change.snapshot, 0)}`;
+}
+function groupChanges(changes) {
+  const groups = [];
+  let lastKey = null;
+  for (const change of changes) {
+    const key = changeGroupKey(change);
+    const last = groups[groups.length - 1];
+    if (last != null && key === lastKey) {
+      last.count++;
+      last.oldest = change;
+    } else {
+      groups.push({ representative: change, oldest: change, count: 1 });
+    }
+    lastKey = key;
+  }
+  return groups;
+}
 function computeDiff(before, after) {
   const out = [];
   walkDiff([], before, after, out);
@@ -1466,37 +1485,15 @@ function ToggleCheckbox({
 }
 
 // src/devtools/browser/components/ChangeList.tsx
-import { useMemo } from "react";
 import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
-function changeGroupKey(change) {
-  const shape = change.patches.length > 0 ? safeStringify(change.patches, 0) : safeStringify(change.snapshot, 0);
-  return `${change.storeId}|${change.source}|${shape}`;
-}
-function groupChanges(changes) {
-  const groups = [];
-  let lastKey = null;
-  for (const change of changes) {
-    const key = changeGroupKey(change);
-    const last = groups[groups.length - 1];
-    if (last != null && key === lastKey) {
-      last.count++;
-      last.oldestCuid = change.cuid;
-    } else {
-      groups.push({ representative: change, oldestCuid: change.cuid, count: 1 });
-    }
-    lastKey = key;
-  }
-  return groups;
-}
 function ChangeList({
-  changes,
+  groups,
   selectedCuid,
   onSelect,
   showStore,
   style
 }) {
-  const groups = useMemo(() => groupChanges(changes), [changes]);
-  if (changes.length === 0) {
+  if (groups.length === 0) {
     return /* @__PURE__ */ jsxDEV6("div", {
       style: {
         padding: "24px",
@@ -1516,7 +1513,7 @@ function ChangeList({
       selected: group.representative.cuid === selectedCuid,
       onClick: () => onSelect(group.representative.cuid),
       showStore
-    }, group.oldestCuid, false, undefined, this))
+    }, group.oldest.cuid, false, undefined, this))
   }, undefined, false, undefined, this);
 }
 function ChangeRow({
@@ -2098,15 +2095,30 @@ function NiceStateDevtools_Panel({
   const dockSide = getDockSide(position);
   const isHorizDock = dockSide === "top" || dockSide === "bottom";
   const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
-  const filteredChanges = useMemo2(() => storeFilter == null ? changes : changes.filter((c) => c.storeId === storeFilter), [changes, storeFilter]);
-  const selectedChange = selectedChangeCuid != null ? changes.find((c) => c.cuid === selectedChangeCuid) ?? null : null;
+  const filteredChanges = useMemo(() => storeFilter == null ? changes : changes.filter((c) => c.storeId === storeFilter), [changes, storeFilter]);
+  const groups = useMemo(() => groupChanges(filteredChanges), [filteredChanges]);
+  const selectedChange = useMemo(() => {
+    if (selectedChangeCuid == null)
+      return null;
+    const group = groups.find((g) => g.representative.cuid === selectedChangeCuid);
+    if (group == null)
+      return changes.find((c) => c.cuid === selectedChangeCuid) ?? null;
+    if (group.count > 1) {
+      return {
+        ...group.representative,
+        prevSnapshot: group.oldest.prevSnapshot,
+        inversePatches: group.oldest.inversePatches
+      };
+    }
+    return group.representative;
+  }, [selectedChangeCuid, groups, changes]);
   const latestCuid = filteredChanges.length > 0 ? filteredChanges[0].cuid : null;
   useEffect2(() => {
     if (stayOnLatest && latestCuid != null)
       setSelectedChangeCuid(latestCuid);
   }, [stayOnLatest, latestCuid]);
   const activeStore = stores.find((s) => s.id === storeFilter) ?? (stores.length > 0 ? stores[0] : null);
-  const dock = useMemo2(() => getDevtoolsDockCoordinator(), []);
+  const dock = useMemo(() => getDevtoolsDockCoordinator(), []);
   const panelId = useId();
   const [, bumpView] = useReducer((n) => n + 1, 0);
   const badge = changes.length > 0 ? String(changes.length) : undefined;
@@ -2248,7 +2260,7 @@ function NiceStateDevtools_Panel({
               /* @__PURE__ */ jsxDEV10("div", {
                 style: { flex: 1, minHeight: 0, overflowY: "auto" },
                 children: /* @__PURE__ */ jsxDEV10(ChangeList, {
-                  changes: filteredChanges,
+                  groups,
                   selectedCuid: selectedChangeCuid,
                   onSelect: (cuid) => {
                     if (stayOnLatest)

package/build/types/devtools/browser/components/ChangeList.d.ts

@@ -1,7 +1,7 @@
-import { type CSSProperties } from "react";
-import type { IDevtoolsStateChange } from "../../core/StateDevtools.types";
-export declare function ChangeList({ changes, selectedCuid, onSelect, showStore, style, }: {
-    changes: IDevtoolsStateChange[];
+import type { CSSProperties } from "react";
+import { type IChangeGroup } from "./utils";
+export declare function ChangeList({ groups, selectedCuid, onSelect, showStore, style, }: {
+    groups: IChangeGroup[];
     selectedCuid: string | null;
     onSelect: (cuid: string) => void;
     showStore: boolean;

package/build/types/devtools/browser/components/utils.d.ts

@@ -13,6 +13,33 @@ export declare function patchPathToString(path: Patch["path"]): string;
  * the distinct top-level paths affected.
  */
 export declare function summarizeChange(change: IDevtoolsStateChange): string;
+/** A run of consecutive, structurally-equal changes collapsed into one row. */
+export interface IChangeGroup {
+    /** Newest change in the run — the one the row renders and selects. */
+    representative: IDevtoolsStateChange;
+    /**
+     * Oldest change in the run — the one that actually moved the state (every later
+     * member re-applied the same mutation as a no-op). Its `prevSnapshot` is the
+     * real "before" of the whole run, so the detail panel uses it to show what the
+     * initial update changed instead of the representative's empty self-diff.
+     */
+    oldest: IDevtoolsStateChange;
+    /** How many changes the run collapses (1 = ungrouped). */
+    count: number;
+}
+/**
+ * Structural identity of a change by its *resulting* state: same store, same
+ * snapshot. The feature collapses updates that "didn't change the state from the
+ * previous update", so we compare the committed state itself rather than the
+ * mutation that produced it. Keying on patches would miss the no-op cases this is
+ * meant to catch — a fresh object reference with identical content, or a
+ * same-value write from a different source (e.g. a devtools edit followed by an
+ * app update). Those carry patches yet leave the state untouched, so they belong
+ * in the run that already reached this state regardless of source.
+ */
+export declare function changeGroupKey(change: IDevtoolsStateChange): string;
+/** Collapse consecutive structurally-equal changes (list is newest-first). */
+export declare function groupChanges(changes: IDevtoolsStateChange[]): IChangeGroup[];
 export type TDiffKind = "added" | "removed" | "changed";
 export interface IDiffEntry {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-code/state",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "private": false,
   "type": "module",
   "exports": {