From 0f580e815d63fbdbe6707ca209fb928723cb8175 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 8 May 2022 22:53:11 -0300
Subject: [PATCH 001/105] :zap: optimized events

---
 README.md                         |  4 +--
 client/render.js                  | 15 ++++----
 client/rerender.js                | 41 ++++++++++++++++------
 package.json                      |  2 +-
 plugins/bindable.js               |  2 +-
 shared/generateTree.js            |  3 +-
 tests/src/Application.njs         |  2 ++
 tests/src/ContextWorker.njs       | 21 ++++++------
 tests/src/OptimizedEvents.njs     | 45 ++++++++++++++++++++++++
 tests/src/OptimizedEvents.test.js | 57 +++++++++++++++++++++++++++++++
 tests/src/TwoWayBindings.njs      |  3 ++
 tests/src/TwoWayBindings.test.js  |  5 +++
 12 files changed, 169 insertions(+), 31 deletions(-)
 create mode 100644 tests/src/OptimizedEvents.njs
 create mode 100644 tests/src/OptimizedEvents.test.js

diff --git a/README.md b/README.md
index 60bdd3b4..0fb09b26 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 <img src='https://raw.githubusercontent.com/nullstack/nullstack/master/nullstack.png' height='60' alt='Nullstack'>
 
-Feature-Driven Fullstack JavaScript Components
+Feature-Driven Full Stack JavaScript Components
 
 ## What is Nullstack?
 
-Nullstack is a Feature-Driven fullstack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production.
+Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production.
 
 Write the backend and frontend of a feature in a single component and let the framework decide where the code should run.
 
diff --git a/client/render.js b/client/render.js
index 5b1eaf60..4caf762e 100644
--- a/client/render.js
+++ b/client/render.js
@@ -1,5 +1,6 @@
 import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
+import events from './events';
 
 export default function render(node, options) {
 
@@ -30,15 +31,17 @@ export default function render(node, options) {
       anchorableElement(element);
     } else if (name.startsWith('on')) {
       if (node.attributes[name] !== undefined) {
-        const eventName = name.replace('on', '');
-        const key = '_event.' + eventName;
-        node[key] = (event) => {
-          if (node.attributes.default !== true) {
+        const eventName = name.substring(2);
+        const key = node._id + '.' + eventName;
+        events[key] = {}
+        events[key].subject = node.attributes
+        events[key].callback = (event) => {
+          if (events[key].subject.default !== true) {
             event.preventDefault();
           }
-          node.attributes[name]({ ...node.attributes, event });
+          events[key].subject[name]({ ...events[key].subject, event });
         };
-        element.addEventListener(eventName, node[key]);
+        element.addEventListener(eventName, events[key].callback);
       }
     } else {
       const type = typeof (node.attributes[name]);
diff --git a/client/rerender.js b/client/rerender.js
index 769ffc7c..5dd99117 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -2,6 +2,16 @@ import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import client from './client';
 import render from './render';
+import events from './events';
+
+function clearEvents(node) {
+  if (!node?._id) return
+  for (const key in events) {
+    if (key.startsWith(node._id)) {
+      delete events[key]
+    }
+  }
+}
 
 export default function rerender(selector, current, next) {
 
@@ -28,6 +38,7 @@ export default function rerender(selector, current, next) {
   }
 
   if ((isFalse(current) || isFalse(next)) && current != next) {
+    clearEvents(current)
     const nextSelector = render(next);
     return selector.replaceWith(nextSelector);
   }
@@ -37,11 +48,13 @@ export default function rerender(selector, current, next) {
   }
 
   if (current.type == 'head' || next.type == 'head') {
+    clearEvents(current)
     const nextSelector = render(next);
     return selector.replaceWith(nextSelector);
   }
 
   if (current.type !== next.type) {
+    clearEvents(current)
     const nextSelector = render(next);
     return selector.replaceWith(nextSelector);
   }
@@ -71,17 +84,24 @@ export default function rerender(selector, current, next) {
           selector.value = next.attributes[name];
         }
       } else if (name.startsWith('on')) {
-        const eventName = name.replace('on', '');
-        const key = '_event.' + eventName;
-        selector.removeEventListener(eventName, current[key]);
+        const eventName = name.substring(2);
+        const key = current._id + '.' + eventName;
+        if (current.attributes[name] !== current.attributes[name]) {
+          selector.removeEventListener(eventName, events[key].callback);
+          delete events[key]
+        }
         if (next.attributes[name]) {
-          next[key] = (event) => {
-            if (next.attributes.default !== true) {
-              event.preventDefault();
-            }
-            next.attributes[name]({ ...next.attributes, event });
-          };
-          selector.addEventListener(eventName, next[key]);
+          if (!events[key]) {
+            events[key] = {}
+            events[key].callback = (event) => {
+              if (events[key].subject.default !== true) {
+                event.preventDefault();
+              }
+              events[key].subject[name]({ ...events[key].subject, event });
+            };
+            selector.addEventListener(eventName, events[key].callback);
+          }
+          events[key].subject = next.attributes
         }
       } else {
         const type = typeof (next.attributes[name]);
@@ -117,6 +137,7 @@ export default function rerender(selector, current, next) {
         rerender(selector.childNodes[i], current.children[i], next.children[i]);
       }
       for (let i = current.children.length - 1; i >= next.children.length; i--) {
+        console.log("remove", current._id)
         selector.removeChild(selector.childNodes[i]);
       }
     } else {
diff --git a/package.json b/package.json
index 69a307b3..fe82d7d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.15.6",
+  "version": "0.15.7",
   "description": "Full-stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",
diff --git a/plugins/bindable.js b/plugins/bindable.js
index 7d7174f2..4d1b29bd 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -44,7 +44,7 @@ function transform({ node, environment }) {
   } else if (node.type === 'input' && node.attributes.type === 'checkbox') {
     node.attributes.checked = target[node.attributes.bind];
   } else {
-    node.attributes.value = target[node.attributes.bind] || '';
+    node.attributes.value = target[node.attributes.bind] ?? '';
   }
   node.attributes.name = node.attributes.name || node.attributes.bind;
 
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 0b624e8c..a3c52b54 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -118,7 +118,8 @@ async function generateBranch(parent, node, depth, scope) {
       type: node.type,
       attributes: node.attributes || {},
       instance: node.instance,
-      children: []
+      children: [],
+      _id: depth.join('.')
     }
     if (node.children) {
       for (let i = 0; i < node.children.length; i++) {
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index a1426389..69823dfb 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -47,6 +47,7 @@ import MetatagState from './MetatagState';
 import TypeScriptExtension from './TypeScriptExtension';
 import JavaScriptExtension from './JavaScriptExtension';
 import HydrateElement from './HydrateElement';
+import OptimizedEvents from './OptimizedEvents';
 
 class Application extends Nullstack {
 
@@ -117,6 +118,7 @@ class Application extends Nullstack {
         <JavaScriptExtension route="/javascript-extension" />
         <TypeScriptExtension route="/typescript-extension" generic />
         <HydrateElement route="/hydrate-element" />
+        <OptimizedEvents route="/optimized-events" />
         <ErrorPage route="*" />
       </main>
     )
diff --git a/tests/src/ContextWorker.njs b/tests/src/ContextWorker.njs
index 8f2350ba..76f09512 100644
--- a/tests/src/ContextWorker.njs
+++ b/tests/src/ContextWorker.njs
@@ -16,29 +16,30 @@ class ContextWorker extends Nullstack {
     await this.serverFunctionName();
   }
 
-  static async start({worker}) {
+  static async start({ worker }) {
     worker.enabled = true;
     worker.preload = ['/context-worker'];
   }
 
-  static async inspectHeaders({request}) {
+  static async inspectHeaders({ request }) {
     return request.headers.custom;
   }
 
-  async hydrate({worker}) {
+  async hydrate({ worker }) {
     worker.headers.custom = 'custom';
     this.header = await this.inspectHeaders();
   }
 
-  static async longServerFunction({id}) {
+  static async longServerFunction({ id }) {
     await sleep(3000);
   }
 
-  invokeServerFunction({id}) {
-    this.longServerFunction({id});
+  invokeServerFunction({ worker, id }) {
+    this.longServerFunction({ id });
+    this.didFetch = worker.fetching
   }
-  
-  render({worker}) {
+
+  render({ worker }) {
     return (
       <div>
         <button onclick={this.invokeServerFunction}> Invoke </button>
@@ -46,13 +47,13 @@ class ContextWorker extends Nullstack {
         <div data-worker={!!worker} />
         <div data-enabled={worker.enabled} />
         <div data-online={worker.online} />
-        <div data-fetching={worker.fetching} />
+        <div data-fetching={this.didFetch} />
         <div data-responsive={worker.responsive} />
         <div data-preload={!!worker.preload} />
         <div data-preload-path={worker.preload[0]} />
         <div data-queues-length={worker.queues.longServerFunction.length} />
         <div data-cdn={worker.cdn} />
-        <div data-queues={worker.queues.longServerFunction.map(({id}) => id)?.join(',')}></div>
+        <div data-queues={worker.queues.longServerFunction.map(({ id }) => id)?.join(',')}></div>
         <button onclick={this.invokeServerFunction} id="a">a</button>
         <button onclick={this.invokeServerFunction} id="b">b</button>
         {worker.registration &&
diff --git a/tests/src/OptimizedEvents.njs b/tests/src/OptimizedEvents.njs
new file mode 100644
index 00000000..5656f529
--- /dev/null
+++ b/tests/src/OptimizedEvents.njs
@@ -0,0 +1,45 @@
+import Nullstack from 'nullstack';
+
+class OptimizedEvents extends Nullstack {
+
+  count = 0
+
+  clickWhenEven() {
+    this.lastClick = 'even'
+  }
+
+  clickWhenOdd() {
+    this.lastClick = 'odd'
+  }
+
+  incrementCount() {
+    this.count++
+  }
+
+  doubleCount({ data }) {
+    this.count += data.count
+  }
+
+  eventAfterRendered() {
+    this.worksAfterRender = true
+  }
+
+  render() {
+    return (
+      <main>
+        {this.count === 1 &&
+          <div>
+            <button onclick={this.eventAfterRendered} data-works-after-rendered={this.worksAfterRender} data-after-render> after render </button>
+          </div>
+        }
+        <button onclick={() => this.count = 10 + this.count} data-set-count>add 10</button>
+        <button onclick={this.count % 2 === 0 ? this.clickWhenEven : this.clickWhenOdd} data-last-click={this.lastClick} data-even-odd> even odd </button>
+        <button onclick={this.incrementCount} data-increment-count> increment </button>
+        <button onclick={this.doubleCount} data-count={this.count} data-double-count> double </button>
+      </main>
+    )
+  }
+
+}
+
+export default OptimizedEvents;
\ No newline at end of file
diff --git a/tests/src/OptimizedEvents.test.js b/tests/src/OptimizedEvents.test.js
new file mode 100644
index 00000000..f73f84c4
--- /dev/null
+++ b/tests/src/OptimizedEvents.test.js
@@ -0,0 +1,57 @@
+describe('OptimizedEvents', () => {
+
+  beforeEach(async () => {
+    await page.goto('http://localhost:6969/optimized-events');
+  });
+
+  test('events are triggered', async () => {
+    await page.click('[data-increment-count]')
+    await page.waitForSelector('[data-count="1"]');
+    const element = await page.$('[data-count="1"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('events take the current attributes', async () => {
+    await page.click('[data-increment-count]')
+    await page.waitForSelector('[data-count="1"]');
+    await page.click('[data-double-count]')
+    await page.waitForSelector('[data-count="2"]');
+    const element = await page.$('[data-count="2"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('events are triggered in elements that were added late to the dom', async () => {
+    await page.click('[data-increment-count]')
+    await page.waitForSelector('[data-after-render]');
+    await page.click('[data-after-render]')
+    await page.waitForSelector('[data-works-after-rendered]');
+    const element = await page.$('[data-works-after-rendered]');
+    expect(element).toBeTruthy();
+  });
+
+  test('inline events are triggered with current values', async () => {
+    await page.click('[data-increment-count]')
+    await page.waitForSelector('[data-count="1"]');
+    await page.click('[data-set-count]')
+    await page.waitForSelector('[data-count="11"]');
+    const element = await page.$('[data-count="11"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('events can change references', async () => {
+    await page.click('[data-even-odd]')
+    await page.waitForSelector('[data-last-click="even"]');
+    const element = await page.$('[data-last-click="even"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('events can change references', async () => {
+    await page.click('[data-increment-count]')
+    await page.waitForSelector('[data-count="1"]');
+    await page.click('[data-even-odd]')
+    await page.waitForSelector('[data-last-click="odd"]');
+    const element = await page.$('[data-last-click="odd"]');
+    expect(element).toBeTruthy();
+  });
+
+});
\ No newline at end of file
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index 7875cf08..d3b73d41 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -11,6 +11,8 @@ class TwoWayBindings extends Nullstack {
   object = { count: 1 };
   array = ['a', 'b', 'c'];
 
+  zero = 0
+
   parse({ event, onchange }) {
     const normalized = event.target.value.replace(',', '').padStart(3, '0');
     const whole = (parseInt(normalized.slice(0, -2)) || 0).toString();
@@ -32,6 +34,7 @@ class TwoWayBindings extends Nullstack {
   render({ params }) {
     return (
       <div>
+        <input bind={this.zero} />
         <div data-number={this.number} />
         {!this.boolean && <div data-boolean-type={typeof (this.boolean)} />}
         {this.number > 1 && <div data-number-type={typeof (this.number)} />}
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index 10bb636a..568eb460 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -4,6 +4,11 @@ beforeAll(async () => {
 
 describe('ContextPage', () => {
 
+  test('inputs can be bound to zero', async () => {
+    const element = await page.$('[value="0"]');
+    expect(element).toBeTruthy();
+  });
+
   test('bind adds a name attribute to the element', async () => {
     const element = await page.$('[name="number"]');
     expect(element).toBeTruthy();

From d614ca1f30e8500410baa005ecc391886283c9eb Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 8 May 2022 22:53:19 -0300
Subject: [PATCH 002/105] :zap: optimized events

---
 client/events.js | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 client/events.js

diff --git a/client/events.js b/client/events.js
new file mode 100644
index 00000000..3f3372ad
--- /dev/null
+++ b/client/events.js
@@ -0,0 +1,2 @@
+const events = {}
+export default events
\ No newline at end of file

From b41d6e3c314389c3f67c2938428789a8e2263653 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 9 May 2022 11:45:52 -0300
Subject: [PATCH 003/105] :zap: skip removing listeners

---
 client/rerender.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/rerender.js b/client/rerender.js
index 5dd99117..dfca6bf5 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -86,7 +86,7 @@ export default function rerender(selector, current, next) {
       } else if (name.startsWith('on')) {
         const eventName = name.substring(2);
         const key = current._id + '.' + eventName;
-        if (current.attributes[name] !== current.attributes[name]) {
+        if (events[key] && !current.attributes[name]) {
           selector.removeEventListener(eventName, events[key].callback);
           delete events[key]
         }

From 235be9332932ef9b5afe409d28819956a27921d4 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 10 May 2022 00:13:54 -0300
Subject: [PATCH 004/105] :mute: remove console log

---
 client/rerender.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/rerender.js b/client/rerender.js
index dfca6bf5..6b8bb890 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -137,7 +137,6 @@ export default function rerender(selector, current, next) {
         rerender(selector.childNodes[i], current.children[i], next.children[i]);
       }
       for (let i = current.children.length - 1; i >= next.children.length; i--) {
-        console.log("remove", current._id)
         selector.removeChild(selector.childNodes[i]);
       }
     } else {

From 7c8a6d17c9000018b341b5a95f5c1ec89ad95b90 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 10 May 2022 01:34:03 -0300
Subject: [PATCH 005/105] :zap: weak ref events

---
 client/events.js                  |  4 ++--
 client/render.js                  | 16 +++++++-------
 client/rerender.js                | 35 ++++++++++---------------------
 shared/generateTree.js            |  3 +--
 tests/src/OptimizedEvents.njs     |  2 ++
 tests/src/OptimizedEvents.test.js | 20 ++++++++++++++++++
 6 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/client/events.js b/client/events.js
index 3f3372ad..f180c74d 100644
--- a/client/events.js
+++ b/client/events.js
@@ -1,2 +1,2 @@
-const events = {}
-export default events
\ No newline at end of file
+export const eventCallbacks = new WeakMap()
+export const eventSubjects = new WeakMap()
\ No newline at end of file
diff --git a/client/render.js b/client/render.js
index 4caf762e..dd3a5f14 100644
--- a/client/render.js
+++ b/client/render.js
@@ -1,6 +1,6 @@
 import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
-import events from './events';
+import { eventCallbacks, eventSubjects } from './events'
 
 export default function render(node, options) {
 
@@ -32,16 +32,16 @@ export default function render(node, options) {
     } else if (name.startsWith('on')) {
       if (node.attributes[name] !== undefined) {
         const eventName = name.substring(2);
-        const key = node._id + '.' + eventName;
-        events[key] = {}
-        events[key].subject = node.attributes
-        events[key].callback = (event) => {
-          if (events[key].subject.default !== true) {
+        const callback = (event) => {
+          const subject = eventSubjects.get(element)
+          if (subject.default !== true) {
             event.preventDefault();
           }
-          events[key].subject[name]({ ...events[key].subject, event });
+          subject[name]({ ...subject, event });
         };
-        element.addEventListener(eventName, events[key].callback);
+        element.addEventListener(eventName, callback);
+        eventCallbacks.set(element, callback)
+        eventSubjects.set(element, node.attributes)
       }
     } else {
       const type = typeof (node.attributes[name]);
diff --git a/client/rerender.js b/client/rerender.js
index 6b8bb890..f59a5a26 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -2,16 +2,7 @@ import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import client from './client';
 import render from './render';
-import events from './events';
-
-function clearEvents(node) {
-  if (!node?._id) return
-  for (const key in events) {
-    if (key.startsWith(node._id)) {
-      delete events[key]
-    }
-  }
-}
+import { eventCallbacks, eventSubjects } from './events'
 
 export default function rerender(selector, current, next) {
 
@@ -38,7 +29,6 @@ export default function rerender(selector, current, next) {
   }
 
   if ((isFalse(current) || isFalse(next)) && current != next) {
-    clearEvents(current)
     const nextSelector = render(next);
     return selector.replaceWith(nextSelector);
   }
@@ -48,13 +38,11 @@ export default function rerender(selector, current, next) {
   }
 
   if (current.type == 'head' || next.type == 'head') {
-    clearEvents(current)
     const nextSelector = render(next);
     return selector.replaceWith(nextSelector);
   }
 
   if (current.type !== next.type) {
-    clearEvents(current)
     const nextSelector = render(next);
     return selector.replaceWith(nextSelector);
   }
@@ -85,23 +73,22 @@ export default function rerender(selector, current, next) {
         }
       } else if (name.startsWith('on')) {
         const eventName = name.substring(2);
-        const key = current._id + '.' + eventName;
-        if (events[key] && !current.attributes[name]) {
-          selector.removeEventListener(eventName, events[key].callback);
-          delete events[key]
+        if (eventCallbacks.has(selector) && !next.attributes[name]) {
+          selector.removeEventListener(eventName, eventCallbacks.get(selector));
         }
         if (next.attributes[name]) {
-          if (!events[key]) {
-            events[key] = {}
-            events[key].callback = (event) => {
-              if (events[key].subject.default !== true) {
+          if (!eventCallbacks.has(selector)) {
+            const callback = (event) => {
+              const subject = eventSubjects.get(selector)
+              if (subject.default !== true) {
                 event.preventDefault();
               }
-              events[key].subject[name]({ ...events[key].subject, event });
+              subject[name]({ ...subject, event });
             };
-            selector.addEventListener(eventName, events[key].callback);
+            selector.addEventListener(eventName, callback);
+            eventCallbacks.set(selector, callback)
           }
-          events[key].subject = next.attributes
+          eventSubjects.set(selector, next.attributes)
         }
       } else {
         const type = typeof (next.attributes[name]);
diff --git a/shared/generateTree.js b/shared/generateTree.js
index a3c52b54..0b624e8c 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -118,8 +118,7 @@ async function generateBranch(parent, node, depth, scope) {
       type: node.type,
       attributes: node.attributes || {},
       instance: node.instance,
-      children: [],
-      _id: depth.join('.')
+      children: []
     }
     if (node.children) {
       for (let i = 0; i < node.children.length; i++) {
diff --git a/tests/src/OptimizedEvents.njs b/tests/src/OptimizedEvents.njs
index 5656f529..69578727 100644
--- a/tests/src/OptimizedEvents.njs
+++ b/tests/src/OptimizedEvents.njs
@@ -34,6 +34,8 @@ class OptimizedEvents extends Nullstack {
         }
         <button onclick={() => this.count = 10 + this.count} data-set-count>add 10</button>
         <button onclick={this.count % 2 === 0 ? this.clickWhenEven : this.clickWhenOdd} data-last-click={this.lastClick} data-even-odd> even odd </button>
+        <button onclick={this.count === 0 ? this.incrementCount : undefined} data-zero-only-increment> zero only </button>
+        {this.count === 0 ? <button onclick={this.incrementCount} data-zero-nothing-increment> zero only </button> : <button data-zero-nothing-increment> nothing </button>}
         <button onclick={this.incrementCount} data-increment-count> increment </button>
         <button onclick={this.doubleCount} data-count={this.count} data-double-count> double </button>
       </main>
diff --git a/tests/src/OptimizedEvents.test.js b/tests/src/OptimizedEvents.test.js
index f73f84c4..8567b939 100644
--- a/tests/src/OptimizedEvents.test.js
+++ b/tests/src/OptimizedEvents.test.js
@@ -54,4 +54,24 @@ describe('OptimizedEvents', () => {
     expect(element).toBeTruthy();
   });
 
+  test('events are removed if attribute becomes undefined', async () => {
+    await page.click('[data-zero-only-increment]')
+    await page.waitForSelector('[data-count="1"]');
+    await page.click('[data-zero-only-increment]')
+    await page.waitForTimeout(1000)
+    await page.waitForSelector('[data-count="1"]');
+    const element = await page.$('[data-count="1"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('events are removed in ternaries', async () => {
+    await page.click('[data-zero-nothing-increment]')
+    await page.waitForSelector('[data-count="1"]');
+    await page.click('[data-zero-nothing-increment]')
+    await page.waitForTimeout(1000)
+    await page.waitForSelector('[data-count="1"]');
+    const element = await page.$('[data-count="1"]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file

From 3a4ad1888e036091e7d7fa0dad7ba036938863a4 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Thu, 12 May 2022 18:16:48 -0300
Subject: [PATCH 006/105] :construction: optimizing renderers

---
 client/client.js                 |   4 +-
 client/index.js                  |   5 +-
 client/render.js                 |  29 ++---
 client/rerender.js               | 205 ++++++++++++++++++++-----------
 server/render.js                 |  38 +++---
 shared/generateTree.js           |  17 ++-
 shared/nodes.js                  |   2 +-
 tests/.env                       |   9 ++
 tests/jest-puppeteer.config.js   |   3 +
 tests/src/TwoWayBindings.test.js |   2 +-
 10 files changed, 200 insertions(+), 114 deletions(-)
 create mode 100644 tests/.env

diff --git a/client/client.js b/client/client.js
index 798dfce9..2d8668bc 100644
--- a/client/client.js
+++ b/client/client.js
@@ -7,7 +7,6 @@ import router from './router'
 const client = {}
 
 client.initialized = false
-client.hydrated = false
 client.initializer = null
 client.instances = {}
 context.instances = client.instances
@@ -31,7 +30,7 @@ client.update = async function update() {
       client.initialized = false
       client.renewalQueue = []
       client.nextVirtualDom = await generateTree(client.initializer(), scope)
-      rerender(client.selector)
+      rerender()
       client.virtualDom = client.nextVirtualDom
       client.nextVirtualDom = null
       client.processLifecycleQueues()
@@ -42,7 +41,6 @@ client.update = async function update() {
 client.processLifecycleQueues = async function processLifecycleQueues() {
   if (!client.initialized) {
     client.initialized = true
-    client.hydrated = true
   }
   let shouldUpdate = false
   while (client.initiationQueue.length) {
diff --git a/client/index.js b/client/index.js
index 2777dd63..005f58c6 100644
--- a/client/index.js
+++ b/client/index.js
@@ -14,7 +14,7 @@ import page from './page';
 import params, { updateParams } from './params';
 import project from './project';
 import render from './render';
-import rerender from './rerender';
+import rerender, { hydrate } from './rerender';
 import router from './router';
 import settings from './settings';
 import worker from './worker';
@@ -63,12 +63,13 @@ export default class Nullstack {
         client.selector = body
       } else {
         client.virtualDom = await generateTree(client.initializer(), scope);
+        hydrate(client.selector, client.virtualDom)
         context.environment = environment;
         scope.plugins = loadPlugins(scope);
         worker.online = navigator.onLine;
         typeof context.start === 'function' && await context.start(context);
         client.nextVirtualDom = await generateTree(client.initializer(), scope);
-        rerender(client.selector);
+        rerender();
         client.virtualDom = client.nextVirtualDom;
         client.nextVirtualDom = null;
       }
diff --git a/client/render.js b/client/render.js
index 5b1eaf60..7564b2cf 100644
--- a/client/render.js
+++ b/client/render.js
@@ -4,30 +4,31 @@ import { anchorableElement } from './anchorableNode';
 export default function render(node, options) {
 
   if (isFalse(node) || node.type === 'head') {
-    return document.createComment("");
+    node.element = document.createComment("");
+    return node.element
   }
 
   if (isText(node)) {
-    return document.createTextNode(node);
+    node.element = document.createTextNode(node.text);
+    return node.element
   }
 
   const svg = (options && options.svg) || node.type === 'svg';
 
-  let element;
   if (svg) {
-    element = document.createElementNS("http://www.w3.org/2000/svg", node.type);
+    node.element = document.createElementNS("http://www.w3.org/2000/svg", node.type);
   } else {
-    element = document.createElement(node.type);
+    node.element = document.createElement(node.type);
   }
 
   if (node.instance) {
-    node.instance._self.element = element;
+    node.instance._self.element = node.element;
   }
 
   for (let name in node.attributes) {
     if (name === 'html') {
-      element.innerHTML = node.attributes[name];
-      anchorableElement(element);
+      node.element.innerHTML = node.attributes[name];
+      node.attributes['data-n'] === undefined && anchorableElement(node.element);
     } else if (name.startsWith('on')) {
       if (node.attributes[name] !== undefined) {
         const eventName = name.replace('on', '');
@@ -38,15 +39,15 @@ export default function render(node, options) {
           }
           node.attributes[name]({ ...node.attributes, event });
         };
-        element.addEventListener(eventName, node[key]);
+        node.element.addEventListener(eventName, node[key]);
       }
     } else {
       const type = typeof (node.attributes[name]);
       if (type !== 'object' && type !== 'function') {
         if (name != 'value' && node.attributes[name] === true) {
-          element.setAttribute(name, '');
+          node.element.setAttribute(name, '');
         } else if (name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
-          element.setAttribute(name, node.attributes[name]);
+          node.element.setAttribute(name, node.attributes[name]);
         }
       }
     }
@@ -55,14 +56,14 @@ export default function render(node, options) {
   if (!node.attributes.html) {
     for (let i = 0; i < node.children.length; i++) {
       const child = render(node.children[i], { svg });
-      element.appendChild(child);
+      node.element.appendChild(child);
     }
 
     if (node.type == 'select') {
-      element.value = node.attributes.value;
+      node.element.value = node.attributes.value;
     }
   }
 
-  return element;
+  return node.element;
 
 }
\ No newline at end of file
diff --git a/client/rerender.js b/client/rerender.js
index 769ffc7c..45fd9fbd 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -1,44 +1,125 @@
-import { isFalse, isText } from '../shared/nodes';
+import { isUndefined, isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import client from './client';
 import render from './render';
 
-export default function rerender(selector, current, next) {
+function updateAttributes(selector, current, next) {
+  const attributeNames = Object.keys({ ...current.attributes, ...next.attributes });
+  for (const name of attributeNames) {
+    if (name === 'html') {
+      if (next.attributes[name] !== current.attributes[name]) {
+        selector.innerHTML = next.attributes[name];
+      }
+      next.attributes['data-n'] === undefined && anchorableElement(selector);
+    } else if (name === 'checked') {
+      if (next.attributes[name] !== selector.value) {
+        selector.checked = next.attributes[name];
+      }
+    } else if (name === 'value') {
+      if (next.attributes[name] !== selector.value) {
+        selector.value = next.attributes[name];
+      }
+    } else if (name.startsWith('on')) {
+      const eventName = name.replace('on', '');
+      const key = '_event.' + eventName;
+      selector.removeEventListener(eventName, current[key]);
+      if (next.attributes[name]) {
+        next[key] = (event) => {
+          if (next.attributes.default !== true) {
+            event.preventDefault();
+          }
+          next.attributes[name]({ ...next.attributes, event });
+        };
+        selector.addEventListener(eventName, next[key]);
+      }
+    } else {
+      const type = typeof (next.attributes[name]);
+      if (type !== 'object' && type !== 'function') {
+        if (current.attributes[name] !== undefined && next.attributes[name] === undefined) {
+          selector.removeAttribute(name);
+        } else if (current.attributes[name] !== next.attributes[name]) {
+          if (name != 'value' && next.attributes[name] === false || next.attributes[name] === null || next.attributes[name] === undefined) {
+            selector.removeAttribute(name);
+          } else if (name != 'value' && next.attributes[name] === true) {
+            selector.setAttribute(name, '');
+          } else {
+            selector.setAttribute(name, next.attributes[name]);
+          }
+        }
+      }
+    }
+  }
+}
+
+function _rerender(current, next) {
 
-  current = current === undefined ? client.virtualDom : current;
-  next = next === undefined ? client.nextVirtualDom : next;
+  const selector = current.element
+  next.element = current.element
 
   if (next.instance) {
     next.instance._self.element = selector;
   }
 
-  if (!client.hydrated && selector) {
-    for (const element of selector.childNodes) {
-      if (element.tagName && element.tagName.toLowerCase() == 'textarea' && element.childNodes.length == 0) {
-        element.appendChild(document.createTextNode(''));
-      }
-      if (element.COMMENT_NODE === 8 && element.textContent === '#') {
-        selector.removeChild(element);
-      }
-    }
-  }
-
   if (isFalse(current) && isFalse(next)) {
     return;
   }
 
   if ((isFalse(current) || isFalse(next)) && current != next) {
     const nextSelector = render(next);
-    return selector.replaceWith(nextSelector);
+    selector.replaceWith(nextSelector);
+    if (current.type !== 'head' && next.type !== 'head') {
+      return
+    }
   }
 
-  if (current.type == 'head' && next.type == 'head') {
-    return;
+  if (current.type == 'head' ^ next.type == 'head') {
+    const nextSelector = render(next);
+    selector.replaceWith(nextSelector);
   }
 
-  if (current.type == 'head' || next.type == 'head') {
-    const nextSelector = render(next);
-    return selector.replaceWith(nextSelector);
+  if (current.type !== 'head' && next.type === 'head') {
+    const limit = next.children.length;
+    for (let i = limit - 1; i > -1; i--) {
+      const nextSelector = render(next.children[i]);
+      document.querySelector('head').appendChild(nextSelector)
+    }
+    return
+  }
+
+  if (current.type === 'head' && next.type !== 'head') {
+    const limit = current.children.length;
+    for (let i = limit - 1; i > -1; i--) {
+      document.querySelector(`[data-n="${current.children[i].attributes['data-n']}"]`).remove()
+    }
+    return
+  }
+
+  if (next.type === 'head') {
+    const limit = Math.max(current.children.length, next.children.length);
+    for (let i = limit - 1; i > -1; i--) {
+      if (isUndefined(current.children[i]) && !isFalse(next.children[i])) {
+        const nextSelector = render(next.children[i]);
+        document.querySelector('head').appendChild(nextSelector)
+      } else if (isUndefined(next.children[i]) && !isFalse(current.children[i])) {
+        current.children[i].element.remove()
+      } else if (!isFalse(current.children[i]) && !isFalse(next.children[i])) {
+        if (current.children[i].type === next.children[i].type) {
+          next.children[i].element = current.children[i].element
+          const element = document.querySelector(`[data-n="${next.children[i].attributes['data-n']}"]`)
+          updateAttributes(element, current.children[i], next.children[i])
+        } else {
+          document.querySelector(`[data-n="${current.children[i].attributes['data-n']}"]`).remove()
+          const nextSelector = render(next.children[i]);
+          document.querySelector('head').appendChild(nextSelector)
+        }
+      } else if (isFalse(current.children[i]) && !isFalse(next.children[i])) {
+        const nextSelector = render(next.children[i]);
+        document.querySelector('head').appendChild(nextSelector)
+      } else {
+        current.children[i].element.remove()
+      }
+    }
+    return
   }
 
   if (current.type !== next.type) {
@@ -48,65 +129,20 @@ export default function rerender(selector, current, next) {
 
   if (isText(current) && isText(next)) {
     if (current != next) {
-      selector.nodeValue = next;
+      selector.nodeValue = next.text;
     }
     return;
   }
 
   if (current.type === next.type) {
-
-    const attributeNames = Object.keys({ ...current.attributes, ...next.attributes });
-    for (const name of attributeNames) {
-      if (name === 'html') {
-        if (next.attributes[name] !== current.attributes[name]) {
-          selector.innerHTML = next.attributes[name];
-        }
-        anchorableElement(selector);
-      } else if (name === 'checked') {
-        if (next.attributes[name] !== selector.value) {
-          selector.checked = next.attributes[name];
-        }
-      } else if (name === 'value') {
-        if (next.attributes[name] !== selector.value) {
-          selector.value = next.attributes[name];
-        }
-      } else if (name.startsWith('on')) {
-        const eventName = name.replace('on', '');
-        const key = '_event.' + eventName;
-        selector.removeEventListener(eventName, current[key]);
-        if (next.attributes[name]) {
-          next[key] = (event) => {
-            if (next.attributes.default !== true) {
-              event.preventDefault();
-            }
-            next.attributes[name]({ ...next.attributes, event });
-          };
-          selector.addEventListener(eventName, next[key]);
-        }
-      } else {
-        const type = typeof (next.attributes[name]);
-        if (type !== 'object' && type !== 'function') {
-          if (current.attributes[name] !== undefined && next.attributes[name] === undefined) {
-            selector.removeAttribute(name);
-          } else if (current.attributes[name] !== next.attributes[name]) {
-            if (name != 'value' && next.attributes[name] === false || next.attributes[name] === null || next.attributes[name] === undefined) {
-              selector.removeAttribute(name);
-            } else if (name != 'value' && next.attributes[name] === true) {
-              selector.setAttribute(name, '');
-            } else {
-              selector.setAttribute(name, next.attributes[name]);
-            }
-          }
-        }
-      }
-    }
+    updateAttributes(selector, current, next)
 
     if (next.attributes.html) return;
 
     const limit = Math.max(current.children.length, next.children.length);
     if (next.children.length > current.children.length) {
       for (let i = 0; i < current.children.length; i++) {
-        rerender(selector.childNodes[i], current.children[i], next.children[i]);
+        _rerender(current.children[i], next.children[i]);
       }
       for (let i = current.children.length; i < next.children.length; i++) {
         const nextSelector = render(next.children[i]);
@@ -114,7 +150,7 @@ export default function rerender(selector, current, next) {
       }
     } else if (current.children.length > next.children.length) {
       for (let i = 0; i < next.children.length; i++) {
-        rerender(selector.childNodes[i], current.children[i], next.children[i]);
+        _rerender(current.children[i], next.children[i]);
       }
       for (let i = current.children.length - 1; i >= next.children.length; i--) {
         selector.removeChild(selector.childNodes[i]);
@@ -129,12 +165,12 @@ export default function rerender(selector, current, next) {
           throw new Error('Virtual DOM does not match the DOM.')
           return;
         }
-        rerender(selector.childNodes[i], current.children[i], next.children[i]);
+        _rerender(current.children[i], next.children[i]);
       }
     }
 
     if (next.type == 'textarea') {
-      selector.value = next.children.join("");
+      selector.value = next.children.reduce((t, c) => t + c.text, '');
     }
 
     if (next.type == 'select') {
@@ -143,4 +179,29 @@ export default function rerender(selector, current, next) {
 
   }
 
+}
+
+export default function rerender() {
+  _rerender(client.virtualDom, client.nextVirtualDom)
+}
+
+export function hydrate(selector, node) {
+  if (node?.attributes?.['data-n'] !== undefined) {
+    node.element = document.querySelector(`[data-n="${node.attributes['data-n']}"]`)
+    return
+  }
+  node.element = selector
+  for (const element of selector.childNodes) {
+    if (element.tagName && element.tagName.toLowerCase() == 'textarea' && element.childNodes.length == 0) {
+      element.appendChild(document.createTextNode(''));
+    }
+    if (element.COMMENT_NODE === 8 && element.textContent === '#') {
+      selector.removeChild(element);
+    }
+  }
+  if (!node.children) return
+  const limit = node.children.length;
+  for (let i = limit - 1; i > -1; i--) {
+    hydrate(selector.childNodes[i], node.children[i])
+  }
 }
\ No newline at end of file
diff --git a/server/render.js b/server/render.js
index c9e3a994..2d6b19b1 100644
--- a/server/render.js
+++ b/server/render.js
@@ -1,25 +1,25 @@
 import { isFalse } from "../shared/nodes";
-import {sanitizeHtml} from "../shared/sanitizeString";
+import { sanitizeHtml } from "../shared/sanitizeString";
 
 export default function render(node, scope) {
 
-  if(isFalse(node)) {
+  if (isFalse(node)) {
     return "<!---->";
   }
 
-  if(node.type === undefined) {
-    return (sanitizeHtml(node.toString()) || ' ') + "<!--#-->";
+  if (node.type === 'text') {
+    return (sanitizeHtml(node.text.toString()) || ' ') + "<!--#-->";
   }
 
   let element = `<${node.type}`;
 
-  for(let name in node.attributes) {
-    if(!name.startsWith('on') && name !== 'html') {
-      const type = typeof(node.attributes[name]);
-      if(type !== 'object' && type !== 'function') {
-        if(name != 'value' && node.attributes[name] === true) {
+  for (let name in node.attributes) {
+    if (!name.startsWith('on') && name !== 'html') {
+      const type = typeof (node.attributes[name]);
+      if (type !== 'object' && type !== 'function') {
+        if (name != 'value' && node.attributes[name] === true) {
           element += ` ${name}`;
-        } else if(name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
+        } else if (name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
           element += ` ${name}="${node.attributes[name]}"`;
         }
       }
@@ -27,24 +27,24 @@ export default function render(node, scope) {
   }
 
   const selfClosing = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr', 'menuitem'].includes(node.type);
-  if(selfClosing && node.children.length === 0) {
+  if (selfClosing && node.children.length === 0) {
     element += '/>';
 
   } else {
     element += '>';
-    if(node.attributes.html) {
+    if (node.attributes.html) {
       const source = node.attributes.html;
-      if(node.type === 'head') {
+      if (node.type === 'head') {
         scope.head += source;
       } else {
         element += source;
       }
-    } else if(node.type === 'textarea') {
-      element += node.children[0];
+    } else if (node.type === 'textarea') {
+      element += node.children[0].text;
     } else {
-      for(let i = 0; i < node.children.length; i++) {
+      for (let i = 0; i < node.children.length; i++) {
         const source = render(node.children[i], scope);
-        if(node.type === 'head') {
+        if (node.type === 'head') {
           scope.head += source;
         } else {
           element += source;
@@ -53,6 +53,6 @@ export default function render(node, scope) {
     }
     element += `</${node.type}>`;
   }
-  
-  return node.type === 'head' ? '<!-- -->' : element;
+
+  return node.type === 'head' ? '<!---->' : element;
 }
\ No newline at end of file
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 0b624e8c..b5603e3f 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -18,7 +18,10 @@ async function generateBranch(parent, node, depth, scope) {
   }
 
   if (isFalse(node)) {
-    parent.children.push(false);
+    parent.children.push({
+      type: false,
+      attributes: {}
+    });
     return;
   }
 
@@ -124,12 +127,22 @@ async function generateBranch(parent, node, depth, scope) {
       for (let i = 0; i < node.children.length; i++) {
         await generateBranch(branch, node.children[i], [...depth, i], scope);
       }
+      if (node.type === 'head') {
+        for (let i = 0; i < branch.children.length; i++) {
+          if (branch.children[i].attributes) {
+            branch.children[i].attributes['data-n'] = [...depth, i].join('.')
+          }
+        }
+      }
     }
     parent.children.push(branch);
     return;
   }
 
-  parent.children.push(node);
+  parent.children.push({
+    type: 'text',
+    text: node,
+  });
 
 }
 
diff --git a/shared/nodes.js b/shared/nodes.js
index b7490a47..382ba7fd 100644
--- a/shared/nodes.js
+++ b/shared/nodes.js
@@ -17,5 +17,5 @@ export function isFunction(node) {
 }
 
 export function isText(node) {
-  return typeof (node.children) === 'undefined';
+  return node.type === 'text'
 }
\ No newline at end of file
diff --git a/tests/.env b/tests/.env
new file mode 100644
index 00000000..fe46256e
--- /dev/null
+++ b/tests/.env
@@ -0,0 +1,9 @@
+NULLSTACK_SECRETS_KEY = 'secrets'
+NULLSTACK_SECRETS_CAMELIZED_KEY = 'secrets'
+NULLSTACK_SETTINGS_KEY = 'settings'
+NULLSTACK_SETTINGS_CAMELIZED_KEY = 'settings'
+NULLSTACK_PROJECT_NAME='Nullstack Tests'
+NULLSTACK_PROJECT_SHORT_NAME='Nullstack'
+NULLSTACK_PROJECT_DOMAIN='localhost'
+NULLSTACK_WORKER_CDN='http://127.0.0.1:6969'
+NULLSTACK_WORKER_API='http://127.0.0.1:6969'
\ No newline at end of file
diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index e9a1eb35..3495c82a 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -2,6 +2,9 @@
 const CI = !!process.env.CI;
 
 const baseOptions = {
+  launch: {
+    headless: true
+  },
   server: {
     command: 'npm run start',
     port: 6969,
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index 10bb636a..ebdd0415 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -2,7 +2,7 @@ beforeAll(async () => {
   await page.goto('http://localhost:6969/two-way-bindings?page=1');
 });
 
-describe('ContextPage', () => {
+describe('TwoWayBindings', () => {
 
   test('bind adds a name attribute to the element', async () => {
     const element = await page.$('[name="number"]');

From 7e4034cb3bb5876602392601f3763c0b98a0bb01 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Thu, 12 May 2022 19:38:26 -0300
Subject: [PATCH 007/105] :construction: fixing render with element

---
 client/render.js | 8 ++++----
 tests/.env       | 9 ---------
 2 files changed, 4 insertions(+), 13 deletions(-)
 delete mode 100644 tests/.env

diff --git a/client/render.js b/client/render.js
index 30b4ef54..367edff1 100644
--- a/client/render.js
+++ b/client/render.js
@@ -34,15 +34,15 @@ export default function render(node, options) {
       if (node.attributes[name] !== undefined) {
         const eventName = name.substring(2);
         const callback = (event) => {
-          const subject = eventSubjects.get(element)
+          const subject = eventSubjects.get(node.element)
           if (subject.default !== true) {
             event.preventDefault();
           }
           subject[name]({ ...subject, event });
         };
-        element.addEventListener(eventName, callback);
-        eventCallbacks.set(element, callback)
-        eventSubjects.set(element, node.attributes)
+        node.element.addEventListener(eventName, callback);
+        eventCallbacks.set(node.element, callback)
+        eventSubjects.set(node.element, node.attributes)
       }
     } else {
       const type = typeof (node.attributes[name]);
diff --git a/tests/.env b/tests/.env
deleted file mode 100644
index fe46256e..00000000
--- a/tests/.env
+++ /dev/null
@@ -1,9 +0,0 @@
-NULLSTACK_SECRETS_KEY = 'secrets'
-NULLSTACK_SECRETS_CAMELIZED_KEY = 'secrets'
-NULLSTACK_SETTINGS_KEY = 'settings'
-NULLSTACK_SETTINGS_CAMELIZED_KEY = 'settings'
-NULLSTACK_PROJECT_NAME='Nullstack Tests'
-NULLSTACK_PROJECT_SHORT_NAME='Nullstack'
-NULLSTACK_PROJECT_DOMAIN='localhost'
-NULLSTACK_WORKER_CDN='http://127.0.0.1:6969'
-NULLSTACK_WORKER_API='http://127.0.0.1:6969'
\ No newline at end of file

From c9aa16f88dd0fd2ea2602f0e78105d6b5b8a9adf Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 13 May 2022 01:16:51 -0300
Subject: [PATCH 008/105] :white_check_mark: tests for dynamic head

---
 tests/src/Application.njs     |  2 ++
 tests/src/DynamicHead.njs     | 52 +++++++++++++++++++++++++++
 tests/src/DynamicHead.test.js | 67 +++++++++++++++++++++++++++++++++++
 3 files changed, 121 insertions(+)
 create mode 100644 tests/src/DynamicHead.njs
 create mode 100644 tests/src/DynamicHead.test.js

diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index 69823dfb..e865fc8d 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -48,6 +48,7 @@ import TypeScriptExtension from './TypeScriptExtension';
 import JavaScriptExtension from './JavaScriptExtension';
 import HydrateElement from './HydrateElement';
 import OptimizedEvents from './OptimizedEvents';
+import DynamicHead from './DynamicHead'
 
 class Application extends Nullstack {
 
@@ -119,6 +120,7 @@ class Application extends Nullstack {
         <TypeScriptExtension route="/typescript-extension" generic />
         <HydrateElement route="/hydrate-element" />
         <OptimizedEvents route="/optimized-events" />
+        <DynamicHead route="/dynamic-head" />
         <ErrorPage route="*" />
       </main>
     )
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
new file mode 100644
index 00000000..7a919d5b
--- /dev/null
+++ b/tests/src/DynamicHead.njs
@@ -0,0 +1,52 @@
+import Nullstack from 'nullstack';
+
+class DynamicHead extends Nullstack {
+
+  count = 0
+
+  renderHead() {
+    const innerComponent = `[data-inner-component] { color: blue }`
+    return (
+      <style html={innerComponent} data-inner-component />
+    )
+  }
+
+  render() {
+    const color = this.count % 2 === 0 ? 'red' : 'blue'
+    const redBlue = `[data-red-blue] { color: ${color}}`
+    const conditional = `[data-conditional] { color: blue }`
+    const fragment = `[data-fragment] { color: blue }`
+    const conditionalHead = `[data-conditional-head] { color: blue }`
+    const dynamicLength = `[data-dynamic-length] { color: blue }`
+    return (
+      <div>
+        <head>
+          <style html={redBlue} data-count={this.count} data-red-blue />
+          {this.count % 2 === 0 && <style html={conditional} data-conditional />}
+          <>
+            <style html={fragment} data-fragment />
+          </>
+          <Head />
+        </head>
+        {this.count % 2 === 0 &&
+          <head>
+            <style html={conditionalHead} data-conditional-head />
+          </head>
+        }
+        <head>
+          {Array(this.count + 1).fill(<style html={dynamicLength} data-dynamic-length={this.count} />)}
+        </head>
+        <button onclick={{ count: this.count + 1 }} data-increment> inc {this.count} </button>
+        <button onclick={{ count: this.count - 1 }} data-decrement> dec {this.count} </button>
+        <span data-red-blue> data-red-blue </span>
+        <span data-conditional> data-conditional </span>
+        <span data-fragment> data-fragment </span>
+        <span data-conditional-head> data-conditional-head </span>
+        <span data-inner-component> data-inner-component </span>
+      </div>
+    )
+  }
+
+}
+
+export default DynamicHead;
\ No newline at end of file
diff --git a/tests/src/DynamicHead.test.js b/tests/src/DynamicHead.test.js
new file mode 100644
index 00000000..e28015ce
--- /dev/null
+++ b/tests/src/DynamicHead.test.js
@@ -0,0 +1,67 @@
+beforeEach(async () => {
+  await page.goto('http://localhost:6969/dynamic-head');
+});
+
+describe('DynamicHead', () => {
+
+  test('styles can be added inline to the head tag during ssr', async () => {
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-red-blue]")).color')
+    expect(color).toEqual('rgb(255, 0, 0)');
+  });
+
+  test('head styles can be updated dynamicly', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('[data-red-blue][data-count="1"]');
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-red-blue]")).color')
+    expect(color).toEqual('rgb(0, 0, 255)');
+  });
+
+  test('styles can be added from inner components to the head tag', async () => {
+    await page.waitForSelector('[data-inner-component]');
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-inner-component]")).color')
+    expect(color).toEqual('rgb(0, 0, 255)');
+  });
+
+  test('styles can be added from fragments to the head tag', async () => {
+    await page.waitForSelector('[data-fragment]');
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-fragment]")).color')
+    expect(color).toEqual('rgb(0, 0, 255)');
+  });
+
+  test('styles can be conditionaly rendered inside the head tag', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('head [data-conditional]');
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-conditional]")).color')
+    expect(color).toEqual('rgb(0, 0, 255)');
+  });
+
+  test('styles can be rendered inside a conditionaly rendered head tag', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('head [data-conditional-head]');
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-conditional-head]")).color')
+    expect(color).toEqual('rgb(0, 0, 255)');
+  });
+
+  test('the head tag accepts dynamic lists of increasing size', async () => {
+    for (let i = 1; i < 3; i++) {
+      await page.click('[data-increment]');
+      await page.waitForSelector(`[data-dynamic-length="${i}"]`);
+    }
+    const elements = await page.$$('[data-dynamic-length]');
+    expect(elements.length).toEqual(3);
+  });
+
+
+  test('the head tag accepts dynamic lists of decreasing size', async () => {
+    for (let i = 1; i < 3; i++) {
+      await page.click('[data-increment]');
+      await page.waitForSelector(`[data-dynamic-length="${i}"]`);
+    }
+    await page.click('[data-decrement]');
+    await page.waitForSelector('[data-dynamic-length="2"]');
+    await page.waitForTimeout(500)
+    const elements = await page.$$('[data-dynamic-length]');
+    console.log(elements.length)
+    expect(elements.length).toEqual(2);
+  });
+});
\ No newline at end of file

From 4b758a9724db3089b17e4029d21d07259ee3d517 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 13 May 2022 02:35:30 -0300
Subject: [PATCH 009/105] :construction: head ternaries

---
 client/rerender.js            |  2 +-
 tests/src/DynamicHead.njs     | 14 +++++++++++---
 tests/src/DynamicHead.test.js | 29 ++++++++++++++++++++++++-----
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/client/rerender.js b/client/rerender.js
index f80639f0..8787ba08 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -122,7 +122,7 @@ function _rerender(current, next) {
       } else if (isFalse(current.children[i]) && !isFalse(next.children[i])) {
         const nextSelector = render(next.children[i]);
         document.querySelector('head').appendChild(nextSelector)
-      } else {
+      } else if (current.children[i].type) {
         current.children[i].element.remove()
       }
     }
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
index 7a919d5b..78f9b2ef 100644
--- a/tests/src/DynamicHead.njs
+++ b/tests/src/DynamicHead.njs
@@ -14,7 +14,8 @@ class DynamicHead extends Nullstack {
   render() {
     const color = this.count % 2 === 0 ? 'red' : 'blue'
     const redBlue = `[data-red-blue] { color: ${color}}`
-    const conditional = `[data-conditional] { color: blue }`
+    const prerenderConditional = `[data-prerender-conditional] { color: blue }`
+    const rerenderConditional = `[data-rerender-conditional] { color: blue }`
     const fragment = `[data-fragment] { color: blue }`
     const conditionalHead = `[data-conditional-head] { color: blue }`
     const dynamicLength = `[data-dynamic-length] { color: blue }`
@@ -22,7 +23,8 @@ class DynamicHead extends Nullstack {
       <div>
         <head>
           <style html={redBlue} data-count={this.count} data-red-blue />
-          {this.count % 2 === 0 && <style html={conditional} data-conditional />}
+          {this.count === 0 && <style html={prerenderConditional} data-prerender-conditional />}
+          {this.count === 1 && <style html={rerenderConditional} data-rerender-conditional />}
           <>
             <style html={fragment} data-fragment />
           </>
@@ -36,10 +38,16 @@ class DynamicHead extends Nullstack {
         <head>
           {Array(this.count + 1).fill(<style html={dynamicLength} data-dynamic-length={this.count} />)}
         </head>
+        {this.count % 2 === 0 ?
+          <head>
+            <meta name="test" content="nullstack" data-ternary-head />
+          </head> : <span data-ternary-span> not head </span>
+        }
         <button onclick={{ count: this.count + 1 }} data-increment> inc {this.count} </button>
         <button onclick={{ count: this.count - 1 }} data-decrement> dec {this.count} </button>
         <span data-red-blue> data-red-blue </span>
-        <span data-conditional> data-conditional </span>
+        <span data-prerender-conditional> data-prerender-conditional </span>
+        <span data-rerender-conditional> data-rerender-conditional </span>
         <span data-fragment> data-fragment </span>
         <span data-conditional-head> data-conditional-head </span>
         <span data-inner-component> data-inner-component </span>
diff --git a/tests/src/DynamicHead.test.js b/tests/src/DynamicHead.test.js
index e28015ce..ec3b9cdb 100644
--- a/tests/src/DynamicHead.test.js
+++ b/tests/src/DynamicHead.test.js
@@ -28,10 +28,15 @@ describe('DynamicHead', () => {
     expect(color).toEqual('rgb(0, 0, 255)');
   });
 
-  test('styles can be conditionaly rendered inside the head tag', async () => {
+  test('styles can be conditionaly prerendered inside the head tag', async () => {
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-prerender-conditional]")).color')
+    expect(color).toEqual('rgb(0, 0, 255)');
+  });
+
+  test('styles can be conditionaly rerendered inside the head tag', async () => {
     await page.click('[data-increment]');
-    await page.waitForSelector('head [data-conditional]');
-    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-conditional]")).color')
+    await page.waitForSelector('head [data-rerender-conditional]');
+    const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-rerender-conditional]")).color')
     expect(color).toEqual('rgb(0, 0, 255)');
   });
 
@@ -42,6 +47,22 @@ describe('DynamicHead', () => {
     expect(color).toEqual('rgb(0, 0, 255)');
   });
 
+  test('heads can be replaced by ternaries', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('[data-ternary-span]');
+    const element = await page.$('[data-ternary-span]');
+    expect(element).toBeTruthy();
+  });
+
+  test('heads can be inserted by ternaries', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('[data-ternary-span]');
+    await page.click('[data-increment]');
+    await page.waitForSelector('[data-ternary-head]');
+    const element = await page.$('[data-ternary-head]');
+    expect(element).toBeTruthy();
+  });
+
   test('the head tag accepts dynamic lists of increasing size', async () => {
     for (let i = 1; i < 3; i++) {
       await page.click('[data-increment]');
@@ -51,7 +72,6 @@ describe('DynamicHead', () => {
     expect(elements.length).toEqual(3);
   });
 
-
   test('the head tag accepts dynamic lists of decreasing size', async () => {
     for (let i = 1; i < 3; i++) {
       await page.click('[data-increment]');
@@ -61,7 +81,6 @@ describe('DynamicHead', () => {
     await page.waitForSelector('[data-dynamic-length="2"]');
     await page.waitForTimeout(500)
     const elements = await page.$$('[data-dynamic-length]');
-    console.log(elements.length)
     expect(elements.length).toEqual(2);
   });
 });
\ No newline at end of file

From 57480fef01ec7a7796d95fa14fe94014b6847297 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 13 May 2022 02:40:08 -0300
Subject: [PATCH 010/105] :wrench: remove puppeteer default

---
 tests/jest-puppeteer.config.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index 3495c82a..e9a1eb35 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -2,9 +2,6 @@
 const CI = !!process.env.CI;
 
 const baseOptions = {
-  launch: {
-    headless: true
-  },
   server: {
     command: 'npm run start',
     port: 6969,

From b9fe990b1fa196a9c0bbfd8459e8489c80cceb8f Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 13 May 2022 22:25:42 -0300
Subject: [PATCH 011/105] :zap: clean self elements faster

---
 client/client.js                      | 1 +
 client/index.js                       | 1 +
 client/rerender.js                    | 4 ++--
 server/index.js                       | 1 +
 server/render.js                      | 1 -
 tests/src/PersistentComponent.njs     | 6 ++++--
 tests/src/PersistentComponent.test.js | 6 ++++++
 7 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/client.js b/client/client.js
index 2d8668bc..2bfd6c0d 100644
--- a/client/client.js
+++ b/client/client.js
@@ -72,6 +72,7 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
       instance.terminate && await instance.terminate()
       if (instance._self.persistent) {
         instance._self.terminated = true
+        instance._self.element = null
       } else {
         delete client.instances[key]
       }
diff --git a/client/index.js b/client/index.js
index 005f58c6..71ceda8c 100644
--- a/client/index.js
+++ b/client/index.js
@@ -84,6 +84,7 @@ export default class Nullstack {
     initiated: false,
     hydrated: false,
     terminated: false,
+    element: null,
   }
 
   constructor() {
diff --git a/client/rerender.js b/client/rerender.js
index 8787ba08..1f7f7e62 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -160,7 +160,7 @@ function _rerender(current, next) {
         _rerender(current.children[i], next.children[i]);
       }
       for (let i = current.children.length - 1; i >= next.children.length; i--) {
-        selector.removeChild(selector.childNodes[i]);
+        selector.childNodes[i].remove()
       }
     } else {
       for (let i = limit - 1; i > -1; i--) {
@@ -203,7 +203,7 @@ export function hydrate(selector, node) {
       element.appendChild(document.createTextNode(''));
     }
     if (element.COMMENT_NODE === 8 && element.textContent === '#') {
-      selector.removeChild(element);
+      element.remove()
     }
   }
   if (!node.children) return
diff --git a/server/index.js b/server/index.js
index 8c418b5e..8171ef44 100644
--- a/server/index.js
+++ b/server/index.js
@@ -48,6 +48,7 @@ class Nullstack {
     initiated: false,
     hydrated: false,
     terminated: false,
+    element: null,
   }
 
   constructor(scope) {
diff --git a/server/render.js b/server/render.js
index 2d6b19b1..2631ceaa 100644
--- a/server/render.js
+++ b/server/render.js
@@ -29,7 +29,6 @@ export default function render(node, scope) {
   const selfClosing = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr', 'menuitem'].includes(node.type);
   if (selfClosing && node.children.length === 0) {
     element += '/>';
-
   } else {
     element += '>';
     if (node.attributes.html) {
diff --git a/tests/src/PersistentComponent.njs b/tests/src/PersistentComponent.njs
index 5aafb619..2f55f98b 100644
--- a/tests/src/PersistentComponent.njs
+++ b/tests/src/PersistentComponent.njs
@@ -23,7 +23,8 @@ class PersistentComponent extends Nullstack {
     this.count++
   }
 
-  terminate() {
+  terminate(context) {
+    context.terminatedSelf = context.self
     this.count++
   }
 
@@ -31,7 +32,7 @@ class PersistentComponent extends Nullstack {
     return self
   }
 
-  render({ self, instances }) {
+  render({ self, instances, terminatedSelf }) {
     const aCount = instances['PersistentComponent/0-0-33/persistent-component/a']?.count
     const aTerminated = instances['PersistentComponent/0-0-33/persistent-component/a']?.self?.()?.terminated
     return (
@@ -43,6 +44,7 @@ class PersistentComponent extends Nullstack {
         data-persistent={self.persistent}
         data-prerendered={self.prerendered}
         data-a-terminated={aTerminated}
+        data-persistent-self-element-removed={terminatedSelf?.element === null}
       >
         <a href="/persistent-component/a"> a </a>
         <a href="/persistent-component/b"> b </a>
diff --git a/tests/src/PersistentComponent.test.js b/tests/src/PersistentComponent.test.js
index 6a95a3d9..8dfe3914 100644
--- a/tests/src/PersistentComponent.test.js
+++ b/tests/src/PersistentComponent.test.js
@@ -51,6 +51,12 @@ describe('PersistentComponent terminated', () => {
     expect(element).toBeTruthy();
   });
 
+  test('terminated persistent components should not have an element self', async () => {
+    await page.waitForSelector('[data-a-terminated][data-persistent-self-element-removed]');
+    const element = await page.$('[data-a-terminated][data-persistent-self-element-removed]');
+    expect(element).toBeTruthy();
+  });
+
 });
 
 describe('PersistentComponent reinstantiated', () => {

From 49f9b29f65686ee879afc5e14dacf1efd649085f Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 01:04:51 -0300
Subject: [PATCH 012/105] :zap: faster depth

---
 plugins/routable.js    | 16 ++++++++--------
 shared/generateKey.js  | 10 +++++++---
 shared/generateTree.js | 14 +++++++-------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/plugins/routable.js b/plugins/routable.js
index 7f58a5cd..61620db5 100644
--- a/plugins/routable.js
+++ b/plugins/routable.js
@@ -8,15 +8,15 @@ function erase(node) {
 
 function match(node) {
   return (
-    node && 
+    node &&
     node.attributes !== undefined &&
     node.attributes.route !== undefined
   )
 }
 
-function load({router}) {
+function load({ router }) {
   router._routes = {};
-  if(!router._oldSegments) {
+  if (!router._oldSegments) {
     router._oldSegments = {};
     router._newSegments = {};
   } else {
@@ -25,14 +25,14 @@ function load({router}) {
   }
 }
 
-function transform({node, depth, router}) {
-  if(!match(node)) return;
-  const routeDepth = depth.slice(0, -1).join('.');
-  if(router._routes[routeDepth] !== undefined) {
+function transform({ node, depth, router }) {
+  if (!match(node)) return;
+  const routeDepth = depth.slice(0, depth.lastIndexOf('-'))
+  if (router._routes[routeDepth] !== undefined) {
     erase(node);
   } else {
     const params = routeMatches(router.url, node.attributes.route);
-    if(params) {
+    if (params) {
       router._routes[routeDepth] = true;
       router._newSegments[routeDepth] = params;
       Object.assign(router._segments, params);
diff --git a/shared/generateKey.js b/shared/generateKey.js
index 8fdb0f80..72eaa113 100644
--- a/shared/generateKey.js
+++ b/shared/generateKey.js
@@ -1,4 +1,8 @@
-export default function generateKey(node, depth) {
-  if (depth.length === 1) return 'application';
-  return node.type.name + '/' + depth.join('-');
+export default function generateKey(scope, node, depth) {
+  if (node.attributes.key) return node.attributes.key;
+  const prefix = depth.length === 1 ? 'application' : node.type.name + '/' + depth;
+  if (node.attributes.route) {
+    return prefix + (scope.context.environment.mode === 'ssg' ? scope.context.router.path : scope.context.router.url)
+  }
+  return prefix;
 }
\ No newline at end of file
diff --git a/shared/generateTree.js b/shared/generateTree.js
index b5603e3f..12560f02 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -26,7 +26,7 @@ async function generateBranch(parent, node, depth, scope) {
   }
 
   if (isClass(node)) {
-    const key = node.attributes.key ? node.attributes.key : generateKey(node, depth) + (node.attributes.route ? (scope.context.environment.mode === 'ssg' ? scope.context.router.path : scope.context.router.url) : '')
+    const key = generateKey(scope, node, depth)
     if (
       scope.context.environment.client &&
       scope.context.router._changed &&
@@ -34,7 +34,7 @@ async function generateBranch(parent, node, depth, scope) {
       node.attributes.route &&
       scope.context.environment.mode !== 'ssg'
     ) {
-      const routeDepth = depth.slice(0, -1).join('.');
+      const routeDepth = depth.slice(0, depth.lastIndexOf('-'))
       const newSegments = scope.context.router._newSegments[routeDepth];
       if (newSegments) {
         const oldSegments = scope.context.router._oldSegments[routeDepth];
@@ -101,7 +101,7 @@ async function generateBranch(parent, node, depth, scope) {
     }
     node.children = [].concat(children);
     for (let i = 0; i < node.children.length; i++) {
-      await generateBranch(parent, node.children[i], [...depth, i], scope);
+      await generateBranch(parent, node.children[i], depth + '-' + i, scope);
     }
     return;
   }
@@ -111,7 +111,7 @@ async function generateBranch(parent, node, depth, scope) {
     const children = node.type(context);
     node.children = [].concat(children);
     for (let i = 0; i < node.children.length; i++) {
-      await generateBranch(parent, node.children[i], [...depth, i], scope);
+      await generateBranch(parent, node.children[i], depth + '-' + i, scope);
     }
     return;
   }
@@ -125,12 +125,12 @@ async function generateBranch(parent, node, depth, scope) {
     }
     if (node.children) {
       for (let i = 0; i < node.children.length; i++) {
-        await generateBranch(branch, node.children[i], [...depth, i], scope);
+        await generateBranch(branch, node.children[i], depth + '-' + i, scope);
       }
       if (node.type === 'head') {
         for (let i = 0; i < branch.children.length; i++) {
           if (branch.children[i].attributes) {
-            branch.children[i].attributes['data-n'] = [...depth, i].join('.')
+            branch.children[i].attributes['data-n'] = depth + '-' + i
           }
         }
       }
@@ -148,6 +148,6 @@ async function generateBranch(parent, node, depth, scope) {
 
 export default async function generateTree(node, scope) {
   const tree = { type: 'div', attributes: { id: 'application' }, children: [] };
-  await generateBranch(tree, node, [0], scope);
+  await generateBranch(tree, node, '0', scope);
   return tree;
 }
\ No newline at end of file

From e36d877772f0dd4cb2fadecad0e8a456d1ed6870 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 01:35:45 -0300
Subject: [PATCH 013/105] :zap: faster anchorables

---
 client/anchorableNode.js |  2 --
 client/hydrate.js        | 25 +++++++++++++++++++++++++
 client/index.js          |  3 ++-
 client/rerender.js       | 23 +----------------------
 4 files changed, 28 insertions(+), 25 deletions(-)
 create mode 100644 client/hydrate.js

diff --git a/client/anchorableNode.js b/client/anchorableNode.js
index bee172e6..7c4d06a7 100644
--- a/client/anchorableNode.js
+++ b/client/anchorableNode.js
@@ -3,8 +3,6 @@ import router from './router'
 export function anchorableElement(element) {
   const links = element.querySelectorAll('a[href^="/"]:not([target])')
   for (const link of links) {
-    if (link.dataset.nullstack) return
-    link.dataset.nullstack = true
     link.addEventListener('click', (event) => {
       if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
         event.preventDefault()
diff --git a/client/hydrate.js b/client/hydrate.js
new file mode 100644
index 00000000..ef8dc178
--- /dev/null
+++ b/client/hydrate.js
@@ -0,0 +1,25 @@
+import { anchorableElement } from './anchorableNode';
+
+export default function hydrate(selector, node) {
+  if (node?.attributes?.['data-n'] !== undefined) {
+    node.element = document.querySelector(`[data-n="${node.attributes['data-n']}"]`)
+    return
+  }
+  if (node?.attributes?.html) {
+    anchorableElement(selector);
+  }
+  node.element = selector
+  for (const element of selector.childNodes) {
+    if (element.tagName && element.tagName.toLowerCase() == 'textarea' && element.childNodes.length == 0) {
+      element.appendChild(document.createTextNode(''));
+    }
+    if (element.COMMENT_NODE === 8 && element.textContent === '#') {
+      element.remove()
+    }
+  }
+  if (!node.children) return
+  const limit = node.children.length;
+  for (let i = limit - 1; i > -1; i--) {
+    hydrate(selector.childNodes[i], node.children[i])
+  }
+}
\ No newline at end of file
diff --git a/client/index.js b/client/index.js
index 71ceda8c..e4a05afa 100644
--- a/client/index.js
+++ b/client/index.js
@@ -14,7 +14,8 @@ import page from './page';
 import params, { updateParams } from './params';
 import project from './project';
 import render from './render';
-import rerender, { hydrate } from './rerender';
+import rerender from './rerender';
+import hydrate from './hydrate';
 import router from './router';
 import settings from './settings';
 import worker from './worker';
diff --git a/client/rerender.js b/client/rerender.js
index 1f7f7e62..fa4fbc05 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -10,8 +10,8 @@ function updateAttributes(selector, current, next) {
     if (name === 'html') {
       if (next.attributes[name] !== current.attributes[name]) {
         selector.innerHTML = next.attributes[name];
+        anchorableElement(selector);
       }
-      anchorableElement(selector);
     } else if (name === 'checked') {
       if (next.attributes[name] !== selector.value) {
         selector.checked = next.attributes[name];
@@ -190,25 +190,4 @@ function _rerender(current, next) {
 
 export default function rerender() {
   _rerender(client.virtualDom, client.nextVirtualDom)
-}
-
-export function hydrate(selector, node) {
-  if (node?.attributes?.['data-n'] !== undefined) {
-    node.element = document.querySelector(`[data-n="${node.attributes['data-n']}"]`)
-    return
-  }
-  node.element = selector
-  for (const element of selector.childNodes) {
-    if (element.tagName && element.tagName.toLowerCase() == 'textarea' && element.childNodes.length == 0) {
-      element.appendChild(document.createTextNode(''));
-    }
-    if (element.COMMENT_NODE === 8 && element.textContent === '#') {
-      element.remove()
-    }
-  }
-  if (!node.children) return
-  const limit = node.children.length;
-  for (let i = limit - 1; i > -1; i--) {
-    hydrate(selector.childNodes[i], node.children[i])
-  }
 }
\ No newline at end of file

From 7758cca18f173234ca5b671a89ad884c9a503e6d Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 04:06:31 -0300
Subject: [PATCH 014/105] :zap^Cfaster head and textarea

---
 client/hydrate.js                   |  4 ++--
 client/index.js                     |  2 +-
 client/render.js                    |  2 +-
 client/rerender.js                  | 17 ++++++++---------
 shared/generateTree.js              |  3 ++-
 tests/jest-puppeteer.config.js      | 17 +++++++++++------
 tests/src/DynamicHead.njs           |  7 ++++---
 tests/src/DynamicHead.test.js       | 18 +++++++++++++++---
 tests/src/StatefulComponent.njs     |  1 +
 tests/src/StatefulComponent.test.js | 12 ++++++++++++
 10 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/client/hydrate.js b/client/hydrate.js
index ef8dc178..83552b46 100644
--- a/client/hydrate.js
+++ b/client/hydrate.js
@@ -1,8 +1,8 @@
 import { anchorableElement } from './anchorableNode';
 
 export default function hydrate(selector, node) {
-  if (node?.attributes?.['data-n'] !== undefined) {
-    node.element = document.querySelector(`[data-n="${node.attributes['data-n']}"]`)
+  if (node.head) {
+    node.element = document.getElementById(node.attributes.id)
     return
   }
   if (node?.attributes?.html) {
diff --git a/client/index.js b/client/index.js
index e4a05afa..da4027db 100644
--- a/client/index.js
+++ b/client/index.js
@@ -52,7 +52,7 @@ export default class Nullstack {
       updateParams(router.url);
       client.currentInstance = null;
       client.initializer = () => element(Starter);
-      client.selector = document.querySelector('#application');
+      client.selector = document.getElementById('application');
       if (environment.mode === 'spa') {
         scope.plugins = loadPlugins(scope);
         worker.online = navigator.onLine;
diff --git a/client/render.js b/client/render.js
index 367edff1..9867fa54 100644
--- a/client/render.js
+++ b/client/render.js
@@ -29,7 +29,7 @@ export default function render(node, options) {
   for (let name in node.attributes) {
     if (name === 'html') {
       node.element.innerHTML = node.attributes[name];
-      node.attributes['data-n'] === undefined && anchorableElement(node.element);
+      node.head || anchorableElement(node.element);
     } else if (name.startsWith('on')) {
       if (node.attributes[name] !== undefined) {
         const eventName = name.substring(2);
diff --git a/client/rerender.js b/client/rerender.js
index fa4fbc05..98221bc0 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -88,7 +88,7 @@ function _rerender(current, next) {
     const limit = next.children.length;
     for (let i = limit - 1; i > -1; i--) {
       const nextSelector = render(next.children[i]);
-      document.querySelector('head').appendChild(nextSelector)
+      document.head.appendChild(nextSelector)
     }
     return
   }
@@ -96,7 +96,7 @@ function _rerender(current, next) {
   if (current.type === 'head' && next.type !== 'head') {
     const limit = current.children.length;
     for (let i = limit - 1; i > -1; i--) {
-      document.querySelector(`[data-n="${current.children[i].attributes['data-n']}"]`).remove()
+      current.children[i].element.remove()
     }
     return
   }
@@ -106,22 +106,21 @@ function _rerender(current, next) {
     for (let i = limit - 1; i > -1; i--) {
       if (isUndefined(current.children[i]) && !isFalse(next.children[i])) {
         const nextSelector = render(next.children[i]);
-        document.querySelector('head').appendChild(nextSelector)
+        document.head.appendChild(nextSelector)
       } else if (isUndefined(next.children[i]) && !isFalse(current.children[i])) {
         current.children[i].element.remove()
       } else if (!isFalse(current.children[i]) && !isFalse(next.children[i])) {
         if (current.children[i].type === next.children[i].type) {
           next.children[i].element = current.children[i].element
-          const element = document.querySelector(`[data-n="${next.children[i].attributes['data-n']}"]`)
-          updateAttributes(element, current.children[i], next.children[i])
+          updateAttributes(current.children[i].element, current.children[i], next.children[i])
         } else {
-          document.querySelector(`[data-n="${current.children[i].attributes['data-n']}"]`).remove()
+          current.children[i].element.remove()
           const nextSelector = render(next.children[i]);
-          document.querySelector('head').appendChild(nextSelector)
+          document.head.appendChild(nextSelector)
         }
       } else if (isFalse(current.children[i]) && !isFalse(next.children[i])) {
         const nextSelector = render(next.children[i]);
-        document.querySelector('head').appendChild(nextSelector)
+        document.head.appendChild(nextSelector)
       } else if (current.children[i].type) {
         current.children[i].element.remove()
       }
@@ -177,7 +176,7 @@ function _rerender(current, next) {
     }
 
     if (next.type == 'textarea') {
-      selector.value = next.children.reduce((t, c) => t + c.text, '');
+      selector.value = next.children[0].text;
     }
 
     if (next.type == 'select') {
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 12560f02..e401c8b6 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -130,7 +130,8 @@ async function generateBranch(parent, node, depth, scope) {
       if (node.type === 'head') {
         for (let i = 0; i < branch.children.length; i++) {
           if (branch.children[i].attributes) {
-            branch.children[i].attributes['data-n'] = depth + '-' + i
+            branch.children[i].head = true
+            branch.children[i].attributes.id = depth + '-' + i
           }
         }
       }
diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index e9a1eb35..dab2ab01 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -1,7 +1,7 @@
-// get environment variable
-const CI = !!process.env.CI;
-
-const baseOptions = {
+const defaultOptions = {
+  launch: {
+    headless: true,
+  },
   server: {
     command: 'npm run start',
     port: 6969,
@@ -22,7 +22,12 @@ const ciPipelineOptions = {
       '--disable-gpu'
     ]
   },
-  ...baseOptions
+  server: {
+    command: 'npm run start',
+    port: 6969,
+    launchTimeout: 25000
+  },
+  browserContext: 'incognito'
 }
 
-module.exports = CI ? ciPipelineOptions : baseOptions;
\ No newline at end of file
+module.exports = process.env.CI ? ciPipelineOptions : defaultOptions;
\ No newline at end of file
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
index 78f9b2ef..72e72c4f 100644
--- a/tests/src/DynamicHead.njs
+++ b/tests/src/DynamicHead.njs
@@ -3,6 +3,7 @@ import Nullstack from 'nullstack';
 class DynamicHead extends Nullstack {
 
   count = 0
+  negativeCount = 0
 
   renderHead() {
     const innerComponent = `[data-inner-component] { color: blue }`
@@ -30,13 +31,13 @@ class DynamicHead extends Nullstack {
           </>
           <Head />
         </head>
-        {this.count % 2 === 0 &&
+        {this.count === 1 &&
           <head>
             <style html={conditionalHead} data-conditional-head />
           </head>
         }
         <head>
-          {Array(this.count + 1).fill(<style html={dynamicLength} data-dynamic-length={this.count} />)}
+          {Array(this.count + 1 - this.negativeCount).fill(<style html={dynamicLength} data-dynamic-length={this.count} data-negative-count={this.negativeCount === 1} />)}
         </head>
         {this.count % 2 === 0 ?
           <head>
@@ -44,7 +45,7 @@ class DynamicHead extends Nullstack {
           </head> : <span data-ternary-span> not head </span>
         }
         <button onclick={{ count: this.count + 1 }} data-increment> inc {this.count} </button>
-        <button onclick={{ count: this.count - 1 }} data-decrement> dec {this.count} </button>
+        <button onclick={{ negativeCount: this.negativeCount + 1 }} data-decrement> dec {this.count} </button>
         <span data-red-blue> data-red-blue </span>
         <span data-prerender-conditional> data-prerender-conditional </span>
         <span data-rerender-conditional> data-rerender-conditional </span>
diff --git a/tests/src/DynamicHead.test.js b/tests/src/DynamicHead.test.js
index ec3b9cdb..12f48873 100644
--- a/tests/src/DynamicHead.test.js
+++ b/tests/src/DynamicHead.test.js
@@ -78,9 +78,21 @@ describe('DynamicHead', () => {
       await page.waitForSelector(`[data-dynamic-length="${i}"]`);
     }
     await page.click('[data-decrement]');
-    await page.waitForSelector('[data-dynamic-length="2"]');
-    await page.waitForTimeout(500)
-    const elements = await page.$$('[data-dynamic-length]');
+    await page.waitForSelector('[data-negative-count]');
+    const elements = await page.$$('[data-negative-count]');
     expect(elements.length).toEqual(2);
   });
+
+  test('dynamic head elements can update attributes', async () => {
+    for (let i = 1; i < 3; i++) {
+      await page.click('[data-increment]');
+      await page.waitForSelector(`[data-dynamic-length="${i}"]`);
+    }
+    await page.click('[data-decrement]');
+    await page.waitForSelector('[data-negative-count]');
+    await page.click('[data-decrement]');
+    await page.waitForSelector('[data-dynamic-length]:not([data-negative-count])');
+    const element = await page.$('[data-dynamic-length]:not([data-negative-count])');
+    expect(element).toBeTruthy();
+  });
 });
\ No newline at end of file
diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
index 988c625f..fff6a37c 100644
--- a/tests/src/StatefulComponent.njs
+++ b/tests/src/StatefulComponent.njs
@@ -49,6 +49,7 @@ class StatefulComponent extends Nullstack {
         </>
         <button onclick={{ visible: !this.visible }} data-toggle> Toggle </button>
         {this.visible && <button onclick={undefined} data-undefined-event> button </button>}
+        <textarea> {this.count} {this.count} </textarea>
       </form>
     )
   }
diff --git a/tests/src/StatefulComponent.test.js b/tests/src/StatefulComponent.test.js
index d39d4802..0514817f 100644
--- a/tests/src/StatefulComponent.test.js
+++ b/tests/src/StatefulComponent.test.js
@@ -64,4 +64,16 @@ describe('StatefulComponent', () => {
     expect(hasConsoleError).toBeFalsy();
   });
 
+  test('textareas with multiple nodes become a single node', async () => {
+    const text = await page.$eval('textarea', (e) => e.value);
+    expect(text).toMatch(' 1 1 ');
+  });
+
+  test('textareas with multiple nodes can be updated', async () => {
+    await page.click('.increment-by-one');
+    await page.waitForSelector('[data-count="2"]');
+    const text = await page.$eval('textarea', (e) => e.value);
+    expect(text).toMatch(' 2 2 ');
+  });
+
 });
\ No newline at end of file

From 8422f6cd422e0d4b7d02026c4960be4fd88eface Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 04:35:44 -0300
Subject: [PATCH 015/105] :zap: faster branches

---
 shared/generateTree.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/generateTree.js b/shared/generateTree.js
index e401c8b6..3af0779e 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -119,7 +119,7 @@ async function generateBranch(parent, node, depth, scope) {
   if (node.type) {
     const branch = {
       type: node.type,
-      attributes: node.attributes || {},
+      attributes: node.attributes,
       instance: node.instance,
       children: []
     }

From 8395790953b28171bb37ffb63023aca18a74894a Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 05:58:01 -0300
Subject: [PATCH 016/105] :zap: faster element

---
 shared/element.js        | 24 +++++++++++-------------
 shared/serializeParam.js |  2 +-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/shared/element.js b/shared/element.js
index e53a21ca..081ac653 100644
--- a/shared/element.js
+++ b/shared/element.js
@@ -1,25 +1,23 @@
 import fragment from './fragment';
 
-function flattenChildren(children) {
-  children = [].concat.apply([], children).map((child) => {
-    if(child === null || child === undefined) return false;
-    return child;
-  });
-  return [].concat.apply([], children);
+const seed = Object.freeze([])
+
+function normalize(child) {
+  return child ?? false
 }
 
 export default function element(type, props, ...children) {
-  children = flattenChildren(children);
-  if(type === 'textarea') {
+  children = seed.concat(...children).map(normalize)
+  if (type === 'textarea') {
     children = [children.join('')];
   }
-  const attributes = {...props, children};
-  if(type === 'element') {
+  const attributes = { ...props, children };
+  if (type === 'element') {
     type = attributes.tag || fragment;
     delete attributes.tag;
   }
-  if(typeof(type) === 'function' && type.render !== undefined) {
-    return {type, attributes, children: null}
+  if (typeof type === 'function' && type.render !== undefined) {
+    return { type, attributes, children: null }
   }
-  return {type, attributes, children};
+  return { type, attributes, children };
 }
\ No newline at end of file
diff --git a/shared/serializeParam.js b/shared/serializeParam.js
index ef687b0f..941aa0fc 100644
--- a/shared/serializeParam.js
+++ b/shared/serializeParam.js
@@ -1,3 +1,3 @@
 export default function serializeParam(value) {
-  return value && value.toJSON !== undefined ? value.toJSON() : value;
+  return value?.toJSON?.() ?? value;
 }
\ No newline at end of file

From 128a9ce26b6eb571373a1851af73363073aac989 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 15:59:14 -0300
Subject: [PATCH 017/105] :zap: faster compare

---
 client/hydrate.js                    |  5 ++---
 client/instanceProxyHandler.js       |  2 +-
 client/render.js                     |  4 ++--
 client/rerender.js                   |  6 +++---
 loaders/add-source-to-node.js        | 14 +++++++-------
 plugins/bindable.js                  |  4 ++--
 server/instanceProxyHandler.js       |  2 +-
 server/render.js                     |  2 +-
 shared/generateTree.js               |  2 +-
 tests/src/ChildComponent.njs         |  1 -
 tests/src/ErrorPage.njs              |  4 ++--
 tests/src/FullStackLifecycle.test.js |  4 ++--
 12 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/client/hydrate.js b/client/hydrate.js
index 83552b46..040e1d75 100644
--- a/client/hydrate.js
+++ b/client/hydrate.js
@@ -10,10 +10,9 @@ export default function hydrate(selector, node) {
   }
   node.element = selector
   for (const element of selector.childNodes) {
-    if (element.tagName && element.tagName.toLowerCase() == 'textarea' && element.childNodes.length == 0) {
+    if ((element.tagName === 'TEXTAREA' || element.tagName === 'textarea') && element.childNodes.length === 0) {
       element.appendChild(document.createTextNode(''));
-    }
-    if (element.COMMENT_NODE === 8 && element.textContent === '#') {
+    } else if (element.COMMENT_NODE === 8 && element.textContent === '#') {
       element.remove()
     }
   }
diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index 9e79ca11..700dce67 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -6,7 +6,7 @@ const instanceProxyHandler = {
   get(target, name) {
     if (name === '_isProxy') return true;
     if (target.constructor[name]?.name === '_invoke') return target.constructor[name].bind(target.constructor)
-    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof (target[name]) == 'function' && name !== 'constructor') {
+    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof (target[name]) === 'function' && name !== 'constructor') {
       const { [name]: named } = {
         [name]: (args) => {
           const context = generateContext({ ...target._attributes, ...args, self: target._self });
diff --git a/client/render.js b/client/render.js
index 9867fa54..2f5dc8e1 100644
--- a/client/render.js
+++ b/client/render.js
@@ -49,7 +49,7 @@ export default function render(node, options) {
       if (type !== 'object' && type !== 'function') {
         if (name != 'value' && node.attributes[name] === true) {
           node.element.setAttribute(name, '');
-        } else if (name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
+        } else if (name === 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
           node.element.setAttribute(name, node.attributes[name]);
         }
       }
@@ -62,7 +62,7 @@ export default function render(node, options) {
       node.element.appendChild(child);
     }
 
-    if (node.type == 'select') {
+    if (node.type === 'select') {
       node.element.value = node.attributes.value;
     }
   }
diff --git a/client/rerender.js b/client/rerender.js
index 98221bc0..a141825b 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -79,7 +79,7 @@ function _rerender(current, next) {
     }
   }
 
-  if (current.type == 'head' ^ next.type == 'head') {
+  if (current.type === 'head' ^ next.type === 'head') {
     const nextSelector = render(next);
     selector.replaceWith(nextSelector);
   }
@@ -175,11 +175,11 @@ function _rerender(current, next) {
       }
     }
 
-    if (next.type == 'textarea') {
+    if (next.type === 'textarea') {
       selector.value = next.children[0].text;
     }
 
-    if (next.type == 'select') {
+    if (next.type === 'select') {
       selector.value = next.attributes.value;
     }
 
diff --git a/loaders/add-source-to-node.js b/loaders/add-source-to-node.js
index 8a4ebd67..446f06c7 100644
--- a/loaders/add-source-to-node.js
+++ b/loaders/add-source-to-node.js
@@ -1,17 +1,17 @@
-module.exports = function(source) {
+module.exports = function (source) {
   let match;
   let tags = source.split('<');
   source = tags.map((tag) => {
     match = tag.match(/bind\=\{(.*?)\}/);
-    if(match && tag.indexOf('source={') == -1) {
+    if (match && tag.indexOf('source={') === -1) {
       let [a, b] = match[1].split(/\.(?=[^\.]+$)/);
-      if(!b) {
+      if (!b) {
         b = a;
         a = '';
       }
-      if(b.indexOf('[') > -1) {
+      if (b.indexOf('[') > -1) {
         const [ref, index] = b.split('[');
-        if(a) {
+        if (a) {
           a = [a, ref].join('.');
         } else {
           a = ref;
@@ -19,7 +19,7 @@ module.exports = function(source) {
         b = '{' + index.replace(']', '}');
       } else {
         b = `"${b}"`;
-      }   
+      }
       return tag.replace(match[0], `source={${a}} bind=${b}`);
     }
     return tag;
@@ -27,7 +27,7 @@ module.exports = function(source) {
   tags = source.split('<');
   source = tags.map((tag) => {
     match = tag.match(/\ on([a-z]*?)\=\{(.*?)\}/);
-    if(match && tag.indexOf('source={') == -1) {
+    if (match && tag.indexOf('source={') === -1) {
       return tag.substring(0, match.index) + ' source={this}' + tag.substring(match.index);
     }
     return tag;
diff --git a/plugins/bindable.js b/plugins/bindable.js
index 4d1b29bd..3a31d41c 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -10,10 +10,10 @@ function attachEvent(node) {
   }
   const originalEvent = node.attributes[eventName];
   node.attributes[eventName] = ({ event, value }) => {
-    if (valueName == 'checked') {
+    if (valueName === 'checked') {
       target[node.attributes.bind] = event.target[valueName];
     } else if (target[node.attributes.bind] === true || target[node.attributes.bind] === false) {
-      target[node.attributes.bind] = event ? (event.target[valueName] == 'true') : value;
+      target[node.attributes.bind] = event ? (event.target[valueName] === 'true') : value;
     } else if (typeof target[node.attributes.bind] === 'number') {
       target[node.attributes.bind] = parseFloat(event ? event.target[valueName] : value) || 0;
     } else {
diff --git a/server/instanceProxyHandler.js b/server/instanceProxyHandler.js
index 0686147f..92bd79e9 100644
--- a/server/instanceProxyHandler.js
+++ b/server/instanceProxyHandler.js
@@ -1,6 +1,6 @@
 const instanceProxyHandler = {
   get(target, name) {
-    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof (target[name]) == 'function' && name !== 'constructor') {
+    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof (target[name]) === 'function' && name !== 'constructor') {
       return (args) => {
         const context = target._scope.generateContext({ ...target._attributes, ...args, self: target._self });
         return target[name](context);
diff --git a/server/render.js b/server/render.js
index 2631ceaa..f4c80f1b 100644
--- a/server/render.js
+++ b/server/render.js
@@ -19,7 +19,7 @@ export default function render(node, scope) {
       if (type !== 'object' && type !== 'function') {
         if (name != 'value' && node.attributes[name] === true) {
           element += ` ${name}`;
-        } else if (name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
+        } else if (name === 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
           element += ` ${name}="${node.attributes[name]}"`;
         }
       }
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 3af0779e..85f418b9 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -88,7 +88,7 @@ async function generateBranch(parent, node, depth, scope) {
       if (shouldHydrate) {
         shouldLaunch && instance.launch && instance.launch();
         scope.hydrationQueue.push(instance);
-      } else if (instance._self.initiated == true) {
+      } else if (instance._self.initiated === true) {
         instance.update && instance.update();
       }
     }
diff --git a/tests/src/ChildComponent.njs b/tests/src/ChildComponent.njs
index ef9d617f..04078cee 100644
--- a/tests/src/ChildComponent.njs
+++ b/tests/src/ChildComponent.njs
@@ -14,7 +14,6 @@ class ChildComponent extends ParentComponent {
   async hydrate() {
     this.hydratedParentThis = await this.getParentThis();
     this.hydratedChildThis = await this.getChildThis();
-    console.log(this.constructor.name, this.hydratedParentThis, this.hydratedParentThis == this.constructor.name)
     this.bunda = 'true'
   }
 
diff --git a/tests/src/ErrorPage.njs b/tests/src/ErrorPage.njs
index bc05bbc7..ae4cf6ec 100644
--- a/tests/src/ErrorPage.njs
+++ b/tests/src/ErrorPage.njs
@@ -2,8 +2,8 @@ import Nullstack from 'nullstack';
 
 class ErrorPage extends Nullstack {
 
-  async initiate({page, params}) {
-    if(params.status == 500) {
+  async initiate({ page, params }) {
+    if (params.status === '500') {
       this.error.simulate;
     } else {
       page.status = 404;
diff --git a/tests/src/FullStackLifecycle.test.js b/tests/src/FullStackLifecycle.test.js
index f17af82b..a9c436de 100644
--- a/tests/src/FullStackLifecycle.test.js
+++ b/tests/src/FullStackLifecycle.test.js
@@ -54,7 +54,7 @@ describe('FullStackLifecycle ssr', () => {
 
   test('terminate should run', async () => {
     await page.click('a[href="/"]');
-    await page.waitForFunction(() => location.search == '?terminated=true');
+    await page.waitForFunction(() => location.search === '?terminated=true');
     const element = await page.$('.FullStackLifecycle');
     expect(element).toBeFalsy();
   });
@@ -118,7 +118,7 @@ describe('FullStackLifecycle spa', () => {
 
   test('terminate should run', async () => {
     await page.click('a[href="/"]');
-    await page.waitForFunction(() => location.search == '?terminated=true');
+    await page.waitForFunction(() => location.search === '?terminated=true');
     const element = await page.$('.FullStackLifecycle');
     expect(element).toBeFalsy();
   });

From 2a4407cc24712810f55fc473b2530869521bb026 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 17:55:08 -0300
Subject: [PATCH 018/105] :recycle: cleaner ssr dom

---
 server/render.js          | 29 ++++++++++++++++++++++++-----
 tests/src/DynamicHead.njs | 10 +++++-----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/server/render.js b/server/render.js
index f4c80f1b..0f708b5e 100644
--- a/server/render.js
+++ b/server/render.js
@@ -1,14 +1,34 @@
 import { isFalse } from "../shared/nodes";
 import { sanitizeHtml } from "../shared/sanitizeString";
 
-export default function render(node, scope) {
+function isSelfClosing(type) {
+  if (type === 'input') return true;
+  if (type === 'img') return true;
+  if (type === 'link') return true;
+  if (type === 'meta') return true;
+  if (type === 'br') return true;
+  if (type === 'hr') return true;
+  if (type === 'area') return true;
+  if (type === 'base') return true;
+  if (type === 'col') return true;
+  if (type === 'embed') return true;
+  if (type === 'param') return true;
+  if (type === 'source') return true;
+  if (type === 'track') return true;
+  if (type === 'wbr') return true;
+  if (type === 'menuitem') return true;
+  return false;
+}
+
+export default function render(node, scope, next) {
 
   if (isFalse(node)) {
     return "<!---->";
   }
 
   if (node.type === 'text') {
-    return (sanitizeHtml(node.text.toString()) || ' ') + "<!--#-->";
+    const text = node.text === '' ? ' ' : sanitizeHtml(node.text.toString())
+    return next && next.type === 'text' ? text + "<!--#-->" : text
   }
 
   let element = `<${node.type}`;
@@ -26,8 +46,7 @@ export default function render(node, scope) {
     }
   }
 
-  const selfClosing = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr', 'menuitem'].includes(node.type);
-  if (selfClosing && node.children.length === 0) {
+  if (isSelfClosing(node.type)) {
     element += '/>';
   } else {
     element += '>';
@@ -42,7 +61,7 @@ export default function render(node, scope) {
       element += node.children[0].text;
     } else {
       for (let i = 0; i < node.children.length; i++) {
-        const source = render(node.children[i], scope);
+        const source = render(node.children[i], scope, node.children[i + 1]);
         if (node.type === 'head') {
           scope.head += source;
         } else {
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
index 72e72c4f..9b2f1d56 100644
--- a/tests/src/DynamicHead.njs
+++ b/tests/src/DynamicHead.njs
@@ -39,11 +39,6 @@ class DynamicHead extends Nullstack {
         <head>
           {Array(this.count + 1 - this.negativeCount).fill(<style html={dynamicLength} data-dynamic-length={this.count} data-negative-count={this.negativeCount === 1} />)}
         </head>
-        {this.count % 2 === 0 ?
-          <head>
-            <meta name="test" content="nullstack" data-ternary-head />
-          </head> : <span data-ternary-span> not head </span>
-        }
         <button onclick={{ count: this.count + 1 }} data-increment> inc {this.count} </button>
         <button onclick={{ negativeCount: this.negativeCount + 1 }} data-decrement> dec {this.count} </button>
         <span data-red-blue> data-red-blue </span>
@@ -52,6 +47,11 @@ class DynamicHead extends Nullstack {
         <span data-fragment> data-fragment </span>
         <span data-conditional-head> data-conditional-head </span>
         <span data-inner-component> data-inner-component </span>
+        {this.count % 2 === 0 ?
+          <head>
+            <meta name="test" content="nullstack" data-ternary-head />
+          </head> : <span data-ternary-span> not head </span>
+        }
       </div>
     )
   }

From eed098637ff0472a95c288bce26401077a0a4d85 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 18:04:08 -0300
Subject: [PATCH 019/105] :recycle: cleaner typeof

---
 client/instanceProxyHandler.js | 2 +-
 client/render.js               | 2 +-
 client/rerender.js             | 2 +-
 server/index.js                | 2 +-
 server/instanceProxyHandler.js | 2 +-
 server/render.js               | 2 +-
 server/server.js               | 2 +-
 server/template.js             | 2 +-
 shared/nodes.js                | 4 ++--
 tests/src/TwoWayBindings.njs   | 4 ++--
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index 700dce67..a7a10a82 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -6,7 +6,7 @@ const instanceProxyHandler = {
   get(target, name) {
     if (name === '_isProxy') return true;
     if (target.constructor[name]?.name === '_invoke') return target.constructor[name].bind(target.constructor)
-    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof (target[name]) === 'function' && name !== 'constructor') {
+    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof target[name] === 'function' && name !== 'constructor') {
       const { [name]: named } = {
         [name]: (args) => {
           const context = generateContext({ ...target._attributes, ...args, self: target._self });
diff --git a/client/render.js b/client/render.js
index 2f5dc8e1..bc087155 100644
--- a/client/render.js
+++ b/client/render.js
@@ -45,7 +45,7 @@ export default function render(node, options) {
         eventSubjects.set(node.element, node.attributes)
       }
     } else {
-      const type = typeof (node.attributes[name]);
+      const type = typeof node.attributes[name];
       if (type !== 'object' && type !== 'function') {
         if (name != 'value' && node.attributes[name] === true) {
           node.element.setAttribute(name, '');
diff --git a/client/rerender.js b/client/rerender.js
index a141825b..5518c326 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -40,7 +40,7 @@ function updateAttributes(selector, current, next) {
         eventSubjects.set(selector, next.attributes)
       }
     } else {
-      const type = typeof (next.attributes[name]);
+      const type = typeof next.attributes[name];
       if (type !== 'object' && type !== 'function') {
         if (current.attributes[name] !== undefined && next.attributes[name] === undefined) {
           selector.removeAttribute(name);
diff --git a/server/index.js b/server/index.js
index 8171ef44..6afd38d3 100644
--- a/server/index.js
+++ b/server/index.js
@@ -65,7 +65,7 @@ class Nullstack {
   toJSON() {
     const serialized = {};
     for (const name of Object.getOwnPropertyNames(this)) {
-      if (typeof (this[name]) !== 'function' && !name.startsWith('_') && name !== 'attributes') {
+      if (typeof this[name] !== 'function' && !name.startsWith('_') && name !== 'attributes') {
         serialized[name] = this[name];
       }
     }
diff --git a/server/instanceProxyHandler.js b/server/instanceProxyHandler.js
index 92bd79e9..2c41eee0 100644
--- a/server/instanceProxyHandler.js
+++ b/server/instanceProxyHandler.js
@@ -1,6 +1,6 @@
 const instanceProxyHandler = {
   get(target, name) {
-    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof (target[name]) === 'function' && name !== 'constructor') {
+    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof target[name] === 'function' && name !== 'constructor') {
       return (args) => {
         const context = target._scope.generateContext({ ...target._attributes, ...args, self: target._self });
         return target[name](context);
diff --git a/server/render.js b/server/render.js
index 0f708b5e..5ec52c80 100644
--- a/server/render.js
+++ b/server/render.js
@@ -35,7 +35,7 @@ export default function render(node, scope, next) {
 
   for (let name in node.attributes) {
     if (!name.startsWith('on') && name !== 'html') {
-      const type = typeof (node.attributes[name]);
+      const type = typeof node.attributes[name];
       if (type !== 'object' && type !== 'function') {
         if (name != 'value' && node.attributes[name] === true) {
           element += ` ${name}`;
diff --git a/server/server.js b/server/server.js
index 7bb7542e..891adf79 100644
--- a/server/server.js
+++ b/server/server.js
@@ -88,7 +88,7 @@ function createResponse(callback) {
   };
   res.getHeader = (x) => headers[x];
   res.redirect = function (_code, url) {
-    if (typeof (_code) !== 'number') {
+    if (typeof _code !== 'number') {
       code = 301;
       url = _code;
     } else {
diff --git a/server/template.js b/server/template.js
index e2d1f7df..68ed8fdf 100644
--- a/server/template.js
+++ b/server/template.js
@@ -13,7 +13,7 @@ export default function ({ head, body, context, instances }) {
   const serializableContext = {};
   const blacklist = ['scope', 'router', 'page', 'environment', 'settings', 'worker', 'params', 'project', 'instances'];
   for (const [key, value] of Object.entries(context)) {
-    if (!blacklist.includes(key) && typeof (value) !== 'function') {
+    if (!blacklist.includes(key) && typeof value !== 'function') {
       serializableContext[key] = value;
     }
   }
diff --git a/shared/nodes.js b/shared/nodes.js
index 382ba7fd..7dd4fc44 100644
--- a/shared/nodes.js
+++ b/shared/nodes.js
@@ -9,11 +9,11 @@ export function isFalse(node) {
 }
 
 export function isClass(node) {
-  return typeof (node.type) === 'function' && node.type.prototype && typeof (node.type.prototype.render) === 'function';
+  return typeof node.type === 'function' && node.type.prototype && typeof node.type.prototype.render === 'function';
 }
 
 export function isFunction(node) {
-  return typeof (node.type) === 'function';
+  return typeof node.type === 'function';
 }
 
 export function isText(node) {
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index d3b73d41..303aa6b0 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -36,8 +36,8 @@ class TwoWayBindings extends Nullstack {
       <div>
         <input bind={this.zero} />
         <div data-number={this.number} />
-        {!this.boolean && <div data-boolean-type={typeof (this.boolean)} />}
-        {this.number > 1 && <div data-number-type={typeof (this.number)} />}
+        {!this.boolean && <div data-boolean-type={typeof this.boolean} />}
+        {this.number > 1 && <div data-number-type={typeof this.number} />}
         <input bind={this.number} oninput={this.updateCharacter} />
         <textarea bind={this.text} />
         <div data-character={this.character} />

From 83be1ce3805b7972be775fadb96ccdd6043d49ef Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 14 May 2022 18:48:18 -0300
Subject: [PATCH 020/105] :zap: faster text patches

---
 client/rerender.js                  |  4 +--
 tests/src/Application.njs           |  2 ++
 tests/src/Application.test.js       |  2 +-
 tests/src/ContextPage.test.js       |  6 ++---
 tests/src/FalsyNodes.test.js        |  2 +-
 tests/src/Instanceable.test.js      |  2 +-
 tests/src/StatefulComponent.test.js |  2 +-
 tests/src/TextObserver.njs          | 38 +++++++++++++++++++++++++++++
 tests/src/TextObserver.test.js      | 23 +++++++++++++++++
 9 files changed, 72 insertions(+), 9 deletions(-)
 create mode 100644 tests/src/TextObserver.njs
 create mode 100644 tests/src/TextObserver.test.js

diff --git a/client/rerender.js b/client/rerender.js
index 5518c326..6d6fb3b8 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -134,8 +134,8 @@ function _rerender(current, next) {
   }
 
   if (isText(current) && isText(next)) {
-    if (current != next) {
-      selector.nodeValue = next.text;
+    if (current.text !== next.text) {
+      selector.textContent = next.text;
     }
     return;
   }
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index e865fc8d..53ad16d6 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -49,6 +49,7 @@ import JavaScriptExtension from './JavaScriptExtension';
 import HydrateElement from './HydrateElement';
 import OptimizedEvents from './OptimizedEvents';
 import DynamicHead from './DynamicHead'
+import TextObserver from './TextObserver';
 
 class Application extends Nullstack {
 
@@ -121,6 +122,7 @@ class Application extends Nullstack {
         <HydrateElement route="/hydrate-element" />
         <OptimizedEvents route="/optimized-events" />
         <DynamicHead route="/dynamic-head" />
+        <TextObserver route="/text-observer" />
         <ErrorPage route="*" />
       </main>
     )
diff --git a/tests/src/Application.test.js b/tests/src/Application.test.js
index 3b7c1a6d..a21d4db5 100644
--- a/tests/src/Application.test.js
+++ b/tests/src/Application.test.js
@@ -8,7 +8,7 @@ describe('Application', () => {
 
   test('the static start function runs on startup', async () => {
     const h1 = await page.$('h1');
-    const text = await page.evaluate(element => element.innerText, h1);
+    const text = await page.evaluate(element => element.textContent, h1);
     expect(text).toMatch('Nullstack Tests');
   });
 
diff --git a/tests/src/ContextPage.test.js b/tests/src/ContextPage.test.js
index a472eb14..22350018 100644
--- a/tests/src/ContextPage.test.js
+++ b/tests/src/ContextPage.test.js
@@ -60,7 +60,7 @@ describe('ContextPage', () => {
   });
 
   test('the schema key generates a json schema', async () => {
-    const text = await page.$eval('head > script[type="application/ld+json"]', element => element.innerText);
+    const text = await page.$eval('head > script[type="application/ld+json"]', element => element.textContent);
     expect(text).toMatch('{"@type":"WebSite","@id":"#website","name":"Nullstack","url":"https://nullstack.app"}');
   });
 
@@ -78,14 +78,14 @@ describe('ContextPage', () => {
     await page.click('button');
     await page.waitForSelector('[data-event-triggered]');
     const element = await page.$('[data-event-triggered]');
-    expect(element).toBeTruthy();  
+    expect(element).toBeTruthy();
   });
 
   test('the page reacts to a server function status', async () => {
     await page.click('[status="401"]');
     await page.waitForSelector('[data-page-status="401"]');
     const element = await page.$('[data-page-status="401"]');
-    expect(element).toBeTruthy();  
+    expect(element).toBeTruthy();
   });
 
 });
\ No newline at end of file
diff --git a/tests/src/FalsyNodes.test.js b/tests/src/FalsyNodes.test.js
index 6a337339..8c789701 100644
--- a/tests/src/FalsyNodes.test.js
+++ b/tests/src/FalsyNodes.test.js
@@ -15,7 +15,7 @@ describe('Falsy Nodes', () => {
   });
 
   test('Zero nodes should render a text node', async () => {
-    const truth = await page.$eval('[data-zero]', (e) => e.innerText === '0');
+    const truth = await page.$eval('[data-zero]', (e) => e.textContent === '0');
     expect(truth).toBeTruthy();
   });
 
diff --git a/tests/src/Instanceable.test.js b/tests/src/Instanceable.test.js
index 25bd5fc0..1bf46778 100644
--- a/tests/src/Instanceable.test.js
+++ b/tests/src/Instanceable.test.js
@@ -8,7 +8,7 @@ describe('Instanceable', () => {
     const selector = `[data-title="${title}"][data-hydrated]`;
     await page.waitForSelector(selector);
     const p = await page.$(selector);
-    const text = await page.evaluate(element => element.innerText, p);
+    const text = await page.evaluate(element => element.textContent, p);
 
     const expectedValue = new Array(2).fill(value).join(' ');
     expect(text).toBe(expectedValue);
diff --git a/tests/src/StatefulComponent.test.js b/tests/src/StatefulComponent.test.js
index 0514817f..8d1d38f2 100644
--- a/tests/src/StatefulComponent.test.js
+++ b/tests/src/StatefulComponent.test.js
@@ -50,7 +50,7 @@ describe('StatefulComponent', () => {
   test('empty strings generate nodes', async () => {
     await page.click('[data-fill]');
     await page.waitForSelector('[data-empty="not"]');
-    const text = await page.$eval('[data-empty="not"]', (e) => e.innerText);
+    const text = await page.$eval('[data-empty="not"]', (e) => e.textContent);
     expect(text).toMatch('not');
   });
 
diff --git a/tests/src/TextObserver.njs b/tests/src/TextObserver.njs
new file mode 100644
index 00000000..91f8e061
--- /dev/null
+++ b/tests/src/TextObserver.njs
@@ -0,0 +1,38 @@
+import Nullstack from 'nullstack';
+
+class TextObserver extends Nullstack {
+
+  unmutatedText = 'default'
+  mutatedText = 'default'
+
+  hydrate() {
+    const config = {
+      characterData: true,
+      childList: true,
+      subtree: true,
+    };
+    const observer = new MutationObserver((mutationsList, observer) => {
+      for (const mutation of mutationsList) {
+        mutation.target.parentElement.dataset.mutated = true
+      }
+      observer.disconnect();
+    });
+    for (const element of [...document.querySelectorAll('[data-text-observer]')]) {
+      observer.observe(element, config);
+    }
+    this.mutatedText = 'mutated'
+  }
+
+  render() {
+    return (
+      <div>
+        <span data-text-observer data-regular-text> regular text </span>
+        <span data-text-observer data-unmutated-text> {this.unmutatedText} </span>
+        <span data-text-observer data-mutated-text onclick={{ mutatedText: 'hi' }}> {this.mutatedText} </span>
+      </div>
+    )
+  }
+
+}
+
+export default TextObserver;
\ No newline at end of file
diff --git a/tests/src/TextObserver.test.js b/tests/src/TextObserver.test.js
new file mode 100644
index 00000000..e2f0f31f
--- /dev/null
+++ b/tests/src/TextObserver.test.js
@@ -0,0 +1,23 @@
+beforeAll(async () => {
+  await page.goto('http://localhost:6969/text-observer');
+  await page.waitForSelector('[data-mutated]')
+});
+
+describe('TextObserver', () => {
+
+  test('regular text should never be mutated', async () => {
+    const element = await page.$('[data-regular-text]:not([data-mutated])');
+    expect(element).toBeTruthy();
+  });
+
+  test('unmutated text should not be mutated', async () => {
+    const element = await page.$('[data-unmutated-text]:not([data-mutated])');
+    expect(element).toBeTruthy();
+  });
+
+  test('mutated text should be mutated and redundancy should be redundant', async () => {
+    const element = await page.$('[data-mutated-text][data-mutated]');
+    expect(element).toBeTruthy();
+  });
+
+});
\ No newline at end of file

From b68d3a0d83a3d36fab9a829caaa6bcb8af09ad32 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 03:42:42 -0300
Subject: [PATCH 021/105] :construction: body fragment and array attributes

---
 client/client.js               |  4 ++
 client/events.js               | 18 ++++++++-
 client/render.js               | 10 +----
 client/rerender.js             | 73 +++++++++++++++++++---------------
 plugins/datable.js             | 29 ++++++++------
 plugins/objectable.js          | 43 ++++++++++++++------
 server/instanceProxyHandler.js |  2 +-
 server/prerender.js            |  3 +-
 server/render.js               | 14 +------
 server/renderAttributes.js     | 24 +++++++++++
 server/template.js             |  5 ++-
 shared/generateTree.js         | 31 ++++++++++++++-
 shared/generateTruthyString.js |  5 +++
 shared/plugins.js              | 12 ++++--
 tests/src/Application.njs      |  8 +++-
 tests/src/ArrayAttributes.njs  | 38 ++++++++++++++++++
 tests/src/BodyFragment.njs     | 38 ++++++++++++++++++
 17 files changed, 270 insertions(+), 87 deletions(-)
 create mode 100644 server/renderAttributes.js
 create mode 100644 shared/generateTruthyString.js
 create mode 100644 tests/src/ArrayAttributes.njs
 create mode 100644 tests/src/BodyFragment.njs

diff --git a/client/client.js b/client/client.js
index 2bfd6c0d..4d253568 100644
--- a/client/client.js
+++ b/client/client.js
@@ -19,6 +19,8 @@ client.selector = null
 client.events = {}
 client.generateContext = generateContext
 client.renderQueue = null
+client.currentBody = {}
+client.nextBody = {}
 
 client.update = async function update() {
   if (client.initialized) {
@@ -33,6 +35,8 @@ client.update = async function update() {
       rerender()
       client.virtualDom = client.nextVirtualDom
       client.nextVirtualDom = null
+      client.currentBody = client.nextBody
+      client.nextBody = {}
       client.processLifecycleQueues()
     }, 16)
   }
diff --git a/client/events.js b/client/events.js
index f180c74d..c0d8e4de 100644
--- a/client/events.js
+++ b/client/events.js
@@ -1,2 +1,18 @@
 export const eventCallbacks = new WeakMap()
-export const eventSubjects = new WeakMap()
\ No newline at end of file
+export const eventSubjects = new WeakMap()
+
+export function generateCallback(selector, name) {
+  return function eventCallback(event) {
+    const subject = eventSubjects.get(selector)
+    if (subject.default !== true) {
+      event.preventDefault();
+    }
+    if (Array.isArray(subject[name])) {
+      for (const subcallback of subject[name]) {
+        subcallback({ ...subject, event });
+      }
+    } else {
+      subject[name]({ ...subject, event });
+    }
+  }
+};
\ No newline at end of file
diff --git a/client/render.js b/client/render.js
index bc087155..08db2d9a 100644
--- a/client/render.js
+++ b/client/render.js
@@ -1,6 +1,6 @@
 import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
-import { eventCallbacks, eventSubjects } from './events'
+import { eventCallbacks, eventSubjects, generateCallback } from './events'
 
 export default function render(node, options) {
 
@@ -33,13 +33,7 @@ export default function render(node, options) {
     } else if (name.startsWith('on')) {
       if (node.attributes[name] !== undefined) {
         const eventName = name.substring(2);
-        const callback = (event) => {
-          const subject = eventSubjects.get(node.element)
-          if (subject.default !== true) {
-            event.preventDefault();
-          }
-          subject[name]({ ...subject, event });
-        };
+        const callback = generateCallback(node.element, name)
         node.element.addEventListener(eventName, callback);
         eventCallbacks.set(node.element, callback)
         eventSubjects.set(node.element, node.attributes)
diff --git a/client/rerender.js b/client/rerender.js
index 6d6fb3b8..79c72f3b 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -2,55 +2,65 @@ import { isUndefined, isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import client from './client';
 import render from './render';
-import { eventCallbacks, eventSubjects } from './events'
+import { generateCallback, eventCallbacks, eventSubjects } from './events'
+import generateTruthyString from '../shared/generateTruthyString';
 
-function updateAttributes(selector, current, next) {
-  const attributeNames = Object.keys({ ...current.attributes, ...next.attributes });
+const head = document.head
+const body = document.body
+
+function updateAttributes(selector, currentAttributes, nextAttributes) {
+  const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
     if (name === 'html') {
-      if (next.attributes[name] !== current.attributes[name]) {
-        selector.innerHTML = next.attributes[name];
+      if (nextAttributes[name] !== currentAttributes[name]) {
+        selector.innerHTML = nextAttributes[name];
         anchorableElement(selector);
       }
     } else if (name === 'checked') {
-      if (next.attributes[name] !== selector.value) {
-        selector.checked = next.attributes[name];
+      if (nextAttributes[name] !== selector.value) {
+        selector.checked = nextAttributes[name];
       }
     } else if (name === 'value') {
-      if (next.attributes[name] !== selector.value) {
-        selector.value = next.attributes[name];
+      if (nextAttributes[name] !== selector.value) {
+        selector.value = nextAttributes[name];
       }
     } else if (name.startsWith('on')) {
       const eventName = name.substring(2);
-      if (eventCallbacks.has(selector) && !next.attributes[name]) {
+      if (eventCallbacks.has(selector) && !nextAttributes[name]) {
         selector.removeEventListener(eventName, eventCallbacks.get(selector));
       }
-      if (next.attributes[name]) {
+      if (nextAttributes[name]) {
         if (!eventCallbacks.has(selector)) {
-          const callback = (event) => {
-            const subject = eventSubjects.get(selector)
-            if (subject.default !== true) {
-              event.preventDefault();
-            }
-            subject[name]({ ...subject, event });
-          };
+          const callback = generateCallback(selector, name)
           selector.addEventListener(eventName, callback);
           eventCallbacks.set(selector, callback)
         }
-        eventSubjects.set(selector, next.attributes)
+        eventSubjects.set(selector, nextAttributes)
       }
     } else {
-      const type = typeof next.attributes[name];
+      let currentValue;
+      if ((name === 'class' || name === 'style') && Array.isArray(currentAttributes[name])) {
+        currentValue = generateTruthyString(currentAttributes[name])
+      } else {
+        currentValue = currentAttributes[name]
+      }
+      let nextValue;
+      if ((name === 'class' || name === 'style') && Array.isArray(nextAttributes[name])) {
+        nextValue = generateTruthyString(nextAttributes[name])
+      } else {
+        nextValue = nextAttributes[name]
+      }
+      const type = typeof nextValue;
       if (type !== 'object' && type !== 'function') {
-        if (current.attributes[name] !== undefined && next.attributes[name] === undefined) {
+        if (currentValue !== undefined && nextValue === undefined) {
           selector.removeAttribute(name);
-        } else if (current.attributes[name] !== next.attributes[name]) {
-          if (name != 'value' && next.attributes[name] === false || next.attributes[name] === null || next.attributes[name] === undefined) {
+        } else if (currentValue !== nextValue) {
+          if (name != 'value' && nextValue === false || nextValue === null || nextValue === undefined) {
             selector.removeAttribute(name);
-          } else if (name != 'value' && next.attributes[name] === true) {
+          } else if (name != 'value' && nextValue === true) {
             selector.setAttribute(name, '');
           } else {
-            selector.setAttribute(name, next.attributes[name]);
+            selector.setAttribute(name, nextValue);
           }
         }
       }
@@ -88,7 +98,7 @@ function _rerender(current, next) {
     const limit = next.children.length;
     for (let i = limit - 1; i > -1; i--) {
       const nextSelector = render(next.children[i]);
-      document.head.appendChild(nextSelector)
+      head.appendChild(nextSelector)
     }
     return
   }
@@ -106,21 +116,21 @@ function _rerender(current, next) {
     for (let i = limit - 1; i > -1; i--) {
       if (isUndefined(current.children[i]) && !isFalse(next.children[i])) {
         const nextSelector = render(next.children[i]);
-        document.head.appendChild(nextSelector)
+        head.appendChild(nextSelector)
       } else if (isUndefined(next.children[i]) && !isFalse(current.children[i])) {
         current.children[i].element.remove()
       } else if (!isFalse(current.children[i]) && !isFalse(next.children[i])) {
         if (current.children[i].type === next.children[i].type) {
           next.children[i].element = current.children[i].element
-          updateAttributes(current.children[i].element, current.children[i], next.children[i])
+          updateAttributes(current.children[i].element, current.children[i].attributes, next.children[i].attributes)
         } else {
           current.children[i].element.remove()
           const nextSelector = render(next.children[i]);
-          document.head.appendChild(nextSelector)
+          head.appendChild(nextSelector)
         }
       } else if (isFalse(current.children[i]) && !isFalse(next.children[i])) {
         const nextSelector = render(next.children[i]);
-        document.head.appendChild(nextSelector)
+        head.appendChild(nextSelector)
       } else if (current.children[i].type) {
         current.children[i].element.remove()
       }
@@ -141,7 +151,7 @@ function _rerender(current, next) {
   }
 
   if (current.type === next.type) {
-    updateAttributes(selector, current, next)
+    updateAttributes(selector, current.attributes, next.attributes)
 
     if (next.attributes.html) return;
 
@@ -189,4 +199,5 @@ function _rerender(current, next) {
 
 export default function rerender() {
   _rerender(client.virtualDom, client.nextVirtualDom)
+  updateAttributes(body, client.currentBody, client.nextBody)
 }
\ No newline at end of file
diff --git a/plugins/datable.js b/plugins/datable.js
index a4a78e61..d8937d07 100644
--- a/plugins/datable.js
+++ b/plugins/datable.js
@@ -1,25 +1,30 @@
-import {camelize, kebabize} from '../shared/string';
+import { camelize, kebabize } from '../shared/string';
 
 function match(node) {
   return (
-    node && 
-    node.attributes !== undefined
+    node &&
+    node.attributes !== undefined &&
+    node.type !== 'body'
   )
 }
 
-function transform({node}) {
-  if(!match(node)) return;
-  node.attributes.data = node.attributes.data || {};
-  for(const attribute in node.attributes) {
-    if(attribute.startsWith('data-')) {
+function transform({ node }) {
+  if (!match(node)) return;
+  transformBody(node.attributes)
+}
+
+function transformBody(attributes) {
+  attributes.data = attributes.data || {};
+  for (const attribute in attributes) {
+    if (attribute.startsWith('data-')) {
       const key = camelize(attribute.slice(5));
-      node.attributes.data[key] = node.attributes[attribute];
+      attributes.data[key] = attributes[attribute];
     }
   }
-  for(const key in node.attributes.data) {
+  for (const key in attributes.data) {
     const attribute = 'data-' + kebabize(key);
-    node.attributes[attribute] = node.attributes.data[key];
+    attributes[attribute] = attributes.data[key];
   }
 }
 
-export default { transform, client: true, server: true }
\ No newline at end of file
+export default { transform, transformBody, client: true, server: true }
\ No newline at end of file
diff --git a/plugins/objectable.js b/plugins/objectable.js
index bc6265f2..d278f7e5 100644
--- a/plugins/objectable.js
+++ b/plugins/objectable.js
@@ -1,23 +1,40 @@
-
-
 function match(node) {
   return (
     node &&
-    node.attributes !== undefined
+    node.attributes !== undefined &&
+    node.type !== 'body'
   )
 }
 
-function transform({node}) {
-  if(!match(node)) return;
-  for(const attribute in node.attributes) {
-    if(attribute.startsWith('on') && typeof(node.attributes[attribute]) === 'object') {
-      const target = node.attributes.source;
-      const object = node.attributes[attribute];
-      node.attributes[attribute] = (function() {
-        Object.assign(target, object);
-      }).bind(target);
+function transform({ node }) {
+  if (!match(node)) return;
+  transformBody(node.attributes)
+}
+
+function transformBody(attributes) {
+  for (const attribute in attributes) {
+    if (attribute.startsWith('on') && attributes[attribute]) {
+      const target = attributes.source;
+      if (Array.isArray(attributes[attribute])) {
+        const callbacks = attributes[attribute]
+        for (let i = 0; i < callbacks.length; i++) {
+          const callback = callbacks[i]
+          if (typeof callback === 'object') {
+            const object = callbacks[i];
+            callbacks[i] = (function eventCallback() {
+              Object.assign(target, object);
+            }).bind(target)
+          }
+        }
+        attributes[attribute] = callbacks;
+      } else if (typeof attributes[attribute] === 'object') {
+        const object = attributes[attribute];
+        attributes[attribute] = (function eventCallback() {
+          Object.assign(target, object);
+        }).bind(target)
+      }
     }
   }
 }
 
-export default { transform, client: true }
\ No newline at end of file
+export default { transform, transformBody, client: true }
\ No newline at end of file
diff --git a/server/instanceProxyHandler.js b/server/instanceProxyHandler.js
index 2c41eee0..84d06c8a 100644
--- a/server/instanceProxyHandler.js
+++ b/server/instanceProxyHandler.js
@@ -1,6 +1,6 @@
 const instanceProxyHandler = {
   get(target, name) {
-    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof target[name] === 'function' && name !== 'constructor') {
+    if (!target[name]?.name?.startsWith('_') && !name?.startsWith?.('_') && typeof target[name] === 'function' && name !== 'constructor') {
       return (args) => {
         const context = target._scope.generateContext({ ...target._attributes, ...args, self: target._self });
         return target[name](context);
diff --git a/server/prerender.js b/server/prerender.js
index f8a3513a..b7dd3a98 100644
--- a/server/prerender.js
+++ b/server/prerender.js
@@ -31,7 +31,7 @@ export async function prerender(request, response) {
   scope.body = '';
   scope.context = context;
   scope.generateContext = generateContext(context);
-
+  scope.nextBody = {}
   scope.plugins = loadPlugins(scope);
 
   try {
@@ -45,6 +45,7 @@ export async function prerender(request, response) {
     context.page.status = 500;
   } finally {
     if (context.page.status !== 200) {
+      scope.nextBody = {}
       for (const key in context.router._routes) {
         delete context.router._routes[key];
       }
diff --git a/server/render.js b/server/render.js
index 5ec52c80..e126b84b 100644
--- a/server/render.js
+++ b/server/render.js
@@ -1,5 +1,6 @@
 import { isFalse } from "../shared/nodes";
 import { sanitizeHtml } from "../shared/sanitizeString";
+import renderAttributes from "./renderAttributes";
 
 function isSelfClosing(type) {
   if (type === 'input') return true;
@@ -33,18 +34,7 @@ export default function render(node, scope, next) {
 
   let element = `<${node.type}`;
 
-  for (let name in node.attributes) {
-    if (!name.startsWith('on') && name !== 'html') {
-      const type = typeof node.attributes[name];
-      if (type !== 'object' && type !== 'function') {
-        if (name != 'value' && node.attributes[name] === true) {
-          element += ` ${name}`;
-        } else if (name === 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
-          element += ` ${name}="${node.attributes[name]}"`;
-        }
-      }
-    }
-  }
+  element += renderAttributes(node.attributes)
 
   if (isSelfClosing(node.type)) {
     element += '/>';
diff --git a/server/renderAttributes.js b/server/renderAttributes.js
new file mode 100644
index 00000000..b678d3fa
--- /dev/null
+++ b/server/renderAttributes.js
@@ -0,0 +1,24 @@
+import generateTruthyString from "../shared/generateTruthyString";
+
+export default function renderAttributes(attributes) {
+  let element = ''
+  for (let name in attributes) {
+    if (!name.startsWith('on') && name !== 'html') {
+      let attribute = attributes[name];
+      if ((name === 'class' || name === 'style') && Array.isArray(attributes[name])) {
+        attribute = generateTruthyString(attributes[name]);
+      } else {
+        attribute = attributes[name];
+      }
+      const type = typeof attribute;
+      if (type !== 'object' && type !== 'function') {
+        if (name != 'value' && attribute === true) {
+          element += ` ${name}`;
+        } else if (name === 'value' || (attribute !== false && attribute !== null && attribute !== undefined)) {
+          element += ` ${name}="${attribute}"`;
+        }
+      }
+    }
+  }
+  return element
+}
\ No newline at end of file
diff --git a/server/template.js b/server/template.js
index 68ed8fdf..12e0b45f 100644
--- a/server/template.js
+++ b/server/template.js
@@ -4,8 +4,9 @@ import integrities from './integrities';
 import { absolute, cdn, cdnOrAbsolute } from './links';
 import project from './project';
 import settings from './settings';
+import renderAttributes from './renderAttributes';
 
-export default function ({ head, body, context, instances }) {
+export default function ({ head, body, nextBody, context, instances }) {
   const timestamp = environment.development ? `&timestamp=${+new Date()}` : ''
   const { page, router, worker, params } = context;
   const canonical = absolute(page.canonical || router.url);
@@ -61,7 +62,7 @@ export default function ({ head, body, context, instances }) {
     ${head.split('<!--#-->').join('')}
     <script src="${cdn(`/client.js?fingerprint=${environment.key}${timestamp}`)}" integrity="${integrities['client.js'] || ''}" defer crossorigin="anonymous"></script>
   </head>
-  <body>
+  <body ${renderAttributes(nextBody)}>
     ${environment.mode === 'spa' ? '<div id="application"></div>' : body}
   </body>
 </html>`)
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 85f418b9..5f040572 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -1,6 +1,9 @@
+import objectable from '../plugins/objectable'
+import datable from '../plugins/datable'
 import generateKey from '../shared/generateKey';
 import { isClass, isFalse, isFunction, isUndefined } from '../shared/nodes';
-import { transformNodes } from './plugins';
+import fragment from './fragment';
+import { transformBody, transformNodes } from './plugins';
 
 async function generateBranch(parent, node, depth, scope) {
 
@@ -106,6 +109,31 @@ async function generateBranch(parent, node, depth, scope) {
     return;
   }
 
+  if (node.type === 'body') {
+    node.type = fragment
+    for (const attribute in node.attributes) {
+      if (attribute === 'children' || attribute.startsWith('_')) continue;
+      if (attribute === 'class' || attribute === 'style') {
+        if (!scope.nextBody[attribute]) {
+          scope.nextBody[attribute] = []
+        }
+        scope.nextBody[attribute].push(node.attributes[attribute])
+      } else if (attribute.startsWith('on')) {
+        if (scope.context.environment.server) continue
+        if (!scope.nextBody[attribute]) {
+          scope.nextBody[attribute] = []
+        }
+        if (Array.isArray(node.attributes[attribute])) {
+          scope.nextBody[attribute].push(...node.attributes[attribute])
+        } else {
+          scope.nextBody[attribute].push(node.attributes[attribute])
+        }
+      } else {
+        scope.nextBody[attribute] = node.attributes[attribute]
+      }
+    }
+  }
+
   if (isFunction(node)) {
     const context = node.type.name ? scope.generateContext(node.attributes) : node.attributes;
     const children = node.type(context);
@@ -150,5 +178,6 @@ async function generateBranch(parent, node, depth, scope) {
 export default async function generateTree(node, scope) {
   const tree = { type: 'div', attributes: { id: 'application' }, children: [] };
   await generateBranch(tree, node, '0', scope);
+  transformBody(scope.nextBody)
   return tree;
 }
\ No newline at end of file
diff --git a/shared/generateTruthyString.js b/shared/generateTruthyString.js
new file mode 100644
index 00000000..6978dcdf
--- /dev/null
+++ b/shared/generateTruthyString.js
@@ -0,0 +1,5 @@
+const seed = Object.freeze([])
+
+export default function generateTruthyString(elements) {
+  return seed.concat(...elements).filter(Boolean).join(' ')
+}
\ No newline at end of file
diff --git a/shared/plugins.js b/shared/plugins.js
index 5b9c702e..e6966319 100644
--- a/shared/plugins.js
+++ b/shared/plugins.js
@@ -15,13 +15,19 @@ let plugins = [
 ];
 
 export function transformNodes(scope, node, depth) {
-  for(const plugin of plugins) {
-    plugin.transform({...scope.context, node, depth});
+  for (const plugin of plugins) {
+    plugin.transform({ ...scope.context, node, depth });
+  }
+}
+
+export function transformBody(attributes) {
+  for (const plugin of plugins) {
+    plugin.transformBody && plugin.transformBody(attributes);
   }
 }
 
 export function loadPlugins(scope) {
-  for(const plugin of plugins) {
+  for (const plugin of plugins) {
     plugin.load && plugin.load(scope.context)
   }
   return plugins;
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index 53ad16d6..b1ae62e7 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -50,6 +50,8 @@ import HydrateElement from './HydrateElement';
 import OptimizedEvents from './OptimizedEvents';
 import DynamicHead from './DynamicHead'
 import TextObserver from './TextObserver';
+import BodyFragment from './BodyFragment';
+import ArrayAttributes from './ArrayAttributes';
 
 class Application extends Nullstack {
 
@@ -63,7 +65,7 @@ class Application extends Nullstack {
 
   render({ project, page, environment }) {
     return (
-      <main data-window={WindowDependency.key}>
+      <body data-window={WindowDependency.key}>
         <h1> {project.name} </h1>
         {page.status !== 200 && <div route="*" data-page-status={page.status}></div>}
         <div route="/">
@@ -123,8 +125,10 @@ class Application extends Nullstack {
         <OptimizedEvents route="/optimized-events" />
         <DynamicHead route="/dynamic-head" />
         <TextObserver route="/text-observer" />
+        <BodyFragment route="/body-fragment" />
+        <ArrayAttributes route="/array-attributes" />
         <ErrorPage route="*" />
-      </main>
+      </body>
     )
   }
 
diff --git a/tests/src/ArrayAttributes.njs b/tests/src/ArrayAttributes.njs
new file mode 100644
index 00000000..e4e19e2e
--- /dev/null
+++ b/tests/src/ArrayAttributes.njs
@@ -0,0 +1,38 @@
+import Nullstack from 'nullstack';
+
+class ArrayAttributes extends Nullstack {
+
+  classes = 'c'
+  styles = 'color: black;'
+  count = 1
+  objected = false
+
+  increment() {
+    this.count++
+  }
+
+  double() {
+    this.count += this.count
+  }
+
+  render() {
+    return (
+      <div data-count={this.count} data-objected={this.objected}>
+        <span class={this.classes}> {JSON.stringify(this.classes)} </span>
+        <span style={this.styles}> {JSON.stringify(this.styles)} </span>
+        <button onclick={{ classes: 'd' }} data-d>d</button>
+        <button onclick={{ classes: ['a', 'b'] }} data-ab>a b</button>
+        <button onclick={{ classes: ['a', 'b', 'c'] }} data-abc>a b c</button>
+        <button onclick={{ classes: ['e', false && 'f', undefined && 'f', null && 'f', 0 && 'f'] }} data-e>e</button>
+        <button onclick={{ styles: 'color: purple;' }} data-purple>purple</button>
+        <button onclick={{ styles: ['color: pink;', 'background-color: blue;'] }} data-pink-blue>pink-blue</button>
+        <button onclick={{ styles: ['color: pink;', 'background-color: blue; border: 1px solid red;'] }} data-pink-blue-red>pink-blue-red</button>
+        <button onclick={{ styles: ['color: green;', false && 'background-color: blue;', undefined && 'background-color: blue;', null && 'background-color: blue;', 0 && 'background-color: blue;'] }} data-green>green</button>
+        <button onclick={[this.increment, this.double, { objected: true }]}>{this.count}</button>
+      </div>
+    )
+  }
+
+}
+
+export default ArrayAttributes;
\ No newline at end of file
diff --git a/tests/src/BodyFragment.njs b/tests/src/BodyFragment.njs
new file mode 100644
index 00000000..e78d3495
--- /dev/null
+++ b/tests/src/BodyFragment.njs
@@ -0,0 +1,38 @@
+import Nullstack from 'nullstack';
+
+class BodyFragment extends Nullstack {
+
+  count = 0
+  visible = false
+  objected = false
+
+  increment() {
+    this.count++
+  }
+
+  reveal() {
+    this.visible = !this.visible
+  }
+
+  countDataKeys({ data }) {
+    this.hasDataKeys = Object.keys(data).length > 0
+  }
+
+  render() {
+    return (
+      <body data-chars="a" onclick={[this.increment, this.countDataKeys, { objected: true }]} data-count={this.count} class={["class-one", "class-two", false]} style="background-color: black;" data-keys={this.hasDataKeys}>
+        <body data-chars="b" data-numbers="0" data-count={this.count} onclick={this.reveal} class="class-one class-three" style="color: white;" data-objected={this.objected}>
+          BodyFragment
+        </body>
+        {this.visible &&
+          <body data-visible data-has-visible={this.hasDataVisible}>
+            BodyFragment
+          </body>
+        }
+      </body>
+    )
+  }
+
+}
+
+export default BodyFragment;
\ No newline at end of file

From ad763770797797553631d10b6234dbd55f5c8748 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 04:29:09 -0300
Subject: [PATCH 022/105] :bug: fix service worker split

---
 server/worker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/worker.js b/server/worker.js
index 3cc0233d..922af9a5 100644
--- a/server/worker.js
+++ b/server/worker.js
@@ -72,7 +72,7 @@ export function generateServiceWorker() {
   if (original) {
     sources.push(original);
   }
-  files['service-worker.js'] = sources.join(`\n\n`).replace(`"{{BUNDLE}}"`, scripts.join(', \n'));;
+  files['service-worker.js'] = sources.join(`\n\n`).replace(`"{{BUNDLE}}",`, scripts.join(', \n'));
   return files['service-worker.js'];
 }
 

From 04196c89d6564efa2615e5042c9cd246c2231d35 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 16:43:05 -0300
Subject: [PATCH 023/105] :zap: faster object events

---
 client/events.js       | 12 ++++++++++--
 plugins/objectable.js  | 40 ----------------------------------------
 shared/generateTree.js |  2 --
 shared/plugins.js      |  2 --
 4 files changed, 10 insertions(+), 46 deletions(-)
 delete mode 100644 plugins/objectable.js

diff --git a/client/events.js b/client/events.js
index c0d8e4de..36e14753 100644
--- a/client/events.js
+++ b/client/events.js
@@ -1,6 +1,14 @@
 export const eventCallbacks = new WeakMap()
 export const eventSubjects = new WeakMap()
 
+function executeEvent(callback, subject, event) {
+  if (typeof callback === 'object') {
+    Object.assign(subject.source, callback);
+  } else {
+    callback({ ...subject, event });
+  }
+}
+
 export function generateCallback(selector, name) {
   return function eventCallback(event) {
     const subject = eventSubjects.get(selector)
@@ -9,10 +17,10 @@ export function generateCallback(selector, name) {
     }
     if (Array.isArray(subject[name])) {
       for (const subcallback of subject[name]) {
-        subcallback({ ...subject, event });
+        executeEvent(subcallback, subject, event)
       }
     } else {
-      subject[name]({ ...subject, event });
+      executeEvent(subject[name], subject, event)
     }
   }
 };
\ No newline at end of file
diff --git a/plugins/objectable.js b/plugins/objectable.js
deleted file mode 100644
index d278f7e5..00000000
--- a/plugins/objectable.js
+++ /dev/null
@@ -1,40 +0,0 @@
-function match(node) {
-  return (
-    node &&
-    node.attributes !== undefined &&
-    node.type !== 'body'
-  )
-}
-
-function transform({ node }) {
-  if (!match(node)) return;
-  transformBody(node.attributes)
-}
-
-function transformBody(attributes) {
-  for (const attribute in attributes) {
-    if (attribute.startsWith('on') && attributes[attribute]) {
-      const target = attributes.source;
-      if (Array.isArray(attributes[attribute])) {
-        const callbacks = attributes[attribute]
-        for (let i = 0; i < callbacks.length; i++) {
-          const callback = callbacks[i]
-          if (typeof callback === 'object') {
-            const object = callbacks[i];
-            callbacks[i] = (function eventCallback() {
-              Object.assign(target, object);
-            }).bind(target)
-          }
-        }
-        attributes[attribute] = callbacks;
-      } else if (typeof attributes[attribute] === 'object') {
-        const object = attributes[attribute];
-        attributes[attribute] = (function eventCallback() {
-          Object.assign(target, object);
-        }).bind(target)
-      }
-    }
-  }
-}
-
-export default { transform, transformBody, client: true }
\ No newline at end of file
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 5f040572..0b7caecb 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -1,5 +1,3 @@
-import objectable from '../plugins/objectable'
-import datable from '../plugins/datable'
 import generateKey from '../shared/generateKey';
 import { isClass, isFalse, isFunction, isUndefined } from '../shared/nodes';
 import fragment from './fragment';
diff --git a/shared/plugins.js b/shared/plugins.js
index e6966319..f6a639eb 100644
--- a/shared/plugins.js
+++ b/shared/plugins.js
@@ -3,10 +3,8 @@ import bindable from '../plugins/bindable';
 import datable from '../plugins/datable';
 import parameterizable from '../plugins/parameterizable';
 import anchorable from '../plugins/anchorable';
-import objectable from '../plugins/objectable';
 
 let plugins = [
-  objectable,
   parameterizable,
   anchorable,
   routable,

From 37f4b536d90f464f368c6ac4999e830d0cbbaf43 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 17:20:50 -0300
Subject: [PATCH 024/105] :construction: style children

---
 client/index.js                 |  1 +
 shared/element.js               |  3 +++
 tests/src/StatefulComponent.njs | 13 +++++++++++++
 3 files changed, 17 insertions(+)

diff --git a/client/index.js b/client/index.js
index da4027db..4f684cda 100644
--- a/client/index.js
+++ b/client/index.js
@@ -59,6 +59,7 @@ export default class Nullstack {
         typeof context.start === 'function' && await context.start(context);
         context.environment = environment;
         client.virtualDom = await generateTree(client.initializer(), scope);
+        hydrate(client.selector, client.virtualDom);
         const body = render(client.virtualDom);
         client.selector.replaceWith(body);
         client.selector = body
diff --git a/shared/element.js b/shared/element.js
index 081ac653..1b28ae34 100644
--- a/shared/element.js
+++ b/shared/element.js
@@ -12,6 +12,9 @@ export default function element(type, props, ...children) {
     children = [children.join('')];
   }
   const attributes = { ...props, children };
+  if (type === 'style') {
+    attributes.html = children.join('');
+  }
   if (type === 'element') {
     type = attributes.tag || fragment;
     delete attributes.tag;
diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
index fff6a37c..dfbfaa6f 100644
--- a/tests/src/StatefulComponent.njs
+++ b/tests/src/StatefulComponent.njs
@@ -50,6 +50,19 @@ class StatefulComponent extends Nullstack {
         <button onclick={{ visible: !this.visible }} data-toggle> Toggle </button>
         {this.visible && <button onclick={undefined} data-undefined-event> button </button>}
         <textarea> {this.count} {this.count} </textarea>
+        <style>
+          {`
+            style { 
+              display: none !important;
+            }
+            button { 
+              background-color: rgba(0,0,0, ${this.count * 0.1});
+              color: red;
+              border: 0;
+              padding: 10px;
+            }
+          `}
+        </style>
       </form>
     )
   }

From 9ed196cdf5208b1d3c40294b808a87325a4de983 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 17:44:14 -0300
Subject: [PATCH 025/105] :adhesive_bandage: small style patches

---
 shared/element.js              |  2 +-
 shared/generateTree.js         |  2 +-
 tests/src/BodyFragment.test.js | 30 ++++++++++++++++++++++++++++++
 tests/src/DynamicHead.njs      |  2 +-
 tests/src/DynamicHead.test.js  |  5 +++++
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 tests/src/BodyFragment.test.js

diff --git a/shared/element.js b/shared/element.js
index 1b28ae34..75ff247a 100644
--- a/shared/element.js
+++ b/shared/element.js
@@ -12,7 +12,7 @@ export default function element(type, props, ...children) {
     children = [children.join('')];
   }
   const attributes = { ...props, children };
-  if (type === 'style') {
+  if (type === 'style' && !attributes.html) {
     attributes.html = children.join('');
   }
   if (type === 'element') {
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 0b7caecb..92847a91 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -157,7 +157,7 @@ async function generateBranch(parent, node, depth, scope) {
         for (let i = 0; i < branch.children.length; i++) {
           if (branch.children[i].attributes) {
             branch.children[i].head = true
-            branch.children[i].attributes.id = depth + '-' + i
+            branch.children[i].attributes.id ??= depth + '-' + i
           }
         }
       }
diff --git a/tests/src/BodyFragment.test.js b/tests/src/BodyFragment.test.js
new file mode 100644
index 00000000..d59a21f3
--- /dev/null
+++ b/tests/src/BodyFragment.test.js
@@ -0,0 +1,30 @@
+import Nullstack from 'nullstack';
+
+class CommponentA extends Nullstack {
+  render() {
+    return <p data-a> A </p>
+  }
+}
+
+class CommponentB extends Nullstack {
+  render() {
+    return <p data-b> B </p>
+  }
+}
+
+class ComponentTernary extends Nullstack {
+
+  showA = true
+
+  render() {
+    return (
+      <div>
+        {this.showA ? <CommponentA /> : <CommponentB />}
+        <button onclick={{ showA: !this.showA }}> ab </button>
+      </div>
+    )
+  }
+
+}
+
+export default ComponentTernary;
\ No newline at end of file
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
index 9b2f1d56..4c791fdd 100644
--- a/tests/src/DynamicHead.njs
+++ b/tests/src/DynamicHead.njs
@@ -49,7 +49,7 @@ class DynamicHead extends Nullstack {
         <span data-inner-component> data-inner-component </span>
         {this.count % 2 === 0 ?
           <head>
-            <meta name="test" content="nullstack" data-ternary-head />
+            <meta name="test" content="nullstack" data-ternary-head id="ternary-head" />
           </head> : <span data-ternary-span> not head </span>
         }
       </div>
diff --git a/tests/src/DynamicHead.test.js b/tests/src/DynamicHead.test.js
index 12f48873..8d84e934 100644
--- a/tests/src/DynamicHead.test.js
+++ b/tests/src/DynamicHead.test.js
@@ -63,6 +63,11 @@ describe('DynamicHead', () => {
     expect(element).toBeTruthy();
   });
 
+  test('head elements can have custom ids', async () => {
+    const element = await page.$('#ternary-head');
+    expect(element).toBeTruthy();
+  });
+
   test('the head tag accepts dynamic lists of increasing size', async () => {
     for (let i = 1; i < 3; i++) {
       await page.click('[data-increment]');

From 152815d5e533563a3168ed10306c9f3dffb5cfaf Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 21:39:04 -0300
Subject: [PATCH 026/105] :white_check_mark: body fragment tests

---
 client/index.js                |  1 +
 tests/src/BodyFragment.njs     |  7 +--
 tests/src/BodyFragment.test.js | 81 ++++++++++++++++++++++++----------
 3 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/client/index.js b/client/index.js
index 4f684cda..0421f355 100644
--- a/client/index.js
+++ b/client/index.js
@@ -65,6 +65,7 @@ export default class Nullstack {
         client.selector = body
       } else {
         client.virtualDom = await generateTree(client.initializer(), scope);
+        client.currentBody = client.nextBody
         hydrate(client.selector, client.virtualDom)
         context.environment = environment;
         scope.plugins = loadPlugins(scope);
diff --git a/tests/src/BodyFragment.njs b/tests/src/BodyFragment.njs
index e78d3495..39d965fb 100644
--- a/tests/src/BodyFragment.njs
+++ b/tests/src/BodyFragment.njs
@@ -18,10 +18,10 @@ class BodyFragment extends Nullstack {
     this.hasDataKeys = Object.keys(data).length > 0
   }
 
-  render() {
+  render({ self }) {
     return (
-      <body data-chars="a" onclick={[this.increment, this.countDataKeys, { objected: true }]} data-count={this.count} class={["class-one", "class-two", false]} style="background-color: black;" data-keys={this.hasDataKeys}>
-        <body data-chars="b" data-numbers="0" data-count={this.count} onclick={this.reveal} class="class-one class-three" style="color: white;" data-objected={this.objected}>
+      <body data-chars="a" onclick={[this.increment, this.countDataKeys, { objected: true }]} data-count={this.count} class={["class-one", "class-two", false]} style="background-color: black;" data-keys={this.hasDataKeys} data-hydrated={self.hydrated}>
+        <body data-chars="b" data-numbers="0" data-count={this.count} onclick={this.reveal} class="class-three class-four" style="color: white;" data-objected={this.objected}>
           BodyFragment
         </body>
         {this.visible &&
@@ -29,6 +29,7 @@ class BodyFragment extends Nullstack {
             BodyFragment
           </body>
         }
+        <a href="/">home</a>
       </body>
     )
   }
diff --git a/tests/src/BodyFragment.test.js b/tests/src/BodyFragment.test.js
index d59a21f3..e5dd4359 100644
--- a/tests/src/BodyFragment.test.js
+++ b/tests/src/BodyFragment.test.js
@@ -1,30 +1,65 @@
-import Nullstack from 'nullstack';
+beforeEach(async () => {
+  await page.goto('http://localhost:6969/body-fragment');
+});
 
-class CommponentA extends Nullstack {
-  render() {
-    return <p data-a> A </p>
-  }
-}
+describe('BodyFragment', () => {
 
-class CommponentB extends Nullstack {
-  render() {
-    return <p data-b> B </p>
-  }
-}
+  test('the body behaves as a fragment and creates no markup', async () => {
+    const element = await page.$('body > #application > h1');
+    expect(element).toBeTruthy();
+  });
 
-class ComponentTernary extends Nullstack {
+  test('when the body is nested regular attributes are overwritten by the last one in the tree', async () => {
+    const element = await page.$('body[data-chars="b"]');
+    expect(element).toBeTruthy();
+  });
 
-  showA = true
+  test('when the body is nested classes are merged togheter', async () => {
+    const element = await page.$('body[class="class-one class-two class-three class-four"]');
+    expect(element).toBeTruthy();
+  });
 
-  render() {
-    return (
-      <div>
-        {this.showA ? <CommponentA /> : <CommponentB />}
-        <button onclick={{ showA: !this.showA }}> ab </button>
-      </div>
-    )
-  }
+  test('when the body is nested events are invoked sequentially', async () => {
+    await page.waitForSelector('body[data-hydrated]')
+    await page.click('body');
+    await page.waitForSelector('[data-keys][data-objected][data-visible]');
+    const element = await page.$('[data-keys][data-objected][data-visible]');
+    expect(element).toBeTruthy();
+  });
 
-}
+  test('when a body is added to the vdom attributes are added', async () => {
+    await page.waitForSelector('body[data-hydrated]')
+    await page.click('body');
+    await page.waitForSelector('body[data-visible]');
+    const element = await page.$('body[data-visible]');
+    expect(element).toBeTruthy();
+  });
 
-export default ComponentTernary;
\ No newline at end of file
+  test('when a body is removed from the vdom attributes are removed', async () => {
+    await page.waitForSelector('body[data-hydrated]')
+    await page.click('body');
+    await page.waitForSelector('body[data-visible]');
+    await page.click('body');
+    await page.waitForSelector('body:not([data-visible])');
+    const element = await page.$('body:not([data-visible])');
+    expect(element).toBeTruthy();
+  });
+
+  test('body has access to plugins that have export a transformBody', async () => {
+    await page.waitForSelector('body[data-hydrated]')
+    await page.click('body');
+    await page.waitForSelector('[data-keys]');
+    const element = await page.$('[data-keys]');
+    expect(element).toBeTruthy();
+  });
+
+  test('the body removes events when the fragment leaves the tree', async () => {
+    await page.waitForSelector('body[data-hydrated]')
+    await page.click('[href="/"]');
+    await page.waitForSelector('[data-window="shim"]:not([data-count])');
+    await page.click('body');
+    const element = await page.$('[data-window="shim"]:not([data-count])');
+    expect(element).toBeTruthy();
+  });
+
+});
\ No newline at end of file

From 4aaa80569f8e4a2b294ac1dff3c7b418112c9bb0 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 21:50:30 -0300
Subject: [PATCH 027/105] :white_check_mark: tests for style children

---
 tests/src/StatefulComponent.test.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/tests/src/StatefulComponent.test.js b/tests/src/StatefulComponent.test.js
index 8d1d38f2..7814beb1 100644
--- a/tests/src/StatefulComponent.test.js
+++ b/tests/src/StatefulComponent.test.js
@@ -76,4 +76,11 @@ describe('StatefulComponent', () => {
     expect(text).toMatch(' 2 2 ');
   });
 
+  test('children of style become the tags html attribute', async () => {
+    await page.click('.increment-by-one');
+    await page.waitForSelector('[data-count="2"]');
+    const text = await page.$eval('button', (e) => getComputedStyle(e).backgroundColor);
+    expect(text).toMatch('rgba(0, 0, 0, 0.2)');
+  });
+
 });
\ No newline at end of file

From d4f0cbd5e16d2855107e9b0470d4e2f44cf87fc1 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 15 May 2022 22:13:06 -0300
Subject: [PATCH 028/105] :white_check_mark: tests for array attributes

---
 tests/src/ArrayAttributes.njs     |  2 +-
 tests/src/ArrayAttributes.test.js | 81 +++++++++++++++++++++++++++++++
 tests/src/BodyFragment.test.js    |  5 ++
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 tests/src/ArrayAttributes.test.js

diff --git a/tests/src/ArrayAttributes.njs b/tests/src/ArrayAttributes.njs
index e4e19e2e..6593411b 100644
--- a/tests/src/ArrayAttributes.njs
+++ b/tests/src/ArrayAttributes.njs
@@ -28,7 +28,7 @@ class ArrayAttributes extends Nullstack {
         <button onclick={{ styles: ['color: pink;', 'background-color: blue;'] }} data-pink-blue>pink-blue</button>
         <button onclick={{ styles: ['color: pink;', 'background-color: blue; border: 1px solid red;'] }} data-pink-blue-red>pink-blue-red</button>
         <button onclick={{ styles: ['color: green;', false && 'background-color: blue;', undefined && 'background-color: blue;', null && 'background-color: blue;', 0 && 'background-color: blue;'] }} data-green>green</button>
-        <button onclick={[this.increment, this.double, { objected: true }]}>{this.count}</button>
+        <button onclick={[this.increment, this.double, { objected: true }]} data-events>{this.count}</button>
       </div>
     )
   }
diff --git a/tests/src/ArrayAttributes.test.js b/tests/src/ArrayAttributes.test.js
new file mode 100644
index 00000000..86fc6426
--- /dev/null
+++ b/tests/src/ArrayAttributes.test.js
@@ -0,0 +1,81 @@
+beforeAll(async () => {
+  await page.goto('http://localhost:6969/array-attributes');
+});
+
+describe('ArrayAttributes jsx', () => {
+
+  test('classes can be simple strings', async () => {
+    await page.click('[data-d]');
+    await page.waitForSelector('[class="d"]')
+    const element = await page.$('[class="d"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('when class refers to an array the result is the merge of the strings', async () => {
+    await page.click('[data-ab]');
+    await page.waitForSelector('[class="a b"]')
+    const element = await page.$('[class="a b"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('when the class array changes the attribute changes', async () => {
+    await page.click('[data-ab]');
+    await page.waitForSelector('[class="a b"]')
+    await page.click('[data-abc]');
+    await page.waitForSelector('[class="a b c"]')
+    const element = await page.$('[class="a b c"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('falsy values are removed from the class array', async () => {
+    await page.click('[data-e]');
+    await page.waitForSelector('[class="e"]')
+    const element = await page.$('[class="e"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('styles can be simple strings', async () => {
+    await page.click('[data-purple]');
+    await page.waitForSelector('[style="color: purple;"]')
+    const element = await page.$('[style="color: purple;"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('when style refers to an array the result is the merge of the strings', async () => {
+    await page.click('[data-pink-blue]');
+    await page.waitForSelector('[style="color: pink; background-color: blue;"]')
+    const element = await page.$('[style="color: pink; background-color: blue;"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('when the style array changes the attribute changes', async () => {
+    await page.click('[data-pink-blue]');
+    await page.waitForSelector('[style="color: pink; background-color: blue;"]')
+    await page.click('[data-pink-blue-red]');
+    await page.waitForSelector('[style="color: pink; background-color: blue; border: 1px solid red;"]')
+    const element = await page.$('[style="color: pink; background-color: blue; border: 1px solid red;"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('falsy values are removed from the style array', async () => {
+    await page.click('[data-green]');
+    await page.waitForSelector('[style="color: green;"]')
+    const element = await page.$('[style="color: green;"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('when events point to an array all the functions are executed in parallel', async () => {
+    await page.click('[data-events]');
+    await page.waitForSelector('[data-count="4"]')
+    const element = await page.$('[data-count="4"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('object events can be mixed with function events in arrays', async () => {
+    await page.click('[data-events]');
+    await page.waitForSelector('[data-count="4"][data-objected]')
+    const element = await page.$('[data-count="4"][data-objected]')
+    expect(element).toBeTruthy();
+  });
+
+});
diff --git a/tests/src/BodyFragment.test.js b/tests/src/BodyFragment.test.js
index e5dd4359..90fa0a99 100644
--- a/tests/src/BodyFragment.test.js
+++ b/tests/src/BodyFragment.test.js
@@ -19,6 +19,11 @@ describe('BodyFragment', () => {
     expect(element).toBeTruthy();
   });
 
+  test('when the body is nested styles are merged togheter', async () => {
+    const element = await page.$('body[style="background-color: black; color: white;"]');
+    expect(element).toBeTruthy();
+  });
+
   test('when the body is nested events are invoked sequentially', async () => {
     await page.waitForSelector('body[data-hydrated]')
     await page.click('body');

From a0980198f2be69b68606ef1223a0f82853e74bbf Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 16 May 2022 20:40:57 -0300
Subject: [PATCH 029/105] :white_check_mark: advanced anchor tests

---
 client/events.js                  | 10 ++++++++-
 plugins/anchorable.js             | 16 ++------------
 tests/src/AnchorModifiers.njs     | 36 +++++++++++++++++++++++++------
 tests/src/AnchorModifiers.test.js | 33 ++++++++++++++++++++++++----
 tests/src/Application.njs         |  2 +-
 5 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/client/events.js b/client/events.js
index 36e14753..603f605a 100644
--- a/client/events.js
+++ b/client/events.js
@@ -1,3 +1,5 @@
+import router from './router'
+
 export const eventCallbacks = new WeakMap()
 export const eventSubjects = new WeakMap()
 
@@ -12,9 +14,15 @@ function executeEvent(callback, subject, event) {
 export function generateCallback(selector, name) {
   return function eventCallback(event) {
     const subject = eventSubjects.get(selector)
-    if (subject.default !== true) {
+    if (subject.href) {
+      if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+        event.preventDefault()
+        router.url = subject.href
+      }
+    } else if (subject.default !== true) {
       event.preventDefault();
     }
+    if (subject[name] === true) return
     if (Array.isArray(subject[name])) {
       for (const subcallback of subject[name]) {
         executeEvent(subcallback, subject, event)
diff --git a/plugins/anchorable.js b/plugins/anchorable.js
index d3f92925..f2b9351f 100644
--- a/plugins/anchorable.js
+++ b/plugins/anchorable.js
@@ -8,21 +8,9 @@ function match(node) {
   )
 }
 
-function transform({ node, router }) {
+function transform({ node }) {
   if (!match(node)) return
-  const originalEvent = node.attributes.onclick
-  node.attributes.default = true
-  node.attributes.onclick = ({ event }) => {
-    if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-      event.preventDefault()
-      router.url = node.attributes.href
-    }
-    if (originalEvent) {
-      setTimeout(() => {
-        originalEvent({ ...node.attributes, event })
-      }, 0)
-    }
-  }
+  node.attributes.onclick ??= true
 }
 
 export default { transform, client: true }
diff --git a/tests/src/AnchorModifiers.njs b/tests/src/AnchorModifiers.njs
index 1306e73f..e982d5ac 100644
--- a/tests/src/AnchorModifiers.njs
+++ b/tests/src/AnchorModifiers.njs
@@ -6,23 +6,45 @@ class AnchorModifiers extends Nullstack {
     <a href="/anchor-modifiers?source=html">html</a>
   `
 
-  hydrate(context) {
-    context.self.element.querySelector('a').addEventListener('click', () => {
-      context.clickedHTML = true
+  count = 0
+  objected = false
+  updated = false
+
+  hydrate({ self }) {
+    self.element.querySelector('a').addEventListener('click', () => {
+      this.clickedHTML = true
     })
   }
 
-  clickJSX(context) {
-    context.clickedJSX = true
+  clickJSX() {
+    this.clickedJSX = true
+  }
+
+  markAsUpdated() {
+    document.body.dataset.updated = true
+  }
+
+  increment() {
+    this.count++
   }
 
-  render({ clickedJSX, clickedHTML }) {
+  render({ self }) {
     return (
-      <div data-clicked-jsx={clickedJSX} data-clicked-html={clickedHTML}>
+      <div data-clicked-jsx={this.clickedJSX} data-clicked-html={this.clickedHTML} data-count={this.count} data-objected={this.objected} data-updated={this.updated} data-hydrated={self.hydrated}>
         <div html={this.html} />
+        <button onclick={this.markAsUpdated}> update </button>
         <a href="/anchor-modifiers?source=jsx" onclick={this.clickJSX}>
           jsx
         </a>
+        <a href="/anchor-modifiers?source=incremented" onclick={this.increment}>
+          increment
+        </a>
+        <a href="/anchor-modifiers?source=object" onclick={{ objected: true }}>
+          object
+        </a>
+        <a href="/anchor-modifiers?source=array" onclick={[this.increment, { objected: true }]}>
+          array
+        </a>
       </div>
     )
   }
diff --git a/tests/src/AnchorModifiers.test.js b/tests/src/AnchorModifiers.test.js
index 1e071298..da255ee4 100644
--- a/tests/src/AnchorModifiers.test.js
+++ b/tests/src/AnchorModifiers.test.js
@@ -1,9 +1,10 @@
-beforeAll(async () => {
-  await page.goto('http://localhost:6969/anchor-modifiers');
-});
-
 describe('AnchorModifiers jsx', () => {
 
+  beforeEach(async () => {
+    await page.goto('http://localhost:6969/anchor-modifiers');
+    await page.waitForSelector('[data-hydrated]');
+  });
+
   test('Clicking html link with shift opens in new window', async () => {
     await page.keyboard.down('Shift');
     await page.click('[href="/anchor-modifiers?source=html"]');
@@ -72,4 +73,28 @@ describe('AnchorModifiers jsx', () => {
     expect(element).toBeTruthy();
   });
 
+  test('anchors can have events', async () => {
+    await page.click('button');
+    await page.click('[href="/anchor-modifiers?source=incremented"]');
+    await page.waitForSelector('[data-updated] [data-count="1"]');
+    const element = await page.$('[data-updated] [data-count="1"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('anchors can have object events', async () => {
+    await page.click('button');
+    await page.click('[href="/anchor-modifiers?source=object"]');
+    await page.waitForSelector('[data-updated] [data-objected]');
+    const element = await page.$('[data-updated] [data-objected]');
+    expect(element).toBeTruthy();
+  });
+
+  test('anchors can have array events', async () => {
+    await page.click('button');
+    await page.click('[href="/anchor-modifiers?source=array"]');
+    await page.waitForSelector('[data-updated] [data-count="1"][data-objected]');
+    const element = await page.$('[data-updated] [data-count="1"][data-objected]');
+    expect(element).toBeTruthy();
+  });
+
 });
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index b1ae62e7..db7d649c 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -117,7 +117,7 @@ class Application extends Nullstack {
         <UndefinedNodes route="/undefined-nodes" />
         <WebpackCustomPlugin route="/webpack-custom-plugin" />
         <ComponentTernary route="/component-ternary" />
-        <AnchorModifiers route="/anchor-modifiers" />
+        <AnchorModifiers route="/anchor-modifiers" key="anchorModifiers" />
         <MetatagState route="/metatag-state" />
         <JavaScriptExtension route="/javascript-extension" />
         <TypeScriptExtension route="/typescript-extension" generic />

From 31762f9cd73f4f178fe5043f6ea08b5b30c8e707 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 20 May 2022 22:34:53 -0300
Subject: [PATCH 030/105] :fire: remove hydration from spa

---
 client/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/index.js b/client/index.js
index 0421f355..4b36a657 100644
--- a/client/index.js
+++ b/client/index.js
@@ -59,7 +59,6 @@ export default class Nullstack {
         typeof context.start === 'function' && await context.start(context);
         context.environment = environment;
         client.virtualDom = await generateTree(client.initializer(), scope);
-        hydrate(client.selector, client.virtualDom);
         const body = render(client.virtualDom);
         client.selector.replaceWith(body);
         client.selector = body

From a0421bd195a1700f3ba34d4cc5ba99ef95e244b5 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 21 May 2022 00:08:53 -0300
Subject: [PATCH 031/105] :sparkles: spa dynamic head

---
 client/rerender.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/rerender.js b/client/rerender.js
index 79c72f3b..afdc2a69 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -8,6 +8,12 @@ import generateTruthyString from '../shared/generateTruthyString';
 const head = document.head
 const body = document.body
 
+function getElement(node) {
+  if (node.element) return node.element
+  node.element = document.getElementById(node.attributes.id)
+  return node.element
+}
+
 function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
@@ -81,7 +87,7 @@ function _rerender(current, next) {
     return;
   }
 
-  if ((isFalse(current) || isFalse(next)) && current != next) {
+  if ((isFalse(current) || isFalse(next)) && current.type != next.type) {
     const nextSelector = render(next);
     selector.replaceWith(nextSelector);
     if (current.type !== 'head' && next.type !== 'head') {
@@ -91,7 +97,7 @@ function _rerender(current, next) {
 
   if (current.type === 'head' ^ next.type === 'head') {
     const nextSelector = render(next);
-    selector.replaceWith(nextSelector);
+    getElement(current).replaceWith(nextSelector);
   }
 
   if (current.type !== 'head' && next.type === 'head') {
@@ -106,7 +112,7 @@ function _rerender(current, next) {
   if (current.type === 'head' && next.type !== 'head') {
     const limit = current.children.length;
     for (let i = limit - 1; i > -1; i--) {
-      current.children[i].element.remove()
+      getElement(current.children[i]).remove()
     }
     return
   }
@@ -118,13 +124,13 @@ function _rerender(current, next) {
         const nextSelector = render(next.children[i]);
         head.appendChild(nextSelector)
       } else if (isUndefined(next.children[i]) && !isFalse(current.children[i])) {
-        current.children[i].element.remove()
+        getElement(current.children[i]).remove()
       } else if (!isFalse(current.children[i]) && !isFalse(next.children[i])) {
         if (current.children[i].type === next.children[i].type) {
-          next.children[i].element = current.children[i].element
-          updateAttributes(current.children[i].element, current.children[i].attributes, next.children[i].attributes)
+          next.children[i].element = getElement(current.children[i])
+          updateAttributes(next.children[i].element, current.children[i].attributes, next.children[i].attributes)
         } else {
-          current.children[i].element.remove()
+          getElement(current.children[i]).remove()
           const nextSelector = render(next.children[i]);
           head.appendChild(nextSelector)
         }
@@ -132,7 +138,7 @@ function _rerender(current, next) {
         const nextSelector = render(next.children[i]);
         head.appendChild(nextSelector)
       } else if (current.children[i].type) {
-        current.children[i].element.remove()
+        getElement(current.children[i]).remove()
       }
     }
     return

From 3eb376b00589a4b4b4cefdcbcb84819187502298 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 21 May 2022 23:39:45 -0300
Subject: [PATCH 032/105] :zap: faster spa hydration

---
 client/hydrate.js                  |  7 ++++++
 client/rerender.js                 | 22 ++++++-----------
 tests/src/Application.njs          |  2 ++
 tests/src/ArrayAttributes.njs      |  4 ++--
 tests/src/ArrayAttributes.test.js  |  1 +
 tests/src/ErrorOnChildNode.njs     | 12 +++++-----
 tests/src/ErrorOnChildNode.test.js | 38 ++++++++++++++++++++++++++++--
 7 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/client/hydrate.js b/client/hydrate.js
index 040e1d75..d73e11ec 100644
--- a/client/hydrate.js
+++ b/client/hydrate.js
@@ -19,6 +19,13 @@ export default function hydrate(selector, node) {
   if (!node.children) return
   const limit = node.children.length;
   for (let i = limit - 1; i > -1; i--) {
+    if (node.type !== 'head' && typeof selector?.childNodes?.[i] === 'undefined') {
+      console.error(
+        `${node.type.toUpperCase()} expected tag ${node.children[i].type.toUpperCase()} to be child at index ${i} but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.`,
+        selector
+      )
+      throw new Error('Virtual DOM does not match the DOM.')
+    }
     hydrate(selector.childNodes[i], node.children[i])
   }
 }
\ No newline at end of file
diff --git a/client/rerender.js b/client/rerender.js
index afdc2a69..0dc91928 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -15,6 +15,7 @@ function getElement(node) {
 }
 
 function updateAttributes(selector, currentAttributes, nextAttributes) {
+  if (!selector) return
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
     if (name === 'html') {
@@ -88,8 +89,8 @@ function _rerender(current, next) {
   }
 
   if ((isFalse(current) || isFalse(next)) && current.type != next.type) {
-    const nextSelector = render(next);
-    selector.replaceWith(nextSelector);
+    current.element = render(next);
+    selector.replaceWith(current.element);
     if (current.type !== 'head' && next.type !== 'head') {
       return
     }
@@ -112,7 +113,7 @@ function _rerender(current, next) {
   if (current.type === 'head' && next.type !== 'head') {
     const limit = current.children.length;
     for (let i = limit - 1; i > -1; i--) {
-      getElement(current.children[i]).remove()
+      getElement(current.children[i])?.remove?.()
     }
     return
   }
@@ -124,13 +125,13 @@ function _rerender(current, next) {
         const nextSelector = render(next.children[i]);
         head.appendChild(nextSelector)
       } else if (isUndefined(next.children[i]) && !isFalse(current.children[i])) {
-        getElement(current.children[i]).remove()
+        getElement(current.children[i])?.remove?.()
       } else if (!isFalse(current.children[i]) && !isFalse(next.children[i])) {
         if (current.children[i].type === next.children[i].type) {
           next.children[i].element = getElement(current.children[i])
           updateAttributes(next.children[i].element, current.children[i].attributes, next.children[i].attributes)
         } else {
-          getElement(current.children[i]).remove()
+          getElement(current.children[i])?.remove?.()
           const nextSelector = render(next.children[i]);
           head.appendChild(nextSelector)
         }
@@ -138,7 +139,7 @@ function _rerender(current, next) {
         const nextSelector = render(next.children[i]);
         head.appendChild(nextSelector)
       } else if (current.children[i].type) {
-        getElement(current.children[i]).remove()
+        getElement(current.children[i])?.remove?.()
       }
     }
     return
@@ -160,7 +161,6 @@ function _rerender(current, next) {
     updateAttributes(selector, current.attributes, next.attributes)
 
     if (next.attributes.html) return;
-
     const limit = Math.max(current.children.length, next.children.length);
     if (next.children.length > current.children.length) {
       for (let i = 0; i < current.children.length; i++) {
@@ -179,14 +179,6 @@ function _rerender(current, next) {
       }
     } else {
       for (let i = limit - 1; i > -1; i--) {
-        if (typeof selector.childNodes[i] === 'undefined') {
-          console.error(
-            `${current.type.toUpperCase()} expected tag ${current.children[i].type.toUpperCase()} to be child at index ${i} but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.`,
-            selector
-          )
-          throw new Error('Virtual DOM does not match the DOM.')
-          return;
-        }
         _rerender(current.children[i], next.children[i]);
       }
     }
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index db7d649c..ae90b5f8 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -75,6 +75,8 @@ class Application extends Nullstack {
           <a href="/undefined-nodes"> undefined nodes </a>
           <a href="/full-stack-lifecycle"> lifecycle </a>
           <a href="/hydrate-element"> hydrate element </a>
+          <a href="/error-on-child-node?dom=true"> error-on-child-node?dom=true </a>
+          <a href="/error-on-child-node?serialization=true"> error-on-child-node?serialization=true </a>
         </div>
         <RenderableComponent route="/renderable-component" />
         <StatefulComponent route="/stateful-component" />
diff --git a/tests/src/ArrayAttributes.njs b/tests/src/ArrayAttributes.njs
index 6593411b..6e9e42c0 100644
--- a/tests/src/ArrayAttributes.njs
+++ b/tests/src/ArrayAttributes.njs
@@ -15,9 +15,9 @@ class ArrayAttributes extends Nullstack {
     this.count += this.count
   }
 
-  render() {
+  render({ self }) {
     return (
-      <div data-count={this.count} data-objected={this.objected}>
+      <div data-count={this.count} data-objected={this.objected} data-hydrated={self.hydrated}>
         <span class={this.classes}> {JSON.stringify(this.classes)} </span>
         <span style={this.styles}> {JSON.stringify(this.styles)} </span>
         <button onclick={{ classes: 'd' }} data-d>d</button>
diff --git a/tests/src/ArrayAttributes.test.js b/tests/src/ArrayAttributes.test.js
index 86fc6426..ff997893 100644
--- a/tests/src/ArrayAttributes.test.js
+++ b/tests/src/ArrayAttributes.test.js
@@ -1,5 +1,6 @@
 beforeAll(async () => {
   await page.goto('http://localhost:6969/array-attributes');
+  await page.waitForSelector('[data-hydrated]')
 });
 
 describe('ArrayAttributes jsx', () => {
diff --git a/tests/src/ErrorOnChildNode.njs b/tests/src/ErrorOnChildNode.njs
index 7ff32ce5..86b9a77c 100644
--- a/tests/src/ErrorOnChildNode.njs
+++ b/tests/src/ErrorOnChildNode.njs
@@ -14,14 +14,14 @@ class ObjectId {
 
 class ErrorOnChildNode extends Nullstack {
 
-  testValue = 'initial Value';
+  value = 'initial Value';
 
   records = [
     { _id: new ObjectId('a') },
   ]
 
   testClick() {
-    this.testValue = 'Changed Value';
+    this.value = 'Changed Value';
   }
 
   renderSerializationError() {
@@ -61,13 +61,13 @@ class ErrorOnChildNode extends Nullstack {
   render({ params }) {
     return (
       <>
-        <h1> Table Error </h1>
+        <h2> Table Error </h2>
         {params.serialization && <SerializationError />}
         {params.dom && <DOMError />}
-        <div id="text">
-          {this.testValue}
+        <div data-value={this.value}>
+          {this.value}
         </div>
-        <button id="buttonTest" onclick={this.testClick}> Change Value </button>
+        <button data-dom-error onclick={this.testClick}> Change Value </button>
       </>
     );
   }
diff --git a/tests/src/ErrorOnChildNode.test.js b/tests/src/ErrorOnChildNode.test.js
index 9e34a577..ead928cd 100644
--- a/tests/src/ErrorOnChildNode.test.js
+++ b/tests/src/ErrorOnChildNode.test.js
@@ -1,4 +1,4 @@
-describe('ErrorOnChildNode dom', () => {
+describe('ErrorOnChildNode dom ssr', () => {
 
   let error;
 
@@ -15,7 +15,7 @@ describe('ErrorOnChildNode dom', () => {
 
 })
 
-describe('ErrorOnChildNode serialization', () => {
+describe('ErrorOnChildNode serialization ssr', () => {
 
   let error;
 
@@ -30,4 +30,38 @@ describe('ErrorOnChildNode serialization', () => {
     })
   });
 
+})
+
+describe('ErrorOnChildNode dom spa', () => {
+
+  beforeAll(async () => {
+    await page.goto('http://localhost:6969/');
+  });
+
+  test('hydration errors related to dom should not happen in spa mode', async () => {
+    await page.click('[href="/error-on-child-node?dom=true"]');
+    await page.waitForSelector('[data-dom-error]');
+    await page.click('[data-dom-error]');
+    await page.waitForSelector('[data-value="Changed Value"]');
+    const element = await page.$('[data-value="Changed Value"]');
+    expect(element).toBeTruthy();
+  });
+
+})
+
+describe('ErrorOnChildNode dom spa', () => {
+
+  beforeAll(async () => {
+    await page.goto('http://localhost:6969/');
+  });
+
+  test('hydration errors related to dom should not happen in spa mode', async () => {
+    await page.click('[href="/error-on-child-node?serialization=true"]');
+    await page.waitForSelector('[data-dom-error]');
+    await page.click('[data-dom-error]');
+    await page.waitForSelector('[data-value="Changed Value"]');
+    const element = await page.$('[data-value="Changed Value"]');
+    expect(element).toBeTruthy();
+  });
+
 })
\ No newline at end of file

From 908ecaf426d29067cdd804760d4dc65191332fe0 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 22 May 2022 03:53:14 -0300
Subject: [PATCH 033/105] :zap: faster head ternaries

---
 client/rerender.js            | 65 ++++++++++++++++++-----------------
 tests/src/DynamicHead.njs     | 12 +++++++
 tests/src/DynamicHead.test.js | 32 +++++++++++++++++
 3 files changed, 78 insertions(+), 31 deletions(-)

diff --git a/client/rerender.js b/client/rerender.js
index 0dc91928..2e85670f 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -8,14 +8,22 @@ import generateTruthyString from '../shared/generateTruthyString';
 const head = document.head
 const body = document.body
 
-function getElement(node) {
-  if (node.element) return node.element
+function getHeadElement(node) {
+  if (node.element) {
+    return node.element
+  }
   node.element = document.getElementById(node.attributes.id)
   return node.element
 }
 
+function removeHeadElement(node) {
+  const element = getHeadElement(node)
+  if (element) {
+    element.remove()
+  }
+}
+
 function updateAttributes(selector, currentAttributes, nextAttributes) {
-  if (!selector) return
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
     if (name === 'html') {
@@ -88,17 +96,9 @@ function _rerender(current, next) {
     return;
   }
 
-  if ((isFalse(current) || isFalse(next)) && current.type != next.type) {
-    current.element = render(next);
-    selector.replaceWith(current.element);
-    if (current.type !== 'head' && next.type !== 'head') {
-      return
-    }
-  }
-
-  if (current.type === 'head' ^ next.type === 'head') {
+  if ((current.type === 'head' ^ next.type === 'head') && !isFalse(current) && !isFalse(next)) {
     const nextSelector = render(next);
-    getElement(current).replaceWith(nextSelector);
+    current.element.replaceWith(nextSelector);
   }
 
   if (current.type !== 'head' && next.type === 'head') {
@@ -108,30 +108,26 @@ function _rerender(current, next) {
       head.appendChild(nextSelector)
     }
     return
-  }
-
-  if (current.type === 'head' && next.type !== 'head') {
-    const limit = current.children.length;
-    for (let i = limit - 1; i > -1; i--) {
-      getElement(current.children[i])?.remove?.()
-    }
-    return
-  }
-
-  if (next.type === 'head') {
+  } else if (current.type === 'head' && next.type === 'head') {
     const limit = Math.max(current.children.length, next.children.length);
-    for (let i = limit - 1; i > -1; i--) {
+    for (let i = 0; i < limit; i++) {
       if (isUndefined(current.children[i]) && !isFalse(next.children[i])) {
         const nextSelector = render(next.children[i]);
         head.appendChild(nextSelector)
       } else if (isUndefined(next.children[i]) && !isFalse(current.children[i])) {
-        getElement(current.children[i])?.remove?.()
+        removeHeadElement(current.children[i])
       } else if (!isFalse(current.children[i]) && !isFalse(next.children[i])) {
         if (current.children[i].type === next.children[i].type) {
-          next.children[i].element = getElement(current.children[i])
-          updateAttributes(next.children[i].element, current.children[i].attributes, next.children[i].attributes)
+          const selector = getHeadElement(current.children[i])
+          if (selector) {
+            next.children[i].element = selector
+            updateAttributes(selector, current.children[i].attributes, next.children[i].attributes)
+          } else {
+            const nextSelector = render(next.children[i]);
+            head.appendChild(nextSelector)
+          }
         } else {
-          getElement(current.children[i])?.remove?.()
+          removeHeadElement(current.children[i])
           const nextSelector = render(next.children[i]);
           head.appendChild(nextSelector)
         }
@@ -139,15 +135,22 @@ function _rerender(current, next) {
         const nextSelector = render(next.children[i]);
         head.appendChild(nextSelector)
       } else if (current.children[i].type) {
-        getElement(current.children[i])?.remove?.()
+        removeHeadElement(current.children[i])
       }
     }
     return
+  } else if (current.type === 'head' && next.type !== 'head') {
+    const limit = current.children.length;
+    for (let i = limit - 1; i > -1; i--) {
+      removeHeadElement(current.children[i])
+    }
+    return
   }
 
   if (current.type !== next.type) {
     const nextSelector = render(next);
-    return selector.replaceWith(nextSelector);
+    selector.replaceWith(nextSelector);
+    return
   }
 
   if (isText(current) && isText(next)) {
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
index 4c791fdd..df3fb599 100644
--- a/tests/src/DynamicHead.njs
+++ b/tests/src/DynamicHead.njs
@@ -36,6 +36,9 @@ class DynamicHead extends Nullstack {
             <style html={conditionalHead} data-conditional-head />
           </head>
         }
+        <head>
+          {this.count % 2 === 0 ? <style html="" data-ternary-head-children /> : <meta name="test" content="nullstack" data-ternary-head-children />}
+        </head>
         <head>
           {Array(this.count + 1 - this.negativeCount).fill(<style html={dynamicLength} data-dynamic-length={this.count} data-negative-count={this.negativeCount === 1} />)}
         </head>
@@ -52,6 +55,15 @@ class DynamicHead extends Nullstack {
             <meta name="test" content="nullstack" data-ternary-head id="ternary-head" />
           </head> : <span data-ternary-span> not head </span>
         }
+        {this.count % 2 === 0
+          ? <head>
+            <meta name="test" content="nullstack" data-a1 />
+          </head>
+          : <head>
+            <meta name="test" content="nullstack" data-b1 />
+            <meta name="test" content="nullstack" data-b2 />
+          </head>
+        }
       </div>
     )
   }
diff --git a/tests/src/DynamicHead.test.js b/tests/src/DynamicHead.test.js
index 8d84e934..cfca3008 100644
--- a/tests/src/DynamicHead.test.js
+++ b/tests/src/DynamicHead.test.js
@@ -100,4 +100,36 @@ describe('DynamicHead', () => {
     const element = await page.$('[data-dynamic-length]:not([data-negative-count])');
     expect(element).toBeTruthy();
   });
+
+  test('heads can be replaced in ternaries by heads with a highter children length', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('[data-b2]');
+    await page.waitForSelector('[data-b1]');
+    const a1 = await page.$('[data-a1]');
+    const b1 = await page.$('[data-b1]');
+    const b2 = await page.$('[data-b2]');
+    expect(!a1 && b1 && b2).toBeTruthy();
+  });
+
+  test('heads can be replaced in ternaries by heads with a highter children length', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('[data-b2]');
+    await page.waitForSelector('[data-b1]');
+    await page.click('[data-increment]');
+    await page.waitForSelector('[data-a1]');
+    const a1 = await page.$('[data-a1]');
+    const b1 = await page.$('[data-b1]');
+    const b2 = await page.$('[data-b2]');
+    expect(a1 && !b1 && !b2).toBeTruthy();
+  });
+
+  test('head children can be ternaries', async () => {
+    await page.click('[data-increment]');
+    await page.waitForSelector('meta[data-ternary-head-children]');
+    await page.click('[data-increment]');
+    await page.waitForSelector('style[data-ternary-head-children]');
+    const element = await page.$('style[data-ternary-head-children]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file

From 7e1af3e387c8b2cfd5c0a8aa6d5614cd93e799ca Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 22 May 2022 04:26:07 -0300
Subject: [PATCH 034/105] :sparkles: null returning components

---
 plugins/bindable.js          |  3 +--
 shared/nodes.js              |  1 +
 tests/src/FalsyNodes.njs     | 10 ++++++++++
 tests/src/FalsyNodes.test.js | 10 ++++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/plugins/bindable.js b/plugins/bindable.js
index 3a31d41c..7e25c46f 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -29,8 +29,7 @@ function attachEvent(node) {
 
 function match(node) {
   return (
-    node !== undefined &&
-    node.attributes !== undefined &&
+    node?.attributes !== undefined &&
     node.attributes.bind !== undefined &&
     node.attributes.source !== undefined
   )
diff --git a/shared/nodes.js b/shared/nodes.js
index 7dd4fc44..8644758a 100644
--- a/shared/nodes.js
+++ b/shared/nodes.js
@@ -1,5 +1,6 @@
 export function isUndefined(node) {
   if (node === undefined) return true
+  if (node === null) return false
   return node.hasOwnProperty('type') && node.type === undefined
 }
 
diff --git a/tests/src/FalsyNodes.njs b/tests/src/FalsyNodes.njs
index 1732bca5..38a44212 100644
--- a/tests/src/FalsyNodes.njs
+++ b/tests/src/FalsyNodes.njs
@@ -6,11 +6,21 @@ class FalsyNodes extends Nullstack {
   zeroNode = 0;
   falseNode = false;
 
+  renderNullComponent() {
+    return null
+  }
+
+  renderFalseComponent() {
+    return false
+  }
+
   render() {
     return (
       <>
         <div data-null>{this.nullNode}</div>
         <div data-false>{this.falseNode}</div>
+        <div data-null-component><NullComponent /></div>
+        <div data-false-component><FalseComponent /></div>
         <div data-zero>{this.zeroNode}</div>
       </>
     )
diff --git a/tests/src/FalsyNodes.test.js b/tests/src/FalsyNodes.test.js
index 8c789701..56ee7b4f 100644
--- a/tests/src/FalsyNodes.test.js
+++ b/tests/src/FalsyNodes.test.js
@@ -14,6 +14,16 @@ describe('Falsy Nodes', () => {
     expect(truth).toBeTruthy();
   });
 
+  test('Components returning null should render a comment', async () => {
+    const truth = await page.$eval('[data-null-component]', (e) => e.childNodes[0] instanceof Comment);
+    expect(truth).toBeTruthy();
+  });
+
+  test('Components returning false should render a comment', async () => {
+    const truth = await page.$eval('[data-false-component]', (e) => e.childNodes[0] instanceof Comment);
+    expect(truth).toBeTruthy();
+  });
+
   test('Zero nodes should render a text node', async () => {
     const truth = await page.$eval('[data-zero]', (e) => e.textContent === '0');
     expect(truth).toBeTruthy();

From 217d73e60ac56222c78b51c530dd5f4145608be5 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 22 May 2022 05:14:13 -0300
Subject: [PATCH 035/105] :zap: faster bindings

---
 client/events.js                 | 12 +++++++++
 plugins/bindable.js              | 44 ++++++--------------------------
 tests/jest-puppeteer.config.js   |  2 +-
 tests/src/TwoWayBindings.njs     | 23 +++++++++++------
 tests/src/TwoWayBindings.test.js |  7 ++++-
 5 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/client/events.js b/client/events.js
index 603f605a..b23d5d07 100644
--- a/client/events.js
+++ b/client/events.js
@@ -14,6 +14,18 @@ function executeEvent(callback, subject, event) {
 export function generateCallback(selector, name) {
   return function eventCallback(event) {
     const subject = eventSubjects.get(selector)
+    if (subject?.bind !== undefined) {
+      const valueName = (subject.type === 'checkbox' || subject.type === 'radio') ? 'checked' : 'value'
+      if (valueName === 'checked') {
+        subject.source[subject.bind] = event.target[valueName];
+      } else if (subject.source[subject.bind] === true || subject.source[subject.bind] === false) {
+        subject.source[subject.bind] = event.target[valueName] === 'true';
+      } else if (typeof subject.source[subject.bind] === 'number') {
+        subject.source[subject.bind] = +event.target[valueName] || 0;
+      } else {
+        subject.source[subject.bind] = event.target[valueName];
+      }
+    }
     if (subject.href) {
       if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
         event.preventDefault()
diff --git a/plugins/bindable.js b/plugins/bindable.js
index 7e25c46f..e7a882d0 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -1,38 +1,5 @@
-function attachEvent(node) {
-  const target = node.attributes.source;
-  let eventName = 'oninput';
-  let valueName = 'value';
-  if (node.attributes.type === 'checkbox' || node.attributes.type === 'radio') {
-    eventName = 'onclick';
-    valueName = 'checked';
-  } else if (node.type !== 'input' && node.type !== 'textarea') {
-    eventName = 'onchange';
-  }
-  const originalEvent = node.attributes[eventName];
-  node.attributes[eventName] = ({ event, value }) => {
-    if (valueName === 'checked') {
-      target[node.attributes.bind] = event.target[valueName];
-    } else if (target[node.attributes.bind] === true || target[node.attributes.bind] === false) {
-      target[node.attributes.bind] = event ? (event.target[valueName] === 'true') : value;
-    } else if (typeof target[node.attributes.bind] === 'number') {
-      target[node.attributes.bind] = parseFloat(event ? event.target[valueName] : value) || 0;
-    } else {
-      target[node.attributes.bind] = event ? event.target[valueName] : value;
-    }
-    if (originalEvent !== undefined) {
-      setTimeout(() => {
-        originalEvent({ ...node.attributes, event, value });
-      }, 0);
-    }
-  }
-}
-
 function match(node) {
-  return (
-    node?.attributes !== undefined &&
-    node.attributes.bind !== undefined &&
-    node.attributes.source !== undefined
-  )
+  return node?.attributes?.bind !== undefined
 }
 
 function transform({ node, environment }) {
@@ -46,9 +13,14 @@ function transform({ node, environment }) {
     node.attributes.value = target[node.attributes.bind] ?? '';
   }
   node.attributes.name = node.attributes.name || node.attributes.bind;
-
   if (environment.client) {
-    attachEvent(node);
+    if (node.attributes.type === 'checkbox' || node.attributes.type === 'radio') {
+      node.attributes.onclick ??= true;
+    } else if (node.type !== 'input' && node.type !== 'textarea') {
+      node.attributes.onchange ??= true;
+    } else {
+      node.attributes.oninput ??= true;
+    }
   }
 }
 
diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index dab2ab01..6c988453 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -1,6 +1,6 @@
 const defaultOptions = {
   launch: {
-    headless: true,
+    headless: false,
   },
   server: {
     command: 'npm run start',
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index 303aa6b0..94d1503c 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -13,27 +13,34 @@ class TwoWayBindings extends Nullstack {
 
   zero = 0
 
-  parse({ event, onchange }) {
+  bringsHappiness = false
+
+  parse({ event, source, name, callback }) {
     const normalized = event.target.value.replace(',', '').padStart(3, '0');
     const whole = (parseInt(normalized.slice(0, -2)) || 0).toString();
     const decimal = normalized.slice(normalized.length - 2);
     const value = parseFloat(whole + '.' + decimal);
-    const bringsHappyness = value >= 1000000;
-    onchange({ value, bringsHappyness });
+    const bringsHappiness = value >= 1000000;
+    source[name] = value
+    callback({ bringsHappiness })
   }
 
-  renderCurrencyInput({ value, name }) {
-    const formatted = value.toFixed(2).replace('.', ',');
-    return <input name={name} value={formatted} oninput={this.parse} />
+  renderCurrencyInput({ source, name, onchange }) {
+    const formatted = source[name].toFixed(2).replace('.', ',');
+    return <input data-currency name={name} source={source} value={formatted} oninput={this.parse} callback={onchange} />
   }
 
   updateCharacter({ value }) {
     this.character = this.array[value];
   }
 
+  setHappiness({ bringsHappiness }) {
+    this.bringsHappiness = bringsHappiness
+  }
+
   render({ params }) {
     return (
-      <div>
+      <div data-brings-happiness={this.bringsHappiness}>
         <input bind={this.zero} />
         <div data-number={this.number} />
         {!this.boolean && <div data-boolean-type={typeof this.boolean} />}
@@ -55,7 +62,7 @@ class TwoWayBindings extends Nullstack {
           <input bind={this.array[index]} />
         ))}
         <input bind={params.page} />
-        <CurrencyInput bind={this.currency} />
+        <CurrencyInput bind={this.currency} onchange={this.setHappiness} />
       </div>
     )
   }
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index a27bc860..f206294a 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -89,6 +89,11 @@ describe('TwoWayBindings', () => {
     expect(element).toBeTruthy();
   });
 
-  // test extra params bringHappiness
+  test('developers can create custom bindable components', async () => {
+    await page.type('[data-currency]', '696969696969');
+    await page.waitForSelector('[data-brings-happiness]')
+    const element = await page.$('[data-brings-happiness]');
+    expect(element).toBeTruthy();
+  });
 
 });
\ No newline at end of file

From df19c3f59a5d9c3cb2c3329bbaa9951a2901c696 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 22 May 2022 05:22:43 -0300
Subject: [PATCH 036/105] :zap: faster plugins

---
 client/index.js   |  4 ++--
 server/index.js   |  4 ++--
 shared/plugins.js | 14 +++++++-------
 tests/client.js   |  2 +-
 tests/server.js   |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/index.js b/client/index.js
index 4b36a657..89cb9b8e 100644
--- a/client/index.js
+++ b/client/index.js
@@ -3,7 +3,7 @@ import element from '../shared/element';
 import fragment from '../shared/fragment';
 import generateTree from '../shared/generateTree';
 import getProxyableMethods from '../shared/getProxyableMethods';
-import { loadPlugins, usePlugins } from '../shared/plugins';
+import { loadPlugins, useClientPlugins } from '../shared/plugins';
 import client from './client';
 import context, { generateContext } from './context';
 import environment from './environment';
@@ -41,7 +41,7 @@ export default class Nullstack {
   static element = element;
   static invoke = invoke;
   static fragment = fragment;
-  static use = usePlugins('client');
+  static use = useClientPlugins;
 
   static start(Starter) {
     setTimeout(async () => {
diff --git a/server/index.js b/server/index.js
index 6afd38d3..46a157a9 100644
--- a/server/index.js
+++ b/server/index.js
@@ -3,7 +3,7 @@ import { normalize } from 'path';
 import element from '../shared/element';
 import fragment from '../shared/fragment';
 import getProxyableMethods from '../shared/getProxyableMethods';
-import { usePlugins } from '../shared/plugins';
+import { useServerPlugins } from '../shared/plugins';
 import context from './context';
 import environment from './environment';
 import generator from './generator';
@@ -33,7 +33,7 @@ class Nullstack {
   static element = element;
   static invoke = invoke;
   static fragment = fragment;
-  static use = usePlugins('server');
+  static use = useServerPlugins;
 
   static start(Starter) {
     if (this.name.indexOf('Nullstack') > -1) {
diff --git a/shared/plugins.js b/shared/plugins.js
index f6a639eb..f60510a7 100644
--- a/shared/plugins.js
+++ b/shared/plugins.js
@@ -4,7 +4,7 @@ import datable from '../plugins/datable';
 import parameterizable from '../plugins/parameterizable';
 import anchorable from '../plugins/anchorable';
 
-let plugins = [
+const plugins = [
   parameterizable,
   anchorable,
   routable,
@@ -31,10 +31,10 @@ export function loadPlugins(scope) {
   return plugins;
 }
 
-export function usePlugins(environment) {
-  return async (...userPlugins) => {
-    plugins = [
-      ...new Set([...userPlugins.flat(), ...plugins])
-    ].filter((plugin) => plugin[environment])
-  }
+export function useClientPlugins(plugin) {
+  if (plugin.client) plugins.push(plugin)
+}
+
+export function useServerPlugins(plugin) {
+  if (plugin.server) plugins.push(plugin)
 }
\ No newline at end of file
diff --git a/tests/client.js b/tests/client.js
index 7d1295ed..8268343f 100644
--- a/tests/client.js
+++ b/tests/client.js
@@ -2,7 +2,7 @@ import Nullstack from 'nullstack';
 import Application from './src/Application';
 import vueable from './src/plugins/vueable';
 
-Nullstack.use([vueable], vueable);
+Nullstack.use(vueable);
 
 const context = Nullstack.start(Application);
 
diff --git a/tests/server.js b/tests/server.js
index 1ae9b42a..37a7a7fc 100644
--- a/tests/server.js
+++ b/tests/server.js
@@ -7,7 +7,7 @@ import ContextWorker from './src/ContextWorker';
 import vueable from './src/plugins/vueable';
 import ServerRequestAndResponse from './src/ServerRequestAndResponse';
 
-Nullstack.use([vueable], vueable);
+Nullstack.use(vueable);
 
 const context = Nullstack.start(Application);
 

From 94f166c254791727d210d6cdc0003522e73a1860 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 22 May 2022 16:33:20 -0300
Subject: [PATCH 037/105] :zap: faster heads

---
 client/client.js               |   6 +-
 client/hydrate.js              |  31 +++++++---
 client/index.js                |   7 ++-
 client/rerender.js             | 103 ++++++++++++---------------------
 server/prerender.js            |   2 +
 server/render.js               |  45 ++++++++------
 shared/generateTree.js         |  48 +++++++--------
 tests/jest-puppeteer.config.js |   2 +-
 tests/src/BodyFragment.njs     |   2 +-
 tests/src/DynamicHead.njs      |   2 +-
 10 files changed, 124 insertions(+), 124 deletions(-)

diff --git a/client/client.js b/client/client.js
index 4d253568..dfa2abd6 100644
--- a/client/client.js
+++ b/client/client.js
@@ -21,6 +21,8 @@ client.generateContext = generateContext
 client.renderQueue = null
 client.currentBody = {}
 client.nextBody = {}
+client.currentHead = []
+client.nextHead = []
 
 client.update = async function update() {
   if (client.initialized) {
@@ -33,10 +35,6 @@ client.update = async function update() {
       client.renewalQueue = []
       client.nextVirtualDom = await generateTree(client.initializer(), scope)
       rerender()
-      client.virtualDom = client.nextVirtualDom
-      client.nextVirtualDom = null
-      client.currentBody = client.nextBody
-      client.nextBody = {}
       client.processLifecycleQueues()
     }, 16)
   }
diff --git a/client/hydrate.js b/client/hydrate.js
index d73e11ec..841ed866 100644
--- a/client/hydrate.js
+++ b/client/hydrate.js
@@ -1,10 +1,10 @@
+import { isFalse } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
+import client from './client';
 
-export default function hydrate(selector, node) {
-  if (node.head) {
-    node.element = document.getElementById(node.attributes.id)
-    return
-  }
+let pool = []
+
+function hydrateBody(selector, node) {
   if (node?.attributes?.html) {
     anchorableElement(selector);
   }
@@ -13,7 +13,7 @@ export default function hydrate(selector, node) {
     if ((element.tagName === 'TEXTAREA' || element.tagName === 'textarea') && element.childNodes.length === 0) {
       element.appendChild(document.createTextNode(''));
     } else if (element.COMMENT_NODE === 8 && element.textContent === '#') {
-      element.remove()
+      pool.push(element.remove())
     }
   }
   if (!node.children) return
@@ -26,6 +26,23 @@ export default function hydrate(selector, node) {
       )
       throw new Error('Virtual DOM does not match the DOM.')
     }
-    hydrate(selector.childNodes[i], node.children[i])
+    hydrateBody(selector.childNodes[i], node.children[i])
+  }
+}
+
+function hydrateHead() {
+  for (const node of client.nextHead) {
+    if (isFalse(node)) {
+      node.element = pool.pop() || document.createComment("")
+      document.head.append(node.element)
+    } else {
+      node.element = document.getElementById(node.attributes.id)
+    }
   }
+  pool = null
+}
+
+export default function hydrate(selector, node) {
+  hydrateBody(selector, node)
+  hydrateHead()
 }
\ No newline at end of file
diff --git a/client/index.js b/client/index.js
index 89cb9b8e..30c2f6ff 100644
--- a/client/index.js
+++ b/client/index.js
@@ -64,16 +64,17 @@ export default class Nullstack {
         client.selector = body
       } else {
         client.virtualDom = await generateTree(client.initializer(), scope);
-        client.currentBody = client.nextBody
         hydrate(client.selector, client.virtualDom)
+        client.currentBody = client.nextBody
+        client.currentHead = client.nextHead
+        client.nextBody = {}
+        client.nextHead = []
         context.environment = environment;
         scope.plugins = loadPlugins(scope);
         worker.online = navigator.onLine;
         typeof context.start === 'function' && await context.start(context);
         client.nextVirtualDom = await generateTree(client.initializer(), scope);
         rerender();
-        client.virtualDom = client.nextVirtualDom;
-        client.nextVirtualDom = null;
       }
       client.processLifecycleQueues();
       delete state.context;
diff --git a/client/rerender.js b/client/rerender.js
index 2e85670f..d70b6c0a 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -8,21 +8,6 @@ import generateTruthyString from '../shared/generateTruthyString';
 const head = document.head
 const body = document.body
 
-function getHeadElement(node) {
-  if (node.element) {
-    return node.element
-  }
-  node.element = document.getElementById(node.attributes.id)
-  return node.element
-}
-
-function removeHeadElement(node) {
-  const element = getHeadElement(node)
-  if (element) {
-    element.remove()
-  }
-}
-
 function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
@@ -83,6 +68,35 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
   }
 }
 
+function updateHeadChild(current, next) {
+  if (isUndefined(current) && !isUndefined(next)) {
+    const nextSelector = render(next);
+    head.append(nextSelector)
+    return
+  }
+  if (!isUndefined(current) && isUndefined(next)) {
+    current.element.remove()
+    return
+  }
+  next.element = current.element
+  if (isFalse(current) && isFalse(next)) {
+    return
+  }
+  if (current.type !== next.type) {
+    const nextSelector = render(next);
+    current.element.replaceWith(nextSelector)
+    return
+  }
+  updateAttributes(current.element, current.attributes, next.attributes)
+}
+
+function updateHeadChildren(currentChildren, nextChildren) {
+  const limit = Math.max(currentChildren.length, nextChildren.length);
+  for (let i = 0; i < limit; i++) {
+    updateHeadChild(currentChildren[i], nextChildren[i])
+  }
+}
+
 function _rerender(current, next) {
 
   const selector = current.element
@@ -96,57 +110,6 @@ function _rerender(current, next) {
     return;
   }
 
-  if ((current.type === 'head' ^ next.type === 'head') && !isFalse(current) && !isFalse(next)) {
-    const nextSelector = render(next);
-    current.element.replaceWith(nextSelector);
-  }
-
-  if (current.type !== 'head' && next.type === 'head') {
-    const limit = next.children.length;
-    for (let i = limit - 1; i > -1; i--) {
-      const nextSelector = render(next.children[i]);
-      head.appendChild(nextSelector)
-    }
-    return
-  } else if (current.type === 'head' && next.type === 'head') {
-    const limit = Math.max(current.children.length, next.children.length);
-    for (let i = 0; i < limit; i++) {
-      if (isUndefined(current.children[i]) && !isFalse(next.children[i])) {
-        const nextSelector = render(next.children[i]);
-        head.appendChild(nextSelector)
-      } else if (isUndefined(next.children[i]) && !isFalse(current.children[i])) {
-        removeHeadElement(current.children[i])
-      } else if (!isFalse(current.children[i]) && !isFalse(next.children[i])) {
-        if (current.children[i].type === next.children[i].type) {
-          const selector = getHeadElement(current.children[i])
-          if (selector) {
-            next.children[i].element = selector
-            updateAttributes(selector, current.children[i].attributes, next.children[i].attributes)
-          } else {
-            const nextSelector = render(next.children[i]);
-            head.appendChild(nextSelector)
-          }
-        } else {
-          removeHeadElement(current.children[i])
-          const nextSelector = render(next.children[i]);
-          head.appendChild(nextSelector)
-        }
-      } else if (isFalse(current.children[i]) && !isFalse(next.children[i])) {
-        const nextSelector = render(next.children[i]);
-        head.appendChild(nextSelector)
-      } else if (current.children[i].type) {
-        removeHeadElement(current.children[i])
-      }
-    }
-    return
-  } else if (current.type === 'head' && next.type !== 'head') {
-    const limit = current.children.length;
-    for (let i = limit - 1; i > -1; i--) {
-      removeHeadElement(current.children[i])
-    }
-    return
-  }
-
   if (current.type !== next.type) {
     const nextSelector = render(next);
     selector.replaceWith(nextSelector);
@@ -186,6 +149,7 @@ function _rerender(current, next) {
       }
     }
 
+    // todo: optimize
     if (next.type === 'textarea') {
       selector.value = next.children[0].text;
     }
@@ -201,4 +165,11 @@ function _rerender(current, next) {
 export default function rerender() {
   _rerender(client.virtualDom, client.nextVirtualDom)
   updateAttributes(body, client.currentBody, client.nextBody)
+  updateHeadChildren(client.currentHead, client.nextHead)
+  client.virtualDom = client.nextVirtualDom
+  client.nextVirtualDom = null
+  client.currentBody = client.nextBody
+  client.nextBody = {}
+  client.currentHead = client.nextHead
+  client.nextHead = []
 }
\ No newline at end of file
diff --git a/server/prerender.js b/server/prerender.js
index b7dd3a98..1c94800b 100644
--- a/server/prerender.js
+++ b/server/prerender.js
@@ -32,6 +32,7 @@ export async function prerender(request, response) {
   scope.context = context;
   scope.generateContext = generateContext(context);
   scope.nextBody = {}
+  scope.nextHead = []
   scope.plugins = loadPlugins(scope);
 
   try {
@@ -46,6 +47,7 @@ export async function prerender(request, response) {
   } finally {
     if (context.page.status !== 200) {
       scope.nextBody = {}
+      scope.nextHead = []
       for (const key in context.router._routes) {
         delete context.router._routes[key];
       }
diff --git a/server/render.js b/server/render.js
index e126b84b..a67f2d18 100644
--- a/server/render.js
+++ b/server/render.js
@@ -21,46 +21,55 @@ function isSelfClosing(type) {
   return false;
 }
 
-export default function render(node, scope, next) {
-
+function renderBody(node, scope, next) {
   if (isFalse(node)) {
     return "<!---->";
   }
-
   if (node.type === 'text') {
     const text = node.text === '' ? ' ' : sanitizeHtml(node.text.toString())
     return next && next.type === 'text' ? text + "<!--#-->" : text
   }
-
   let element = `<${node.type}`;
-
   element += renderAttributes(node.attributes)
-
   if (isSelfClosing(node.type)) {
     element += '/>';
   } else {
     element += '>';
     if (node.attributes.html) {
       const source = node.attributes.html;
-      if (node.type === 'head') {
-        scope.head += source;
-      } else {
-        element += source;
-      }
+      element += source;
     } else if (node.type === 'textarea') {
       element += node.children[0].text;
     } else {
       for (let i = 0; i < node.children.length; i++) {
-        const source = render(node.children[i], scope, node.children[i + 1]);
-        if (node.type === 'head') {
-          scope.head += source;
-        } else {
-          element += source;
-        }
+        element += renderBody(node.children[i], scope, node.children[i + 1]);
       }
     }
     element += `</${node.type}>`;
   }
+  return element;
+}
 
-  return node.type === 'head' ? '<!---->' : element;
+function renderHead(scope) {
+  const limit = scope.nextHead.length
+  for (let i = 0; i < limit; i++) {
+    const node = scope.nextHead[i]
+    if (isFalse(node)) {
+      continue;
+    }
+    scope.head += `<${node.type}`;
+    scope.head += renderAttributes(node.attributes)
+    if (isSelfClosing(node.type)) {
+      scope.head += '/>';
+    } else {
+      scope.head += '>';
+      scope.head += node.attributes.html
+      scope.head += `</${node.type}>`
+    }
+  }
+}
+
+export default function render(node, scope, next) {
+  renderHead(scope)
+  return renderBody(node, scope, next)
 }
\ No newline at end of file
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 92847a91..c9041532 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -3,7 +3,7 @@ import { isClass, isFalse, isFunction, isUndefined } from '../shared/nodes';
 import fragment from './fragment';
 import { transformBody, transformNodes } from './plugins';
 
-async function generateBranch(parent, node, depth, scope) {
+async function generateBranch(siblings, node, depth, scope) {
 
   transformNodes(scope, node, depth);
 
@@ -15,11 +15,10 @@ async function generateBranch(parent, node, depth, scope) {
       message += 'This error usually happens because of a missing import statement or a typo on a component tag';
     }
     throw new Error(message)
-    return;
   }
 
   if (isFalse(node)) {
-    parent.children.push({
+    siblings.push({
       type: false,
       attributes: {}
     });
@@ -102,7 +101,7 @@ async function generateBranch(parent, node, depth, scope) {
     }
     node.children = [].concat(children);
     for (let i = 0; i < node.children.length; i++) {
-      await generateBranch(parent, node.children[i], depth + '-' + i, scope);
+      await generateBranch(siblings, node.children[i], depth + '-' + i, scope);
     }
     return;
   }
@@ -137,45 +136,48 @@ async function generateBranch(parent, node, depth, scope) {
     const children = node.type(context);
     node.children = [].concat(children);
     for (let i = 0; i < node.children.length; i++) {
-      await generateBranch(parent, node.children[i], depth + '-' + i, scope);
+      await generateBranch(siblings, node.children[i], depth + '-' + i, scope);
     }
     return;
   }
 
   if (node.type) {
-    const branch = {
-      type: node.type,
-      attributes: node.attributes,
-      instance: node.instance,
-      children: []
-    }
-    if (node.children) {
+    if (node.type === 'head') {
+      siblings.push({
+        type: false,
+        attributes: {}
+      });
       for (let i = 0; i < node.children.length; i++) {
-        await generateBranch(branch, node.children[i], depth + '-' + i, scope);
+        const id = depth + '-' + i
+        await generateBranch(scope.nextHead, node.children[i], id, scope);
+        scope.nextHead[scope.nextHead.length - 1].attributes.id ??= id
       }
-      if (node.type === 'head') {
-        for (let i = 0; i < branch.children.length; i++) {
-          if (branch.children[i].attributes) {
-            branch.children[i].head = true
-            branch.children[i].attributes.id ??= depth + '-' + i
-          }
-        }
+    } else if (node.children) {
+      const branch = {
+        type: node.type,
+        attributes: node.attributes,
+        children: [],
+        instance: node.instance
+      }
+      for (let i = 0; i < node.children.length; i++) {
+        await generateBranch(branch.children, node.children[i], depth + '-' + i, scope);
       }
+      siblings.push(branch);
     }
-    parent.children.push(branch);
     return;
   }
 
-  parent.children.push({
+  siblings.push({
     type: 'text',
     text: node,
+    instance: node.instance,
   });
 
 }
 
 export default async function generateTree(node, scope) {
   const tree = { type: 'div', attributes: { id: 'application' }, children: [] };
-  await generateBranch(tree, node, '0', scope);
+  await generateBranch(tree.children, node, '0', scope);
   transformBody(scope.nextBody)
   return tree;
 }
\ No newline at end of file
diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index 6c988453..dab2ab01 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -1,6 +1,6 @@
 const defaultOptions = {
   launch: {
-    headless: false,
+    headless: true,
   },
   server: {
     command: 'npm run start',
diff --git a/tests/src/BodyFragment.njs b/tests/src/BodyFragment.njs
index 39d965fb..57da161b 100644
--- a/tests/src/BodyFragment.njs
+++ b/tests/src/BodyFragment.njs
@@ -26,7 +26,7 @@ class BodyFragment extends Nullstack {
         </body>
         {this.visible &&
           <body data-visible data-has-visible={this.hasDataVisible}>
-            BodyFragment
+            BodyFragment2
           </body>
         }
         <a href="/">home</a>
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
index df3fb599..9705f975 100644
--- a/tests/src/DynamicHead.njs
+++ b/tests/src/DynamicHead.njs
@@ -43,7 +43,7 @@ class DynamicHead extends Nullstack {
           {Array(this.count + 1 - this.negativeCount).fill(<style html={dynamicLength} data-dynamic-length={this.count} data-negative-count={this.negativeCount === 1} />)}
         </head>
         <button onclick={{ count: this.count + 1 }} data-increment> inc {this.count} </button>
-        <button onclick={{ negativeCount: this.negativeCount + 1 }} data-decrement> dec {this.count} </button>
+        <button onclick={{ negativeCount: this.negativeCount + 1 }} data-decrement> dec {this.negativeCount} </button>
         <span data-red-blue> data-red-blue </span>
         <span data-prerender-conditional> data-prerender-conditional </span>
         <span data-rerender-conditional> data-rerender-conditional </span>

From f030e4b23a86a568feec21044c6be95fec7411f6 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 22 May 2022 20:37:19 -0300
Subject: [PATCH 038/105] :zap: faster attribute updates

---
 client/client.js                  |  2 ++
 client/hydrate.js                 |  2 +-
 client/rerender.js                | 34 ++++++++-----------------------
 tests/src/ArrayAttributes.test.js | 10 ++++-----
 tests/src/TwoWayBindings.njs      |  5 ++++-
 tests/src/TwoWayBindings.test.js  | 31 ++++++++++++++++++++++++----
 6 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/client/client.js b/client/client.js
index dfa2abd6..d97d38de 100644
--- a/client/client.js
+++ b/client/client.js
@@ -23,6 +23,8 @@ client.currentBody = {}
 client.nextBody = {}
 client.currentHead = []
 client.nextHead = []
+client.head = document.head
+client.body = document.body
 
 client.update = async function update() {
   if (client.initialized) {
diff --git a/client/hydrate.js b/client/hydrate.js
index 841ed866..6d4c5ca4 100644
--- a/client/hydrate.js
+++ b/client/hydrate.js
@@ -34,7 +34,7 @@ function hydrateHead() {
   for (const node of client.nextHead) {
     if (isFalse(node)) {
       node.element = pool.pop() || document.createComment("")
-      document.head.append(node.element)
+      client.head.append(node.element)
     } else {
       node.element = document.getElementById(node.attributes.id)
     }
diff --git a/client/rerender.js b/client/rerender.js
index d70b6c0a..375bbeb6 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -5,9 +5,6 @@ import render from './render';
 import { generateCallback, eventCallbacks, eventSubjects } from './events'
 import generateTruthyString from '../shared/generateTruthyString';
 
-const head = document.head
-const body = document.body
-
 function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
@@ -16,13 +13,9 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
         selector.innerHTML = nextAttributes[name];
         anchorableElement(selector);
       }
-    } else if (name === 'checked') {
-      if (nextAttributes[name] !== selector.value) {
-        selector.checked = nextAttributes[name];
-      }
-    } else if (name === 'value') {
-      if (nextAttributes[name] !== selector.value) {
-        selector.value = nextAttributes[name];
+    } else if (name === 'checked' || name === 'value') {
+      if (nextAttributes[name] !== currentAttributes[name] && nextAttributes[name] !== selector[name]) {
+        selector[name] = nextAttributes[name];
       }
     } else if (name.startsWith('on')) {
       const eventName = name.substring(2);
@@ -71,7 +64,7 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
 function updateHeadChild(current, next) {
   if (isUndefined(current) && !isUndefined(next)) {
     const nextSelector = render(next);
-    head.append(nextSelector)
+    client.head.append(nextSelector)
     return
   }
   if (!isUndefined(current) && isUndefined(next)) {
@@ -123,10 +116,7 @@ function _rerender(current, next) {
     return;
   }
 
-  if (current.type === next.type) {
-    updateAttributes(selector, current.attributes, next.attributes)
-
-    if (next.attributes.html) return;
+  if (!next.attributes.html) {
     const limit = Math.max(current.children.length, next.children.length);
     if (next.children.length > current.children.length) {
       for (let i = 0; i < current.children.length; i++) {
@@ -148,23 +138,15 @@ function _rerender(current, next) {
         _rerender(current.children[i], next.children[i]);
       }
     }
-
-    // todo: optimize
-    if (next.type === 'textarea') {
-      selector.value = next.children[0].text;
-    }
-
-    if (next.type === 'select') {
-      selector.value = next.attributes.value;
-    }
-
   }
 
+  updateAttributes(selector, current.attributes, next.attributes)
+
 }
 
 export default function rerender() {
   _rerender(client.virtualDom, client.nextVirtualDom)
-  updateAttributes(body, client.currentBody, client.nextBody)
+  updateAttributes(client.body, client.currentBody, client.nextBody)
   updateHeadChildren(client.currentHead, client.nextHead)
   client.virtualDom = client.nextVirtualDom
   client.nextVirtualDom = null
diff --git a/tests/src/ArrayAttributes.test.js b/tests/src/ArrayAttributes.test.js
index ff997893..72d18ea9 100644
--- a/tests/src/ArrayAttributes.test.js
+++ b/tests/src/ArrayAttributes.test.js
@@ -1,10 +1,10 @@
-beforeAll(async () => {
-  await page.goto('http://localhost:6969/array-attributes');
-  await page.waitForSelector('[data-hydrated]')
-});
-
 describe('ArrayAttributes jsx', () => {
 
+  beforeEach(async () => {
+    await page.goto('http://localhost:6969/array-attributes');
+    await page.waitForSelector('[data-hydrated]')
+  });
+
   test('classes can be simple strings', async () => {
     await page.click('[data-d]');
     await page.waitForSelector('[class="d"]')
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index 94d1503c..03616b6a 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -46,16 +46,19 @@ class TwoWayBindings extends Nullstack {
         {!this.boolean && <div data-boolean-type={typeof this.boolean} />}
         {this.number > 1 && <div data-number-type={typeof this.number} />}
         <input bind={this.number} oninput={this.updateCharacter} />
-        <textarea bind={this.text} />
+        <textarea bind={this.text} data-text={this.text} />
+        <button onclick={{ text: 'bbbb' }} data-textarea>textarea b</button>
         <div data-character={this.character} />
         <select bind={this.character}>
           {this.array.map((character) => <option>{character}</option>)}
         </select>
+        <button onclick={{ character: 'b' }} data-select>select b</button>
         <select bind={this.boolean} name="boolean-select">
           <option value={true}>true</option>
           <option value={false}>false</option>
         </select>
         <input bind={this.boolean} type="checkbox" />
+        <button onclick={{ boolean: false }} data-checkbox>boolean false</button>
         <input bind={this.object.count} />
         <input bind={this.undeclared} data-undeclared />
         {this.array.map((value, index) => (
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index f206294a..8accaf98 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -1,9 +1,9 @@
-beforeAll(async () => {
-  await page.goto('http://localhost:6969/two-way-bindings?page=1');
-});
-
 describe('TwoWayBindings', () => {
 
+  beforeEach(async () => {
+    await page.goto('http://localhost:6969/two-way-bindings?page=1');
+  });
+
   test('inputs can be bound to zero', async () => {
     const element = await page.$('[value="0"]');
     expect(element).toBeTruthy();
@@ -29,6 +29,27 @@ describe('TwoWayBindings', () => {
     expect(value).toMatch('aaaa');
   });
 
+  test('textareas value reflects variable changes', async () => {
+    await page.click('[data-textarea]')
+    await page.waitForSelector('textarea[data-text="bbbb"]')
+    const value = await page.$eval('[name="text"]', (element) => element.value);
+    expect(value).toMatch('bbbb');
+  });
+
+  test('checkboxes value reflects variable changes', async () => {
+    await page.click('[data-checkbox]')
+    await page.waitForSelector('input[type=checkbox]:not(:checked)')
+    const element = await page.$('input[type=checkbox]:not(:checked)')
+    expect(element).toBeTruthy();
+  });
+
+  test('select value reflects variable changes', async () => {
+    await page.click('[data-select]')
+    await page.waitForSelector('[data-character="b"]')
+    const value = await page.$eval('select', (element) => element.value);
+    expect(value).toMatch('b');
+  });
+
   test('selects can be bound', async () => {
     const value = await page.$eval('[name="character"]', (element) => element.value);
     expect(value).toMatch('a');
@@ -78,12 +99,14 @@ describe('TwoWayBindings', () => {
   });
 
   test('bind keeps the primitive type of the variable', async () => {
+    await page.type('[name="number"]', '2');
     await page.waitForSelector('[data-number-type="number"]');
     const element = await page.$('[data-number-type="number"]');
     expect(element).toBeTruthy();
   });
 
   test('bound inputs can have custom events that triger after the value is set', async () => {
+    await page.type('[name="number"]', '2');
     await page.waitForSelector('[data-character="b"]');
     const element = await page.$('[data-character="b"]');
     expect(element).toBeTruthy();

From faf2f83a50c709404798ad0da7fc058d2463f4c9 Mon Sep 17 00:00:00 2001
From: Bruno Leonardo Michels <brunolm7@gmail.com>
Date: Wed, 25 May 2022 15:30:13 -0700
Subject: [PATCH 039/105] Add support for absolute links and router paths

---
 client/router.js                  |   5 +-
 tests/package.json                |  10 +-
 tests/src/RoutesAndParams.njs     |  46 +++++-
 tests/src/RoutesAndParams.test.js | 229 +++++++++++++++++++++++++++---
 4 files changed, 266 insertions(+), 24 deletions(-)

diff --git a/client/router.js b/client/router.js
index 5b666376..48b9ad09 100644
--- a/client/router.js
+++ b/client/router.js
@@ -63,10 +63,11 @@ class Router {
   }
 
   async _redirect(target) {
-    if (target.startsWith('http')) {
+    if (/^(\w+:|\/\/)([^.]+.)/.test(target)) {
       return (window.location.href = target);
     }
-    const { url, hash, urlWithHash } = extractLocation(target);
+    const absoluteUrl = new URL(target, document.baseURI);
+    const { url, hash, urlWithHash } = extractLocation(absoluteUrl.pathname + absoluteUrl.search + absoluteUrl.hash);
     if (url !== this._url || this._hash !== hash) {
       await this._update(urlWithHash, true);
     }
diff --git a/tests/package.json b/tests/package.json
index 25239476..7279dfdb 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -5,11 +5,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "jest": "^26.6.3",
+    "glob": "^8.0.3",
+    "jest": "^28.1.0",
+    "jest-puppeteer": "^6.1.0",
     "nullstack": "*",
-    "puppeteer": "^5.5.0",
-    "jest-puppeteer": "^6.0.3",
-    "glob": "^7.1.7",
+    "puppeteer": "^14.1.1",
     "purgecss-webpack-plugin": "^4.1.3"
   },
   "scripts": {
@@ -18,4 +18,4 @@
     "test": "npm run build && jest",
     "script": "node src/scripts/run.js"
   }
-}
\ No newline at end of file
+}
diff --git a/tests/src/RoutesAndParams.njs b/tests/src/RoutesAndParams.njs
index a694ac96..5a368401 100644
--- a/tests/src/RoutesAndParams.njs
+++ b/tests/src/RoutesAndParams.njs
@@ -3,6 +3,32 @@ class RoutesAndParams extends Nullstack {
 
   paramHydrated = false;
 
+  initiate({ router, params }) {
+    if (params.parent) {
+      router.url = '../parent'
+    } else if (params.current) {
+      router.url = './current'
+    } else if (params.https) {
+      router.url = 'https://nullstack.app/'
+    } else if (params.http) {
+      router.url = 'http://localhost:6969/http'
+    } else if (params.same) {
+      router.url = '//localhost:6969/routes-and-params/href-same-protocol'
+    } else if (params.ftp) {
+      router.url = 'ftp://nullstack.app/'
+    } else if (params.tel) {
+      router.url = 'tel:1555696969'
+    } else if (params.mailto) {
+      router.url = 'mailto:contact@nullstack.app'
+    } else if (params.relative) {
+      router.url = 'relative'
+    } else if (params.relativeComposed) {
+      router.url = 'relative/6969'
+    } else if (params.root) {
+      router.url = '/root/6969'
+    }
+  }
+
   hydrate(context) {
     const { router, params } = context;
     this.paramHydrated = params.id === 'a';
@@ -48,10 +74,28 @@ class RoutesAndParams extends Nullstack {
     router.url = 'https://nullstack.app';
   }
 
+  renderHrefs() {
+    return (
+      <>
+        <a href="https://nullstack.app/"> Nullstack HTTPS</a>
+        <a href="http://nullstack.app/"> Nullstack HTTP</a>
+        <a href="//nullstack.app/"> Nullstack SAME</a>
+        <a href="ftp://nullstack.app/" data-ftp-clicked={this.clickedFtp} onclick={{ clickedFtp: true }}> Nullstack FTP</a>
+        <a href="tel:1555696969" data-tel-clicked={this.clickedTel} onclick={{ clickedTel: true }}> Nullstack TEL</a>
+        <a href="mailto:contact@nullstack.app" data-mailto-clicked={this.clickedMailTo} onclick={{ clickedMailTo: true }}> Nullstack MAILTO</a>
+        <a href="relative"> Nullstack RELATIVE</a>
+        <a href="relative/6969"> Nullstack RELATIVE TWO</a>
+        <a href="/root/6969"> Nullstack ROOT</a>
+        <a href="./current"> Nullstack CURRENT DIR</a>
+        <a href="../parent"> Nullstack PARENT DIR</a>
+      </>
+    )
+  }
+
   render({ router, params, eventTriggered, self }) {
     return (
       <div>
-        <a href="https://nullstack.app"> Nullstack</a>
+        <Hrefs />
         <button data-absolute onclick={this.goToDocs}> Nullstack </button>
         <a href="/routes-and-params/no-hash#hash">hash</a>
         <div data-hydrated={self.hydrated} data-event-triggered={eventTriggered} />
diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
index 847fbdd0..cf4f354d 100644
--- a/tests/src/RoutesAndParams.test.js
+++ b/tests/src/RoutesAndParams.test.js
@@ -1,3 +1,10 @@
+beforeAll(async () => {
+  await page.on('dialog', async dialog => {
+    await dialog.dismiss();
+  })
+  // page.on('console', (msg) => console.log('[LOG]', msg.text()))
+});
+
 describe('RoutesAndParams /routes-and-params', () => {
 
   beforeAll(async () => {
@@ -193,21 +200,6 @@ describe('RoutesAndParams /routes-and-params/d?boolean=true#hash spa', () => {
 
 });
 
-describe('RoutesAndParams /routes-and-params', () => {
-
-  beforeAll(async () => {
-    await page.goto('http://localhost:6969/routes-and-params');
-  });
-
-  test('a with absolute hrefs cause a hard redirect', async () => {
-    await page.click('[href="https://nullstack.app"]');
-    await page.waitForSelector('[href="/contributors"]');
-    const url = await page.url();
-    expect(url).toMatch('https://nullstack.app');
-  });
-
-});
-
 describe('RoutesAndParams /routes-and-params', () => {
 
   beforeAll(async () => {
@@ -275,4 +267,209 @@ describe('RoutesAndParams /routes-and-params/inner-html', () => {
     expect(element).toBeTruthy();
   });
 
-});
\ No newline at end of file
+});
+
+describe('RoutesAndParams /routes-and-params/hrefs', () => {
+
+  beforeEach(async () => {
+    await page.goto('http://localhost:6969/routes-and-params/hrefs');
+  });
+
+  test('https urls do a full redirect', async () => {
+    await Promise.all([
+      page.click('[href="https://nullstack.app/"]'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toMatch('://nullstack.app');
+  });
+
+  test('http urls do a full redirect', async () => {
+    await Promise.all([
+      page.click('[href="http://nullstack.app/"]'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toMatch('://nullstack.app');
+  });
+
+  test('// urls do a full redirect', async () => {
+    await Promise.all([
+      page.click('[href="//nullstack.app/"]'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toMatch('://nullstack.app');
+  });
+
+  test('ftp urls do not redirect', async () => {
+    await page.click('[href="ftp://nullstack.app/"]'),
+    await page.waitForSelector('[data-ftp-clicked]');
+    const element = await page.$('[data-ftp-clicked]');
+    expect(element).toBeTruthy();
+  });
+
+  test('tel urls do not redirect', async () => {
+    await page.click('[href="tel:1555696969"]'),
+    await page.waitForSelector('[data-tel-clicked]');
+    const element = await page.$('[data-tel-clicked]');
+    expect(element).toBeTruthy();
+  });
+
+  test('mailto urls do not redirect', async () => {
+    await page.click('[href="mailto:contact@nullstack.app"]'),
+    await page.waitForSelector('[data-mailto-clicked]');
+    const element = await page.$('[data-mailto-clicked]');
+    expect(element).toBeTruthy();
+  });
+
+  test('relative urls redirect', async () => {
+    await Promise.all([
+       page.click('[href="relative"]'),
+       page.waitForNavigation(),
+    ])
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/routes-and-params/relative');
+  });
+  
+  test('relative composed urls redirect', async () => {
+    await Promise.all([
+       page.click('[href="relative/6969"]'),
+       page.waitForNavigation(),
+    ])
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/routes-and-params/relative/6969');
+  });
+
+  test('root urls redirect', async () => {
+    await Promise.all([
+       page.click('[href="/root/6969"]'),
+       page.waitForNavigation(),
+    ])
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/root/6969');
+  });
+
+  test('current urls redirect', async () => {
+    await Promise.all([
+       page.click('[href="./current"]'),
+       page.waitForNavigation(),
+    ])
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/routes-and-params/current');
+  });
+
+  test('parent urls redirect', async () => {
+    await Promise.all([
+       page.click('[href="../parent"]'),
+       page.waitForNavigation(),
+    ])
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/parent');
+  });
+
+});
+
+
+describe('ssr RoutesAndParams /routes-and-params/hrefs', () => {
+
+  test('ssr parent', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?parent=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/parent');
+  });
+  
+  test('ssr current', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?current=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/routes-and-params/current');
+  });
+  
+  test('ssr https', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?https=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('https://nullstack.app/');
+  });
+
+  test('ssr http', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?http=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/http');
+  });
+  
+  test('ssr same', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?same=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/routes-and-params/href-same-protocol');
+  });
+  
+  // test.skip('ssr ftp', async () => {
+  //   await Promise.all([
+  //     page.goto('http://localhost:6969/routes-and-params/hrefs?ftp=1'),
+  //     page.waitForNavigation(),
+  //   ]);
+  //   const url = await page.url();
+  //   expect(url).toEqual('https://nullstack.app/');
+  // });
+
+  // test.skip('ssr tel', async () => {
+  //   await Promise.all([
+  //     page.goto('http://localhost:6969/routes-and-params/hrefs?tel=1'),
+  //     page.waitForNavigation(),
+  //   ]);
+  //   const url = await page.url();
+  //   expect(url).toEqual('https://nullstack.app/');
+  // });
+  
+  // test.skip('ssr mailto', async () => {
+  //   await Promise.all([
+  //     page.goto('http://localhost:6969/routes-and-params/hrefs?mailto=1'),
+  //     page.waitForNavigation(),
+  //   ]);
+  //   const url = await page.url();
+  //   expect(url).toEqual('https://nullstack.app/');
+  // });
+  
+  test('ssr relative', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?relative=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/routes-and-params/relative');
+  });
+  
+  test('ssr relativeComposed', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?relativeComposed=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/routes-and-params/relative/6969');
+  });
+  
+  test('ssr root', async () => {
+    await Promise.all([
+      page.goto('http://localhost:6969/routes-and-params/hrefs?root=1'),
+      page.waitForNavigation(),
+    ]);
+    const url = await page.url();
+    expect(url).toEqual('http://localhost:6969/root/6969');
+  });
+
+});

From aaf30d0ac66d02c0414b8572e9a1e7f7d26b312f Mon Sep 17 00:00:00 2001
From: BrunoLM <brunolm7@gmail.com>
Date: Wed, 25 May 2022 21:29:30 -0300
Subject: [PATCH 040/105] Update tests/src/RoutesAndParams.test.js

Co-authored-by: Christian Mortaro <christian.mortaro@gmail.com>
---
 tests/src/RoutesAndParams.test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
index cf4f354d..da69cb1a 100644
--- a/tests/src/RoutesAndParams.test.js
+++ b/tests/src/RoutesAndParams.test.js
@@ -2,7 +2,6 @@ beforeAll(async () => {
   await page.on('dialog', async dialog => {
     await dialog.dismiss();
   })
-  // page.on('console', (msg) => console.log('[LOG]', msg.text()))
 });
 
 describe('RoutesAndParams /routes-and-params', () => {

From 99dc39e91f93903a38a4dc477fb12b4e1630779a Mon Sep 17 00:00:00 2001
From: BrunoLM <brunolm7@gmail.com>
Date: Wed, 25 May 2022 21:29:47 -0300
Subject: [PATCH 041/105] Update tests/src/RoutesAndParams.test.js

Co-authored-by: Christian Mortaro <christian.mortaro@gmail.com>
---
 tests/src/RoutesAndParams.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
index da69cb1a..e84ea79f 100644
--- a/tests/src/RoutesAndParams.test.js
+++ b/tests/src/RoutesAndParams.test.js
@@ -268,7 +268,7 @@ describe('RoutesAndParams /routes-and-params/inner-html', () => {
 
 });
 
-describe('RoutesAndParams /routes-and-params/hrefs', () => {
+describe('RoutesAndParams /routes-and-params/hrefs spa', () => {
 
   beforeEach(async () => {
     await page.goto('http://localhost:6969/routes-and-params/hrefs');

From d45da655f954ef45d724411b2f582f1aeeb37591 Mon Sep 17 00:00:00 2001
From: Bruno Leonardo Michels <brunolm7@gmail.com>
Date: Wed, 25 May 2022 17:31:08 -0700
Subject: [PATCH 042/105] Rename ssr

---
 tests/src/RoutesAndParams.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
index e84ea79f..d1fb71dd 100644
--- a/tests/src/RoutesAndParams.test.js
+++ b/tests/src/RoutesAndParams.test.js
@@ -370,7 +370,7 @@ describe('RoutesAndParams /routes-and-params/hrefs spa', () => {
 });
 
 
-describe('ssr RoutesAndParams /routes-and-params/hrefs', () => {
+describe('RoutesAndParams /routes-and-params/hrefs ssr', () => {
 
   test('ssr parent', async () => {
     await Promise.all([

From 500b9f95872da87edc273c55ae8c24bf5a4f95d9 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Thu, 26 May 2022 01:48:09 -0300
Subject: [PATCH 043/105] :poop: temporarily remove url schema tests

---
 tests/jest-puppeteer.config.js    |   2 +-
 tests/src/RoutesAndParams.test.js | 222 +++++++++++++++---------------
 2 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index dab2ab01..6c988453 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -1,6 +1,6 @@
 const defaultOptions = {
   launch: {
-    headless: true,
+    headless: false,
   },
   server: {
     command: 'npm run start',
diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
index d1fb71dd..5794c2e9 100644
--- a/tests/src/RoutesAndParams.test.js
+++ b/tests/src/RoutesAndParams.test.js
@@ -301,26 +301,26 @@ describe('RoutesAndParams /routes-and-params/hrefs spa', () => {
     expect(url).toMatch('://nullstack.app');
   });
 
-  test('ftp urls do not redirect', async () => {
-    await page.click('[href="ftp://nullstack.app/"]'),
-    await page.waitForSelector('[data-ftp-clicked]');
-    const element = await page.$('[data-ftp-clicked]');
-    expect(element).toBeTruthy();
-  });
+  // test('ftp urls do not redirect', async () => {
+  //   await page.click('[href="ftp://nullstack.app/"]'),
+  //   await page.waitForSelector('[data-ftp-clicked]');
+  //   const element = await page.$('[data-ftp-clicked]');
+  //   expect(element).toBeTruthy();
+  // });
 
-  test('tel urls do not redirect', async () => {
-    await page.click('[href="tel:1555696969"]'),
-    await page.waitForSelector('[data-tel-clicked]');
-    const element = await page.$('[data-tel-clicked]');
-    expect(element).toBeTruthy();
-  });
+  // test('tel urls do not redirect', async () => {
+  //   await page.click('[href="tel:1555696969"]'),
+  //   await page.waitForSelector('[data-tel-clicked]');
+  //   const element = await page.$('[data-tel-clicked]');
+  //   expect(element).toBeTruthy();
+  // });
 
-  test('mailto urls do not redirect', async () => {
-    await page.click('[href="mailto:contact@nullstack.app"]'),
-    await page.waitForSelector('[data-mailto-clicked]');
-    const element = await page.$('[data-mailto-clicked]');
-    expect(element).toBeTruthy();
-  });
+  // test('mailto urls do not redirect', async () => {
+  //   await page.click('[href="mailto:contact@nullstack.app"]'),
+  //   await page.waitForSelector('[data-mailto-clicked]');
+  //   const element = await page.$('[data-mailto-clicked]');
+  //   expect(element).toBeTruthy();
+  // });
 
   test('relative urls redirect', async () => {
     await Promise.all([
@@ -370,105 +370,105 @@ describe('RoutesAndParams /routes-and-params/hrefs spa', () => {
 });
 
 
-describe('RoutesAndParams /routes-and-params/hrefs ssr', () => {
+// describe('RoutesAndParams /routes-and-params/hrefs ssr', () => {
 
-  test('ssr parent', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?parent=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('http://localhost:6969/parent');
-  });
+//   test('ssr parent', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?parent=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('http://localhost:6969/parent');
+//   });
   
-  test('ssr current', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?current=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('http://localhost:6969/routes-and-params/current');
-  });
+//   test('ssr current', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?current=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('http://localhost:6969/routes-and-params/current');
+//   });
   
-  test('ssr https', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?https=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('https://nullstack.app/');
-  });
-
-  test('ssr http', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?http=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('http://localhost:6969/http');
-  });
+//   test('ssr https', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?https=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('https://nullstack.app/');
+//   });
+
+//   test('ssr http', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?http=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('http://localhost:6969/http');
+//   });
   
-  test('ssr same', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?same=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('http://localhost:6969/routes-and-params/href-same-protocol');
-  });
+//   test('ssr same', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?same=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('http://localhost:6969/routes-and-params/href-same-protocol');
+//   });
   
-  // test.skip('ssr ftp', async () => {
-  //   await Promise.all([
-  //     page.goto('http://localhost:6969/routes-and-params/hrefs?ftp=1'),
-  //     page.waitForNavigation(),
-  //   ]);
-  //   const url = await page.url();
-  //   expect(url).toEqual('https://nullstack.app/');
-  // });
-
-  // test.skip('ssr tel', async () => {
-  //   await Promise.all([
-  //     page.goto('http://localhost:6969/routes-and-params/hrefs?tel=1'),
-  //     page.waitForNavigation(),
-  //   ]);
-  //   const url = await page.url();
-  //   expect(url).toEqual('https://nullstack.app/');
-  // });
+//   // test.skip('ssr ftp', async () => {
+//   //   await Promise.all([
+//   //     page.goto('http://localhost:6969/routes-and-params/hrefs?ftp=1'),
+//   //     page.waitForNavigation(),
+//   //   ]);
+//   //   const url = await page.url();
+//   //   expect(url).toEqual('https://nullstack.app/');
+//   // });
+
+//   // test.skip('ssr tel', async () => {
+//   //   await Promise.all([
+//   //     page.goto('http://localhost:6969/routes-and-params/hrefs?tel=1'),
+//   //     page.waitForNavigation(),
+//   //   ]);
+//   //   const url = await page.url();
+//   //   expect(url).toEqual('https://nullstack.app/');
+//   // });
   
-  // test.skip('ssr mailto', async () => {
-  //   await Promise.all([
-  //     page.goto('http://localhost:6969/routes-and-params/hrefs?mailto=1'),
-  //     page.waitForNavigation(),
-  //   ]);
-  //   const url = await page.url();
-  //   expect(url).toEqual('https://nullstack.app/');
-  // });
+//   // test.skip('ssr mailto', async () => {
+//   //   await Promise.all([
+//   //     page.goto('http://localhost:6969/routes-and-params/hrefs?mailto=1'),
+//   //     page.waitForNavigation(),
+//   //   ]);
+//   //   const url = await page.url();
+//   //   expect(url).toEqual('https://nullstack.app/');
+//   // });
   
-  test('ssr relative', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?relative=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('http://localhost:6969/routes-and-params/relative');
-  });
+//   test('ssr relative', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?relative=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('http://localhost:6969/routes-and-params/relative');
+//   });
   
-  test('ssr relativeComposed', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?relativeComposed=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('http://localhost:6969/routes-and-params/relative/6969');
-  });
+//   test('ssr relativeComposed', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?relativeComposed=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('http://localhost:6969/routes-and-params/relative/6969');
+//   });
   
-  test('ssr root', async () => {
-    await Promise.all([
-      page.goto('http://localhost:6969/routes-and-params/hrefs?root=1'),
-      page.waitForNavigation(),
-    ]);
-    const url = await page.url();
-    expect(url).toEqual('http://localhost:6969/root/6969');
-  });
-
-});
+//   test('ssr root', async () => {
+//     await Promise.all([
+//       page.goto('http://localhost:6969/routes-and-params/hrefs?root=1'),
+//       page.waitForNavigation(),
+//     ]);
+//     const url = await page.url();
+//     expect(url).toEqual('http://localhost:6969/root/6969');
+//   });
+
+// });

From cd26df95b5fc6c7f3b5f67513683b065ca5148bc Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Thu, 26 May 2022 02:39:53 -0300
Subject: [PATCH 044/105] :construction: scroll to hash

---
 client/client.js          |  8 ++++++++
 client/router.js          | 14 +++++---------
 tests/src/Application.njs |  3 +++
 tests/src/RouteScroll.njs | 37 +++++++++++++++++++++++++++++++++++++
 4 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 tests/src/RouteScroll.njs

diff --git a/client/client.js b/client/client.js
index d97d38de..87d1c1d5 100644
--- a/client/client.js
+++ b/client/client.js
@@ -47,12 +47,20 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
     client.initialized = true
   }
   let shouldUpdate = false
+  let shouldScroll = router._hash
   while (client.initiationQueue.length) {
     const instance = client.initiationQueue.shift()
     instance.initiate && await instance.initiate()
     instance._self.initiated = true
     instance.launch && instance.launch()
     shouldUpdate = true
+    if (instance._attributes.route && shouldScroll) {
+      const element = document.getElementById(router._hash)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+      }
+      shouldScroll = false
+    }
   }
   shouldUpdate && client.update()
   shouldUpdate = false
diff --git a/client/router.js b/client/router.js
index 48b9ad09..53d5d94e 100644
--- a/client/router.js
+++ b/client/router.js
@@ -28,8 +28,9 @@ class Router {
   }
 
   async _update(target, push) {
-    this.previous = this.url;
     const { url, path, hash, urlWithHash } = extractLocation(target);
+    if (url === this._url && this._hash === hash) return
+    this.previous = this.url;
     clearTimeout(redirectTimer);
     redirectTimer = setTimeout(async () => {
       page.status = 200;
@@ -64,16 +65,11 @@ class Router {
 
   async _redirect(target) {
     if (/^(\w+:|\/\/)([^.]+.)/.test(target)) {
-      return (window.location.href = target);
+      return window.location.href = target;
     }
     const absoluteUrl = new URL(target, document.baseURI);
-    const { url, hash, urlWithHash } = extractLocation(absoluteUrl.pathname + absoluteUrl.search + absoluteUrl.hash);
-    if (url !== this._url || this._hash !== hash) {
-      await this._update(urlWithHash, true);
-    }
-    if (!hash) {
-      window.scroll(0, 0);
-    }
+    await this._update(absoluteUrl.pathname + absoluteUrl.search + absoluteUrl.hash, true);
+    window.scroll(0, 0)
   }
 
   get url() {
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index ae90b5f8..ad417837 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -52,6 +52,7 @@ import DynamicHead from './DynamicHead'
 import TextObserver from './TextObserver';
 import BodyFragment from './BodyFragment';
 import ArrayAttributes from './ArrayAttributes';
+import RouteScroll from './RouteScroll';
 
 class Application extends Nullstack {
 
@@ -77,6 +78,7 @@ class Application extends Nullstack {
           <a href="/hydrate-element"> hydrate element </a>
           <a href="/error-on-child-node?dom=true"> error-on-child-node?dom=true </a>
           <a href="/error-on-child-node?serialization=true"> error-on-child-node?serialization=true </a>
+          <a href="/route-scroll/class?changed=1#bottom">#bottom</a>
         </div>
         <RenderableComponent route="/renderable-component" />
         <StatefulComponent route="/stateful-component" />
@@ -129,6 +131,7 @@ class Application extends Nullstack {
         <TextObserver route="/text-observer" />
         <BodyFragment route="/body-fragment" />
         <ArrayAttributes route="/array-attributes" />
+        <RouteScroll route="/route-scroll/*" key="routeScroll" />
         <ErrorPage route="*" />
       </body>
     )
diff --git a/tests/src/RouteScroll.njs b/tests/src/RouteScroll.njs
new file mode 100644
index 00000000..f40caab5
--- /dev/null
+++ b/tests/src/RouteScroll.njs
@@ -0,0 +1,37 @@
+import Nullstack from 'nullstack';
+
+class ClassRoute extends Nullstack {
+  render() {
+    return (
+      <div>
+        <a href="#bottom">#bottom</a>
+        <div style="height: 3000px;">
+          big ass div in a class
+        </div>
+        <div id="bottom" style="height: 3000px;">bottom div</div>
+      </div>
+    )
+  }
+}
+
+function FunctionalRoute() {
+  return <div style="height: 3000px;"> big ass div in a function </div>
+}
+
+class RouteScroll extends Nullstack {
+
+  render({ params }) {
+    return (
+      <div>
+        <ClassRoute route="/route-scroll/class" key={(!!params.changed).toString()} />
+        <FunctionalRoute route="/route-scroll/function" />
+        <a href="/route-scroll?changed=1">1</a>
+        <a href="/route-scroll?changed=2">2</a>
+        <a href="/route-scroll">false</a>
+      </div>
+    )
+  }
+
+}
+
+export default RouteScroll;
\ No newline at end of file

From ec815fb4b77a8b380b1d1c7bfebc93f119fb71fb Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 27 May 2022 01:17:16 -0300
Subject: [PATCH 045/105] :wrench: reenable headless tests

---
 tests/jest-puppeteer.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index 6c988453..e08cfa17 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -13,7 +13,7 @@ const defaultOptions = {
 const ciPipelineOptions = {
   launch: {
     executablePath: '/usr/bin/google-chrome-stable',
-    headless: true,
+    headless: false,
     args: [
       '--ignore-certificate-errors',
       '--no-sandbox',

From 3dfaa9d4c60cd1d166ecbe59c9c861df541d59c2 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 27 May 2022 04:35:53 -0300
Subject: [PATCH 046/105] :white_check_mark: fix tests on upgraded puppeteer

---
 tests/jest-puppeteer.config.js     |  4 +--
 tests/server.js                    |  2 +-
 tests/src/ErrorOnChildNode.test.js | 49 ++++++++----------------------
 3 files changed, 15 insertions(+), 40 deletions(-)

diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index e08cfa17..dab2ab01 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -1,6 +1,6 @@
 const defaultOptions = {
   launch: {
-    headless: false,
+    headless: true,
   },
   server: {
     command: 'npm run start',
@@ -13,7 +13,7 @@ const defaultOptions = {
 const ciPipelineOptions = {
   launch: {
     executablePath: '/usr/bin/google-chrome-stable',
-    headless: false,
+    headless: true,
     args: [
       '--ignore-certificate-errors',
       '--no-sandbox',
diff --git a/tests/server.js b/tests/server.js
index 37a7a7fc..927a3577 100644
--- a/tests/server.js
+++ b/tests/server.js
@@ -22,7 +22,7 @@ context.server.use('/api', (request, response, next) => {
 
 for (const method of methods) {
   context.server[method.toLowerCase()]('/api', (request, response) => {
-    response.status(request.status).send(request.method);
+    response.status(request.status).json({ method: request.method });
   });
 }
 
diff --git a/tests/src/ErrorOnChildNode.test.js b/tests/src/ErrorOnChildNode.test.js
index ead928cd..4e26a6a4 100644
--- a/tests/src/ErrorOnChildNode.test.js
+++ b/tests/src/ErrorOnChildNode.test.js
@@ -1,44 +1,25 @@
 describe('ErrorOnChildNode dom ssr', () => {
 
-  let error;
-
-  beforeAll(async () => {
-    jest.spyOn(console, 'error').mockImplementation((message) => error = message);
-    await page.goto('http://localhost:6969/error-on-child-node?dom=true');
-  });
-
   test('should log that the dom is invalid', async () => {
-    page.on("console", async () => {
-      expect(error).toMatch('THEAD expected tag TH to be child at index 2 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
+    const page = await browser.newPage();
+    await page.goto('http://localhost:6969/error-on-child-node?dom=true');
+    page.on("console", async (message) => {
+      expect(message.text()).toMatch('THEAD expected tag TH to be child at index 2 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
     })
   });
 
-})
-
-describe('ErrorOnChildNode serialization ssr', () => {
-
-  let error;
-
-  beforeAll(async () => {
-    jest.spyOn(console, 'error').mockImplementation((message) => error = message);
-    await page.goto('http://localhost:6969/error-on-child-node?serialization=true');
-  });
 
   test('Should log that the serialization missmatches the server dom', async () => {
-    page.on("console", async () => {
-      expect(error).toMatch('DIV expected tag DIV to be child at index 0 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
+    const page = await browser.newPage();
+    await page.goto('http://localhost:6969/error-on-child-node?serialization=true');
+    page.on("console", async (message) => {
+      expect(message.text()).toMatch('DIV expected tag DIV to be child at index 0 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
     })
   });
 
-})
-
-describe('ErrorOnChildNode dom spa', () => {
-
-  beforeAll(async () => {
-    await page.goto('http://localhost:6969/');
-  });
-
   test('hydration errors related to dom should not happen in spa mode', async () => {
+    const page = await browser.newPage();
+    await page.goto('http://localhost:6969/');
     await page.click('[href="/error-on-child-node?dom=true"]');
     await page.waitForSelector('[data-dom-error]');
     await page.click('[data-dom-error]');
@@ -47,15 +28,9 @@ describe('ErrorOnChildNode dom spa', () => {
     expect(element).toBeTruthy();
   });
 
-})
-
-describe('ErrorOnChildNode dom spa', () => {
-
-  beforeAll(async () => {
-    await page.goto('http://localhost:6969/');
-  });
-
   test('hydration errors related to dom should not happen in spa mode', async () => {
+    const page = await browser.newPage();
+    await page.goto('http://localhost:6969/');
     await page.click('[href="/error-on-child-node?serialization=true"]');
     await page.waitForSelector('[data-dom-error]');
     await page.click('[data-dom-error]');

From 418b4e365b96507da362cb8694c30a94d872b19b Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 28 May 2022 19:25:44 -0300
Subject: [PATCH 047/105] :bookmark: version 0.16.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f18654de..cbfa64fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.15.10",
+  "version": "0.16.10",
   "description": "Full-stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",

From b76fc786782d00b43021c4497bac3c00c5e5f291 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 28 May 2022 20:04:39 -0300
Subject: [PATCH 048/105] :bookmark: version 0.16.0 but without typos

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cbfa64fd..30bae770 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.16.10",
+  "version": "0.16.0",
   "description": "Full-stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",

From 6eeb79a915b0bfa7df0eeb8a3f18a4529d72a7a2 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 29 May 2022 21:41:42 -0300
Subject: [PATCH 049/105] :construction: hot module replacement

---
 client/client.js                     | 11 ++--
 client/environment.js                |  8 ++-
 client/index.js                      | 32 +++++++++---
 client/instanceProxyHandler.js       |  5 +-
 client/klassMap.js                   |  3 ++
 client/liveReload.js                 | 24 ---------
 loaders/remove-static-from-client.js | 10 +++-
 package.json                         |  1 +
 scripts/index.js                     | 78 +++++++++++++++++++++++++---
 server/liveReload.js                 | 31 -----------
 server/project.js                    |  3 +-
 server/server.js                     | 55 +++++++++-----------
 tests/.env.test                      |  4 +-
 tests/client.js                      | 14 ++++-
 tests/src/ContextPage.test.js        |  2 +-
 tests/src/ContextProject.test.js     |  4 +-
 tests/src/ContextWorker.test.js      |  2 +-
 webpack.config.js                    | 26 +++++-----
 18 files changed, 182 insertions(+), 131 deletions(-)
 create mode 100644 client/klassMap.js
 delete mode 100644 client/liveReload.js
 delete mode 100644 server/liveReload.js

diff --git a/client/client.js b/client/client.js
index 87d1c1d5..e678c48f 100644
--- a/client/client.js
+++ b/client/client.js
@@ -35,9 +35,14 @@ client.update = async function update() {
       scope.plugins = loadPlugins(scope)
       client.initialized = false
       client.renewalQueue = []
-      client.nextVirtualDom = await generateTree(client.initializer(), scope)
-      rerender()
-      client.processLifecycleQueues()
+      try {
+        client.nextVirtualDom = await generateTree(client.initializer(), scope)
+        rerender()
+        client.processLifecycleQueues()
+      } catch (e) {
+        client.skipHotReplacement = true
+        console.error(e)
+      }
     }, 16)
   }
 }
diff --git a/client/environment.js b/client/environment.js
index d4c42e7f..246ce1f6 100644
--- a/client/environment.js
+++ b/client/environment.js
@@ -1,6 +1,10 @@
 import state from './state';
-const environment = { ...state.environment, client: true, server: false };
 
-Object.freeze(environment);
+const environment = {
+  ...state.environment,
+  client: true,
+  server: false,
+  event: 'nullstack.environment'
+};
 
 export default environment;
\ No newline at end of file
diff --git a/client/index.js b/client/index.js
index 30c2f6ff..aa42e521 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,14 +2,12 @@ import state from './state'
 import element from '../shared/element';
 import fragment from '../shared/fragment';
 import generateTree from '../shared/generateTree';
-import getProxyableMethods from '../shared/getProxyableMethods';
 import { loadPlugins, useClientPlugins } from '../shared/plugins';
 import client from './client';
 import context, { generateContext } from './context';
 import environment from './environment';
-import instanceProxyHandler from './instanceProxyHandler';
+import instanceProxyHandler, { instanceProxies } from './instanceProxyHandler';
 import invoke from './invoke';
-import './liveReload';
 import page from './page';
 import params, { updateParams } from './params';
 import project from './project';
@@ -19,6 +17,7 @@ import hydrate from './hydrate';
 import router from './router';
 import settings from './settings';
 import worker from './worker';
+import klassMap from './klassMap';
 
 context.page = page;
 context.router = router;
@@ -42,12 +41,19 @@ export default class Nullstack {
   static invoke = invoke;
   static fragment = fragment;
   static use = useClientPlugins;
+  static klassMap = {}
+  static context = generateContext({})
 
   static start(Starter) {
     setTimeout(async () => {
       window.addEventListener('popstate', () => {
         router._popState();
       });
+      if (client.initializer) {
+        client.initializer = () => element(Starter);
+        client.update()
+        return this.context
+      }
       client.routes = {};
       updateParams(router.url);
       client.currentInstance = null;
@@ -79,7 +85,7 @@ export default class Nullstack {
       client.processLifecycleQueues();
       delete state.context;
     }, 0)
-    return generateContext({});
+    return this.context;
   }
 
   _self = {
@@ -91,11 +97,8 @@ export default class Nullstack {
   }
 
   constructor() {
-    const methods = getProxyableMethods(this);
     const proxy = new Proxy(this, instanceProxyHandler);
-    for (const method of methods) {
-      this[method] = this[method].bind(proxy);
-    }
+    instanceProxies.set(this, proxy)
     return proxy;
   }
 
@@ -103,4 +106,17 @@ export default class Nullstack {
     return false;
   }
 
+}
+
+if (module.hot) {
+  Nullstack.updateInstancesPrototypes = function updateInstancesPrototypes(hash, klass) {
+    for (const key in context.instances) {
+      const instance = context.instances[key]
+      if (instance.constructor.hash === hash) {
+        Object.setPrototypeOf(instance, klass.prototype);
+      }
+    }
+    klassMap[hash] = klass
+  }
+  module.hot.decline()
 }
\ No newline at end of file
diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index a7a10a82..ff5f7ef3 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -2,6 +2,8 @@ import client from './client';
 import { generateContext } from './context';
 import { generateObjectProxy } from './objectProxyHandler';
 
+export const instanceProxies = new WeakMap()
+
 const instanceProxyHandler = {
   get(target, name) {
     if (name === '_isProxy') return true;
@@ -10,7 +12,8 @@ const instanceProxyHandler = {
       const { [name]: named } = {
         [name]: (args) => {
           const context = generateContext({ ...target._attributes, ...args, self: target._self });
-          return target[name](context);
+          const proxy = instanceProxies.get(target)
+          return target[name].call(proxy, context);
         }
       }
       return named;
diff --git a/client/klassMap.js b/client/klassMap.js
new file mode 100644
index 00000000..064689cb
--- /dev/null
+++ b/client/klassMap.js
@@ -0,0 +1,3 @@
+const klassMap = {}
+
+export default klassMap
\ No newline at end of file
diff --git a/client/liveReload.js b/client/liveReload.js
deleted file mode 100644
index e135a143..00000000
--- a/client/liveReload.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import worker from './worker'
-
-let shouldReloadNext = false;
-let timer = null;
-
-function reload() {
-  if (shouldReloadNext) {
-    clearInterval(timer);
-    timer = setTimeout(() => {
-      location.reload();
-    }, 10)
-  } else {
-    shouldReloadNext = true;
-  }
-}
-
-function liveReload() {
-  const url = worker.api ? `${worker.api.replace('http', 'ws')}` : `${location.protocol.replace('http', 'ws')}//${location.host}`
-  const socket = new WebSocket(url);
-  socket.addEventListener('open', reload);
-  socket.addEventListener('close', liveReload);
-}
-
-liveReload();
\ No newline at end of file
diff --git a/loaders/remove-static-from-client.js b/loaders/remove-static-from-client.js
index 1aefa695..ea215e2c 100644
--- a/loaders/remove-static-from-client.js
+++ b/loaders/remove-static-from-client.js
@@ -6,6 +6,7 @@ module.exports = function removeStaticFromClient(source) {
   const id = this.resourcePath.replace(this.rootContext, '')
   const hash = crypto.createHash('md5').update(id).digest("hex");
   let hashPosition;
+  let klassName;
   const injections = {};
   const positions = [];
   const ast = parse(source, {
@@ -13,6 +14,9 @@ module.exports = function removeStaticFromClient(source) {
     plugins: ['classProperties', 'jsx']
   });
   traverse(ast, {
+    ClassDeclaration(path) {
+      klassName = path.node.id.name;
+    },
     ClassBody(path) {
       const start = path.node.body[0].start;
       hashPosition = start;
@@ -50,5 +54,9 @@ module.exports = function removeStaticFromClient(source) {
       outputs.push(`static hash = '${hash}';\n\n  `);
     }
   }
-  return outputs.reverse().join('');
+  let newSource = outputs.reverse().join('')
+  if (klassName) {
+    newSource += `\nif (module.hot) { Nullstack.updateInstancesPrototypes(${klassName}.hash, ${klassName}) }`;
+  }
+  return newSource
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 30bae770..5c8e9e2e 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "swc-loader": "0.2.1",
     "terser-webpack-plugin": "5.3.1",
     "webpack": "5.72.1",
+    "webpack-dev-server": "4.9.0",
     "ws": "7.5.7"
   }
 }
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index a5ee257f..6c2e8acb 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -10,12 +10,25 @@ const path = require('path');
 const { existsSync } = require('fs');
 const customConfig = path.resolve(process.cwd(), './webpack.config.js');
 const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
+const dotenv = require('dotenv')
+const express = require('express')
 
 const buildModes = ['ssg', 'spa', 'ssr']
 
+function getConfig(options) {
+  return config.map((env) => env(null, options))
+}
+
 function getCompiler(options) {
-  const configs = config.map((env) => env(null, options))
-  return webpack(configs)
+  return webpack(getConfig(options))
+}
+
+function getServerCompiler(options) {
+  return webpack(getConfig(options)[0])
+}
+
+function getClientCompiler(options) {
+  return webpack(getConfig(options)[1])
 }
 
 function logCompiling(showCompiling) {
@@ -50,22 +63,71 @@ function logTrace(stats, showCompiling) {
   lastTrace = '';
 }
 
-function start({ input, port, env, output, mode = 'ssr' }) {
+async function findFreePort() {
+  return new Promise((resolve) => {
+    const server = app.listen(0, () => {
+      const port = server.address().port;
+      server.close()
+      resolve(port)
+    });
+  })
+}
+
+async function start({ input, port, env, output, mode = 'ssr' }) {
   const environment = 'development';
-  const compiler = getCompiler({ environment, input });
-  if (port) {
-    process.env['NULLSTACK_SERVER_PORT'] = port;
-  }
+  const serverCompiler = getServerCompiler({ environment, input });
+  let clientStarted = false
+  let path = '.env'
   if (env) {
     process.env['NULLSTACK_ENVIRONMENT_NAME'] = env;
+    path += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
+  }
+  dotenv.config({ path })
+  process.env['NULLSTACK_SERVER_PORT'] = port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'];
+  let proxyTarget
+  if (process.env['NULLSTACK_SECONDARY_SERVER_PORT']) {
+    proxyTarget = `http://[::1]:${process.env['NULLSTACK_SECONDARY_SERVER_PORT']}`
+  } if (!process.env['NULLSTACK_WORKER_API']) {
+    process.env['NULLSTACK_SECONDARY_SERVER_PORT'] = await findFreePort()
+    process.env['NULLSTACK_WORKER_API'] = `http://localhost:${process.env['NULLSTACK_SECONDARY_SERVER_PORT']}`
+    proxyTarget = process.env['NULLSTACK_WORKER_API'].replace('//localhost:', '//[::1]:')
+  } else {
+    if (!process.env['NULLSTACK_SECONDARY_SERVER_PORT']) {
+      process.env['NULLSTACK_SECONDARY_SERVER_PORT'] = new URL(process.env['NULLSTACK_WORKER_API']).port
+    }
+    proxyTarget = `http://[::1]:${process.env['NULLSTACK_SECONDARY_SERVER_PORT']}`
   }
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
   console.log();
-  compiler.watch({}, (error, stats) => {
+  const WebpackDevServer = require('webpack-dev-server');
+  const { setLogLevel } = require('webpack/hot/log')
+  setLogLevel('error')
+  serverCompiler.watch({}, (error, stats) => {
     logTrace(stats, true)
     if (!stats.hasErrors() && mode !== 'ssr') {
       require(`../builders/${mode}`)({ output, environment });
     };
+    if (!clientStarted) {
+      clientStarted = true
+      const devServerOptions = {
+        hot: true,
+        open: false,
+        proxy: {
+          context: () => true,
+          target: proxyTarget
+        },
+        client: {
+          logging: 'error',
+          progress: true,
+        },
+        port: process.env['NULLSTACK_SERVER_PORT']
+      };
+      const clientCompiler = getClientCompiler({ environment, input });
+      const server = new WebpackDevServer(devServerOptions, clientCompiler);
+      server.startCallback(() => {
+        console.log('\x1b[36m%s\x1b[0m', ` ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
+      });
+    }
   });
 }
 
diff --git a/server/liveReload.js b/server/liveReload.js
deleted file mode 100644
index 24263a61..00000000
--- a/server/liveReload.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import WebSocket from 'ws';
-
-export default function liveReload(server) {
-
-  function noop() {}
-
-  function heartbeat() {
-    this.isAlive = true;
-  }
-
-  const wss = new WebSocket.Server({server});
-
-  wss.on('connection', function connection(ws) {
-    ws.isAlive = true;
-    ws.on('pong', heartbeat);
-    ws.on('message', (data) => {
-      wss.clients.forEach(function each(client) {
-        client.send(data);
-      });
-    });
-  });
-
-  setInterval(function ping() {
-    wss.clients.forEach(function each(ws) {
-      if (ws.isAlive === false) return ws.terminate();
-      ws.isAlive = false;
-      ws.ping(noop);
-    });
-  }, 30000);
-
-}
\ No newline at end of file
diff --git a/server/project.js b/server/project.js
index 1e755c91..184bb13e 100644
--- a/server/project.js
+++ b/server/project.js
@@ -1,5 +1,4 @@
 import environment from './environment';
-import server from './server';
 import worker from './worker';
 
 const project = {};
@@ -20,7 +19,7 @@ project.disallow = [];
 project.icons = JSON.parse(`{{NULLSTACK_PROJECT_ICONS}}`);
 
 export function generateBase() {
-  const port = project.domain === 'localhost' ? `:${server.port}` : '';
+  const port = project.domain === 'localhost' ? `:${process.env['NULLSTACK_SERVER_PORT']}` : '';
   return `${worker.protocol}://${project.domain}${port}`;
 }
 
diff --git a/server/server.js b/server/server.js
index 891adf79..e36f80ee 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1,7 +1,6 @@
 import bodyParser from 'body-parser';
 import cors from 'cors';
 import express from 'express';
-import http from 'http';
 import fetch from 'node-fetch';
 import path from 'path';
 import deserialize from '../shared/deserialize';
@@ -9,7 +8,6 @@ import prefix from '../shared/prefix';
 import context, { generateContext } from './context';
 import environment from './environment';
 import { generateFile } from './files';
-import liveReload from './liveReload';
 import generateManifest from './manifest';
 import { prerender } from './prerender';
 import printError from './printError';
@@ -23,15 +21,21 @@ if (!global.fetch) {
   global.fetch = fetch;
 }
 
-const app = express();
-const server = http.createServer(app);
+const server = express();
 
-server.port ??= process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'];
+if (environment.production) {
+  if (!process.env['NULLSTACK_SERVER_PORT']) {
+    process.env['NULLSTACK_SERVER_PORT'] = process.env['PORT']
+  }
+  server.port = process.env['NULLSTACK_SERVER_PORT']
+} else {
+  server.port = process.env['NULLSTACK_SECONDARY_SERVER_PORT']
+}
 
 let contextStarted = false
 let serverStarted = false
 
-app.use(async (request, response, next) => {
+server.use(async (request, response, next) => {
   if (!contextStarted) {
     typeof context.start === 'function' && await context.start();
     contextStarted = true;
@@ -39,12 +43,6 @@ app.use(async (request, response, next) => {
   next()
 })
 
-for (const methodName of ['use', 'delete', 'get', 'head', 'options', 'patch', 'post', 'put']) {
-  server[methodName] = function () {
-    app[methodName](...arguments);
-  }
-}
-
 function createRequest(path) {
   return {
     method: "GET",
@@ -110,7 +108,7 @@ function createResponse(callback) {
 server.prerender = async function (originalUrl, options) {
   server.start()
   return new Promise((resolve, reject) => {
-    app._router.handle(
+    server._router.handle(
       createRequest(originalUrl),
       createResponse((code, data, headers) => resolve(data)),
       () => { }
@@ -123,53 +121,53 @@ server.start = function () {
   if (serverStarted) return;
   serverStarted = true;
 
-  app.use(cors(server.cors));
+  server.use(cors(server.cors));
 
-  app.use(express.static(path.join(__dirname, '..', 'public')));
+  server.use(express.static(path.join(__dirname, '..', 'public')));
 
-  app.use(bodyParser.text({ limit: server.maximumPayloadSize }));
+  server.use(bodyParser.text({ limit: server.maximumPayloadSize }));
 
-  app.get(`/:number.client.js`, (request, response) => {
+  server.get(`/:number.client.js`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('text/javascript');
     response.send(generateFile(`${request.params.number}.client.js`, server));
   });
 
-  app.get(`/:number.client.css`, (request, response) => {
+  server.get(`/:number.client.css`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('text/css');
     response.send(generateFile(`${request.params.number}.client.css`, server));
   });
 
-  app.get(`/client.css`, (request, response) => {
+  server.get(`/client.css`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('text/css');
     response.send(generateFile('client.css', server));
   });
 
-  app.get(`/client.js`, (request, response) => {
+  server.get(`/client.js`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('text/javascript');
     response.send(generateFile('client.js', server));
   });
 
-  app.get(`/manifest.webmanifest`, (request, response) => {
+  server.get(`/manifest.webmanifest`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('application/manifest+json');
     response.send(generateManifest(server));
   });
 
-  app.get(`/service-worker.js`, (request, response) => {
+  server.get(`/service-worker.js`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('text/javascript');
     response.send(generateServiceWorker());
   });
 
-  app.get('/robots.txt', (request, response) => {
+  server.get('/robots.txt', (request, response) => {
     response.send(generateRobots());
   });
 
-  app.all(`/${prefix}/:hash/:methodName.json`, async (request, response) => {
+  server.all(`/${prefix}/:hash/:methodName.json`, async (request, response) => {
     const payload = request.method === 'GET' ? request.query.payload : request.body;
     const args = deserialize(payload);
     const { hash, methodName } = request.params;
@@ -198,7 +196,7 @@ server.start = function () {
     }
   });
 
-  app.get('*', async (request, response, next) => {
+  server.get('*', async (request, response, next) => {
     if (request.originalUrl.split('?')[0].indexOf('.') > -1) {
       return next();
     }
@@ -217,11 +215,8 @@ server.start = function () {
     }
 
     server.listen(server.port, () => {
-      const name = project.name ? project.name : 'Nullstack'
-      if (environment.development) {
-        liveReload(server);
-        console.log('\x1b[36m%s\x1b[0m', ` ✅️ ${name} is ready at http://localhost:${server.port}\n`);
-      } else {
+      if (environment.production) {
+        const name = project.name ? project.name : 'Nullstack'
         console.log('\x1b[36m%s\x1b[0m', ` ✅️ ${name} is ready at http://127.0.0.1:${server.port}\n`);
       }
     });
diff --git a/tests/.env.test b/tests/.env.test
index fe46256e..76c1656d 100644
--- a/tests/.env.test
+++ b/tests/.env.test
@@ -5,5 +5,5 @@ NULLSTACK_SETTINGS_CAMELIZED_KEY = 'settings'
 NULLSTACK_PROJECT_NAME='Nullstack Tests'
 NULLSTACK_PROJECT_SHORT_NAME='Nullstack'
 NULLSTACK_PROJECT_DOMAIN='localhost'
-NULLSTACK_WORKER_CDN='http://127.0.0.1:6969'
-NULLSTACK_WORKER_API='http://127.0.0.1:6969'
\ No newline at end of file
+NULLSTACK_WORKER_CDN='http://localhost:6969'
+NULLSTACK_WORKER_API='http://127.0.0.1:6970'
\ No newline at end of file
diff --git a/tests/client.js b/tests/client.js
index 8268343f..499f0d25 100644
--- a/tests/client.js
+++ b/tests/client.js
@@ -11,4 +11,16 @@ context.start = function () {
   setTimeout(() => context.startTimedValue = true, 1000)
 }
 
-export default context;
\ No newline at end of file
+export default context;
+
+if (module.hot) {
+  module.hot.accept('./src/Application', () => {
+    console.log(client.skipHotReplacement)
+    if (client.skipHotReplacement) {
+      location.reload()
+    } else {
+      Nullstack.start(Application);
+      windowEvent('environment');
+    }
+  })
+}
\ No newline at end of file
diff --git a/tests/src/ContextPage.test.js b/tests/src/ContextPage.test.js
index 22350018..2b26e895 100644
--- a/tests/src/ContextPage.test.js
+++ b/tests/src/ContextPage.test.js
@@ -41,7 +41,7 @@ describe('ContextPage', () => {
 
   test('the image key updates the open graph image with a cdn url', async () => {
     const text = await page.$eval('head > meta[property="og:image"]', element => element.content);
-    expect(text).toMatch('http://127.0.0.1:6969/image.jpg');
+    expect(text).toMatch('http://localhost:6969/image.jpg');
   });
 
   test('the description key updates the open graph description', async () => {
diff --git a/tests/src/ContextProject.test.js b/tests/src/ContextProject.test.js
index 7982f72f..515d642a 100644
--- a/tests/src/ContextProject.test.js
+++ b/tests/src/ContextProject.test.js
@@ -107,12 +107,12 @@ describe('ContextProject', () => {
 
   test('css bundle can use a cdn', async () => {
     const text = await page.$eval('[rel="stylesheet"]', (element) => element.href);
-    expect(text).toMatch(/127\.0\.0\.1:6969/);
+    expect(text).toMatch('localhost:6969');
   });
 
   test('javacript bundle can use a cdn', async () => {
     const text = await page.$eval('script[integrity]', (element) => element.src);
-    expect(text).toMatch(/127\.0\.0\.1:6969/);
+    expect(text).toMatch('localhost:6969');
   });
 
   test('css bundle has an empty integrity in dev mode', async () => {
diff --git a/tests/src/ContextWorker.test.js b/tests/src/ContextWorker.test.js
index 9043041b..be229f6c 100644
--- a/tests/src/ContextWorker.test.js
+++ b/tests/src/ContextWorker.test.js
@@ -15,7 +15,7 @@ describe('ContextWorker', () => {
   });
 
   test('has a cdn key', async () => {
-    const element = await page.$('[data-cdn="http://127.0.0.1:6969"]');
+    const element = await page.$('[data-cdn="http://localhost:6969"]');
     expect(element).toBeTruthy();
   });
 
diff --git a/webpack.config.js b/webpack.config.js
index 07980c30..ce3073cd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
 const crypto = require("crypto");
 const { readdirSync } = require('fs');
+const { HotModuleReplacementPlugin } = require('webpack')
 
 const buildKey = crypto.randomBytes(20).toString('hex');
 
@@ -115,15 +116,16 @@ function server(env, argv) {
   const folder = isDev ? '.development' : '.production';
   const devtool = isDev ? 'inline-cheap-module-source-map' : false;
   const minimize = !isDev;
-  const plugins = isDev ? ([
-    new NodemonPlugin({
+  const plugins = []
+  if (isDev) {
+    plugins.push(new NodemonPlugin({
       ext: '*',
       watch: [".env", ".env.*", './.development/*.*'],
       script: './.development/server.js',
       nodeArgs: ['--enable-source-maps'],
       quiet: true
-    })
-  ]) : [];
+    }))
+  }
   return {
     mode: argv.environment,
     entry: './server.js',
@@ -234,22 +236,19 @@ function client(env, argv) {
   const folder = isDev ? '.development' : '.production';
   const devtool = isDev ? 'inline-cheap-module-source-map' : false;
   const minimize = !isDev;
-  let liveReload = {};
-  if (!isDev) {
-    liveReload = {
-      test: /liveReload.js$/,
-      use: [
-        { loader: getLoader('ignore-import.js') }
-      ]
-    }
-  }
   const plugins = [
     new MiniCssExtractPlugin({
       filename: "client.css",
       chunkFilename: '[chunkhash].client.css'
     })
   ]
+  if (isDev) {
+    plugins.push(new HotModuleReplacementPlugin())
+  }
   return {
+    infrastructureLogging: {
+      level: 'none',
+    },
     mode: argv.environment,
     entry: './client.js',
     output: {
@@ -307,7 +306,6 @@ function client(env, argv) {
             { loader: require.resolve('sass-loader') }
           ],
         },
-        liveReload,
         nullstackTypescript,
         {
           test: /\.(njs|nts|jsx|tsx)$/,

From 811a01cd130764fd33e6d3ffe6e151d5d5bea75d Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 29 May 2022 22:25:14 -0300
Subject: [PATCH 050/105] :sparkles: inject hmr

---
 loaders/inject-hmr.js | 39 +++++++++++++++++++++++++++++++++++++++
 scripts/index.js      |  3 +--
 tests/client.js       | 14 +-------------
 webpack.config.js     |  4 ++++
 4 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 loaders/inject-hmr.js

diff --git a/loaders/inject-hmr.js b/loaders/inject-hmr.js
new file mode 100644
index 00000000..5486a4eb
--- /dev/null
+++ b/loaders/inject-hmr.js
@@ -0,0 +1,39 @@
+const parse = require('@babel/parser').parse;
+const traverse = require("@babel/traverse").default;
+
+module.exports = function (source) {
+  const ast = parse(source, {
+    sourceType: 'module',
+    plugins: ['classProperties', 'jsx']
+  });
+  let klassName
+  let klassPath
+  traverse(ast, {
+    MemberExpression(path) {
+      if (path.node.property.name === 'start' && path.node.object?.name === 'Nullstack') {
+        klassName = path.parent.arguments[0].name
+      }
+    }
+  });
+  if (!klassName) return source
+  traverse(ast, {
+    ImportDeclaration(path) {
+      if (path.node.specifiers[0].local.name === klassName) {
+        klassPath = path.node.source.value
+      }
+    }
+  });
+
+  return source + `
+    if (module.hot) {
+      module.hot.accept('${klassPath}', () => {
+        if (client.skipHotReplacement) {
+          location.reload()
+        } else {
+          Nullstack.start(${klassName});
+          windowEvent('environment');
+        }
+      })
+    }
+  `
+}
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index 6c2e8acb..944b2b7f 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -11,7 +11,6 @@ const { existsSync } = require('fs');
 const customConfig = path.resolve(process.cwd(), './webpack.config.js');
 const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
 const dotenv = require('dotenv')
-const express = require('express')
 
 const buildModes = ['ssg', 'spa', 'ssr']
 
@@ -65,7 +64,7 @@ function logTrace(stats, showCompiling) {
 
 async function findFreePort() {
   return new Promise((resolve) => {
-    const server = app.listen(0, () => {
+    const server = require('express')().listen(0, () => {
       const port = server.address().port;
       server.close()
       resolve(port)
diff --git a/tests/client.js b/tests/client.js
index 499f0d25..8268343f 100644
--- a/tests/client.js
+++ b/tests/client.js
@@ -11,16 +11,4 @@ context.start = function () {
   setTimeout(() => context.startTimedValue = true, 1000)
 }
 
-export default context;
-
-if (module.hot) {
-  module.hot.accept('./src/Application', () => {
-    console.log(client.skipHotReplacement)
-    if (client.skipHotReplacement) {
-      location.reload()
-    } else {
-      Nullstack.start(Application);
-      windowEvent('environment');
-    }
-  })
-}
\ No newline at end of file
+export default context;
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index ce3073cd..d5f67078 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -272,6 +272,10 @@ function client(env, argv) {
     stats: 'errors-only',
     module: {
       rules: [
+        {
+          test: /client.js$/,
+          loader: getLoader('inject-hmr.js'),
+        },
         {
           test: /nullstack.js$/,
           loader: getLoader('string-replace.js'),

From 3add8a2e26435e852f9f067e09a5f817416a3656 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 30 May 2022 00:04:53 -0300
Subject: [PATCH 051/105] :wrench: custom middleware that breaks tests

---
 scripts/index.js | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 944b2b7f..be09a3fe 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -11,6 +11,7 @@ const { existsSync } = require('fs');
 const customConfig = path.resolve(process.cwd(), './webpack.config.js');
 const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
 const dotenv = require('dotenv')
+const fetch = require('node-fetch')
 
 const buildModes = ['ssg', 'spa', 'ssr']
 
@@ -82,6 +83,7 @@ async function start({ input, port, env, output, mode = 'ssr' }) {
     path += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
   }
   dotenv.config({ path })
+  process.env['NULLSTACK_ENVIRONMENT_MODE'] = 'spa'
   process.env['NULLSTACK_SERVER_PORT'] = port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'];
   let proxyTarget
   if (process.env['NULLSTACK_SECONDARY_SERVER_PORT']) {
@@ -112,13 +114,38 @@ async function start({ input, port, env, output, mode = 'ssr' }) {
         hot: true,
         open: false,
         proxy: {
-          context: () => true,
-          target: proxyTarget
+          '/nullstack': proxyTarget
         },
         client: {
+          overlay: false,
           logging: 'error',
           progress: true,
         },
+        setupMiddlewares: (middlewares, devServer) => {
+          if (!devServer) {
+            throw new Error('webpack-dev-server is not defined');
+          }
+
+          middlewares.unshift(async (req, res, next) => {
+            if (req.originalUrl.split('?')[0].indexOf('.') > -1) {
+              return next();
+            }
+            try {
+              const url = proxyTarget + req.originalUrl
+              console.log({ url })
+              const response = await fetch(proxyTarget + req.originalUrl)
+              const text = await response.text()
+              if (text.indexOf('<meta name="generator" content="Created with Nullstack - https://nullstack.app" />') > -1) {
+                cachedText = text
+              }
+              res.send(text)
+            } catch (e) {
+              res.send(cachedText)
+            }
+          })
+
+          return middlewares;
+        },
         port: process.env['NULLSTACK_SERVER_PORT']
       };
       const clientCompiler = getClientCompiler({ environment, input });

From cd71a57ac99a73b8113962de06aa49df6ce5c2e7 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 30 May 2022 01:24:00 -0300
Subject: [PATCH 052/105] :white_check_mark: moving tests to prod mode

---
 client/router.js                           |  6 ++++++
 scripts/index.js                           | 19 ++++++++++++-------
 server/server.js                           |  4 ++--
 tests/.env                                 | 10 ++++++++++
 tests/jest-puppeteer.config.js             |  4 ++--
 tests/src/ContextEnvironment.test.js       |  6 +++---
 tests/src/ContextPage.test.js              |  2 +-
 tests/src/ContextProject.test.js           |  6 +++---
 tests/src/ContextWorker.test.js            |  4 ++--
 tests/src/ErrorOnChildNode.test.js         |  8 ++++----
 tests/src/ErrorPage.test.js                | 10 +++++-----
 tests/src/RoutesAndParams.test.js          |  2 +-
 tests/src/ServerRequestandResponse.test.js |  4 ++--
 tests/src/UndefinedNodes.test.js           |  6 +++---
 14 files changed, 56 insertions(+), 35 deletions(-)
 create mode 100644 tests/.env

diff --git a/client/router.js b/client/router.js
index 53d5d94e..b9f5a82b 100644
--- a/client/router.js
+++ b/client/router.js
@@ -88,6 +88,12 @@ class Router {
     this._redirect(target + window.location.search);
   }
 
+  get base() {
+    if (this._base) return this._base
+    this._base = window.location.origin
+    return this._base
+  }
+
 }
 
 const router = new Router();
diff --git a/scripts/index.js b/scripts/index.js
index be09a3fe..50b18fcf 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -105,16 +105,20 @@ async function start({ input, port, env, output, mode = 'ssr' }) {
   setLogLevel('error')
   serverCompiler.watch({}, (error, stats) => {
     logTrace(stats, true)
-    if (!stats.hasErrors() && mode !== 'ssr') {
-      require(`../builders/${mode}`)({ output, environment });
-    };
+    // if (!stats.hasErrors() && mode !== 'ssr') {
+    //   require(`../builders/${mode}`)({ output, environment });
+    // };
     if (!clientStarted) {
       clientStarted = true
       const devServerOptions = {
         hot: true,
         open: false,
         proxy: {
-          '/nullstack': proxyTarget
+          '/nullstack': proxyTarget,
+          // '/sitemap.xml': proxyTarget,
+          // '/robots.txt': proxyTarget,
+          // '/manifest.webmanifest': proxyTarget,
+          // '/service-worker.js': proxyTarget,
         },
         client: {
           overlay: false,
@@ -126,19 +130,20 @@ async function start({ input, port, env, output, mode = 'ssr' }) {
             throw new Error('webpack-dev-server is not defined');
           }
 
+          let cachedText
+
           middlewares.unshift(async (req, res, next) => {
             if (req.originalUrl.split('?')[0].indexOf('.') > -1) {
               return next();
             }
             try {
               const url = proxyTarget + req.originalUrl
-              console.log({ url })
               const response = await fetch(proxyTarget + req.originalUrl)
               const text = await response.text()
-              if (text.indexOf('<meta name="generator" content="Created with Nullstack - https://nullstack.app" />') > -1) {
+              if (text.indexOf('<meta name="generator" content="Created with Nullstack - https://nullstack.app" />') > -1 && [200, 304].includes(response.status)) {
                 cachedText = text
               }
-              res.send(text)
+              res.status(response.status).send(text)
             } catch (e) {
               res.send(cachedText)
             }
diff --git a/server/server.js b/server/server.js
index e36f80ee..00b0d6df 100644
--- a/server/server.js
+++ b/server/server.js
@@ -27,9 +27,9 @@ if (environment.production) {
   if (!process.env['NULLSTACK_SERVER_PORT']) {
     process.env['NULLSTACK_SERVER_PORT'] = process.env['PORT']
   }
-  server.port = process.env['NULLSTACK_SERVER_PORT']
+  server.port = process.env['NULLSTACK_SERVER_PORT'] || 3000
 } else {
-  server.port = process.env['NULLSTACK_SECONDARY_SERVER_PORT']
+  server.port = process.env['NULLSTACK_SECONDARY_SERVER_PORT'] || 3000
 }
 
 let contextStarted = false
diff --git a/tests/.env b/tests/.env
new file mode 100644
index 00000000..c1b9185f
--- /dev/null
+++ b/tests/.env
@@ -0,0 +1,10 @@
+NULLSTACK_SECRETS_KEY = 'secrets'
+NULLSTACK_SECRETS_CAMELIZED_KEY = 'secrets'
+NULLSTACK_SETTINGS_KEY = 'settings'
+NULLSTACK_SETTINGS_CAMELIZED_KEY = 'settings'
+NULLSTACK_PROJECT_NAME = 'Nullstack Tests'
+NULLSTACK_PROJECT_SHORT_NAME = 'Nullstack'
+NULLSTACK_PROJECT_DOMAIN = 'localhost'
+NULLSTACK_WORKER_CDN = 'http://localhost:6969'
+NULLSTACK_WORKER_API = 'http://127.0.0.1:6969'
+NULLSTACK_SERVER_PORT = '6969'
\ No newline at end of file
diff --git a/tests/jest-puppeteer.config.js b/tests/jest-puppeteer.config.js
index dab2ab01..d24779c4 100644
--- a/tests/jest-puppeteer.config.js
+++ b/tests/jest-puppeteer.config.js
@@ -3,7 +3,7 @@ const defaultOptions = {
     headless: true,
   },
   server: {
-    command: 'npm run start',
+    command: 'npm run build && node .production/server.js',
     port: 6969,
     launchTimeout: 25000
   },
@@ -23,7 +23,7 @@ const ciPipelineOptions = {
     ]
   },
   server: {
-    command: 'npm run start',
+    command: 'npm run build && node .production/server.js',
     port: 6969,
     launchTimeout: 25000
   },
diff --git a/tests/src/ContextEnvironment.test.js b/tests/src/ContextEnvironment.test.js
index 2a669b76..c0417a43 100644
--- a/tests/src/ContextEnvironment.test.js
+++ b/tests/src/ContextEnvironment.test.js
@@ -22,12 +22,12 @@ describe('ContextEnvironment', () => {
   });
 
   test('has a development key', async () => {
-    const element = await page.$('[data-development="true"]');
+    const element = await page.$('[data-development="false"]');
     expect(element).toBeTruthy();
   });
 
   test('has a production key', async () => {
-    const element = await page.$('[data-production="false"]');
+    const element = await page.$('[data-production="true"]');
     expect(element).toBeTruthy();
   });
 
@@ -42,7 +42,7 @@ describe('ContextEnvironment', () => {
   });
 
   test('has a key with the environment name', async () => {
-    const element = await page.$('[data-name="test"]');
+    const element = await page.$('[data-name=""]');
     expect(element).toBeTruthy();
   });
 
diff --git a/tests/src/ContextPage.test.js b/tests/src/ContextPage.test.js
index 2b26e895..90d0df98 100644
--- a/tests/src/ContextPage.test.js
+++ b/tests/src/ContextPage.test.js
@@ -56,7 +56,7 @@ describe('ContextPage', () => {
 
   test('the canonical tag is generated if the canonical key is omitted', async () => {
     const text = await page.$eval('head > link[rel="canonical"]', element => element.href);
-    expect(text).toMatch('http://localhost:6969/context-page');
+    expect(text).toMatch('https://localhost:6969/context-page');
   });
 
   test('the schema key generates a json schema', async () => {
diff --git a/tests/src/ContextProject.test.js b/tests/src/ContextProject.test.js
index 515d642a..26d0ab55 100644
--- a/tests/src/ContextProject.test.js
+++ b/tests/src/ContextProject.test.js
@@ -11,7 +11,7 @@ describe('ContextProject', () => {
 describe('ContextProject', () => {
 
   beforeAll(async () => {
-    await page.goto('http://localhost:6969/context-project');
+    await page.goto('http://localhost:6969/context-project', { waitUntil: "networkidle0" });
     await page.waitForSelector('[data-project]');
   });
 
@@ -137,7 +137,7 @@ describe('robots.txt', () => {
   let text;
 
   beforeAll(async () => {
-    await page.goto('http://localhost:6969/robots.txt');
+    await page.goto('http://localhost:6969/robots.txt', { waitUntil: "networkidle0" });
     text = await page.evaluate(() => document.body.innerHTML);
   });
 
@@ -157,7 +157,7 @@ describe('robots.txt', () => {
   });
 
   test('it reflects project.sitemap', async () => {
-    const index = text.indexOf('Sitemap: http://localhost:6969/sitemap.xml')
+    const index = text.indexOf('Sitemap: https://localhost:6969/sitemap.xml')
     expect(index).toBeGreaterThan(-1);
   });
 
diff --git a/tests/src/ContextWorker.test.js b/tests/src/ContextWorker.test.js
index be229f6c..bd21572f 100644
--- a/tests/src/ContextWorker.test.js
+++ b/tests/src/ContextWorker.test.js
@@ -74,7 +74,7 @@ describe('ContextWorker', () => {
 describe('ContextWorker', () => {
 
   beforeAll(async () => {
-    await page.goto('http://localhost:6969/context-worker');
+    await page.goto('http://localhost:6969/context-worker', { waitUntil: "networkidle0" });
   });
 
   test('fetching is set to true when the worker is fetching', async () => {
@@ -90,7 +90,7 @@ describe('ContextWorker', () => {
 describe('ContextWorker', () => {
 
   beforeAll(async () => {
-    await page.goto('http://localhost:6969/context-worker');
+    await page.goto('http://localhost:6969/context-worker', { waitUntil: "networkidle0" });
   });
 
   test('fetching is set to the arguments of the server function when the worker is fetching', async () => {
diff --git a/tests/src/ErrorOnChildNode.test.js b/tests/src/ErrorOnChildNode.test.js
index 4e26a6a4..5171e575 100644
--- a/tests/src/ErrorOnChildNode.test.js
+++ b/tests/src/ErrorOnChildNode.test.js
@@ -2,7 +2,7 @@ describe('ErrorOnChildNode dom ssr', () => {
 
   test('should log that the dom is invalid', async () => {
     const page = await browser.newPage();
-    await page.goto('http://localhost:6969/error-on-child-node?dom=true');
+    await page.goto('http://localhost:6969/error-on-child-node?dom=true', { waitUntil: "networkidle0" });
     page.on("console", async (message) => {
       expect(message.text()).toMatch('THEAD expected tag TH to be child at index 2 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
     })
@@ -11,7 +11,7 @@ describe('ErrorOnChildNode dom ssr', () => {
 
   test('Should log that the serialization missmatches the server dom', async () => {
     const page = await browser.newPage();
-    await page.goto('http://localhost:6969/error-on-child-node?serialization=true');
+    await page.goto('http://localhost:6969/error-on-child-node?serialization=true', { waitUntil: "networkidle0" });
     page.on("console", async (message) => {
       expect(message.text()).toMatch('DIV expected tag DIV to be child at index 0 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
     })
@@ -19,7 +19,7 @@ describe('ErrorOnChildNode dom ssr', () => {
 
   test('hydration errors related to dom should not happen in spa mode', async () => {
     const page = await browser.newPage();
-    await page.goto('http://localhost:6969/');
+    await page.goto('http://localhost:6969/', { waitUntil: "networkidle0" });
     await page.click('[href="/error-on-child-node?dom=true"]');
     await page.waitForSelector('[data-dom-error]');
     await page.click('[data-dom-error]');
@@ -30,7 +30,7 @@ describe('ErrorOnChildNode dom ssr', () => {
 
   test('hydration errors related to dom should not happen in spa mode', async () => {
     const page = await browser.newPage();
-    await page.goto('http://localhost:6969/');
+    await page.goto('http://localhost:6969/', { waitUntil: "networkidle0" });
     await page.click('[href="/error-on-child-node?serialization=true"]');
     await page.waitForSelector('[data-dom-error]');
     await page.click('[data-dom-error]');
diff --git a/tests/src/ErrorPage.test.js b/tests/src/ErrorPage.test.js
index 81063b74..5c0d55fb 100644
--- a/tests/src/ErrorPage.test.js
+++ b/tests/src/ErrorPage.test.js
@@ -3,8 +3,8 @@ describe('ErrorPage 500', () => {
   let response;
 
   beforeAll(async () => {
-    response = await page.goto('http://localhost:6969/error-page?status=500');
-  });  
+    response = await page.goto('http://localhost:6969/error-page?status=500', { waitUntil: "networkidle0" });
+  });
 
   test('pages with error have a 500 status', async () => {
     const status = response.status();
@@ -22,7 +22,7 @@ describe('ErrorPage 500', () => {
 describe('ErrorPage 404', () => {
 
   test('pages with status 404 have a 404 status', async () => {
-    const response = await page.goto('http://localhost:6969/error-page');
+    const response = await page.goto('http://localhost:6969/error-page', { waitUntil: "networkidle0" });
     const status = response.status();
     expect(status).toBe(404);
   });
@@ -38,9 +38,9 @@ describe('ErrorPage 404', () => {
 describe('ErrorPage offline', () => {
 
   test('the offline template should always have a 200 status', async () => {
-    await page.goto('http://localhost:6969');
+    await page.goto('http://localhost:6969', { waitUntil: "networkidle0" });
     const link = await page.$eval('a', (element) => element.href);
-    const response = await page.goto(link);
+    const response = await page.goto(link, { waitUntil: "networkidle0" });
     const status = response.status();
     expect([200, 304]).toContain(status);
   });
diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
index 5794c2e9..d3162d25 100644
--- a/tests/src/RoutesAndParams.test.js
+++ b/tests/src/RoutesAndParams.test.js
@@ -11,7 +11,7 @@ describe('RoutesAndParams /routes-and-params', () => {
   });
 
   test('router has a base key', async () => {
-    const element = await page.$('[data-base="http://localhost:6969"]');
+    const element = await page.$('[data-base="https://localhost:6969"]');
     expect(element).toBeTruthy();
   });
 
diff --git a/tests/src/ServerRequestandResponse.test.js b/tests/src/ServerRequestandResponse.test.js
index 40d598f1..089ed7da 100644
--- a/tests/src/ServerRequestandResponse.test.js
+++ b/tests/src/ServerRequestandResponse.test.js
@@ -5,13 +5,13 @@ beforeAll(async () => {
 describe('ServerRequestAndResponse', () => {
 
   test('the port key makes server run in the defined port', async () => {
-    const response = await page.goto('http://localhost:6969');
+    const response = await page.goto('http://localhost:6969', { waitUntil: "networkidle0" });
     const status = response.status();
     expect([200, 304]).toContain(status);
   });
 
   test('server accepts use of middlewares', async () => {
-    const response = await page.goto('http://localhost:6969/api');
+    const response = await page.goto('http://localhost:6969/api', { waitUntil: "networkidle0" });
     const status = response.status();
     expect([200, 304]).toContain(status);
   });
diff --git a/tests/src/UndefinedNodes.test.js b/tests/src/UndefinedNodes.test.js
index d6caed79..3780b59e 100644
--- a/tests/src/UndefinedNodes.test.js
+++ b/tests/src/UndefinedNodes.test.js
@@ -10,7 +10,7 @@ describe('UndefinedNodes WithoutReturn', () => {
 describe('UndefinedNodes WithoutUndefinedReturn', () => {
 
   test('renderable functions with undefined return should raise an error', async () => {
-    const response = await page.goto('http://localhost:6969/undefined-nodes?withoutUndefinedReturn=true');
+    const response = await page.goto('http://localhost:6969/undefined-nodes?withoutUndefinedReturn=true', { waitUntil: "networkidle0" });
     expect(response.status()).toEqual(500)
   });
 
@@ -19,7 +19,7 @@ describe('UndefinedNodes WithoutUndefinedReturn', () => {
 describe('UndefinedNodes WithoutRetunr', () => {
 
   test('tagging a renderable function that does not exist should raise an error', async () => {
-    const response = await page.goto('http://localhost:6969/undefined-nodes?withoutRetunr=true');
+    const response = await page.goto('http://localhost:6969/undefined-nodes?withoutRetunr=true', { waitUntil: "networkidle0" });
     expect(response.status()).toEqual(500)
   });
 
@@ -28,7 +28,7 @@ describe('UndefinedNodes WithoutRetunr', () => {
 describe('UndefinedNodes ForgotToImport', () => {
 
   test('tagging a renderable function that was not imported should raise an error', async () => {
-    const response = await page.goto('http://localhost:6969/undefined-nodes?forgotToImport=true');
+    const response = await page.goto('http://localhost:6969/undefined-nodes?forgotToImport=true', { waitUntil: "networkidle0" });
     expect(response.status()).toEqual(500)
   });
 

From 4990decb98341bf3ac1f555f285426039d0e1775 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Wed, 1 Jun 2022 19:34:52 -0300
Subject: [PATCH 053/105] :sparkles: hot module replacement

---
 client/index.js        | 17 +++++++++++++
 client/invoke.js       |  5 ++++
 loaders/inject-hmr.js  |  9 ++-----
 scripts/index.js       | 54 +++++++++++++-----------------------------
 server/prerender.js    |  6 +++--
 server/server.js       | 28 +++++++++++++++-------
 server/template.js     |  5 ++--
 types/Environment.d.ts |  8 +++++++
 8 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/client/index.js b/client/index.js
index aa42e521..bb6235da 100644
--- a/client/index.js
+++ b/client/index.js
@@ -18,6 +18,7 @@ import router from './router';
 import settings from './settings';
 import worker from './worker';
 import klassMap from './klassMap';
+import windowEvent from './windowEvent'
 
 context.page = page;
 context.router = router;
@@ -109,6 +110,12 @@ export default class Nullstack {
 }
 
 if (module.hot) {
+  const client = new WebSocket('ws://localhost:3000/ws');
+  client.onmessage = function (e) {
+    if (e.data.indexOf('still-ok') > -1) {
+      window.location.reload()
+    }
+  };
   Nullstack.updateInstancesPrototypes = function updateInstancesPrototypes(hash, klass) {
     for (const key in context.instances) {
       const instance = context.instances[key]
@@ -118,5 +125,15 @@ if (module.hot) {
     }
     klassMap[hash] = klass
   }
+  Nullstack.hotReload = function hotReload(klass) {
+    if (client.skipHotReplacement) {
+      setInterval(() => {
+        fetch(window.location.href).then((r) => r.status !== 500 && window.location.reload())
+      }, 100)
+    } else {
+      Nullstack.start(klass);
+      windowEvent('environment');
+    }
+  }
   module.hot.decline()
 }
\ No newline at end of file
diff --git a/client/invoke.js b/client/invoke.js
index 5c60b046..d4b9bbe5 100644
--- a/client/invoke.js
+++ b/client/invoke.js
@@ -41,6 +41,11 @@ export default function invoke(name, hash) {
     try {
       const response = await fetch(url, options);
       page.status = response.status;
+      if (module.hot && page.status === 500) {
+        setInterval(() => {
+          fetch(window.location.href).then((r) => r.status !== 500 && window.location.reload())
+        }, 100)
+      }
       const text = await response.text();
       payload = deserialize(text).result;
       worker.responsive = true;
diff --git a/loaders/inject-hmr.js b/loaders/inject-hmr.js
index 5486a4eb..36d4acbf 100644
--- a/loaders/inject-hmr.js
+++ b/loaders/inject-hmr.js
@@ -19,7 +19,7 @@ module.exports = function (source) {
   traverse(ast, {
     ImportDeclaration(path) {
       if (path.node.specifiers[0].local.name === klassName) {
-        klassPath = path.node.source.value
+        klassPath = path.node.source.extra.rawValue
       }
     }
   });
@@ -27,12 +27,7 @@ module.exports = function (source) {
   return source + `
     if (module.hot) {
       module.hot.accept('${klassPath}', () => {
-        if (client.skipHotReplacement) {
-          location.reload()
-        } else {
-          Nullstack.start(${klassName});
-          windowEvent('environment');
-        }
+        Nullstack.hotReload(${klassName})
       })
     }
   `
diff --git a/scripts/index.js b/scripts/index.js
index 50b18fcf..01ff94a7 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -11,7 +11,6 @@ const { existsSync } = require('fs');
 const customConfig = path.resolve(process.cwd(), './webpack.config.js');
 const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
 const dotenv = require('dotenv')
-const fetch = require('node-fetch')
 
 const buildModes = ['ssg', 'spa', 'ssr']
 
@@ -73,16 +72,16 @@ async function findFreePort() {
   })
 }
 
-async function start({ input, port, env, output, mode = 'ssr' }) {
+async function start({ input, port, env }) {
   const environment = 'development';
   const serverCompiler = getServerCompiler({ environment, input });
   let clientStarted = false
-  let path = '.env'
+  let envPath = '.env'
   if (env) {
     process.env['NULLSTACK_ENVIRONMENT_NAME'] = env;
-    path += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
+    envPath += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
   }
-  dotenv.config({ path })
+  dotenv.config({ path: envPath })
   process.env['NULLSTACK_ENVIRONMENT_MODE'] = 'spa'
   process.env['NULLSTACK_SERVER_PORT'] = port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'];
   let proxyTarget
@@ -102,52 +101,34 @@ async function start({ input, port, env, output, mode = 'ssr' }) {
   console.log();
   const WebpackDevServer = require('webpack-dev-server');
   const { setLogLevel } = require('webpack/hot/log')
-  setLogLevel('error')
+  setLogLevel('none')
   serverCompiler.watch({}, (error, stats) => {
     logTrace(stats, true)
-    // if (!stats.hasErrors() && mode !== 'ssr') {
-    //   require(`../builders/${mode}`)({ output, environment });
-    // };
     if (!clientStarted) {
       clientStarted = true
+      // indexCache = ''
+      // console.log(serverRouter)
       const devServerOptions = {
         hot: true,
         open: false,
-        proxy: {
-          '/nullstack': proxyTarget,
-          // '/sitemap.xml': proxyTarget,
-          // '/robots.txt': proxyTarget,
-          // '/manifest.webmanifest': proxyTarget,
-          // '/service-worker.js': proxyTarget,
+        devMiddleware: {
+          index: false
         },
         client: {
-          overlay: false,
-          logging: 'error',
-          progress: true,
+          overlay: true,
+          logging: 'none',
+          progress: false,
         },
         setupMiddlewares: (middlewares, devServer) => {
           if (!devServer) {
             throw new Error('webpack-dev-server is not defined');
           }
 
-          let cachedText
-
-          middlewares.unshift(async (req, res, next) => {
-            if (req.originalUrl.split('?')[0].indexOf('.') > -1) {
-              return next();
-            }
-            try {
-              const url = proxyTarget + req.originalUrl
-              const response = await fetch(proxyTarget + req.originalUrl)
-              const text = await response.text()
-              if (text.indexOf('<meta name="generator" content="Created with Nullstack - https://nullstack.app" />') > -1 && [200, 304].includes(response.status)) {
-                cachedText = text
-              }
-              res.status(response.status).send(text)
-            } catch (e) {
-              res.send(cachedText)
-            }
-          })
+          middlewares.unshift((req, res, next) => {
+            const serverBundle = require(path.resolve(process.cwd(), '.development/server.js'))
+            const serverRouter = serverBundle.default.server.nullstackRouter
+            serverRouter(req, res, next)
+          });
 
           return middlewares;
         },
@@ -180,7 +161,6 @@ program
   .command('start')
   .alias('s')
   .description('Start application in development environment')
-  .addOption(new program.Option('-m, --mode <mode>', 'Build production bundles').choices(buildModes))
   .option('-p, --port <port>', 'Port number to run the server')
   .option('-i, --input <input>', 'Path to project that will be started')
   .option('-o, --output <output>', 'Path to build output folder')
diff --git a/server/prerender.js b/server/prerender.js
index 1c94800b..4301dbd0 100644
--- a/server/prerender.js
+++ b/server/prerender.js
@@ -36,8 +36,10 @@ export async function prerender(request, response) {
   scope.plugins = loadPlugins(scope);
 
   try {
-    const tree = await generateTree(generator.starter(), scope);
-    scope.body = render(tree, scope);
+    if (environment.production) {
+      const tree = await generateTree(generator.starter(), scope);
+      scope.body = render(tree, scope);
+    }
     if (!online) {
       context.page.status = 200;
     }
diff --git a/server/server.js b/server/server.js
index 00b0d6df..17b119d5 100644
--- a/server/server.js
+++ b/server/server.js
@@ -22,6 +22,8 @@ if (!global.fetch) {
 }
 
 const server = express();
+const router = new express.Router()
+server.nullstackRouter = router
 
 if (environment.production) {
   if (!process.env['NULLSTACK_SERVER_PORT']) {
@@ -35,7 +37,7 @@ if (environment.production) {
 let contextStarted = false
 let serverStarted = false
 
-server.use(async (request, response, next) => {
+router.use(async (request, response, next) => {
   if (!contextStarted) {
     typeof context.start === 'function' && await context.start();
     contextStarted = true;
@@ -121,11 +123,11 @@ server.start = function () {
   if (serverStarted) return;
   serverStarted = true;
 
-  server.use(cors(server.cors));
+  router.use(cors(server.cors));
 
-  server.use(express.static(path.join(__dirname, '..', 'public')));
+  router.use(express.static(path.join(__dirname, '..', 'public')));
 
-  server.use(bodyParser.text({ limit: server.maximumPayloadSize }));
+  router.use(bodyParser.text({ limit: server.maximumPayloadSize }));
 
   server.get(`/:number.client.js`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
@@ -151,23 +153,23 @@ server.start = function () {
     response.send(generateFile('client.js', server));
   });
 
-  server.get(`/manifest.webmanifest`, (request, response) => {
+  router.get(`/manifest.webmanifest`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('application/manifest+json');
     response.send(generateManifest(server));
   });
 
-  server.get(`/service-worker.js`, (request, response) => {
+  router.get(`/service-worker.js`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('text/javascript');
     response.send(generateServiceWorker());
   });
 
-  server.get('/robots.txt', (request, response) => {
+  router.get('/robots.txt', (request, response) => {
     response.send(generateRobots());
   });
 
-  server.all(`/${prefix}/:hash/:methodName.json`, async (request, response) => {
+  router.all(`/${prefix}/:hash/:methodName.json`, async (request, response) => {
     const payload = request.method === 'GET' ? request.query.payload : request.body;
     const args = deserialize(payload);
     const { hash, methodName } = request.params;
@@ -196,7 +198,7 @@ server.start = function () {
     }
   });
 
-  server.get('*', async (request, response, next) => {
+  router.get('*', async (request, response, next) => {
     if (request.originalUrl.split('?')[0].indexOf('.') > -1) {
       return next();
     }
@@ -208,7 +210,15 @@ server.start = function () {
     }
   });
 
+  server.use(router)
+
   if (!server.less) {
+    if (environment.development) {
+      server.get('/nullstac/ping', (request, response) => {
+        response.send({ pong: true })
+      })
+    }
+
     if (!server.port) {
       console.log('\x1b[31mServer port is not defined!\x1b[0m');
       process.exit();
diff --git a/server/template.js b/server/template.js
index 12e0b45f..e4c2879c 100644
--- a/server/template.js
+++ b/server/template.js
@@ -7,7 +7,6 @@ import settings from './settings';
 import renderAttributes from './renderAttributes';
 
 export default function ({ head, body, nextBody, context, instances }) {
-  const timestamp = environment.development ? `&timestamp=${+new Date()}` : ''
   const { page, router, worker, params } = context;
   const canonical = absolute(page.canonical || router.url);
   const image = cdnOrAbsolute(page.image);
@@ -54,13 +53,13 @@ export default function ({ head, body, nextBody, context, instances }) {
     ${page.robots ? `<meta name="robots" content="${page.robots}" />` : ''}
     <meta name="msapplication-starturl" content="/">
     ${project.viewport ? `<meta name="viewport" content="${project.viewport}">` : ''}
-    <link rel="stylesheet" href="${cdn(`/client.css?fingerprint=${environment.key}${timestamp}`)}" integrity="${integrities['client.css'] || ''}" crossorigin="anonymous">
+    <link rel="stylesheet" href="${cdn(`/client.css?fingerprint=${environment.key}`)}" integrity="${integrities['client.css'] || ''}" crossorigin="anonymous">
     ${page.schema ? `<script type="application/ld+json">${JSON.stringify(page.schema)}</script>` : ''}
     ${project.icons['180'] ? `<link rel="apple-touch-icon" sizes="180x180" href="${cdn(project.icons['180'])}">` : ''}
     <meta name="msapplication-TileColor" content="${project.backgroundColor || project.color}">
     <meta name="nullstack" content="${encodeURIComponent(sanitizeString(JSON.stringify(state)))}">
     ${head.split('<!--#-->').join('')}
-    <script src="${cdn(`/client.js?fingerprint=${environment.key}${timestamp}`)}" integrity="${integrities['client.js'] || ''}" defer crossorigin="anonymous"></script>
+    <script src="${cdn(`/client.js?fingerprint=${environment.key}`)}" integrity="${integrities['client.js'] || ''}" defer crossorigin="anonymous"></script>
   </head>
   <body ${renderAttributes(nextBody)}>
     ${environment.mode === 'spa' ? '<div id="application"></div>' : body}
diff --git a/types/Environment.d.ts b/types/Environment.d.ts
index d38b5b7f..f81fd885 100644
--- a/types/Environment.d.ts
+++ b/types/Environment.d.ts
@@ -17,4 +17,12 @@ export type NullstackEnvironment = {
    */
   key: string;
 
+  /**
+   * Event raised when a module is hot replaced.
+   *
+   * @scope client
+   * @see https://nullstack.app/context-environment
+   */
+  event: string;
+
 };
\ No newline at end of file

From 8ae229bac29c91fd4ccef1908754c4fa696dc84e Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Thu, 2 Jun 2022 23:45:40 -0300
Subject: [PATCH 054/105] :sparkles: hrm over a single server

---
 client/index.js   |  2 +-
 package.json      |  1 -
 scripts/index.js  | 37 +++++++------------------------------
 server/project.js |  3 ++-
 server/server.js  | 15 +--------------
 webpack.config.js | 10 ----------
 6 files changed, 11 insertions(+), 57 deletions(-)

diff --git a/client/index.js b/client/index.js
index bb6235da..dda6d0f4 100644
--- a/client/index.js
+++ b/client/index.js
@@ -110,7 +110,7 @@ export default class Nullstack {
 }
 
 if (module.hot) {
-  const client = new WebSocket('ws://localhost:3000/ws');
+  const client = new WebSocket('ws' + window.location.origin.slice(4) + '/ws');
   client.onmessage = function (e) {
     if (e.data.indexOf('still-ok') > -1) {
       window.location.reload()
diff --git a/package.json b/package.json
index 5c8e9e2e..41bb60ca 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "fs-extra": "10.1.0",
     "mini-css-extract-plugin": "2.6.0",
     "node-fetch": "2.6.7",
-    "nodemon-webpack-plugin": "4.7.1",
     "sass": "1.51.0",
     "sass-loader": "8.0.2",
     "swc-loader": "0.2.1",
diff --git a/scripts/index.js b/scripts/index.js
index 01ff94a7..94ac66d0 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -62,15 +62,6 @@ function logTrace(stats, showCompiling) {
   lastTrace = '';
 }
 
-async function findFreePort() {
-  return new Promise((resolve) => {
-    const server = require('express')().listen(0, () => {
-      const port = server.address().port;
-      server.close()
-      resolve(port)
-    });
-  })
-}
 
 async function start({ input, port, env }) {
   const environment = 'development';
@@ -78,25 +69,10 @@ async function start({ input, port, env }) {
   let clientStarted = false
   let envPath = '.env'
   if (env) {
-    process.env['NULLSTACK_ENVIRONMENT_NAME'] = env;
     envPath += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
   }
   dotenv.config({ path: envPath })
   process.env['NULLSTACK_ENVIRONMENT_MODE'] = 'spa'
-  process.env['NULLSTACK_SERVER_PORT'] = port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'];
-  let proxyTarget
-  if (process.env['NULLSTACK_SECONDARY_SERVER_PORT']) {
-    proxyTarget = `http://[::1]:${process.env['NULLSTACK_SECONDARY_SERVER_PORT']}`
-  } if (!process.env['NULLSTACK_WORKER_API']) {
-    process.env['NULLSTACK_SECONDARY_SERVER_PORT'] = await findFreePort()
-    process.env['NULLSTACK_WORKER_API'] = `http://localhost:${process.env['NULLSTACK_SECONDARY_SERVER_PORT']}`
-    proxyTarget = process.env['NULLSTACK_WORKER_API'].replace('//localhost:', '//[::1]:')
-  } else {
-    if (!process.env['NULLSTACK_SECONDARY_SERVER_PORT']) {
-      process.env['NULLSTACK_SECONDARY_SERVER_PORT'] = new URL(process.env['NULLSTACK_WORKER_API']).port
-    }
-    proxyTarget = `http://[::1]:${process.env['NULLSTACK_SECONDARY_SERVER_PORT']}`
-  }
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
   console.log();
   const WebpackDevServer = require('webpack-dev-server');
@@ -104,10 +80,10 @@ async function start({ input, port, env }) {
   setLogLevel('none')
   serverCompiler.watch({}, (error, stats) => {
     logTrace(stats, true)
+    const bundlePath = path.resolve(process.cwd(), '.development/server.js')
+    delete require.cache[require.resolve(bundlePath)]
     if (!clientStarted) {
       clientStarted = true
-      // indexCache = ''
-      // console.log(serverRouter)
       const devServerOptions = {
         hot: true,
         open: false,
@@ -123,16 +99,17 @@ async function start({ input, port, env }) {
           if (!devServer) {
             throw new Error('webpack-dev-server is not defined');
           }
-
           middlewares.unshift((req, res, next) => {
-            const serverBundle = require(path.resolve(process.cwd(), '.development/server.js'))
+            const serverBundle = require(bundlePath)
+            const server = serverBundle.default.server
             const serverRouter = serverBundle.default.server.nullstackRouter
+            server.less = true
+            server.start()
             serverRouter(req, res, next)
           });
-
           return middlewares;
         },
-        port: process.env['NULLSTACK_SERVER_PORT']
+        port: process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || port
       };
       const clientCompiler = getClientCompiler({ environment, input });
       const server = new WebpackDevServer(devServerOptions, clientCompiler);
diff --git a/server/project.js b/server/project.js
index 184bb13e..27d4e693 100644
--- a/server/project.js
+++ b/server/project.js
@@ -1,5 +1,6 @@
 import environment from './environment';
 import worker from './worker';
+import server from './server';
 
 const project = {};
 
@@ -19,7 +20,7 @@ project.disallow = [];
 project.icons = JSON.parse(`{{NULLSTACK_PROJECT_ICONS}}`);
 
 export function generateBase() {
-  const port = project.domain === 'localhost' ? `:${process.env['NULLSTACK_SERVER_PORT']}` : '';
+  const port = project.domain === 'localhost' ? `:${server.port}` : '';
   return `${worker.protocol}://${project.domain}${port}`;
 }
 
diff --git a/server/server.js b/server/server.js
index 17b119d5..650da0a2 100644
--- a/server/server.js
+++ b/server/server.js
@@ -25,14 +25,7 @@ const server = express();
 const router = new express.Router()
 server.nullstackRouter = router
 
-if (environment.production) {
-  if (!process.env['NULLSTACK_SERVER_PORT']) {
-    process.env['NULLSTACK_SERVER_PORT'] = process.env['PORT']
-  }
-  server.port = process.env['NULLSTACK_SERVER_PORT'] || 3000
-} else {
-  server.port = process.env['NULLSTACK_SECONDARY_SERVER_PORT'] || 3000
-}
+server.port = process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
 
 let contextStarted = false
 let serverStarted = false
@@ -213,12 +206,6 @@ server.start = function () {
   server.use(router)
 
   if (!server.less) {
-    if (environment.development) {
-      server.get('/nullstac/ping', (request, response) => {
-        response.send({ pong: true })
-      })
-    }
-
     if (!server.port) {
       console.log('\x1b[31mServer port is not defined!\x1b[0m');
       process.exit();
diff --git a/webpack.config.js b/webpack.config.js
index d5f67078..d5cdf5e5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const NodemonPlugin = require('nodemon-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
 const crypto = require("crypto");
@@ -117,15 +116,6 @@ function server(env, argv) {
   const devtool = isDev ? 'inline-cheap-module-source-map' : false;
   const minimize = !isDev;
   const plugins = []
-  if (isDev) {
-    plugins.push(new NodemonPlugin({
-      ext: '*',
-      watch: [".env", ".env.*", './.development/*.*'],
-      script: './.development/server.js',
-      nodeArgs: ['--enable-source-maps'],
-      quiet: true
-    }))
-  }
   return {
     mode: argv.environment,
     entry: './server.js',

From 42f36fee39f487af819def6098ac16f486f966d2 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 3 Jun 2022 01:02:34 -0300
Subject: [PATCH 055/105] :lipstick: better console messages

---
 scripts/index.js | 52 ++++++++++++++----------------------------------
 server/server.js |  2 +-
 2 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 94ac66d0..1db3498b 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -2,9 +2,6 @@
 const { program } = require('commander');
 const { version } = require('../package.json');
 
-let lastTrace = '';
-let compilingIndex = 1;
-
 const webpack = require('webpack');
 const path = require('path');
 const { existsSync } = require('fs');
@@ -30,39 +27,14 @@ function getClientCompiler(options) {
   return webpack(getConfig(options)[1])
 }
 
-function logCompiling(showCompiling) {
-  if (!showCompiling) return;
-  console.log(" ⚙️  Compiling changes...");
-}
-
-function logTrace(stats, showCompiling) {
+function logTrace(stats) {
   if (stats.hasErrors()) {
-    const response = stats.toJson('errors-only', { colors: true })
-    const error = response.errors[0] || response.children[0].errors[0];
-    const { moduleName: file, message } = error
-    const [loader, ...trace] = message.split('\n');
-    if (loader.indexOf('/nullstack/loaders') === -1) trace.unshift(loader)
-    const currentTrace = trace.join(' ');
-    if (lastTrace === currentTrace) return;
-    lastTrace = currentTrace;
-    logCompiling(showCompiling);
-    console.log(` 💥️ There is an error preventing compilation in \x1b[31m${file}\x1b[0m`);
-    for (const line of trace) {
-      console.log('\x1b[31m%s\x1b[0m', '    ' + line.trim());
-    }
-    console.log();
-    compilingIndex = 0;
-    return
-  }
-  compilingIndex++;
-  if (compilingIndex % 2 === 0) {
-    logCompiling(showCompiling);
-    compilingIndex = 0;
+    console.log(`\n 💥️ There is an error preventing compilation`);
+  } else {
+    console.log('\x1b[36m%s\x1b[0m', `\n ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
   }
-  lastTrace = '';
 }
 
-
 async function start({ input, port, env }) {
   const environment = 'development';
   const serverCompiler = getServerCompiler({ environment, input });
@@ -72,9 +44,9 @@ async function start({ input, port, env }) {
     envPath += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
   }
   dotenv.config({ path: envPath })
+  port ??= process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
   process.env['NULLSTACK_ENVIRONMENT_MODE'] = 'spa'
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
-  console.log();
   const WebpackDevServer = require('webpack-dev-server');
   const { setLogLevel } = require('webpack/hot/log')
   setLogLevel('none')
@@ -100,22 +72,28 @@ async function start({ input, port, env }) {
             throw new Error('webpack-dev-server is not defined');
           }
           middlewares.unshift((req, res, next) => {
+            if (req.originalUrl.indexOf('.hot-update.') === -1) {
+              if (req.originalUrl.startsWith('/nullstack/')) {
+                console.log(`  ⚙️ [${req.method}] ${req.originalUrl}`)
+              } else {
+                console.log(`  🕸️ [${req.method}] ${req.originalUrl}`)
+              }
+            }
             const serverBundle = require(bundlePath)
             const server = serverBundle.default.server
             const serverRouter = serverBundle.default.server.nullstackRouter
             server.less = true
+            server.port = port
             server.start()
             serverRouter(req, res, next)
           });
           return middlewares;
         },
-        port: process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || port
+        port
       };
       const clientCompiler = getClientCompiler({ environment, input });
       const server = new WebpackDevServer(devServerOptions, clientCompiler);
-      server.startCallback(() => {
-        console.log('\x1b[36m%s\x1b[0m', ` ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
-      });
+      server.start();
     }
   });
 }
diff --git a/server/server.js b/server/server.js
index 650da0a2..1d1ad353 100644
--- a/server/server.js
+++ b/server/server.js
@@ -25,7 +25,7 @@ const server = express();
 const router = new express.Router()
 server.nullstackRouter = router
 
-server.port = process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
+server.port ??= process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
 
 let contextStarted = false
 let serverStarted = false

From 8f5225d9b8911ad5371075581762b3bc36b6926b Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 3 Jun 2022 22:17:07 -0300
Subject: [PATCH 056/105] :recycle: better build errors

---
 scripts/index.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 1db3498b..07849616 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -27,14 +27,6 @@ function getClientCompiler(options) {
   return webpack(getConfig(options)[1])
 }
 
-function logTrace(stats) {
-  if (stats.hasErrors()) {
-    console.log(`\n 💥️ There is an error preventing compilation`);
-  } else {
-    console.log('\x1b[36m%s\x1b[0m', `\n ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
-  }
-}
-
 async function start({ input, port, env }) {
   const environment = 'development';
   const serverCompiler = getServerCompiler({ environment, input });
@@ -51,7 +43,11 @@ async function start({ input, port, env }) {
   const { setLogLevel } = require('webpack/hot/log')
   setLogLevel('none')
   serverCompiler.watch({}, (error, stats) => {
-    logTrace(stats, true)
+    if (stats.hasErrors()) {
+      console.log(`\n 💥️ There is an error preventing compilation`);
+    } else {
+      console.log('\x1b[36m%s\x1b[0m', `\n ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
+    }
     const bundlePath = path.resolve(process.cwd(), '.development/server.js')
     delete require.cache[require.resolve(bundlePath)]
     if (!clientStarted) {
@@ -106,7 +102,10 @@ function build({ input, output, cache, env, mode = 'ssr' }) {
   }
   console.log(` 🚀️ Building your application in ${mode} mode...`);
   compiler.run((error, stats) => {
-    logTrace(stats, false);
+    if (stats.hasErrors()) {
+      console.log(stats.toString({ colors: true }))
+      process.exit(1);
+    }
     if (stats.hasErrors()) process.exit(1);
     require(`../builders/${mode}`)({ output, cache, environment });
   });

From 1679c2df8a4144eb97d5d906f0c349c21c031e1c Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 5 Jun 2022 02:53:12 -0300
Subject: [PATCH 057/105] :sparkles: new binds and refs

---
 client/client.js                      |  11 +-
 client/events.js                      |  14 +--
 client/hydrate.js                     |   2 +
 client/index.js                       |  12 +--
 client/instanceProxyHandler.js        |   2 +-
 client/ref.js                         |  12 +++
 client/render.js                      |   5 +-
 client/rerender.js                    |   4 -
 loaders/add-source-to-node.js         |  28 +----
 loaders/transform-node-ref.js         |  49 +++++++++
 plugins/bindable.js                   |   9 +-
 server/index.js                       |  17 ++--
 server/instanceProxyHandler.js        |   2 +-
 shared/generateTree.js                |  28 +++--
 tests/src/AnchorModifiers.njs         |   8 +-
 tests/src/Application.njs             |   6 +-
 tests/src/ArrayAttributes.njs         |   4 +-
 tests/src/BodyFragment.njs            |   4 +-
 tests/src/DateParser.njs              |  18 ++--
 tests/src/HydrateElement.njs          |  17 ----
 tests/src/HydrateElement.test.js      |  15 ---
 tests/src/InstanceSelf.njs            |  24 ++---
 tests/src/InstanceSelf.test.js        |  16 +--
 tests/src/Instanceable.njs            |   9 +-
 tests/src/Instanceable.test.js        |   2 +-
 tests/src/LazyComponentLoader.njs     |   4 +-
 tests/src/NestedProxy.njs             |  26 ++---
 tests/src/PersistentComponent.njs     |  22 ++--
 tests/src/PersistentComponent.test.js |  14 +--
 tests/src/Refs.njs                    |  36 +++++++
 tests/src/Refs.test.js                |  51 ++++++++++
 tests/src/RoutesAndParams.njs         |   4 +-
 tests/src/StatefulComponent.njs       |   8 +-
 tests/src/TwoWayBindings.njs          |  41 +++++---
 tests/src/TwoWayBindings.test.js      |  22 +++-
 tests/src/TypeScript.nts              |   4 +-
 tests/src/TypesScript.test.js         |   4 +-
 types/ClientContext.d.ts              |   9 --
 types/JSX.d.ts                        | 141 +++++++++++++-------------
 types/Self.d.ts                       |  25 -----
 types/index.d.ts                      |  34 +++++--
 webpack.config.js                     |   8 ++
 42 files changed, 426 insertions(+), 345 deletions(-)
 create mode 100644 client/ref.js
 create mode 100644 loaders/transform-node-ref.js
 delete mode 100644 tests/src/HydrateElement.njs
 delete mode 100644 tests/src/HydrateElement.test.js
 create mode 100644 tests/src/Refs.njs
 create mode 100644 tests/src/Refs.test.js
 delete mode 100644 types/Self.d.ts

diff --git a/client/client.js b/client/client.js
index e678c48f..15f0a670 100644
--- a/client/client.js
+++ b/client/client.js
@@ -56,7 +56,7 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
   while (client.initiationQueue.length) {
     const instance = client.initiationQueue.shift()
     instance.initiate && await instance.initiate()
-    instance._self.initiated = true
+    instance.initiated = true
     instance.launch && instance.launch()
     shouldUpdate = true
     if (instance._attributes.route && shouldScroll) {
@@ -73,7 +73,7 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
     shouldUpdate = true
     const instance = client.realHydrationQueue.shift()
     instance.hydrate && await instance.hydrate()
-    instance._self.hydrated = true
+    instance.hydrated = true
   }
   shouldUpdate && client.update()
   shouldUpdate = false
@@ -85,11 +85,10 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
   shouldUpdate && client.update()
   for (const key in client.instances) {
     const instance = client.instances[key]
-    if (!client.renewalQueue.includes(instance) && !instance._self.terminated) {
+    if (!client.renewalQueue.includes(instance) && !instance.terminated) {
       instance.terminate && await instance.terminate()
-      if (instance._self.persistent) {
-        instance._self.terminated = true
-        instance._self.element = null
+      if (instance.persistent) {
+        instance.terminated = true
       } else {
         delete client.instances[key]
       }
diff --git a/client/events.js b/client/events.js
index b23d5d07..7932c65e 100644
--- a/client/events.js
+++ b/client/events.js
@@ -16,14 +16,16 @@ export function generateCallback(selector, name) {
     const subject = eventSubjects.get(selector)
     if (subject?.bind !== undefined) {
       const valueName = (subject.type === 'checkbox' || subject.type === 'radio') ? 'checked' : 'value'
+      const object = subject.bind.object
+      const property = subject.bind.property
       if (valueName === 'checked') {
-        subject.source[subject.bind] = event.target[valueName];
-      } else if (subject.source[subject.bind] === true || subject.source[subject.bind] === false) {
-        subject.source[subject.bind] = event.target[valueName] === 'true';
-      } else if (typeof subject.source[subject.bind] === 'number') {
-        subject.source[subject.bind] = +event.target[valueName] || 0;
+        object[property] = event.target[valueName];
+      } else if (object[property] === true || object[property] === false) {
+        object[property] = event.target[valueName] === 'true';
+      } else if (typeof object[property] === 'number') {
+        object[property] = +event.target[valueName] || 0;
       } else {
-        subject.source[subject.bind] = event.target[valueName];
+        object[property] = event.target[valueName];
       }
     }
     if (subject.href) {
diff --git a/client/hydrate.js b/client/hydrate.js
index 6d4c5ca4..9271111d 100644
--- a/client/hydrate.js
+++ b/client/hydrate.js
@@ -1,3 +1,4 @@
+import ref from './ref';
 import { isFalse } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import client from './client';
@@ -9,6 +10,7 @@ function hydrateBody(selector, node) {
     anchorableElement(selector);
   }
   node.element = selector
+  ref(node, selector)
   for (const element of selector.childNodes) {
     if ((element.tagName === 'TEXTAREA' || element.tagName === 'textarea') && element.childNodes.length === 0) {
       element.appendChild(document.createTextNode(''));
diff --git a/client/index.js b/client/index.js
index dda6d0f4..05ce0985 100644
--- a/client/index.js
+++ b/client/index.js
@@ -89,13 +89,11 @@ export default class Nullstack {
     return this.context;
   }
 
-  _self = {
-    prerendered: false,
-    initiated: false,
-    hydrated: false,
-    terminated: false,
-    element: null,
-  }
+  prerendered = false
+  initiated = false
+  hydrated = false
+  terminated = false
+  key = null
 
   constructor() {
     const proxy = new Proxy(this, instanceProxyHandler);
diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index ff5f7ef3..ef1a971c 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -11,7 +11,7 @@ const instanceProxyHandler = {
     if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof target[name] === 'function' && name !== 'constructor') {
       const { [name]: named } = {
         [name]: (args) => {
-          const context = generateContext({ ...target._attributes, ...args, self: target._self });
+          const context = generateContext({ ...target._attributes, ...args });
           const proxy = instanceProxies.get(target)
           return target[name].call(proxy, context);
         }
diff --git a/client/ref.js b/client/ref.js
new file mode 100644
index 00000000..859227e8
--- /dev/null
+++ b/client/ref.js
@@ -0,0 +1,12 @@
+export default function ref(node, element) {
+  if (!node.attributes?.ref) return
+  const object = node.attributes.ref.object
+  const property = node.attributes.ref.property
+  if (typeof object[property] === 'function') {
+    setTimeout(() => {
+      object[property]({ element })
+    }, 0)
+  } else {
+    object[property] = element
+  }
+}
\ No newline at end of file
diff --git a/client/render.js b/client/render.js
index 08db2d9a..087730b7 100644
--- a/client/render.js
+++ b/client/render.js
@@ -1,6 +1,7 @@
 import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import { eventCallbacks, eventSubjects, generateCallback } from './events'
+import ref from './ref'
 
 export default function render(node, options) {
 
@@ -22,9 +23,7 @@ export default function render(node, options) {
     node.element = document.createElement(node.type);
   }
 
-  if (node.instance) {
-    node.instance._self.element = node.element;
-  }
+  ref(node, node.element)
 
   for (let name in node.attributes) {
     if (name === 'html') {
diff --git a/client/rerender.js b/client/rerender.js
index 375bbeb6..9b4f645c 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -95,10 +95,6 @@ function _rerender(current, next) {
   const selector = current.element
   next.element = current.element
 
-  if (next.instance) {
-    next.instance._self.element = selector;
-  }
-
   if (isFalse(current) && isFalse(next)) {
     return;
   }
diff --git a/loaders/add-source-to-node.js b/loaders/add-source-to-node.js
index 446f06c7..48d89ce5 100644
--- a/loaders/add-source-to-node.js
+++ b/loaders/add-source-to-node.js
@@ -1,36 +1,10 @@
 module.exports = function (source) {
-  let match;
   let tags = source.split('<');
-  source = tags.map((tag) => {
-    match = tag.match(/bind\=\{(.*?)\}/);
-    if (match && tag.indexOf('source={') === -1) {
-      let [a, b] = match[1].split(/\.(?=[^\.]+$)/);
-      if (!b) {
-        b = a;
-        a = '';
-      }
-      if (b.indexOf('[') > -1) {
-        const [ref, index] = b.split('[');
-        if (a) {
-          a = [a, ref].join('.');
-        } else {
-          a = ref;
-        }
-        b = '{' + index.replace(']', '}');
-      } else {
-        b = `"${b}"`;
-      }
-      return tag.replace(match[0], `source={${a}} bind=${b}`);
-    }
-    return tag;
-  }).join('<');
-  tags = source.split('<');
-  source = tags.map((tag) => {
+  return tags.map((tag) => {
     match = tag.match(/\ on([a-z]*?)\=\{(.*?)\}/);
     if (match && tag.indexOf('source={') === -1) {
       return tag.substring(0, match.index) + ' source={this}' + tag.substring(match.index);
     }
     return tag;
   }).join('<');
-  return source;
 }
\ No newline at end of file
diff --git a/loaders/transform-node-ref.js b/loaders/transform-node-ref.js
new file mode 100644
index 00000000..8be96e23
--- /dev/null
+++ b/loaders/transform-node-ref.js
@@ -0,0 +1,49 @@
+const parse = require('@babel/parser').parse;
+const traverse = require("@babel/traverse").default;
+
+const attributes = ['ref', 'bind']
+
+module.exports = function removeStaticFromClient(source) {
+  const ast = parse(source, {
+    sourceType: 'module',
+    plugins: ['classProperties', 'jsx', 'typescript']
+  });
+  const refs = []
+  traverse(ast, {
+    JSXAttribute(path) {
+      const attribute = path.node.name.name
+      if (attributes.includes(attribute)) {
+        const expression = path.node.value.expression
+        if (expression.type !== 'Identifier') {
+          const object = expression.object
+          const property = expression.property
+          const refObject = source.slice(object.start, object.end)
+          let refProperty = source.slice(property.start, property.end)
+          if (property.type === 'Identifier' && !expression.computed) {
+            refProperty = `'${refProperty}'`
+          }
+          replacement = `${attribute}={{object: ${refObject}, property: ${refProperty}}}`
+          refs.push({
+            start: path.node.start,
+            end: path.node.end,
+            replacement
+          })
+        }
+      }
+    }
+  });
+  if (refs.length === 0) return source
+  const sources = []
+  for (let i = 0; i <= refs.length; i++) {
+    const prev = refs[i - 1]
+    const current = refs[i]
+    const start = prev ? prev.end : 0
+    const end = current ? current.start : undefined
+    const before = source.slice(start, end)
+    sources.push(before)
+    if (current) {
+      sources.push(current.replacement)
+    }
+  }
+  return sources.join('')
+}
\ No newline at end of file
diff --git a/plugins/bindable.js b/plugins/bindable.js
index e7a882d0..7ab9bc4e 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -4,13 +4,14 @@ function match(node) {
 
 function transform({ node, environment }) {
   if (!match(node)) return;
-  const target = node.attributes.source;
+  const object = node.attributes.bind.object;
+  const property = node.attributes.bind.property;
   if (node.type === 'textarea') {
-    node.children = [target[node.attributes.bind]];
+    node.children = [object[property]];
   } else if (node.type === 'input' && node.attributes.type === 'checkbox') {
-    node.attributes.checked = target[node.attributes.bind];
+    node.attributes.checked = object[property];
   } else {
-    node.attributes.value = target[node.attributes.bind] ?? '';
+    node.attributes.value = object[property] ?? '';
   }
   node.attributes.name = node.attributes.name || node.attributes.bind;
   if (environment.client) {
diff --git a/server/index.js b/server/index.js
index 46a157a9..9da83611 100644
--- a/server/index.js
+++ b/server/index.js
@@ -43,13 +43,11 @@ class Nullstack {
     }
   }
 
-  _self = {
-    prerendered: true,
-    initiated: false,
-    hydrated: false,
-    terminated: false,
-    element: null,
-  }
+  prerendered = true
+  initiated = false
+  hydrated = false
+  terminated = false
+  key = null
 
   constructor(scope) {
     this._request = () => scope.request;
@@ -65,6 +63,11 @@ class Nullstack {
   toJSON() {
     const serialized = {};
     for (const name of Object.getOwnPropertyNames(this)) {
+      if (name === 'prerendered') continue
+      if (name === 'initiated') continue
+      if (name === 'hydrated') continue
+      if (name === 'terminated') continue
+      if (name === 'key') continue
       if (typeof this[name] !== 'function' && !name.startsWith('_') && name !== 'attributes') {
         serialized[name] = this[name];
       }
diff --git a/server/instanceProxyHandler.js b/server/instanceProxyHandler.js
index 84d06c8a..be0d8f75 100644
--- a/server/instanceProxyHandler.js
+++ b/server/instanceProxyHandler.js
@@ -2,7 +2,7 @@ const instanceProxyHandler = {
   get(target, name) {
     if (!target[name]?.name?.startsWith('_') && !name?.startsWith?.('_') && typeof target[name] === 'function' && name !== 'constructor') {
       return (args) => {
-        const context = target._scope.generateContext({ ...target._attributes, ...args, self: target._self });
+        const context = target._scope.generateContext({ ...target._attributes, ...args });
         return target[name](context);
       }
     }
diff --git a/shared/generateTree.js b/shared/generateTree.js
index c9041532..eda72332 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -46,28 +46,28 @@ async function generateBranch(siblings, node, depth, scope) {
       }
     }
     const instance = scope.instances[key] || new node.type(scope);
-    instance._self.persistent = !!node.attributes.persistent
-    instance._self.key = key;
+    instance.persistent = !!node.attributes.persistent
+    instance.key = key;
     instance._attributes = node.attributes;
     instance._scope = scope;
     let memory;
     if (scope.memory) {
       memory = scope.memory[key];
       if (memory) {
-        instance._self.prerendered = true;
-        instance._self.initiated = true;
+        instance.prerendered = true;
+        instance.initiated = true;
         Object.assign(instance, memory);
         delete scope.memory[key];
       }
     }
     let shouldHydrate = false;
-    const shouldLaunch = instance._self.initiated && (
-      !instance._self.prerendered ||
-      (instance._self.persistent && instance._self.terminated)
+    const shouldLaunch = instance.initiated && (
+      !instance.prerendered ||
+      (instance.persistent && instance.terminated)
     )
-    if (instance._self.terminated) {
+    if (instance.terminated) {
       shouldHydrate = true;
-      instance._self.terminated = false;
+      instance.terminated = false;
     }
     const shouldPrepare = scope.instances[key] === undefined;
     scope.instances[key] = instance;
@@ -76,7 +76,7 @@ async function generateBranch(siblings, node, depth, scope) {
         instance.prepare && instance.prepare();
         if (scope.context.environment.server) {
           instance.initiate && await instance.initiate();
-          instance._self.initiated = true;
+          instance.initiated = true;
           instance.launch && instance.launch();
         } else {
           scope.initiationQueue.push(instance);
@@ -88,7 +88,7 @@ async function generateBranch(siblings, node, depth, scope) {
       if (shouldHydrate) {
         shouldLaunch && instance.launch && instance.launch();
         scope.hydrationQueue.push(instance);
-      } else if (instance._self.initiated === true) {
+      } else if (instance.initiated === true) {
         instance.update && instance.update();
       }
     }
@@ -156,8 +156,7 @@ async function generateBranch(siblings, node, depth, scope) {
       const branch = {
         type: node.type,
         attributes: node.attributes,
-        children: [],
-        instance: node.instance
+        children: []
       }
       for (let i = 0; i < node.children.length; i++) {
         await generateBranch(branch.children, node.children[i], depth + '-' + i, scope);
@@ -169,8 +168,7 @@ async function generateBranch(siblings, node, depth, scope) {
 
   siblings.push({
     type: 'text',
-    text: node,
-    instance: node.instance,
+    text: node
   });
 
 }
diff --git a/tests/src/AnchorModifiers.njs b/tests/src/AnchorModifiers.njs
index e982d5ac..449509ae 100644
--- a/tests/src/AnchorModifiers.njs
+++ b/tests/src/AnchorModifiers.njs
@@ -10,8 +10,8 @@ class AnchorModifiers extends Nullstack {
   objected = false
   updated = false
 
-  hydrate({ self }) {
-    self.element.querySelector('a').addEventListener('click', () => {
+  hydrate() {
+    this._element.querySelector('a').addEventListener('click', () => {
       this.clickedHTML = true
     })
   }
@@ -28,9 +28,9 @@ class AnchorModifiers extends Nullstack {
     this.count++
   }
 
-  render({ self }) {
+  render() {
     return (
-      <div data-clicked-jsx={this.clickedJSX} data-clicked-html={this.clickedHTML} data-count={this.count} data-objected={this.objected} data-updated={this.updated} data-hydrated={self.hydrated}>
+      <div ref={this._element} data-clicked-jsx={this.clickedJSX} data-clicked-html={this.clickedHTML} data-count={this.count} data-objected={this.objected} data-updated={this.updated} data-hydrated={this.hydrated}>
         <div html={this.html} />
         <button onclick={this.markAsUpdated}> update </button>
         <a href="/anchor-modifiers?source=jsx" onclick={this.clickJSX}>
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index ad417837..8aed7f33 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -46,7 +46,7 @@ import WorkerVerbs from './WorkerVerbs';
 import MetatagState from './MetatagState';
 import TypeScriptExtension from './TypeScriptExtension';
 import JavaScriptExtension from './JavaScriptExtension';
-import HydrateElement from './HydrateElement';
+import Refs from './Refs';
 import OptimizedEvents from './OptimizedEvents';
 import DynamicHead from './DynamicHead'
 import TextObserver from './TextObserver';
@@ -75,7 +75,7 @@ class Application extends Nullstack {
           <a href="/routes-and-params/a"> router with params </a>
           <a href="/undefined-nodes"> undefined nodes </a>
           <a href="/full-stack-lifecycle"> lifecycle </a>
-          <a href="/hydrate-element"> hydrate element </a>
+          <a href="/refs"> refs </a>
           <a href="/error-on-child-node?dom=true"> error-on-child-node?dom=true </a>
           <a href="/error-on-child-node?serialization=true"> error-on-child-node?serialization=true </a>
           <a href="/route-scroll/class?changed=1#bottom">#bottom</a>
@@ -125,7 +125,7 @@ class Application extends Nullstack {
         <MetatagState route="/metatag-state" />
         <JavaScriptExtension route="/javascript-extension" />
         <TypeScriptExtension route="/typescript-extension" generic />
-        <HydrateElement route="/hydrate-element" />
+        <Refs route="/refs" />
         <OptimizedEvents route="/optimized-events" />
         <DynamicHead route="/dynamic-head" />
         <TextObserver route="/text-observer" />
diff --git a/tests/src/ArrayAttributes.njs b/tests/src/ArrayAttributes.njs
index 6e9e42c0..3ea7c75d 100644
--- a/tests/src/ArrayAttributes.njs
+++ b/tests/src/ArrayAttributes.njs
@@ -15,9 +15,9 @@ class ArrayAttributes extends Nullstack {
     this.count += this.count
   }
 
-  render({ self }) {
+  render() {
     return (
-      <div data-count={this.count} data-objected={this.objected} data-hydrated={self.hydrated}>
+      <div data-count={this.count} data-objected={this.objected} data-hydrated={this.hydrated}>
         <span class={this.classes}> {JSON.stringify(this.classes)} </span>
         <span style={this.styles}> {JSON.stringify(this.styles)} </span>
         <button onclick={{ classes: 'd' }} data-d>d</button>
diff --git a/tests/src/BodyFragment.njs b/tests/src/BodyFragment.njs
index 57da161b..c16b2c79 100644
--- a/tests/src/BodyFragment.njs
+++ b/tests/src/BodyFragment.njs
@@ -18,9 +18,9 @@ class BodyFragment extends Nullstack {
     this.hasDataKeys = Object.keys(data).length > 0
   }
 
-  render({ self }) {
+  render() {
     return (
-      <body data-chars="a" onclick={[this.increment, this.countDataKeys, { objected: true }]} data-count={this.count} class={["class-one", "class-two", false]} style="background-color: black;" data-keys={this.hasDataKeys} data-hydrated={self.hydrated}>
+      <body data-chars="a" onclick={[this.increment, this.countDataKeys, { objected: true }]} data-count={this.count} class={["class-one", "class-two", false]} style="background-color: black;" data-keys={this.hasDataKeys} data-hydrated={this.hydrated}>
         <body data-chars="b" data-numbers="0" data-count={this.count} onclick={this.reveal} class="class-three class-four" style="color: white;" data-objected={this.objected}>
           BodyFragment
         </body>
diff --git a/tests/src/DateParser.njs b/tests/src/DateParser.njs
index fb118093..70e6c737 100644
--- a/tests/src/DateParser.njs
+++ b/tests/src/DateParser.njs
@@ -3,20 +3,20 @@ import Nullstack from 'nullstack';
 class DateParser extends Nullstack {
 
   object = null;
- 
+
   prepare(context) {
-    const date = new Date('1992-10-16'); 
-    context.object = {date}
-    this.object = {date};
+    const date = new Date('1992-10-16');
+    context.object = { date }
+    this.object = { date };
   }
-  
-  render({self, object}) {
+
+  render({ object }) {
     return (
-      <div> 
+      <div>
         <div data-ssr-instance-year={this.object.date.getYear()} />
         <div data-ssr-context-year={object.date.getYear()} />
-        {self.hydrated && <div data-spa-instance-year={this.object.date.getYear()} />}
-        {self.hydrated && <div data-spa-context-year={object.date.getYear()} />}
+        {this.hydrated && <div data-spa-instance-year={this.object.date.getYear()} />}
+        {this.hydrated && <div data-spa-context-year={object.date.getYear()} />}
       </div>
     )
   }
diff --git a/tests/src/HydrateElement.njs b/tests/src/HydrateElement.njs
deleted file mode 100644
index 74ca661f..00000000
--- a/tests/src/HydrateElement.njs
+++ /dev/null
@@ -1,17 +0,0 @@
-import Nullstack from 'nullstack';
-
-class HydrateElement extends Nullstack {
-
-  hydrate({ self }) {
-    this.id = self.element.id
-  }
-
-  render() {
-    return (
-      <div id="hydrate-element" data-id={this.id}> HydrateElement </div>
-    )
-  }
-
-}
-
-export default HydrateElement;
\ No newline at end of file
diff --git a/tests/src/HydrateElement.test.js b/tests/src/HydrateElement.test.js
deleted file mode 100644
index cd930528..00000000
--- a/tests/src/HydrateElement.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-describe('FullStackLifecycle ssr', () => {
-
-  beforeAll(async () => {
-    await page.goto('http://localhost:6969/');
-    await page.click('[href="/hydrate-element"]')
-  });
-
-  test('prepare should run', async () => {
-    await page.waitForSelector('[data-id="hydrate-element"]');
-    const element = await page.$('[data-id="hydrate-element"]');
-    expect(element).toBeTruthy();
-  });
-
-
-});
\ No newline at end of file
diff --git a/tests/src/InstanceSelf.njs b/tests/src/InstanceSelf.njs
index 26e129d1..180e9ef4 100644
--- a/tests/src/InstanceSelf.njs
+++ b/tests/src/InstanceSelf.njs
@@ -3,26 +3,14 @@ import StatefulComponent from './StatefulComponent';
 
 class InstanceSelf extends Nullstack {
 
-  optimize = false;
-
-  hydrate({self}) {
-    this.className = self.element.className;
-  }
-  
-  render({self}) {
+  render() {
     return (
       <div class="InstanceSelf">
-        <div data-initiated={self.initiated} />
-        <div data-hydrated={self.hydrated} />
-        <div data-prerendered={self.prerendered} />
-        <div data-key={self.key} />
-        {self.hydrated &&
-          <>
-            <div data-class-name={self.element.className} />
-            <div data-hydrated-class-name={this.className} />
-            <StatefulComponent />
-          </>
-        }
+        <div data-initiated={this.initiated} />
+        <div data-hydrated={this.hydrated} />
+        <div data-prerendered={this.prerendered} />
+        <div data-key={this.key} />
+        {this.hydrated && <StatefulComponent />}
       </div>
     )
   }
diff --git a/tests/src/InstanceSelf.test.js b/tests/src/InstanceSelf.test.js
index ef3ce280..067e64b5 100644
--- a/tests/src/InstanceSelf.test.js
+++ b/tests/src/InstanceSelf.test.js
@@ -4,37 +4,31 @@ beforeAll(async () => {
 
 describe('InstanceSelf', () => {
 
-  test('self is aware that the component initiated', async () => {
+  test('instance is aware that the component initiated', async () => {
     await page.waitForSelector('[data-initiated]');
     const element = await page.$('[data-initiated]');
     expect(element).toBeTruthy();
   });
 
-  test('self is aware that the component is hydrated', async () => {
+  test('instance is aware that the component is hydrated', async () => {
     await page.waitForSelector('[data-hydrated]');
     const element = await page.$('[data-hydrated]');
     expect(element).toBeTruthy();
   });
 
-  test('self is aware that the component was prerendered', async () => {
+  test('instance is aware that the component was prerendered', async () => {
     await page.waitForSelector('[data-prerendered]');
     const element = await page.$('[data-prerendered]');
     expect(element).toBeTruthy();
   });
 
-  test('self is aware of the component element', async () => {
-    await page.waitForSelector('[data-class-name="InstanceSelf"]');
-    const element = await page.$('[data-class-name="InstanceSelf"]');
-    expect(element).toBeTruthy();
-  });
-
-  test('self key has route appended to depth if no key is declared', async () => {
+  test('instance key has route appended to depth if no key is declared', async () => {
     await page.waitForSelector('[data-key="InstanceSelf/0-0-6/instance-self"]');
     const element = await page.$('[data-key="InstanceSelf/0-0-6/instance-self"]');
     expect(element).toBeTruthy();
   });
 
-  test('self is aware of the component element after render', async () => {
+  test('instance is aware of the component element after render', async () => {
     await page.waitForSelector('[data-tag="form"]');
     const element = await page.$('[data-tag="form"]');
     expect(element).toBeTruthy();
diff --git a/tests/src/Instanceable.njs b/tests/src/Instanceable.njs
index 93cbc5e6..7b882d3c 100644
--- a/tests/src/Instanceable.njs
+++ b/tests/src/Instanceable.njs
@@ -39,22 +39,21 @@ class Instanceable extends Nullstack {
     instanceable.serverLoaded = true;
   }
 
-  renderTitle({ title, self }) {
+  renderTitle({ title }) {
     return (
       title[0] !== '_isProxy' &&
-      <p data-title={title[0]} data-hydrated={self.hydrated}>
+      <p data-title={title[0]} data-hydrated={this.hydrated}>
         {this.title[title[0]]}
       </p>
     )
   }
 
-  render({ instances, self }) {
+  render({ instances }) {
     const { application } = instances;
     const mainHasKey = (
       application &&
       typeof application.changeInstanceable === 'function'
     );
-
     return (
       <div>
         {application &&
@@ -71,7 +70,7 @@ class Instanceable extends Nullstack {
           }
         </div>
         <p data-application-key={mainHasKey}></p>
-        <div data-key={self.key} />
+        <div data-key={this.key} />
       </div>
     )
   }
diff --git a/tests/src/Instanceable.test.js b/tests/src/Instanceable.test.js
index 1bf46778..3270d0ff 100644
--- a/tests/src/Instanceable.test.js
+++ b/tests/src/Instanceable.test.js
@@ -33,7 +33,7 @@ describe('Instanceable', () => {
     expect(p).toBeTruthy();
   });
 
-  test('self key ignores the route suffix if a key is declared', async () => {
+  test('instance key ignores the route suffix if a key is declared', async () => {
     await page.waitForSelector('[data-key="instanceable"]');
     const element = await page.$('[data-key="instanceable"]');
     expect(element).toBeTruthy();
diff --git a/tests/src/LazyComponentLoader.njs b/tests/src/LazyComponentLoader.njs
index a1664ba6..f60ed269 100644
--- a/tests/src/LazyComponentLoader.njs
+++ b/tests/src/LazyComponentLoader.njs
@@ -13,8 +13,8 @@ class LazyComponentLoader extends Nullstack {
     LazyComponent = (await import('./LazyComponent')).default
   }
 
-  render({ self }) {
-    if (!self.hydrated) return false
+  render() {
+    if (!this.hydrated) return false
     return <LazyComponent />
   }
 
diff --git a/tests/src/NestedProxy.njs b/tests/src/NestedProxy.njs
index d99859b2..047538a9 100644
--- a/tests/src/NestedProxy.njs
+++ b/tests/src/NestedProxy.njs
@@ -3,7 +3,7 @@ import Nullstack from 'nullstack';
 class NestedProxy extends Nullstack {
 
   array = [
-    {object: {object: true}}
+    { object: { object: true } }
   ]
 
   object = {
@@ -12,28 +12,28 @@ class NestedProxy extends Nullstack {
 
   prepare(context) {
     context.array = [
-      {object: {object: true}}
+      { object: { object: true } }
     ]
     context.object = {
       array: [true]
     }
   }
-  
-  render(context) {
-    if(!context.self.hydrated) return false
+
+  render({ array, object }) {
+    if (!this.hydrated) return false
     return (
-      <div 
+      <div
         data-array={!!this.array._isProxy}
-        data-array-zero={!!this.array[0]._isProxy} 
-        data-array-zero-object={!!this.array[0].object._isProxy} 
+        data-array-zero={!!this.array[0]._isProxy}
+        data-array-zero-object={!!this.array[0].object._isProxy}
         data-object={!!this.object._isProxy}
         data-object-array={!!this.object.array._isProxy}
 
-        data-context-array={!!context.array._isProxy}
-        data-context-array-zero={!!context.array[0]._isProxy} 
-        data-context-array-zero-object={!!context.array[0].object._isProxy} 
-        data-context-object={!!context.object._isProxy}
-        data-context-object-array={!!context.object.array._isProxy}
+        data-context-array={!!array._isProxy}
+        data-context-array-zero={!!array[0]._isProxy}
+        data-context-array-zero-object={!!array[0].object._isProxy}
+        data-context-object={!!object._isProxy}
+        data-context-object-array={!!object.array._isProxy}
       />
     )
   }
diff --git a/tests/src/PersistentComponent.njs b/tests/src/PersistentComponent.njs
index 2f55f98b..ad491bb0 100644
--- a/tests/src/PersistentComponent.njs
+++ b/tests/src/PersistentComponent.njs
@@ -13,8 +13,8 @@ class PersistentComponent extends Nullstack {
     this.count = -1;
   }
 
-  launch({ self }) {
-    if (self.initiated) {
+  launch() {
+    if (this.initiated) {
       this.launchCount++
     }
   }
@@ -23,28 +23,22 @@ class PersistentComponent extends Nullstack {
     this.count++
   }
 
-  terminate(context) {
-    context.terminatedSelf = context.self
+  terminate() {
     this.count++
   }
 
-  self({ self }) {
-    return self
-  }
-
-  render({ self, instances, terminatedSelf }) {
+  render({ instances }) {
     const aCount = instances['PersistentComponent/0-0-33/persistent-component/a']?.count
-    const aTerminated = instances['PersistentComponent/0-0-33/persistent-component/a']?.self?.()?.terminated
+    const aTerminated = instances['PersistentComponent/0-0-33/persistent-component/a']?.terminated
     return (
       <div
         data-count={this.count}
-        data-key={self.key}
+        data-key={this.key}
         data-a-count={aCount}
         data-launch-count={this.launchCount}
-        data-persistent={self.persistent}
-        data-prerendered={self.prerendered}
+        data-persistent={this.persistent}
+        data-prerendered={this.prerendered}
         data-a-terminated={aTerminated}
-        data-persistent-self-element-removed={terminatedSelf?.element === null}
       >
         <a href="/persistent-component/a"> a </a>
         <a href="/persistent-component/b"> b </a>
diff --git a/tests/src/PersistentComponent.test.js b/tests/src/PersistentComponent.test.js
index 8dfe3914..3d217897 100644
--- a/tests/src/PersistentComponent.test.js
+++ b/tests/src/PersistentComponent.test.js
@@ -10,7 +10,7 @@ describe('PersistentComponent instantiated', () => {
     expect(element).toBeTruthy();
   });
 
-  test('persistent components self should have a key persistent', async () => {
+  test('persistent components instance should have a property called persistent', async () => {
     await page.waitForSelector('[data-persistent]');
     const element = await page.$('[data-persistent]');
     expect(element).toBeTruthy();
@@ -45,18 +45,12 @@ describe('PersistentComponent terminated', () => {
     expect(element).toBeTruthy();
   });
 
-  test('persistent instanes self should have a terminated key when off dom', async () => {
+  test('persistent instanes instance terminated should be true when off dom', async () => {
     await page.waitForSelector('[data-a-terminated]');
     const element = await page.$('[data-a-terminated]');
     expect(element).toBeTruthy();
   });
 
-  test('terminated persistent components should not have an element self', async () => {
-    await page.waitForSelector('[data-a-terminated][data-persistent-self-element-removed]');
-    const element = await page.$('[data-a-terminated][data-persistent-self-element-removed]');
-    expect(element).toBeTruthy();
-  });
-
 });
 
 describe('PersistentComponent reinstantiated', () => {
@@ -100,13 +94,13 @@ describe('PersistentComponent reinstantiated', () => {
     expect(element).toBeTruthy();
   });
 
-  test('persistent components self should have a key persistent when reinstantiated', async () => {
+  test('persistent components instance should have a property called persistent when reinstantiated', async () => {
     await page.waitForSelector('[data-persistent]');
     const element = await page.$('[data-persistent]');
     expect(element).toBeTruthy();
   });
 
-  test('persistent components self should have a key prerendered when prerendered then reinstantiated', async () => {
+  test('persistent components instance should have a property called prerendered when prerendered then reinstantiated', async () => {
     await page.waitForSelector('[data-prerendered]');
     const element = await page.$('[data-prerendered]');
     expect(element).toBeTruthy();
diff --git a/tests/src/Refs.njs b/tests/src/Refs.njs
new file mode 100644
index 00000000..f8788d55
--- /dev/null
+++ b/tests/src/Refs.njs
@@ -0,0 +1,36 @@
+import Nullstack from 'nullstack';
+
+class Refs extends Nullstack {
+
+  composedComputed = '_composedComputed'
+
+  hydrate() {
+    this.id = this._element.id
+  }
+
+  setRef({ element }) {
+    this._function = element
+    this.isOnDOM = element.offsetHeight > 0
+  }
+
+  renderBubble({ ref }) {
+    return (
+      <div id="bubble" ref={ref} data-id={this._bubble?.id} />
+    )
+  }
+
+  render() {
+    return (
+      <div id="hydrate-element" data-id={this.id} ref={this._element}>
+        <span id="composed-computed" ref={this[this.composedComputed]} data-id={this._composedComputed?.id} />
+        <span id="logical-computed" ref={this[['_logical', 'Computed'].join('')]} data-id={this._logicalComputed?.id} />
+        <span id="literal-computed" ref={this['_literalComputed']} data-id={this._literalComputed?.id} />
+        <span id="function" ref={this.setRef} data-dom={this.isOnDOM} data-id={this._function?.id}>span</span>
+        <Bubble ref={this._bubble} />
+      </div>
+    )
+  }
+
+}
+
+export default Refs;
\ No newline at end of file
diff --git a/tests/src/Refs.test.js b/tests/src/Refs.test.js
new file mode 100644
index 00000000..dcc27181
--- /dev/null
+++ b/tests/src/Refs.test.js
@@ -0,0 +1,51 @@
+describe('Refs', () => {
+
+  beforeAll(async () => {
+    await page.goto('http://localhost:6969/');
+    await page.click('[href="/refs"]')
+  });
+
+  test('refs should be loaded during hydrate', async () => {
+    await page.waitForSelector('[data-id="hydrate-element"]');
+    const element = await page.$('[data-id="hydrate-element"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('refs accept composed computed references', async () => {
+    await page.waitForSelector('[data-id="composed-computed"]');
+    const element = await page.$('[data-id="composed-computed"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('refs accept logical computed references', async () => {
+    await page.waitForSelector('[data-id="logical-computed"]');
+    const element = await page.$('[data-id="logical-computed"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('refs accept literal computed references', async () => {
+    await page.waitForSelector('[data-id="literal-computed"]');
+    const element = await page.$('[data-id="literal-computed"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('refs functions receive an element as argument', async () => {
+    await page.waitForSelector('[data-id="function"]');
+    const element = await page.$('[data-id="function"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('refs functions only run after the element is appended do DOM', async () => {
+    await page.waitForSelector('[data-dom]');
+    const element = await page.$('[data-dom]');
+    expect(element).toBeTruthy();
+  });
+
+  test('refs can be bubbled down', async () => {
+    await page.waitForSelector('[data-id="bubble"]');
+    const element = await page.$('[data-id="bubble"]');
+    expect(element).toBeTruthy();
+  });
+
+
+});
\ No newline at end of file
diff --git a/tests/src/RoutesAndParams.njs b/tests/src/RoutesAndParams.njs
index 5a368401..16a073e3 100644
--- a/tests/src/RoutesAndParams.njs
+++ b/tests/src/RoutesAndParams.njs
@@ -92,13 +92,13 @@ class RoutesAndParams extends Nullstack {
     )
   }
 
-  render({ router, params, eventTriggered, self }) {
+  render({ router, params, eventTriggered }) {
     return (
       <div>
         <Hrefs />
         <button data-absolute onclick={this.goToDocs}> Nullstack </button>
         <a href="/routes-and-params/no-hash#hash">hash</a>
-        <div data-hydrated={self.hydrated} data-event-triggered={eventTriggered} />
+        <div data-hydrated={this.hydrated} data-event-triggered={eventTriggered} />
         <div data-router={!!router} />
         <div route="/routes-and-params" data-route="/routes-and-params" />
         <InnerHTML route="/routes-and-params/inner-html" />
diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
index dfbfaa6f..54ce55cb 100644
--- a/tests/src/StatefulComponent.njs
+++ b/tests/src/StatefulComponent.njs
@@ -21,11 +21,11 @@ class StatefulComponent extends Nullstack {
     this.count++;
   }
 
-  render({ self }) {
+  render() {
     return (
-      <form>
-        {self.hydrated &&
-          <div data-tag={self.element.tagName.toLowerCase()} />
+      <form ref={this._element}>
+        {this.hydrated &&
+          <div data-tag={this._element.tagName.toLowerCase()} />
         }
         <button class="increment-by-one" onclick={this.incrementByOne}>
           +1
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index 03616b6a..a2ca4e16 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -11,23 +11,32 @@ class TwoWayBindings extends Nullstack {
   object = { count: 1 };
   array = ['a', 'b', 'c'];
 
+  byKeyName = 'byKeyNameValue'
+  keyName = 'byKeyName'
+
   zero = 0
 
   bringsHappiness = false
 
-  parse({ event, source, name, callback }) {
+  parse({ event, source: bind, callback }) {
     const normalized = event.target.value.replace(',', '').padStart(3, '0');
     const whole = (parseInt(normalized.slice(0, -2)) || 0).toString();
     const decimal = normalized.slice(normalized.length - 2);
     const value = parseFloat(whole + '.' + decimal);
     const bringsHappiness = value >= 1000000;
-    source[name] = value
+    bind.object[bind.property] = value
     callback({ bringsHappiness })
   }
 
-  renderCurrencyInput({ source, name, onchange }) {
-    const formatted = source[name].toFixed(2).replace('.', ',');
-    return <input data-currency name={name} source={source} value={formatted} oninput={this.parse} callback={onchange} />
+  renderCurrencyInput({ bind, onchange }) {
+    const formatted = bind.object[bind.property].toFixed(2).replace('.', ',');
+    return <input data-currency source={bind} value={formatted} oninput={this.parse} callback={onchange} />
+  }
+
+  renderBubble({ bind }) {
+    return (
+      <input name="bubble" bind={bind} />
+    )
   }
 
   updateCharacter({ value }) {
@@ -41,15 +50,15 @@ class TwoWayBindings extends Nullstack {
   render({ params }) {
     return (
       <div data-brings-happiness={this.bringsHappiness}>
-        <input bind={this.zero} />
+        <input bind={this.zero} name="zero" />
         <div data-number={this.number} />
         {!this.boolean && <div data-boolean-type={typeof this.boolean} />}
         {this.number > 1 && <div data-number-type={typeof this.number} />}
-        <input bind={this.number} oninput={this.updateCharacter} />
-        <textarea bind={this.text} data-text={this.text} />
+        <input bind={this.number} name="number" oninput={this.updateCharacter} />
+        <textarea bind={this.text} name="text" data-text={this.text} />
         <button onclick={{ text: 'bbbb' }} data-textarea>textarea b</button>
         <div data-character={this.character} />
-        <select bind={this.character}>
+        <select bind={this.character} name="character">
           {this.array.map((character) => <option>{character}</option>)}
         </select>
         <button onclick={{ character: 'b' }} data-select>select b</button>
@@ -57,14 +66,18 @@ class TwoWayBindings extends Nullstack {
           <option value={true}>true</option>
           <option value={false}>false</option>
         </select>
-        <input bind={this.boolean} type="checkbox" />
+        <input bind={this.boolean} name="boolean" type="checkbox" />
         <button onclick={{ boolean: false }} data-checkbox>boolean false</button>
-        <input bind={this.object.count} />
-        <input bind={this.undeclared} data-undeclared />
+        <input bind={this.object.count} name="count" />
+        <input bind={this.undeclared} name="undeclared" data-undeclared />
+        <input bind={this[this.keyName]} name="composedComputed" />
+        <input bind={this[['by', 'Key', 'Name'].join('')]} name="logicalComputed" />
+        <input bind={this['byKeyName']} name="literalComputed" />
         {this.array.map((value, index) => (
-          <input bind={this.array[index]} />
+          <input bind={this.array[index]} name={index.toString()} />
         ))}
-        <input bind={params.page} />
+        <input bind={params.page} name="page" />
+        <Bubble bind={this.byKeyName} />
         <CurrencyInput bind={this.currency} onchange={this.setHappiness} />
       </div>
     )
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index 8accaf98..a0daaa1e 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -76,7 +76,7 @@ describe('TwoWayBindings', () => {
   });
 
   test('custom inputs can be bound', async () => {
-    const value = await page.$eval('[name="currency"]', (element) => element.value);
+    const value = await page.$eval('[data-currency]', (element) => element.value);
     expect(value).toMatch('100,00');
   });
 
@@ -119,4 +119,24 @@ describe('TwoWayBindings', () => {
     expect(element).toBeTruthy();
   });
 
+  test('bind should accept composed computed properties', async () => {
+    const value = await page.$eval('[name="composedComputed"]', (element) => element.value);
+    expect(value).toMatch('byKeyNameValue');
+  });
+
+  test('bind should accept logical computed properties', async () => {
+    const value = await page.$eval('[name="logicalComputed"]', (element) => element.value);
+    expect(value).toMatch('byKeyNameValue');
+  });
+
+  test('bind should accept literal computed properties', async () => {
+    const value = await page.$eval('[name="literalComputed"]', (element) => element.value);
+    expect(value).toMatch('byKeyNameValue');
+  });
+
+  test('bind can be bubbled down', async () => {
+    const value = await page.$eval('[name="bubble"]', (element) => element.value);
+    expect(value).toMatch('byKeyNameValue');
+  });
+
 });
\ No newline at end of file
diff --git a/tests/src/TypeScript.nts b/tests/src/TypeScript.nts
index 1f0cc82b..454ce758 100644
--- a/tests/src/TypeScript.nts
+++ b/tests/src/TypeScript.nts
@@ -17,12 +17,12 @@ class TypeScript extends Nullstack {
     return <div data-inner-component />
   }
 
-  render({ self }: NullstackClientContext) {
+  render() {
     return (
       <div data-count={this.count}>
         <input bind={this.count} />
         <button
-          data-initiated={self.initiated}
+          data-initiated={this.initiated}
           value={1}
           onclick={this.incrementByCount}
         > TS </button>
diff --git a/tests/src/TypesScript.test.js b/tests/src/TypesScript.test.js
index 0db7e1e1..235c421b 100644
--- a/tests/src/TypesScript.test.js
+++ b/tests/src/TypesScript.test.js
@@ -24,8 +24,8 @@ describe('UnderscoredAttributes', () => {
   });
 
   test('bind should work on nts files', async () => {
-    await page.waitForSelector('[bind="count"]');
-    const element = await page.$('[bind="count"]');
+    await page.waitForSelector('input');
+    const element = await page.$('input');
     expect(element).toBeTruthy();
   });
 
diff --git a/types/ClientContext.d.ts b/types/ClientContext.d.ts
index b48ac3bd..f41fbb98 100644
--- a/types/ClientContext.d.ts
+++ b/types/ClientContext.d.ts
@@ -3,7 +3,6 @@ import { NullstackPage } from "./Page";
 import { NullstackParams } from "./Params";
 import { NullstackProject } from "./Project";
 import { NullstackRouter } from "./Router";
-import { NullstackSelf } from "./Self";
 import { NullstackSettings } from "./Settings";
 import { NullstackWorker } from "./Worker";
 
@@ -33,14 +32,6 @@ export type NullstackClientContext = {
    */
   worker?: NullstackWorker;
 
-  /**
-   * It gives you information about the instance lifecycle and it's unique key.
-   *
-   * @see https://nullstack.app/instance-self
-   * @see https://nullstack.app/instance-self#instance-key
-   */
-  self?: NullstackSelf;
-
   /**
    * It gives you information about the element dataset.
    * Any `data-*` attributes will receive a respective camelized key on this object.
diff --git a/types/JSX.d.ts b/types/JSX.d.ts
index 9e7b4461..584039f5 100644
--- a/types/JSX.d.ts
+++ b/types/JSX.d.ts
@@ -48,6 +48,7 @@ export interface Attributes {
   html?: string | undefined;
   source?: object | undefined;
   bind?: any | undefined;
+  ref?: any | undefined;
   data?: object | undefined;
   "data-"?: any;
   [key: string]: any;
@@ -60,7 +61,7 @@ export interface NullstackAttributes extends Attributes {
   key?: string;
 }
 
-export interface ClassAttributes extends Attributes {}
+export interface ClassAttributes extends Attributes { }
 
 //
 // Factories
@@ -68,7 +69,7 @@ export interface ClassAttributes extends Attributes {}
 
 type DetailedHTMLFactory<P, T = any> = P;
 
-export interface SVGFactory {}
+export interface SVGFactory { }
 
 export type NullstackFragment = NullstackNode[];
 export type NullstackNode =
@@ -107,7 +108,7 @@ export interface BaseSyntheticEvent<E = object, C = any, T = any> {
  * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
  */
 export interface SyntheticEvent<T = Element, E = Event>
-  extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
+  extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> { }
 
 export interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> {
   dataTransfer: DataTransfer;
@@ -133,7 +134,7 @@ export interface FocusEvent<Target = Element, RelatedTarget = Element>
   target: EventTarget & Target;
 }
 
-export interface FormEvent<T = Element> extends SyntheticEvent<T> {}
+export interface FormEvent<T = Element> extends SyntheticEvent<T> { }
 
 export interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
   target: EventTarget & T;
@@ -207,8 +208,8 @@ export interface WheelEvent<T = Element>
 type EventHandler<E extends SyntheticEvent<any>> =
   | object
   | {
-      bivarianceHack(event: { event: E } & NullstackClientContext): void;
-    }["bivarianceHack"];
+    bivarianceHack(event: { event: E } & NullstackClientContext): void;
+  }["bivarianceHack"];
 
 type NullstackEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
 type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
@@ -227,7 +228,7 @@ type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
 
 type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
 
-export interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes {}
+export interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes { }
 
 export interface DOMAttributes<T> extends Attributes {
   // Focus Events
@@ -354,15 +355,15 @@ export interface AriaAttributes {
   "aria-controls"?: string | undefined;
   /** Indicates the element that represents the current item within a container or set of related elements. */
   "aria-current"?:
-    | boolean
-    | "false"
-    | "true"
-    | "page"
-    | "step"
-    | "location"
-    | "date"
-    | "time"
-    | undefined;
+  | boolean
+  | "false"
+  | "true"
+  | "page"
+  | "step"
+  | "location"
+  | "date"
+  | "time"
+  | undefined;
   /**
    * Identifies the element (or elements) that describes the object.
    * @see aria-labelledby
@@ -383,13 +384,13 @@ export interface AriaAttributes {
    * @deprecated in ARIA 1.1
    */
   "aria-dropeffect"?:
-    | "none"
-    | "copy"
-    | "execute"
-    | "link"
-    | "move"
-    | "popup"
-    | undefined;
+  | "none"
+  | "copy"
+  | "execute"
+  | "link"
+  | "move"
+  | "popup"
+  | undefined;
   /**
    * Identifies the element that provides an error message for the object.
    * @see aria-invalid @see aria-describedby.
@@ -409,15 +410,15 @@ export interface AriaAttributes {
   "aria-grabbed"?: Booleanish | undefined;
   /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
   "aria-haspopup"?:
-    | boolean
-    | "false"
-    | "true"
-    | "menu"
-    | "listbox"
-    | "tree"
-    | "grid"
-    | "dialog"
-    | undefined;
+  | boolean
+  | "false"
+  | "true"
+  | "menu"
+  | "listbox"
+  | "tree"
+  | "grid"
+  | "dialog"
+  | undefined;
   /**
    * Indicates whether the element is exposed to an accessibility API.
    * @see aria-disabled.
@@ -428,12 +429,12 @@ export interface AriaAttributes {
    * @see aria-errormessage.
    */
   "aria-invalid"?:
-    | boolean
-    | "false"
-    | "true"
-    | "grammar"
-    | "spelling"
-    | undefined;
+  | boolean
+  | "false"
+  | "true"
+  | "grammar"
+  | "spelling"
+  | undefined;
   /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
   "aria-keyshortcuts"?: string | undefined;
   /**
@@ -489,17 +490,17 @@ export interface AriaAttributes {
    * @see aria-atomic.
    */
   "aria-relevant"?:
-    | "additions"
-    | "additions removals"
-    | "additions text"
-    | "all"
-    | "removals"
-    | "removals additions"
-    | "removals text"
-    | "text"
-    | "text additions"
-    | "text removals"
-    | undefined;
+  | "additions"
+  | "additions removals"
+  | "additions text"
+  | "all"
+  | "removals"
+  | "removals additions"
+  | "removals text"
+  | "text"
+  | "text additions"
+  | "text removals"
+  | undefined;
   /** Indicates that user input is required on the element before a form may be submitted. */
   "aria-required"?: Booleanish | undefined;
   /** Defines a human-readable, author-localized description for the role of an element. */
@@ -653,15 +654,15 @@ export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    * @see https://html.spec.whatwg.org/multipage/interactiohtml#input-modalities:-the-inputmode-attribute
    */
   inputmode?:
-    | "none"
-    | "text"
-    | "tel"
-    | "url"
-    | "email"
-    | "numeric"
-    | "decimal"
-    | "search"
-    | undefined;
+  | "none"
+  | "text"
+  | "tel"
+  | "url"
+  | "email"
+  | "numeric"
+  | "decimal"
+  | "search"
+  | undefined;
   /**
    * Specify that a standard HTML element should behave like a defined custom built-in element
    * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
@@ -801,7 +802,7 @@ export interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
   path?: string | undefined;
 }
 
-export interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
+export interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> { }
 
 export interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
   alt?: string | undefined;
@@ -977,14 +978,14 @@ export interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
   checked?: boolean | undefined;
   disabled?: boolean | undefined;
   enterkeyhint?:
-    | "enter"
-    | "done"
-    | "go"
-    | "next"
-    | "previous"
-    | "search"
-    | "send"
-    | undefined;
+  | "enter"
+  | "done"
+  | "go"
+  | "next"
+  | "previous"
+  | "search"
+  | "send"
+  | undefined;
   form?: string | undefined;
   formaction?: string | undefined;
   formenctype?: string | undefined;
@@ -1304,8 +1305,8 @@ declare global {
   namespace JSX {
     type Element = NullstackNode;
 
-    interface IntrinsicAttributes extends NullstackAttributes {}
-    interface IntrinsicClassAttributes extends ClassAttributes {}
+    interface IntrinsicAttributes extends NullstackAttributes { }
+    interface IntrinsicClassAttributes extends ClassAttributes { }
 
     interface AllElements {
       // HTML
@@ -1664,6 +1665,6 @@ declare global {
       element: ElementTagHTMLAttributes;
     }
 
-    interface IntrinsicElements extends ExoticElements, AllElements {}
+    interface IntrinsicElements extends ExoticElements, AllElements { }
   }
 }
diff --git a/types/Self.d.ts b/types/Self.d.ts
deleted file mode 100644
index a6fe2510..00000000
--- a/types/Self.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type NullstackSelf = {
-
-  initiated: boolean;
-
-  hydrated: boolean;
-
-  terminated: boolean;
-
-  prerendered: boolean;
-
-  /**
-   * If the component is persistent
-   *
-   * @see https://nullstack.app/persistent-components
-   */
-  persistent: boolean,
-
-  /**
-   * Only available after hydration
-   */
-  element?: HTMLElement;
-
-  key: string;
-
-};
\ No newline at end of file
diff --git a/types/index.d.ts b/types/index.d.ts
index b1081dbf..f490fa0b 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -4,7 +4,7 @@ import { NullstackServerContext } from "./ServerContext";
 
 export interface NullstackContext
   extends NullstackClientContext,
-    NullstackServerContext {}
+  NullstackServerContext { }
 
 export * from "./ClientContext";
 export * from "./Environment";
@@ -14,7 +14,6 @@ export * from "./Plugin";
 export * from "./Project";
 export * from "./Router";
 export * from "./Secrets";
-export * from "./Self";
 export * from "./Server";
 export * from "./ServerContext";
 export * from "./Settings";
@@ -28,47 +27,64 @@ export default class Nullstack<TProps = {}> {
    * @param App A Nullstack app root component
    */
   static start?(App: any): NullstackContext;
-  
+
   /**
    * Use a plugin
    */
   static use?(Plugin: NullstackPlugin): void;
-  
+
   /**
    * Could run on the server or client.
    * @see https://nullstack.app/full-stack-lifecycle#prepare
    */
   prepare?(context: NullstackContext & TProps): void;
-  
+
   /**
    * Could run on the server or client.
    * @see https://nullstack.app/full-stack-lifecycle#initiate
    */
   initiate?(context: NullstackContext & TProps): void;
-  
+
+  initiated: boolean;
+
   /**
    * Could run on the server or client.
    * @see https://nullstack.app/full-stack-lifecycle#launch
    */
   launch?(context: NullstackContext & TProps): void;
-  
+
   /**
    * Runs on the client.
    * @see https://nullstack.app/full-stack-lifecycle#hydrate
    */
   hydrate?(context: NullstackClientContext & TProps): void;
-  
+
+  hydrated: boolean;
+
   /**
    * Runs on the client.
    * @see https://nullstack.app/full-stack-lifecycle#update
    */
   update?(context: NullstackContext & TProps): void;
-  
+
   /**
    * Runs on the client.
    * @see https://nullstack.app/full-stack-lifecycle#terminate
    */
   terminate?(context: NullstackContext & TProps): void;
 
+  terminated: boolean;
+
   render?(context: NullstackContext & TProps): void;
+
+  prerendered: boolean;
+
+  /**
+   * If the component is persistent
+   *
+   * @see https://nullstack.app/persistent-components
+   */
+  persistent: boolean;
+
+  key: string;
 }
diff --git a/webpack.config.js b/webpack.config.js
index d5cdf5e5..7114e647 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -203,6 +203,10 @@ function server(env, argv) {
           test: /\.(njs|nts|jsx|tsx)$/,
           loader: getLoader('register-inner-components.js'),
         },
+        {
+          test: /\.(njs|nts|jsx|tsx)$/,
+          loader: getLoader('transform-node-ref.js'),
+        },
         {
           issuer: /worker.js/,
           resourceQuery: /raw/,
@@ -309,6 +313,10 @@ function client(env, argv) {
           test: /\.(njs|nts|jsx|tsx)$/,
           loader: getLoader('register-inner-components.js'),
         },
+        {
+          test: /\.(njs|nts|jsx|tsx)$/,
+          loader: getLoader('transform-node-ref.js'),
+        },
       ]
     },
     target: 'web',

From 6c33ccc5ca54b3085c1bd5e971405d3bc6bb0e5e Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 5 Jun 2022 19:29:22 -0300
Subject: [PATCH 058/105] :recycle: deprecate data

---
 client/events.js               | 16 ++++++++++++----
 plugins/datable.js             | 30 ------------------------------
 shared/generateTree.js         |  3 +--
 shared/plugins.js              |  8 --------
 tests/src/BodyFragment.test.js |  8 --------
 tests/src/ContextData.njs      | 30 ++++++++++++------------------
 tests/src/ContextData.test.js  | 25 +++++++++++++++++--------
 7 files changed, 42 insertions(+), 78 deletions(-)
 delete mode 100644 plugins/datable.js

diff --git a/client/events.js b/client/events.js
index 7932c65e..f327a374 100644
--- a/client/events.js
+++ b/client/events.js
@@ -1,19 +1,27 @@
 import router from './router'
+import { camelize } from '../shared/string';
 
 export const eventCallbacks = new WeakMap()
 export const eventSubjects = new WeakMap()
 
-function executeEvent(callback, subject, event) {
+function executeEvent(callback, subject, event, data) {
   if (typeof callback === 'object') {
     Object.assign(subject.source, callback);
   } else {
-    callback({ ...subject, event });
+    callback({ ...subject, event, data });
   }
 }
 
 export function generateCallback(selector, name) {
   return function eventCallback(event) {
     const subject = eventSubjects.get(selector)
+    const data = { ...subject.data }
+    for (const attribute in subject) {
+      if (attribute.startsWith('data-')) {
+        const key = camelize(attribute.slice(5));
+        data[key] = subject[attribute];
+      }
+    }
     if (subject?.bind !== undefined) {
       const valueName = (subject.type === 'checkbox' || subject.type === 'radio') ? 'checked' : 'value'
       const object = subject.bind.object
@@ -39,10 +47,10 @@ export function generateCallback(selector, name) {
     if (subject[name] === true) return
     if (Array.isArray(subject[name])) {
       for (const subcallback of subject[name]) {
-        executeEvent(subcallback, subject, event)
+        executeEvent(subcallback, subject, event, data)
       }
     } else {
-      executeEvent(subject[name], subject, event)
+      executeEvent(subject[name], subject, event, data)
     }
   }
 };
\ No newline at end of file
diff --git a/plugins/datable.js b/plugins/datable.js
deleted file mode 100644
index d8937d07..00000000
--- a/plugins/datable.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { camelize, kebabize } from '../shared/string';
-
-function match(node) {
-  return (
-    node &&
-    node.attributes !== undefined &&
-    node.type !== 'body'
-  )
-}
-
-function transform({ node }) {
-  if (!match(node)) return;
-  transformBody(node.attributes)
-}
-
-function transformBody(attributes) {
-  attributes.data = attributes.data || {};
-  for (const attribute in attributes) {
-    if (attribute.startsWith('data-')) {
-      const key = camelize(attribute.slice(5));
-      attributes.data[key] = attributes[attribute];
-    }
-  }
-  for (const key in attributes.data) {
-    const attribute = 'data-' + kebabize(key);
-    attributes[attribute] = attributes.data[key];
-  }
-}
-
-export default { transform, transformBody, client: true, server: true }
\ No newline at end of file
diff --git a/shared/generateTree.js b/shared/generateTree.js
index eda72332..84e18ac1 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -1,7 +1,7 @@
 import generateKey from '../shared/generateKey';
 import { isClass, isFalse, isFunction, isUndefined } from '../shared/nodes';
 import fragment from './fragment';
-import { transformBody, transformNodes } from './plugins';
+import { transformNodes } from './plugins';
 
 async function generateBranch(siblings, node, depth, scope) {
 
@@ -176,6 +176,5 @@ async function generateBranch(siblings, node, depth, scope) {
 export default async function generateTree(node, scope) {
   const tree = { type: 'div', attributes: { id: 'application' }, children: [] };
   await generateBranch(tree.children, node, '0', scope);
-  transformBody(scope.nextBody)
   return tree;
 }
\ No newline at end of file
diff --git a/shared/plugins.js b/shared/plugins.js
index f60510a7..90c5f0ce 100644
--- a/shared/plugins.js
+++ b/shared/plugins.js
@@ -1,6 +1,5 @@
 import routable from '../plugins/routable';
 import bindable from '../plugins/bindable';
-import datable from '../plugins/datable';
 import parameterizable from '../plugins/parameterizable';
 import anchorable from '../plugins/anchorable';
 
@@ -8,7 +7,6 @@ const plugins = [
   parameterizable,
   anchorable,
   routable,
-  datable,
   bindable
 ];
 
@@ -18,12 +16,6 @@ export function transformNodes(scope, node, depth) {
   }
 }
 
-export function transformBody(attributes) {
-  for (const plugin of plugins) {
-    plugin.transformBody && plugin.transformBody(attributes);
-  }
-}
-
 export function loadPlugins(scope) {
   for (const plugin of plugins) {
     plugin.load && plugin.load(scope.context)
diff --git a/tests/src/BodyFragment.test.js b/tests/src/BodyFragment.test.js
index 90fa0a99..67e302ca 100644
--- a/tests/src/BodyFragment.test.js
+++ b/tests/src/BodyFragment.test.js
@@ -50,14 +50,6 @@ describe('BodyFragment', () => {
     expect(element).toBeTruthy();
   });
 
-  test('body has access to plugins that have export a transformBody', async () => {
-    await page.waitForSelector('body[data-hydrated]')
-    await page.click('body');
-    await page.waitForSelector('[data-keys]');
-    const element = await page.$('[data-keys]');
-    expect(element).toBeTruthy();
-  });
-
   test('the body removes events when the fragment leaves the tree', async () => {
     await page.waitForSelector('body[data-hydrated]')
     await page.click('[href="/"]');
diff --git a/tests/src/ContextData.njs b/tests/src/ContextData.njs
index 57e9d55e..5c1b6494 100644
--- a/tests/src/ContextData.njs
+++ b/tests/src/ContextData.njs
@@ -2,29 +2,23 @@ import Nullstack from 'nullstack';
 
 class ContextData extends Nullstack {
 
-  count = 1;
-
-  calculate({data}) {
-    this.count = (this.count * data.multiply) + data.sum;
+  calculateWithDefault({ data }) {
+    this.countWithDefault = data.multiplyBy * data.count;
   }
 
-  renderInner({data}) {
-    return (
-      <div data={data}>
-        {data.frameworkName}
-      </div>
-    )
+  calculateWithoutDefault({ data }) {
+    this.countWithoutDefault = data.setTo;
   }
-  
-  render({data}) {
+
+  render() {
     return (
-      <div> 
-        <div data-data={!!data} />
-        <button onclick={this.calculate} data-multiply={3} data={{sum: 2}}>
-          ({this.count}*3) + 2
+      <div data-count-with-default={this.countWithDefault} data-count-without-default={this.countWithoutDefault}>
+        <button onclick={this.calculateWithDefault} data-multiply-by={3} data={{ count: 2 }}>
+          calculateWithDefault
+        </button>
+        <button onclick={this.calculateWithoutDefault} data-set-to={2}>
+          calculateWithoutDefault
         </button>
-        <div data-count={this.count} />
-        <Inner data-framework-name="Nullstack" />
       </div>
     )
   }
diff --git a/tests/src/ContextData.test.js b/tests/src/ContextData.test.js
index cc864e6a..ff9014b5 100644
--- a/tests/src/ContextData.test.js
+++ b/tests/src/ContextData.test.js
@@ -4,20 +4,29 @@ beforeAll(async () => {
 
 describe('ContextData', () => {
 
-  test('is part of the client context', async () => {
-    const element = await page.$('[data-data]');
+  test('data attributes are added to the dom', async () => {
+    const element = await page.$('[data-multiply-by="3"]');
     expect(element).toBeTruthy();
   });
 
-  test('data attributs can be mixed with data-key', async () => {
-    await page.click('button');
-    await page.waitForSelector('[data-count="5"]');
-    const element = await page.$('[data-count="5"]');
+  test('data attributes are merged into the data attribute and passed to events', async () => {
+    await page.click('[data-multiply-by="3"]');
+    await page.waitForSelector('[data-count-with-default="6"]');
+    const element = await page.$('[data-count-with-default="6"]');
     expect(element).toBeTruthy();
   });
 
-  test('data attribuets are camelized into data key', async () => {
-    const element = await page.$('[data-framework-name="Nullstack"]');
+  test('data attributes are added into a new data object and passed to events if no data attribute is provided', async () => {
+    await page.click('[data-set-to="2"]');
+    await page.waitForSelector('[data-count-without-default="2"]');
+    const element = await page.$('[data-count-without-default="2"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('data attributes are kebabized when generating the data argument', async () => {
+    await page.click('[data-set-to="2"]');
+    await page.waitForSelector('[data-count-without-default="2"]');
+    const element = await page.$('[data-count-without-default="2"]');
     expect(element).toBeTruthy();
   });
 

From 2c56ba6dbbe5d17fe0ae7210901c389a74a4354b Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 5 Jun 2022 19:31:39 -0300
Subject: [PATCH 059/105] :bug: fixing port print

---
 scripts/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/index.js b/scripts/index.js
index 07849616..c9f68672 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -46,7 +46,7 @@ async function start({ input, port, env }) {
     if (stats.hasErrors()) {
       console.log(`\n 💥️ There is an error preventing compilation`);
     } else {
-      console.log('\x1b[36m%s\x1b[0m', `\n ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
+      console.log('\x1b[36m%s\x1b[0m', `\n ✅️ Your application is ready at http://localhost:${port}\n`);
     }
     const bundlePath = path.resolve(process.cwd(), '.development/server.js')
     delete require.cache[require.resolve(bundlePath)]

From cd430c9a0d45038bbe214c0922035d080090f35a Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 5 Jun 2022 21:30:24 -0300
Subject: [PATCH 060/105] :bug: fix server start

---
 scripts/index.js                           |  3 +-
 server/server.js                           | 66 +++++++++++-----------
 tests/server.js                            |  4 ++
 tests/src/ServerRequestAndResponse.njs     |  5 +-
 tests/src/ServerRequestandResponse.test.js |  5 ++
 5 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index c9f68672..df918cd4 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -77,11 +77,10 @@ async function start({ input, port, env }) {
             }
             const serverBundle = require(bundlePath)
             const server = serverBundle.default.server
-            const serverRouter = serverBundle.default.server.nullstackRouter
             server.less = true
             server.port = port
             server.start()
-            serverRouter(req, res, next)
+            server(req, res, next)
           });
           return middlewares;
         },
diff --git a/server/server.js b/server/server.js
index 1d1ad353..3f158474 100644
--- a/server/server.js
+++ b/server/server.js
@@ -22,15 +22,13 @@ if (!global.fetch) {
 }
 
 const server = express();
-const router = new express.Router()
-server.nullstackRouter = router
 
 server.port ??= process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
 
 let contextStarted = false
 let serverStarted = false
 
-router.use(async (request, response, next) => {
+server.use(async (request, response, next) => {
   if (!contextStarted) {
     typeof context.start === 'function' && await context.start();
     contextStarted = true;
@@ -116,53 +114,57 @@ server.start = function () {
   if (serverStarted) return;
   serverStarted = true;
 
-  router.use(cors(server.cors));
+  server.use(cors(server.cors));
 
-  router.use(express.static(path.join(__dirname, '..', 'public')));
+  server.use(express.static(path.join(__dirname, '..', 'public')));
 
-  router.use(bodyParser.text({ limit: server.maximumPayloadSize }));
+  server.use(bodyParser.text({ limit: server.maximumPayloadSize }));
 
-  server.get(`/:number.client.js`, (request, response) => {
-    response.setHeader('Cache-Control', 'max-age=31536000, immutable');
-    response.contentType('text/javascript');
-    response.send(generateFile(`${request.params.number}.client.js`, server));
-  });
+  if (environment.production) {
 
-  server.get(`/:number.client.css`, (request, response) => {
-    response.setHeader('Cache-Control', 'max-age=31536000, immutable');
-    response.contentType('text/css');
-    response.send(generateFile(`${request.params.number}.client.css`, server));
-  });
+    server.get(`/:number.client.js`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable');
+      response.contentType('text/javascript');
+      response.send(generateFile(`${request.params.number}.client.js`, server));
+    });
 
-  server.get(`/client.css`, (request, response) => {
-    response.setHeader('Cache-Control', 'max-age=31536000, immutable');
-    response.contentType('text/css');
-    response.send(generateFile('client.css', server));
-  });
+    server.get(`/:number.client.css`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable');
+      response.contentType('text/css');
+      response.send(generateFile(`${request.params.number}.client.css`, server));
+    });
 
-  server.get(`/client.js`, (request, response) => {
-    response.setHeader('Cache-Control', 'max-age=31536000, immutable');
-    response.contentType('text/javascript');
-    response.send(generateFile('client.js', server));
-  });
+    server.get(`/client.css`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable');
+      response.contentType('text/css');
+      response.send(generateFile('client.css', server));
+    });
 
-  router.get(`/manifest.webmanifest`, (request, response) => {
+    server.get(`/client.js`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable');
+      response.contentType('text/javascript');
+      response.send(generateFile('client.js', server));
+    });
+
+  }
+
+  server.get(`/manifest.webmanifest`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('application/manifest+json');
     response.send(generateManifest(server));
   });
 
-  router.get(`/service-worker.js`, (request, response) => {
+  server.get(`/service-worker.js`, (request, response) => {
     response.setHeader('Cache-Control', 'max-age=31536000, immutable');
     response.contentType('text/javascript');
     response.send(generateServiceWorker());
   });
 
-  router.get('/robots.txt', (request, response) => {
+  server.get('/robots.txt', (request, response) => {
     response.send(generateRobots());
   });
 
-  router.all(`/${prefix}/:hash/:methodName.json`, async (request, response) => {
+  server.all(`/${prefix}/:hash/:methodName.json`, async (request, response) => {
     const payload = request.method === 'GET' ? request.query.payload : request.body;
     const args = deserialize(payload);
     const { hash, methodName } = request.params;
@@ -191,7 +193,7 @@ server.start = function () {
     }
   });
 
-  router.get('*', async (request, response, next) => {
+  server.get('*', async (request, response, next) => {
     if (request.originalUrl.split('?')[0].indexOf('.') > -1) {
       return next();
     }
@@ -203,8 +205,6 @@ server.start = function () {
     }
   });
 
-  server.use(router)
-
   if (!server.less) {
     if (!server.port) {
       console.log('\x1b[31mServer port is not defined!\x1b[0m');
diff --git a/tests/server.js b/tests/server.js
index 927a3577..b8c05793 100644
--- a/tests/server.js
+++ b/tests/server.js
@@ -13,6 +13,10 @@ const context = Nullstack.start(Application);
 
 const methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'PATCH', 'POST', 'PUT'];
 
+context.server.get('/custom-api-before-start', (request, response) => {
+  response.json({ startValue: context.startValue })
+})
+
 context.server.use('/api', (request, response, next) => {
   request.status = 200;
   if (!response.headersSent) {
diff --git a/tests/src/ServerRequestAndResponse.njs b/tests/src/ServerRequestAndResponse.njs
index 1cdf7c39..302b2d55 100644
--- a/tests/src/ServerRequestAndResponse.njs
+++ b/tests/src/ServerRequestAndResponse.njs
@@ -19,12 +19,15 @@ class ServerRequestAndResponse extends Nullstack {
       const response = await fetch('/api', { method, body });
       responses[`data-${method.toLowerCase()}`] = response.status === 200;
     }
+    const response = await fetch('/custom-api-before-start')
+    const data = await response.json()
+    this.startValue = data.startValue
     this.responses = responses;
   }
 
   render() {
     return (
-      <div {...this.responses} />
+      <div {...this.responses} data-start-value={this.startValue} />
     )
   }
 
diff --git a/tests/src/ServerRequestandResponse.test.js b/tests/src/ServerRequestandResponse.test.js
index 089ed7da..ffd1bf4e 100644
--- a/tests/src/ServerRequestandResponse.test.js
+++ b/tests/src/ServerRequestandResponse.test.js
@@ -56,4 +56,9 @@ describe('ServerRequestAndResponse', () => {
     expect(element).toBeFalsy();
   });
 
+  test('server middlewares run context start', async () => {
+    const element = await page.$('[data-start-value]');
+    expect(element).toBeFalsy();
+  });
+
 });
\ No newline at end of file

From e324cf76a8cabc9a11c6189d3d83630646b63f72 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 5 Jun 2022 21:40:30 -0300
Subject: [PATCH 061/105] :white_check_mark: zero attributes test

---
 tests/src/StatefulComponent.njs     |  2 +-
 tests/src/StatefulComponent.test.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
index 54ce55cb..22a98049 100644
--- a/tests/src/StatefulComponent.njs
+++ b/tests/src/StatefulComponent.njs
@@ -23,7 +23,7 @@ class StatefulComponent extends Nullstack {
 
   render() {
     return (
-      <form ref={this._element}>
+      <form ref={this._element} data-zero={0} data-hydrated-zero={this.hydrated ? 0 : 1}>
         {this.hydrated &&
           <div data-tag={this._element.tagName.toLowerCase()} />
         }
diff --git a/tests/src/StatefulComponent.test.js b/tests/src/StatefulComponent.test.js
index 7814beb1..ab390015 100644
--- a/tests/src/StatefulComponent.test.js
+++ b/tests/src/StatefulComponent.test.js
@@ -83,4 +83,16 @@ describe('StatefulComponent', () => {
     expect(text).toMatch('rgba(0, 0, 0, 0.2)');
   });
 
+  test('attributes can prerender a zero', async () => {
+    await page.waitForSelector('[data-zero="0"]');
+    const element = await page.$('[data-zero="0"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('attributes can rererender a zero', async () => {
+    await page.waitForSelector('[data-hydrated-zero="0"]');
+    const element = await page.$('[data-hydrated-zero="0"]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file

From 661916ccc6b1b7a1acb51ab24a8063aff4e398ae Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 5 Jun 2022 22:12:10 -0300
Subject: [PATCH 062/105] :sparkles: optional start modes

---
 scripts/index.js    | 10 ++++++----
 server/prerender.js |  2 +-
 tests/package.json  |  6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index df918cd4..1748e2a0 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -27,7 +27,7 @@ function getClientCompiler(options) {
   return webpack(getConfig(options)[1])
 }
 
-async function start({ input, port, env }) {
+async function start({ input, port, env, mode = 'ssr', hot }) {
   const environment = 'development';
   const serverCompiler = getServerCompiler({ environment, input });
   let clientStarted = false
@@ -37,7 +37,7 @@ async function start({ input, port, env }) {
   }
   dotenv.config({ path: envPath })
   port ??= process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
-  process.env['NULLSTACK_ENVIRONMENT_MODE'] = 'spa'
+  process.env['NULLSTACK_ENVIRONMENT_MODE'] = mode
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
   const WebpackDevServer = require('webpack-dev-server');
   const { setLogLevel } = require('webpack/hot/log')
@@ -53,7 +53,7 @@ async function start({ input, port, env }) {
     if (!clientStarted) {
       clientStarted = true
       const devServerOptions = {
-        hot: true,
+        hot: !!hot,
         open: false,
         devMiddleware: {
           index: false
@@ -114,10 +114,12 @@ program
   .command('start')
   .alias('s')
   .description('Start application in development environment')
+  .addOption(new program.Option('-m, --mode <mode>', 'Build production bundles').choices(['ssr', 'spa']))
   .option('-p, --port <port>', 'Port number to run the server')
   .option('-i, --input <input>', 'Path to project that will be started')
   .option('-o, --output <output>', 'Path to build output folder')
   .option('-e, --env <name>', 'Name of the environment file that should be loaded')
+  .option('--hot', 'Enable hot module replacement')
   .helpOption('-h, --help', 'Learn more about this command')
   .action(start)
 
@@ -125,7 +127,7 @@ program
   .command('build')
   .alias('b')
   .description('Build application for production environment')
-  .addOption(new program.Option('-m, --mode <mode>', 'Build production bundles').choices(buildModes))
+  .addOption(new program.Option('-m, --mode <mode>', 'Build production bundles').choices(['ssr', 'spa', 'ssg']))
   .option('-i, --input <input>', 'Path to project that will be built')
   .option('-o, --output <output>', 'Path to build output folder')
   .option('-c, --cache', 'Cache build results in .production folder')
diff --git a/server/prerender.js b/server/prerender.js
index 4301dbd0..b2905535 100644
--- a/server/prerender.js
+++ b/server/prerender.js
@@ -36,7 +36,7 @@ export async function prerender(request, response) {
   scope.plugins = loadPlugins(scope);
 
   try {
-    if (environment.production) {
+    if (environment.production || environment.mode !== 'spa') {
       const tree = await generateTree(generator.starter(), scope);
       scope.body = render(tree, scope);
     }
diff --git a/tests/package.json b/tests/package.json
index 7279dfdb..e6cbb192 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -13,9 +13,9 @@
     "purgecss-webpack-plugin": "^4.1.3"
   },
   "scripts": {
-    "start": "npx nullstack start --input=./tests --port=6969 --env=test",
-    "build": "npx nullstack build --input=./tests --mode=ssr --env=test",
+    "start": "npx nullstack start --input=./tests --port=6969 --env=test --mode=spa --hot",
+    "build": "npx nullstack build --input=./tests --env=test",
     "test": "npm run build && jest",
     "script": "node src/scripts/run.js"
   }
-}
+}
\ No newline at end of file

From 6401bdd387f9555a90915c6d8290b960cc61c876 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 6 Jun 2022 22:22:22 -0300
Subject: [PATCH 063/105] :adhesive_bandage: full reload after error

---
 client/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/index.js b/client/index.js
index 05ce0985..249da95e 100644
--- a/client/index.js
+++ b/client/index.js
@@ -108,8 +108,8 @@ export default class Nullstack {
 }
 
 if (module.hot) {
-  const client = new WebSocket('ws' + window.location.origin.slice(4) + '/ws');
-  client.onmessage = function (e) {
+  const socket = new WebSocket('ws' + window.location.origin.slice(4) + '/ws');
+  socket.onmessage = function (e) {
     if (e.data.indexOf('still-ok') > -1) {
       window.location.reload()
     }

From 71be3decc689af2ace0f96e4762a3552f11a0d4f Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 6 Jun 2022 22:32:39 -0300
Subject: [PATCH 064/105] :fire: remove unused hot error

---
 client/invoke.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/client/invoke.js b/client/invoke.js
index d4b9bbe5..5c60b046 100644
--- a/client/invoke.js
+++ b/client/invoke.js
@@ -41,11 +41,6 @@ export default function invoke(name, hash) {
     try {
       const response = await fetch(url, options);
       page.status = response.status;
-      if (module.hot && page.status === 500) {
-        setInterval(() => {
-          fetch(window.location.href).then((r) => r.status !== 500 && window.location.reload())
-        }, 100)
-      }
       const text = await response.text();
       payload = deserialize(text).result;
       worker.responsive = true;

From 31d8be7719c353025ab37f073a2d7f1ef37971a6 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 7 Jun 2022 02:07:49 -0300
Subject: [PATCH 065/105] :bug: truthy client render

---
 client/render.js                  | 15 +++++++++++----
 tests/src/ArrayAttributes.njs     |  1 +
 tests/src/ArrayAttributes.test.js | 14 ++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/client/render.js b/client/render.js
index 087730b7..e4c0bc21 100644
--- a/client/render.js
+++ b/client/render.js
@@ -2,6 +2,7 @@ import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import { eventCallbacks, eventSubjects, generateCallback } from './events'
 import ref from './ref'
+import generateTruthyString from '../shared/generateTruthyString';
 
 export default function render(node, options) {
 
@@ -38,12 +39,18 @@ export default function render(node, options) {
         eventSubjects.set(node.element, node.attributes)
       }
     } else {
-      const type = typeof node.attributes[name];
+      let nodeValue;
+      if ((name === 'class' || name === 'style') && Array.isArray(node.attributes[name])) {
+        nodeValue = generateTruthyString(node.attributes[name])
+      } else {
+        nodeValue = node.attributes[name]
+      }
+      const type = typeof nodeValue;
       if (type !== 'object' && type !== 'function') {
-        if (name != 'value' && node.attributes[name] === true) {
+        if (name != 'value' && nodeValue === true) {
           node.element.setAttribute(name, '');
-        } else if (name === 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
-          node.element.setAttribute(name, node.attributes[name]);
+        } else if (name === 'value' || (nodeValue !== false && nodeValue !== null && nodeValue !== undefined)) {
+          node.element.setAttribute(name, nodeValue);
         }
       }
     }
diff --git a/tests/src/ArrayAttributes.njs b/tests/src/ArrayAttributes.njs
index 3ea7c75d..104f24d9 100644
--- a/tests/src/ArrayAttributes.njs
+++ b/tests/src/ArrayAttributes.njs
@@ -29,6 +29,7 @@ class ArrayAttributes extends Nullstack {
         <button onclick={{ styles: ['color: pink;', 'background-color: blue; border: 1px solid red;'] }} data-pink-blue-red>pink-blue-red</button>
         <button onclick={{ styles: ['color: green;', false && 'background-color: blue;', undefined && 'background-color: blue;', null && 'background-color: blue;', 0 && 'background-color: blue;'] }} data-green>green</button>
         <button onclick={[this.increment, this.double, { objected: true }]} data-events>{this.count}</button>
+        {this.count > 1 && <span class={['dynamic-a', 'dynamic-b']} style={['color: pink;', 'background-color: blue;']} />}
       </div>
     )
   }
diff --git a/tests/src/ArrayAttributes.test.js b/tests/src/ArrayAttributes.test.js
index 72d18ea9..3067423d 100644
--- a/tests/src/ArrayAttributes.test.js
+++ b/tests/src/ArrayAttributes.test.js
@@ -79,4 +79,18 @@ describe('ArrayAttributes jsx', () => {
     expect(element).toBeTruthy();
   });
 
+  test('elements rendered after hydration can receive array classes', async () => {
+    await page.click('[data-events]');
+    await page.waitForSelector('[class="dynamic-a dynamic-b"]')
+    const element = await page.$('[class="dynamic-a dynamic-b"]')
+    expect(element).toBeTruthy();
+  });
+
+  test('elements rendered after hydration can receive array styles', async () => {
+    await page.click('[data-events]');
+    await page.waitForSelector('[class="dynamic-a dynamic-b"][style="color: pink; background-color: blue;"]')
+    const element = await page.$('[class="dynamic-a dynamic-b"][style="color: pink; background-color: blue;"]')
+    expect(element).toBeTruthy();
+  });
+
 });

From 0fa10e500cc5e705373a36357dcf70beff0f8a9f Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 7 Jun 2022 02:41:59 -0300
Subject: [PATCH 066/105] :pushpin: lower node loader version

---
 loaders/inject-hmr.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/loaders/inject-hmr.js b/loaders/inject-hmr.js
index 36d4acbf..6c6998bc 100644
--- a/loaders/inject-hmr.js
+++ b/loaders/inject-hmr.js
@@ -10,7 +10,7 @@ module.exports = function (source) {
   let klassPath
   traverse(ast, {
     MemberExpression(path) {
-      if (path.node.property.name === 'start' && path.node.object?.name === 'Nullstack') {
+      if (path.node.property.name === 'start' && path.node.object && path.node.object.name === 'Nullstack') {
         klassName = path.parent.arguments[0].name
       }
     }

From 013d4e4d9f45240c7e4b252f3e6606f90cd7bda4 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 7 Jun 2022 02:47:17 -0300
Subject: [PATCH 067/105] :pushpin: lower script version

---
 scripts/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 1748e2a0..119ef188 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -9,8 +9,6 @@ const customConfig = path.resolve(process.cwd(), './webpack.config.js');
 const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
 const dotenv = require('dotenv')
 
-const buildModes = ['ssg', 'spa', 'ssr']
-
 function getConfig(options) {
   return config.map((env) => env(null, options))
 }
@@ -36,7 +34,9 @@ async function start({ input, port, env, mode = 'ssr', hot }) {
     envPath += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
   }
   dotenv.config({ path: envPath })
-  port ??= process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
+  if (!port) {
+    port = process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
+  }
   process.env['NULLSTACK_ENVIRONMENT_MODE'] = mode
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
   const WebpackDevServer = require('webpack-dev-server');

From 0a355e84246e881b2a614aee224b25168f3da49b Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 7 Jun 2022 02:51:50 -0300
Subject: [PATCH 068/105] :wrench: move script test to production

---
 tests/src/scripts/run.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/src/scripts/run.js b/tests/src/scripts/run.js
index ecd99a81..97928d5d 100644
--- a/tests/src/scripts/run.js
+++ b/tests/src/scripts/run.js
@@ -1,6 +1,6 @@
 process.env.NULLSTACK_ENVIRONMENT_NAME = 'test'
 
-const { default: application } = require('../../.development/server.js');
+const { default: application } = require('../../.production/server.js');
 
 async function getProjectName() {
   await application.start();

From a4e748198969c960b396cb582c9014ff66307df7 Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jonathan.bertoldi@ae.studio>
Date: Tue, 7 Jun 2022 20:11:41 -0300
Subject: [PATCH 069/105] fix external components binding

---
 client/instanceProxyHandler.js                |  4 ++--
 server/instanceProxyHandler.js                |  2 +-
 tests/src/TwoWayBindings.njs                  |  4 ++++
 tests/src/TwoWayBindingsExternalComponent.njs | 15 +++++++++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 tests/src/TwoWayBindingsExternalComponent.njs

diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index ef1a971c..89cdc858 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -8,7 +8,7 @@ const instanceProxyHandler = {
   get(target, name) {
     if (name === '_isProxy') return true;
     if (target.constructor[name]?.name === '_invoke') return target.constructor[name].bind(target.constructor)
-    if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof target[name] === 'function' && name !== 'constructor') {
+    if (!target[name]?.name?.startsWith?.('_') && !name.startsWith('_') && typeof target[name] === 'function' && name !== 'constructor') {
       const { [name]: named } = {
         [name]: (args) => {
           const context = generateContext({ ...target._attributes, ...args });
@@ -21,7 +21,7 @@ const instanceProxyHandler = {
     return Reflect.get(...arguments);
   },
   set(target, name, value) {
-    if (!value?.name?.startsWith('_') && !name.startsWith('_')) {
+    if (!value?.name?.startsWith?.('_') && !name.startsWith('_')) {
       target[name] = generateObjectProxy(name, value);
       client.update();
     } else {
diff --git a/server/instanceProxyHandler.js b/server/instanceProxyHandler.js
index be0d8f75..0b21a4d0 100644
--- a/server/instanceProxyHandler.js
+++ b/server/instanceProxyHandler.js
@@ -1,6 +1,6 @@
 const instanceProxyHandler = {
   get(target, name) {
-    if (!target[name]?.name?.startsWith('_') && !name?.startsWith?.('_') && typeof target[name] === 'function' && name !== 'constructor') {
+    if (!target[name]?.name?.startsWith?.('_') && !name?.startsWith?.('_') && typeof target[name] === 'function' && name !== 'constructor') {
       return (args) => {
         const context = target._scope.generateContext({ ...target._attributes, ...args });
         return target[name](context);
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index a2ca4e16..ce35e9bc 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -1,4 +1,5 @@
 import Nullstack from 'nullstack';
+import { default as ExternalComponent } from './TwoWayBindingsExternalComponent';
 
 class TwoWayBindings extends Nullstack {
 
@@ -18,6 +19,8 @@ class TwoWayBindings extends Nullstack {
 
   bringsHappiness = false
 
+  external = 'externalValue'
+
   parse({ event, source: bind, callback }) {
     const normalized = event.target.value.replace(',', '').padStart(3, '0');
     const whole = (parseInt(normalized.slice(0, -2)) || 0).toString();
@@ -79,6 +82,7 @@ class TwoWayBindings extends Nullstack {
         <input bind={params.page} name="page" />
         <Bubble bind={this.byKeyName} />
         <CurrencyInput bind={this.currency} onchange={this.setHappiness} />
+        <ExternalComponent bind={this.external} />
       </div>
     )
   }
diff --git a/tests/src/TwoWayBindingsExternalComponent.njs b/tests/src/TwoWayBindingsExternalComponent.njs
new file mode 100644
index 00000000..6a076003
--- /dev/null
+++ b/tests/src/TwoWayBindingsExternalComponent.njs
@@ -0,0 +1,15 @@
+import Nullstack from 'nullstack';
+
+class TwoWayBindingsExternalComponent extends Nullstack {
+
+  render({ bind }) {
+    return (
+      <div>
+        <input bind={bind} name="external" />
+      </div>
+    )
+  }
+
+}
+
+export default TwoWayBindingsExternalComponent;
\ No newline at end of file

From 3cb5de4d037cdb123677ace5173eeadfa6b18629 Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jay.east@hotmail.com>
Date: Tue, 7 Jun 2022 20:39:54 -0300
Subject: [PATCH 070/105] update input name, add test case

---
 tests/src/TwoWayBindings.test.js              | 10 ++++++++++
 tests/src/TwoWayBindingsExternalComponent.njs |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index a0daaa1e..804efbab 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -111,6 +111,11 @@ describe('TwoWayBindings', () => {
     const element = await page.$('[data-character="b"]');
     expect(element).toBeTruthy();
   });
+  
+  test('bind should accept external component', async () => {
+    const value = await page.$eval('[name="composedComputed"]', (element) => element.value);
+    expect(value).toMatch('byKeyNameValue');
+  });
 
   test('developers can create custom bindable components', async () => {
     await page.type('[data-currency]', '696969696969');
@@ -139,4 +144,9 @@ describe('TwoWayBindings', () => {
     expect(value).toMatch('byKeyNameValue');
   });
 
+  test('bind should work in exteranl components', async () => {
+    const value = await page.$eval('[name="externalComponent"]', (element) => element.value);
+    expect(value).toMatch('externalValue');
+  });
+
 });
\ No newline at end of file
diff --git a/tests/src/TwoWayBindingsExternalComponent.njs b/tests/src/TwoWayBindingsExternalComponent.njs
index 6a076003..ea499bf6 100644
--- a/tests/src/TwoWayBindingsExternalComponent.njs
+++ b/tests/src/TwoWayBindingsExternalComponent.njs
@@ -5,7 +5,7 @@ class TwoWayBindingsExternalComponent extends Nullstack {
   render({ bind }) {
     return (
       <div>
-        <input bind={bind} name="external" />
+        <input bind={bind} name="externalComponent" />
       </div>
     )
   }

From 72b571673ab70b3b0474dda51331d43f1647e850 Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jay.east@hotmail.com>
Date: Tue, 7 Jun 2022 21:17:06 -0300
Subject: [PATCH 071/105] frontend test

---
 tests/src/TwoWayBindings.njs                  |  6 +++---
 tests/src/TwoWayBindings.test.js              | 16 +++++++++-------
 tests/src/TwoWayBindingsExternalComponent.njs |  2 +-
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index ce35e9bc..e0261b05 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -1,5 +1,5 @@
 import Nullstack from 'nullstack';
-import { default as ExternalComponent } from './TwoWayBindingsExternalComponent';
+import TwoWayBindingsExternalComponent from './TwoWayBindingsExternalComponent';
 
 class TwoWayBindings extends Nullstack {
 
@@ -19,7 +19,7 @@ class TwoWayBindings extends Nullstack {
 
   bringsHappiness = false
 
-  external = 'externalValue'
+  external = 'external'
 
   parse({ event, source: bind, callback }) {
     const normalized = event.target.value.replace(',', '').padStart(3, '0');
@@ -82,7 +82,7 @@ class TwoWayBindings extends Nullstack {
         <input bind={params.page} name="page" />
         <Bubble bind={this.byKeyName} />
         <CurrencyInput bind={this.currency} onchange={this.setHappiness} />
-        <ExternalComponent bind={this.external} />
+        <TwoWayBindingsExternalComponent bind={this.external} />
       </div>
     )
   }
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index 804efbab..5def1da0 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -111,11 +111,6 @@ describe('TwoWayBindings', () => {
     const element = await page.$('[data-character="b"]');
     expect(element).toBeTruthy();
   });
-  
-  test('bind should accept external component', async () => {
-    const value = await page.$eval('[name="composedComputed"]', (element) => element.value);
-    expect(value).toMatch('byKeyNameValue');
-  });
 
   test('developers can create custom bindable components', async () => {
     await page.type('[data-currency]', '696969696969');
@@ -144,9 +139,16 @@ describe('TwoWayBindings', () => {
     expect(value).toMatch('byKeyNameValue');
   });
 
-  test('bind should work in exteranl components', async () => {
+  test('bind should prerender in external components', async () => {
+    const value = await page.$eval('[name="externalComponent"]', (element) => element.value);
+    expect(value).toMatch('external');
+  });
+  
+  test('bind should rerender in external components', async () => {
+    await page.type('[data-value]', 'new');
+    await page.waitForSelector('[data-value="external"]')
     const value = await page.$eval('[name="externalComponent"]', (element) => element.value);
-    expect(value).toMatch('externalValue');
+    expect(value).toMatch('newexternal');
   });
 
 });
\ No newline at end of file
diff --git a/tests/src/TwoWayBindingsExternalComponent.njs b/tests/src/TwoWayBindingsExternalComponent.njs
index ea499bf6..b61ec26e 100644
--- a/tests/src/TwoWayBindingsExternalComponent.njs
+++ b/tests/src/TwoWayBindingsExternalComponent.njs
@@ -5,7 +5,7 @@ class TwoWayBindingsExternalComponent extends Nullstack {
   render({ bind }) {
     return (
       <div>
-        <input bind={bind} name="externalComponent" />
+        <input data-value={bind.object[bind.property]} bind={bind} name="externalComponent" />
       </div>
     )
   }

From 713eeaf640037b199daf7bc41a7782d4dd52e24a Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 7 Jun 2022 23:02:28 -0300
Subject: [PATCH 072/105] :white_check_mark: update order of dom for tests

---
 tests/src/StatefulComponent.njs | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
index 22a98049..4b3eb6c3 100644
--- a/tests/src/StatefulComponent.njs
+++ b/tests/src/StatefulComponent.njs
@@ -24,6 +24,19 @@ class StatefulComponent extends Nullstack {
   render() {
     return (
       <form ref={this._element} data-zero={0} data-hydrated-zero={this.hydrated ? 0 : 1}>
+        <style>
+          {`
+            style { 
+              display: none !important;
+            }
+            button { 
+              background-color: rgba(0,0,0, ${this.count * 0.1});
+              color: red;
+              border: 0;
+              padding: 10px;
+            }
+          `}
+        </style>
         {this.hydrated &&
           <div data-tag={this._element.tagName.toLowerCase()} />
         }
@@ -50,19 +63,6 @@ class StatefulComponent extends Nullstack {
         <button onclick={{ visible: !this.visible }} data-toggle> Toggle </button>
         {this.visible && <button onclick={undefined} data-undefined-event> button </button>}
         <textarea> {this.count} {this.count} </textarea>
-        <style>
-          {`
-            style { 
-              display: none !important;
-            }
-            button { 
-              background-color: rgba(0,0,0, ${this.count * 0.1});
-              color: red;
-              border: 0;
-              padding: 10px;
-            }
-          `}
-        </style>
       </form>
     )
   }

From 2a46d107a6cf0490e5d7063c986c2167fa7fca82 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Thu, 9 Jun 2022 04:19:27 -0300
Subject: [PATCH 073/105] :sparkles: debounced events

---
 client/events.js                 | 71 +++++++++++++++++++-------------
 tests/src/TwoWayBindings.njs     | 13 ++++++
 tests/src/TwoWayBindings.test.js | 38 ++++++++++++++++-
 types/JSX.d.ts                   |  1 +
 4 files changed, 94 insertions(+), 29 deletions(-)

diff --git a/client/events.js b/client/events.js
index f327a374..f71d20b5 100644
--- a/client/events.js
+++ b/client/events.js
@@ -3,6 +3,7 @@ import { camelize } from '../shared/string';
 
 export const eventCallbacks = new WeakMap()
 export const eventSubjects = new WeakMap()
+export const eventDebouncer = new WeakMap()
 
 function executeEvent(callback, subject, event, data) {
   if (typeof callback === 'object') {
@@ -12,30 +13,21 @@ function executeEvent(callback, subject, event, data) {
   }
 }
 
+function debounce(selector, name, time, callback) {
+  if (!time) {
+    callback()
+  } else {
+    const eventMap = eventDebouncer.get(selector) || {}
+    clearTimeout(eventMap[name])
+    eventMap[name] = setTimeout(callback, time)
+    eventDebouncer.set(selector, eventMap)
+  }
+}
+
 export function generateCallback(selector, name) {
   return function eventCallback(event) {
     const subject = eventSubjects.get(selector)
-    const data = { ...subject.data }
-    for (const attribute in subject) {
-      if (attribute.startsWith('data-')) {
-        const key = camelize(attribute.slice(5));
-        data[key] = subject[attribute];
-      }
-    }
-    if (subject?.bind !== undefined) {
-      const valueName = (subject.type === 'checkbox' || subject.type === 'radio') ? 'checked' : 'value'
-      const object = subject.bind.object
-      const property = subject.bind.property
-      if (valueName === 'checked') {
-        object[property] = event.target[valueName];
-      } else if (object[property] === true || object[property] === false) {
-        object[property] = event.target[valueName] === 'true';
-      } else if (typeof object[property] === 'number') {
-        object[property] = +event.target[valueName] || 0;
-      } else {
-        object[property] = event.target[valueName];
-      }
-    }
+    if (!subject) return
     if (subject.href) {
       if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
         event.preventDefault()
@@ -44,13 +36,36 @@ export function generateCallback(selector, name) {
     } else if (subject.default !== true) {
       event.preventDefault();
     }
-    if (subject[name] === true) return
-    if (Array.isArray(subject[name])) {
-      for (const subcallback of subject[name]) {
-        executeEvent(subcallback, subject, event, data)
+    debounce(selector, name, subject.debounce, () => {
+      const data = { ...subject.data }
+      for (const attribute in subject) {
+        if (attribute.startsWith('data-')) {
+          const key = camelize(attribute.slice(5));
+          data[key] = subject[attribute];
+        }
       }
-    } else {
-      executeEvent(subject[name], subject, event, data)
-    }
+      if (subject?.bind !== undefined) {
+        const valueName = (subject.type === 'checkbox' || subject.type === 'radio') ? 'checked' : 'value'
+        const object = subject.bind.object
+        const property = subject.bind.property
+        if (valueName === 'checked') {
+          object[property] = event.target[valueName];
+        } else if (object[property] === true || object[property] === false) {
+          object[property] = event.target[valueName] === 'true';
+        } else if (typeof object[property] === 'number') {
+          object[property] = +event.target[valueName] || 0;
+        } else {
+          object[property] = event.target[valueName];
+        }
+      }
+      if (subject[name] === true) return
+      if (Array.isArray(subject[name])) {
+        for (const subcallback of subject[name]) {
+          executeEvent(subcallback, subject, event, data)
+        }
+      } else {
+        executeEvent(subject[name], subject, event, data)
+      }
+    })
   }
 };
\ No newline at end of file
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index e0261b05..40272911 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -21,6 +21,10 @@ class TwoWayBindings extends Nullstack {
 
   external = 'external'
 
+  debouncedBind = '69'
+  debouncedObject = '69'
+  debouncedEvent = '69'
+
   parse({ event, source: bind, callback }) {
     const normalized = event.target.value.replace(',', '').padStart(3, '0');
     const whole = (parseInt(normalized.slice(0, -2)) || 0).toString();
@@ -50,6 +54,12 @@ class TwoWayBindings extends Nullstack {
     this.bringsHappiness = bringsHappiness
   }
 
+  debouncedEventHandler({ event }) {
+    if (event.type === 'click') {
+      this.debouncedEvent = '6969'
+    }
+  }
+
   render({ params }) {
     return (
       <div data-brings-happiness={this.bringsHappiness}>
@@ -83,6 +93,9 @@ class TwoWayBindings extends Nullstack {
         <Bubble bind={this.byKeyName} />
         <CurrencyInput bind={this.currency} onchange={this.setHappiness} />
         <TwoWayBindingsExternalComponent bind={this.external} />
+        <input bind={this.debouncedBind} debounce={2000} data-debounced-bind={this.debouncedBind} />
+        <button onclick={{ debouncedObject: '6969' }} debounce={2000} data-debounced-object={this.debouncedObject}> debounce object </button>
+        <button onclick={this.debouncedEventHandler} debounce={2000} data-debounced-event={this.debouncedEvent}> debounce event </button>
       </div>
     )
   }
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index 5def1da0..517074b2 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -143,7 +143,7 @@ describe('TwoWayBindings', () => {
     const value = await page.$eval('[name="externalComponent"]', (element) => element.value);
     expect(value).toMatch('external');
   });
-  
+
   test('bind should rerender in external components', async () => {
     await page.type('[data-value]', 'new');
     await page.waitForSelector('[data-value="external"]')
@@ -151,4 +151,40 @@ describe('TwoWayBindings', () => {
     expect(value).toMatch('newexternal');
   });
 
+  test('bind can be debounced', async () => {
+    await page.type('[data-debounced-bind]', '69');
+    await page.waitForTimeout(1000)
+    const originalValue = await page.$('[data-debounced-bind="69"]');
+    await page.waitForTimeout(1500)
+    const updatedValue = await page.$('[data-debounced-bind="6969"]');
+    expect(originalValue && updatedValue).toBeTruthy();
+  });
+
+  test('object events can be debounced', async () => {
+    await page.click('[data-debounced-object]');
+    await page.waitForTimeout(1000)
+    const originalValue = await page.$('[data-debounced-object="69"]');
+    await page.waitForTimeout(1500)
+    const updatedValue = await page.$('[data-debounced-object="6969"]');
+    expect(originalValue && updatedValue).toBeTruthy();
+  });
+
+  test('events can be debounced', async () => {
+    await page.click('[data-debounced-event]');
+    await page.waitForTimeout(1000)
+    const originalValue = await page.$('[data-debounced-event="69"]');
+    await page.waitForTimeout(1500)
+    const updatedValue = await page.$('[data-debounced-event="6969"]');
+    expect(originalValue && updatedValue).toBeTruthy();
+  });
+
+  test('debounced events keep the reference to the original event', async () => {
+    await page.click('[data-debounced-event]');
+    await page.waitForTimeout(1000)
+    const originalValue = await page.$('[data-debounced-event="69"]');
+    await page.waitForTimeout(1500)
+    const updatedValue = await page.$('[data-debounced-event="6969"]');
+    expect(originalValue && updatedValue).toBeTruthy();
+  });
+
 });
\ No newline at end of file
diff --git a/types/JSX.d.ts b/types/JSX.d.ts
index 584039f5..139d0528 100644
--- a/types/JSX.d.ts
+++ b/types/JSX.d.ts
@@ -48,6 +48,7 @@ export interface Attributes {
   html?: string | undefined;
   source?: object | undefined;
   bind?: any | undefined;
+  debounce?: number | undefined;
   ref?: any | undefined;
   data?: object | undefined;
   "data-"?: any;

From d737897c6dc6933b970130c386ca81fd3ed716bf Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 11 Jun 2022 01:36:03 -0300
Subject: [PATCH 074/105] :sparkles: remove debounce from dom

---
 client/render.js                 |  1 +
 client/rerender.js               |  1 +
 server/renderAttributes.js       |  1 +
 tests/src/TwoWayBindings.njs     |  3 +++
 tests/src/TwoWayBindings.test.js | 18 ++++++++++++++++++
 5 files changed, 24 insertions(+)

diff --git a/client/render.js b/client/render.js
index e4c0bc21..cf17b1b4 100644
--- a/client/render.js
+++ b/client/render.js
@@ -27,6 +27,7 @@ export default function render(node, options) {
   ref(node, node.element)
 
   for (let name in node.attributes) {
+    if (name === 'debounce') continue
     if (name === 'html') {
       node.element.innerHTML = node.attributes[name];
       node.head || anchorableElement(node.element);
diff --git a/client/rerender.js b/client/rerender.js
index 9b4f645c..9488e596 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -8,6 +8,7 @@ import generateTruthyString from '../shared/generateTruthyString';
 function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
+    if (name === 'debounce') continue
     if (name === 'html') {
       if (nextAttributes[name] !== currentAttributes[name]) {
         selector.innerHTML = nextAttributes[name];
diff --git a/server/renderAttributes.js b/server/renderAttributes.js
index b678d3fa..01e5a37a 100644
--- a/server/renderAttributes.js
+++ b/server/renderAttributes.js
@@ -3,6 +3,7 @@ import generateTruthyString from "../shared/generateTruthyString";
 export default function renderAttributes(attributes) {
   let element = ''
   for (let name in attributes) {
+    if (name === 'debounce') continue
     if (!name.startsWith('on') && name !== 'html') {
       let attribute = attributes[name];
       if ((name === 'class' || name === 'style') && Array.isArray(attributes[name])) {
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index 40272911..161e447b 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -24,6 +24,7 @@ class TwoWayBindings extends Nullstack {
   debouncedBind = '69'
   debouncedObject = '69'
   debouncedEvent = '69'
+  debounceTime = 1000
 
   parse({ event, source: bind, callback }) {
     const normalized = event.target.value.replace(',', '').padStart(3, '0');
@@ -96,6 +97,8 @@ class TwoWayBindings extends Nullstack {
         <input bind={this.debouncedBind} debounce={2000} data-debounced-bind={this.debouncedBind} />
         <button onclick={{ debouncedObject: '6969' }} debounce={2000} data-debounced-object={this.debouncedObject}> debounce object </button>
         <button onclick={this.debouncedEventHandler} debounce={2000} data-debounced-event={this.debouncedEvent}> debounce event </button>
+        {this.hydrated && <input bind={this.debouncedBind} debounce={2000} data-debounced-hydrated />}
+        <button onclick={{ debounceTime: 2000 }} debounce={this.debounceTime} data-debounced-rerender={this.debounceTime}>rebounce</button>
       </div>
     )
   }
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index 517074b2..ca044e01 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -187,4 +187,22 @@ describe('TwoWayBindings', () => {
     expect(originalValue && updatedValue).toBeTruthy();
   });
 
+  test('debounce attribute should not be present in dom during prerender', async () => {
+    const element = await page.$('[data-debounced-event]:not([debounce])');
+    expect(element).toBeTruthy();
+  });
+
+  test('debounce attribute should not be present in dom during render', async () => {
+    await page.waitForSelector('[data-debounced-hydrated]')
+    const element = await page.$('[data-debounced-hydrated]:not([debounce])');
+    expect(element).toBeTruthy();
+  });
+
+  test('debounce attribute should not be present in dom during rerender', async () => {
+    await page.click('[data-debounced-rerender]:not([debounce])');
+    await page.waitForSelector('[data-debounced-rerender="2000"]:not([debounce])')
+    const element = await page.$('[data-debounced-rerender="2000"]:not([debounce])');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file

From 92e69c1f8c8f3baecdfaa2a11b7c230680cc4629 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 11 Jun 2022 20:11:08 -0300
Subject: [PATCH 075/105] :recycle: more consistent underscored attributes

---
 client/instanceProxyHandler.js          |  7 +++++--
 server/index.js                         |  7 ++++---
 server/instanceProxyHandler.js          |  5 ++++-
 tests/src/UnderscoredAttributes.njs     | 21 +++++++++++++++++----
 tests/src/UnderscoredAttributes.test.js | 13 +++++++++++++
 5 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index 89cdc858..230a6cd8 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -8,11 +8,14 @@ const instanceProxyHandler = {
   get(target, name) {
     if (name === '_isProxy') return true;
     if (target.constructor[name]?.name === '_invoke') return target.constructor[name].bind(target.constructor)
-    if (!target[name]?.name?.startsWith?.('_') && !name.startsWith('_') && typeof target[name] === 'function' && name !== 'constructor') {
+    if (typeof target[name] === 'function' && name !== 'constructor') {
+      const proxy = instanceProxies.get(target)
+      if (target[name]?.name?.startsWith?.('_') || name.startsWith('_')) {
+        return target[name].bind(proxy)
+      }
       const { [name]: named } = {
         [name]: (args) => {
           const context = generateContext({ ...target._attributes, ...args });
-          const proxy = instanceProxies.get(target)
           return target[name].call(proxy, context);
         }
       }
diff --git a/server/index.js b/server/index.js
index 9da83611..016c10e3 100644
--- a/server/index.js
+++ b/server/index.js
@@ -68,9 +68,10 @@ class Nullstack {
       if (name === 'hydrated') continue
       if (name === 'terminated') continue
       if (name === 'key') continue
-      if (typeof this[name] !== 'function' && !name.startsWith('_') && name !== 'attributes') {
-        serialized[name] = this[name];
-      }
+      if (name === '_attributes') continue
+      if (name === '_scope') continue
+      if (typeof this[name] === 'function') continue
+      serialized[name] = this[name];
     }
     return serialized;
   }
diff --git a/server/instanceProxyHandler.js b/server/instanceProxyHandler.js
index 0b21a4d0..aeba0670 100644
--- a/server/instanceProxyHandler.js
+++ b/server/instanceProxyHandler.js
@@ -1,6 +1,9 @@
 const instanceProxyHandler = {
   get(target, name) {
-    if (!target[name]?.name?.startsWith?.('_') && !name?.startsWith?.('_') && typeof target[name] === 'function' && name !== 'constructor') {
+    if (typeof target[name] === 'function' && name !== 'constructor') {
+      if (target[name]?.name?.startsWith?.('_') || name?.startsWith?.('_')) {
+        return target[name].bind(target)
+      }
       return (args) => {
         const context = target._scope.generateContext({ ...target._attributes, ...args });
         return target[name](context);
diff --git a/tests/src/UnderscoredAttributes.njs b/tests/src/UnderscoredAttributes.njs
index 2b910007..7ea69ff3 100644
--- a/tests/src/UnderscoredAttributes.njs
+++ b/tests/src/UnderscoredAttributes.njs
@@ -11,8 +11,8 @@ const underscoredObject = {
 }
 
 function _underscored(value) {
-    this.e = value
-  }
+  this.e = value
+}
 
 class UnderscoredAttributes extends Nullstack {
 
@@ -21,6 +21,11 @@ class UnderscoredAttributes extends Nullstack {
   c = 0
   d = 0
   e = 0
+  f = 0
+
+  prepare() {
+    this._g = 1
+  }
 
   _underscoredMethod(value) {
     this.a = value
@@ -32,6 +37,10 @@ class UnderscoredAttributes extends Nullstack {
 
   notUnderscored = _underscored
 
+  _underscoredEvent() {
+    this.f = 1
+  }
+
   hydrate() {
     this._underscoredMethod(1)
     this._underscoredAttributeFunction(1)
@@ -42,10 +51,14 @@ class UnderscoredAttributes extends Nullstack {
     this.notUnderscored(1)
   }
 
+  setEventListener({ element }) {
+    element.addEventListener('click', this._underscoredEvent)
+  }
+
   render() {
     return (
-      <div data-a={this.a} data-b={this.b} data-c={this.c} data-d={this.d} data-e={this.e}>
-        <span>UnderscoredAttributes</span>
+      <div data-a={this.a} data-b={this.b} data-c={this.c} data-d={this.d} data-e={this.e} data-f={this.f} data-g={this._g}>
+        <button ref={this.setEventListener} data-hydrated={this.hydrated}>UnderscoredAttributes</button>
       </div>
     )
   }
diff --git a/tests/src/UnderscoredAttributes.test.js b/tests/src/UnderscoredAttributes.test.js
index 52ad1f92..3a7c9020 100644
--- a/tests/src/UnderscoredAttributes.test.js
+++ b/tests/src/UnderscoredAttributes.test.js
@@ -36,4 +36,17 @@ describe('UnderscoredAttributes', () => {
     expect(element).toBeTruthy();
   });
 
+  test('this is bound to the instance on underscored functions even on events', async () => {
+    await page.waitForSelector('[data-hydrated]')
+    await page.click('[data-hydrated]')
+    await page.waitForSelector('[data-f="1"]')
+    const element = await page.$('[data-f="1"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('underscored variables are serialized for hydration', async () => {
+    const element = await page.$('[data-g="1"]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file

From edfb535fc056453a535735157154d3478a96417b Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 14 Jun 2022 23:57:42 -0300
Subject: [PATCH 076/105] :sparkles: bind noop and inner references

---
 client/events.js                              |  3 +-
 loaders/register-inner-components.js          | 32 ++++++++++---------
 plugins/anchorable.js                         |  4 ++-
 plugins/bindable.js                           |  8 +++--
 shared/noop.js                                |  1 +
 tests/src/Element.njs                         | 29 +++++++++++++++--
 tests/src/Element.test.js                     | 16 ++++++++++
 tests/src/RenderableComponent.njs             | 11 +++++--
 tests/src/RenderableComponent.test.js         |  5 +++
 tests/src/TwoWayBindings.test.js              |  6 ++++
 tests/src/TwoWayBindingsExternalComponent.njs |  4 +--
 11 files changed, 93 insertions(+), 26 deletions(-)
 create mode 100644 shared/noop.js

diff --git a/client/events.js b/client/events.js
index f71d20b5..7ac83483 100644
--- a/client/events.js
+++ b/client/events.js
@@ -1,5 +1,6 @@
 import router from './router'
 import { camelize } from '../shared/string';
+import noop from '../shared/noop'
 
 export const eventCallbacks = new WeakMap()
 export const eventSubjects = new WeakMap()
@@ -58,7 +59,7 @@ export function generateCallback(selector, name) {
           object[property] = event.target[valueName];
         }
       }
-      if (subject[name] === true) return
+      if (subject[name] === noop) return
       if (Array.isArray(subject[name])) {
         for (const subcallback of subject[name]) {
           executeEvent(subcallback, subject, event, data)
diff --git a/loaders/register-inner-components.js b/loaders/register-inner-components.js
index 7e893a3f..fa5f32c2 100644
--- a/loaders/register-inner-components.js
+++ b/loaders/register-inner-components.js
@@ -11,23 +11,25 @@ module.exports = function (source) {
   traverse(ast, {
     ClassMethod(path) {
       if (path.node.key.name.startsWith('render')) {
-        traverse(path.node, {
-          JSXIdentifier(subpath) {
-            if (/^[A-Z]/.test(subpath.node.name)) {
-              if (!path.scope.hasBinding(subpath.node.name)) {
-                const start = path.node.body.body[0].start;
-                if (!positions.includes(start)) {
-                  positions.push(start);
-                }
-                if (!injections[start]) {
-                  injections[start] = [];
-                }
-                if (!injections[start].includes(subpath.node.name)) {
-                  injections[start].push(subpath.node.name);
-                }
+        function identify(subpath) {
+          if (/^[A-Z]/.test(subpath.node.name)) {
+            if (!path.scope.hasBinding(subpath.node.name)) {
+              const start = path.node.body.body[0].start;
+              if (!positions.includes(start)) {
+                positions.push(start);
+              }
+              if (!injections[start]) {
+                injections[start] = [];
+              }
+              if (!injections[start].includes(subpath.node.name)) {
+                injections[start].push(subpath.node.name);
               }
             }
-          },
+          }
+        }
+        traverse(path.node, {
+          JSXIdentifier: identify,
+          Identifier: identify,
         }, path.scope, path);
       }
     }
diff --git a/plugins/anchorable.js b/plugins/anchorable.js
index f2b9351f..8769b4f9 100644
--- a/plugins/anchorable.js
+++ b/plugins/anchorable.js
@@ -1,3 +1,5 @@
+import noop from '../shared/noop'
+
 function match(node) {
   return (
     node &&
@@ -10,7 +12,7 @@ function match(node) {
 
 function transform({ node }) {
   if (!match(node)) return
-  node.attributes.onclick ??= true
+  node.attributes.onclick ??= noop
 }
 
 export default { transform, client: true }
diff --git a/plugins/bindable.js b/plugins/bindable.js
index 7ab9bc4e..219f9ce5 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -1,3 +1,5 @@
+import noop from '../shared/noop'
+
 function match(node) {
   return node?.attributes?.bind !== undefined
 }
@@ -16,11 +18,11 @@ function transform({ node, environment }) {
   node.attributes.name = node.attributes.name || node.attributes.bind;
   if (environment.client) {
     if (node.attributes.type === 'checkbox' || node.attributes.type === 'radio') {
-      node.attributes.onclick ??= true;
+      node.attributes.onclick ??= noop;
     } else if (node.type !== 'input' && node.type !== 'textarea') {
-      node.attributes.onchange ??= true;
+      node.attributes.onchange ??= noop;
     } else {
-      node.attributes.oninput ??= true;
+      node.attributes.oninput ??= noop;
     }
   }
 }
diff --git a/shared/noop.js b/shared/noop.js
new file mode 100644
index 00000000..7a9ff1d5
--- /dev/null
+++ b/shared/noop.js
@@ -0,0 +1 @@
+export default function noop() { }
\ No newline at end of file
diff --git a/tests/src/Element.njs b/tests/src/Element.njs
index 923e9c97..e9755005 100644
--- a/tests/src/Element.njs
+++ b/tests/src/Element.njs
@@ -1,14 +1,39 @@
 import Nullstack from 'nullstack';
 
+class ClassElement extends Nullstack {
+
+  render({ prop }) {
+    return (
+      <div data-class-component={prop} />
+    )
+  }
+
+}
+
+function FunctionalElement({ prop }) {
+  return (
+    <div data-functional-component={prop} />
+  )
+}
+
 class Element extends Nullstack {
-  
+
+  renderInnerElement({ prop }) {
+    return (
+      <div data-inner-component={prop} />
+    )
+  }
+
   render() {
     return (
-      <> 
+      <>
         <element tag="b" data-tag="b">b</element>
         <element data-tag="fragment">
           <element tag="abbr" data-tag="abbr">abbr</element>
         </element>
+        <element tag={InnerElement} prop />
+        <element tag={ClassElement} prop />
+        <element tag={FunctionalElement} prop />
       </>
     )
   }
diff --git a/tests/src/Element.test.js b/tests/src/Element.test.js
index 6947b7f0..d5606a4a 100644
--- a/tests/src/Element.test.js
+++ b/tests/src/Element.test.js
@@ -19,4 +19,20 @@ describe('FullStackLifecycle', () => {
     expect(element).toBeFalsy();
   });
 
+  test('elements can be inner components and receive props', async () => {
+    const element = await page.$('[data-inner-component]');
+    expect(element).toBeTruthy();
+  });
+
+  test('elements can be class components and receive props', async () => {
+    const element = await page.$('[data-class-component]');
+    expect(element).toBeTruthy();
+  });
+
+  test('elements can be functional components and receive props', async () => {
+    const element = await page.$('[data-functional-component]');
+    expect(element).toBeTruthy();
+  });
+
+
 });
\ No newline at end of file
diff --git a/tests/src/RenderableComponent.njs b/tests/src/RenderableComponent.njs
index b3fbf2c4..ffdbf145 100644
--- a/tests/src/RenderableComponent.njs
+++ b/tests/src/RenderableComponent.njs
@@ -6,16 +6,23 @@ class RenderableComponent extends Nullstack {
     return <div data-nested />
   }
 
-  renderInnerComponent({ children }) {
+  renderInnerComponent({ children, reference: Reference }) {
     return (
       <div class="InnerComponent">
         <p> Inner Component </p>
         <NestedInnerComponent />
+        <Reference prop />
         {children}
       </div>
     )
   }
 
+  renderInnerReference({ prop }) {
+    return (
+      <div data-reference={prop} />
+    )
+  }
+
   renderFalsy() {
     return false;
   }
@@ -37,7 +44,7 @@ class RenderableComponent extends Nullstack {
         <element class="element" tag={params.condition ? 'div' : 'span'}>
           element tag
         </element>
-        <InnerComponent>
+        <InnerComponent reference={InnerReference}>
           <span class="children"> children </span>
         </InnerComponent>
         <ul>
diff --git a/tests/src/RenderableComponent.test.js b/tests/src/RenderableComponent.test.js
index f05f71ad..307ffaf4 100644
--- a/tests/src/RenderableComponent.test.js
+++ b/tests/src/RenderableComponent.test.js
@@ -84,6 +84,11 @@ describe('RenderableComponent', () => {
     expect(element).toBeFalsy();
   });
 
+  test('inner components can be referenced and receive props', async () => {
+    const element = await page.$('[data-reference]');
+    expect(element).toBeTruthy();
+  });
+
 });
 
 describe('RenderableComponent ?condition=true', () => {
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index ca044e01..a405aad0 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -205,4 +205,10 @@ describe('TwoWayBindings', () => {
     expect(element).toBeTruthy();
   });
 
+  test('custom bindable components receive a no op function if no onchange is passed to them', async () => {
+    await page.waitForSelector('[data-onchange="noop"]')
+    const element = await page.$('[data-onchange="noop"]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file
diff --git a/tests/src/TwoWayBindingsExternalComponent.njs b/tests/src/TwoWayBindingsExternalComponent.njs
index b61ec26e..2f4d85fb 100644
--- a/tests/src/TwoWayBindingsExternalComponent.njs
+++ b/tests/src/TwoWayBindingsExternalComponent.njs
@@ -2,10 +2,10 @@ import Nullstack from 'nullstack';
 
 class TwoWayBindingsExternalComponent extends Nullstack {
 
-  render({ bind }) {
+  render({ bind, onchange }) {
     return (
       <div>
-        <input data-value={bind.object[bind.property]} bind={bind} name="externalComponent" />
+        <input data-value={bind.object[bind.property]} bind={bind} onchange={onchange} data-onchange={onchange?.name} name="externalComponent" />
       </div>
     )
   }

From 44595918fec20f38c720b450ba9fdf0e263f2c4e Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 18 Jun 2022 21:04:22 -0300
Subject: [PATCH 077/105] :sparkles: improved refs

---
 client/hydrate.js  |  4 ++--
 client/ref.js      | 23 +++++++++++++++++++----
 client/render.js   |  4 ++--
 client/rerender.js |  5 ++++-
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/client/hydrate.js b/client/hydrate.js
index 9271111d..e07821ac 100644
--- a/client/hydrate.js
+++ b/client/hydrate.js
@@ -1,4 +1,4 @@
-import ref from './ref';
+import { ref } from './ref';
 import { isFalse } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import client from './client';
@@ -10,7 +10,7 @@ function hydrateBody(selector, node) {
     anchorableElement(selector);
   }
   node.element = selector
-  ref(node, selector)
+  ref(node.attributes, selector)
   for (const element of selector.childNodes) {
     if ((element.tagName === 'TEXTAREA' || element.tagName === 'textarea') && element.childNodes.length === 0) {
       element.appendChild(document.createTextNode(''));
diff --git a/client/ref.js b/client/ref.js
index 859227e8..a9d2b829 100644
--- a/client/ref.js
+++ b/client/ref.js
@@ -1,7 +1,8 @@
-export default function ref(node, element) {
-  if (!node.attributes?.ref) return
-  const object = node.attributes.ref.object
-  const property = node.attributes.ref.property
+const refMap = new WeakMap()
+
+function setup(attributes, element) {
+  const object = attributes.ref.object
+  const property = attributes.ref.property
   if (typeof object[property] === 'function') {
     setTimeout(() => {
       object[property]({ element })
@@ -9,4 +10,18 @@ export default function ref(node, element) {
   } else {
     object[property] = element
   }
+  const map = refMap.get(attributes.ref.object) || {}
+  map[attributes.ref.property] = true
+  refMap.set(attributes.ref.object, map)
+}
+
+export function ref(attributes, element) {
+  if (!attributes?.ref) return
+  setup(attributes, element)
+}
+
+export function reref(attributes, element) {
+  const map = refMap.get(attributes.ref.object)
+  if (map?.[attributes.ref.property]) return
+  setup(attributes, element)
 }
\ No newline at end of file
diff --git a/client/render.js b/client/render.js
index cf17b1b4..6ca7e134 100644
--- a/client/render.js
+++ b/client/render.js
@@ -1,7 +1,7 @@
 import { isFalse, isText } from '../shared/nodes';
 import { anchorableElement } from './anchorableNode';
 import { eventCallbacks, eventSubjects, generateCallback } from './events'
-import ref from './ref'
+import { ref } from './ref'
 import generateTruthyString from '../shared/generateTruthyString';
 
 export default function render(node, options) {
@@ -24,7 +24,7 @@ export default function render(node, options) {
     node.element = document.createElement(node.type);
   }
 
-  ref(node, node.element)
+  ref(node.attributes, node.element)
 
   for (let name in node.attributes) {
     if (name === 'debounce') continue
diff --git a/client/rerender.js b/client/rerender.js
index 9488e596..95723d06 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -4,12 +4,15 @@ import client from './client';
 import render from './render';
 import { generateCallback, eventCallbacks, eventSubjects } from './events'
 import generateTruthyString from '../shared/generateTruthyString';
+import { reref } from './ref';
 
 function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
     if (name === 'debounce') continue
-    if (name === 'html') {
+    if (name === 'ref') {
+      reref(nextAttributes, selector)
+    } else if (name === 'html') {
       if (nextAttributes[name] !== currentAttributes[name]) {
         selector.innerHTML = nextAttributes[name];
         anchorableElement(selector);

From edb4904577b1abf67b53f021721ef207550aafc0 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 18 Jun 2022 21:30:46 -0300
Subject: [PATCH 078/105] :white_check_mark: instance ref tests

---
 tests/src/Application.njs |  5 +++--
 tests/src/Refs.njs        | 13 +++++++++----
 tests/src/Refs.test.js    | 21 ++++++++++++++++++---
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/tests/src/Application.njs b/tests/src/Application.njs
index 8aed7f33..af60504b 100644
--- a/tests/src/Application.njs
+++ b/tests/src/Application.njs
@@ -62,9 +62,10 @@ class Application extends Nullstack {
 
   prepare(context) {
     context.string = 'nullstack';
+    context.refInstanceCount = 0
   }
 
-  render({ project, page, environment }) {
+  render({ project, page, environment, refInstanceCount }) {
     return (
       <body data-window={WindowDependency.key}>
         <h1> {project.name} </h1>
@@ -125,7 +126,7 @@ class Application extends Nullstack {
         <MetatagState route="/metatag-state" />
         <JavaScriptExtension route="/javascript-extension" />
         <TypeScriptExtension route="/typescript-extension" generic />
-        <Refs route="/refs" />
+        <Refs route="/refs" key={'refs' + refInstanceCount} />
         <OptimizedEvents route="/optimized-events" />
         <DynamicHead route="/dynamic-head" />
         <TextObserver route="/text-observer" />
diff --git a/tests/src/Refs.njs b/tests/src/Refs.njs
index f8788d55..ea08a5af 100644
--- a/tests/src/Refs.njs
+++ b/tests/src/Refs.njs
@@ -8,9 +8,9 @@ class Refs extends Nullstack {
     this.id = this._element.id
   }
 
-  setRef({ element }) {
+  setRef({ element, refInstanceCount }) {
     this._function = element
-    this.isOnDOM = element.offsetHeight > 0
+    this.isOnDOM = element.offsetHeight > 0 && refInstanceCount
   }
 
   renderBubble({ ref }) {
@@ -19,14 +19,19 @@ class Refs extends Nullstack {
     )
   }
 
-  render() {
+  changeInstance(context) {
+    context.refInstanceCount++
+  }
+
+  render({ refInstanceCount }) {
     return (
-      <div id="hydrate-element" data-id={this.id} ref={this._element}>
+      <div id="hydrate-element" data-id={this.id} ref={this._element} data-instance={refInstanceCount}>
         <span id="composed-computed" ref={this[this.composedComputed]} data-id={this._composedComputed?.id} />
         <span id="logical-computed" ref={this[['_logical', 'Computed'].join('')]} data-id={this._logicalComputed?.id} />
         <span id="literal-computed" ref={this['_literalComputed']} data-id={this._literalComputed?.id} />
         <span id="function" ref={this.setRef} data-dom={this.isOnDOM} data-id={this._function?.id}>span</span>
         <Bubble ref={this._bubble} />
+        <button onclick={this.changeInstance}>Change Instance</button>
       </div>
     )
   }
diff --git a/tests/src/Refs.test.js b/tests/src/Refs.test.js
index dcc27181..71a38e1a 100644
--- a/tests/src/Refs.test.js
+++ b/tests/src/Refs.test.js
@@ -1,6 +1,6 @@
 describe('Refs', () => {
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     await page.goto('http://localhost:6969/');
     await page.click('[href="/refs"]')
   });
@@ -36,8 +36,8 @@ describe('Refs', () => {
   });
 
   test('refs functions only run after the element is appended do DOM', async () => {
-    await page.waitForSelector('[data-dom]');
-    const element = await page.$('[data-dom]');
+    await page.waitForSelector('[data-dom="0"]');
+    const element = await page.$('[data-dom="0"]');
     expect(element).toBeTruthy();
   });
 
@@ -47,5 +47,20 @@ describe('Refs', () => {
     expect(element).toBeTruthy();
   });
 
+  test('refs functions run when the ref object changes', async () => {
+    await page.waitForSelector('[data-dom="0"]');
+    await page.click("button")
+    await page.waitForSelector('[data-dom="1"]');
+    const element = await page.$('[data-dom="1"]');
+    expect(element).toBeTruthy();
+  });
+
+  test('refs are reassigned when the ref object changes ', async () => {
+    await page.waitForSelector('[data-dom="0"]');
+    await page.click("button")
+    await page.waitForSelector('[data-id="hydrate-element"][data-instance="1"]');
+    const element = await page.$('[data-id="hydrate-element"][data-instance="1"]');
+    expect(element).toBeTruthy();
+  });
 
 });
\ No newline at end of file

From 5e3b80eef2e1f280f3f0aa0809bb76c4991e890e Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 19 Jun 2022 01:45:21 -0300
Subject: [PATCH 079/105] :zap: faster simpler proxies

---
 client/instanceProxyHandler.js          |  4 ++--
 client/objectProxyHandler.js            | 25 +++++++++++--------------
 server/instanceProxyHandler.js          |  2 +-
 tests/src/NestedProxy.njs               | 21 ++++++++++++++++++++-
 tests/src/NestedProxy.test.js           | 20 ++++++++++++++++----
 tests/src/UnderscoredAttributes.njs     |  6 +++---
 tests/src/UnderscoredAttributes.test.js |  2 +-
 7 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index 230a6cd8..fdf83cbd 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -10,7 +10,7 @@ const instanceProxyHandler = {
     if (target.constructor[name]?.name === '_invoke') return target.constructor[name].bind(target.constructor)
     if (typeof target[name] === 'function' && name !== 'constructor') {
       const proxy = instanceProxies.get(target)
-      if (target[name]?.name?.startsWith?.('_') || name.startsWith('_')) {
+      if (name.startsWith('_')) {
         return target[name].bind(proxy)
       }
       const { [name]: named } = {
@@ -24,7 +24,7 @@ const instanceProxyHandler = {
     return Reflect.get(...arguments);
   },
   set(target, name, value) {
-    if (!value?.name?.startsWith?.('_') && !name.startsWith('_')) {
+    if (!name.startsWith('_')) {
       target[name] = generateObjectProxy(name, value);
       client.update();
     } else {
diff --git a/client/objectProxyHandler.js b/client/objectProxyHandler.js
index 8028e88d..0c544440 100644
--- a/client/objectProxyHandler.js
+++ b/client/objectProxyHandler.js
@@ -2,37 +2,34 @@ import client from './client';
 
 const objectProxyHandler = {
   set(target, name, value) {
-    if(isProxyable(name, value)) {
-      value._isProxy = true;
+    if (isProxyable(name, value)) {
       target[name] = new Proxy(value, this);
     } else {
       target[name] = value;
     }
-    if(!name.startsWith('_')) {
+    if (!name.startsWith('_')) {
       client.update();
     }
     return true;
   },
   get(target, name) {
-    if(name === '_isProxy') return true;
+    if (name === '_isProxy') return true;
     return Reflect.get(...arguments);
   }
 }
 
 function isProxyable(name, value) {
-  return (
-    !name.startsWith('_') && 
-    value !== null && 
-    typeof(value) === 'object' && 
-    value._isProxy === undefined && 
-    !(value instanceof Date)
-  );
+  if (name.startsWith('_')) return false
+  const constructor = value?.constructor
+  if (!constructor) return false
+  if (value._isProxy) return false
+  return constructor === Array || constructor === Object
 }
 
 export function generateObjectProxy(name, value) {
-  if(isProxyable(name, value)) {
-    if(typeof(value) === 'object') {
-      for(const key of Object.keys(value)) {
+  if (isProxyable(name, value)) {
+    if (typeof (value) === 'object') {
+      for (const key of Object.keys(value)) {
         value[key] = generateObjectProxy(key, value[key]);
       }
     }
diff --git a/server/instanceProxyHandler.js b/server/instanceProxyHandler.js
index aeba0670..3daf4e60 100644
--- a/server/instanceProxyHandler.js
+++ b/server/instanceProxyHandler.js
@@ -1,7 +1,7 @@
 const instanceProxyHandler = {
   get(target, name) {
     if (typeof target[name] === 'function' && name !== 'constructor') {
-      if (target[name]?.name?.startsWith?.('_') || name?.startsWith?.('_')) {
+      if (name.startsWith('_')) {
         return target[name].bind(target)
       }
       return (args) => {
diff --git a/tests/src/NestedProxy.njs b/tests/src/NestedProxy.njs
index 047538a9..7af544e3 100644
--- a/tests/src/NestedProxy.njs
+++ b/tests/src/NestedProxy.njs
@@ -1,5 +1,15 @@
 import Nullstack from 'nullstack';
 
+class ShouldNotProxy {
+
+  something = false
+
+  setSomething(value) {
+    this.something = value
+  }
+
+}
+
 class NestedProxy extends Nullstack {
 
   array = [
@@ -19,7 +29,14 @@ class NestedProxy extends Nullstack {
     }
   }
 
-  render({ array, object }) {
+  hydrate(context) {
+    this.shouldNotProxy = new ShouldNotProxy()
+    this.shouldNotProxy.setSomething(true)
+    context.shouldNotProxy = new ShouldNotProxy()
+    context.shouldNotProxy.setSomething(true)
+  }
+
+  render({ array, object, shouldNotProxy }) {
     if (!this.hydrated) return false
     return (
       <div
@@ -28,12 +45,14 @@ class NestedProxy extends Nullstack {
         data-array-zero-object={!!this.array[0].object._isProxy}
         data-object={!!this.object._isProxy}
         data-object-array={!!this.object.array._isProxy}
+        data-should-not-proxy={!this.shouldNotProxy._isProxy}
 
         data-context-array={!!array._isProxy}
         data-context-array-zero={!!array[0]._isProxy}
         data-context-array-zero-object={!!array[0].object._isProxy}
         data-context-object={!!object._isProxy}
         data-context-object-array={!!object.array._isProxy}
+        data-context-should-not-proxy={!shouldNotProxy._isProxy}
       />
     )
   }
diff --git a/tests/src/NestedProxy.test.js b/tests/src/NestedProxy.test.js
index c47ddaaa..1f7fc69f 100644
--- a/tests/src/NestedProxy.test.js
+++ b/tests/src/NestedProxy.test.js
@@ -34,34 +34,46 @@ describe('ParentComponent', () => {
     expect(element).toBeTruthy();
   });
 
+  test('non direct object instances nested to instance do not become proxies', async () => {
+    await page.waitForSelector('[data-should-not-proxy]');
+    const element = await page.$('[data-should-not-proxy]');
+    expect(element).toBeTruthy();
+  });
+
   test('context arrays become proxies', async () => {
     await page.waitForSelector('[data-context-array]');
     const element = await page.$('[data-context-array]');
     expect(element).toBeTruthy();
   });
-  
+
   test('objects nested to context arrays become proxies', async () => {
     await page.waitForSelector('[data-context-array-zero]');
     const element = await page.$('[data-context-array-zero]');
     expect(element).toBeTruthy();
   });
-  
+
   test('objects nested to context arrays become proxies', async () => {
     await page.waitForSelector('[data-context-array-zero-object]');
     const element = await page.$('[data-context-array-zero-object]');
     expect(element).toBeTruthy();
   });
-  
+
   test('context objects become proxies', async () => {
     await page.waitForSelector('[data-context-object]');
     const element = await page.$('[data-context-object]');
     expect(element).toBeTruthy();
   });
-  
+
   test('arrays nested to context objects become proxies', async () => {
     await page.waitForSelector('[data-context-object-array]');
     const element = await page.$('[data-context-object-array]');
     expect(element).toBeTruthy();
   });
 
+  test('non direct object instances nested to context do not become proxies', async () => {
+    await page.waitForSelector('[data-context-should-not-proxy]');
+    const element = await page.$('[data-context-should-not-proxy]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file
diff --git a/tests/src/UnderscoredAttributes.njs b/tests/src/UnderscoredAttributes.njs
index 7ea69ff3..70e1ec5a 100644
--- a/tests/src/UnderscoredAttributes.njs
+++ b/tests/src/UnderscoredAttributes.njs
@@ -10,8 +10,8 @@ const underscoredObject = {
   }
 }
 
-function _underscored(value) {
-  this.e = value
+function _underscored({ string, value }) {
+  this.e = string === 'nullstack' && value
 }
 
 class UnderscoredAttributes extends Nullstack {
@@ -48,7 +48,7 @@ class UnderscoredAttributes extends Nullstack {
     this._underscoredAfterConstructor(1)
     this._underscoredObject = underscoredObject
     this._underscoredObject.withoutUnderscore(1)
-    this.notUnderscored(1)
+    this.notUnderscored({ value: 1 })
   }
 
   setEventListener({ element }) {
diff --git a/tests/src/UnderscoredAttributes.test.js b/tests/src/UnderscoredAttributes.test.js
index 3a7c9020..aec0bd21 100644
--- a/tests/src/UnderscoredAttributes.test.js
+++ b/tests/src/UnderscoredAttributes.test.js
@@ -31,7 +31,7 @@ describe('UnderscoredAttributes', () => {
     expect(element).toBeTruthy();
   });
 
-  test('keys assigned with a function that name is underscored do not receive the context as argument', async () => {
+  test('keys assigned with a function that name is underscored receive the context as argument', async () => {
     const element = await page.$('[data-e="1"]');
     expect(element).toBeTruthy();
   });

From f3efaaa51917e5b821add1b093189a4d6633947e Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jaybertoldi@gmail.com>
Date: Tue, 21 Jun 2022 15:42:01 -0300
Subject: [PATCH 080/105] Fix ref undefined

---
 client/rerender.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/rerender.js b/client/rerender.js
index 95723d06..e55215e0 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -10,7 +10,7 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
     if (name === 'debounce') continue
-    if (name === 'ref') {
+    if (name === 'ref' && nextAttributes === undefined) {
       reref(nextAttributes, selector)
     } else if (name === 'html') {
       if (nextAttributes[name] !== currentAttributes[name]) {
@@ -154,4 +154,4 @@ export default function rerender() {
   client.nextBody = {}
   client.currentHead = client.nextHead
   client.nextHead = []
-}
\ No newline at end of file
+}

From c05952d999aa6e9f164e03f0fb15d84efcc86b37 Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jaybertoldi@gmail.com>
Date: Tue, 21 Jun 2022 15:48:57 -0300
Subject: [PATCH 081/105] Fix mistaken Comparison Operators

---
 client/rerender.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/rerender.js b/client/rerender.js
index e55215e0..247681d4 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -10,7 +10,7 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
     if (name === 'debounce') continue
-    if (name === 'ref' && nextAttributes === undefined) {
+    if (name === 'ref' && nextAttributes !== undefined) {
       reref(nextAttributes, selector)
     } else if (name === 'html') {
       if (nextAttributes[name] !== currentAttributes[name]) {

From c0ecf8c5a3df45e9e96597b065d4caaff652c50b Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jaybertoldi@gmail.com>
Date: Tue, 21 Jun 2022 16:24:00 -0300
Subject: [PATCH 082/105] better approach

---
 client/rerender.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/rerender.js b/client/rerender.js
index 247681d4..f67a285b 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -10,7 +10,7 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
   const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
   for (const name of attributeNames) {
     if (name === 'debounce') continue
-    if (name === 'ref' && nextAttributes !== undefined) {
+    if (name === 'ref' && nextAttributes?.ref?.property) {
       reref(nextAttributes, selector)
     } else if (name === 'html') {
       if (nextAttributes[name] !== currentAttributes[name]) {

From a8c7a04398f70fbf228ce614facb01d334337e9d Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jaybertoldi@gmail.com>
Date: Fri, 8 Jul 2022 08:26:15 -0300
Subject: [PATCH 083/105] Fix bindable

Fix bindable when object can be possible undefined, for instance: `bind={user.profile?.age`. Turns the responsibility to the user being easier to identify the error.
---
 plugins/bindable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/bindable.js b/plugins/bindable.js
index 219f9ce5..e0dc0827 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -6,7 +6,7 @@ function match(node) {
 
 function transform({ node, environment }) {
   if (!match(node)) return;
-  const object = node.attributes.bind.object;
+  const object = node.attributes.bind.object ?? {};
   const property = node.attributes.bind.property;
   if (node.type === 'textarea') {
     node.children = [object[property]];
@@ -27,4 +27,4 @@ function transform({ node, environment }) {
   }
 }
 
-export default { transform, client: true, server: true }
\ No newline at end of file
+export default { transform, client: true, server: true }

From 065bb0992bdc4e890445a6cc03e0138f7cb456b0 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 24 Jul 2022 15:24:53 -0300
Subject: [PATCH 084/105] :sparkles: static server functions with context

---
 loaders/register-static-from-server.js |  4 +---
 server/index.js                        | 31 +++++++++++++++++++++-----
 server/invoke.js                       | 10 ---------
 server/reqres.js                       |  2 ++
 server/server.js                       |  3 +++
 tests/package.json                     |  2 +-
 tests/src/ChildComponent.njs           |  8 +++++++
 tests/src/ChildComponent.test.js       | 28 +++++++++++++++++++++--
 tests/src/ParentComponent.njs          |  4 ++--
 tests/src/ServerFunctions.njs          |  8 +++++++
 tests/src/ServerFunctions.test.js      | 12 ++++++++++
 11 files changed, 89 insertions(+), 23 deletions(-)
 delete mode 100644 server/invoke.js
 create mode 100644 server/reqres.js

diff --git a/loaders/register-static-from-server.js b/loaders/register-static-from-server.js
index d3d932dd..e9be0720 100644
--- a/loaders/register-static-from-server.js
+++ b/loaders/register-static-from-server.js
@@ -28,9 +28,6 @@ module.exports = function (source) {
   });
   if (!hasClass) return source;
   let output = source.substring(0, klassEnd);
-  for (const methodName of methodNames) {
-    output += `${methodName} = Nullstack.invoke('${methodName}');\n`
-  }
   output += source.substring(klassEnd);
   for (const methodName of methodNames) {
     output += `\nNullstack.registry["${hash}.${methodName}"] = ${klassName}.${methodName};`
@@ -38,5 +35,6 @@ module.exports = function (source) {
   }
   output += `\nNullstack.registry["${hash}"] = ${klassName};`
   output += `\nNullstack.registry["${legacyHash}"] = ${klassName};`
+  output += `\n${klassName}.bindStaticFunctions(${klassName});`
   return output;
 }
\ No newline at end of file
diff --git a/server/index.js b/server/index.js
index 016c10e3..6d4e7674 100644
--- a/server/index.js
+++ b/server/index.js
@@ -8,13 +8,14 @@ import context from './context';
 import environment from './environment';
 import generator from './generator';
 import instanceProxyHandler from './instanceProxyHandler';
-import invoke from './invoke';
 import project from './project';
 import registry from './registry';
 import secrets from './secrets';
 import server from './server';
 import settings from './settings';
 import worker from './worker';
+import reqres from './reqres'
+import { generateContext } from './context';
 
 globalThis.window = {}
 
@@ -31,10 +32,32 @@ class Nullstack {
 
   static registry = registry;
   static element = element;
-  static invoke = invoke;
   static fragment = fragment;
   static use = useServerPlugins;
 
+  static bindStaticFunctions(klass) {
+    let parent = klass
+    while (parent.name !== 'Nullstack') {
+      const props = Object.getOwnPropertyNames(parent)
+      for (const prop of props) {
+        if (typeof klass[prop] === 'function') {
+          const propName = `__NULLSTACK_${prop}`
+          if (!klass[propName]) {
+            klass[propName] = klass[prop]
+          }
+          async function _invoke(params = {}) {
+            const { request, response } = reqres
+            const context = generateContext({ request, response, ...params });
+            return await klass[propName].call(klass, context);
+          }
+          klass[prop] = _invoke
+          klass.prototype[prop] = _invoke
+        }
+      }
+      parent = Object.getPrototypeOf(parent)
+    }
+  }
+
   static start(Starter) {
     if (this.name.indexOf('Nullstack') > -1) {
       generator.starter = () => element(Starter);
@@ -49,9 +72,7 @@ class Nullstack {
   terminated = false
   key = null
 
-  constructor(scope) {
-    this._request = () => scope.request;
-    this._response = () => scope.response;
+  constructor() {
     const methods = getProxyableMethods(this);
     const proxy = new Proxy(this, instanceProxyHandler);
     for (const method of methods) {
diff --git a/server/invoke.js b/server/invoke.js
deleted file mode 100644
index afbc5848..00000000
--- a/server/invoke.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import {generateContext} from './context';
-
-export default function invoke(name) {
-  return async function _invoke(params = {}) {
-    const request = this._request();
-    const response = this._response();
-    const context = generateContext({request, response, ...params});
-    return await this.constructor[name](context);
-  }
-}
\ No newline at end of file
diff --git a/server/reqres.js b/server/reqres.js
new file mode 100644
index 00000000..1e86fc66
--- /dev/null
+++ b/server/reqres.js
@@ -0,0 +1,2 @@
+const reqres = {}
+export default reqres
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 3f158474..55f23641 100644
--- a/server/server.js
+++ b/server/server.js
@@ -16,6 +16,7 @@ import registry from './registry';
 import generateRobots from './robots';
 import template from './template';
 import { generateServiceWorker } from './worker';
+import reqres from './reqres'
 
 if (!global.fetch) {
   global.fetch = fetch;
@@ -197,6 +198,8 @@ server.start = function () {
     if (request.originalUrl.split('?')[0].indexOf('.') > -1) {
       return next();
     }
+    reqres.request = request
+    reqres.response = response
     const scope = await prerender(request, response);
     if (!response.headersSent) {
       const status = scope.context.page.status;
diff --git a/tests/package.json b/tests/package.json
index e6cbb192..35868dde 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -13,7 +13,7 @@
     "purgecss-webpack-plugin": "^4.1.3"
   },
   "scripts": {
-    "start": "npx nullstack start --input=./tests --port=6969 --env=test --mode=spa --hot",
+    "start": "npx nullstack start --input=./tests --port=6969 --env=test",
     "build": "npx nullstack build --input=./tests --env=test",
     "test": "npm run build && jest",
     "script": "node src/scripts/run.js"
diff --git a/tests/src/ChildComponent.njs b/tests/src/ChildComponent.njs
index 04078cee..8c212b39 100644
--- a/tests/src/ChildComponent.njs
+++ b/tests/src/ChildComponent.njs
@@ -9,11 +9,15 @@ class ChildComponent extends ParentComponent {
   async initiate() {
     this.parentThis = await this.getParentThis();
     this.childThis = await this.getChildThis();
+    this.staticChildThis = await ChildComponent.getChildThis();
+    this.staticParentThis = await ParentComponent.getParentThis();
   }
 
   async hydrate() {
     this.hydratedParentThis = await this.getParentThis();
     this.hydratedChildThis = await this.getChildThis();
+    this.staticHydratedChildThis = await ChildComponent.getChildThis();
+    this.staticHydratedParentThis = await ParentComponent.getParentThis();
     this.bunda = 'true'
   }
 
@@ -25,6 +29,10 @@ class ChildComponent extends ParentComponent {
         <div data-child-this={this.childThis === this.constructor.name} />
         <div data-hydrated-parent-this={this.hydratedParentThis === this.constructor.name} />
         <div data-hydrated-child-this={this.hydratedChildThis === this.constructor.name} />
+        <div data-static-child-this={this.staticChildThis === this.constructor.name} />
+        <div data-static-parent-this={this.staticParentThis === ParentComponent.name} />
+        <div data-static-hydrated-child-this={this.staticHydratedChildThis === this.constructor.name} />
+        <div data-static-hydrated-parent-this={this.staticHydratedParentThis === ParentComponent.name} />
         {this.constructor.name} {this.hydratedParentThis} {String(this.hydratedParentThis === this.constructor.name)}
       </div>
     )
diff --git a/tests/src/ChildComponent.test.js b/tests/src/ChildComponent.test.js
index c9096c42..a54e8c9d 100644
--- a/tests/src/ChildComponent.test.js
+++ b/tests/src/ChildComponent.test.js
@@ -19,7 +19,7 @@ describe('ChildComponent', () => {
     expect(element).toBeTruthy();
   });
 
-  test('inherited server functions are bound to the class ssr' , async () => {
+  test('inherited server functions are bound to the class ssr', async () => {
     const element = await page.$('[data-parent-this]');
     expect(element).toBeTruthy();
   });
@@ -30,10 +30,34 @@ describe('ChildComponent', () => {
     expect(element).toBeTruthy();
   });
 
-  test('inherited server functions are bound to the class spa' , async () => {
+  test('inherited server functions are bound to the class spa', async () => {
     await page.waitForSelector('[data-hydrated-parent-this]');
     const element = await page.$('[data-hydrated-parent-this]');
     expect(element).toBeTruthy();
   });
 
+  test('static inherited server functions are bound to the original class spa', async () => {
+    await page.waitForSelector('[data-static-hydrated-parent-this]');
+    const element = await page.$('[data-static-hydrated-parent-this]');
+    expect(element).toBeTruthy();
+  });
+
+  test('static inherited server functions are bound to the original class ssr', async () => {
+    await page.waitForSelector('[data-static-parent-this]');
+    const element = await page.$('[data-static-parent-this]');
+    expect(element).toBeTruthy();
+  });
+
+  test('static server functions are bound to the class in spa', async () => {
+    await page.waitForSelector('[data-static-hydrated-child-this]');
+    const element = await page.$('[data-static-hydrated-child-this]');
+    expect(element).toBeTruthy();
+  });
+
+  test('static server functions are bound to the class in srs', async () => {
+    await page.waitForSelector('[data-static-child-this]');
+    const element = await page.$('[data-static-child-this]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file
diff --git a/tests/src/ParentComponent.njs b/tests/src/ParentComponent.njs
index 94b6b718..c83a1818 100644
--- a/tests/src/ParentComponent.njs
+++ b/tests/src/ParentComponent.njs
@@ -1,8 +1,8 @@
 import Nullstack from 'nullstack';
 
 class ParentComponent extends Nullstack {
-  
-  static async getParentThis() {
+
+  static async getParentThis(context) {
     return this.name;
   }
 
diff --git a/tests/src/ServerFunctions.njs b/tests/src/ServerFunctions.njs
index c9d391f0..02e84063 100644
--- a/tests/src/ServerFunctions.njs
+++ b/tests/src/ServerFunctions.njs
@@ -63,10 +63,15 @@ class ServerFunctions extends Nullstack {
     return true
   }
 
+  static async getRequestUrl({ request }) {
+    return request.originalUrl.startsWith('/')
+  }
+
   async initiate() {
     this.statement = await this.useNodeFileSystem();
     this.response = await this.useFetchInNode();
     this.doublePlusOneServer = await ServerFunctions.getDoublePlusOne({ number: 34 })
+    this.originalUrl = await ServerFunctions.getRequestUrl()
   }
 
   async hydrate() {
@@ -74,6 +79,7 @@ class ServerFunctions extends Nullstack {
     this.clientOnly = clientOnly();
     this.doublePlusOneClient = await ServerFunctions.getDoublePlusOne({ number: 34 })
     this.acceptsSpecialCharacters = await this.getEncodedString({ string: decodedString })
+    this.hydratedOriginalUrl = await ServerFunctions.getRequestUrl()
   }
 
   render() {
@@ -91,6 +97,8 @@ class ServerFunctions extends Nullstack {
         <div data-double-plus-one-client={this.doublePlusOneClient === 69} />
         <div data-accepts-special-characters={this.acceptsSpecialCharacters} />
         <div data-underline-removed-from-client={this.underlineRemovedFromClient} />
+        <div data-hydrated-original-url={this.hydratedOriginalUrl} />
+        <div data-original-url={this.originalUrl} />
       </div>
     )
   }
diff --git a/tests/src/ServerFunctions.test.js b/tests/src/ServerFunctions.test.js
index 14608f57..85e0a38f 100644
--- a/tests/src/ServerFunctions.test.js
+++ b/tests/src/ServerFunctions.test.js
@@ -66,4 +66,16 @@ describe('ServerFunctions', () => {
     expect(element).toBeTruthy();
   });
 
+  test('static server functions receive the context on spa', async () => {
+    await page.waitForSelector('[data-hydrated-original-url]');
+    const element = await page.$('[data-hydrated-original-url]');
+    expect(element).toBeTruthy();
+  });
+
+  test('static server functions receive the context on ssr', async () => {
+    await page.waitForSelector('[data-original-url]');
+    const element = await page.$('[data-original-url]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file

From c75907681481a612a8959e3f1aa36f8b96930f34 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 24 Jul 2022 16:26:54 -0300
Subject: [PATCH 085/105] :wrench: webpack dependency

---
 tests/package.json | 2 +-
 webpack.config.js  | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/tests/package.json b/tests/package.json
index 35868dde..e6cbb192 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -13,7 +13,7 @@
     "purgecss-webpack-plugin": "^4.1.3"
   },
   "scripts": {
-    "start": "npx nullstack start --input=./tests --port=6969 --env=test",
+    "start": "npx nullstack start --input=./tests --port=6969 --env=test --mode=spa --hot",
     "build": "npx nullstack build --input=./tests --env=test",
     "test": "npm run build && jest",
     "script": "node src/scripts/run.js"
diff --git a/webpack.config.js b/webpack.config.js
index 7114e647..925396a9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -117,6 +117,7 @@ function server(env, argv) {
   const minimize = !isDev;
   const plugins = []
   return {
+    name: 'server',
     mode: argv.environment,
     entry: './server.js',
     output: {
@@ -240,6 +241,8 @@ function client(env, argv) {
     plugins.push(new HotModuleReplacementPlugin())
   }
   return {
+    name: 'client',
+    dependencies: ['server'],
     infrastructureLogging: {
       level: 'none',
     },

From 2d26346ea174251ad87201149fb1990a7a67ca61 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 24 Jul 2022 17:18:59 -0300
Subject: [PATCH 086/105] :white_check_mark: tests for nested undeclared bind

---
 tests/src/TwoWayBindings.njs     | 1 +
 tests/src/TwoWayBindings.test.js | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index 161e447b..b95e60f0 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -84,6 +84,7 @@ class TwoWayBindings extends Nullstack {
         <button onclick={{ boolean: false }} data-checkbox>boolean false</button>
         <input bind={this.object.count} name="count" />
         <input bind={this.undeclared} name="undeclared" data-undeclared />
+        <input bind={this.undeclared?.nested} name="undeclared-nested" data-undeclared-nested />
         <input bind={this[this.keyName]} name="composedComputed" />
         <input bind={this[['by', 'Key', 'Name'].join('')]} name="logicalComputed" />
         <input bind={this['byKeyName']} name="literalComputed" />
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index a405aad0..d46091d8 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -211,4 +211,9 @@ describe('TwoWayBindings', () => {
     expect(element).toBeTruthy();
   });
 
+  test('binding to nested undefined sets the value to an empty string', async () => {
+    const value = await page.$eval('[data-undeclared-nested]', (element) => element.value);
+    expect(value).toMatch('');
+  });
+
 });
\ No newline at end of file

From 9e88bcb9226a596cafec9061c9d56df9fea88697 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 30 Jul 2022 13:40:38 -0300
Subject: [PATCH 087/105] :construction: improved webpack servers

---
 client/index.js   |  15 ++++--
 package.json      |   1 +
 scripts/index.js  | 120 +++++++++++++++++++++++-----------------------
 server/server.js  |  12 +++--
 webpack.config.js |  13 +++--
 5 files changed, 89 insertions(+), 72 deletions(-)

diff --git a/client/index.js b/client/index.js
index 249da95e..d4e4e6fe 100644
--- a/client/index.js
+++ b/client/index.js
@@ -109,9 +109,18 @@ export default class Nullstack {
 
 if (module.hot) {
   const socket = new WebSocket('ws' + window.location.origin.slice(4) + '/ws');
-  socket.onmessage = function (e) {
-    if (e.data.indexOf('still-ok') > -1) {
-      window.location.reload()
+  window.lastHash
+  socket.onmessage = async function (e) {
+    const data = JSON.parse(e.data)
+    if (data.type === 'NULLSTACK_SERVER_STARTED') {
+      window.needsReload && window.location.reload()
+    } else if (data.type === 'hash') {
+      const newHash = data.data.slice(20)
+      if (newHash === window.lastHash) {
+        window.needsReload = true
+      } else {
+        window.lastHash = newHash
+      }
     }
   };
   Nullstack.updateInstancesPrototypes = function updateInstancesPrototypes(hash, klass) {
diff --git a/package.json b/package.json
index 41bb60ca..0357da06 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "fs-extra": "10.1.0",
     "mini-css-extract-plugin": "2.6.0",
     "node-fetch": "2.6.7",
+    "nodemon-webpack-plugin": "^4.8.1",
     "sass": "1.51.0",
     "sass-loader": "8.0.2",
     "swc-loader": "0.2.1",
diff --git a/scripts/index.js b/scripts/index.js
index 119ef188..e8222904 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -21,74 +21,76 @@ function getServerCompiler(options) {
   return webpack(getConfig(options)[0])
 }
 
-function getClientCompiler(options) {
-  return webpack(getConfig(options)[1])
-}
-
-async function start({ input, port, env, mode = 'ssr', hot }) {
-  const environment = 'development';
-  const serverCompiler = getServerCompiler({ environment, input });
-  let clientStarted = false
+function loadEnv(env) {
   let envPath = '.env'
   if (env) {
     envPath += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
   }
   dotenv.config({ path: envPath })
-  if (!port) {
-    port = process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
-  }
-  process.env['NULLSTACK_ENVIRONMENT_MODE'] = mode
-  console.log(` 🚀️ Starting your application in ${environment} mode...`);
-  const WebpackDevServer = require('webpack-dev-server');
+}
+
+function getFreePorts() {
+  return new Promise((resolve, reject) => {
+    const app1 = require('express')();
+    const app2 = require('express')();
+    const server1 = app1.listen(0, () => {
+      const server2 = app2.listen(0, () => {
+        const ports = [
+          server1.address().port,
+          server2.address().port
+        ]
+        server1.close()
+        server2.close()
+        resolve(ports)
+      });
+    });
+  })
+}
+
+function getPort(port) {
+  return port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
+}
+
+async function start({ input, port, env, mode = 'spa', hot }) {
+  loadEnv(env)
   const { setLogLevel } = require('webpack/hot/log')
+  const WebpackDevServer = require('webpack-dev-server');
   setLogLevel('none')
+  process.env['NULLSTACK_ENVIRONMENT_MODE'] = mode
+  process.env['NULLSTACK_SERVER_PORT'] = getPort(port)
+  const ports = await getFreePorts()
+  process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[0]
+  process.env['NULSTACK_SERVER_SOCKET_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[1]
+  const devServerOptions = {
+    hot: !!hot,
+    open: false,
+    devMiddleware: {
+      index: false
+    },
+    client: {
+      overlay: { errors: true, warnings: false },
+      logging: 'none',
+      progress: false,
+    },
+    proxy: {
+      context: () => true,
+      target: `http://localhost:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`
+    },
+    webSocketServer: require.resolve('./socket'),
+    port: process.env['NULLSTACK_SERVER_PORT']
+  };
+  const environment = 'development'
+  const clientCompiler = getCompiler({ environment, input });
+  const server = new WebpackDevServer(devServerOptions, clientCompiler);
+  const serverCompiler = getServerCompiler({ environment, input });
+  let once = false
   serverCompiler.watch({}, (error, stats) => {
-    if (stats.hasErrors()) {
-      console.log(`\n 💥️ There is an error preventing compilation`);
-    } else {
-      console.log('\x1b[36m%s\x1b[0m', `\n ✅️ Your application is ready at http://localhost:${port}\n`);
-    }
-    const bundlePath = path.resolve(process.cwd(), '.development/server.js')
-    delete require.cache[require.resolve(bundlePath)]
-    if (!clientStarted) {
-      clientStarted = true
-      const devServerOptions = {
-        hot: !!hot,
-        open: false,
-        devMiddleware: {
-          index: false
-        },
-        client: {
-          overlay: true,
-          logging: 'none',
-          progress: false,
-        },
-        setupMiddlewares: (middlewares, devServer) => {
-          if (!devServer) {
-            throw new Error('webpack-dev-server is not defined');
-          }
-          middlewares.unshift((req, res, next) => {
-            if (req.originalUrl.indexOf('.hot-update.') === -1) {
-              if (req.originalUrl.startsWith('/nullstack/')) {
-                console.log(`  ⚙️ [${req.method}] ${req.originalUrl}`)
-              } else {
-                console.log(`  🕸️ [${req.method}] ${req.originalUrl}`)
-              }
-            }
-            const serverBundle = require(bundlePath)
-            const server = serverBundle.default.server
-            server.less = true
-            server.port = port
-            server.start()
-            server(req, res, next)
-          });
-          return middlewares;
-        },
-        port
-      };
-      const clientCompiler = getClientCompiler({ environment, input });
-      const server = new WebpackDevServer(devServerOptions, clientCompiler);
+    if (!once) {
       server.start();
+      once = true
+    }
+    if (stats.hasErrors()) {
+      console.log(stats.toString({ colors: true }))
     }
   });
 }
diff --git a/server/server.js b/server/server.js
index 55f23641..903a3547 100644
--- a/server/server.js
+++ b/server/server.js
@@ -11,12 +11,12 @@ import { generateFile } from './files';
 import generateManifest from './manifest';
 import { prerender } from './prerender';
 import printError from './printError';
-import project from './project';
 import registry from './registry';
 import generateRobots from './robots';
 import template from './template';
 import { generateServiceWorker } from './worker';
 import reqres from './reqres'
+import WebSocket from 'ws';
 
 if (!global.fetch) {
   global.fetch = fetch;
@@ -24,7 +24,7 @@ if (!global.fetch) {
 
 const server = express();
 
-server.port ??= process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
+server.port = process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
 
 let contextStarted = false
 let serverStarted = false
@@ -215,9 +215,11 @@ server.start = function () {
     }
 
     server.listen(server.port, () => {
-      if (environment.production) {
-        const name = project.name ? project.name : 'Nullstack'
-        console.log('\x1b[36m%s\x1b[0m', ` ✅️ ${name} is ready at http://127.0.0.1:${server.port}\n`);
+      if (environment.development) {
+        const socket = new WebSocket(`ws://localhost:${process.env['NULLSTACK_SERVER_PORT']}/ws`);
+        socket.onopen = async function (e) {
+          socket.send('{"type":"NULLSTACK_SERVER_STARTED"}')
+        }
       }
     });
   }
diff --git a/webpack.config.js b/webpack.config.js
index 925396a9..67abb2cc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
 const crypto = require("crypto");
 const { readdirSync } = require('fs');
-const { HotModuleReplacementPlugin } = require('webpack')
+const NodemonPlugin = require('nodemon-webpack-plugin');
 
 const buildKey = crypto.randomBytes(20).toString('hex');
 
@@ -117,7 +117,6 @@ function server(env, argv) {
   const minimize = !isDev;
   const plugins = []
   return {
-    name: 'server',
     mode: argv.environment,
     entry: './server.js',
     output: {
@@ -238,11 +237,15 @@ function client(env, argv) {
     })
   ]
   if (isDev) {
-    plugins.push(new HotModuleReplacementPlugin())
+    plugins.push(new NodemonPlugin({
+      ext: '*',
+      watch: [".env", ".env.*", './.development/*.*'],
+      script: './.development/server.js',
+      nodeArgs: ['--enable-source-maps'],
+      quiet: true
+    }))
   }
   return {
-    name: 'client',
-    dependencies: ['server'],
     infrastructureLogging: {
       level: 'none',
     },

From 77de101e969e5e7e4695b06fde76f1f2e706eedf Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 30 Jul 2022 17:01:57 -0300
Subject: [PATCH 088/105] :zap: improved dev server

---
 scripts/index.js  | 32 ++++++++++++++++++----
 scripts/socket.js | 70 +++++++++++++++++++++++++++++++++++++++++++++++
 webpack.config.js | 13 +++++++--
 3 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 scripts/socket.js

diff --git a/scripts/index.js b/scripts/index.js
index e8222904..3be6a5b2 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -52,10 +52,14 @@ function getPort(port) {
 }
 
 async function start({ input, port, env, mode = 'spa', hot }) {
+  const environment = 'development'
+  console.log(` 🚀️ Starting your application in ${environment} mode...`);
   loadEnv(env)
-  const { setLogLevel } = require('webpack/hot/log')
   const WebpackDevServer = require('webpack-dev-server');
-  setLogLevel('none')
+  const { setLogLevel: setClientLogLevel } = require('webpack/hot/log')
+  setClientLogLevel('none')
+  // const { setLogLevel: setServerLogLevel } = require('webpack-dev-server/client/utils/log')
+  // setServerLogLevel('none')
   process.env['NULLSTACK_ENVIRONMENT_MODE'] = mode
   process.env['NULLSTACK_SERVER_PORT'] = getPort(port)
   const ports = await getFreePorts()
@@ -65,7 +69,8 @@ async function start({ input, port, env, mode = 'spa', hot }) {
     hot: !!hot,
     open: false,
     devMiddleware: {
-      index: false
+      index: false,
+      stats: 'none'
     },
     client: {
       overlay: { errors: true, warnings: false },
@@ -76,17 +81,34 @@ async function start({ input, port, env, mode = 'spa', hot }) {
       context: () => true,
       target: `http://localhost:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`
     },
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
+      }
+      middlewares.unshift((req, res, next) => {
+        if (req.originalUrl.indexOf('.hot-update.') === -1) {
+          if (req.originalUrl.startsWith('/nullstack/')) {
+            console.log(`  ⚙️ [${req.method}] ${req.originalUrl}`)
+          } else {
+            console.log(`  🕸️ [${req.method}] ${req.originalUrl}`)
+          }
+        }
+        next()
+      });
+      return middlewares;
+    },
     webSocketServer: require.resolve('./socket'),
     port: process.env['NULLSTACK_SERVER_PORT']
   };
-  const environment = 'development'
   const clientCompiler = getCompiler({ environment, input });
   const server = new WebpackDevServer(devServerOptions, clientCompiler);
   const serverCompiler = getServerCompiler({ environment, input });
   let once = false
   serverCompiler.watch({}, (error, stats) => {
     if (!once) {
-      server.start();
+      server.startCallback(() => {
+        console.log('\x1b[36m%s\x1b[0m', ` ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
+      });
       once = true
     }
     if (stats.hasErrors()) {
diff --git a/scripts/socket.js b/scripts/socket.js
new file mode 100644
index 00000000..b1960028
--- /dev/null
+++ b/scripts/socket.js
@@ -0,0 +1,70 @@
+"use strict";
+
+const WebSocket = require("ws");
+const BaseServer = require("webpack-dev-server/lib/servers/BaseServer");
+
+module.exports = class WebsocketServer extends BaseServer {
+  constructor(server) {
+    super(server);
+
+    const options = {
+      ...(this.server.options.webSocketServer).options,
+      clientTracking: false,
+      port: process.env['NULSTACK_SERVER_SOCKET_PORT_YOU_SHOULD_NOT_CARE_ABOUT']
+    };
+
+    this.implementation = new WebSocket.Server(options);
+
+    this.server.server.on("upgrade", (req, sock, head) => {
+      if (!this.implementation.shouldHandle(req)) {
+        return;
+      }
+      this.implementation.handleUpgrade(req, sock, head, (connection) => {
+        this.implementation.emit("connection", connection, req);
+      });
+    });
+
+    this.implementation.on("error", (err) => {
+      this.server.logger.error(err.message);
+    });
+
+    const interval = setInterval(() => {
+      this.clients.forEach((client) => {
+        if (client.isAlive === false) {
+          client.terminate();
+
+          return;
+        }
+
+        client.isAlive = false;
+        client.ping(() => { });
+      });
+    }, 1000);
+
+    this.implementation.on("connection", (client) => {
+      this.clients.push(client);
+
+      client.isAlive = true;
+
+      client.on("message", (data) => {
+        if (data === '{"type":"NULLSTACK_SERVER_STARTED"}') {
+          this.clients.forEach((client) => {
+            client.send('{"type":"NULLSTACK_SERVER_STARTED"}')
+          });
+        }
+      })
+
+      client.on("pong", () => {
+        client.isAlive = true;
+      });
+
+      client.on("close", () => {
+        this.clients.splice(this.clients.indexOf(client), 1);
+      });
+    });
+
+    this.implementation.on("close", () => {
+      clearInterval(interval);
+    });
+  }
+};
diff --git a/webpack.config.js b/webpack.config.js
index 67abb2cc..bc75876c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,12 @@ const NodemonPlugin = require('nodemon-webpack-plugin');
 
 const buildKey = crypto.randomBytes(20).toString('hex');
 
+customConsole = new Proxy({}, {
+  get() {
+    return () => { }
+  }
+})
+
 function getLoader(loader) {
   const loaders = path.resolve('./node_modules/nullstack/loaders');
   return path.join(loaders, loader);
@@ -118,6 +124,9 @@ function server(env, argv) {
   const plugins = []
   return {
     mode: argv.environment,
+    infrastructureLogging: {
+      console: customConsole,
+    },
     entry: './server.js',
     output: {
       path: path.join(dir, folder),
@@ -234,7 +243,7 @@ function client(env, argv) {
     new MiniCssExtractPlugin({
       filename: "client.css",
       chunkFilename: '[chunkhash].client.css'
-    })
+    }),
   ]
   if (isDev) {
     plugins.push(new NodemonPlugin({
@@ -247,7 +256,7 @@ function client(env, argv) {
   }
   return {
     infrastructureLogging: {
-      level: 'none',
+      console: customConsole,
     },
     mode: argv.environment,
     entry: './client.js',

From ae9d11b38a6d1d1c30757b51262a110a3a34a460 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 31 Jul 2022 14:56:37 -0300
Subject: [PATCH 089/105] :zap: fast ssr reload

---
 client/index.js       | 2 +-
 scripts/index.js      | 9 ++++-----
 server/environment.js | 3 +--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/index.js b/client/index.js
index d4e4e6fe..542907e3 100644
--- a/client/index.js
+++ b/client/index.js
@@ -113,7 +113,7 @@ if (module.hot) {
   socket.onmessage = async function (e) {
     const data = JSON.parse(e.data)
     if (data.type === 'NULLSTACK_SERVER_STARTED') {
-      window.needsReload && window.location.reload()
+      (window.needsReload || !environment.hot) && window.location.reload()
     } else if (data.type === 'hash') {
       const newHash = data.data.slice(20)
       if (newHash === window.lastHash) {
diff --git a/scripts/index.js b/scripts/index.js
index 3be6a5b2..9b13c957 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -56,17 +56,16 @@ async function start({ input, port, env, mode = 'spa', hot }) {
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
   loadEnv(env)
   const WebpackDevServer = require('webpack-dev-server');
-  const { setLogLevel: setClientLogLevel } = require('webpack/hot/log')
-  setClientLogLevel('none')
-  // const { setLogLevel: setServerLogLevel } = require('webpack-dev-server/client/utils/log')
-  // setServerLogLevel('none')
+  const { setLogLevel } = require('webpack/hot/log')
+  setLogLevel('none')
   process.env['NULLSTACK_ENVIRONMENT_MODE'] = mode
   process.env['NULLSTACK_SERVER_PORT'] = getPort(port)
   const ports = await getFreePorts()
   process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[0]
   process.env['NULSTACK_SERVER_SOCKET_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[1]
+  process.env['NULLSTACK_ENVIRONMENT_HOT'] = (!!hot).toString()
   const devServerOptions = {
-    hot: !!hot,
+    hot: 'only',
     open: false,
     devMiddleware: {
       index: false,
diff --git a/server/environment.js b/server/environment.js
index 005dcb23..1345ea2f 100644
--- a/server/environment.js
+++ b/server/environment.js
@@ -1,5 +1,3 @@
-//import files from './files';
-
 const environment = { client: false, server: true };
 
 environment.development = __dirname.indexOf('.development') > -1;
@@ -10,6 +8,7 @@ environment.mode = process.env.NULLSTACK_ENVIRONMENT_MODE || 'ssr';
 environment.key = "{{NULLSTACK_ENVIRONMENT_KEY}}"
 
 environment.name = process.env.NULLSTACK_ENVIRONMENT_NAME || '';
+environment.hot = process.env.NULLSTACK_ENVIRONMENT_HOT === 'true'
 
 Object.freeze(environment);
 

From f753e93d46a9d27c31f12f71cfa088a0f58199b0 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 2 Aug 2022 01:25:10 -0300
Subject: [PATCH 090/105] :bug: fix static scopes

---
 loaders/register-static-from-server.js |  1 +
 scripts/index.js                       |  5 ++++-
 server/index.js                        | 12 ++++++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/loaders/register-static-from-server.js b/loaders/register-static-from-server.js
index e9be0720..c299c3c5 100644
--- a/loaders/register-static-from-server.js
+++ b/loaders/register-static-from-server.js
@@ -35,6 +35,7 @@ module.exports = function (source) {
   }
   output += `\nNullstack.registry["${hash}"] = ${klassName};`
   output += `\nNullstack.registry["${legacyHash}"] = ${klassName};`
+  output += `\n${klassName}.hash = "${hash}";`
   output += `\n${klassName}.bindStaticFunctions(${klassName});`
   return output;
 }
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index 9b13c957..77c8afdc 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -75,10 +75,13 @@ async function start({ input, port, env, mode = 'spa', hot }) {
       overlay: { errors: true, warnings: false },
       logging: 'none',
       progress: false,
+      reconnect: true
     },
     proxy: {
       context: () => true,
-      target: `http://localhost:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`
+      target: `http://localhost:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`,
+      proxyTimeout: 10 * 60 * 1000,
+      timeout: 10 * 60 * 1000,
     },
     setupMiddlewares: (middlewares, devServer) => {
       if (!devServer) {
diff --git a/server/index.js b/server/index.js
index 6d4e7674..87743ad0 100644
--- a/server/index.js
+++ b/server/index.js
@@ -40,15 +40,23 @@ class Nullstack {
     while (parent.name !== 'Nullstack') {
       const props = Object.getOwnPropertyNames(parent)
       for (const prop of props) {
+        const underscored = prop.startsWith('_')
         if (typeof klass[prop] === 'function') {
+          if (!underscored && !registry[`${parent.hash}.${prop}`]) {
+            return
+          }
           const propName = `__NULLSTACK_${prop}`
           if (!klass[propName]) {
             klass[propName] = klass[prop]
           }
-          async function _invoke(params = {}) {
+          function _invoke(...args) {
+            if (underscored) {
+              return klass[propName].call(klass, ...args);
+            }
+            const params = args[0] || {}
             const { request, response } = reqres
             const context = generateContext({ request, response, ...params });
-            return await klass[propName].call(klass, context);
+            return klass[propName].call(klass, context);
           }
           klass[prop] = _invoke
           klass.prototype[prop] = _invoke

From 2916fd4fb52601571ce76c4f304967fc4d14af56 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 8 Aug 2022 23:04:04 -0300
Subject: [PATCH 091/105] :construction: extension mode

---
 client/index.js                   |  2 +-
 client/router.js                  |  2 +-
 package.json                      |  5 +++--
 scripts/index.js                  | 34 +++++++++++++------------------
 server/environment.js             |  5 ++++-
 server/project.js                 | 15 +++++++++++---
 server/server.js                  | 13 +++++++++++-
 tests/package.json                |  2 +-
 tests/src/ServerFunctions.njs     |  2 +-
 tests/src/ServerFunctions.test.js | 12 +++++++----
 webpack.config.js                 | 20 ++++++++++++------
 11 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/client/index.js b/client/index.js
index 542907e3..1f4862b3 100644
--- a/client/index.js
+++ b/client/index.js
@@ -108,7 +108,7 @@ export default class Nullstack {
 }
 
 if (module.hot) {
-  const socket = new WebSocket('ws' + window.location.origin.slice(4) + '/ws');
+  const socket = new WebSocket('ws' + router.base.slice(4) + '/ws');
   window.lastHash
   socket.onmessage = async function (e) {
     const data = JSON.parse(e.data)
diff --git a/client/router.js b/client/router.js
index b9f5a82b..28e2415d 100644
--- a/client/router.js
+++ b/client/router.js
@@ -90,7 +90,7 @@ class Router {
 
   get base() {
     if (this._base) return this._base
-    this._base = window.location.origin
+    this._base = new URL(document.querySelector('[rel="canonical"]').href).origin
     return this._base
   }
 
diff --git a/package.json b/package.json
index 0357da06..f1006209 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,12 @@
   },
   "types": "./types/index.d.ts",
   "dependencies": {
-    "@swc/core": "1.2.179",
     "@babel/parser": "7.17.12",
     "@babel/traverse": "7.17.12",
+    "@swc/core": "1.2.179",
     "body-parser": "1.20.0",
     "commander": "8.3.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cors": "2.8.5",
     "css-loader": "6.7.1",
     "dotenv": "8.6.0",
@@ -33,4 +34,4 @@
     "webpack-dev-server": "4.9.0",
     "ws": "7.5.7"
   }
-}
\ No newline at end of file
+}
diff --git a/scripts/index.js b/scripts/index.js
index 77c8afdc..66bbc597 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -17,10 +17,6 @@ function getCompiler(options) {
   return webpack(getConfig(options))
 }
 
-function getServerCompiler(options) {
-  return webpack(getConfig(options)[0])
-}
-
 function loadEnv(env) {
   let envPath = '.env'
   if (env) {
@@ -64,22 +60,27 @@ async function start({ input, port, env, mode = 'spa', hot }) {
   process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[0]
   process.env['NULSTACK_SERVER_SOCKET_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[1]
   process.env['NULLSTACK_ENVIRONMENT_HOT'] = (!!hot).toString()
+  process.env['NULLSTACK_PROJECT_DOMAIN'] ??= 'localhost'
+  process.env['NULLSTACK_WORKER_PROTOCOL'] ??= 'http'
   const devServerOptions = {
     hot: 'only',
     open: false,
+    host: process.env['NULLSTACK_PROJECT_DOMAIN'],
     devMiddleware: {
       index: false,
-      stats: 'none'
+      stats: 'none',
+      writeToDisk: true,
     },
     client: {
       overlay: { errors: true, warnings: false },
       logging: 'none',
       progress: false,
-      reconnect: true
+      reconnect: true,
+      webSocketURL: `${process.env['NULLSTACK_WORKER_PROTOCOL'].replace('http', 'ws')}://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULLSTACK_SERVER_PORT']}/ws`
     },
     proxy: {
       context: () => true,
-      target: `http://localhost:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`,
+      target: `${process.env['NULLSTACK_WORKER_PROTOCOL']}://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`,
       proxyTimeout: 10 * 60 * 1000,
       timeout: 10 * 60 * 1000,
     },
@@ -104,19 +105,13 @@ async function start({ input, port, env, mode = 'spa', hot }) {
   };
   const clientCompiler = getCompiler({ environment, input });
   const server = new WebpackDevServer(devServerOptions, clientCompiler);
-  const serverCompiler = getServerCompiler({ environment, input });
   let once = false
-  serverCompiler.watch({}, (error, stats) => {
-    if (!once) {
-      server.startCallback(() => {
-        console.log('\x1b[36m%s\x1b[0m', ` ✅️ Your application is ready at http://localhost:${process.env['NULLSTACK_SERVER_PORT']}\n`);
-      });
-      once = true
-    }
-    if (stats.hasErrors()) {
-      console.log(stats.toString({ colors: true }))
-    }
-  });
+  if (!once) {
+    server.startCallback(() => {
+      console.log('\x1b[36m%s\x1b[0m', ` ✅️ Your application is ready at http://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULLSTACK_SERVER_PORT']}\n`);
+    });
+    once = true
+  }
 }
 
 function build({ input, output, cache, env, mode = 'ssr' }) {
@@ -143,7 +138,6 @@ program
   .addOption(new program.Option('-m, --mode <mode>', 'Build production bundles').choices(['ssr', 'spa']))
   .option('-p, --port <port>', 'Port number to run the server')
   .option('-i, --input <input>', 'Path to project that will be started')
-  .option('-o, --output <output>', 'Path to build output folder')
   .option('-e, --env <name>', 'Name of the environment file that should be loaded')
   .option('--hot', 'Enable hot module replacement')
   .helpOption('-h, --help', 'Learn more about this command')
diff --git a/server/environment.js b/server/environment.js
index 1345ea2f..7f74e2b4 100644
--- a/server/environment.js
+++ b/server/environment.js
@@ -8,7 +8,10 @@ environment.mode = process.env.NULLSTACK_ENVIRONMENT_MODE || 'ssr';
 environment.key = "{{NULLSTACK_ENVIRONMENT_KEY}}"
 
 environment.name = process.env.NULLSTACK_ENVIRONMENT_NAME || '';
-environment.hot = process.env.NULLSTACK_ENVIRONMENT_HOT === 'true'
+
+if (environment.development) {
+  environment.hot = process.env.NULLSTACK_ENVIRONMENT_HOT === 'true'
+}
 
 Object.freeze(environment);
 
diff --git a/server/project.js b/server/project.js
index 27d4e693..83915cbf 100644
--- a/server/project.js
+++ b/server/project.js
@@ -1,6 +1,6 @@
 import environment from './environment';
 import worker from './worker';
-import server from './server';
+import reqres from './reqres';
 
 const project = {};
 
@@ -19,9 +19,18 @@ project.favicon = '/favicon-96x96.png';
 project.disallow = [];
 project.icons = JSON.parse(`{{NULLSTACK_PROJECT_ICONS}}`);
 
+function getHost() {
+  if (reqres.request?.headers?.host) {
+    return reqres.request.headers.host
+  }
+  if (project.domain === 'localhost') {
+    return `localhost:${process.env['NULLSTACK_SERVER_PORT']}`
+  }
+  return project.domain
+}
+
 export function generateBase() {
-  const port = project.domain === 'localhost' ? `:${server.port}` : '';
-  return `${worker.protocol}://${project.domain}${port}`;
+  return `${worker.protocol}://${getHost()}`;
 }
 
 export default project;
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 903a3547..cee880dc 100644
--- a/server/server.js
+++ b/server/server.js
@@ -17,6 +17,7 @@ import template from './template';
 import { generateServiceWorker } from './worker';
 import reqres from './reqres'
 import WebSocket from 'ws';
+import { writeFileSync } from 'fs'
 
 if (!global.fetch) {
   global.fetch = fetch;
@@ -204,7 +205,12 @@ server.start = function () {
     if (!response.headersSent) {
       const status = scope.context.page.status;
       const html = template(scope);
+      reqres.request = null
+      reqres.response = null
       response.status(status).send(html);
+    } else {
+      reqres.request = null
+      reqres.response = null
     }
   });
 
@@ -214,12 +220,17 @@ server.start = function () {
       process.exit();
     }
 
-    server.listen(server.port, () => {
+    server.listen(server.port, async () => {
       if (environment.development) {
+        const content = await server.prerender('/');
+        const target = process.cwd() + `/.development/index.html`
+        writeFileSync(target, content)
         const socket = new WebSocket(`ws://localhost:${process.env['NULLSTACK_SERVER_PORT']}/ws`);
         socket.onopen = async function (e) {
           socket.send('{"type":"NULLSTACK_SERVER_STARTED"}')
         }
+      } else {
+        console.log('\x1b[36m%s\x1b[0m', ` ✅️ Your application is ready at http://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULLSTACK_SERVER_PORT']}\n`);
       }
     });
   }
diff --git a/tests/package.json b/tests/package.json
index e6cbb192..422014c6 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -15,7 +15,7 @@
   "scripts": {
     "start": "npx nullstack start --input=./tests --port=6969 --env=test --mode=spa --hot",
     "build": "npx nullstack build --input=./tests --env=test",
-    "test": "npm run build && jest",
+    "test": "npm run build && jest --runInBand",
     "script": "node src/scripts/run.js"
   }
 }
\ No newline at end of file
diff --git a/tests/src/ServerFunctions.njs b/tests/src/ServerFunctions.njs
index 02e84063..325817a5 100644
--- a/tests/src/ServerFunctions.njs
+++ b/tests/src/ServerFunctions.njs
@@ -84,7 +84,7 @@ class ServerFunctions extends Nullstack {
 
   render() {
     return (
-      <div>
+      <div data-hydrated={this.hydrated}>
         <button class="set-count-to-one" onclick={this.setCountToOne}>1</button>
         <button class="set-count-to-two" onclick={this.setCountToTwo}>2</button>
         <button class="set-date" onclick={this.setDate}>1992</button>
diff --git a/tests/src/ServerFunctions.test.js b/tests/src/ServerFunctions.test.js
index 85e0a38f..4e40f30c 100644
--- a/tests/src/ServerFunctions.test.js
+++ b/tests/src/ServerFunctions.test.js
@@ -1,10 +1,12 @@
-beforeAll(async () => {
-  await page.goto('http://localhost:6969/server-functions');
-});
-
 describe('ServerFunctions', () => {
 
+  beforeEach(async () => {
+    await page.goto('http://localhost:6969/server-functions');
+  });
+
+
   test('instance can use returned values', async () => {
+    await page.waitForSelector('[data-hydrated]')
     await page.click('.set-count-to-one');
     await page.waitForSelector('[data-count="1"]');
     const element = await page.$('[data-count="1"]');
@@ -12,6 +14,7 @@ describe('ServerFunctions', () => {
   });
 
   test('server functions accept an object as argument', async () => {
+    await page.waitForSelector('[data-hydrated]')
     await page.click('.set-count-to-two');
     await page.waitForSelector('[data-count="2"]');
     const element = await page.$('[data-count="2"]');
@@ -19,6 +22,7 @@ describe('ServerFunctions', () => {
   });
 
   test('server functions serialize and deserialize dates', async () => {
+    await page.waitForSelector('[data-hydrated]')
     await page.click('.set-date');
     await page.waitForSelector('[data-year="1992"]');
     const element = await page.$('[data-year="1992"]');
diff --git a/webpack.config.js b/webpack.config.js
index bc75876c..55a90dbf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,6 +4,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const crypto = require("crypto");
 const { readdirSync } = require('fs');
 const NodemonPlugin = require('nodemon-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
 
 const buildKey = crypto.randomBytes(20).toString('hex');
 
@@ -122,6 +123,15 @@ function server(env, argv) {
   const devtool = isDev ? 'inline-cheap-module-source-map' : false;
   const minimize = !isDev;
   const plugins = []
+  if (isDev) {
+    plugins.push(new NodemonPlugin({
+      ext: '*',
+      watch: [".env", ".env.*", './.development/server.js'],
+      script: './.development/server.js',
+      nodeArgs: ['--enable-source-maps'],
+      quiet: true
+    }))
+  }
   return {
     mode: argv.environment,
     infrastructureLogging: {
@@ -246,12 +256,10 @@ function client(env, argv) {
     }),
   ]
   if (isDev) {
-    plugins.push(new NodemonPlugin({
-      ext: '*',
-      watch: [".env", ".env.*", './.development/*.*'],
-      script: './.development/server.js',
-      nodeArgs: ['--enable-source-maps'],
-      quiet: true
+    plugins.push(new CopyPlugin({
+      patterns: [
+        { from: "public", to: "../.development" },
+      ]
     }))
   }
   return {

From b96c6f413f5ece4dccdf2a30054ec299ca004e30 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Mon, 8 Aug 2022 23:35:56 -0300
Subject: [PATCH 092/105] :white_check_mark: tests

---
 client/ref.js             |  2 +-
 tests/src/Context.njs     | 47 ++++++++++++++++++++++++++++++++-------
 tests/src/Context.test.js | 36 ++++++++++++++++++++++++++++++
 tests/src/Refs.njs        |  5 +++--
 tests/src/Refs.test.js    |  7 ++++++
 5 files changed, 86 insertions(+), 11 deletions(-)

diff --git a/client/ref.js b/client/ref.js
index a9d2b829..5cb9775f 100644
--- a/client/ref.js
+++ b/client/ref.js
@@ -5,7 +5,7 @@ function setup(attributes, element) {
   const property = attributes.ref.property
   if (typeof object[property] === 'function') {
     setTimeout(() => {
-      object[property]({ element })
+      object[property]({ ...attributes, element })
     }, 0)
   } else {
     object[property] = element
diff --git a/tests/src/Context.njs b/tests/src/Context.njs
index f22e0964..ca5947a7 100644
--- a/tests/src/Context.njs
+++ b/tests/src/Context.njs
@@ -8,26 +8,57 @@ class Context extends Nullstack {
     context.framework = 'Nullstack';
   }
 
-  static async getContextKey({framework}) {
+  static async getContextKey({ framework }) {
     return framework;
   }
 
+  static staticFunction(context) {
+    return context === undefined
+  }
+
+  static _staticUnderlineFunction(context) {
+    return context === undefined
+  }
+
+  static async _staticAsyncUnderlineFunction(context) {
+    return context === undefined
+  }
+
+  static async invokeStaticAsyncUnderlineFunction() {
+    return await this._staticAsyncUnderlineFunction()
+  }
+
   async initiate(context) {
     await this.setContextKey();
     context.framework = await this.getContextKey();
     this.setFrameworkInitial();
+    this.staticFunctionHasNoContext = await Context.staticFunction()
+    this.staticUnderlineFunctionHasNoContext = await Context._staticUnderlineFunction()
+    this.staticAsyncUnderlineFunctionHasNoContext = await Context.invokeStaticAsyncUnderlineFunction()
   }
 
-  setFrameworkInitial({framework}) {
+  async hydrate() {
+    this.hydratedStaticFunctionHasNoContext = await Context.staticFunction()
+    this.hydratedStaticUnderlineFunctionHasNoContext = await Context._staticUnderlineFunction()
+    this.hydratedStaticAsyncUnderlineFunctionHasNoContext = await Context.invokeStaticAsyncUnderlineFunction()
+  }
+
+  setFrameworkInitial({ framework }) {
     this.frameworkInitial = framework[0];
   }
-  
-  render({framework}) {
+
+  render({ framework }) {
     return (
-      <div>
-        <div data-framework={framework} />
-        <div data-framework-initial={this.frameworkInitial} />
-      </div>
+      <div
+        data-framework={framework}
+        data-framework-initial={this.frameworkInitial}
+        data-static-function-has-no-context={this.staticFunctionHasNoContext}
+        data-static-underline-function-has-no-context={this.staticUnderlineFunctionHasNoContext}
+        data-static-async-underline-function-has-no-context={this.staticAsyncUnderlineFunctionHasNoContext}
+        data-hydrated-static-function-has-no-context={this.hydratedStaticFunctionHasNoContext}
+        data-hydrated-static-underline-function-has-no-context={this.hydratedStaticUnderlineFunctionHasNoContext}
+        data-hydrated-static-async-underline-function-has-no-context={this.hydratedStaticAsyncUnderlineFunctionHasNoContext}
+      />
     )
   }
 
diff --git a/tests/src/Context.test.js b/tests/src/Context.test.js
index 7d015e5e..e7dc3000 100644
--- a/tests/src/Context.test.js
+++ b/tests/src/Context.test.js
@@ -29,4 +29,40 @@ describe('Context', () => {
     expect(element).toBeTruthy();
   });
 
+  test('hydrated static async underline function has no context', async () => {
+    await page.waitForSelector('[data-hydrated-static-async-underline-function-has-no-context]');
+    const element = await page.$('[data-hydrated-static-async-underline-function-has-no-context]');
+    expect(element).toBeTruthy();
+  });
+
+  test('hydrated static underline function has no context', async () => {
+    await page.waitForSelector('[data-hydrated-static-underline-function-has-no-context]');
+    const element = await page.$('[data-hydrated-static-underline-function-has-no-context]');
+    expect(element).toBeTruthy();
+  });
+
+  test('hydrated static function has no context', async () => {
+    await page.waitForSelector('[data-hydrated-static-function-has-no-context]');
+    const element = await page.$('[data-hydrated-static-function-has-no-context]');
+    expect(element).toBeTruthy();
+  });
+
+  test('static async underline function has no context', async () => {
+    await page.waitForSelector('[data-static-async-underline-function-has-no-context]');
+    const element = await page.$('[data-static-async-underline-function-has-no-context]');
+    expect(element).toBeTruthy();
+  });
+
+  test('static underline function has no context', async () => {
+    await page.waitForSelector('[data-static-underline-function-has-no-context]');
+    const element = await page.$('[data-static-underline-function-has-no-context]');
+    expect(element).toBeTruthy();
+  });
+
+  test('static function has no context', async () => {
+    await page.waitForSelector('[data-static-function-has-no-context]');
+    const element = await page.$('[data-static-function-has-no-context]');
+    expect(element).toBeTruthy();
+  });
+
 });
\ No newline at end of file
diff --git a/tests/src/Refs.njs b/tests/src/Refs.njs
index ea08a5af..35a59b48 100644
--- a/tests/src/Refs.njs
+++ b/tests/src/Refs.njs
@@ -8,7 +8,8 @@ class Refs extends Nullstack {
     this.id = this._element.id
   }
 
-  setRef({ element, refInstanceCount }) {
+  setRef({ element, refInstanceCount, id }) {
+    this.refReceivedProps = element.id === id
     this._function = element
     this.isOnDOM = element.offsetHeight > 0 && refInstanceCount
   }
@@ -29,7 +30,7 @@ class Refs extends Nullstack {
         <span id="composed-computed" ref={this[this.composedComputed]} data-id={this._composedComputed?.id} />
         <span id="logical-computed" ref={this[['_logical', 'Computed'].join('')]} data-id={this._logicalComputed?.id} />
         <span id="literal-computed" ref={this['_literalComputed']} data-id={this._literalComputed?.id} />
-        <span id="function" ref={this.setRef} data-dom={this.isOnDOM} data-id={this._function?.id}>span</span>
+        <span id="function" ref={this.setRef} data-ref-received-props={this.refReceivedProps} data-dom={this.isOnDOM} data-id={this._function?.id}>span</span>
         <Bubble ref={this._bubble} />
         <button onclick={this.changeInstance}>Change Instance</button>
       </div>
diff --git a/tests/src/Refs.test.js b/tests/src/Refs.test.js
index 71a38e1a..b0069952 100644
--- a/tests/src/Refs.test.js
+++ b/tests/src/Refs.test.js
@@ -35,6 +35,13 @@ describe('Refs', () => {
     expect(element).toBeTruthy();
   });
 
+  test('refs functions receive attributes as argument', async () => {
+    await page.waitForSelector('[data-ref-received-props]');
+    const element = await page.$('[data-ref-received-props]');
+    expect(element).toBeTruthy();
+  });
+
+
   test('refs functions only run after the element is appended do DOM', async () => {
     await page.waitForSelector('[data-dom="0"]');
     const element = await page.$('[data-dom="0"]');

From ed2a45cc4e31dd0402c69e732accdcf6568a4818 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 9 Aug 2022 00:55:23 -0300
Subject: [PATCH 093/105] :sparkles: dev server port check

---
 scripts/index.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 66bbc597..7b9cbe28 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -105,13 +105,12 @@ async function start({ input, port, env, mode = 'spa', hot }) {
   };
   const clientCompiler = getCompiler({ environment, input });
   const server = new WebpackDevServer(devServerOptions, clientCompiler);
-  let once = false
-  if (!once) {
+  const portChecker = require('express')().listen(process.env['NULLSTACK_SERVER_PORT'], () => {
+    portChecker.close()
     server.startCallback(() => {
       console.log('\x1b[36m%s\x1b[0m', ` ✅️ Your application is ready at http://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULLSTACK_SERVER_PORT']}\n`);
     });
-    once = true
-  }
+  })
 }
 
 function build({ input, output, cache, env, mode = 'ssr' }) {

From c671ff90fa0d9a8a597d7f17cf70fc0ee52d7f8a Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 9 Aug 2022 01:35:45 -0300
Subject: [PATCH 094/105] :wrench: lower node requirement

---
 scripts/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 7b9cbe28..b89dc4af 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -60,8 +60,8 @@ async function start({ input, port, env, mode = 'spa', hot }) {
   process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[0]
   process.env['NULSTACK_SERVER_SOCKET_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[1]
   process.env['NULLSTACK_ENVIRONMENT_HOT'] = (!!hot).toString()
-  process.env['NULLSTACK_PROJECT_DOMAIN'] ??= 'localhost'
-  process.env['NULLSTACK_WORKER_PROTOCOL'] ??= 'http'
+  if (!process.env['NULLSTACK_PROJECT_DOMAIN']) process.env['NULLSTACK_PROJECT_DOMAIN'] = 'localhost'
+  if (!process.env['NULLSTACK_WORKER_PROTOCOL']) process.env['NULLSTACK_WORKER_PROTOCOL'] = 'http'
   const devServerOptions = {
     hot: 'only',
     open: false,

From 0cbb3444e2d661d25245b457985298f4fb657c16 Mon Sep 17 00:00:00 2001
From: Jonathan Bertoldi <jaybertoldi@gmail.com>
Date: Tue, 9 Aug 2022 09:02:48 -0300
Subject: [PATCH 095/105] Fix undefined cb data breaking the server

---
 server/server.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/server.js b/server/server.js
index cee880dc..443c2cd3 100644
--- a/server/server.js
+++ b/server/server.js
@@ -94,7 +94,7 @@ function createResponse(callback) {
     code = number;
     return res;
   };
-  res.end = res.send = res.write = function (data) {
+  res.end = res.send = res.write = function (data = '') {
     if (callback) callback(code, data, headers);
   };
   return res;
@@ -237,4 +237,4 @@ server.start = function () {
 
 }
 
-export default server;
\ No newline at end of file
+export default server;

From 5efe0ff9d66c57db4b9d6b87452261b13cc9d4d8 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 14 Aug 2022 15:47:40 -0300
Subject: [PATCH 096/105] :wrench: wait for server ping

---
 scripts/index.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index b89dc4af..3a5a7513 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -8,6 +8,7 @@ const { existsSync } = require('fs');
 const customConfig = path.resolve(process.cwd(), './webpack.config.js');
 const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
 const dotenv = require('dotenv')
+const fetch = require('node-fetch')
 
 function getConfig(options) {
   return config.map((env) => env(null, options))
@@ -62,6 +63,7 @@ async function start({ input, port, env, mode = 'spa', hot }) {
   process.env['NULLSTACK_ENVIRONMENT_HOT'] = (!!hot).toString()
   if (!process.env['NULLSTACK_PROJECT_DOMAIN']) process.env['NULLSTACK_PROJECT_DOMAIN'] = 'localhost'
   if (!process.env['NULLSTACK_WORKER_PROTOCOL']) process.env['NULLSTACK_WORKER_PROTOCOL'] = 'http'
+  const target = `${process.env['NULLSTACK_WORKER_PROTOCOL']}://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`
   const devServerOptions = {
     hot: 'only',
     open: false,
@@ -80,7 +82,7 @@ async function start({ input, port, env, mode = 'spa', hot }) {
     },
     proxy: {
       context: () => true,
-      target: `${process.env['NULLSTACK_WORKER_PROTOCOL']}://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`,
+      target,
       proxyTimeout: 10 * 60 * 1000,
       timeout: 10 * 60 * 1000,
     },
@@ -88,7 +90,7 @@ async function start({ input, port, env, mode = 'spa', hot }) {
       if (!devServer) {
         throw new Error('webpack-dev-server is not defined');
       }
-      middlewares.unshift((req, res, next) => {
+      middlewares.unshift(async (req, res, next) => {
         if (req.originalUrl.indexOf('.hot-update.') === -1) {
           if (req.originalUrl.startsWith('/nullstack/')) {
             console.log(`  ⚙️ [${req.method}] ${req.originalUrl}`)
@@ -96,7 +98,22 @@ async function start({ input, port, env, mode = 'spa', hot }) {
             console.log(`  🕸️ [${req.method}] ${req.originalUrl}`)
           }
         }
-        next()
+        async function waitForServer() {
+          if (req.originalUrl.includes('.')) {
+            return next()
+          }
+          try {
+            await fetch(`${target}${req.originalUrl}`)
+            next()
+          } catch (error) {
+            if (error.message.includes('ECONNREFUSED')) {
+              setTimeout(waitForServer, 100)
+            } else {
+              throw error
+            }
+          }
+        }
+        waitForServer()
       });
       return middlewares;
     },

From 2ab0a1cc1b292ccf74f6a8e8c9999af3d1593796 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 14 Aug 2022 20:34:09 -0300
Subject: [PATCH 097/105] :wrench: configure test timeout

---
 tests/jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/jest.config.js b/tests/jest.config.js
index f41e41d6..484790b0 100644
--- a/tests/jest.config.js
+++ b/tests/jest.config.js
@@ -3,5 +3,5 @@ const CI = !!process.env.CI;
 module.exports = {
   preset: "jest-puppeteer",
   forceExit: CI,
-  testTimeout: CI ? 5000 : 20000
+  testTimeout: 10000
 }
\ No newline at end of file

From aa0e8d0ad255933b0c1e572595aab65a1ed67c74 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 14 Aug 2022 20:43:52 -0300
Subject: [PATCH 098/105] :wrench: configure test timeout

---
 tests/jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/jest.config.js b/tests/jest.config.js
index 484790b0..19b8bcc5 100644
--- a/tests/jest.config.js
+++ b/tests/jest.config.js
@@ -3,5 +3,5 @@ const CI = !!process.env.CI;
 module.exports = {
   preset: "jest-puppeteer",
   forceExit: CI,
-  testTimeout: 10000
+  testTimeout: 20000
 }
\ No newline at end of file

From 0ad51a522616a67ec24ffc0a329fdbf02ab91a40 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 14 Aug 2022 20:51:53 -0300
Subject: [PATCH 099/105] :wrench: configure test timeout

---
 tests/jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/jest.config.js b/tests/jest.config.js
index 19b8bcc5..b6c36829 100644
--- a/tests/jest.config.js
+++ b/tests/jest.config.js
@@ -3,5 +3,5 @@ const CI = !!process.env.CI;
 module.exports = {
   preset: "jest-puppeteer",
   forceExit: CI,
-  testTimeout: 20000
+  testTimeout: 60000
 }
\ No newline at end of file

From f1e6dde6b939fa98f5130b8918011c1a806d1cdd Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Tue, 16 Aug 2022 20:58:33 -0300
Subject: [PATCH 100/105] :sparkles: client.js hot reload

---
 loaders/inject-hmr.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/loaders/inject-hmr.js b/loaders/inject-hmr.js
index 6c6998bc..8d325d03 100644
--- a/loaders/inject-hmr.js
+++ b/loaders/inject-hmr.js
@@ -26,6 +26,11 @@ module.exports = function (source) {
 
   return source + `
     if (module.hot) {
+      if (window.needsClientReload) {
+        window.location.reload()
+      }
+      module.hot.accept()
+      window.needsClientReload = true
       module.hot.accept('${klassPath}', () => {
         Nullstack.hotReload(${klassName})
       })

From 8048850565251c81e65447c9ee65e841b85fea82 Mon Sep 17 00:00:00 2001
From: Maycon Sousa <mayconfsousa@gmail.com>
Date: Fri, 19 Aug 2022 11:44:58 -0300
Subject: [PATCH 101/105] allow zero when binding value + type fixes

---
 plugins/bindable.js | 2 +-
 types/JSX.d.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/bindable.js b/plugins/bindable.js
index 7d7174f2..4d1b29bd 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -44,7 +44,7 @@ function transform({ node, environment }) {
   } else if (node.type === 'input' && node.attributes.type === 'checkbox') {
     node.attributes.checked = target[node.attributes.bind];
   } else {
-    node.attributes.value = target[node.attributes.bind] || '';
+    node.attributes.value = target[node.attributes.bind] ?? '';
   }
   node.attributes.name = node.attributes.name || node.attributes.bind;
 
diff --git a/types/JSX.d.ts b/types/JSX.d.ts
index 9e7b4461..97e0f1de 100644
--- a/types/JSX.d.ts
+++ b/types/JSX.d.ts
@@ -631,7 +631,7 @@ export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
   placeholder?: string | undefined;
   slot?: string | undefined;
   spellcheck?: Booleanish | undefined;
-  style?: object | undefined;
+  style?: string | undefined;
   tabindex?: number | string | undefined;
   title?: string | undefined;
   translate?: "yes" | "no" | undefined;
@@ -1260,7 +1260,7 @@ export interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
   method?: string | undefined;
   min?: number | string | undefined;
   name?: string | undefined;
-  style?: object | undefined;
+  style?: string | undefined;
   target?: string | undefined;
   type?: string | undefined;
   width?: number | string | undefined;

From 9d5f83a9a656195b76f48277756d510f1835a065 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Fri, 19 Aug 2022 23:52:49 -0300
Subject: [PATCH 102/105] :fire: remove old segment logic

---
 plugins/routable.js    |  8 --------
 shared/generateTree.js | 18 ------------------
 2 files changed, 26 deletions(-)

diff --git a/plugins/routable.js b/plugins/routable.js
index 61620db5..a8c20737 100644
--- a/plugins/routable.js
+++ b/plugins/routable.js
@@ -16,13 +16,6 @@ function match(node) {
 
 function load({ router }) {
   router._routes = {};
-  if (!router._oldSegments) {
-    router._oldSegments = {};
-    router._newSegments = {};
-  } else {
-    router._oldSegments = router._newSegments;
-    router._newSegments = {};
-  }
 }
 
 function transform({ node, depth, router }) {
@@ -34,7 +27,6 @@ function transform({ node, depth, router }) {
     const params = routeMatches(router.url, node.attributes.route);
     if (params) {
       router._routes[routeDepth] = true;
-      router._newSegments[routeDepth] = params;
       Object.assign(router._segments, params);
     } else {
       erase(node);
diff --git a/shared/generateTree.js b/shared/generateTree.js
index 84e18ac1..79ba71dc 100644
--- a/shared/generateTree.js
+++ b/shared/generateTree.js
@@ -27,24 +27,6 @@ async function generateBranch(siblings, node, depth, scope) {
 
   if (isClass(node)) {
     const key = generateKey(scope, node, depth)
-    if (
-      scope.context.environment.client &&
-      scope.context.router._changed &&
-      node.attributes &&
-      node.attributes.route &&
-      scope.context.environment.mode !== 'ssg'
-    ) {
-      const routeDepth = depth.slice(0, depth.lastIndexOf('-'))
-      const newSegments = scope.context.router._newSegments[routeDepth];
-      if (newSegments) {
-        const oldSegments = scope.context.router._oldSegments[routeDepth];
-        for (const segment in newSegments) {
-          if (oldSegments[segment] !== newSegments[segment]) {
-            delete scope.memory[key];
-          }
-        }
-      }
-    }
     const instance = scope.instances[key] || new node.type(scope);
     instance.persistent = !!node.attributes.persistent
     instance.key = key;

From fd631de13c09b5279e12814da402771dcd5868af Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sat, 20 Aug 2022 01:15:54 -0300
Subject: [PATCH 103/105] :bug: fix livereload bug

---
 client/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/index.js b/client/index.js
index 1f4862b3..887bd72c 100644
--- a/client/index.js
+++ b/client/index.js
@@ -134,9 +134,7 @@ if (module.hot) {
   }
   Nullstack.hotReload = function hotReload(klass) {
     if (client.skipHotReplacement) {
-      setInterval(() => {
-        fetch(window.location.href).then((r) => r.status !== 500 && window.location.reload())
-      }, 100)
+      window.location.reload()
     } else {
       Nullstack.start(klass);
       windowEvent('environment');

From c1d09a2c5aaf3fb3e1b93eb51c55afc4fb29c0e3 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 21 Aug 2022 13:33:00 -0300
Subject: [PATCH 104/105] :wrench: finalize cli options

---
 scripts/index.js   | 27 ++++++++++++++++++++-------
 server/server.js   |  8 +++++---
 tests/package.json |  2 +-
 webpack.config.js  |  3 ++-
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 3a5a7513..db3e0361 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,7 +4,7 @@ const { version } = require('../package.json');
 
 const webpack = require('webpack');
 const path = require('path');
-const { existsSync } = require('fs');
+const { existsSync, rmdirSync, readdir, unlink } = require('fs');
 const customConfig = path.resolve(process.cwd(), './webpack.config.js');
 const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
 const dotenv = require('dotenv')
@@ -48,7 +48,7 @@ function getPort(port) {
   return port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
 }
 
-async function start({ input, port, env, mode = 'spa', hot }) {
+async function start({ input, port, env, mode = 'spa', cold, disk }) {
   const environment = 'development'
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
   loadEnv(env)
@@ -60,10 +60,12 @@ async function start({ input, port, env, mode = 'spa', hot }) {
   const ports = await getFreePorts()
   process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[0]
   process.env['NULSTACK_SERVER_SOCKET_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[1]
-  process.env['NULLSTACK_ENVIRONMENT_HOT'] = (!!hot).toString()
+  process.env['NULLSTACK_ENVIRONMENT_HOT'] = (!cold).toString()
+  process.env['NULLSTACK_ENVIRONMENT_DISK'] = (!!disk).toString()
   if (!process.env['NULLSTACK_PROJECT_DOMAIN']) process.env['NULLSTACK_PROJECT_DOMAIN'] = 'localhost'
   if (!process.env['NULLSTACK_WORKER_PROTOCOL']) process.env['NULLSTACK_WORKER_PROTOCOL'] = 'http'
   const target = `${process.env['NULLSTACK_WORKER_PROTOCOL']}://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`
+  const writeToDisk = disk ? true : (path) => path.includes('server')
   const devServerOptions = {
     hot: 'only',
     open: false,
@@ -71,7 +73,7 @@ async function start({ input, port, env, mode = 'spa', hot }) {
     devMiddleware: {
       index: false,
       stats: 'none',
-      writeToDisk: true,
+      writeToDisk,
     },
     client: {
       overlay: { errors: true, warnings: false },
@@ -120,8 +122,18 @@ async function start({ input, port, env, mode = 'spa', hot }) {
     webSocketServer: require.resolve('./socket'),
     port: process.env['NULLSTACK_SERVER_PORT']
   };
-  const clientCompiler = getCompiler({ environment, input });
-  const server = new WebpackDevServer(devServerOptions, clientCompiler);
+  const compiler = getCompiler({ environment, input, disk });
+  const outputPath = compiler.compilers[0].outputPath;
+  readdir(outputPath, (err, files) => {
+    if (err) throw err;
+    for (const file of files) {
+      if (file === '.cache') continue;
+      unlink(path.join(outputPath, file), err => {
+        if (err) throw err;
+      });
+    }
+  });
+  const server = new WebpackDevServer(devServerOptions, compiler);
   const portChecker = require('express')().listen(process.env['NULLSTACK_SERVER_PORT'], () => {
     portChecker.close()
     server.startCallback(() => {
@@ -155,7 +167,8 @@ program
   .option('-p, --port <port>', 'Port number to run the server')
   .option('-i, --input <input>', 'Path to project that will be started')
   .option('-e, --env <name>', 'Name of the environment file that should be loaded')
-  .option('--hot', 'Enable hot module replacement')
+  .option('-d, --disk', 'Write files to disk')
+  .option('-c, --cold', 'Disable hot module replacement')
   .helpOption('-h, --help', 'Learn more about this command')
   .action(start)
 
diff --git a/server/server.js b/server/server.js
index 443c2cd3..919b1f83 100644
--- a/server/server.js
+++ b/server/server.js
@@ -222,9 +222,11 @@ server.start = function () {
 
     server.listen(server.port, async () => {
       if (environment.development) {
-        const content = await server.prerender('/');
-        const target = process.cwd() + `/.development/index.html`
-        writeFileSync(target, content)
+        if (process.env['NULLSTACK_ENVIRONMENT_DISK'] === 'true') {
+          const content = await server.prerender('/');
+          const target = process.cwd() + `/.development/index.html`
+          writeFileSync(target, content)
+        }
         const socket = new WebSocket(`ws://localhost:${process.env['NULLSTACK_SERVER_PORT']}/ws`);
         socket.onopen = async function (e) {
           socket.send('{"type":"NULLSTACK_SERVER_STARTED"}')
diff --git a/tests/package.json b/tests/package.json
index 422014c6..c73a7a44 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -13,7 +13,7 @@
     "purgecss-webpack-plugin": "^4.1.3"
   },
   "scripts": {
-    "start": "npx nullstack start --input=./tests --port=6969 --env=test --mode=spa --hot",
+    "start": "npx nullstack start --input=./tests --port=6969 --env=test --mode=spa",
     "build": "npx nullstack build --input=./tests --env=test",
     "test": "npm run build && jest --runInBand",
     "script": "node src/scripts/run.js"
diff --git a/webpack.config.js b/webpack.config.js
index 55a90dbf..51797d67 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -244,6 +244,7 @@ function server(env, argv) {
 }
 
 function client(env, argv) {
+  const disk = !!argv.disk
   const dir = argv.input ? path.join(__dirname, argv.input) : process.cwd();
   const isDev = argv.environment === 'development';
   const folder = isDev ? '.development' : '.production';
@@ -255,7 +256,7 @@ function client(env, argv) {
       chunkFilename: '[chunkhash].client.css'
     }),
   ]
-  if (isDev) {
+  if (disk) {
     plugins.push(new CopyPlugin({
       patterns: [
         { from: "public", to: "../.development" },

From 439b80f0f5e59d36008fefbfccc2c096a4ea5af0 Mon Sep 17 00:00:00 2001
From: Christian Mortaro <christian.mortaro@gmail.com>
Date: Sun, 21 Aug 2022 13:55:30 -0300
Subject: [PATCH 105/105] :bug: skip cleaning non existing dir

---
 scripts/index.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index db3e0361..34034d1f 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -48,6 +48,19 @@ function getPort(port) {
   return port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
 }
 
+function clearOutput(outputPath) {
+  if (!existsSync(outputPath)) return
+  readdir(outputPath, (err, files) => {
+    if (err) throw err;
+    for (const file of files) {
+      if (file === '.cache') continue;
+      unlink(path.join(outputPath, file), err => {
+        if (err) throw err;
+      });
+    }
+  });
+}
+
 async function start({ input, port, env, mode = 'spa', cold, disk }) {
   const environment = 'development'
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
@@ -123,16 +136,7 @@ async function start({ input, port, env, mode = 'spa', cold, disk }) {
     port: process.env['NULLSTACK_SERVER_PORT']
   };
   const compiler = getCompiler({ environment, input, disk });
-  const outputPath = compiler.compilers[0].outputPath;
-  readdir(outputPath, (err, files) => {
-    if (err) throw err;
-    for (const file of files) {
-      if (file === '.cache') continue;
-      unlink(path.join(outputPath, file), err => {
-        if (err) throw err;
-      });
-    }
-  });
+  clearOutput(compiler.compilers[0].outputPath)
   const server = new WebpackDevServer(devServerOptions, compiler);
   const portChecker = require('express')().listen(process.env['NULLSTACK_SERVER_PORT'], () => {
     portChecker.close()