Merge pull request nullstack#343 from nullstack/next

Next

Author: Mortaro

builders/logger.js

@@ -0,0 +1,43 @@
+
+const clocks = ['🕛', '🕐', '🕑', '🕒', '🕓', '🕔', '🕕', '🕖', '🕗', '🕘', '🕙', '🕚']
+
+function logger(bundle, mode) {
+  let cindex = 0
+  let timer = null
+  let stoped = false
+
+  function dots() {
+    return Array((cindex % 3) + 1).fill('.').join('')
+  }
+
+  function reset() {
+    if (process.stdout.clearLine) {
+      process.stdout.clearLine()
+      process.stdout.cursorTo(0)
+    }
+  }
+
+  function start() {
+    reset()
+    if (cindex >= clocks.length) {
+      cindex = 0
+    }
+    let symbol = clocks[cindex]
+    process.stdout.write(` ${symbol}  Building your ${bundle} in ${mode} mode ${dots()}`)
+    cindex++;
+    timer = setTimeout(start, 200)
+  }
+  start()
+
+  function stop() {
+    if (stoped) return
+    clearTimeout(timer)
+    reset()
+    process.stdout.write(` ✅  Starting your ${bundle} in ${mode} mode\n`)
+    stoped = true
+  }
+
+  return { stop }
+}
+
+module.exports = logger

builders/spa.js

@@ -34,7 +34,7 @@ module.exports = async function spa({ output, cache, environment }) {
   await copy('/robots.txt')
   console.info()
 
-  console.info('\x1b[36m%s\x1b[0m', ` ✅️ ${projectName} is ready at ${folder}\n`)
+  console.info('\x1b[36m%s\x1b[0m', ` 🚀 ${projectName} is ready at ${folder}\n`)
 
   if (cache) {
     console.info('Storing cache...')

builders/ssg.js

@@ -79,9 +79,8 @@ module.exports = async function ssg({ output, cache, environment }) {
     const urls = Object.keys(pages).map((p) => {
       const page = pages[p]
       const canonical = `https://${application.project.domain}${p}`
-      return `<url><loc>${canonical}</loc><lastmod>${timestamp}</lastmod>${
-        page.changes ? `<changefreq>${page.changes}</changefreq>` : ''
-      }${page.priority ? `<priority>${page.priority.toFixed(1)}</priority>` : ''}</url>`
+      return `<url><loc>${canonical}</loc><lastmod>${timestamp}</lastmod>${page.changes ? `<changefreq>${page.changes}</changefreq>` : ''
+        }${page.priority ? `<priority>${page.priority.toFixed(1)}</priority>` : ''}</url>`
     })
     const xml = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls.join(
       '',
@@ -111,7 +110,7 @@ module.exports = async function ssg({ output, cache, environment }) {
   await createSitemap()
   console.info()
 
-  console.info('\x1b[36m%s\x1b[0m', ` ✅️ ${projectName} is ready at ${folder}\n`)
+  console.info('\x1b[36m%s\x1b[0m', ` 🚀 ${projectName} is ready at ${folder}\n`)
 
   if (cache) {
     console.info('Storing cache...')

builders/ssr.js

@@ -3,7 +3,7 @@ module.exports = async function ssr({ cache }) {
   const application = require(`${dir}/.production/server`).default
   const projectName = application.project.name || 'The Nullstack application'
 
-  console.info('\x1b[36m%s\x1b[0m', `\n ✅️ ${projectName} is ready for production\n`)
+  console.info('\x1b[36m%s\x1b[0m', `\n 🚀 ${projectName} is ready for production\n`)
 
   if (cache) {
     console.info('Storing cache...')

client/client.js

@@ -26,7 +26,7 @@ client.nextHead = []
 client.head = document.head
 client.body = document.body
 
-client.update = async function update() {
+client.update = function update() {
   if (client.initialized) {
     clearInterval(client.renderQueue)
     client.renderQueue = setTimeout(async () => {
@@ -39,9 +39,13 @@ client.update = async function update() {
         client.nextVirtualDom = await generateTree(client.initializer(), scope)
         rerender()
         client.processLifecycleQueues()
-      } catch (e) {
+      } catch (error) {
         client.skipHotReplacement = true
-        console.error(e)
+        if (context.catch) {
+          context.catch(error)
+        } else {
+          throw error
+        }
       }
     }, 16)
   }
@@ -97,4 +101,8 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
   router._changed = false
 }
 
+if (module.hot) {
+  client.klasses = {}
+}
+
 export default client

client/index.js

@@ -1,13 +1,11 @@
 import element from '../shared/element'
-import fragment from '../shared/fragment'
 import generateTree from '../shared/generateTree'
 import { loadPlugins, useClientPlugins } from '../shared/plugins'
 import client from './client'
 import context, { generateContext } from './context'
 import environment from './environment'
 import hydrate from './hydrate'
 import instanceProxyHandler, { instanceProxies } from './instanceProxyHandler'
-import invoke from './invoke'
 import page from './page'
 import params, { updateParams } from './params'
 import project from './project'
@@ -16,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
@@ -35,11 +32,12 @@ scope.context = context
 
 client.plugins = loadPlugins(scope)
 
+if (environment.development) {
+  globalThis.$nullstack = context
+}
+
 export default class Nullstack {
 
-  static element = element
-  static invoke = invoke
-  static fragment = fragment
   static use = useClientPlugins
   static context = generateContext({})
 
@@ -104,48 +102,3 @@ export default class Nullstack {
   }
 
 }
-
-if (module.hot) {
-  Nullstack.serverHashes ??= {}
-  Nullstack.serverPings = 0
-  Nullstack.clientPings = 0
-  const socket = new WebSocket(`ws${router.base.slice(4)}/ws`)
-  socket.onmessage = async function (e) {
-    const data = JSON.parse(e.data)
-    if (data.type === 'NULLSTACK_SERVER_STARTED') {
-      Nullstack.serverPings++
-      if (Nullstack.needsReload || !environment.hot) {
-        window.location.reload()
-      }
-    }
-  }
-  Nullstack.updateInstancesPrototypes = function updateInstancesPrototypes(klass, hash, serverHash) {
-    for (const key in context.instances) {
-      const instance = context.instances[key]
-      if (instance.constructor.hash === hash) {
-        Object.setPrototypeOf(instance, klass.prototype)
-      }
-    }
-    if (Nullstack.serverHashes[hash]) {
-      if (Nullstack.serverHashes[hash] !== serverHash) {
-        if (Nullstack.clientPings < Nullstack.serverPings) {
-          window.location.reload()
-        } else {
-          Nullstack.needsReload = true
-        }
-      }
-      Nullstack.clientPings++
-    }
-    Nullstack.serverHashes[hash] = serverHash
-    client.update()
-  }
-  Nullstack.hotReload = function hotReload(klass) {
-    if (client.skipHotReplacement) {
-      window.location.reload()
-    } else {
-      Nullstack.start(klass)
-      windowEvent('environment')
-    }
-  }
-  module.hot.decline()
-}

client/invoke.js

@@ -2,6 +2,7 @@ import deserialize from '../shared/deserialize'
 import prefix from '../shared/prefix'
 import page from './page'
 import worker from './worker'
+import client from './client'
 
 export default function invoke(name, hash) {
   return async function _invoke(params = {}) {
@@ -12,8 +13,12 @@ export default function invoke(name, hash) {
     } else {
       worker.queues[name] = [...worker.queues[name], params]
     }
-    const finalHash = hash === this.hash ? hash : `${hash}-${this.hash}`
+    let finalHash = hash === this.hash ? hash : `${hash}-${this.hash}`
     let url = `${worker.api}/${prefix}/${finalHash}/${name}.json`
+    if (module.hot) {
+      const version = client.klasses[hash].__hashes[name]
+      url = `${worker.api}/${prefix}/${version}/${finalHash}/${name}.json`
+    }
     const body = JSON.stringify(params || {})
     const options = {
       headers: worker.headers,

client/lazy.js

@@ -0,0 +1,37 @@
+import client from './client'
+
+const queue = {}
+let next = null
+
+async function preload() {
+  cancelIdleCallback(next)
+  let entry = Object.entries(queue)[0]
+  if (!entry) return
+  let loader = entry[1]
+  if (!loader) return
+  await loader.load()
+  next = requestIdleCallback(preload)
+}
+
+window.addEventListener('blur', () => {
+  preload()
+})
+
+window.addEventListener('focus', () => {
+  cancelIdleCallback(next)
+})
+
+export default function lazy(hash, importer) {
+  const loader = {
+    load: async () => {
+      const mod = await importer()
+      loader.component = mod.default
+      delete queue[hash]
+      client.update()
+    },
+    component: null,
+    __nullstack_lazy: true
+  }
+  queue[hash] = loader
+  return loader
+}

client/logo.njs

@@ -0,0 +1 @@
+export { default } from '../logo'

client/page.js

@@ -11,12 +11,22 @@ delete state.page
 
 const pageProxyHandler = {
   set(target, name, value, receiver) {
-    if (name === 'title') {
-      document.title = value
-    }
     const result = Reflect.set(target, name, value, receiver)
     if (name === 'title') {
+      document.title = value
+      document.querySelector('head > meta[property="og:title"]').setAttribute('content', value)
       windowEvent('page')
+    } else if (name === 'description') {
+      document.querySelector('head > meta[name="description"]').setAttribute('content', value)
+      document.querySelector('head > meta[property="og:description"]').setAttribute('content', value)
+    } else if (name === 'locale') {
+      document.querySelector('html').setAttribute('lang', value)
+      document.querySelector('head > meta[property="og:locale"]').setAttribute('content', value)
+    } else if (name === 'image') {
+      document.querySelector('head > meta[property="og:image"]').setAttribute('content', value)
+    } else if (name === 'canonical') {
+      canonical = (path.indexOf('//') === -1) ? router.base + value : value
+      document.querySelector('head > link[rel="canonical"]').setAttribute('href', canonical)
     }
     client.update()
     return result