Fix page-router to diff & patch all elements from the newly loaded pa…

…ge. Fixes #141
nuejs · Jan 15, 2024 · 8daccb1 · 8daccb1
1 parent c47713c
commit 8daccb1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/packages/nuekit/package.json b/packages/nuekit/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "nuekit",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "The closer-to-standards web framework. Build sites and apps with less effort.",
 	"homepage": "https://nuejs.org",
 	"license": "MIT",

diff --git a/packages/nuekit/src/browser/app-router.js b/packages/nuekit/src/browser/app-router.js
@@ -1,4 +1,5 @@
 
+// Router for single-page applications
 import { onclick, loadPage, setSelected } from './page-router.js'
 
 const fns = []

diff --git a/packages/nuekit/src/browser/page-router.js b/packages/nuekit/src/browser/page-router.js
@@ -1,33 +1,44 @@
 
-// MPA router
-
+// Router for multi-page applications
 const is_browser = typeof window == 'object'
 
 export async function loadPage(path) {
   dispatchEvent(new Event('before:route'))
 
+  // DOM of the new page
   const dom = mkdom(await getHTML(path))
 
-  // title
+  // change title
   document.title = $('title', dom)?.textContent
 
-  // main / body
-  const main = $('main')
-  const main2 = $('main', dom)
-
-  if (main && main2) {
-    main.replaceWith(main2)
-  } else {
-    $('body').innerHTML = $('body2', dom).innerHTML
-    $('body').classList = $('body2', dom).classList
-  }
-
   // inline CSS
   const new_styles = swapStyles($$('style'), $$('style', dom))
   new_styles.forEach(style => $('head').appendChild(style))
 
+  // body class
+  $('body').classList = $('body2', dom).classList
+
+  // content
+  for (const query of ['header', 'main', 'footer']) {
+    const a = $('body >' + query)
+    const b = $('body2 >' + query, dom)
+
+    // update (if changed)
+    if (a && b) {
+      if (a.outerHTML != b.outerHTML) a.replaceWith(b)
+
+    // remove
+    } else if (a) {
+      a.remove()
+
+    // add
+    } else {
+      const fn = query == 'footer' ? 'append' : 'prepend'
+      document.body[fn](b)
+    }
+  }
 
-  // stylesheets
+  // external CSS
   const paths = swapStyles($$('link'), $$('link', dom))
 
   loadCSS(paths, () => {

diff --git a/packages/nuekit/src/init.js b/packages/nuekit/src/init.js
@@ -18,7 +18,7 @@ export async function init({ dist, is_dev, esbuild }) {
 
 
   // has all latest?
-  const latest = join(outdir, '.020')
+  const latest = join(outdir, '.031')
   try {
     return await fs.stat(latest)