Update the implementation of OptimizedCounter to match the hydration example

Author: Tao-VanJS

test/van.test.js

@@ -826,6 +826,17 @@ const runTests = async (van, msgDom, { debug }) => {
             await sleep(waitMsOnDomUpdates);
             assertEq(hiddenDom.innerHTML, "");
         }),
+        hydrate_0NotToRemoveDom: withHiddenDom(async (hiddenDom) => {
+            van.add(hiddenDom, div(), div());
+            const s = van.state(0);
+            const [dom1, dom2] = hiddenDom.querySelectorAll("div");
+            van.hydrate(dom1, (() => s.val));
+            van.hydrate(dom2, (() => 1 - s.val));
+            assertEq(hiddenDom.innerHTML, "01");
+            s.val = 1;
+            await sleep(waitMsOnDomUpdates);
+            assertEq(hiddenDom.innerHTML, "10");
+        }),
     };
     const debugTests = {
         escape_nonFuncArg: () => {
@@ -1006,14 +1017,12 @@ const runTests = async (van, msgDom, { debug }) => {
         const counter = van.state(init);
         return div(Object.assign(Object.assign({}, (id ? { id } : {})), { "data-counter": counter }), "❤️ ", counter, " ", button({ onclick: () => ++counter.val }, up), button({ onclick: () => --counter.val }, down));
     };
-    const OptimizedCounter = ({ van, id, init = 0, buttonStyle = "👍👎", }) => div((dom) => {
+    const OptimizedCounter = ({ van: { state, derive, val, tags: { button, div } }, id, init = 0, buttonStyle = "👍👎", }) => div((dom) => {
         if (dom)
             return dom;
-        const { button, div } = van.tags;
-        const counter = van.state(init);
-        const up = van.state(undefined);
-        const down = van.state(undefined);
-        van.derive(() => [up.val, down.val] = [...van.val(buttonStyle)]);
+        const counter = state(init);
+        const up = state(undefined), down = state(undefined);
+        derive(() => [up.val, down.val] = [...val(buttonStyle)]);
         return div(Object.assign(Object.assign({}, (id ? { id } : {})), { "data-counter": counter }), "❤️ ", counter, " ", button({ onclick: () => ++counter.val }, up), button({ onclick: () => --counter.val }, down));
     }).firstChild;
     const hydrateExample = (Counter) => withHiddenDom(async (hiddenDom) => {

test/van.test.nomodule.js

@@ -764,6 +764,17 @@
         s.val = 2;
         await sleep(waitMsOnDomUpdates);
         assertEq(hiddenDom.innerHTML, "");
+      }),
+      hydrate_0NotToRemoveDom: withHiddenDom(async (hiddenDom) => {
+        van2.add(hiddenDom, div2(), div2());
+        const s = van2.state(0);
+        const [dom1, dom2] = hiddenDom.querySelectorAll("div");
+        van2.hydrate(dom1, () => s.val);
+        van2.hydrate(dom2, () => 1 - s.val);
+        assertEq(hiddenDom.innerHTML, "01");
+        s.val = 1;
+        await sleep(waitMsOnDomUpdates);
+        assertEq(hiddenDom.innerHTML, "10");
       })
     };
     const debugTests = {
@@ -940,14 +951,12 @@
       const counter = van3.state(init);
       return div3(Object.assign(Object.assign({}, id ? { id } : {}), { "data-counter": counter }), "\u2764\uFE0F ", counter, " ", button2({ onclick: () => ++counter.val }, up), button2({ onclick: () => --counter.val }, down));
     };
-    const OptimizedCounter = ({ van: van3, id, init = 0, buttonStyle = "\u{1F44D}\u{1F44E}" }) => div2((dom) => {
+    const OptimizedCounter = ({ van: { state, derive, val, tags: { button: button2, div: div3 } }, id, init = 0, buttonStyle = "\u{1F44D}\u{1F44E}" }) => div3((dom) => {
       if (dom)
         return dom;
-      const { button: button2, div: div3 } = van3.tags;
-      const counter = van3.state(init);
-      const up = van3.state(void 0);
-      const down = van3.state(void 0);
-      van3.derive(() => [up.val, down.val] = [...van3.val(buttonStyle)]);
+      const counter = state(init);
+      const up = state(void 0), down = state(void 0);
+      derive(() => [up.val, down.val] = [...val(buttonStyle)]);
       return div3(Object.assign(Object.assign({}, id ? { id } : {}), { "data-counter": counter }), "\u2764\uFE0F ", counter, " ", button2({ onclick: () => ++counter.val }, up), button2({ onclick: () => --counter.val }, down));
     }).firstChild;
     const hydrateExample = (Counter2) => withHiddenDom(async (hiddenDom) => {

test/van.test.ts

@@ -1333,16 +1333,14 @@ const runTests = async (van: VanForTesting, msgDom: Element, {debug}: BundleOpti
   }
 
   const OptimizedCounter = ({
-    van, id, init = 0, buttonStyle = "👍👎",
+    van: {state, derive, val, tags: {button, div}},
+    id, init = 0, buttonStyle = "👍👎",
   }: CounterProps) => <HTMLDivElement>div((dom: Node) => {
     if (dom) return dom
 
-    const {button, div} = van.tags
-
-    const counter = van.state(init)
-    const up = van.state(<string | undefined>undefined)
-    const down = van.state(<string | undefined>undefined)
-    van.derive(() => [up.val, down.val] = [...van.val(buttonStyle)])
+    const counter = state(init)
+    const up = state(<string | undefined>undefined), down = state(<string | undefined>undefined)
+    derive(() => [up.val, down.val] = [...val(buttonStyle)])
 
     return div({...(id ? {id} : {}), "data-counter": counter},
       "❤️ ", counter, " ",