@mpxjs/webpack-plugin 2.9.42 → 2.9.48

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/index.js

@@ -25,7 +25,7 @@ module.exports = function ({
   callback
 }) {
   if (ctorType === 'app' && !queryObj.isApp) {
-    return processMainScript(parts.script, {
+    return processMainScript({
       loaderContext
     }, (err, scriptRes) => {
       if (err) return callback(err)

package/lib/react/processMainScript.js

@@ -1,16 +1,20 @@
 // 该文件下的字符串语句需要使用 es5 语法
 const addQuery = require('../utils/add-query')
-
 const {
-  stringifyRequest
+  stringifyRequest,
+  buildI18n
 } = require('./script-helper')
 
-module.exports = function (script, {
+module.exports = function ({
   loaderContext
 }, callback) {
-  const { projectName } = loaderContext.getMpx()
+  const { i18n, projectName } = loaderContext.getMpx()
 
   let output = 'import { AppRegistry } from \'react-native\'\n'
+
+  if (i18n) {
+    output += buildI18n({ loaderContext })
+  }
   // 此处可添加前置于App执行的语句
   output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
   output += `AppRegistry.registerComponent(${JSON.stringify(projectName)}, () => App)\n`

package/lib/react/processTemplate.js

@@ -77,6 +77,7 @@ module.exports = function (template, {
         hasScoped: false,
         moduleId,
         filePath: resourcePath,
+        // react中模版i18n不需要特殊处理
         i18n: null,
         checkUsingComponents,
         // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空

package/lib/react/script-helper.js

@@ -2,6 +2,7 @@ const loaderUtils = require('loader-utils')
 const createHelpers = require('../helpers')
 const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
+const normalize = require('../utils/normalize')
 
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
@@ -93,10 +94,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 () {
@@ -124,10 +126,18 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
   return content
 }
 
+function buildI18n ({ loaderContext }) {
+  const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
+  const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
+  const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
+  return `require(${stringifyRequest(loaderContext, i18nWxsRequest)})\n`
+}
+
 module.exports = {
   buildPagesMap,
   buildComponentsMap,
   getRequireScript,
   buildGlobalParams,
-  stringifyRequest
+  stringifyRequest,
+  buildI18n
 }

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/lib/web/index.js

@@ -35,13 +35,9 @@ module.exports = function ({
         }, callback)
       },
       (jsonRes, callback) => {
-        processMainScript(parts.script, {
+        processMainScript({
           loaderContext,
-          srcMode,
-          moduleId,
-          isProduction,
           jsonConfig: jsonRes.jsonObj,
-          outputPath: queryObj.outputPath || '',
           localComponentsMap: jsonRes.localComponentsMap,
           tabBar: jsonRes.jsonObj.tabBar,
           tabBarMap: jsonRes.tabBarMap,

package/lib/web/processMainScript.js

@@ -12,11 +12,8 @@ const {
   buildI18n
 } = require('./script-helper')
 
-module.exports = function (script, {
+module.exports = function ({
   loaderContext,
-  srcMode,
-  moduleId,
-  isProduction,
   jsonConfig,
   localComponentsMap,
   tabBar,
@@ -40,8 +37,6 @@ module.exports = function (script, {
     jsonConfig
   })
 
-  const scriptSrcMode = script ? script.mode || srcMode : srcMode
-
   let output = 'import \'@mpxjs/webpack-plugin/lib/runtime/base.styl\'\n'
   // hasUnoCSS由@mpxjs/unocss-plugin注入
   if (hasUnoCSS) {
@@ -58,10 +53,7 @@ Vue.use(VueRouter)\n`
   }
 
   output += buildGlobalParams({
-    moduleId,
-    scriptSrcMode,
     loaderContext,
-    isProduction,
     jsonConfig,
     webConfig,
     isMain: true,

package/lib/web/script-helper.js

@@ -170,17 +170,18 @@ function buildGlobalParams ({
     if (globalTabBar) {
       content += globalTabBar
     }
-  } else if (!hasApp) {
-    content += `
-  global.__mpxGenericsMap = global.__mpxGenericsMap || {}
-  global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-  global.__mpxTransRpxFn = ${webConfig.transRpxFn} \n`
-  }
-  content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
-  content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
-  content += `  global.currentInject = ${JSON.stringify({ moduleId })}\n`
-  if (!isProduction) {
-    content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
+  } else {
+    if (!hasApp) {
+      content += '  global.__mpxGenericsMap = global.__mpxGenericsMap || {}\n'
+      content += '  global.__mpxOptionsMap = global.__mpxOptionsMap || {}\n'
+      content += `  global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
+    }
+    content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
+    content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+    content += `  global.currentInject = ${JSON.stringify({ moduleId })}\n`
+    if (!isProduction) {
+      content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
+    }
   }
   return content
 }

package/package.json

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