Merge pull request nullstack#313 from nullstack/next

Next

Author: Mortaro

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
 }

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 {

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

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",

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) => {

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>

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', () => {

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>

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', () => {

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} />