@mpxjs/webpack-plugin 2.9.38 → 2.9.40

package/lib/dependencies/DynamicEntryDependency.js

@@ -5,6 +5,7 @@ const addQuery = require('../utils/add-query')
 const toPosix = require('../utils/to-posix')
 const async = require('async')
 const parseRequest = require('../utils/parse-request')
+const hasOwn = require('../utils/has-own')
 
 class DynamicEntryDependency extends NullDependency {
   constructor (range, request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', extraOptions = {}) {
@@ -131,6 +132,13 @@ class DynamicEntryDependency extends NullDependency {
     this.publicPath = compilation.outputOptions.publicPath || ''
     const { packageRoot, context } = this
     if (context) this.resolver = compilation.resolverFactory.get('normal', module.resolveOptions)
+    // post 分包队列在 sub 分包队列构建完毕后进行
+    if (this.extraOptions.postSubpackageEntry) {
+      mpx.postSubpackageEntriesMap[packageRoot] = mpx.postSubpackageEntriesMap[packageRoot] || []
+      mpx.postSubpackageEntriesMap[packageRoot].push(this)
+      callback()
+      return
+    }
     // 分包构建在需要在主包构建完成后在finishMake中处理，返回的资源路径先用key来占位，在合成extractedAssets时再进行最终替换
     if (packageRoot && mpx.currentPackageRoot !== packageRoot) {
       mpx.subpackagesEntriesMap[packageRoot] = mpx.subpackagesEntriesMap[packageRoot] || []
@@ -190,7 +198,7 @@ DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
 
     let replaceContent = ''
 
-    if (extraOptions.replaceContent) {
+    if (hasOwn(extraOptions, 'replaceContent')) {
       replaceContent = extraOptions.replaceContent
     } else if (resultPath) {
       if (extraOptions.isRequireAsync) {

package/lib/dependencies/RecordRuntimeInfoDependency.js

@@ -0,0 +1,66 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordRuntimeInfoDependency extends NullDependency {
+  constructor (packageName, resourcePath, { type, info, index } = {}) {
+    super()
+    this.packageName = packageName
+    this.resourcePath = resourcePath
+    this.blockType = type
+    this.info = info
+    this.index = index
+  }
+
+  get type () {
+    return 'mpx record runtime component info'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+
+    const runtimeInfoPackage = mpx.runtimeInfo[this.packageName] = mpx.runtimeInfo[this.packageName] || {}
+    const componentInfo = runtimeInfoPackage[this.resourcePath] = runtimeInfoPackage[this.resourcePath] || {
+      template: {},
+      json: {},
+      style: [],
+      moduleId: '_' + mpx.pathHash(this.resourcePath)
+    }
+
+    const infoConfig = componentInfo[this.blockType]
+    if (this.blockType === 'style') { // 多 style block 的场景
+      infoConfig[this.index] = this.info
+    } else {
+      Object.assign(infoConfig, this.info)
+    }
+
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.packageName)
+    write(this.resourcePath)
+    write(this.blockType)
+    write(this.info)
+    write(this.index)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.packageName = read()
+    this.resourcePath = read()
+    this.blockType = read()
+    this.info = read()
+    this.index = read()
+    super.deserialize(context)
+  }
+}
+
+RecordRuntimeInfoDependency.Template = class RecordRuntimeInfoDependencyTemplate {
+  apply () {}
+}
+
+makeSerializable(RecordRuntimeInfoDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordRuntimeInfoDependency')
+
+module.exports = RecordRuntimeInfoDependency

package/lib/index.js

@@ -40,6 +40,7 @@ const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
+const RecordRuntimeInfoDependency = require('./dependencies/RecordRuntimeInfoDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
@@ -63,6 +64,7 @@ const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource'
 const emitFile = require('./utils/emit-file')
 const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/const')
 const isEmptyObject = require('./utils/is-empty-object')
+const DynamicPlugin = require('./resolver/DynamicPlugin')
 require('./utils/check-core-version-match')
 
 const isProductionLikeMode = options => {
@@ -123,6 +125,9 @@ class MpxWebpackPlugin {
     if (options.mode === 'web' && options.srcMode !== 'wx') {
       errors.push('MpxWebpackPlugin supports mode to be "web" only when srcMode is set to "wx"!')
     }
+    if (options.dynamicComponentRules && !options.dynamicRuntime) {
+      errors.push('Please make sure you have set dynamicRuntime true in mpx webpack plugin config because you have use the dynamic runtime feature.')
+    }
     options.externalClasses = options.externalClasses || ['custom-class', 'i-class']
     options.resolveMode = options.resolveMode || 'webpack'
     options.writeMode = options.writeMode || 'changed'
@@ -136,7 +141,8 @@ class MpxWebpackPlugin {
     options.defs = Object.assign({}, options.defs, {
       __mpx_mode__: options.mode,
       __mpx_src_mode__: options.srcMode,
-      __mpx_env__: options.env
+      __mpx_env__: options.env,
+      __mpx_dynamic_runtime__: options.dynamicRuntime
     })
     // 批量指定源码mode
     options.modeRules = options.modeRules || {}
@@ -174,6 +180,7 @@ class MpxWebpackPlugin {
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
     options.retryRequireAsync = options.retryRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
+    options.dynamicComponentRules = options.dynamicComponentRules || {}// 运行时组件配置
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -320,6 +327,9 @@ class MpxWebpackPlugin {
     const addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
     const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
+
+    const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
+
     if (Array.isArray(compiler.options.resolve.plugins)) {
       compiler.options.resolve.plugins.push(addModePlugin)
     } else {
@@ -330,6 +340,7 @@ class MpxWebpackPlugin {
     }
     compiler.options.resolve.plugins.push(packageEntryPlugin)
     compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
+    compiler.options.resolve.plugins.push(dynamicPlugin)
 
     const optimization = compiler.options.optimization
     if (this.options.mode !== 'web') {
@@ -472,12 +483,12 @@ class MpxWebpackPlugin {
       }
     }
 
-    const processSubpackagesEntriesMap = (compilation, callback) => {
+    const processSubpackagesEntriesMap = (subPackageEntriesType, compilation, callback) => {
       const mpx = compilation.__mpx__
-      if (mpx && !isEmptyObject(mpx.subpackagesEntriesMap)) {
-        const subpackagesEntriesMap = mpx.subpackagesEntriesMap
-        // 执行分包队列前清空mpx.subpackagesEntriesMap
-        mpx.subpackagesEntriesMap = {}
+      if (mpx && !isEmptyObject(mpx[subPackageEntriesType])) {
+        const subpackagesEntriesMap = mpx[subPackageEntriesType]
+        // 执行分包队列前清空 mpx[subPackageEntriesType]
+        mpx[subPackageEntriesType] = {}
         async.eachOfSeries(subpackagesEntriesMap, (deps, packageRoot, callback) => {
           mpx.currentPackageRoot = packageRoot
           mpx.componentsMap[packageRoot] = mpx.componentsMap[packageRoot] || {}
@@ -493,7 +504,7 @@ class MpxWebpackPlugin {
         }, (err) => {
           if (err) return callback(err)
           // 如果执行完当前队列后产生了新的分包执行队列（一般由异步分包组件造成），则继续执行
-          processSubpackagesEntriesMap(compilation, callback)
+          processSubpackagesEntriesMap(subPackageEntriesType, compilation, callback)
         })
       } else {
         callback()
@@ -505,7 +516,14 @@ class MpxWebpackPlugin {
       name: 'MpxWebpackPlugin',
       stage: -1000
     }, (compilation, callback) => {
-      processSubpackagesEntriesMap(compilation, (err) => {
+      async.series([
+        (callback) => {
+          processSubpackagesEntriesMap('subpackagesEntriesMap', compilation, callback)
+        },
+        (callback) => {
+          processSubpackagesEntriesMap('postSubpackageEntriesMap', compilation, callback)
+        }
+      ], (err) => {
         if (err) return callback(err)
         const checkDynamicEntryInfo = () => {
           for (const packageName in mpx.dynamicEntryInfo) {
@@ -578,6 +596,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordVueContentDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordVueContentDependency, new RecordVueContentDependency.Template())
 
+      compilation.dependencyFactories.set(RecordRuntimeInfoDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordRuntimeInfoDependency, new RecordRuntimeInfoDependency.Template())
+
       compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
     })
 
@@ -610,6 +631,7 @@ class MpxWebpackPlugin {
           // 记录独立分包
           independentSubpackagesMap: {},
           subpackagesEntriesMap: {},
+          postSubpackageEntriesMap: {},
           replacePathMap: {},
           exportModules: new Set(),
           // 记录动态添加入口的分包信息
@@ -837,6 +859,126 @@ class MpxWebpackPlugin {
                 error
               })
             }
+          },
+          // 以包为维度记录不同 package 需要的组件属性等信息，用以最终 mpx-custom-element 相关文件的输出
+          runtimeInfo: {},
+          // 记录运行时组件依赖的运行时组件当中使用的基础组件 slot，最终依据依赖关系注入到运行时组件的 json 配置当中
+          dynamicSlotDependencies: {},
+          // 依据 package 注入到 mpx-custom-element-*.json 里面的组件路径
+          getPackageInjectedComponentsMap: (packageName = 'main') => {
+            const res = {}
+            const runtimeInfo = mpx.runtimeInfo[packageName] || {}
+            const componentsMap = mpx.componentsMap[packageName] || {}
+            const publicPath = compilation.outputOptions.publicPath || ''
+            for (const componentPath in runtimeInfo) {
+              Object.values(runtimeInfo[componentPath].json).forEach(({ hashName, resourcePath }) => {
+                const outputPath = componentsMap[resourcePath]
+                if (outputPath) {
+                  res[hashName] = publicPath + outputPath
+                }
+              })
+            }
+            return res
+          },
+          // 获取生成基础递归渲染模版的节点配置信息
+          getPackageInjectedTemplateConfig: (packageName = 'main') => {
+            const res = {
+              baseComponents: {
+                block: {}
+              },
+              runtimeComponents: {},
+              normalComponents: {}
+            }
+
+            const runtimeInfo = mpx.runtimeInfo[packageName] || {}
+
+            // 包含了某个分包当中所有的运行时组件
+            for (const resourcePath in runtimeInfo) {
+              const { json, template } = runtimeInfo[resourcePath]
+              const customComponents = template.customComponents || {}
+              const baseComponents = template.baseComponents || {}
+
+              // 合并自定义组件的属性
+              for (const componentName in customComponents) {
+                const extraAttrs = {}
+                const attrsMap = customComponents[componentName]
+                const { hashName, isDynamic } = json[componentName] || {}
+                let componentType = 'normalComponents'
+                if (isDynamic) {
+                  componentType = 'runtimeComponents'
+                  extraAttrs.slots = ''
+                }
+                if (!res[componentType][hashName]) {
+                  res[componentType][hashName] = {}
+                }
+
+                Object.assign(res[componentType][hashName], {
+                  ...attrsMap,
+                  ...extraAttrs
+                })
+              }
+
+              // 合并基础节点的属性
+              for (const componentName in baseComponents) {
+                const attrsMap = baseComponents[componentName]
+                if (!res.baseComponents[componentName]) {
+                  res.baseComponents[componentName] = {}
+                }
+                Object.assign(res.baseComponents[componentName], attrsMap)
+              }
+            }
+
+            return res
+          },
+          injectDynamicSlotDependencies: (usingComponents, resourcePath) => {
+            const dynamicSlotReg = /"mpx_dynamic_slot":\s*""*/
+            const content = mpx.dynamicSlotDependencies[resourcePath] ? JSON.stringify(mpx.dynamicSlotDependencies[resourcePath]).slice(1, -1) : ''
+            const result = usingComponents.replace(dynamicSlotReg, content).replace(/,\s*(\}|\])/g, '$1')
+            return result
+          },
+          changeHashNameForAstNode: (templateAst, componentsMap) => {
+            const nameReg = /"tag":\s*"([^"]*)",?/g
+
+            // 替换 astNode hashName
+            const result = templateAst.replace(nameReg, function (match, tag) {
+              if (componentsMap[tag]) {
+                const { hashName, isDynamic } = componentsMap[tag]
+                let content = `"tag": "${hashName}",`
+                if (isDynamic) {
+                  content += '"dynamic": true,'
+                }
+                return content
+              }
+              return match
+            }).replace(/,\s*(\}|\])/g, '$1')
+
+            return result
+          },
+          collectDynamicSlotDependencies: (packageName = 'main') => {
+            const componentsMap = mpx.componentsMap[packageName] || {}
+            const publicPath = compilation.outputOptions.publicPath || ''
+            const runtimeInfo = mpx.runtimeInfo[packageName]
+
+            for (const resourcePath in runtimeInfo) {
+              const { template, json } = runtimeInfo[resourcePath]
+              const dynamicSlotDependencies = template.dynamicSlotDependencies || []
+
+              dynamicSlotDependencies.forEach((slotDependencies) => {
+                let lastNeedInjectNode = slotDependencies[0]
+                for (let i = 1; i <= slotDependencies.length - 1; i++) {
+                  const componentName = slotDependencies[i]
+                  const { resourcePath, isDynamic } = json[componentName] || {}
+                  if (isDynamic) {
+                    const { resourcePath: path, hashName } = json[lastNeedInjectNode]
+                    mpx.dynamicSlotDependencies[resourcePath] = mpx.dynamicSlotDependencies[resourcePath] || {}
+                    Object.assign(mpx.dynamicSlotDependencies[resourcePath], {
+                      [hashName]: publicPath + componentsMap[path]
+                    })
+                    lastNeedInjectNode = slotDependencies[i]
+                  }
+                }
+              })
+            }
           }
         }
       }
@@ -1094,6 +1236,37 @@ class MpxWebpackPlugin {
         }
       })
 
+      compilation.hooks.processAssets.tap({
+        name: 'MpxWebpackPlugin'
+      }, (assets) => {
+        const dynamicAssets = {}
+        for (const packageName in mpx.runtimeInfo) {
+          for (const resourcePath in mpx.runtimeInfo[packageName]) {
+            const { moduleId, template, style, json } = mpx.runtimeInfo[packageName][resourcePath]
+            const templateAst = mpx.changeHashNameForAstNode(template.templateAst, json)
+            dynamicAssets[moduleId] = {
+              template: JSON.parse(templateAst),
+              styles: style.reduce((preV, curV) => {
+                preV.push(...curV)
+                return preV
+              }, [])
+            }
+
+            // 注入 dynamic slot dependency
+            const outputPath = mpx.componentsMap[packageName][resourcePath]
+            if (outputPath) {
+              const jsonAsset = outputPath + '.json'
+              const jsonContent = compilation.assets[jsonAsset].source()
+              compilation.assets[jsonAsset] = new RawSource(mpx.injectDynamicSlotDependencies(jsonContent, resourcePath))
+            }
+          }
+        }
+        if (!isEmptyObject(dynamicAssets)) {
+          // 产出 jsonAst 静态产物
+          compilation.assets['dynamic.json'] = new RawSource(JSON.stringify(dynamicAssets))
+        }
+      })
+
       const normalModuleFactoryParserCallback = (parser) => {
         parser.hooks.call.for('__mpx_resolve_path__').tap('MpxWebpackPlugin', (expr) => {
           if (expr.arguments[0]) {

package/lib/json-compiler/helper.js

@@ -99,7 +99,9 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       const entry = getDynamicEntry(resource, 'component', outputPath, tarRoot, relativePath, '', extraOptions)
       callback(null, entry, {
         tarRoot,
-        placeholder
+        placeholder,
+        resourcePath,
+        queryObj
       })
     })
   }

package/lib/json-compiler/index.js

@@ -12,12 +12,14 @@ const createHelpers = require('../helpers')
 const createJSONHelper = require('./helper')
 const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
+const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
 const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
 const resolve = require('../utils/resolve')
 const resolveTabBarPath = require('../utils/resolve-tab-bar-path')
 const normalize = require('../utils/normalize')
 const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
 const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
+const resolveMpxCustomElementPath = require('../utils/resolve-mpx-custom-element-path')
 
 module.exports = function (content) {
   const nativeCallback = this.async()
@@ -47,6 +49,7 @@ module.exports = function (content) {
   const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const publicPath = this._compilation.outputOptions.publicPath || ''
   const fs = this._compiler.inputFileSystem
+  const runtimeCompile = queryObj.isDynamic
 
   const emitWarning = (msg) => {
     this.emitWarning(
@@ -173,6 +176,17 @@ module.exports = function (content) {
     }
   }
 
+  const dependencyComponentsMap = {}
+
+  if (queryObj.mpxCustomElement) {
+    this.cacheable(false)
+    mpx.collectDynamicSlotDependencies(packageName)
+  }
+
+  if (runtimeCompile) {
+    json.usingComponents = json.usingComponents || {}
+  }
+
   // 快应用补全json配置，必填项
   if (mode === 'qa' && isApp) {
     const defaultConf = {
@@ -219,13 +233,24 @@ module.exports = function (content) {
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, { relativePath }, (err, entry, { tarRoot, placeholder } = {}) => {
+        processComponent(component, context, { relativePath }, (err, entry, { tarRoot, placeholder, resourcePath, queryObj = {} } = {}) => {
           if (err === RESOLVE_IGNORED_ERR) {
             delete components[name]
             return callback()
           }
           if (err) return callback(err)
           components[name] = entry
+          if (runtimeCompile) {
+            // 替换组件的 hashName，并删除原有的组件配置
+            const hashName = 'm' + mpx.pathHash(resourcePath)
+            components[hashName] = entry
+            delete components[name]
+            dependencyComponentsMap[name] = {
+              hashName,
+              resourcePath,
+              isDynamic: queryObj.isDynamic
+            }
+          }
           if (tarRoot) {
             if (placeholder) {
               placeholder = normalizePlaceholder(placeholder)
@@ -250,7 +275,20 @@ module.exports = function (content) {
             callback()
           }
         })
-      }, callback)
+      }, () => {
+        const mpxCustomElementPath = resolveMpxCustomElementPath(packageName)
+        if (runtimeCompile) {
+          components.element = mpxCustomElementPath
+          components.mpx_dynamic_slot = '' // 运行时组件打标记，在 processAssets 统一替换
+
+          this._module.addPresentationalDependency(new RecordRuntimeInfoDependency(packageName, resourcePath, { type: 'json', info: dependencyComponentsMap }))
+        }
+        if (queryObj.mpxCustomElement) {
+          components.element = mpxCustomElementPath
+          Object.assign(components, mpx.getPackageInjectedComponentsMap(packageName))
+        }
+        callback()
+      })
     } else {
       callback()
     }

package/lib/loader.js

@@ -16,11 +16,13 @@ const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
+const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
 const path = require('path')
 const processMainScript = require('./web/processMainScript')
 const getRulesRunner = require('./platform')
+const genMpxCustomElement = require('./runtime-render/gen-mpx-custom-element')
 
 module.exports = function (content) {
   this.cacheable()
@@ -50,6 +52,7 @@ module.exports = function (content) {
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
+  const isRuntimeMode = queryObj.isDynamic
 
   const emitWarning = (msg) => {
     this.emitWarning(
@@ -80,6 +83,12 @@ module.exports = function (content) {
     const appName = getEntryName(this)
     if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
   }
+
+  if (isRuntimeMode) {
+    const { request, outputPath } = genMpxCustomElement(packageName)
+    this._module.addPresentationalDependency(new DynamicEntryDependency([0, 0], request, 'component', outputPath, packageRoot, '', '', { replaceContent: '', postSubpackageEntry: true }))
+  }
+
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
@@ -298,6 +307,7 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
+          ctorType,
           moduleId,
           usingComponents,
           componentPlaceholder

package/lib/native-loader.js

@@ -220,6 +220,7 @@ module.exports = function (content) {
               hasScoped,
               hasComment,
               isNative,
+              ctorType,
               moduleId,
               usingComponents,
               componentPlaceholder

package/lib/resolver/DynamicPlugin.js

@@ -0,0 +1,18 @@
+const addQuery = require('../utils/add-query')
+const { matchCondition } = require('../utils/match-condition')
+
+module.exports = class DynamicPlugin {
+  constructor (source, dynamicComponentRules) {
+    this.source = source
+    this.dynamicComponentRules = dynamicComponentRules
+  }
+
+  apply (resolver) {
+    resolver.getHook(this.source).tap('DynamicPlugin', request => {
+      const isDynamic = matchCondition(request.path, this.dynamicComponentRules)
+      if (isDynamic) {
+        request.query = addQuery(request.query, { isDynamic: true })
+      }
+    })
+  }
+}

package/lib/runtime-render/base-wxml.js

@@ -0,0 +1,75 @@
+const { getOptimizedComponentInfo } = require('@mpxjs/template-engine/dist/optimizer')
+const mpxConfig = require('../config')
+
+function makeAttrsMap (attrKeys = []) {
+  return attrKeys.reduce((preVal, curVal) => Object.assign(preVal, { [curVal]: '' }), {})
+}
+
+// 部分节点类型不需要被收集
+const RUNTIME_FILTER_NODES = ['import', 'template', 'wxs', 'component', 'slot']
+
+function collectParentCustomComponent (el, isComponentNode, options) {
+  const res = []
+  let parent = el.parent
+  while (parent) {
+    if (isComponentNode(parent, options)) {
+      if (!res.length) res.push(el.tag)
+      res.push(parent.tag)
+    }
+    parent = parent.parent
+  }
+  return res
+}
+
+module.exports = function setBaseWxml (el, config, meta) {
+  const { mode, isComponentNode, options } = config
+  if (RUNTIME_FILTER_NODES.includes(el.tag)) {
+    return
+  }
+
+  if (options.runtimeCompile) {
+    const isCustomComponent = isComponentNode(el, options)
+
+    if (!meta.runtimeInfo) {
+      meta.runtimeInfo = {
+        baseComponents: {},
+        customComponents: {},
+        dynamicSlotDependencies: []
+      }
+    }
+
+    const tag = el.tag
+    // 属性收集
+    const modeConfig = mpxConfig[mode]
+    const directives = new Set([...Object.values(modeConfig.directive), 'slot'])
+    const attrKeys = Object.keys(el.attrsMap).filter(key => !directives.has(key))
+    const componentType = isCustomComponent ? 'customComponents' : 'baseComponents'
+
+    if (!isCustomComponent) {
+      const optimizedInfo = getOptimizedComponentInfo(
+        {
+          nodeType: el.tag,
+          attrs: el.attrsMap
+        },
+        mode
+      )
+      if (optimizedInfo) {
+        el.tag = optimizedInfo.nodeType
+      }
+    } else {
+      // 收集运行时组件模版当中运行时组件使用 slot 的场景，主要因为运行时组件渲染slot时组件上下文发生了变化
+      const slotDependencies = collectParentCustomComponent(el, isComponentNode, options)
+      if (slotDependencies.length) {
+        const dynamicSlotDependencies = meta.runtimeInfo.dynamicSlotDependencies
+        dynamicSlotDependencies.push(slotDependencies)
+      }
+    }
+
+    const componentsConfig = meta.runtimeInfo[componentType]
+
+    if (!componentsConfig[tag]) {
+      componentsConfig[tag] = {}
+    }
+    Object.assign(componentsConfig[tag], makeAttrsMap(attrKeys))
+  }
+}

package/lib/runtime-render/custom-element-json.js

@@ -0,0 +1,4 @@
+module.exports = {
+  component: true,
+  usingComponents: {}
+}

package/lib/runtime-render/custom-element-script.js

@@ -0,0 +1,32 @@
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  options: {
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+    // 超过基础模板的层数，virtualHost 置为 true，避免样式规则失效
+    virtualHost: true
+  },
+  properties: {
+    r: { // vdom 数据
+      type: Object,
+      value: {
+        nt: 'block'
+      }
+    }
+  },
+  data: {
+    // 运行时组件的标识
+    mpxCustomElement: true
+  },
+  computed: {
+    vnodeData () {
+      const data = this.r.d || {}
+      return data
+    },
+    // 真实的组件上下文 uid
+    uid () {
+      return this.vnodeData.uid
+    }
+  }
+})

package/lib/runtime-render/gen-dynamic-template.js

@@ -0,0 +1,6 @@
+const { createSetupTemplate } = require('@mpxjs/template-engine')
+
+module.exports = function (packageName) {
+  const basePath = packageName === 'main' ? '' : `/${packageName}`
+  return `<import src="${basePath}/mpx-custom-element-${packageName}"/>${createSetupTemplate()}`
+}