nullstack · Mortaro · Mar 23, 2023 · Mar 21, 2023 · Mar 21, 2023 · Mar 22, 2023
diff --git a/client/client.js b/client/client.js
@@ -101,4 +101,8 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
   router._changed = false
 }
 
+if (module.hot) {
+  client.klasses = {}
+}
+
 export default client
diff --git a/client/index.js b/client/index.js
@@ -14,7 +14,6 @@ import rerender from './rerender'
 import router from './router'
 import settings from './settings'
 import state from './state'
-import windowEvent from './windowEvent'
 import worker from './worker'
 
 context.page = page

diff --git a/client/lazy.js b/client/lazy.js
@@ -0,0 +1,19 @@
+import LazyComponent from "../shared/lazyComponent"
+
+let next = null
+const queue = []
+
+async function preload() {
+  let importer = queue.pop()
+  await importer()
+  requestIdleCallback(preload)
+}
+
+export default function lazy(_hash, importer) {
+  queue.push(importer)
+  cancelIdleCallback(next)
+  preload()
+  return class extends LazyComponent {
+    importer = importer
+  }
+}
diff --git a/client/runtime.js b/client/runtime.js
@@ -4,11 +4,13 @@ import invoke from './invoke'
 import context from './context'
 import windowEvent from './windowEvent'
 import client from './client'
+import lazy from './lazy'
 
 const $runtime = {
   element,
   fragment,
   invoke,
+  lazy
 }
 
 if (module.hot) {
@@ -49,6 +51,7 @@ if (module.hot) {
           }
         }
       }
+      client.klasses[declaration.klass.hash] = declaration.klass
       declaration.klass.__hashes = declaration.hashes
     }
     windowEvent('environment')

diff --git a/loaders/debug.js b/loaders/debug.js
@@ -0,0 +1,6 @@
+module.exports = function (source, map) {
+  if (this.resourcePath.includes('ServerFunctions.njs')) {
+    require('fs').writeFileSync('debug.njs', source)
+  }
+  this.callback(null, source, map)
+}
diff --git a/server/lazy.js b/server/lazy.js
@@ -0,0 +1,18 @@
+import LazyComponent from "../shared/lazyComponent"
+
+const queue = {}
+
+export default function lazy(hash, importer) {
+  queue[hash] = importer
+  return class extends LazyComponent {
+    importer = importer
+  }
+}
+
+export async function load(hash) {
+  const fileHash = module.hot ? hash.split('___')[0] : hash.slice(0, 8)
+  if (!queue[fileHash]) return
+  const importer = queue[fileHash]
+  delete queue[fileHash]
+  return importer()
+}
diff --git a/server/registry.js b/server/registry.js
@@ -3,6 +3,7 @@ export default registry
 import reqres from "./reqres"
 import { generateContext } from "./context"
 import Nullstack from '.'
+import { load } from "./lazy"
 
 export function register(klass, functionName) {
   if (functionName) {
@@ -27,13 +28,14 @@ function bindStaticProps(klass) {
         if (!klass[propName]) {
           klass[propName] = klass[prop]
         }
-        function _invoke(...args) {
+        async function _invoke(...args) {
           if (underscored) {
             return klass[propName].call(klass, ...args)
           }
           const params = args[0] || {}
           const { request, response } = reqres
           const subcontext = generateContext({ request, response, ...params })
+          await load(klass.hash)
           return klass[propName].call(klass, subcontext)
         }
         if (module.hot) {

diff --git a/server/runtime.js b/server/runtime.js
@@ -1,12 +1,14 @@
 import element from '../shared/element'
 import fragment from '../shared/fragment'
 import { register } from './registry'
+import lazy from './lazy'
 import Nullstack from './index'
 
 const $runtime = {
   element,
   fragment,
-  register
+  register,
+  lazy
 }
 
 if (module.hot) {

diff --git a/server/server.js b/server/server.js
@@ -17,6 +17,7 @@ import reqres from './reqres'
 import generateRobots from './robots'
 import template from './template'
 import { generateServiceWorker } from './worker'
+import { load } from './lazy'
 
 const server = express()
 
@@ -124,6 +125,7 @@ server.start = function () {
     const { hash, methodName } = request.params
     const [invokerHash, boundHash] = hash.split('-')
     const key = `${invokerHash}.${methodName}`
+    await load(boundHash || invokerHash)
     const invokerKlass = registry[invokerHash]
     let boundKlass = invokerKlass
     if (boundHash) {
@@ -159,6 +161,7 @@ server.start = function () {
       const [invokerHash, boundHash] = hash.split('-')
       const key = `${invokerHash}.${methodName}`
       let invokerKlass;
+      await load(boundHash || invokerHash)
       async function reply() {
         let boundKlass = invokerKlass
         if (boundHash) {
@@ -186,10 +189,10 @@ server.start = function () {
       }
       async function delay() {
         invokerKlass = registry[invokerHash]
-        if (invokerKlass.__hashes[methodName] !== version) {
+        if (invokerKlass && invokerKlass.__hashes[methodName] !== version) {
           setTimeout(() => {
             delay()
-          }, 200)
+          }, 0)
         } else {
           reply()
         }

diff --git a/shared/generateTree.js b/shared/generateTree.js
@@ -27,7 +27,14 @@ async function generateBranch(siblings, node, depth, scope) {
 
   if (isClass(node)) {
     const key = generateKey(scope, node, depth)
-    const instance = scope.instances[key] || new node.type(scope)
+    let instance = scope.instances[key]
+    if (!instance) {
+      if (module.hot && node.type.hash) {
+        instance = new scope.klasses[node.type.hash](scope)
+      } else {
+        instance = new node.type(scope)
+      }
+    }
     instance.persistent = !!node.attributes.persistent
     instance.key = key
     instance._attributes = node.attributes

diff --git a/shared/lazyComponent.js b/shared/lazyComponent.js
@@ -0,0 +1,25 @@
+import element from './element'
+
+class LazyComponent {
+
+  constructor(scope) {
+    this.server = scope.context.server
+  }
+
+  async initiate() {
+    this.component = (await this.importer()).default
+  }
+
+  render() {
+    if (!this.component) return false
+    const { key, ...attributes } = this._attributes
+    return element(this.component, attributes)
+  }
+
+  toJSON() {
+    return null
+  }
+
+}
+
+export default LazyComponent