web支持asyncsubpackagerules构建配置，修复asyncsubpackagerules指定组件名与组件用已声明组件冲突问题

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -8,10 +8,6 @@ const rawDimensions = {
 }
 let width, height
 
-// TODO 临时适配折叠屏场景适配
-// const isLargeFoldableLike = (__mpx_mode__ === 'android') && (height / width < 1.5) && (width > 600)
-// if (isLargeFoldableLike) width = width / 2
-
 function customDimensions (dimensions) {
   if (typeof Mpx.config.rnConfig?.customDimensions === 'function') {
     dimensions = Mpx.config.rnConfig.customDimensions(dimensions) || dimensions

packages/webpack-plugin/lib/json-compiler/helper.js

@@ -8,8 +8,10 @@ const loaderUtils = require('loader-utils')
 const resolve = require('../utils/resolve')
 const { matchCondition } = require('../utils/match-condition')
 const { isWeb, isReact } = require('../utils/env')
+const getBuildInTagComponent = require('../utils/get-build-tag-component')
+const { capitalToHyphen } = require('../utils/string')
 
-module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry }) {
+module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry, emitError }) {
   const mpx = loaderContext.getMpx()
   const resolveMode = mpx.resolveMode
   const externals = mpx.externals
@@ -166,11 +168,79 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     })
   }
 
+  const fillInComponentPlaceholder = ({ jsonObj, name: componentName, placeholder, placeholderEntry, resolveResourcePathMap }, callback) => {
+    let placeholderComponentName = placeholder.name
+    const componentPlaceholder = jsonObj.componentPlaceholder || {}
+    if (componentPlaceholder[componentName]) {
+      callback()
+      return
+    }
+    jsonObj.componentPlaceholder = componentPlaceholder
+    if (placeholderEntry) {
+      if (resolveResourcePathMap.has(placeholderComponentName) && resolveResourcePathMap.get(placeholderComponentName) !== placeholder.resourcePath) {
+        // 如果存在placeholder与已有usingComponents冲突, 重新生成一个组件名，在当前组件后增加一个数字
+        let i = 1
+        let newPlaceholder = placeholderComponentName + i
+        while (jsonObj.usingComponents[newPlaceholder]) {
+          newPlaceholder = placeholderComponentName + ++i
+        }
+        placeholderComponentName = newPlaceholder
+      }
+      jsonObj.usingComponents[placeholderComponentName] = placeholderEntry
+      resolveResourcePathMap.set(placeholderComponentName, placeholder.resourcePath)
+    }
+    componentPlaceholder[componentName] = placeholderComponentName
+    callback(null, {
+      name: placeholderComponentName,
+      entry: placeholderEntry
+    })
+  }
+
+  const getNormalizePlaceholder = (placeholder) => {
+    if (typeof placeholder === 'string') {
+      placeholder = getBuildInTagComponent(mode, placeholder) || { name: placeholder }
+    }
+    if (!placeholder.name) {
+      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
+    }
+    // ali 下与 rulesRunner 规则一致，组件名驼峰转连字符
+    if (mode === 'ali') {
+      placeholder.name = capitalToHyphen(placeholder.name)
+    }
+    return placeholder
+  }
+
+  const processPlaceholder = ({ jsonObj, context, name, tarRoot, placeholder, relativePath, resolveResourcePathMap }, callback) => {
+    if (tarRoot) {
+      if (placeholder) {
+        placeholder = getNormalizePlaceholder(placeholder)
+        if (placeholder.resource) {
+          processComponent(placeholder.resource, context, { relativePath }, (err, entry, { resourcePath }) => {
+            if (err) return callback(err)
+            placeholder.resourcePath = resourcePath
+            fillInComponentPlaceholder({ jsonObj, name, placeholder, placeholderEntry: entry, resolveResourcePathMap }, callback)
+          })
+        } else {
+          fillInComponentPlaceholder({ jsonObj, name, placeholder }, callback)
+        }
+      } else {
+        if (!jsonObj.componentPlaceholder || !jsonObj.componentPlaceholder[name]) {
+          const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
+          emitError(errMsg)
+        }
+        callback()
+      }
+    } else {
+      callback()
+    }
+  }
+
   return {
     processComponent,
     processDynamicEntry,
     processPage,
     processJsExport,
+    processPlaceholder,
     isUrlRequest,
     urlToRequest
   }

packages/webpack-plugin/lib/json-compiler/index.js

@@ -15,9 +15,6 @@ const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDe
 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) {
@@ -43,7 +40,6 @@ module.exports = function (content) {
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
-  const projectRoot = mpx.projectRoot
 
   const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const publicPath = this._compilation.outputOptions.publicPath || ''
@@ -62,36 +58,14 @@ module.exports = function (content) {
     )
   }
 
-  const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
-    const componentPlaceholder = json.componentPlaceholder || {}
-    if (componentPlaceholder[name]) return
-    componentPlaceholder[name] = placeholder
-    json.componentPlaceholder = componentPlaceholder
-    if (placeholderEntry && !json.usingComponents[placeholder]) json.usingComponents[placeholder] = placeholderEntry
-  }
-  const normalizePlaceholder = (placeholder) => {
-    if (typeof placeholder === 'string') {
-      const placeholderMap = mode === 'ali'
-        ? {
-          view: { name: 'mpx-view', resource: mpxViewPath },
-          text: { name: 'mpx-text', resource: mpxTextPath }
-        }
-        : {}
-      placeholder = placeholderMap[placeholder] || { name: placeholder }
-    }
-    if (!placeholder.name) {
-      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
-    }
-    return placeholder
-  }
-
   const {
     isUrlRequest,
     urlToRequest,
     processPage,
     processDynamicEntry,
     processComponent,
-    processJsExport
+    processJsExport,
+    processPlaceholder
   } = createJSONHelper({
     loaderContext: this,
     emitWarning,
@@ -223,6 +197,9 @@ module.exports = function (content) {
 
   const processComponents = (components, context, callback) => {
     if (components) {
+      // 存在所有命中asyncSubpackageRules的组件
+      const asyncComponents = []
+      const resolveResourcePathMap = new Map()
       async.eachOf(components, (component, name, callback) => {
         processComponent(component, context, { relativePath }, (err, entry, { tarRoot, placeholder, resourcePath, queryObj = {} } = {}) => {
           if (err === RESOLVE_IGNORED_ERR) {
@@ -242,29 +219,9 @@ module.exports = function (content) {
               isDynamic: queryObj.isDynamic
             }
           }
-          if (tarRoot) {
-            if (placeholder) {
-              placeholder = normalizePlaceholder(placeholder)
-              if (placeholder.resource) {
-                processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
-                  if (err) return callback(err)
-                  fillInComponentPlaceholder(name, placeholder.name, entry)
-                  callback()
-                })
-              } else {
-                fillInComponentPlaceholder(name, placeholder.name)
-                callback()
-              }
-            } else {
-              if (!json.componentPlaceholder || !json.componentPlaceholder[name]) {
-                const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
-                emitError(errMsg)
-              }
-              callback()
-            }
-          } else {
-            callback()
-          }
+          resolveResourcePathMap.set(name, resourcePath)
+          if (tarRoot) asyncComponents.push({ name, tarRoot, placeholder, relativePath })
+          callback()
         })
       }, (err) => {
         if (err) return callback(err)
@@ -279,7 +236,10 @@ module.exports = function (content) {
           components.element = mpxCustomElementPath
           Object.assign(components, mpx.getPackageInjectedComponentsMap(packageName))
         }
-        callback()
+        // 使用async处理所有asyncComponents完成后调用callback
+        async.each(asyncComponents, ({ name, tarRoot, placeholder, relativePath }, callback) => {
+          processPlaceholder({ jsonObj: json, context, name, tarRoot, placeholder, relativePath, resolveResourcePathMap }, callback)
+        }, callback)
       })
     } else {
       callback()

packages/webpack-plugin/lib/platform/json/wx/index.js

@@ -1,12 +1,9 @@
 const runRules = require('../../run-rules')
 const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
-const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
 const { isOriginTag, isBuildInWebTag, isBuildInReactTag } = require('../../../utils/dom-tag-config')
-
-const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
-const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
+const getBuildInTagComponent = require('../../../utils/get-build-tag-component')
 
 module.exports = function getSpec ({ warn, error }) {
   function print (mode, path, isError) {
@@ -46,28 +43,26 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // 处理支付宝 componentPlaceholder 不支持 view、text 原生标签
-  function aliComponentPlaceholderFallback (input) {
-    // 处理 驼峰转连字符
-    input = componentNameCapitalToHyphen('componentPlaceholder')(input)
+  // 将 placeholder 中使用的内建组件转化为 mpx-xxx, 并在 usingComponents 填充
+  function fixComponentPlaceholder (input, { mode }) {
+    if (!input.componentPlaceholder) return input
+    if (mode === 'ali') {
+      // 处理 驼峰转连字符
+      input = componentNameCapitalToHyphen('componentPlaceholder')(input)
+    }
     const componentPlaceholder = input.componentPlaceholder
-    const usingComponents = input.usingComponents || (input.usingComponents = {})
+    const usingComponents = input.usingComponents || {}
     for (const cph in componentPlaceholder) {
       const cur = componentPlaceholder[cph]
-      const placeholderCompMatched = cur.match(/^(?:view|text)$/g)
-      if (!Array.isArray(placeholderCompMatched)) continue
-      let compName, compPath
-      switch (placeholderCompMatched[0]) {
-        case 'view':
-          compName = 'mpx-view'
-          compPath = mpxViewPath
-          break
-        case 'text':
-          compName = 'mpx-text'
-          compPath = mpxTextPath
-      }
-      usingComponents[compName] = compPath
-      componentPlaceholder[cph] = compName
+      const comp = getBuildInTagComponent(mode, cur)
+      if (!comp || usingComponents[cur]) continue
+      const { name, resource } = comp
+      usingComponents[name] = resource
+      componentPlaceholder[cph] = name
     }
+
+    input.usingComponents = usingComponents
+    input.componentPlaceholder = componentPlaceholder
     return input
   }
 
@@ -172,7 +167,6 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'componentPlaceholder',
-      ali: aliComponentPlaceholderFallback,
       swan: deletePath(),
       jd: deletePath()
     },
@@ -190,6 +184,13 @@ module.exports = function getSpec ({ warn, error }) {
       ios: fixComponentName,
       android: fixComponentName,
       harmony: fixComponentName
+    },
+    {
+      ali: fixComponentPlaceholder,
+      web: fixComponentPlaceholder,
+      ios: fixComponentPlaceholder,
+      android: fixComponentPlaceholder,
+      harmony: fixComponentPlaceholder
     }
   ]
 
@@ -454,12 +455,6 @@ module.exports = function getSpec ({ warn, error }) {
         swan: getWindowRule(),
         tt: getWindowRule(),
         jd: getWindowRule()
-      },
-      {
-        web: fixComponentName,
-        ios: fixComponentName,
-        android: fixComponentName,
-        harmony: fixComponentName
       }
     ]
   }