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(\`
\`);
+
+ 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(\`\`);
+
+ 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(\`
\`);
+
+ 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(\`\`);
+
+ 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(\`
\`);
+
+ 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(\`
\`);
+
+ 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(\`\`);
+
+ 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(\`
\`);
+
+ 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(\`\`);
+
+ 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(\`
\`);
+
+ 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(\`\`);
+
+ 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(\`
\`);
+
+ 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(\`\`);
+
+ 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(\`
\`);
+
+ 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(\`
\`);
+
+ 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(\` Total: Count:
\`);
+
+ 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(\`
\`);
+
+ 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(\`
\`);
+
+ 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(\`
\`);
+
+ 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(\`
\`);
+
+ 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("");
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('2
');
@@ -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",