@mpxjs/webpack-plugin 2.10.15 → 2.10.16-beta.3

package/lib/utils/check-core-version-match.js

@@ -1,22 +1,82 @@
-const coreVersion = require('@mpxjs/core/package.json').version
-const utilsVersion = require('@mpxjs/utils/package.json').version
-const corePath = require.resolve('@mpxjs/core')
-const utilsPath = require.resolve('@mpxjs/utils')
-const semverLt = require('semver/functions/lt')
+const semverSatisfies = require('semver/functions/satisfies')
+const semverCoerce = require('semver/functions/coerce')
 
-const leastCoreVersion = '2.8.59'
-const leastUtilsVersion = '2.8.59'
+// 定义包之间的依赖关系和最低版本要求
+const PACKAGE_DEPENDENCIES = {
+  '@mpxjs/webpack-plugin': {
+    '@mpxjs/core': '^2.10.15 || ^2.10.15-beta.1',
+    '@mpxjs/utils': '^2.10.13 || ^2.10.13-beta.1',
+    '@mpxjs/api-proxy': '^2.10.15 || ^2.10.15-beta.1'
+  }
+}
+
+function getPackageVersion (packageName) {
+  try {
+    return require(`${packageName}/package.json`).version
+  } catch (e) {
+    console.warn(`无法获取 ${packageName} 的版本信息: ${e.message}`)
+    return null
+  }
+}
+
+function checkVersionSatisfies (version, requiredVersion) {
+  try {
+    const normalizedVersion = semverCoerce(version).version
+    return semverSatisfies(normalizedVersion, requiredVersion)
+  } catch (e) {
+    console.warn(`版本检查失败: ${e.message}`)
+    return false
+  }
+}
+
+function checkPackageDependencies (packageName) {
+  const dependencies = PACKAGE_DEPENDENCIES[packageName]
+  if (!dependencies) return []
+
+  const results = []
+
+  for (const depName in dependencies) {
+    const requiredVersion = dependencies[depName]
+    const actualVersion = getPackageVersion(depName)
+
+    if (!actualVersion) {
+      results.push({
+        dependency: depName,
+        required: requiredVersion,
+        actual: null,
+        compatible: false,
+        error: `无法获取 ${depName} 的版本信息`
+      })
+      continue
+    }
+
+    const isCompatible = checkVersionSatisfies(actualVersion, requiredVersion)
+    results.push({
+      dependency: depName,
+      required: requiredVersion,
+      actual: actualVersion,
+      compatible: isCompatible
+    })
+  }
+
+  return results
+}
 
-function compare (version, leastVersion, npmName, npmPath) {
-  if (semverLt(version, leastVersion)) {
+function checkVersionCompatibility () {
+  const pluginResults = checkPackageDependencies('@mpxjs/webpack-plugin')
+  const incompatibleResults = pluginResults.filter(result => !result.compatible)
+  if (incompatibleResults.length > 0) {
+    const errorMessages = incompatibleResults.map(result => {
+      if (!result.actual) {
+        return `  - ${result.error || `${result.dependency} 未安装`}`
+      }
+      return `  - ${result.dependency}@${result.actual} 不满足所需版本 ${result.required}`
+    })
     throw new Error(
-      `${npmName} packages version mismatch:
-    -${npmName}@${version}(${npmPath})
-    This may cause things to work incorrectly, Make sure the usage version is greater than ${leastVersion}.
-    `
+      `检测到 @mpxjs 包版本不兼容问题：\n${errorMessages.join('\n')}\n\n` +
+      '这可能导致编译或运行异常。请确保所有 @mpxjs 相关包的版本兼容，建议使用相同版本。'
     )
   }
 }
 
-compare(coreVersion, leastCoreVersion, '@mpxjs/core', corePath)
-compare(utilsVersion, leastUtilsVersion, '@mpxjs/utils', utilsPath)
+module.exports = checkVersionCompatibility

package/lib/utils/const.js

@@ -6,5 +6,6 @@ module.exports = {
   JSON_JS_EXT: '.json.js',
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
   MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
-  PARENT_MODULE_ID: '__pid'
+  PARENT_MODULE_ID: '__pid',
+  MPX_TAG_PAGE_SELECTOR: 'mpx-page'
 }

package/lib/utils/dom-tag-config.js

@@ -91,7 +91,7 @@ const isBuildInReactTag = makeMap(
   'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
   'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
   'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
+  'mpx-icon,mpx-canvas,mpx-camera'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')

package/lib/utils/env.js

@@ -10,8 +10,13 @@ function isMiniProgram (mode) {
     return !isWeb(mode) && !isReact(mode)
 }
 
+function isNoMode (mode) {
+    return mode === 'noMode'
+}
+
 module.exports = {
     isWeb,
     isReact,
-    isMiniProgram
+    isMiniProgram,
+    isNoMode
 }

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/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/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

@@ -51,10 +51,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,12 +65,12 @@ 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, {

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,6 +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 parseQuery = require('loader-utils').parseQuery
 
 module.exports = function (content) {
@@ -30,8 +31,7 @@ module.exports = function (content) {
         '  __mpx_args__[i] = arguments[i];\n' +
         '}'
       ).program.body
-      // todo Object.assign可能会覆盖，未来存在非预期的覆盖case时需要改进处理
-      Object.assign(visitor, {
+      chainAssign(visitor, {
         Identifier (path) {
           if (path.node.name === 'arguments') {
             path.node.name = '__mpx_args__'
@@ -66,7 +66,7 @@ module.exports = function (content) {
     }
 
     if (mode !== 'wx') {
-      Object.assign(visitor, {
+      chainAssign(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') {
-    Object.assign(visitor, {
+    chainAssign(visitor, {
       MemberExpression (path) {
         const property = path.node.property
         if (
@@ -96,11 +96,11 @@ module.exports = function (content) {
   }
 
   if (!module.wxs) {
-    Object.assign(visitor, {
+    chainAssign(visitor, {
       MemberExpression (path) {
         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.15",
+  "version": "2.10.16-beta.3",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -21,6 +21,7 @@
     "@babel/traverse": "^7.16.0",
     "@babel/types": "^7.16.0",
     "@better-scroll/core": "^2.5.1",
+    "@better-scroll/mouse-wheel": "^2.5.1",
     "@better-scroll/movable": "^2.5.1",
     "@better-scroll/observe-dom": "^2.5.1",
     "@better-scroll/pull-down": "^2.5.1",
@@ -28,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.13",
+    "@mpxjs/utils": "^2.10.16",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -50,6 +51,7 @@
     "mime": "^2.2.2",
     "object-assign": "^4.1.1",
     "postcss": "^8.4.5",
+    "postcss-import": "^16.1.1",
     "postcss-load-config": "^3.1.1",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",
@@ -62,6 +64,9 @@
     "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": {
@@ -77,16 +82,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.15",
+    "@mpxjs/api-proxy": "^2.10.16",
     "@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",
@@ -94,11 +102,12 @@
     "react-native-safe-area-context": "^4.12.0",
     "react-native-svg": "^15.8.0",
     "react-native-video": "^6.9.0",
+    "react-native-vision-camera": "^4.7.2",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "4ea4a54f55aa938ad139e080827cffbbf7bb82db"
+  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
 }