From 4385969e2e1daf958632618cc84c373b04ca11a0 Mon Sep 17 00:00:00 2001
From: Nicolas Bayet <nicolas.bayet@gmail.com>
Date: Fri, 26 Sep 2025 18:58:15 +0200
Subject: [PATCH] up

---
 tests/__snapshots__/reactivity.test.ts.snap   | 286 ++++++++++++++++++
 .../__snapshots__/reactivity.test.ts.snap     |  66 ++--
 tests/components/props.test.ts                |   4 -
 tests/components/rendering.test.ts            |   4 -
 tests/misc/portal.test.ts                     |   4 -
 5 files changed, 316 insertions(+), 48 deletions(-)
 create mode 100644 tests/__snapshots__/reactivity.test.ts.snap

diff --git a/tests/__snapshots__/reactivity.test.ts.snap b/tests/__snapshots__/reactivity.test.ts.snap
new file mode 100644
index 00000000..95ed8729
--- /dev/null
+++ b/tests/__snapshots__/reactivity.test.ts.snap
@@ -0,0 +1,286 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = comp1({}, key + \`__1\`, node, this, null);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].a;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState destroyed component is inactive 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = comp1({}, key + \`__1\`, node, this, null);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState destroyed component is inactive 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].a;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj1'].a;
+    let txt2 = ctx['contextObj2'].b;
+    return block1([txt1, txt2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState parent and children subscribed to same context 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    let txt1 = ctx['contextObj'].b;
+    return block1([txt1], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].a;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two components are updated in parallel 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two components are updated in parallel 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two components can subscribe to same context 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two components can subscribe to same context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Parent\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState useless atoms should be deleted 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Quantity\`, true, false, false, [\\"id\\"]);
+  
+  let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`id\`] = k_block2[i1];
+      const key1 = ctx['id'];
+      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
+    }
+    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
+    let txt1 = ctx['total'];
+    let txt2 = Object.keys(ctx['state']).length;
+    return block1([txt1, txt2], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState useless atoms should be deleted 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['state'].quantity;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState very simple use, with initial value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['contextObj'].value;
+    return block1([txt1]);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/reactivity.test.ts.snap b/tests/components/__snapshots__/reactivity.test.ts.snap
index 763ab45f..7f34b77d 100644
--- a/tests/components/__snapshots__/reactivity.test.ts.snap
+++ b/tests/components/__snapshots__/reactivity.test.ts.snap
@@ -52,6 +52,36 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 }"
 `;
 
+exports[`reactivity in lifecycle an external reactive object should be tracked 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`TestSubComponent\`, true, false, false, []);
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['obj1'].value;
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    return block1([txt1], [b2]);
+  }
+}"
+`;
+
+exports[`reactivity in lifecycle an external reactive object should be tracked 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['obj2'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -140,39 +170,3 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
   }
 }"
 `;
-
-exports[`subscriptions subscriptions returns the keys and targets observed by the component 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].a);
-  }
-}"
-`;
-
-exports[`subscriptions subscriptions returns the keys observed by the component 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"state\\"]);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['state'].a);
-    const b3 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`subscriptions subscriptions returns the keys observed by the component 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].state.b);
-  }
-}"
-`;
diff --git a/tests/components/props.test.ts b/tests/components/props.test.ts
index 2611e435..2824c69a 100644
--- a/tests/components/props.test.ts
+++ b/tests/components/props.test.ts
@@ -450,14 +450,10 @@ test(".alike suffix in a list", async () => {
   expect(fixture.innerHTML).toBe("<button>1V</button><button>2V</button>");
   expect(steps.splice(0)).toMatchInlineSnapshot(`
     Array [
-      "Parent:willRender",
-      "Parent:rendered",
       "Todo:willRender",
       "Todo:rendered",
       "Todo:willPatch",
       "Todo:patched",
-      "Parent:willPatch",
-      "Parent:patched",
     ]
   `);
 });
diff --git a/tests/components/rendering.test.ts b/tests/components/rendering.test.ts
index 2464b623..117ace3a 100644
--- a/tests/components/rendering.test.ts
+++ b/tests/components/rendering.test.ts
@@ -330,12 +330,8 @@ describe("rendering semantics", () => {
     expect(fixture.innerHTML).toBe("444");
     expect(steps.splice(0)).toMatchInlineSnapshot(`
       Array [
-        "Parent:willRender",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
-        "Parent:willPatch",
-        "Parent:patched",
         "Child:willPatch",
         "Child:patched",
       ]
diff --git a/tests/misc/portal.test.ts b/tests/misc/portal.test.ts
index 39c622a4..0bdb0686 100644
--- a/tests/misc/portal.test.ts
+++ b/tests/misc/portal.test.ts
@@ -458,10 +458,8 @@ describe("Portal", () => {
       "parent:willPatch",
       "child:mounted",
       "parent:patched",
-      "parent:willPatch",
       "child:willPatch",
       "child:patched",
-      "parent:patched",
     ]);
     expect(fixture.innerHTML).toBe('<div id="outside"><span>2</span></div><div></div>');
 
@@ -472,10 +470,8 @@ describe("Portal", () => {
       "parent:willPatch",
       "child:mounted",
       "parent:patched",
-      "parent:willPatch",
       "child:willPatch",
       "child:patched",
-      "parent:patched",
       "parent:willPatch",
       "child:willUnmount",
       "parent:patched",