@mpxjs/webpack-plugin 2.9.0-beta.0 → 2.9.0-beta.1

package/lib/dependencies/DynamicEntryDependency.js

@@ -28,23 +28,10 @@ class DynamicEntryDependency extends NullDependency {
     return toPosix([request, entryType, outputPath, packageRoot, relativePath, context, ...range].join('|'))
   }
 
-  collectDynamicRequest (mpx) {
-    if (!this.packageRoot) return
-    const curValue = mpx.dynamicEntryInfo[this.packageRoot] = mpx.dynamicEntryInfo[this.packageRoot] || {
-      hasPage: false,
-      entries: []
-    }
-    if (this.entryType === 'page') {
-      curValue.hasPage = true
-    } else {
-      curValue.entries.push(this.request)
-    }
-  }
-
   addEntry (compilation, callback) {
     const mpx = compilation.__mpx__
     let { request, entryType, outputPath, relativePath, context, originEntryNode, publicPath, resolver } = this
-    this.collectDynamicRequest(mpx)
+
     async.waterfall([
       (callback) => {
         if (context && resolver) {
@@ -56,12 +43,13 @@ class DynamicEntryDependency extends NullDependency {
         }
       },
       (resource, callback) => {
+        const { resourcePath } = parseRequest(resource)
+
         if (!outputPath) {
-          const { resourcePath } = parseRequest(resource)
           outputPath = mpx.getOutputPath(resourcePath, entryType)
         }
 
-        const { packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
+        const { packageName, packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
           resource,
           outputPath,
           resourceType: entryType,
@@ -116,6 +104,12 @@ class DynamicEntryDependency extends NullDependency {
             .catch(err => callback(err))
 
           mpx.addEntryPromiseMap.set(key, addEntryPromise)
+          mpx.collectDynamicEntryInfo({
+            resource,
+            packageName,
+            filename,
+            entryType
+          })
         }
       }
     ], callback)

package/lib/dependencies/ResolveDependency.js

@@ -1,6 +1,7 @@
 const NullDependency = require('webpack/lib/dependencies/NullDependency')
 const parseRequest = require('../utils/parse-request')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
+const { matchCondition } = require('../utils/match-condition')
 
 class ResolveDependency extends NullDependency {
   constructor (resource, packageName, issuerResource, range) {
@@ -22,28 +23,29 @@ class ResolveDependency extends NullDependency {
   }
 
   getResolved () {
-    const { resource, packageName, compilation } = this
+    const { resource, packageName, compilation, issuerResource } = this
     if (!compilation) return ''
     const mpx = compilation.__mpx__
     if (!mpx) return ''
-    const { pagesMap, componentsMap, staticResourcesMap } = mpx
+    const { pagesMap, componentsMap, staticResourcesMap, partialCompile } = mpx
     const { resourcePath } = parseRequest(resource)
     const currentComponentsMap = componentsMap[packageName]
     const mainComponentsMap = componentsMap.main
     const currentStaticResourcesMap = staticResourcesMap[packageName]
     const mainStaticResourcesMap = staticResourcesMap.main
-    return pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
+    const resolveResult = pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
+    if (!resolveResult) {
+      if (!partialCompile || matchCondition(resourcePath, partialCompile)) {
+        compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
+      }
+    }
+    return resolveResult
   }
 
   // resolved可能会动态变更，需用此更新hash
   updateHash (hash, context) {
     this.resolved = this.getResolved()
-    const { resource, issuerResource, compilation } = this
-    if (this.resolved) {
-      hash.update(this.resolved)
-    } else {
-      compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
-    }
+    hash.update(this.resolved)
     super.updateHash(hash, context)
   }
 

package/lib/index.js

@@ -38,7 +38,6 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
-const PartialCompilePlugin = require('./partial-compile/index')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
@@ -55,6 +54,7 @@ const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
 const jsonPluginCompilerPath = normalize.lib('json-compiler/plugin')
 const extractorPath = normalize.lib('extractor')
 const async = require('async')
+const { parseQuery } = require('loader-utils')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
 const emitFile = require('./utils/emit-file')
 const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/const')
@@ -112,7 +112,6 @@ class MpxWebpackPlugin {
   constructor (options = {}) {
     options.mode = options.mode || 'wx'
     options.env = options.env || ''
-
     options.srcMode = options.srcMode || options.mode
     if (options.mode !== options.srcMode && options.srcMode !== 'wx') {
       errors.push('MpxWebpackPlugin supports srcMode to be "wx" only temporarily!')
@@ -381,7 +380,33 @@ class MpxWebpackPlugin {
     let mpx
 
     if (this.options.partialCompile) {
-      new PartialCompilePlugin(this.options.partialCompile).apply(compiler)
+      function isResolvingPage (obj) {
+        // valid query should start with '?'
+        const query = parseQuery(obj.query || '?')
+        return query.isPage && !query.type
+      }
+      // new PartialCompilePlugin(this.options.partialCompile).apply(compiler)
+      compiler.resolverFactory.hooks.resolver.intercept({
+        factory: (type, hook) => {
+          hook.tap('MpxPartialCompilePlugin', (resolver) => {
+            resolver.hooks.result.tapAsync({
+              name: 'MpxPartialCompilePlugin',
+              stage: -100
+            }, (obj, resolverContext, callback) => {
+              if (obj.path.startsWith(require.resolve('./json-compiler/default-page.mpx'))) {
+                return callback(null, obj)
+              }
+              if (isResolvingPage(obj) && !matchCondition(obj.path, this.options.partialCompile)) {
+                const infix = obj.query ? '&' : '?'
+                obj.query += `${infix}resourcePath=${obj.path}`
+                obj.path = require.resolve('./json-compiler/default-page.mpx')
+              }
+              callback(null, obj)
+            })
+          })
+          return hook
+        }
+      })
     }
 
     const getPackageCacheGroup = packageName => {
@@ -455,17 +480,17 @@ class MpxWebpackPlugin {
     }, (compilation, callback) => {
       processSubpackagesEntriesMap(compilation, (err) => {
         if (err) return callback(err)
-        const checkRegisterPack = () => {
-          for (const packRoot in mpx.dynamicEntryInfo) {
-            const entryMap = mpx.dynamicEntryInfo[packRoot]
-            if (!entryMap.hasPage) {
+        const checkDynamicEntryInfo = () => {
+          for (const packageName in mpx.dynamicEntryInfo) {
+            const entryMap = mpx.dynamicEntryInfo[packageName]
+            if (packageName !== 'main' && !entryMap.hasPage) {
               // 引用未注册分包的所有资源
-              const strRequest = entryMap.entries.join(',')
-              compilation.errors.push(new Error(`资源${strRequest}目标是打入${packRoot}分包, 但是app.json中并未声明${packRoot}分包`))
+              const resources = entryMap.entries.map(info => info.resource).join(',')
+              compilation.errors.push(new Error(`资源${resources}通过分包异步声明为${packageName}分包, 但${packageName}分包未注册或不存在相关页面！`))
             }
           }
         }
-        checkRegisterPack()
+        checkDynamicEntryInfo()
         callback()
       })
     })
@@ -522,8 +547,8 @@ class MpxWebpackPlugin {
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
-      compilation.warnings = compilation.warnings.concat(warnings)
-      compilation.errors = compilation.errors.concat(errors)
+      compilation.warnings.push(...warnings)
+      compilation.errors.push(...errors)
       const moduleGraph = compilation.moduleGraph
 
       if (!compilation.__mpx__) {
@@ -552,7 +577,7 @@ class MpxWebpackPlugin {
           subpackagesEntriesMap: {},
           replacePathMap: {},
           exportModules: new Set(),
-          // 动态记录注册的分包与注册页面映射
+          // 记录动态添加入口的分包信息
           dynamicEntryInfo: {},
           // 记录entryModule与entryNode的对应关系，用于体积分析
           entryNodeModulesMap: new Map(),
@@ -594,14 +619,27 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          enableAliRequireAsync: this.options.enableAliRequireAsync,
+          enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
+          partialCompile: this.options.partialCompile,
+          collectDynamicEntryInfo: ({ resource, packageName, filename, entryType }) => {
+            const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
+              hasPage: false,
+              entries: []
+            }
+            if (entryType === 'page') curInfo.hasPage = true
+            curInfo.entries.push({
+              entryType,
+              resource,
+              filename
+            })
+          },
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
             }
             return hash(resourcePath)
           },
-          addEntry (request, name, callback) {
+          addEntry: (request, name, callback) => {
             const dep = EntryPlugin.createDependency(request, { name })
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
@@ -761,10 +799,14 @@ class MpxWebpackPlugin {
       const rawProcessModuleDependencies = compilation.processModuleDependencies
       compilation.processModuleDependencies = (module, callback) => {
         const presentationalDependencies = module.presentationalDependencies || []
+        const errors = []
         async.forEach(presentationalDependencies.filter((dep) => dep.mpxAction), (dep, callback) => {
-          dep.mpxAction(module, compilation, callback)
-        }, (err) => {
-          if (err) compilation.errors.push(err)
+          dep.mpxAction(module, compilation, (err) => {
+            if (err) errors.push(err)
+            callback()
+          })
+        }, () => {
+          compilation.errors.push(...errors)
           rawProcessModuleDependencies.call(compilation, module, callback)
         })
       }
@@ -850,16 +892,17 @@ class MpxWebpackPlugin {
       }
 
       // hack process https://github.com/webpack/webpack/issues/16045
-      const _handleModuleBuildAndDependenciesRaw = compilation._handleModuleBuildAndDependencies
-
-      compilation._handleModuleBuildAndDependencies = (originModule, module, recursive, callback) => {
-        const rawCallback = callback
-        callback = (err) => {
-          if (err) return rawCallback(err)
-          return rawCallback(null, module)
-        }
-        return _handleModuleBuildAndDependenciesRaw.call(compilation, originModule, module, recursive, callback)
-      }
+      // no need anymore
+      // const _handleModuleBuildAndDependenciesRaw = compilation._handleModuleBuildAndDependencies
+      //
+      // compilation._handleModuleBuildAndDependencies = (originModule, module, recursive, callback) => {
+      //   const rawCallback = callback
+      //   callback = (err) => {
+      //     if (err) return rawCallback(err)
+      //     return rawCallback(null, module)
+      //   }
+      //   return _handleModuleBuildAndDependenciesRaw.call(compilation, originModule, module, recursive, callback)
+      // }
 
       const rawEmitAsset = compilation.emitAsset
 
@@ -1003,8 +1046,8 @@ class MpxWebpackPlugin {
             if (queryObj.root) {
               // 删除root query
               request = addQuery(request, {}, false, ['root'])
-              // 目前仅wx支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (mpx.mode === 'wx' || (mpx.mode === 'ali' && mpx.enableAliRequireAsync)) {
+              // 目前仅wx和ali支持require.async，ali需要开启enableAliRequireAsync，其余平台使用CommonJsAsyncDependency进行模拟抹平
+              if (mpx.enableRequireAsync) {
                 const dep = new DynamicEntryDependency(request, 'export', '', queryObj.root, '', context, range, {
                   isRequireAsync: true,
                   retryRequireAsync: !!this.options.retryRequireAsync

package/lib/json-compiler/default-page.mpx

@@ -0,0 +1,3 @@
+<template>
+  <view>局部构建兜底页面</view>
+</template>

package/lib/json-compiler/helper.js

@@ -16,7 +16,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
   const pathHash = mpx.pathHash
   const getOutputPath = mpx.getOutputPath
   const mode = mpx.mode
-  const enableAliRequireAsync = mpx.enableAliRequireAsync
+  const enableRequireAsync = mpx.enableRequireAsync
 
   const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
   const urlToRequest = r => loaderUtils.urlToRequest(r)
@@ -54,7 +54,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
         // 删除root query
         resource = addQuery(resource, {}, false, ['root'])
         // 目前只有微信支持分包异步化
-        if (mode === 'wx' || (mode === 'ali' && enableAliRequireAsync)) tarRoot = queryObj.root
+        if (enableRequireAsync) tarRoot = queryObj.root
       }
       const parsed = path.parse(resourcePath)
       const ext = parsed.ext
@@ -101,7 +101,9 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     // 增加 page 标识
     page = addQuery(page, { isPage: true })
     resolve(context, page, loaderContext, (err, resource) => {
-      if (err) return callback(err)
+      if (err) {
+        return callback(err)
+      }
       const { resourcePath, queryObj: { isFirst } } = parseRequest(resource)
       const ext = path.extname(resourcePath)
       let outputPath
@@ -124,7 +126,8 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       const key = [resourcePath, outputPath, tarRoot].join('|')
       callback(null, entry, {
         isFirst,
-        key
+        key,
+        resource
       })
     })
   }

package/lib/json-compiler/index.js

@@ -143,15 +143,17 @@ module.exports = function (content) {
   }
 
   // 校验异步组件占位符 componentPlaceholder 不为空
-  const { usingComponents, componentPlaceholder = {} } = json
-  if (usingComponents) {
-    for (const compName in usingComponents) {
-      const compPath = usingComponents[compName]
-      if (!/\?root=/g.test(compPath)) continue
-      const compPlaceholder = componentPlaceholder[compName]
-      if (!compPlaceholder) {
-        const errMsg = `componentPlaceholder of "${compName}" doesn't exist! \n\r`
-        emitError(errMsg)
+  if (mpx.enableRequireAsync) {
+    const { usingComponents, componentPlaceholder = {} } = json
+    if (usingComponents) {
+      for (const compName in usingComponents) {
+        const compPath = usingComponents[compName]
+        if (!/\?root=/g.test(compPath)) continue
+        const compPlaceholder = componentPlaceholder[compName]
+        if (!compPlaceholder) {
+          const errMsg = `componentPlaceholder of "${compName}" doesn't exist! \n\r`
+          emitError(errMsg)
+        }
       }
     }
   }
@@ -175,14 +177,14 @@ module.exports = function (content) {
     type: 'json',
     waterfall: true,
     warn: emitWarning,
-    error: emitError
+    error: emitError,
+    data: {
+      // polyfill global usingComponents & record globalComponents
+      globalComponents: mpx.usingComponents
+    }
   }
   if (!isApp) {
     rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-    // polyfill global usingComponents
-    rulesRunnerOptions.data = {
-      globalComponents: mpx.usingComponents
-    }
   }
 
   const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -191,9 +193,12 @@ module.exports = function (content) {
     rulesRunner(json)
   }
 
-  if (isApp && json.usingComponents) {
+  if (isApp) {
+    Object.assign(mpx.usingComponents, json.usingComponents)
     // 在 rulesRunner 运行后保存全局注册组件
-    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(json.usingComponents, this.context))
+    // todo 其余地方在使用mpx.usingComponents时存在缓存问题，要规避该问题需要在所有使用mpx.usingComponents的loader中添加app resourcePath作为fileDependency，但对于缓存有效率影响巨大
+    // todo 需要考虑一种精准控制缓存的方式，仅在全局组件发生变更时才使相关使用方的缓存失效，例如按需在相关模块上动态添加request query？
+    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, this.context))
   }
 
   const processComponents = (components, context, callback) => {
@@ -219,14 +224,20 @@ module.exports = function (content) {
     const localPages = []
     const subPackagesCfg = {}
     const pageKeySet = new Set()
-
+    const defaultPagePath = require.resolve('./default-page.mpx')
     const processPages = (pages, context, tarRoot = '', callback) => {
       if (pages) {
+        const pagesCache = []
         async.each(pages, (page, callback) => {
-          processPage(page, context, tarRoot, (err, entry, { isFirst, key } = {}) => {
+          processPage(page, context, tarRoot, (err, entry, { isFirst, key, resource } = {}) => {
             if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
             if (pageKeySet.has(key)) return callback()
+            if (resource.startsWith(defaultPagePath)) {
+              pagesCache.push(entry)
+              return callback()
+            }
             pageKeySet.add(key)
+
             if (tarRoot && subPackagesCfg) {
               subPackagesCfg[tarRoot].pages.push(entry)
             } else {
@@ -239,7 +250,18 @@ module.exports = function (content) {
             }
             callback()
           })
-        }, callback)
+        }, () => {
+          if (tarRoot && subPackagesCfg) {
+            if (!subPackagesCfg[tarRoot].pages.length && pagesCache[0]) {
+              subPackagesCfg[tarRoot].pages.push(pagesCache[0])
+            }
+          } else {
+            if (!localPages.length && pagesCache[0]) {
+              localPages.push(pagesCache[0])
+            }
+          }
+          callback()
+        })
       } else {
         callback()
       }

package/lib/loader.js

@@ -119,7 +119,6 @@ module.exports = function (content) {
 
       let usingComponents = [].concat(Object.keys(mpx.usingComponents))
       let componentPlaceholder = []
-
       let componentGenerics = {}
 
       if (parts.json && parts.json.content) {
@@ -133,18 +132,12 @@ module.exports = function (content) {
         }
         if (!isApp) {
           rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-          // polyfill global usingComponents
-          // 预读json时无需注入polyfill全局组件
-          // rulesRunnerOptions.data = {
-          //   globalComponents: mpx.usingComponents
-          // }
         }
-
+        const rulesRunner = getRulesRunner(rulesRunnerOptions)
         try {
           const ret = JSON5.parse(parts.json.content)
+          if (rulesRunner) rulesRunner(ret)
           if (ret.usingComponents) {
-            const rulesRunner = getRulesRunner(rulesRunnerOptions)
-            if (rulesRunner) rulesRunner(ret)
             usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
           }
           if (ret.componentPlaceholder) {

package/lib/native-loader.js

@@ -137,6 +137,7 @@ module.exports = function (content) {
       } catch (e) {
         return callback(e)
       }
+      let usingComponents = Object.keys(mpx.usingComponents)
       const rulesRunnerOptions = {
         mode,
         srcMode,
@@ -147,16 +148,10 @@ module.exports = function (content) {
       }
       if (!isApp) {
         rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-        // polyfill global usingComponents
-        // 预读json时无需注入polyfill全局组件
-        // rulesRunnerOptions.data = {
-        //   globalComponents: mpx.usingComponents
-        // }
       }
-      let usingComponents = Object.keys(mpx.usingComponents)
+      const rulesRunner = getRulesRunner(rulesRunnerOptions)
+      if (rulesRunner) rulesRunner(json)
       if (json.usingComponents) {
-        const rulesRunner = getRulesRunner(rulesRunnerOptions)
-        if (rulesRunner) rulesRunner(json)
         usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
       }
       const {

package/lib/parser.js

@@ -2,7 +2,6 @@ const cache = require('lru-cache')(100)
 const hash = require('hash-sum')
 const compiler = require('./template-compiler/compiler')
 const SourceMapGenerator = require('source-map').SourceMapGenerator
-
 const splitRE = /\r?\n/g
 const emptyRE = /^(?:\/\/)?\s*$/
 

package/lib/platform/json/wx/index.js

@@ -70,6 +70,13 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
+  function fillGlobalComponents (input, { globalComponents }) {
+    if (globalComponents) {
+      Object.assign(globalComponents, input.usingComponents)
+    }
+    return input
+  }
+
   // 处理 ali swan 的组件名大写字母转连字符：WordExample/wordExample -> word-example
   function componentNameCapitalToHyphen (type) {
     return function (input) {
@@ -318,6 +325,20 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath(true)
       },
+      {
+        test: 'usingComponents',
+        ali: componentNameCapitalToHyphen('usingComponents'),
+        swan: componentNameCapitalToHyphen('usingComponents')
+      },
+      {
+        test: 'usingComponents',
+        // todo ali 2.0已支持全局组件，待移除
+        ali: fillGlobalComponents,
+        qq: fillGlobalComponents,
+        swan: fillGlobalComponents,
+        tt: fillGlobalComponents,
+        jd: fillGlobalComponents
+      },
       {
         test: 'usingComponents',
         // todo ali 2.0已支持全局组件，待移除

package/lib/platform/template/wx/component-config/component.js

@@ -1,5 +1,4 @@
-const templateCompiler = require('../../../../template-compiler/compiler')
-const parseMustache = templateCompiler.parseMustache
+const { parseMustache } = require('../../../../template-compiler/compiler')
 const normalize = require('../../../../utils/normalize')
 const TAG_NAME = 'component'
 

package/lib/platform/template/wx/component-config/hypen-tag-name.js

@@ -1,14 +1,10 @@
 const { capitalToHyphen } = require('../../../../utils/string')
 
 module.exports = function () {
-  function convertTagName (name) {
-    return capitalToHyphen(name)
-  }
-
   return {
     // tag name contains capital letters
     test: /[A-Z]/,
-    ali: convertTagName,
-    swan: convertTagName
+    ali: capitalToHyphen,
+    swan: capitalToHyphen
   }
 }

package/lib/platform/template/wx/component-config/index.js

@@ -8,7 +8,7 @@ const checkbox = require('./checkbox')
 const coverImage = require('./cover-image')
 const coverView = require('./cover-view')
 const form = require('./form')
-const HyphenTagName = require('./hypen-tag-name')
+const hyphenTagName = require('./hypen-tag-name')
 const icon = require('./icon')
 const image = require('./image')
 const input = require('./input')
@@ -118,7 +118,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     camera({ print }),
     livePlayer({ print }),
     livePusher({ print }),
-    HyphenTagName({ print }),
+    hyphenTagName({ print }),
     component()
   ]
 }