waibu-mpa 2.1.0 → 2.1.1

package/index.js

@@ -1,5 +1,7 @@
 import { stripHtml } from 'string-strip-html'
 import iconsetMappings from './lib/iconset-mappings.js'
+import toolsFactory from './lib/class/tools.js'
+import widgetFactory from './lib/class/widget.js'
 import path from 'path'
 
 // taken from: https://stackoverflow.com/questions/52928550/js-get-list-of-all-available-standard-html-tags
@@ -130,6 +132,8 @@ async function factory (pkgName) {
     init = async () => {
       const { trim } = this.app.lib._
       this.config.waibu.prefix = trim(this.config.waibu.prefix, '/')
+      await toolsFactory.call(this)
+      await widgetFactory.call(this)
     }
 
     arrayToAttr = (array = [], delimiter = ' ') => {

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

@@ -11,7 +11,7 @@ async function injectElements (options) {
   if (req.darkMode) $('body').attr('data-bs-theme', 'dark')
   const rsc = {}
   for (const tag of reply.ctags ?? []) {
-    let Builder = get(cmp, `factory.${tag}`)
+    let Builder = get(cmp, `widget.${tag}`)
     if (!isFunction(Builder)) continue
     if (!isClass(Builder)) Builder = await Builder.call(cmp)
     for (const key of ['scripts', 'css']) {

package/lib/class/component.js

@@ -1,316 +1,318 @@
-import baseFactory from './base-factory.js'
 import path from 'path'
 
-class Component {
-  constructor ({ plugin, $, theme, iconset, locals, reply, req, scriptBlock, styleBlock } = {}) {
-    const { get } = plugin.app.lib._
-    this.baseFactory = baseFactory
-    this.plugin = plugin
-    this.app = plugin.app
-    this.$ = $
-    this.theme = theme
-    this.iconset = iconset
-    this.locals = locals
-    this.reply = reply
-    this.req = req
-    this.cacheMaxAge = get(plugin, 'app.waibuMpa.config.theme.component.cacheMaxAgeDur', 0)
-    this.namespace = 'c:'
-    this.noTags = []
-    this.scriptBlock = scriptBlock
-    this.styleBlock = styleBlock
-    this.factory = {}
-  }
+async function componentFactory () {
+  class MpaComponent extends this.app.baseClass.MpaTools {
+    constructor ({ plugin, $, theme, iconset, locals, reply, req, scriptBlock, styleBlock } = {}) {
+      super(plugin)
+      const { get } = plugin.app.lib._
+      this.$ = $
+      this.theme = theme
+      this.iconset = iconset
+      this.locals = locals
+      this.reply = reply
+      this.req = req
+      this.cacheMaxAge = get(plugin, 'app.waibuMpa.config.theme.component.cacheMaxAgeDur', 0)
+      this.namespace = 'c:'
+      this.noTags = []
+      this.scriptBlock = scriptBlock
+      this.styleBlock = styleBlock
+      this.widget = {}
+    }
 
-  addScriptBlock = (type, block) => {
-    if (!block) {
-      block = type
-      type = 'root'
+    addScriptBlock = (type, block) => {
+      if (!block) {
+        block = type
+        type = 'root'
+      }
+      if (typeof block === 'string') block = [block]
+      this.scriptBlock[type] = this.scriptBlock[type] ?? []
+      this.scriptBlock[type].push(...block)
     }
-    if (typeof block === 'string') block = [block]
-    this.scriptBlock[type] = this.scriptBlock[type] ?? []
-    this.scriptBlock[type].push(...block)
-  }
 
-  addStyleBlock = (type, block) => {
-    if (!block) {
-      block = type
-      type = 'root'
+    addStyleBlock = (type, block) => {
+      if (!block) {
+        block = type
+        type = 'root'
+      }
+      if (typeof block === 'string') block = [block]
+      this.styleBlock[type] = this.styleBlock[type] ?? []
+      this.styleBlock[type].push(...block)
     }
-    if (typeof block === 'string') block = [block]
-    this.styleBlock[type] = this.styleBlock[type] ?? []
-    this.styleBlock[type].push(...block)
-  }
 
-  /**
-   * Loads base factories dynamically from the file system.
-   * @async
-   */
+    /**
+     * Loads base factories dynamically from the file system.
+     * @async
+     */
 
-  loadBaseFactories = async () => {
-    const { camelCase } = this.app.lib._
-    const { importModule } = this.app.bajo
-    const { fastGlob } = this.app.lib
-    const pattern = `${this.app.waibuMpa.dir.pkg}/lib/class/factory/*.js`
-    const files = await fastGlob(pattern)
-    for (const file of files) {
-      const mod = await importModule(file)
-      const name = camelCase(path.basename(file, '.js'))
-      this.factory[name] = mod
+    loadBaseWidgets = async () => {
+      const { camelCase } = this.app.lib._
+      const { importModule } = this.app.bajo
+      const { fastGlob } = this.app.lib
+      const pattern = `${this.app.waibuMpa.dir.pkg}/lib/class/widget/*.js`
+      const files = await fastGlob(pattern)
+      for (const file of files) {
+        const mod = await importModule(file)
+        const name = camelCase(path.basename(file, '.js'))
+        this.widget[name] = await mod.call(this.plugin)
+      }
     }
-  }
 
-  /**
-   * Retrieves a builder class or instance for a specific method.
-   * @async
-   * @param {string} method - The method name to retrieve the builder for.
-   * @returns {Promise<Function|Object>} The builder class or instance.
-   */
-  getBuilder = async (method) => {
-    const { isClass } = this.app.lib.aneka
-    let Builder = this.factory[method]
-    if (!isClass(Builder)) Builder = await Builder.call(this)
-    return Builder
-  }
-
-  /**
-   * Determines the method to use based on the provided parameters.
-   * @param {Object} params - The parameters containing the method information.
-   * @returns {string} The determined method name.
-   */
-  getMethod = (params) => {
-    let method = params.ctag
-    if (!this.factory[method]) method = 'any'
-    return method
-  }
+    /**
+     * Retrieves a widget builder class or instance for a specific method.
+     * @async
+     * @param {string} method - The method name to retrieve the builder for.
+     * @returns {Promise<Function|Object>} The builder class or instance.
+     */
+    getWidget = async (method) => {
+      const { isClass } = this.app.lib.aneka
+      let Widget = this.widget[method]
+      if (!isClass(Widget)) Widget = await Widget.call(this.plugin)
+      return Widget
+    }
 
-  /**
-   * Builds a tag with the given parameters and options.
-   * @async
-   * @param {Object} [params={}] - The parameters for the tag.
-   * @param {Object} [opts={}] - Additional options for building the tag.
-   * @returns {Promise<string|boolean>} The rendered HTML or `false` if the build fails.
-   */
-  buildTag = async (params = {}, opts = {}) => {
-    const { sprintf } = this.app.lib
-    const { compile } = this.app.bajoTemplate
-    const { escape } = this.app.waibu
-    const { isEmpty, merge, uniq, without } = this.app.lib._
-    params.ctag = params.tag
-    const method = this.getMethod(params)
-    if (opts.attr) params.attr = merge({}, opts.attr, params.attr)
-    this.normalizeAttr(params)
-    params.attr.content = params.attr.content ?? ''
-    let html
-    if (params.attr.content.includes('%s')) html = sprintf(params.attr.content, params.html)
-    else if (isEmpty(params.html)) html = params.attr.content
-    if (!isEmpty(html)) params.html = params.noEscape ? html : escape(html)
-    await this.iconAttr(params, method)
-    await this.beforeBuildTag(method, params)
-    const Builder = await this.getBuilder(method)
-    const builder = new Builder({ component: this, params })
-    const resp = await builder.build()
-    if (resp === false) {
-      return false
+    /**
+     * Determines the method to use based on the provided parameters.
+     * @param {Object} params - The parameters containing the method information.
+     * @returns {string} The determined method name.
+     */
+    getMethod = (params) => {
+      let method = params.ctag
+      if (!this.widget[method]) method = 'any'
+      return method
     }
 
-    await this.afterBuildTag(method, params)
-    params.attr.class = without(uniq(params.attr.class), undefined, null, '')
-    if (isEmpty(params.attr.class)) delete params.attr.class
-    if (isEmpty(params.attr.style)) delete params.attr.style
-    if (isEmpty(params.html)) return await this.render(params)
+    /**
+     * Builds a tag with the given parameters and options.
+     * @async
+     * @param {Object} [params={}] - The parameters for the tag.
+     * @param {Object} [opts={}] - Additional options for building the tag.
+     * @returns {Promise<string|boolean>} The rendered HTML or `false` if the build fails.
+     */
+    buildTag = async (params = {}, opts = {}) => {
+      const { sprintf } = this.app.lib
+      const { compile } = this.app.bajoTemplate
+      const { escape } = this.app.waibu
+      const { isEmpty, merge, uniq, without } = this.app.lib._
+      params.ctag = params.tag
+      const method = this.getMethod(params)
+      if (opts.attr) params.attr = merge({}, opts.attr, params.attr)
+      this.normalizeAttr(params)
+      params.attr.content = params.attr.content ?? ''
+      let html
+      if (params.attr.content.includes('%s')) html = sprintf(params.attr.content, params.html)
+      else if (isEmpty(params.html)) html = params.attr.content
+      if (!isEmpty(html)) params.html = params.noEscape ? html : escape(html)
+      await this.iconAttr(params, method)
+      await this.beforeBuildTag(method, params)
+      const Widget = await this.getWidget(method)
+      const widget = new Widget({ component: this, params })
+      const resp = await widget.build()
+      if (resp === false) {
+        return false
+      }
 
-    const merged = merge({}, params.locals, { attr: params.attr })
-    const result = await compile(params.html, merged, { ttl: this.cacheMaxAge })
-    params.html = result
-    return await this.render(params)
-  }
+      await this.afterBuildTag(method, params)
+      params.attr.class = without(uniq(params.attr.class), undefined, null, '')
+      if (isEmpty(params.attr.class)) delete params.attr.class
+      if (isEmpty(params.attr.style)) delete params.attr.style
+      if (isEmpty(params.html)) return await this.render(params)
 
-  /**
-   * Normalizes the attributes of the given parameters.
-   * @param {Object} [params={}] - The parameters containing attributes to normalize.
-   * @param {Object} [opts={}] - Additional options for normalization.
-   */
-  normalizeAttr = (params = {}, opts = {}) => {
-    const { without, keys, isString, isArray } = this.app.lib._
-    const { generateId } = this.app.lib.aneka
-    params.attr = params.attr ?? {}
-    params.attr.class = this.app.waibuMpa.attrToArray(params.attr.class)
-    params.attr.style = this.app.waibuMpa.attrToObject(params.attr.style)
-    if (isString(opts.cls)) params.attr.class.push(opts.cls)
-    else if (isArray(opts.cls)) params.attr.class.push(...opts.cls)
-    if (opts.tag) params.tag = opts.tag
-    if (opts.autoId) params.attr.id = isString(params.attr.id) ? params.attr.id : generateId('alpha')
-    for (const k of without(keys(opts), 'cls', 'tag', 'autoId')) {
-      params.attr[k] = opts[k]
+      const merged = merge({}, params.locals, { attr: params.attr })
+      const result = await compile(params.html, merged, { ttl: this.cacheMaxAge })
+      params.html = result
+      return await this.render(params)
     }
-    params.html = params.html ?? ''
-  }
 
-  /**
-   * Renders the final HTML for the given parameters.
-   * @async
-   * @param {Object} [params={}] - The parameters for rendering.
-   * @returns {Promise<string>} The rendered HTML.
-   */
-  render = async (params = {}) => {
-    const { omit, isEmpty, merge, kebabCase, isArray } = this.app.lib._
-    const { stringifyAttribs } = this.app.waibuMpa
-    params.attr = params.attr ?? {}
+    /**
+     * Normalizes the attributes of the given parameters.
+     * @param {Object} [params={}] - The parameters containing attributes to normalize.
+     * @param {Object} [opts={}] - Additional options for normalization.
+     */
+    normalizeAttr = (params = {}, opts = {}) => {
+      const { without, keys, isString, isArray } = this.app.lib._
+      const { generateId } = this.app.lib.aneka
+      params.attr = params.attr ?? {}
+      params.attr.class = this.app.waibuMpa.attrToArray(params.attr.class)
+      params.attr.style = this.app.waibuMpa.attrToObject(params.attr.style)
+      if (isString(opts.cls)) params.attr.class.push(opts.cls)
+      else if (isArray(opts.cls)) params.attr.class.push(...opts.cls)
+      if (opts.tag) params.tag = opts.tag
+      if (opts.autoId) params.attr.id = isString(params.attr.id) ? params.attr.id : generateId('alpha')
+      for (const k of without(keys(opts), 'cls', 'tag', 'autoId')) {
+        params.attr[k] = opts[k]
+      }
+      params.html = params.html ?? ''
+    }
 
-    params.tag = params.attr.tag ?? ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(params.tag) ? params.tag : kebabCase(params.tag)
-    params.attr = omit(params.attr, ['tag', 'content'])
-    params.html = params.html ?? ''
-    params.attrs = stringifyAttribs(params.attr)
-    if (!isEmpty(params.attrs)) params.attrs = ' ' + params.attrs
-    let html = isArray(params.html) ? params.html.join('\n') : params.html
-    if (!params.noTag) {
-      html = params.selfClosing ? `<${params.tag}${params.attrs}/>` : `<${params.tag}${params.attrs}>${params.html}</${params.tag}>`
-      const method = this.getMethod(params)
-      if (this.factory[method]) { // static method on Builder
-        const Builder = await this.getBuilder(method)
-        if (Builder.after) {
-          html = (await Builder.after.call(this, merge({}, params, { result: html }))) ?? html
+    /**
+     * Renders the final HTML for the given parameters.
+     * @async
+     * @param {Object} [params={}] - The parameters for rendering.
+     * @returns {Promise<string>} The rendered HTML.
+     */
+    render = async (params = {}) => {
+      const { omit, isEmpty, merge, kebabCase, isArray } = this.app.lib._
+      const { stringifyAttribs } = this.app.waibuMpa
+      params.attr = params.attr ?? {}
+
+      params.tag = params.attr.tag ?? ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(params.tag) ? params.tag : kebabCase(params.tag)
+      params.attr = omit(params.attr, ['tag', 'content'])
+      params.html = params.html ?? ''
+      params.attrs = stringifyAttribs(params.attr)
+      if (!isEmpty(params.attrs)) params.attrs = ' ' + params.attrs
+      let html = isArray(params.html) ? params.html.join('\n') : params.html
+      if (!params.noTag) {
+        html = params.selfClosing ? `<${params.tag}${params.attrs}/>` : `<${params.tag}${params.attrs}>${params.html}</${params.tag}>`
+        const method = this.getMethod(params)
+        if (this.widget[method]) { // static method on Widget
+          const Widget = await this.getWidget(method)
+          if (Widget.after) {
+            html = (await Widget.after.call(this, merge({}, params, { result: html }))) ?? html
+          }
         }
-      }
-    } else if (!this.noTags.includes(params.attr.octag)) this.noTags.push(params.attr.octag)
-    if (params.prepend) html = `${params.prepend}${html}`
-    if (params.append) html += params.append
-    return html
-  }
+      } else if (!this.noTags.includes(params.attr.octag)) this.noTags.push(params.attr.octag)
+      if (params.prepend) html = `${params.prepend}${html}`
+      if (params.append) html += params.append
+      return html
+    }
 
-  /**
-   * Processes icon-related attributes and appends them to the HTML.
-   * @async
-   * @param {Object} [params={}] - The parameters containing icon attributes.
-   * @param {string} method - The method name.
-   */
-  iconAttr = async (params = {}, method) => {
-    if (['modal', 'toast'].includes(method)) return
-    const { groupAttrs } = this.app.waibuMpa
-    const { merge } = this.app.lib._
-    for (const k in params.attr) {
-      const v = params.attr[k]
-      if (!['icon', 'iconEnd'].includes(k)) continue
-      const group = groupAttrs(params.attr, ['icon', 'iconEnd'])
-      const _params = { attr: merge(k.endsWith('End') ? group.iconEnd : group.icon, { name: v }) }
-      const Builder = this.factory.icon
-      const builder = new Builder({ component: this, params: _params })
-      await builder.build()
-      const icon = await this.render(_params)
-      params.html = k.endsWith('End') ? `${params.html} ${icon}` : `${icon} ${params.html}`
-      delete params.attr[k]
+    /**
+     * Processes icon-related attributes and appends them to the HTML.
+     * @async
+     * @param {Object} [params={}] - The parameters containing icon attributes.
+     * @param {string} method - The method name.
+     */
+    iconAttr = async (params = {}, method) => {
+      if (['modal', 'toast'].includes(method)) return
+      const { groupAttrs } = this.app.waibuMpa
+      const { merge } = this.app.lib._
+      for (const k in params.attr) {
+        const v = params.attr[k]
+        if (!['icon', 'iconEnd'].includes(k)) continue
+        const group = groupAttrs(params.attr, ['icon', 'iconEnd'])
+        const _params = { attr: merge(k.endsWith('End') ? group.iconEnd : group.icon, { name: v }) }
+        const Widget = this.widget.icon
+        const widget = new Widget({ component: this, params: _params })
+        await widget.build()
+        const icon = await this.render(_params)
+        params.html = k.endsWith('End') ? `${params.html} ${icon}` : `${icon} ${params.html}`
+        delete params.attr[k]
+      }
     }
-  }
 
-  /**
-   * Builds the `<option>` elements for a `<select>` tag.
-   * @param {Object} params - The parameters containing options and values.
-   * @returns {string} The generated `<option>` elements.
-   */
-  buildOptions = (params) => {
-    const { has, omit, find, isPlainObject, isArray } = this.app.lib._
-    const { attrToArray } = this.app.waibuMpa
-    const items = []
-    if (!has(params.attr, 'options')) return
-    let values = attrToArray(params.attr.value)
-    if (!has(params.attr, 'multiple') && values.length > 0) values = [values[0]]
-    const options = isArray(params.attr.options) ? params.attr.options : attrToArray(params.attr.options)
-    for (const opt of options) {
-      let val
-      let text
-      if (isPlainObject(opt)) {
-        val = opt.value
-        text = opt.text
-      } else [val, text] = opt.split('|')
-      const sel = find(values, v => val === v)
-      items.push(`<option value="${val}"${sel ? ' selected' : ''}>${this.req.t(text ?? val)}</option>`)
+    /**
+     * Builds the `<option>` elements for a `<select>` tag.
+     * @param {Object} params - The parameters containing options and values.
+     * @returns {string} The generated `<option>` elements.
+     */
+    buildOptions = (params) => {
+      const { has, omit, find, isPlainObject, isArray } = this.app.lib._
+      const { attrToArray } = this.app.waibuMpa
+      const items = []
+      if (!has(params.attr, 'options')) return
+      let values = attrToArray(params.attr.value)
+      if (!has(params.attr, 'multiple') && values.length > 0) values = [values[0]]
+      const options = isArray(params.attr.options) ? params.attr.options : attrToArray(params.attr.options)
+      for (const opt of options) {
+        let val
+        let text
+        if (isPlainObject(opt)) {
+          val = opt.value
+          text = opt.text
+        } else [val, text] = opt.split('|')
+        const sel = find(values, v => val === v)
+        items.push(`<option value="${val}"${sel ? ' selected' : ''}>${this.req.t(text ?? val)}</option>`)
+      }
+      params.attr = omit(params.attr, ['options'])
+      return items.join('\n')
     }
-    params.attr = omit(params.attr, ['options'])
-    return items.join('\n')
-  }
 
-  /**
-   * Builds a URL with the given parameters.
-   * @param {Object} options - The options for building the URL.
-   * @param {Array<string>} [options.exclude] - Keys to exclude from the URL.
-   * @param {string} [options.prefix] - The prefix for the URL.
-   * @param {string} [options.base] - The base URL.
-   * @param {string} [options.url] - The URL to modify.
-   * @param {Object} [options.params={}] - Query parameters to include.
-   * @param {boolean} [options.prettyUrl] - Whether to generate a pretty URL.
-   * @returns {string} The built URL.
-   */
-  buildUrl = ({ exclude, prefix, base, url, params = {}, prettyUrl }) => {
-    const { isEmpty } = this.app.lib._
-    const { buildUrl } = this.app.waibuMpa
-    url = url ?? (isEmpty(this.req.referer) ? this.req.url : this.req.referer)
-    return buildUrl({ exclude, prefix, base, url, params, prettyUrl })
-  }
+    /**
+     * Builds a URL with the given parameters.
+     * @param {Object} options - The options for building the URL.
+     * @param {Array<string>} [options.exclude] - Keys to exclude from the URL.
+     * @param {string} [options.prefix] - The prefix for the URL.
+     * @param {string} [options.base] - The base URL.
+     * @param {string} [options.url] - The URL to modify.
+     * @param {Object} [options.params={}] - Query parameters to include.
+     * @param {boolean} [options.prettyUrl] - Whether to generate a pretty URL.
+     * @returns {string} The built URL.
+     */
+    buildUrl = ({ exclude, prefix, base, url, params = {}, prettyUrl }) => {
+      const { isEmpty } = this.app.lib._
+      const { buildUrl } = this.app.waibuMpa
+      url = url ?? (isEmpty(this.req.referer) ? this.req.url : this.req.referer)
+      return buildUrl({ exclude, prefix, base, url, params, prettyUrl })
+    }
 
-  /**
-   * Builds a sentence with optional rendering and minification.
-   * @async
-   * @param {string|string[]} sentence - The sentence or array of sentences to build.
-   * @param {Object} [params={}] - Parameters for rendering the sentence.
-   * @param {Object} [extra={}] - Extra options such as wrapping or minification.
-   * @returns {Promise<string>} The built sentence.
-   */
-  buildSentence = async (sentence, params = {}, extra = {}) => {
-    if (Array.isArray(sentence)) sentence = sentence.join(' ')
-    const { minify, renderString } = this.app.waibuMpa
-    if (extra.wrapped) sentence = '<w>' + sentence + '</w>'
-    const opts = {
-      partial: true,
-      ext: params.ext ?? '.html',
-      req: this.req,
-      reply: this.reply
+    /**
+     * Builds a sentence with optional rendering and minification.
+     * @async
+     * @param {string|string[]} sentence - The sentence or array of sentences to build.
+     * @param {Object} [params={}] - Parameters for rendering the sentence.
+     * @param {Object} [extra={}] - Extra options such as wrapping or minification.
+     * @returns {Promise<string>} The built sentence.
+     */
+    buildSentence = async (sentence, params = {}, extra = {}) => {
+      if (Array.isArray(sentence)) sentence = sentence.join(' ')
+      const { minify, renderString } = this.app.waibuMpa
+      if (extra.wrapped) sentence = '<w>' + sentence + '</w>'
+      const opts = {
+        partial: true,
+        ext: params.ext ?? '.html',
+        req: this.req,
+        reply: this.reply
+      }
+      let html = await renderString(sentence, params, opts)
+      if (extra.wrapped) html = html.slice(3, html.length - 4)
+      if (extra.minify) html = await minify(html)
+      return html
     }
-    let html = await renderString(sentence, params, opts)
-    if (extra.wrapped) html = html.slice(3, html.length - 4)
-    if (extra.minify) html = await minify(html)
-    return html
-  }
 
-  /**
-   * Hook executed before building a tag.
-   * @param {string} tag - The tag name.
-   * @param {Object} params - The parameters for the tag.
-   */
-  beforeBuildTag = (tag, params) => {}
+    /**
+     * Hook executed before building a tag.
+     * @param {string} tag - The tag name.
+     * @param {Object} params - The parameters for the tag.
+     */
+    beforeBuildTag = (tag, params) => {}
 
-  /**
-   * Hook executed after building a tag.
-   * @param {string} tag - The tag name.
-   * @param {Object} params - The parameters for the tag.
-   */
-  afterBuildTag = (tag, params) => {}
+    /**
+     * Hook executed after building a tag.
+     * @param {string} tag - The tag name.
+     * @param {Object} params - The parameters for the tag.
+     */
+    afterBuildTag = (tag, params) => {}
 
-  /**
-   * Builds a child tag based on a detector attribute.
-   * @async
-   * @param {string} detector - The attribute to detect child tags.
-   * @param {Object} options - Options for building the child tag.
-   * @param {string} [options.tag] - The tag name.
-   * @param {Object} options.params - The parameters for the child tag.
-   * @param {string} [options.inner] - Inner HTML for the child tag.
-   */
-  buildChildTag = async (detector, { tag, params, inner }) => {
-    const { has, pickBy, omit, keys } = this.app.lib._
-    if (has(params.attr, detector)) {
-      const [prefix] = detector.split('-')
-      const attr = {}
-      const html = tag ? params.attr[detector] : undefined
-      tag = tag ?? prefix
-      const picked = pickBy(params.attr, (v, k) => k.startsWith(`${prefix}-`))
-      for (const k in picked) {
-        attr[k.slice(prefix.length + 1)] = picked[k]
+    /**
+     * Builds a child tag based on a detector attribute.
+     * @async
+     * @param {string} detector - The attribute to detect child tags.
+     * @param {Object} options - Options for building the child tag.
+     * @param {string} [options.tag] - The tag name.
+     * @param {Object} options.params - The parameters for the child tag.
+     * @param {string} [options.inner] - Inner HTML for the child tag.
+     */
+    buildChildTag = async (detector, { tag, params, inner }) => {
+      const { has, pickBy, omit, keys } = this.app.lib._
+      if (has(params.attr, detector)) {
+        const [prefix] = detector.split('-')
+        const attr = {}
+        const html = tag ? params.attr[detector] : undefined
+        tag = tag ?? prefix
+        const picked = pickBy(params.attr, (v, k) => k.startsWith(`${prefix}-`))
+        for (const k in picked) {
+          attr[k.slice(prefix.length + 1)] = picked[k]
+        }
+        const child = await this.buildTag({ tag, params: { attr, html } })
+        params.html += `\n${child}`
+        const excluded = [detector, ...keys(picked)]
+        params.attr = omit(params.attr, excluded)
       }
-      const child = await this.buildTag({ tag, params: { attr, html } })
-      params.html += `\n${child}`
-      const excluded = [detector, ...keys(picked)]
-      params.attr = omit(params.attr, excluded)
     }
   }
+
+  this.app.baseClass.MpaComponent = MpaComponent
+  return MpaComponent
 }
 
-export default Component
+export default componentFactory