Merge pull request nullstack#345 from nullstack/next

Next

Author: Mortaro

.github/workflows/pr-tests.yml

@@ -21,13 +21,16 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
       # cache the dependencies from any node_modules directory
       - name: Cache dependencies
         uses: actions/cache@v2
         with:
           path: |
             **/node_modules
-            **/package-lock.json
+            **/pnpm-lock.yaml
           key: node_modules-${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
 
       - name: Use Node.js ${{ matrix.node-version }}
@@ -37,15 +40,15 @@ jobs:
 
       - name: Install and link main deps
         run: |
-          npm install
-          npm link
+          pnpm install
+          pnpm link --global
 
       - name: Install deps at tests folder
         working-directory: ./tests
         run: |
-          npm link nullstack
-          npm install
+          pnpm link nullstack --global
+          pnpm install
 
       - name: Run tests
         working-directory: ./tests
-        run: npm test
+        run: pnpm test

client/client.js

@@ -19,8 +19,8 @@ client.selector = null
 client.events = {}
 client.generateContext = generateContext
 client.renderQueue = null
-client.currentBody = {}
-client.nextBody = {}
+client.currentMeta = { body: {}, html: {}, window: {} }
+client.nextMeta = { body: {}, html: {}, window: {} }
 client.currentHead = []
 client.nextHead = []
 client.head = document.head

client/events.js

@@ -6,12 +6,19 @@ 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') {
-    Object.assign(subject.source, callback)
-  } else {
-    callback({ ...subject, event, data })
+export function generateSubject(selector, attributes, name) {
+  if (Array.isArray(attributes[name])) {
+    for (let i = 0; i < attributes[name].length; i++) {
+      if (typeof attributes[name][i] === 'object') {
+        let changeset = attributes[name][i]
+        attributes[name][i] = () => Object.assign(attributes.source, changeset)
+      }
+    }
+  } else if (typeof attributes[name] === 'object') {
+    let changeset = attributes[name]
+    attributes[name] = () => Object.assign(attributes.source, changeset)
   }
+  eventSubjects.set(selector, attributes)
 }
 
 function debounce(selector, name, time, callback) {
@@ -60,17 +67,23 @@ export function generateCallback(selector, name) {
           object[property] = event.target[valueName] === 'true'
         } else if (typeof object[property] === 'number') {
           object[property] = +event.target[valueName] || 0
+        } else if (object[property] instanceof Date) {
+          const [yyyy, mm, dd] = event.target[valueName].split('-')
+          object[property].setFullYear(yyyy)
+          object[property].setMonth(+mm - 1)
+          object[property].setDate(dd)
+          object[property] = object[property]
         } else {
           object[property] = event.target[valueName]
         }
       }
       if (subject[name] === noop) return
       if (Array.isArray(subject[name])) {
         for (const subcallback of subject[name]) {
-          executeEvent(subcallback, subject, event, data)
+          subcallback({ ...subject, event, data })
         }
       } else {
-        executeEvent(subject[name], subject, event, data)
+        subject[name]({ ...subject, event, data })
       }
     })
   }

client/index.js

@@ -68,9 +68,9 @@ export default class Nullstack {
       } else {
         client.virtualDom = await generateTree(client.initializer(), scope)
         hydrate(client.selector, client.virtualDom)
-        client.currentBody = client.nextBody
+        client.currentMeta = client.nextMeta
         client.currentHead = client.nextHead
-        client.nextBody = {}
+        client.nextMeta = { body: {}, html: {}, window: {} }
         client.nextHead = []
         context.environment = environment
         scope.plugins = loadPlugins(scope)

client/render.js

@@ -2,7 +2,7 @@ import { sanitizeInnerHtml } from '../shared/sanitizeString'
 import generateTruthyString from '../shared/generateTruthyString'
 import { isFalse, isText } from '../shared/nodes'
 import { anchorableElement } from './anchorableNode'
-import { eventSubjects, generateCallback } from './events'
+import { generateCallback, generateSubject } from './events'
 import { ref } from './ref'
 
 export default function render(node, options) {
@@ -36,7 +36,7 @@ export default function render(node, options) {
         const eventName = name.substring(2)
         const callback = generateCallback(node.element, name)
         node.element.addEventListener(eventName, callback)
-        eventSubjects.set(node.element, node.attributes)
+        generateSubject(node.element, node.attributes, name)
       }
     } else {
       let nodeValue

client/rerender.js

@@ -3,7 +3,7 @@ import generateTruthyString from '../shared/generateTruthyString'
 import { isFalse, isText, isUndefined } from '../shared/nodes'
 import { anchorableElement } from './anchorableNode'
 import client from './client'
-import { eventCallbacks, eventSubjects, generateCallback } from './events'
+import { eventCallbacks, eventSubjects, generateCallback, generateSubject } from './events'
 import { reref } from './ref'
 import render from './render'
 
@@ -36,6 +36,7 @@ function updateAttributes(selector, currentAttributes, nextAttributes) {
           if (!callback) {
             selector.addEventListener(eventName, generateCallback(selector, name))
           }
+          generateSubject(selector, nextAttributes, name)
           eventSubjects.set(selector, nextAttributes)
         }
       }
@@ -156,12 +157,14 @@ function _rerender(current, next) {
 
 export default function rerender() {
   _rerender(client.virtualDom, client.nextVirtualDom)
-  updateAttributes(client.body, client.currentBody, client.nextBody)
+  updateAttributes(client.body, client.currentMeta.body, client.nextMeta.body)
+  updateAttributes(window, client.currentMeta.window, client.nextMeta.window)
+  updateAttributes(client.body.parentElement, client.currentMeta.html, client.nextMeta.html)
   updateHeadChildren(client.currentHead, client.nextHead)
   client.virtualDom = client.nextVirtualDom
   client.nextVirtualDom = null
-  client.currentBody = client.nextBody
-  client.nextBody = {}
+  client.currentMeta = client.nextMeta
+  client.nextMeta = { body: {}, html: {}, window: {} }
   client.currentHead = client.nextHead
   client.nextHead = []
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nullstack",
-  "version": "0.18.0",
-  "description": "Full Stack Javascript Components for one-dev armies",
+  "version": "0.19.0",
+  "description": "Feature-Driven Full Stack JavaScript Components",
   "main": "./types/index.d.ts",
   "author": "Mortaro",
   "repository": "github:nullstack/nullstack",
@@ -32,7 +32,7 @@
     "css-loader": "6.7.3",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "dotenv": "16.0.3",
-    "eslint-plugin-nullstack": "0.0.12",
+    "eslint-plugin-nullstack": "0.0.26",
     "express": "4.18.2",
     "fs-extra": "11.1.0",
     "lightningcss": "^1.19.0",
@@ -43,7 +43,7 @@
     "sass-loader": "13.2.0",
     "style-loader": "^3.3.1",
     "swc-loader": "0.2.3",
-    "swc-plugin-nullstack": "0.1.2",
+    "swc-plugin-nullstack": "0.1.3",
     "terser-webpack-plugin": "5.3.6",
     "time-analytics-webpack-plugin": "^0.1.20",
     "webpack": "^5.0.0",

plugins/bindable.js

@@ -12,6 +12,11 @@ function transform({ node, environment }) {
     node.children = [object[property] ?? '']
   } else if (node.type === 'input' && node.attributes.type === 'checkbox') {
     node.attributes.checked = object[property]
+  } else if (node.type === 'input' && node.attributes.type === 'date' && object[property] instanceof Date) {
+    const yyyy = object[property].getFullYear()
+    const mm = (object[property].getMonth() + 1).toString().padStart(2, '0')
+    const dd = object[property].getDate().toString().padStart(2, '0')
+    node.attributes.value = `${yyyy}-${mm}-${dd}`
   } else {
     node.attributes.value = object[property] ?? ''
   }

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.nextMeta = { body: {}, html: {}, window: {} }
   scope.nextHead = []
   scope.plugins = loadPlugins(scope)
 
@@ -48,7 +48,7 @@ export async function prerender(request, response) {
     context.page.status = 500
   } finally {
     if (context.page.status !== 200) {
-      scope.nextBody = {}
+      scope.nextMeta = {body: {}, html: {}, window: {}}
       scope.nextHead = []
       for (const key in context.router._routes) {
         delete context.router._routes[key]

server/template.js

@@ -6,7 +6,7 @@ import project from './project'
 import renderAttributes from './renderAttributes'
 import settings from './settings'
 
-export default function ({ head, body, nextBody, context, instances }) {
+export default function ({ head, body, nextMeta, context, instances }) {
   const { page, router, worker, params } = context
   const canonical = absolute(page.canonical || router.url)
   const image = cdnOrAbsolute(page.image)
@@ -39,7 +39,7 @@ export default function ({ head, body, nextBody, context, instances }) {
     context: environment.mode === 'spa' ? {} : serializableContext,
   }
   return `<!DOCTYPE html>
-<html lang="${page.locale || ''}">
+<html lang="${page.locale || ''}" ${renderAttributes(nextMeta.html)}>
   <head>
     <meta charset="utf-8">
     <meta name="generator" content="Created with Nullstack - https://nullstack.app" />
@@ -75,7 +75,7 @@ export default function ({ head, body, nextBody, context, instances }) {
     integrities['client.js'] || ''
   }" defer crossorigin="anonymous"></script>
   </head>
-  <body ${renderAttributes(nextBody)}>
+  <body ${renderAttributes(nextMeta.body)}>
     ${environment.mode === 'spa' ? '<div id="application"></div>' : body}
   </body>
 </html>`