@cplieger/reactive 2.1.0 → 2.1.1

package/jsr.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/reactive",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "license": "Apache-2.0",
   "exports": {
     ".": "./src/index.ts"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/reactive",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -17,16 +17,16 @@
     "@stryker-mutator/typescript-checker": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
     "@typescript/native": "npm:typescript@7.0.2",
-    "@vitest/browser": "4.1.11",
-    "@vitest/browser-playwright": "4.1.11",
-    "@vitest/coverage-v8": "4.1.11",
-    "eslint": "10.9.1",
-    "fast-check": "4.9.0",
-    "playwright": "1.62.1",
+    "@vitest/browser": "5.0.0",
+    "@vitest/browser-playwright": "5.0.0",
+    "@vitest/coverage-v8": "5.0.0",
+    "eslint": "10.10.0",
+    "fast-check": "4.10.0",
+    "playwright": "1.63.0",
     "prettier": "3.9.6",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "typescript-eslint": "8.69.0",
-    "vitest": "4.1.11"
+    "typescript-eslint": "8.70.0",
+    "vitest": "5.0.0"
   },
   "overrides": {
     "qs": "^6.15.2"

package/src/reconcile.ts

@@ -30,10 +30,31 @@ export function reconcile<T>(
     }
   }
 
-  let target: Node | null = null;
-  for (let i = items.length - 1; i >= 0; i--) {
-    const item = items[i] as T;
+  // DEPARTING ELEMENTS GO FIRST, before anything is placed. The walk below runs
+  // backwards and skips an element already sitting before the last one it placed; a
+  // departing element still in the tree makes every PREDECESSOR's `nextSibling` point at
+  // a node about to vanish, so the guard sees a mismatch and re-seats a row nothing
+  // changed — which restarts its animations and drops `:hover` and focus. So `onRemove`
+  // fires before the survivors are placed, holding its own intact element; only the
+  // siblings' positions are not yet final. `key` is still called exactly once per item,
+  // and the pairs carry it into the walk so neither loop indexes an array.
+  const pairs: [T, string][] = [];
+  const wanted = new Set<string>();
+  for (const item of items) {
     const k = spec.key(item);
+    pairs.push([item, k]);
+    wanted.add(k);
+  }
+  for (const [k, el] of existing) {
+    if (!wanted.has(k)) {
+      spec.onRemove?.(el, k);
+      el.remove();
+      existing.delete(k);
+    }
+  }
+
+  let target: Node | null = null;
+  for (const [item, k] of pairs.reverse()) {
     let el = existing.get(k);
     if (el === undefined) {
       el = spec.mount(item);
@@ -52,9 +73,4 @@ export function reconcile<T>(
     }
     target = el;
   }
-
-  for (const [k, el] of existing) {
-    spec.onRemove?.(el, k);
-    el.remove();
-  }
 }