@mpxjs/webpack-plugin 2.10.17-unocss.1 → 2.10.18-beta.1

package/lib/index.js

@@ -30,6 +30,7 @@ const AddEnvPlugin = require('./resolver/AddEnvPlugin')
 const PackageEntryPlugin = require('./resolver/PackageEntryPlugin')
 const DynamicRuntimePlugin = require('./resolver/DynamicRuntimePlugin')
 const FixDescriptionInfoPlugin = require('./resolver/FixDescriptionInfoPlugin')
+const ExtendComponentsPlugin = require('./resolver/ExtendComponentsPlugin')
 // const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency')
 // const HarmonyImportSideEffectDependency = require('webpack/lib/dependencies/HarmonyImportSideEffectDependency')
 // const RequireHeaderDependency = require('webpack/lib/dependencies/RequireHeaderDependency')
@@ -403,6 +404,7 @@ class MpxWebpackPlugin {
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
     const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, this.options.normalNpmPackages, 'file')
     const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
+    const extendComponentsPlugin = new ExtendComponentsPlugin('described-resolve', this.options.mode, 'resolve')
 
     if (Array.isArray(compiler.options.resolve.plugins)) {
       compiler.options.resolve.plugins.push(addModePlugin)
@@ -417,6 +419,7 @@ class MpxWebpackPlugin {
     }
     compiler.options.resolve.plugins.push(packageEntryPlugin)
     compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
+    compiler.options.resolve.plugins.push(extendComponentsPlugin)
     compiler.options.resolve.plugins.push(dynamicPlugin)
 
     const optimization = compiler.options.optimization
@@ -1455,6 +1458,7 @@ class MpxWebpackPlugin {
             const context = parser.state.module.context
             const { queryObj, resourcePath } = parseRequest(request)
             let tarRoot = queryObj.root
+
             if (!tarRoot && mpx.asyncSubpackageRules) {
               for (const item of mpx.asyncSubpackageRules) {
                 if (matchCondition(resourcePath, item)) {
@@ -1463,49 +1467,49 @@ class MpxWebpackPlugin {
                 }
               }
             }
-            if (tarRoot) {
+            // TODO 后续考虑和 asyncSubpackageRules 配置合并
+            if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+
+            if (tarRoot && mpx.supportRequireAsync) {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (mpx.supportRequireAsync) {
-                if (isWeb(mpx.mode) || isReact(mpx.mode)) {
-                  if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
-                  const depBlock = new AsyncDependenciesBlock(
-                    {
-                      name: tarRoot + '/index'
-                    },
-                    expr.loc,
-                    request
-                  )
-                  const dep = new ImportDependency(request, expr.range, undefined, {
-                    isRequireAsync: true,
-                    retryRequireAsync: this.options.retryRequireAsync
-                  })
-                  dep.loc = expr.loc
-                  depBlock.addDependency(dep)
-                  parser.state.current.addBlock(depBlock)
-                } else {
-                  const dep = new DynamicEntryDependency(range, request, 'export', '', tarRoot, '', context, {
-                    isAsync: true,
-                    isRequireAsync: true,
-                    retryRequireAsync: this.options.retryRequireAsync,
-                    requireAsyncRange: expr.range
-                  })
-
-                  parser.state.current.addPresentationalDependency(dep)
-                  // 包含require.async的模块不能被concatenate，避免DynamicEntryDependency中无法获取模块chunk以计算相对路径
-                  parser.state.module.buildInfo.moduleConcatenationBailout = 'require async'
-                }
+              if (isWeb(mpx.mode) || isReact(mpx.mode)) {
+                const depBlock = new AsyncDependenciesBlock(
+                  {
+                    name: tarRoot + '/index'
+                  },
+                  expr.loc,
+                  request
+                )
+                const dep = new ImportDependency(request, expr.range, undefined, {
+                  isRequireAsync: true,
+                  retryRequireAsync: this.options.retryRequireAsync
+                })
+                dep.loc = expr.loc
+                depBlock.addDependency(dep)
+                parser.state.current.addBlock(depBlock)
               } else {
-                const range = expr.range
-                const dep = new CommonJsAsyncDependency(request, range)
-                parser.state.current.addDependency(dep)
+                const dep = new DynamicEntryDependency(range, request, 'export', '', tarRoot, '', context, {
+                  isAsync: true,
+                  isRequireAsync: true,
+                  retryRequireAsync: this.options.retryRequireAsync,
+                  requireAsyncRange: expr.range
+                })
+
+                parser.state.current.addPresentationalDependency(dep)
+                // 包含require.async的模块不能被concatenate，避免DynamicEntryDependency中无法获取模块chunk以计算相对路径
+                parser.state.module.buildInfo.moduleConcatenationBailout = 'require async'
               }
-              if (args) parser.walkExpressions(args)
-              return true
             } else {
-              compilation.errors.push(new Error(`The require async JS [${request}] need to declare subpackage name by root`))
+              const dep = new CommonJsAsyncDependency(request, expr.range)
+              parser.state.current.addDependency(dep)
+              if (!tarRoot) {
+                compilation.warnings.push(new Error(`The require async JS [${request}] need to declare subpackage name by root`))
+              }
             }
+            if (args) parser.walkExpressions(args)
+            return true
           }
         }
 
@@ -2071,3 +2075,12 @@ try {
 }
 
 module.exports = MpxWebpackPlugin
+
+/**
+ * 定义 MpxWebpackPlugin 的配置
+ * @param {MpxWebpackPluginOptions} options - 插件选项
+ * @returns {MpxWebpackPluginOptions}
+ */
+module.exports.defineConfig = function defineConfig(options) {
+  return options
+}

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

@@ -193,7 +193,6 @@ module.exports = function getSpec({ warn, error }) {
     }
     return true
   }
-
   // prop & value 校验：过滤的不合法的属性和属性值
   const verification = ({ prop, value, selector }, { mode }) => {
     return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }) && ({ prop, value })
@@ -426,7 +425,6 @@ module.exports = function getSpec({ warn, error }) {
     values.sort()
     const transform = []
     values.forEach(item => {
-      // const match = item.match(/(\w+)\(([^()]+|\s*var\([^)]+\))\)/)
       const match = item.match(/([/\w]+)\((.+)\)/)
       if (match && match.length >= 3) {
         let key = match[1]

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

@@ -18,6 +18,18 @@ module.exports = function ({ print }) {
 
   return {
     test: TAG_NAME,
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
     props: [
       {
         test: 'mode',

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

@@ -13,7 +13,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/react/processStyles.js

@@ -24,7 +24,7 @@ module.exports = function (styles, {
         new Error('[Mpx style error][' + loaderContext.resource + ']: ' + msg)
       )
     }
-    const { mode, srcMode, hasUnoCSS } = loaderContext.getMpx()
+    const { mode, srcMode } = loaderContext.getMpx()
     async.eachOfSeries(styles, (style, i, callback) => {
       const scoped = style.scoped || autoScope
       const extraOptions = {
@@ -70,44 +70,13 @@ module.exports = function (styles, {
         }, '')
         if (ctorType === 'app') {
           output += `
-          global.__classCaches = global.__classCaches || [];
-          var __classCache = new Map();
-          global.__classCaches.push(__classCache);\n`
-
-          if (hasUnoCSS) {
-            output += `
-            var __unoClassMap;
-            global.__getUnoStyle = function(className) {
-              if (!__unoClassMap) {
-                __unoClassMap = {__unoCssMapPlaceholder__}
-              }
-              return global.__GCC(className, __unoClassMap, __classCache);
-            };
-            var __unoVarClassMap;
-            global.__getUnoVarStyle = function(className) {
-              if (!__unoVarClassMap) {
-                __unoVarClassMap = {__unoVarUtilitiesCssMap__}
-              }
-              return global.__GCC(className, __unoVarClassMap, __classCache);
-            };\n`
-            output += `
-            var __appClassMap
-            global.__getAppClassStyle = function(className) {
-              if(!__appClassMap) {
-                __appClassMap = {__unoCssMapPreflights__, ${classMapCode}};
-              }
-              return global.__GCC(className, __appClassMap, __classCache);
-            };\n`
-          } else {
-            output += `
-            var __appClassMap
-            global.__getAppClassStyle = function(className) {
-              if(!__appClassMap) {
-                __appClassMap = {${classMapCode}};
-              }
-              return global.__GCC(className, __appClassMap, __classCache);
-            };\n`
-          }
+          var __appClassMap
+          global.__getAppClassStyle = function(className) {
+            if(!__appClassMap) {
+              __appClassMap = {${classMapCode}};
+            }
+            return global.__GCC(className, __appClassMap, __classCache);
+          };\n`
         } else {
           output += `
           var __classMap

package/lib/react/style-helper.js

@@ -87,12 +87,6 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
 
   root.walkRules(rule => {
     const classMapValue = {}
-    const prev = rule.prev()
-    let layer
-    if (prev && prev.type === 'comment' && prev.text.includes('rn-layer:')) {
-      layer = JSON.stringify(prev.text.split(':')[1].trim())
-    }
-
     rule.walkDecls(({ prop, value }) => {
       if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
       let newData = rulesRunner({ prop, value, selector: rule.selector })
@@ -124,6 +118,7 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
         classMapValue[prop] = value
       })
     })
+
     const classMapKeys = []
     const options = getMediaOptions(rule.parent.params || '')
     const isMedia = options.maxWidth || options.minWidth
@@ -131,20 +126,15 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
       selectors.each(selector => {
         if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
           classMapKeys.push(selector.nodes[0].value)
-        } else if (selector.nodes.length === 2 && selector.nodes[0].type === 'class' && selector.nodes[1].type === 'pseudo') {
-          classMapKeys.push(selector.nodes[0].value + selector.nodes[1].value)
         } else {
           error('Only single class selector is supported in react native mode temporarily.')
         }
       })
     }).processSync(rule.selector)
+
     if (classMapKeys.length) {
       classMapKeys.forEach((key) => {
         if (Object.keys(classMapValue).length) {
-          const layerObj = layer ? { _layer: layer } : {}
-          if (key.endsWith('!')) {
-            layerObj._layer = '"important"'
-          }
           let _default = classMap[key]?._default
           let _media = classMap[key]?._media
           if (isMedia) {
@@ -157,16 +147,15 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
             })
             classMap[key] = {
               _media,
-              _default,
-              ...layerObj
+              _default
             }
           } else if (_default) {
             // 已有媒体查询数据，此次非媒体查询
-            Object.assign(_default, classMapValue, layerObj)
+            Object.assign(_default, classMapValue)
           } else {
             // 无媒体查询
             const val = classMap[key] || {}
-            classMap[key] = Object.assign(val, classMapValue, layerObj)
+            classMap[key] = Object.assign(val, classMapValue)
           }
         }
       })

package/lib/resolver/ExtendComponentsPlugin.js

@@ -0,0 +1,60 @@
+const { EXTEND_COMPONENT_CONFIG } = require('../utils/const')
+
+/**
+ * 扩展组件路径解析插件
+ * 将 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name] 格式的路径
+ * 解析为对应平台的实际组件路径
+ */
+module.exports = class ExtendComponentsPlugin {
+  constructor (source, mode, target) {
+    this.source = source
+    this.target = target
+    this.mode = mode
+  }
+
+  apply (resolver) {
+    const target = resolver.ensureHook(this.target)
+    const mode = this.mode
+
+    resolver.getHook(this.source).tapAsync('ExtendComponentsPlugin', (request, resolveContext, callback) => {
+      const requestPath = request.request
+      if (!requestPath || !requestPath.startsWith('@mpxjs/webpack-plugin/lib/runtime/components/extends/')) {
+        return callback()
+      }
+
+      // 匹配 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name]
+      const extendsMatch = requestPath.match(/^@mpxjs\/webpack-plugin\/lib\/runtime\/components\/extends\/(.+)$/)
+
+      if (!extendsMatch) {
+        return callback()
+      }
+
+      const componentName = extendsMatch[1]
+
+      // 检查组件是否在配置中
+      if (!EXTEND_COMPONENT_CONFIG[componentName]) {
+        return callback(new Error(`Extended component "${componentName}" was not found. Available extended components: ${Object.keys(EXTEND_COMPONENT_CONFIG).join(', ')}`))
+      }
+
+      // 获取当前模式下的组件路径
+      const componentConfig = EXTEND_COMPONENT_CONFIG[componentName]
+      const newRequest = componentConfig[mode]
+
+      if (!newRequest) {
+        return callback(new Error(`Extended component "${componentName}" cannot be used on the ${mode} platform. Supported platforms include: ${Object.keys(componentConfig).join(', ')}`))
+      }
+
+      const obj = Object.assign({}, request, {
+        request: newRequest
+      })
+
+      resolver.doResolve(
+        target,
+        obj,
+        `resolve extend component: ${componentName} to ${newRequest}`,
+        resolveContext,
+        callback
+      )
+    })
+  }
+}