nullstack · Mortaro · Aug 21, 2022 · May 9, 2022 · May 9, 2022 · May 9, 2022
diff --git 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/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/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
@@ -20,6 +19,12 @@ client.selector = null
 client.events = {}
 client.generateContext = generateContext
 client.renderQueue = null
+client.currentBody = {}
+client.nextBody = {}
+client.currentHead = []
+client.nextHead = []
+client.head = document.head
+client.body = document.body
 
 client.update = async function update() {
   if (client.initialized) {
@@ -30,35 +35,45 @@ client.update = async function update() {
       scope.plugins = loadPlugins(scope)
       client.initialized = false
       client.renewalQueue = []
-      client.nextVirtualDom = await generateTree(client.initializer(), scope)
-      rerender(client.selector)
-      client.virtualDom = client.nextVirtualDom
-      client.nextVirtualDom = null
-      client.processLifecycleQueues()
+      try {
+        client.nextVirtualDom = await generateTree(client.initializer(), scope)
+        rerender()
+        client.processLifecycleQueues()
+      } catch (e) {
+        client.skipHotReplacement = true
+        console.error(e)
+      }
     }, 16)
   }
 }
 
 client.processLifecycleQueues = async function processLifecycleQueues() {
   if (!client.initialized) {
     client.initialized = true
-    client.hydrated = 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.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
   while (client.realHydrationQueue.length) {
     shouldUpdate = true
     const instance = client.realHydrationQueue.shift()
     instance.hydrate && await instance.hydrate()
-    instance._self.hydrated = true
+    instance.hydrated = true
   }
   shouldUpdate && client.update()
   shouldUpdate = false
@@ -70,10 +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
+      if (instance.persistent) {
+        instance.terminated = true
       } else {
         delete client.instances[key]
       }

diff --git 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;
diff --git a/client/events.js b/client/events.js
@@ -0,0 +1,72 @@
+import router from './router'
+import { camelize } from '../shared/string';
+import noop from '../shared/noop'
+
+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 });
+  }
+}
+
+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)
+    if (!subject) return
+    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();
+    }
+    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];
+        }
+      }
+      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] === noop) return
+      if (Array.isArray(subject[name])) {
+        for (const subcallback of subject[name]) {
+          executeEvent(subcallback, subject, event, data)
+        }
+      } else {
+        executeEvent(subject[name], subject, event, data)
+      }
+    })
+  }
+};
diff --git a/client/hydrate.js b/client/hydrate.js
@@ -0,0 +1,50 @@
+import { ref } from './ref';
+import { isFalse } from '../shared/nodes';
+import { anchorableElement } from './anchorableNode';
+import client from './client';
+
+let pool = []
+
+function hydrateBody(selector, node) {
+  if (node?.attributes?.html) {
+    anchorableElement(selector);
+  }
+  node.element = 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(''));
+    } else if (element.COMMENT_NODE === 8 && element.textContent === '#') {
+      pool.push(element.remove())
+    }
+  }
+  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.')
+    }
+    hydrateBody(selector.childNodes[i], node.children[i])
+  }
+}
+
+function hydrateHead() {
+  for (const node of client.nextHead) {
+    if (isFalse(node)) {
+      node.element = pool.pop() || document.createComment("")
+      client.head.append(node.element)
+    } else {
+      node.element = document.getElementById(node.attributes.id)
+    }
+  }
+  pool = null
+}
+
+export default function hydrate(selector, node) {
+  hydrateBody(selector, node)
+  hydrateHead()
+}
diff --git a/client/index.js b/client/index.js
@@ -2,22 +2,23 @@ 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, usePlugins } from '../shared/plugins';
+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';
 import render from './render';
 import rerender from './rerender';
+import hydrate from './hydrate';
 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;
@@ -40,18 +41,25 @@ export default class Nullstack {
   static element = element;
   static invoke = invoke;
   static fragment = fragment;
-  static use = usePlugins('client');
+  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;
       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;
@@ -63,39 +71,74 @@ export default class Nullstack {
         client.selector = body
       } else {
         client.virtualDom = await generateTree(client.initializer(), scope);
+        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.selector);
-        client.virtualDom = client.nextVirtualDom;
-        client.nextVirtualDom = null;
+        rerender();
       }
       client.processLifecycleQueues();
       delete state.context;
     }, 0)
-    return generateContext({});
+    return this.context;
   }
 
-  _self = {
-    prerendered: false,
-    initiated: false,
-    hydrated: false,
-    terminated: false,
-  }
+  prerendered = false
+  initiated = false
+  hydrated = false
+  terminated = false
+  key = null
 
   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;
   }
 
   render() {
     return false;
   }
 
+}
+
+if (module.hot) {
+  const socket = new WebSocket('ws' + router.base.slice(4) + '/ws');
+  window.lastHash
+  socket.onmessage = async function (e) {
+    const data = JSON.parse(e.data)
+    if (data.type === 'NULLSTACK_SERVER_STARTED') {
+      (window.needsReload || !environment.hot) && 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) {
+    for (const key in context.instances) {
+      const instance = context.instances[key]
+      if (instance.constructor.hash === hash) {
+        Object.setPrototypeOf(instance, klass.prototype);
+      }
+    }
+    klassMap[hash] = klass
+  }
+  Nullstack.hotReload = function hotReload(klass) {
+    if (client.skipHotReplacement) {
+      window.location.reload()
+    } else {
+      Nullstack.start(klass);
+      windowEvent('environment');
+    }
+  }
+  module.hot.decline()
 }