@mpxjs/webpack-plugin 2.9.42 → 2.9.43

package/lib/index.js

@@ -27,6 +27,7 @@ const ExternalsPlugin = require('webpack/lib/ExternalsPlugin')
 const AddModePlugin = require('./resolver/AddModePlugin')
 const AddEnvPlugin = require('./resolver/AddEnvPlugin')
 const PackageEntryPlugin = require('./resolver/PackageEntryPlugin')
+const DynamicRuntimePlugin = require('./resolver/DynamicRuntimePlugin')
 const FixDescriptionInfoPlugin = require('./resolver/FixDescriptionInfoPlugin')
 // const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency')
 // const HarmonyImportSideEffectDependency = require('webpack/lib/dependencies/HarmonyImportSideEffectDependency')
@@ -343,6 +344,9 @@ class MpxWebpackPlugin {
     if (this.options.env) {
       compiler.options.resolve.plugins.push(addEnvPlugin)
     }
+    if (this.options.dynamicRuntime) {
+      compiler.options.resolve.plugins.push(new DynamicRuntimePlugin('before-file', 'file'))
+    }
     compiler.options.resolve.plugins.push(packageEntryPlugin)
     compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
     compiler.options.resolve.plugins.push(dynamicPlugin)

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

@@ -59,8 +59,8 @@ module.exports = function getSpec ({ warn, error }) {
     color: 'color',
     default: 'default' // 不校验
   }
-  // number 类型支持的单位
-  const numberRegExp = /^\s*(\d+(\.\d+)?)(rpx|px|%)?\s*$/
+  // number 类型支持的单位(包含auto)
+  const numberRegExp = /^\s*((\d+(\.\d+)?)(rpx|px|%)?)|(auto)\s*$/
   // RN 不支持的颜色格式
   const colorRegExp = /^\s*(lab|lch|oklab|oklch|color-mix|color|hwb|lch|light-dark).*$/
 
@@ -70,8 +70,8 @@ module.exports = function getSpec ({ warn, error }) {
       case ValueType.color: {
         const isNumber = numberRegExp.test(value)
         const isUnsupporttedColor = colorRegExp.test(value)
-        isNumber && warn(`React Native property [${prop}]'s valueType is ${valueType}, we does not set type number`)
-        isUnsupporttedColor && warn('React Native color does not support type [lab,lch,oklab,oklch,color-mix,color,hwb,lch,light-dark]')
+        isNumber && warn(`Property [${prop}] receives a valid color as value, not a number.`)
+        isUnsupporttedColor && warn('React Native\'s supported color format does not contain [lab,lch,oklab,oklch,color-mix,color,hwb,lch,light-dark].')
         return !isNumber && !isUnsupporttedColor
       }
       case ValueType.number: {
@@ -392,17 +392,17 @@ module.exports = function getSpec ({ warn, error }) {
         ios: getAbbreviation,
         android: getAbbreviation
       },
+      { // line-height 换算
+        test: 'line-height',
+        ios: formatLineHeight,
+        android: formatLineHeight
+      },
       // 值类型校验放到最后
       { // color 颜色值校验
         test: /.*color.*/i,
         ios: checkCommonValue(ValueType.color),
         android: checkCommonValue(ValueType.color)
       },
-      { // color 颜色值校验
-        test: 'line-height',
-        ios: formatLineHeight,
-        android: formatLineHeight
-      },
       { // number 值校验
         test: /.*width|height|left|right|top|bottom|radius|margin|padding|spacing|offset|size.*/i,
         ios: checkCommonValue(ValueType.number),

package/lib/react/script-helper.js

@@ -93,10 +93,11 @@ function buildGlobalParams ({
   if (ctorType === 'app') {
     content += `
 global.getApp = function () {}
-global.getCurrentPages = function () {}
+global.getCurrentPages = function () { return [] }
 global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
 global.__mpxGenericsMap = {}
 global.__mpxOptionsMap = {}
+global.__mpxPagesMap = {}
 global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
 global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
 global.__getAppComponents = function () {

package/lib/resolver/DynamicRuntimePlugin.js

@@ -0,0 +1,25 @@
+const { matchCondition } = require('../utils/match-condition')
+
+const matcher = {
+  include: ['@mpxjs/core/src/dynamic/dynamicRenderMixin.empty.js']
+}
+
+module.exports = class DynamicRuntimePlugin {
+  constructor (source, target) {
+    this.source = source
+    this.target = target
+  }
+
+  apply (resolver) {
+    const target = resolver.ensureHook(this.target)
+    resolver.getHook(this.source).tapAsync('DynamicRuntimePlugin', (request, resolveContext, callback) => {
+      const resourcePath = request.path
+      if (matchCondition(resourcePath, matcher)) {
+        request.path = resourcePath.replace(/\.empty/, '')
+        resolver.doResolve(target, request, 'resolve dynamicRenderMixin file', resolveContext, callback)
+      } else {
+        callback()
+      }
+    })
+  }
+}

package/lib/runtime/oc.wxs

@@ -1,15 +1,14 @@
 // 可选链wxs
 module.exports.g = function (val, valKeyArr) {
     var res = val
-    if (typeof val !== 'object') {
-        return undefined
-    }
     var len = valKeyArr.length
     var i = 0
     while (i < len) {
-        if ((res = res[valKeyArr[i]]) === undefined) {
+        if (typeof res !== 'object' || res === null) {
+            res = undefined
             break
         }
+        res = res[valKeyArr[i]]
         i++
     }
     return res

package/lib/runtime/stringify.wxs

@@ -137,9 +137,9 @@ function stringifyArray (value) {
   return res
 }
 
-var mpxDashReg = genRegExp('(.+)MpxDash$')
-// 转义字符在wxs正则中存在平台兼容性问题，用[$]规避使用转义字符
-var mpxDashReplaceReg = genRegExp('[$]', 'g')
+var mpxEscapeReg = genRegExp('(.+)MpxEscape$')
+var dashEscapeReg = genRegExp('_da_', 'g')
+var spaceEscapeReg = genRegExp('_sp_', 'g')
 
 function stringifyObject (value) {
   var res = ''
@@ -148,8 +148,8 @@ function stringifyObject (value) {
     var key = objKeys[i]
     if (value[key]) {
       if (res) res += ' '
-      if (mpxDashReg.test(key)) {
-        key = mpxDashReg.exec(key)[1].replace(mpxDashReplaceReg, '-')
+      if (mpxEscapeReg.test(key)) {
+        key = mpxEscapeReg.exec(key)[1].replace(dashEscapeReg, '-').replace(spaceEscapeReg, ' ')
       }
       res += key
     }

package/lib/template-compiler/bind-this.js

@@ -127,12 +127,8 @@ function checkDelAndGetPath (path) {
     }
 
     if (t.isMemberExpression(parent) && parent.computed) {
-      if (key === 'property') {
-        replace = true
-      } else {
-        canDel = false
-        break
-      }
+      canDel = false
+      break
     }
 
     if (t.isLogicalExpression(parent)) { // case: a || ((b || c) && d)

package/lib/template-compiler/compiler.js

@@ -1950,7 +1950,7 @@ function processText (el) {
 // RN中文字需被Text包裹
 function processWrapTextReact (el) {
   const parentTag = el.parent.tag
-  if (parentTag !== 'mpx-text' && parentTag !== 'Text') {
+  if (parentTag !== 'mpx-text' && parentTag !== 'Text' && parentTag !== 'wxs') {
     const wrapper = createASTElement('Text')
     replaceNode(el, wrapper, true)
     addChild(wrapper, el)
@@ -1971,7 +1971,7 @@ function processWrapTextReact (el) {
 // }
 
 function injectWxs (meta, module, src) {
-  if (runtimeCompile || addWxsModule(meta, module, src)) {
+  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode)) {
     return
   }
 
@@ -2574,6 +2574,7 @@ function closeElement (el, meta, options) {
     return
   }
   if (isReact(mode)) {
+    postProcessWxs(el, meta)
     postProcessForReact(el)
     postProcessIfReact(el)
     return

package/lib/template-compiler/trans-dynamic-class-expr.js

@@ -2,6 +2,7 @@ const babylon = require('@babel/parser')
 const t = require('@babel/types')
 const traverse = require('@babel/traverse').default
 const generate = require('@babel/generator').default
+const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 const escapeReg = /[()[\]{}#!.:,%'"+$]/g
 const escapeMap = {
   '(': '_pl_',
@@ -31,6 +32,12 @@ function mpEscape (str) {
   })
 }
 
+function keyEscape (str) {
+  let result = str.replace(/-/g, '_da_').replace(/\s+/g, '_sp_')
+  if (result !== str) result += 'MpxEscape'
+  return result
+}
+
 module.exports = function transDynamicClassExpr (expr, { error } = {}) {
   try {
     const ast = babylon.parse(expr, {
@@ -42,10 +49,10 @@ module.exports = function transDynamicClassExpr (expr, { error } = {}) {
       ObjectExpression (path) {
         path.node.properties.forEach((property) => {
           if (t.isObjectProperty(property) && !property.computed) {
-            let propertyName = property.key.name || property.key.value
-            propertyName = mpEscape(propertyName)
-            if (/-/.test(propertyName)) {
-              property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
+            const rawPropertyName = property.key.name || property.key.value
+            const propertyName = keyEscape(mpEscape(rawPropertyName))
+            if (!isValidIdentifierStr(propertyName)) {
+              error && error(`Dynamic classname [${rawPropertyName}] can not be escaped as a valid identifier, which is not supported.`)
             } else {
               property.key = t.identifier(propertyName)
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.42",
+  "version": "2.9.43",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -85,5 +85,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "45c7fd96af6723fa8c8ea2d659065417e66c77e2"
+  "gitHead": "92a347518d15400f87c380bc7248b8b6254631cf"
 }