release: WRNexusJS 0.3.0

packages/csr/test/reactive.test.ts

@@ -99,6 +99,25 @@ test("data-for exposes item + index, mustaches and member access", () => {
   ]);
 });
 
+test("keyed data-for preserves DOM identity when items reorder", () => {
+  const win = mount(
+    `<div data-scope="rows: [{id: 1, name: 'a'}, {id: 2, name: 'b'}]">
+       <ul><li data-for="row in rows key row.id">{row.name}</li></ul>
+       <button data-on-click="rows = rows.slice().reverse()">reverse</button>
+     </div>`,
+  );
+
+  const before = Array.from(win.document.querySelectorAll("li"));
+  expect(before.map((node) => node.textContent)).toEqual(["a", "b"]);
+
+  (win.document.querySelector("button") as unknown as HTMLElement).click();
+
+  const after = Array.from(win.document.querySelectorAll("li"));
+  expect(after.map((node) => node.textContent)).toEqual(["b", "a"]);
+  expect(after[0]).toBe(before[1]);
+  expect(after[1]).toBe(before[0]);
+});
+
 test("expression evaluator: member access, ternary, comparison, calls", () => {
   const win = mount(
     `<div data-scope="user: {name: 'Ada', age: 36}, items: [1, 2, 3]">