Refresh UI components and showcase; release updated framework packages

packages/csr/test/reactive.test.ts

@@ -149,6 +149,21 @@ test("compiled if blocks switch branches after hydration", () => {
   expect(win.document.querySelector(".open")?.textContent).toBe("Open 3");
 });
 
+test("registry controls retain nested markup and work after the registry leaves the document", () => {
+  const definitions = [
+    [{ cond: "open", body: '<template data-wrn-if="@registry:1"></template><b>Nested</b><template data-wrn-control-end></template>' }, { cond: null, body: '<i>Closed</i>' }],
+    [{ cond: null, body: '<b>Nested</b>' }],
+  ];
+  const win = mount(`<script type="application/json" data-wrn-controls id="registry">${JSON.stringify(definitions)}</script>` +
+    '<div data-scope="open: false"><button data-on-click="open = !open">Toggle</button><template data-wrn-if="@registry:0"></template><i>Closed</i><template data-wrn-control-end></template></div>');
+  win.document.getElementById("registry")!.remove();
+  win.document.querySelector("button")!.click();
+  expect(win.document.querySelector("b")?.textContent).toBe("Nested");
+  expect(win.document.querySelector("i")).toBeNull();
+  win.document.querySelector("button")!.click();
+  expect(win.document.querySelector("i")?.textContent).toBe("Closed");
+});
+
 test("compiled each blocks rerender rows and their empty branch", () => {
   const definition = Buffer.from(
     JSON.stringify({
@@ -1890,3 +1905,16 @@ test("a @change binding still fires for a bubbling event inside a component", ()
 
   expect(win.document.querySelector("#out")?.textContent).toBe("changed");
 });
+
+
+test("appending keyed notifications does not detach existing rows", () => {
+ const win = mount(`<div data-scope="rows: [{id: 1, name: 'first'}]"><ul><li data-for="row in rows key row.id">{row.name}</li></ul><button data-on-click="rows = [...rows, {id: 2, name: 'second'}]">add</button></div>`);
+ const list = win.document.querySelector("ul")!;
+ const first = list.querySelector("li");
+ const observer = new win.MutationObserver(() => {});
+ observer.observe(list, {childList: true});
+ (win.document.querySelector("button") as unknown as HTMLElement).click();
+ expect(list.querySelectorAll("li").length).toBe(2);
+ expect(observer.takeRecords().flatMap(record => Array.from(record.removedNodes))).not.toContain(first);
+ observer.disconnect();
+});