waibu-mpa 2.2.0 → 2.3.0

package/extend/waibu/boot.js

@@ -6,10 +6,12 @@ import collectIconsets from '../../lib/collect-iconsets.js'
 import handleSession from '../../lib/session/setup.js'
 import subApp from '../../lib/sub-app.js'
 import errorHandler from '../../lib/error-handler.js'
+import notFoundHandler from '../../lib/not-found-handler.js'
 
 const boot = {
   level: 10,
   errorHandler,
+  notFoundHandler,
   handler: async function (prefix) {
     const { importPkg, importModule } = this.app.bajo
     const bodyParser = await importPkg('waibu:@fastify/formbody')

package/extend/waibuMpa/iconset.js

@@ -346,7 +346,7 @@ const mapping = {
   zoomOut: ''
 }
 
-function iconset (ctx) {
+function iconset () {
   return {
     name: 'default',
     css: 'waibuMpa.asset:/css/linearicons.css',

package/index.js

@@ -40,7 +40,8 @@ async function factory (pkgName) {
           charset: 'utf-8',
           cacheMaxAge: 0,
           insertWarning: false,
-          usePluginTitle: false
+          usePluginTitle: false,
+          scriptsAtEndOfBody: true
         },
         darkMode: {
           set: null,
@@ -231,7 +232,7 @@ async function factory (pkgName) {
 
     getSessionId = (rawCookie, secure) => {
       const cookieName = this.config.session.cookieName
-      return this.ctx.parseCookie(rawCookie)[cookieName]
+      return this.webAppCtx.parseCookie(rawCookie)[cookieName]
     }
 
     getViewEngine = (ext) => {

package/lib/build-page/inject-elements/css.js

@@ -7,10 +7,10 @@ export function printLink (link) {
 
 async function css (options) {
   const { $ } = options ?? {}
-  const inline = await collectInline.call(this, 'inlineCss', options)
-  if (inline.length > 0) $('head').prepend(`<style>\n${inline.join('\n')}\n</style>`)
   const regular = await collectRegular.call(this, 'css', printLink, options)
-  if (regular.length > 0) $('head').prepend(regular.join('\n'))
+  if (regular.length > 0) $('head').append(regular.join('\n'))
+  const inline = await collectInline.call(this, 'inlineCss', options)
+  if (inline.length > 0) $('head').append(`<style>\n${inline.join('\n')}\n</style>`)
 }
 
 export default css

package/lib/build-page/inject-elements/link.js

@@ -4,13 +4,15 @@ export function printLink (link) {
   const { routePath } = this.app.waibu
   const { isString } = this.app.lib._
   const item = isString(link) ? { href: link, rel: 'stylesheet', type: 'text/css' } : link
-  return `<link href="${routePath(item.href)}" rel="${item.rel}" type="${item.type}" />`
+  if (item.href) item.href = routePath(item.href)
+  const attrs = this.stringifyAttribs(item)
+  return `<link ${attrs} />`
 }
 
 async function link (options) {
   const { $ } = options ?? {}
   const regular = await collectRegular.call(this, 'links', printLink, options)
-  if (regular.length > 0) $('head').prepend(regular.join('\n'))
+  if (regular.length > 0) $('head').append(regular.join('\n'))
 }
 
 export default link

package/lib/build-page/inject-elements/meta.js

@@ -7,14 +7,13 @@ const names = ['description', 'keywords', 'robots', 'viewport', 'author', 'publi
 
 async function meta (options) {
   const { runHook, importPkg } = this.app.bajo
-  const { map, uniq, isArray, kebabCase, keys, omit, get, isFunction } = this.app.lib._
+  const { map, uniq, isArray, keys, omit, get, isFunction } = this.app.lib._
   const { sprintf } = this.app.lib
   const { $, theme, req, locals } = options ?? {}
   const { page = {} } = locals
   let items = []
   // meta
-  const links = ['preconnect', 'dnsPrefetch']
-  for (const attr of keys(omit(locals.page, [...links, ...omitted]))) {
+  for (const attr of keys(omit(locals.page, [...omitted]))) {
     if (!page[attr]) continue
     if (!names.includes(attr)) continue
     items.push({
@@ -22,28 +21,19 @@ async function meta (options) {
       content: isArray(page[attr]) ? page[attr].join(', ') : page[attr]
     })
   }
-  // links
-  for (const attr of links) {
-    if (!page[attr]) continue
-    const all = isArray(page[attr]) ? page[attr] : page[attr] = [page[attr]]
-    for (const a of all) {
-      const [href, ...params] = a.split('|')
-      const item = {
-        tag: 'link',
-        rel: kebabCase(attr),
-        href
-      }
-      for (const p of params ?? []) {
-        item[p] = true
-      }
-      items.push(item)
-    }
-  }
   if (this.config.theme && this.config.theme.autoInsert.meta) {
     await runHook(`${this.ns}.${theme.name}:beforeInjectMeta`, { meta: theme.meta, items, req })
     items.push(...(theme.meta ?? []))
     await runHook(`${this.ns}.${theme.name}:afterInjectMeta`, { meta: theme.meta, items, req })
   }
+  // title
+  const formatter = get(this, 'app.waibuMpa.pageTitleFormat', '%s : %s')
+  const title = page.fullTitle ?? page.title
+  let pageTitle
+  if (isFunction(formatter)) pageTitle = await formatter.call(this, locals)
+  else pageTitle = sprintf(formatter, title, this.app.waibuMpa.getAppTitle(req.lang))
+  $('head').append(`<title>${pageTitle}</title>`)
+  // favicon
   const favicon = this.app.waibu.config.favicon
   if (favicon) {
     const mime = await importPkg('waibu:mime')
@@ -51,20 +41,14 @@ async function meta (options) {
     const type = mime.getType(ext)
     items.push({ tag: 'link', href: `/favicon${ext}`, rel: 'icon', type })
   }
+  // meta
   items = map(items, m => {
     const tag = m.tag ?? 'meta'
     delete m.tag
     const attrs = this.stringifyAttribs(m)
     return `<${tag} ${attrs} />`
   })
-  $('head').prepend(uniq(items).join('\n'))
-  // title
-  const formatter = get(this, 'app.waibuMpa.pageTitleFormat', '%s : %s')
-  const title = page.fullTitle ?? page.title
-  let pageTitle
-  if (isFunction(formatter)) pageTitle = await formatter.call(this, locals)
-  else pageTitle = sprintf(formatter, title, this.app.waibuMpa.getAppTitle(req.lang))
-  $('head').append(`<title>${pageTitle}</title>`)
+  $('head').append(uniq(items).join('\n'))
 }
 
 export default meta

package/lib/build-page/inject-elements/script.js

@@ -64,12 +64,13 @@ export async function collectInline (type, options = {}) {
 async function script (options = {}) {
   const { $, cmp, locals } = options
   const { render } = this.app.bajoTemplate
+  const parent = this.config.page.scriptsAtEndOfBody ? 'body' : 'head'
   const regular = await collectRegular.call(this, 'scripts', printScript, options)
-  if (regular.length > 0) $('body').append(regular.join('\n'))
+  if (regular.length > 0) $(parent).append(regular.join('\n'))
   const inline = await collectInline.call(this, 'inlineScript', options)
   if (inline.length > 0) cmp.scriptBlock.root.push(...inline)
   const script = await render(locals.page.scriptBlock, { block: cmp.scriptBlock }, { default: 'bajoTemplate.partial:/script-block.html' })
-  $('body').append(script)
+  $(parent).append(script)
 }
 
 export default script

package/lib/build-page/inject-elements.js

@@ -14,7 +14,7 @@ async function injectElements (options) {
     let Builder = get(cmp, `widget.${tag}`)
     if (!isFunction(Builder)) continue
     if (!isClass(Builder)) Builder = await Builder.call(cmp)
-    for (const key of ['scripts', 'css', 'links']) {
+    for (const key of ['links', 'scripts', 'css']) {
       let item = Builder[key] ?? []
       if (isString(item)) item = [item]
       if (isFunction(item)) item = await item.call(cmp, req)
@@ -32,15 +32,15 @@ async function injectElements (options) {
       }
     }
   }
-  for (const key of ['scripts', 'css', 'links']) {
+  for (const key of ['links', 'scripts', 'css']) {
     options[key] = rsc[key] ?? []
   }
   options.inlineScript = rsc.inlineScript
   options.inlineCss = rsc.inlineCss
   await runHook(`${this.ns}:beforeBuildPageInjectElement`, options)
+  await injectMeta.call(this, options)
   await injectLink.call(this, options)
   await injectCss.call(this, options)
-  await injectMeta.call(this, options)
   await injectScript.call(this, options)
 }
 

package/lib/class/theme.js

@@ -5,9 +5,9 @@ async function themeFactory () {
       this.name = name
       this.css = []
       this.meta = []
+      this.links = []
       this.moveToEnd = ''
       this.scipts = undefined
-      this.links = undefined
       this.inlineCss = undefined
       this.inlineScript = undefined
       this.framework = undefined

package/lib/error-handler.js

@@ -1,4 +1,4 @@
-import { handler } from './not-found.js'
+import notFoundHandler from './not-found-handler.js'
 
 async function errorHandler (err, req, reply) {
   const { getPluginFile } = this.app.bajo
@@ -9,7 +9,7 @@ async function errorHandler (err, req, reply) {
   reply.code(err.statusCode)
 
   if (err.message === '_notFound' || err.statusCode === 404) {
-    return await handler.call(this, req, reply, err)
+    return await notFoundHandler.call(this, err, req, reply)
   }
   if (err.noContent) return ''
   const ns = err.ns ?? this.ns

package/lib/load-resource.js

@@ -1,20 +1,22 @@
 async function loadResource (mod = [], item) {
   const { breakNsPath, readConfig } = this.app.bajo
-  const { isArray, isEmpty } = this.app.lib._
+  const { isString, isArray, isEmpty } = this.app.lib._
 
   if (isEmpty(mod[item])) return []
   if (!isArray(mod[item])) mod[item] = [mod[item]]
   const items = []
   const extItems = []
   for (const i in mod[item]) {
-    if (mod[item][i].startsWith('/')) items.push(mod.css[i])
-    else {
-      let name = mod[item][i]
-      if (['$', '^'].includes(name[0])) name = name.slice(1)
-      const { ns, path, subNs } = breakNsPath(name, undefined, false)
-      if (subNs === 'load') extItems.push({ ns, path })
-      else items.push(mod[item][i])
-    }
+    if (isString(mod[item][i])) {
+      if (mod[item][i].startsWith('/')) items.push(mod.css[i])
+      else {
+        let name = mod[item][i]
+        if (['$', '^'].includes(name[0])) name = name.slice(1)
+        const { ns, path, subNs } = breakNsPath(name, undefined, false)
+        if (subNs === 'load') extItems.push({ ns, path })
+        else items.push(mod[item][i])
+      }
+    } else items.push(mod[item][i])
   }
   for (const c of extItems) {
     let emod = await readConfig(`${c.ns}:${c.path}`, { ns: c.ns })

package/lib/not-found-handler.js

@@ -0,0 +1,20 @@
+async function notFoundHandler (err, req, reply) {
+  const welcome = req.url.split('?')[0] === '/'
+  const { resolveTemplate } = this.app.bajoTemplate
+  const msg = req.t('routeNotFound%s%s', req.url, req.method)
+  const error = err ?? this.error(msg)
+  if (err) error.message = msg
+  error.statusCode = 404
+  reply.code(404)
+  if (error.noContent) return ''
+  const ns = error.ns ?? this.ns
+  let tpl = welcome ? `${this.ns}.template:/welcome.html` : `${ns}.template:/404.html`
+  try {
+    await resolveTemplate(tpl)
+  } catch (err) {
+    tpl = `${this.ns}.template:/404.html`
+  }
+  if (reply.view) return await reply.view(tpl, { error })
+}
+
+export default notFoundHandler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waibu-mpa",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "MPA support for Waibu Framework",
   "main": "index.js",
   "scripts": {

package/wiki/CHANGES.md

@@ -1,5 +1,14 @@
 # Changes
 
+## 2026-02-09
+
+- [2.3.0] Add ```config.page.scriptsAtEndOfBody``` to put scripts at the end of body or not. Defaults to ```true```
+- [2.3.0] Add not found & error handlers
+- [2.3.0] Bug fix on old context
+- [2.3.0] Bug fix on ```loadResource()```
+- [2.3.0] Bug fix on ```<link />``` injection
+- [2.3.0] Bug fix on order of metas, links & scripts
+
 ## 2026-02-05
 
 - [2.1.11] Bug fix on rendering ```preconnect```

package/lib/not-found.js

@@ -1,58 +0,0 @@
-function redirSvc (req) {
-  const { trim, find, get } = this.app.lib._
-  const { outmatch } = this.app.lib
-  let match = false
-  let [prefix, ...args] = trim(req.url, '/').split('/')
-  args = '/' + args.join('/')
-  let plugin = find(this.app.getAllNs(), p => {
-    return get(this, `app.${p}.config.waibu.prefix`) === prefix
-  })
-  if (!plugin) {
-    plugin = 'main'
-    args = `/${prefix}`
-  }
-  const items = get(this, `app.${plugin}.config.waibuMpa.redirect`, {})
-  for (const k in items) {
-    const isMatch = outmatch(k)
-    if (isMatch(args)) {
-      match = items[k]
-      break
-    }
-  }
-  return match
-}
-
-export async function handler (req, reply, err) {
-  const { getMethod } = this.app.bajo
-  const { resolveTemplate } = this.app.bajoTemplate
-  let redirectTo = await redirSvc.call(this, req, reply)
-  if (redirectTo !== false) {
-    const fn = getMethod(redirectTo, false)
-    if (fn) redirectTo = await fn(req)
-    if (redirectTo) return reply.redirectTo(redirectTo)
-  }
-  const welcome = req.url.split('?')[0] === '/'
-  const msg = req.t('routeNotFound%s%s', req.url, req.method)
-  const error = err ?? this.error(msg)
-  if (err) error.message = msg
-  error.statusCode = 404
-  reply.code(404)
-  if (error.noContent) return ''
-  const ns = error.ns ?? this.ns
-  let tpl = welcome ? `${this.ns}.template:/welcome.html` : `${ns}.template:/404.html`
-  try {
-    await resolveTemplate(tpl)
-  } catch (err) {
-    tpl = `${this.ns}.template:/404.html`
-  }
-  if (reply.view) return await reply.view(tpl, { error })
-}
-
-async function notFound (ctx) {
-  const me = this
-  await ctx.setNotFoundHandler(async function (req, reply) {
-    return await handler.call(me, req, reply)
-  })
-}
-
-export default notFound