@mpxjs/webpack-plugin 2.10.16 → 2.10.17

package/lib/utils/get-build-tag-component.js

@@ -0,0 +1,35 @@
+const normalize = require('./normalize')
+const { isBuildInWebTag, isBuildInReactTag } = require('./dom-tag-config')
+
+module.exports = function getBuildInTagComponent (mode, tag) {
+  const aliBuildTag = ['view', 'text'].reduce((obj, name) => {
+    obj[name] = {
+      name: `mpx-${name}`,
+      resource: normalize.lib(`runtime/components/ali/mpx-${name}.mpx`)
+    }
+    return obj
+  }, {})
+
+  switch (mode) {
+    case 'ali':
+      return aliBuildTag[tag]
+    case 'web':
+      if (isBuildInWebTag(`mpx-${tag}`)) {
+        return {
+          name: `mpx-${tag}`,
+          resource: normalize.lib(`runtime/components/web/mpx-${tag}.vue`)
+        }
+      }
+      return undefined
+    case 'ios':
+    case 'android':
+    case 'harmony':
+      if (isBuildInReactTag(`mpx-${tag}`)) {
+        return {
+          name: `mpx-${tag}`,
+          resource: normalize.lib(`runtime/components/react/dist/mpx-${tag}.jsx`)
+        }
+      }
+      return undefined
+  }
+}

package/lib/utils/merge-visitors.js

@@ -0,0 +1,55 @@
+/**
+ * 链式合并方法的工具函数
+ *
+ * 在多条件分支下使用 Object.assign 会导致同名方法被覆盖，
+ * 这个函数通过创建组合函数来确保所有方法都能按顺序执行。
+ *
+ * @param {Object} target - 目标 visitor 对象
+ * @param {Object} source - 要链式分配的 visitor 方法对象
+ **/
+
+// 辅助函数：将 visitor 的所有钩子添加到结果中
+function mergeVisitorHooks (result, visitor) {
+  result.enter = result.enter.concat(visitor.enter)
+  result.exit = result.exit.concat(visitor.exit)
+  return result
+}
+
+function normalizeVisitor(visitor) {
+  if (Array.isArray(visitor.enter) && Array.isArray(visitor.exit)) {
+    return visitor
+  }
+  if (typeof visitor === 'function') {
+    return { enter: [visitor], exit: [] }
+  }
+
+  if (visitor.enter) {
+    if (!Array.isArray(visitor.enter)) {
+      visitor.enter = [visitor.enter]
+    }
+  } else {
+    visitor.enter = []
+  }
+
+  if (visitor.exit) {
+    if (!Array.isArray(visitor.exit)) {
+      visitor.exit = [visitor.exit]
+    }
+  } else {
+    visitor.exit = []
+  }
+  return visitor
+}
+
+module.exports = function mergeVisitors (target, source) {
+  for (const [key, value] of Object.entries(source)) {
+    if (!target[key]) {
+      target[key] = normalizeVisitor(value)
+    } else {
+      // 合并现有值和新值
+      target[key] = mergeVisitorHooks(normalizeVisitor(target[key]), normalizeVisitor(value))
+    }
+  }
+
+  return target
+}

package/lib/utils/pre-process-json.js

@@ -31,6 +31,7 @@ module.exports = function ({
       let componentGenerics = {}
       const usingComponentsInfo = {}
       const usingComponents = {}
+      let originalUsingComponents
       const finalCallback = (err) => {
         if (err) return callback(err)
         if (ctorType === 'app') {
@@ -43,6 +44,7 @@ module.exports = function ({
           componentPlaceholder,
           componentGenerics,
           usingComponentsInfo: Object.assign({}, usingComponentsInfo, mpx.globalComponentsInfo),
+          originalUsingComponents,
           jsonContent
         })
       }
@@ -61,6 +63,9 @@ module.exports = function ({
         if (ctorType !== 'app') {
           rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
         }
+
+        originalUsingComponents = ret.usingComponents ? Object.keys(ret.usingComponents) : []
+
         const rulesRunner = getRulesRunner(rulesRunnerOptions)
         try {
           if (rulesRunner) rulesRunner(ret)

package/lib/web/index.js

@@ -21,6 +21,7 @@ module.exports = function ({
   hasComment,
   isNative,
   usingComponentsInfo,
+  originalUsingComponents,
   componentGenerics,
   autoScope,
   callback
@@ -70,6 +71,7 @@ module.exports = function ({
             moduleId,
             ctorType,
             usingComponentsInfo,
+            originalUsingComponents,
             componentGenerics
           }, callback)
         },

package/lib/web/processJSON.js

@@ -37,23 +37,38 @@ module.exports = function (jsonContent, {
 
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
-      new Error('[json processor][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     loaderContext.emitError(
-      new Error('[json compiler][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + loaderContext.resource + ']: ' + msg)
     )
   }
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
 
+  function fillInComponentsMap (name, entry, tarRoot) {
+    const { resource, outputPath } = entry
+    const { resourcePath } = parseRequest(resource)
+    componentsMap[resourcePath] = outputPath
+    loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+    localComponentsMap[name] = {
+      resource: addQuery(resource, {
+        isComponent: true,
+        outputPath
+      }),
+      async: tarRoot
+    }
+  }
+
   const {
     isUrlRequest,
     urlToRequest,
     processPage,
-    processComponent
+    processComponent,
+    processPlaceholder
   } = createJSONHelper({
     loaderContext,
     emitWarning,
@@ -240,7 +255,7 @@ module.exports = function (jsonContent, {
             if (oldResourcePath !== resourcePath) {
               const oldOutputPath = outputPath
               outputPath = mpx.getOutputPath(resourcePath, 'page', { conflictPath: outputPath })
-              emitWarning(new Error(`Current page [${resourcePath}] is registered with a conflict outputPath [${oldOutputPath}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+              emitWarning(`Current page [${resourcePath}] is registered with a conflict outputPath [${oldOutputPath}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`)
             }
           }
 
@@ -287,22 +302,35 @@ module.exports = function (jsonContent, {
 
   const processComponents = (components, context, callback) => {
     if (components) {
+      const asyncComponents = []
+      const resolveResourcePathMap = new Map()
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
+        processComponent(component, context, {}, (err, entry = {}, { tarRoot, placeholder, resourcePath } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
-          const { resourcePath, queryObj } = parseRequest(resource)
-          componentsMap[resourcePath] = outputPath
-          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-          localComponentsMap[name] = {
-            resource: addQuery(resource, {
-              isComponent: true,
-              outputPath
-            }),
-            async: queryObj.async || tarRoot
-          }
+          const { relativePath, resource } = entry
+          const { queryObj } = parseRequest(resource)
+
+          tarRoot = queryObj.async || tarRoot
+
+          resolveResourcePathMap.set(name, resourcePath)
+          if (tarRoot) asyncComponents.push({ name, tarRoot, placeholder, relativePath })
+
+          fillInComponentsMap(name, entry, tarRoot)
           callback()
         })
-      }, callback)
+      }, (err) => {
+        if (err) return callback(err)
+        async.each(asyncComponents, ({ name, tarRoot, placeholder, relativePath }, callback) => {
+          processPlaceholder({ jsonObj, context, name, tarRoot, placeholder, relativePath, resolveResourcePathMap }, (err, placeholder) => {
+            if (err) return callback(err)
+            if (placeholder) {
+              const { name, entry } = placeholder
+              fillInComponentsMap(name, entry, '')
+            }
+            callback()
+          })
+        }, callback)
+      })
     } else {
       callback()
     }

package/lib/web/processScript.js

@@ -78,12 +78,12 @@ module.exports = function (script, {
       }
       content += getRequireScript({ ctorType, script, loaderContext })
       content += `
+  // @ts-ignore
   export default processComponentOption({
     option: global.__mpxOptionsMap[${JSON.stringify(moduleId)}],
     ctorType: ${JSON.stringify(ctorType)},
     outputPath: ${JSON.stringify(outputPath)},
     pageConfig: ${JSON.stringify(pageConfig)},
-    // @ts-ignore
     componentsMap: ${shallowStringify(componentsMap)},
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},

package/lib/web/processTemplate.js

@@ -13,6 +13,7 @@ module.exports = function (template, {
   moduleId,
   ctorType,
   usingComponentsInfo,
+  originalUsingComponents,
   componentGenerics
 }, callback) {
   const mpx = loaderContext.getMpx()
@@ -51,10 +52,10 @@ module.exports = function (template, {
   if (template) {
     // 由于远端src template资源引用的相对路径可能发生变化，暂时不支持。
     if (template.src) {
-      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template content must be inline in .mpx files!'))
+      return callback(new Error('[Mpx template error][' + loaderContext.resource + ']: ' + 'template content must be inline in .mpx files!'))
     }
     if (template.lang) {
-      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans web mode temporarily, we will support it in the future!'))
+      return callback(new Error('[Mpx template error][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans web mode temporarily, we will support it in the future!'))
     }
 
     output += genComponentTag(template, (template) => {
@@ -65,18 +66,19 @@ module.exports = function (template, {
         const templateSrcMode = template.mode || srcMode
         const warn = (msg) => {
           loaderContext.emitWarning(
-            new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+            new Error('[Mpx template error][' + loaderContext.resource + ']: ' + msg)
           )
         }
         const error = (msg) => {
           loaderContext.emitError(
-            new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+            new Error('[Mpx template error][' + loaderContext.resource + ']: ' + msg)
           )
         }
         const { root, meta } = templateCompiler.parse(template.content, {
           warn,
           error,
           usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
+          originalUsingComponents,
           hasComment,
           isNative,
           ctorType,

package/lib/web/script-helper.js

@@ -24,19 +24,29 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
+
       if (componentCfg.async) {
-        // todo 暂时只处理局部注册的组件作为componentPlaceholder，暂不支持全局组件和原生组件，如使用了支持范围外的组件将不进行placeholder渲染及替换
-        if (jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName] && localComponentsMap[jsonConfig.componentPlaceholder[componentName]]) {
-          const placeholder = jsonConfig.componentPlaceholder[componentName]
+        const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
+        if (placeholder) {
           const placeholderCfg = localComponentsMap[placeholder]
-          const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
-          if (placeholderCfg.async) {
-            loaderContext.emitWarning(
-              new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
+          if (placeholderCfg) {
+            if (placeholderCfg.async) {
+              loaderContext.emitWarning(
+                new Error(`[Mpx json error][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
+              )
+            }
+            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
+            componentsMap[componentName] = `function(){return {component: import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)}), loading: getComponent(require(${placeholderRequest}))}}`
+          } else {
+            loaderContext.emitError(
+              new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component or custom component, please check!`)
             )
+            componentsMap[componentName] = `function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)})}`
           }
-          componentsMap[componentName] = `function(){return {component: import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)}), loading: getComponent(require(${placeholderRequest}))}}`
         } else {
+          loaderContext.emitError(
+            new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
+          )
           componentsMap[componentName] = `function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)})}`
         }
       } else {
@@ -75,7 +85,7 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
         }
       } else {
         loaderContext.emitWarning(
-          new Error(`[json processor][${loaderContext.resource}]: TabBar page path ${pagePath} is not exist in local page map, please check!`)
+          new Error(`[Mpx json error][${loaderContext.resource}]: TabBar page path ${pagePath} is not exist in local page map, please check!`)
         )
       }
     })

package/lib/wxs/pre-loader.js

@@ -4,7 +4,7 @@ const t = require('@babel/types')
 const generate = require('@babel/generator').default
 const parseRequest = require('../utils/parse-request')
 const isEmptyObject = require('../utils/is-empty-object')
-const chainAssign = require('../utils/chain-assign')
+const mergeVisitors = require('../utils/merge-visitors')
 const parseQuery = require('loader-utils').parseQuery
 
 module.exports = function (content) {
@@ -31,7 +31,7 @@ module.exports = function (content) {
         '  __mpx_args__[i] = arguments[i];\n' +
         '}'
       ).program.body
-      chainAssign(visitor, {
+      mergeVisitors(visitor, {
         Identifier (path) {
           if (path.node.name === 'arguments') {
             path.node.name = '__mpx_args__'
@@ -66,7 +66,7 @@ module.exports = function (content) {
     }
 
     if (mode !== 'wx') {
-      chainAssign(visitor, {
+      mergeVisitors(visitor, {
         CallExpression (path) {
           const callee = path.node.callee
           if (t.isIdentifier(callee) && callee.name === 'getRegExp') {
@@ -81,7 +81,7 @@ module.exports = function (content) {
   }
 
   if (mode === 'dd') {
-    chainAssign(visitor, {
+    mergeVisitors(visitor, {
       MemberExpression (path) {
         const property = path.node.property
         if (
@@ -96,11 +96,14 @@ module.exports = function (content) {
   }
 
   if (!module.wxs) {
-    chainAssign(visitor, {
+    mergeVisitors(visitor, {
       MemberExpression (path) {
+        if (!t.isMemberExpression(path.node)) {
+          return
+        }
         const property = path.node.property
         if (
-          (property.name === 'constructor' || property.value === 'constructor') &&
+          property && (property.name === 'constructor' || property.value === 'constructor') &&
           !(t.isMemberExpression(path.parent) && path.parentKey === 'object')
         ) {
           path.replaceWith(t.memberExpression(path.node, t.identifier('name')))

package/lib/wxss/loader.js

@@ -32,13 +32,6 @@ const {
 } = require('./utils')
 const createHelpers = require('../helpers')
 
-const RN_PRESET_OPTIMISATION = {
-  reduceInitial: false,
-  normalizeWhitespace: false,
-  minifyFontValues: false,
-  convertValues: false
-}
-
 module.exports = async function loader (content, map, meta) {
   const rawOptions = this.getOptions(schema)
   const plugins = []
@@ -157,12 +150,11 @@ module.exports = async function loader (content, map, meta) {
     )
   }
 
-  if (this.minimize) {
+  if (this.minimize && !isRN) {
     const cssnano = require('cssnano')
     const minimizeOptions = rawOptions.minimize || {}
     const presetOptimisation = Object.assign(
       {},
-      isRN ? RN_PRESET_OPTIMISATION : {},
       minimizeOptions.optimisation
     )
     let cssnanoConfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.16",
+  "version": "2.10.17",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -29,7 +29,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.16",
+    "@mpxjs/utils": "^2.10.17",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -51,18 +51,25 @@
     "mime": "^2.2.2",
     "object-assign": "^4.1.1",
     "postcss": "^8.4.5",
+    "postcss-import": "^16.1.1",
+    "postcss-less": "^6.0.0",
     "postcss-load-config": "^3.1.1",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",
     "postcss-modules-scope": "^3.0.0",
     "postcss-modules-values": "^4.0.0",
+    "postcss-scss": "^4.0.9",
     "postcss-selector-parser": "^6.0.8",
+    "postcss-styl": "^0.12.3",
     "postcss-value-parser": "^4.0.2",
     "semver": "^7.5.4",
     "source-list-map": "^2.0.0",
     "webpack-virtual-modules": "^0.6.0"
   },
   "peerDependencies": {
+    "postcss-less": "^6.0.0",
+    "postcss-scss": "^4.0.9",
+    "postcss-styl": "^0.12.3",
     "webpack": "^5.75.0"
   },
   "publishConfig": {
@@ -78,16 +85,19 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "scripts": {
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "copy-icons": "cp -r ./lib/runtime/components/react/mpx-icon/icons ./lib/runtime/components/react/dist/mpx-icon/icons",
     "build": "rimraf ./lib/runtime/components/react/dist && tsc && npm run copy-icons"
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.16",
+    "@mpxjs/api-proxy": "^2.10.17",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
+    "@types/glob": "^8.1.0",
+    "@types/postcss-import": "^14.0.3",
     "@types/react": "^18.2.79",
+    "glob": "^11.0.2",
     "react-native": "^0.74.5",
     "react-native-gesture-handler": "^2.18.1",
     "react-native-linear-gradient": "^2.8.3",
@@ -101,5 +111,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "be4129320e298edf935ea35f9ca3d375f75ac51c"
+  "gitHead": "33fbd0bb8d4b83555239a8931fabb23022af0866"
 }

package/lib/utils/chain-assign.js

@@ -1,47 +0,0 @@
-/**
- * 链式合并方法的工具函数
- *
- * 在多条件分支下使用 Object.assign 会导致同名方法被覆盖，
- * 这个函数通过创建组合函数来确保所有方法都能按顺序执行。
- *
- * @param {Object} target - 目标 visitor 对象
- * @param {Object} source - 要链式分配的 visitor 方法对象
- *
- * @example
- * const visitor = {}
- *
- * // 第一次合并
- * chainAssign(visitor, {
- *   CallExpression(path) {
- *     console.log('第一个处理器')
- *   }
- * })
- *
- * // 第二次合并 - 不会覆盖，而是组合执行
- * chainAssign(visitor, {
- *   CallExpression(path) {
- *     console.log('第二个处理器')
- *   }
- * })
- *
- * // 执行时会依次输出:
- * // 第一个处理器
- * // 第二个处理器
- */
-module.exports = function chainAssign (target, source) {
-  for (const [key, value] of Object.entries(source)) {
-    if (target[key]) {
-      // 如果已存在同名方法，创建组合函数依次执行
-      const originalMethod = target[key]
-      target[key] = function (path) {
-        originalMethod.call(this, path)
-        // 只有当节点没有停止遍历或被移除时才继续执行
-        if (!path.removed && !path.shouldStop) {
-          value.call(this, path)
-        }
-      }
-    } else {
-      target[key] = value
-    }
-  }
-}