waibu-mpa 2.1.1 → 2.1.2

package/extend/bajoTemplate/template/wmpa.js

@@ -98,9 +98,13 @@ class Wmpa {
     return result
   }
 
-  fetchRender = async (body) => {
+  fetchRender = async (body, qs = {}) => {
     if (_.isArray(body)) body = body.join('\n')
-    const resp = await fetch(this.renderUrl, {
+    let url = this.renderUrl + '?'
+    _.forOwn(qs, (v, k) => {
+      url += '&' + k + '=' + v
+    })
+    const resp = await fetch(url, {
       method: 'POST',
       headers: { 'Content-Type': 'text/plain', 'Waibu-Referer': window.location.href },
       body
@@ -187,9 +191,9 @@ class Wmpa {
     return selector instanceof HTMLElement ? selector : document.querySelector(selector)
   }
 
-  createComponent = async (body, wrapper) => {
+  createComponent = async (body, wrapper, qs = {}) => {
     if (_.isArray(body)) body = body.join('\n')
-    const html = await this.fetchRender(body)
+    const html = await this.fetchRender(body, qs)
     return this.createComponentFromHtml(html, wrapper)
   }
 
@@ -201,9 +205,9 @@ class Wmpa {
     return cmp.getAttribute('id')
   }
 
-  replaceWithComponent = async (body, selector, wrapper) => {
+  replaceWithComponent = async (body, selector, wrapper, qs = {}) => {
     let cmp
-    if (_.isString(body) || _.isArray(body)) cmp = await this.createComponent(body, wrapper)
+    if (_.isString(body) || _.isArray(body)) cmp = await this.createComponent(body, wrapper, qs)
     else cmp = body
     const el = this.getElement(selector)
     if (!el) return
@@ -221,9 +225,9 @@ class Wmpa {
     return cmp.getAttribute('id')
   }
 
-  addComponent = async (body, selector = 'body', wrapper, checkChild) => {
+  addComponent = async (body, selector = 'body', wrapper, checkChild, qs = {}) => {
     let cmp
-    if (_.isString(body) || _.isArray(body)) cmp = await this.createComponent(body, wrapper)
+    if (_.isString(body) || _.isArray(body)) cmp = await this.createComponent(body, wrapper, qs)
     else cmp = body
     const el = this.getElement(selector)
     if (!el) return

package/extend/waibuMpa/route/component/render.js

@@ -5,7 +5,7 @@ const component = {
     const { ext = '.html' } = req.body
     reply.header('Content-Type', `text/html; charset=${this.config.page.charset}`)
     reply.header('Content-Language', req.lang)
-    const opts = { req, reply, partial: true, ext }
+    const opts = { req, reply, partial: true, ext, theme: req.params.theme ?? req.query.theme, iconset: req.params.iconset ?? req.query.iconset }
     return this.renderString(req.body, req.query, opts)
   }
 }

package/index.js

@@ -70,6 +70,7 @@ async function factory (pkgName) {
             css: true,
             meta: true,
             scripts: true,
+            links: true,
             inlineScript: true,
             inlineCss: true
           },
@@ -83,6 +84,7 @@ async function factory (pkgName) {
           autoInsert: {
             css: true,
             scripts: true,
+            links: true,
             inlineScript: true,
             inlineCss: true
           }
@@ -91,7 +93,8 @@ async function factory (pkgName) {
           cacheMaxAge: 0,
           excluded: [],
           css: false,
-          scripts: false
+          scripts: false,
+          links: false
         },
         cheerio: {
           loadOptions: {

package/lib/build-page/concat-resources.js

@@ -63,6 +63,7 @@ async function concatResources (options) {
   if (!(this.app.bajoExtra && this.app.bajoCache)) return
   if (this.config.concatResource.cacheMaxAge < 1) return
   if (this.config.concatResource.css) await apply.call(this, { $, req, tag: 'link', attr: 'href', type: 'css' })
+  if (this.config.concatResource.links) await apply.call(this, { $, req, tag: 'link', attr: 'href', type: 'css' })
   if (this.config.concatResource.scripts) await apply.call(this, { $, req, tag: 'script', attr: 'src', type: 'js' })
 }
 

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

@@ -0,0 +1,16 @@
+import { collectRegular } from './script.js'
+
+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}" />`
+}
+
+async function link (options) {
+  const { $ } = options ?? {}
+  const regular = await collectRegular.call(this, 'links', printLink, options)
+  if (regular.length > 0) $('head').prepend(regular.join('\n'))
+}
+
+export default link

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

@@ -1,4 +1,4 @@
-const omitted = ['css', 'style', 'scripts', 'ns', 'appTitle', 'title', 'fullTitle']
+const omitted = ['css', 'style', 'links', 'scripts', 'ns', 'appTitle', 'title', 'fullTitle']
 const names = ['description', 'keywords', 'robots', 'viewport', 'author', 'publisher',
   'application-name', 'generator', 'referrer', 'theme-color', 'googlebot'
 ]

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

@@ -1,6 +1,7 @@
 import injectCss from './inject-elements/css.js'
 import injectMeta from './inject-elements/meta.js'
 import injectScript from './inject-elements/script.js'
+import injectLink from './inject-elements/link.js'
 
 async function injectElements (options) {
   const { $, req, cmp, reply } = options ?? {}
@@ -14,7 +15,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']) {
+    for (const key of ['scripts', 'css', 'links']) {
       let item = Builder[key] ?? []
       if (isString(item)) item = [item]
       if (isFunction(item)) item = await item.call(cmp, req)
@@ -32,11 +33,13 @@ async function injectElements (options) {
       }
     }
   }
-  options.scripts = rsc.scripts ?? []
-  options.css = rsc.css ?? []
+  for (const key of ['scripts', 'css', 'links']) {
+    options[key] = rsc[key] ?? []
+  }
   options.inlineScript = rsc.inlineScript
   options.inlineCss = rsc.inlineCss
   await runHook(`${this.ns}:beforeBuildPageInjectElement`, options)
+  await injectLink.call(this, options)
   await injectCss.call(this, options)
   await injectMeta.call(this, options)
   await injectScript.call(this, options)

package/lib/class/component.js

@@ -261,7 +261,9 @@ async function componentFactory () {
         partial: true,
         ext: params.ext ?? '.html',
         req: this.req,
-        reply: this.reply
+        reply: this.reply,
+        theme: this.theme.name,
+        iconset: this.iconset.name
       }
       let html = await renderString(sentence, params, opts)
       if (extra.wrapped) html = html.slice(3, html.length - 4)

package/lib/class/iconset.js

@@ -9,6 +9,7 @@ async function iconsetFactory () {
       const { isArray } = this.app.lib._
       this.name = opts.name
       this.css = opts.css ?? []
+      this.links = opts.links ?? []
       this.scripts = opts.scripts ?? []
       this.inlineCss = opts.inlineCss
       this.inlineScript = opts.inlineScript
@@ -18,6 +19,7 @@ async function iconsetFactory () {
 
       if (!isArray(this.css)) this.css = [this.css]
       if (!isArray(this.scripts)) this.scripts = [this.scripts]
+      if (!isArray(this.links)) this.links = [this.links]
     }
 
     resolve = (name) => {

package/lib/class/theme.js

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

package/lib/class/view-engine.js

@@ -9,25 +9,27 @@ async function viewEngineFactory () {
       this.history = {}
     }
 
-    _applySetting = (opts = {}) => {
+    _applySetting = (locals = {}, opts = {}) => {
       const { req } = opts
       const { get } = this.app.lib._
-      opts.theme = get(this.app.waibuMpa, 'config.theme.set', req.theme)
-      opts.theme = opts.theme ?? 'default'
-      opts.iconset = get(this.app.waibuMpa, 'config.iconset.set', req.iconset)
-      opts.iconset = opts.iconset ?? 'default'
+      for (const key of ['theme', 'iconset']) {
+        let item = get(this.app.waibuMpa, `config.${key}.set`, req[key])
+        item = item ?? 'default'
+        opts[key] = opts[key] ?? item
+        req[key] = opts[key]
+      }
       opts.postProcessor = applyFormat.bind(this.plugin)
       opts.groupId = opts.req.id
       opts.lang = opts.req.lang
     }
 
     render = async (tpl, locals = {}, opts = {}) => {
-      this._applySetting(opts)
+      this._applySetting(locals, opts)
       return await this.app.bajoTemplate.render(tpl, locals, opts)
     }
 
     renderString = async (content, locals = {}, opts = {}) => {
-      this._applySetting(opts)
+      this._applySetting(locals, opts)
       return await this.app.bajoTemplate.renderString(content, locals, opts)
     }
   }

package/lib/class/widget.js

@@ -4,6 +4,7 @@ async function widgetFactory () {
   class MpaWidget extends this.app.baseClass.MpaTools {
     static scripts = []
     static css = []
+    static links = []
     static inlineScript = null
     static inlineCss = null
 

package/lib/collect-iconsets.js

@@ -19,8 +19,9 @@ async function collectIconsets (ctx) {
     if (isFunction(mod)) mod = await mod.call(this, ctx)
     if (!isArray(mod)) mod = [mod]
     for (const m of mod) {
-      m.css = await loadResource.call(me, m, 'css')
-      m.scripts = await loadResource.call(me, m, 'scripts')
+      for (const key of ['css', 'links', 'scripts']) {
+        m[key] = await loadResource.call(me, m, key)
+      }
       m.ns = ns
       all.push(m)
     }

package/lib/collect-themes.js

@@ -46,8 +46,8 @@ async function build (mod, fw) {
     const cmp = new Cls({ plugin: fw ? fw.plugin : mod.plugin, $, theme, iconset, req, reply, locals, scriptBlock, styleBlock })
     await cmp.loadBaseWidgets()
     const framework = theme.framework ? find(me.themes, { name: theme.framework }) : undefined
-    merge(cmp.widget, framework ? framework.widget : theme.widget)
-    Object.assign(cmp, framework ? framework.method : theme.method)
+    merge(cmp.widget, framework ? framework.widget : {}, theme.widget)
+    Object.assign(cmp, merge({}, framework ? framework.method : {}, theme.method))
     return cmp
   }
   this.themes.push(theme)
@@ -78,10 +78,9 @@ async function collectThemes (ctx) {
       if (!isArray(m.meta)) m.meta = [m.meta]
       m.metaExcludes = m.metaExcludes ?? []
       if (!isArray(m.metaExcludes)) m.metaExcludes = [m.metaExcludes]
-      m.css = await loadResource.call(this, m, 'css')
-      m.scripts = await loadResource.call(this, m, 'scripts')
-      m.cssExcludes = await loadResource.call(this, m, 'cssExcludes')
-      m.scriptsExcludes = await loadResource.call(this, m, 'scriptsExcludes')
+      for (const key of ['css', 'links', 'scripts', 'cssExcludes', 'linksExcludes', 'scriptsExcludes']) {
+        m[key] = await loadResource.call(this, m, key)
+      }
       m.component = {}
       if (m.framework) modsf.push(m) // module needs framework
       else modso.push(m) // independent module
@@ -93,9 +92,9 @@ async function collectThemes (ctx) {
   for (const mod of modsf) {
     const fw = find(modso, { name: mod.framework })
     if (!fw) throw this.error('cantFindThemeFramework%s', mod.framework)
-    mod.meta.push(...without(fw.meta, ...mod.metaExcludes))
-    mod.css.push(...without(fw.css, ...mod.cssExcludes))
-    mod.scripts.push(...without(fw.scripts, ...mod.scriptsExcludes))
+    for (const key of ['meta', 'css', 'links', 'scripts']) {
+      mod[key].push(...without(fw[key], ...mod[`${key}Excludes`]))
+    }
     mod.moveToEnd = fw.moveToEnd
     await build.call(this, mod, fw)
   }

package/lib/decorate.js

@@ -11,16 +11,18 @@ async function decorate (ctx) {
   ctx.decorateRequest('darkMode', cfg.darkMode.set)
   ctx.decorateRequest('referer', '')
   ctx.decorateReply('ctags', null)
-  ctx.decorateReply('view', async function (tpl, params = {}) {
+  ctx.decorateReply('view', async function (tpl, params = {}, opts = {}) {
     let ext = path.extname(tpl)
     if (ext === '.md') ext = '.html'
     let mimeType = isEmpty(ext) ? 'text/html' : mime.getType(ext)
     mimeType += `; charset=${cfg.page.charset}`
     this.header('Content-Type', mimeType)
     this.header('Content-Language', this.request.lang)
-    const opts = { req: this.request, reply: this }
-    if (me.themes.length === 1) this.request.theme = me.themes[0].name
-    if (me.iconsets.length === 1) this.request.iconset = me.iconsets[0].name
+    opts.req = this.request
+    opts.reply = this
+    for (const item of ['theme', 'iconset']) {
+      if (me[item + 's'].length === 1) this.request[item] = me[item + 's'][0].name
+    }
     const result = await me.render(tpl, params, opts)
     if (this.request.session) {
       ext = path.extname(this.request.url)

package/package.json

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