nullstack · Mortaro · Jan 30, 2023 · Jan 23, 2023 · Jan 25, 2023 · Jan 25, 2023
diff --git a/client/events.js b/client/events.js
@@ -26,7 +26,12 @@ function debounce(selector, name, time, callback) {
 }
 
 export function generateCallback(selector, name) {
-  return function eventCallback(event) {
+  let eventNames = eventCallbacks.get(selector)
+  if (!eventNames) {
+    eventNames = {}
+    eventCallbacks.set(selector, eventNames)
+  }
+  const callback = function eventCallback(event) {
     const subject = eventSubjects.get(selector)
     if (!subject) return
     if (subject.href) {
@@ -69,4 +74,6 @@ export function generateCallback(selector, name) {
       }
     })
   }
+  eventNames[name] = callback
+  return callback
 }
diff --git a/client/render.js b/client/render.js
@@ -1,7 +1,7 @@
 import generateTruthyString from '../shared/generateTruthyString'
 import { isFalse, isText } from '../shared/nodes'
 import { anchorableElement } from './anchorableNode'
-import { eventCallbacks, eventSubjects, generateCallback } from './events'
+import { eventSubjects, generateCallback } from './events'
 import { ref } from './ref'
 
 export default function render(node, options) {
@@ -35,7 +35,6 @@ export default function render(node, options) {
         const eventName = name.substring(2)
         const callback = generateCallback(node.element, name)
         node.element.addEventListener(eventName, callback)
-        eventCallbacks.set(node.element, callback)
         eventSubjects.set(node.element, node.attributes)
       }
     } else {

diff --git a/client/rerender.js b/client/rerender.js
@@ -23,16 +23,20 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
       }
     } else if (name.startsWith('on')) {
       const eventName = name.substring(2)
-      if (eventCallbacks.has(selector) && !nextAttributes[name]) {
-        selector.removeEventListener(eventName, eventCallbacks.get(selector))
-      }
-      if (nextAttributes[name]) {
-        if (!eventCallbacks.has(selector)) {
-          const callback = generateCallback(selector, name)
-          selector.addEventListener(eventName, callback)
-          eventCallbacks.set(selector, callback)
+      const eventNames = eventCallbacks.get(selector)
+      if (!eventNames) {
+        selector.addEventListener(eventName, generateCallback(selector, name))
+      } else {
+        const callback = eventNames[name]
+        if (callback && !nextAttributes[name]) {
+          selector.removeEventListener(eventName, callback)
+          delete eventNames[name]
+        } else if (nextAttributes[name]) {
+          if (!callback) {
+            selector.addEventListener(eventName, generateCallback(selector, name))
+          }
+          eventSubjects.set(selector, nextAttributes)
         }
-        eventSubjects.set(selector, nextAttributes)
       }
     } else {
       let currentValue

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.17.3",
+  "version": "0.17.4",
   "description": "Full Stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",

diff --git a/server/server.js b/server/server.js
@@ -163,23 +163,47 @@ server.start = function () {
       response.send(generateFile(`${request.params.number}.client.js`, server))
     })
 
+    server.get(`/:number.client.js.map`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable')
+      response.contentType('application/json')
+      response.send(generateFile(`${request.params.number}.client.js.map`, 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(`/:number.client.css.map`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable')
+      response.contentType('application/json')
+      response.send(generateFile(`${request.params.number}.client.css.map`, 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(`/client.css.map`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable')
+      response.contentType('application/json')
+      response.send(generateFile('client.css.map', 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.js.map`, (request, response) => {
+      response.setHeader('Cache-Control', 'max-age=31536000, immutable')
+      response.contentType('application/json')
+      response.send(generateFile('client.js.map', server))
+    })
   }
 
   server.get(`/manifest.webmanifest`, (request, response) => {

diff --git a/tests/src/ComponentTernary.njs b/tests/src/ComponentTernary.njs
@@ -22,7 +22,7 @@ class ComponentTernary extends Nullstack {
 
   render() {
     return (
-      <div>
+      <div data-hydrated={this.hydrated}>
         {this.showA ? <CommponentA /> : <CommponentB />}
         <button onclick={{ showA: !this.showA }}> ab </button>
       </div>

diff --git a/tests/src/ComponentTernary.test.js b/tests/src/ComponentTernary.test.js
@@ -1,5 +1,6 @@
 beforeAll(async () => {
   await page.goto('http://localhost:6969/component-ternary')
+  await page.waitForSelector('[data-hydrated]')
 })
 
 describe('ComponentTernary', () => {

diff --git a/tests/src/ContextData.njs b/tests/src/ContextData.njs
@@ -12,7 +12,11 @@ class ContextData extends Nullstack {
 
   render() {
     return (
-      <div data-count-with-default={this.countWithDefault} data-count-without-default={this.countWithoutDefault}>
+      <div
+        data-count-with-default={this.countWithDefault}
+        data-count-without-default={this.countWithoutDefault}
+        data-hydrated={this.hydrated}
+      >
         <button onclick={this.calculateWithDefault} data-multiply-by={3} data={{ count: 2 }}>
           calculateWithDefault
         </button>

diff --git a/tests/src/ContextData.test.js b/tests/src/ContextData.test.js
@@ -1,5 +1,6 @@
 beforeAll(async () => {
   await page.goto('http://localhost:6969/context-data')
+  await page.waitForSelector('[data-hydrated]')
 })
 
 describe('ContextData', () => {

diff --git a/tests/src/ContextWorker.njs b/tests/src/ContextWorker.njs
@@ -35,7 +35,7 @@ class ContextWorker extends Nullstack {
 
   render({ worker }) {
     return (
-      <div>
+      <div data-hydrated={this.hydrated}>
         <button onclick={this.invokeServerFunction}> Invoke </button>
         <div data-header={this.header} />
         <div data-worker={!!worker} />

diff --git a/tests/src/ContextWorker.test.js b/tests/src/ContextWorker.test.js
@@ -1,6 +1,7 @@
 describe('ContextWorker', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/context-worker')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('queues keys always return at least an empty array', async () => {

diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
@@ -24,7 +24,7 @@ class DynamicHead extends Nullstack {
     const conditionalHead = `[data-conditional-head] { color: blue }`
     const dynamicLength = `[data-dynamic-length] { color: blue }`
     return (
-      <div>
+      <div data-hydrated={this.hydrated}>
         <head>
           <script data-script-is-empty={this.scriptIsEmpty} ref={this.checkScriptChildren}></script>
           <style html={redBlue} data-count={this.count} data-red-blue />

diff --git a/tests/src/DynamicHead.test.js b/tests/src/DynamicHead.test.js
@@ -1,5 +1,6 @@
 beforeEach(async () => {
   await page.goto('http://localhost:6969/dynamic-head')
+  await page.waitForSelector('[data-hydrated]')
 })
 
 describe('DynamicHead', () => {

diff --git a/tests/src/InstanceKey.njs b/tests/src/InstanceKey.njs
@@ -8,7 +8,7 @@ class InstanceKey extends Nullstack {
 
   render() {
     return (
-      <div>
+      <div data-hydrated={this.hydrated}>
         {this.count % 2 === 0 && <StatefulComponent key="KEY" />}
         {this.count % 2 !== 0 && <StatefulComponent key="KEY" />}
         <StatefulComponent key="KEY" />

diff --git a/tests/src/InstanceKey.test.js b/tests/src/InstanceKey.test.js
@@ -1,5 +1,6 @@
 beforeAll(async () => {
   await page.goto('http://localhost:6969/instance-key')
+  await page.waitForSelector('[data-hydrated]')
   await page.click('.increment-by-two')
   await page.waitForSelector('[data-count="3"]')
 })

diff --git a/tests/src/OptimizedEvents.njs b/tests/src/OptimizedEvents.njs
@@ -26,7 +26,7 @@ class OptimizedEvents extends Nullstack {
 
   render() {
     return (
-      <main>
+      <main data-hydrated={this.hydrated}>
         {this.count === 1 && (
           <div>
             <button

diff --git a/tests/src/OptimizedEvents.test.js b/tests/src/OptimizedEvents.test.js
@@ -1,6 +1,7 @@
 describe('OptimizedEvents', () => {
   beforeEach(async () => {
     await page.goto('http://localhost:6969/optimized-events')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('events are triggered', async () => {

diff --git a/tests/src/PersistentComponent.njs b/tests/src/PersistentComponent.njs
@@ -39,6 +39,7 @@ class PersistentComponent extends Nullstack {
         data-persistent={this.persistent}
         data-prerendered={this.prerendered}
         data-a-terminated={aTerminated}
+        data-hydrated={this.hydrated}
       >
         <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
@@ -1,6 +1,7 @@
 describe('PersistentComponent instantiated', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/persistent-component/a')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('components should create a new instance when matching a dynamic segment', async () => {
@@ -25,6 +26,7 @@ describe('PersistentComponent instantiated', () => {
 describe('PersistentComponent terminated', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/persistent-component/a')
+    await page.waitForSelector('[data-hydrated]')
     await page.waitForSelector('[href="/persistent-component/b"]')
     await page.click('[href="/persistent-component/b"]')
     await page.waitForSelector('[data-key="PersistentComponent/0-0-33/persistent-component/b"]')
@@ -52,6 +54,7 @@ describe('PersistentComponent terminated', () => {
 describe('PersistentComponent reinstantiated', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/persistent-component/a')
+    await page.waitForSelector('[data-hydrated]')
     await page.waitForSelector('[href="/persistent-component/b"]')
     await page.click('[href="/persistent-component/b"]')
     await page.waitForSelector('[data-key="PersistentComponent/0-0-33/persistent-component/b"]')

diff --git a/tests/src/PluginAttributes.njs b/tests/src/PluginAttributes.njs
@@ -25,7 +25,7 @@ class PluginAttributes extends Nullstack {
 
   renderVueablePlugin() {
     return (
-      <div>
+      <div data-hydrated={this.hydrated}>
         <h1 v-if={this.showTitle} v-html={this.boldTitle()} data-vue />
 
         <button data-btn={(!this.showTitle).toString()} onclick={{ showTitle: !this.showTitle }}>

diff --git a/tests/src/PluginAttributes.test.js b/tests/src/PluginAttributes.test.js
@@ -1,5 +1,6 @@
 beforeAll(async () => {
   await page.goto('http://localhost:6969/plugin-attributes')
+  await page.waitForSelector('[data-hydrated]')
 })
 
 describe('PluginAttributes', () => {

diff --git a/tests/src/RoutesAndParams.njs b/tests/src/RoutesAndParams.njs
@@ -111,7 +111,7 @@ class RoutesAndParams extends Nullstack {
 
   render({ router, params, eventTriggered }) {
     return (
-      <div>
+      <div data-hydrated={this.hydrated}>
         <Hrefs />
         <button data-absolute onclick={this.goToDocs}>
           {' '}

diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
@@ -7,6 +7,7 @@ beforeAll(async () => {
 describe('RoutesAndParams /routes-and-params', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('router has a base key', async () => {
@@ -74,6 +75,7 @@ describe('RoutesAndParams event', () => {
     await page.click('[href="/routes-and-params/a"]')
     await page.waitForSelector('[data-hydrated]')
     await page.click('[href="/routes-and-params/a?framework=nullstack"]')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('a custom event is triggered when the url changes', async () => {
@@ -86,6 +88,7 @@ describe('RoutesAndParams event', () => {
 describe('RoutesAndParams /routes-and-params/?boolean=true', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params/?boolean=true')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('params with value of true are converted to boolean', async () => {
@@ -112,6 +115,7 @@ describe('RoutesAndParams /routes-and-params/?boolean=true', () => {
 describe('RoutesAndParams /routes-and-params?boolean=false', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params?boolean=false')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('params with value of false are converted to boolean', async () => {
@@ -123,6 +127,7 @@ describe('RoutesAndParams /routes-and-params?boolean=false', () => {
 describe('RoutesAndParams /routes-and-params/c', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params/c')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('wildcards are matched last', async () => {
@@ -139,6 +144,7 @@ describe('RoutesAndParams /routes-and-params/c', () => {
 describe('RoutesAndParams /routes-and-params/c', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params/c/a')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('wildcards can be prefixed', async () => {
@@ -150,6 +156,7 @@ describe('RoutesAndParams /routes-and-params/c', () => {
 describe('RoutesAndParams /routes-and-params/d?boolean=true#hash ssr', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params/d?boolean=true#hash')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('hash is not part of the router url', async () => {
@@ -168,6 +175,7 @@ describe('RoutesAndParams /routes-and-params/d?boolean=true#hash spa', () => {
     await page.goto('http://localhost:6969/routes-and-params/d?boolean=true#hash')
     await page.click('[href="/routes-and-params/no-hash#hash"]')
     await page.waitForSelector('[data-url="/routes-and-params/no-hash"]')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('hash is not part of the router url', async () => {
@@ -184,6 +192,7 @@ 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')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('a with absolute hrefs cause a hard redirect', async () => {
@@ -197,6 +206,7 @@ describe('RoutesAndParams /routes-and-params', () => {
 describe('RoutesAndParams /routes-and-params?previous=true', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params?previous=true')
+    await page.waitForSelector('[data-hydrated]')
   })
 
   test('router previous key starts null', async () => {
@@ -215,6 +225,7 @@ describe('RoutesAndParams /routes-and-params?previous=true', () => {
 describe('RoutesAndParams /routes-and-params/inner-html', () => {
   beforeAll(async () => {
     await page.goto('http://localhost:6969/routes-and-params/inner-html')
+    await page.waitForSelector('[data-hydrated]')
     await page.click('[data-html-click]')
   })
 

diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
@@ -23,7 +23,7 @@ class StatefulComponent extends Nullstack {
 
   render() {
     return (
-      <form ref={this._element} data-zero={0} data-hydrated-zero={this.hydrated ? 0 : 1}>
+      <form ref={this._element} data-zero={0} data-hydrated-zero={this.hydrated ? 0 : 1} data-hydrated={this.hydrated}>
         <style>
           {`
             style { 

diff --git a/tests/src/StatefulComponent.test.js b/tests/src/StatefulComponent.test.js
@@ -1,5 +1,6 @@
 beforeAll(async () => {
   await page.goto('http://localhost:6969/stateful-component')
+  await page.waitForSelector('[data-hydrated]')
 })
 
 describe('StatefulComponent', () => {