@mpxjs/webpack-plugin 2.9.58 → 2.9.59

package/lib/config.js

@@ -5,9 +5,7 @@ const reactConfig = {
       if (match) {
         return {
           prefix: match[1],
-          eventName: match[2].replace(/^./, function (match) {
-            return match.toLowerCase()
-          }),
+          eventName: match[2],
           modifier: match[3]
         }
       }

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

@@ -153,17 +153,21 @@ module.exports = function getSpec ({ warn, error }) {
     const cssMap = []
     const props = Object.getOwnPropertyNames(keyMap)
     let idx = 0
+    let propsIdx = 0
     // 按值的个数循环赋值
-    while (idx < values.length && idx < props.length) {
-      const prop = props[idx]
+    while (idx < values.length || propsIdx < props.length) {
+      const prop = props[propsIdx]
       const valueType = keyMap[prop]
       const dashProp = hump2dash(prop)
-      // 校验 value 类型
-      verifyValues({ prop, value: values[idx], valueType })
       const value = values[idx]
       if (isIllegalValue({ prop: dashProp, value })) {
-        // 过滤不支持 value
+        // 过滤 rn prop 不支持 value
         unsupportedValueError({ prop: dashProp, value })
+        idx += 1
+        propsIdx += 1
+      } else if (!verifyValues({ prop, value, valueType })) {
+        // 校验 value 类型，类型不符则匹配下一个value
+        idx += 1
       } else if (prop.includes('.')) {
         // 多个属性值的prop
         const [main, sub] = prop.split('.')
@@ -178,14 +182,17 @@ module.exports = function getSpec ({ warn, error }) {
             }
           })
         }
+        idx += 1
+        propsIdx += 1
       } else {
         // 单个值的属性
         cssMap.push({
           prop,
           value
         })
+        idx += 1
+        propsIdx += 1
       }
-      idx += 1
     }
     return cssMap
   }
@@ -355,6 +362,69 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
 
+  const formatTransform = ({ prop, value }, { mode }) => {
+    if (Array.isArray(value)) return { prop, value }
+    const values = value.trim().split(/\s(?![^()]*\))/)
+    const transform = []
+    values.forEach(item => {
+      const match = item.match(/([/\w]+)\(([^)]+)\)/)
+      if (match.length >= 3) {
+        let key = match[1]
+        const val = match[2]
+        switch (key) {
+          case 'translateX':
+          case 'translateY':
+          case 'scaleX':
+          case 'scaleY':
+          case 'rotateX':
+          case 'rotateY':
+          case 'rotateZ':
+          case 'rotate':
+          case 'skewX':
+          case 'skewY':
+            // 单个值处理
+            transform.push({ [key]: val })
+            break
+          case 'matrix':
+          case 'matrix3d':
+            transform.push({ [key]: val.split(',').map(val => +val) })
+            break
+          case 'translate':
+          case 'scale':
+          case 'skew':
+          case 'rotate3d': // x y z angle
+          case 'translate3d': // x y 支持 z不支持
+          case 'scale3d': // x y 支持 z不支持
+          {
+            // 2 个以上的值处理
+            key = key.replace('3d', '')
+            const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+            const xyz = ['X', 'Y', 'Z']
+            transform.push(...vals.map((v, index) => {
+              if (key !== 'rotate' && index > 1) {
+                unsupportedPropError({ prop: `${key}Z`, mode })
+              }
+              return { [`${key}${xyz[index] || ''}`]: v.trim() }
+            }))
+            break
+          }
+          case 'translateZ':
+          case 'scaleZ':
+          default:
+            // 不支持的属性处理
+            unsupportedPropError({ prop: key, mode })
+            break
+        }
+      } else {
+        error(`Property [${prop}] is invalid, please check the value!`)
+      }
+    })
+    return {
+      prop,
+      value: transform
+    }
+  }
+
   const spec = {
     supportedModes: ['ios', 'android'],
     rules: [
@@ -417,6 +487,11 @@ module.exports = function getSpec ({ warn, error }) {
         ios: formatLineHeight,
         android: formatLineHeight
       },
+      {
+        test: 'transform',
+        ios: formatTransform,
+        android: formatTransform
+      },
       // 值类型校验放到最后
       { // color 颜色值校验 color xx-color 等
         test: /^(color|(.+-color))$/,

package/lib/react/processScript.js

@@ -27,12 +27,16 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
 import { NavigationContainer, createNavigationContainerRef, StackActions } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { Provider } from '@ant-design/react-native'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
   createNavigationContainerRef: createNavigationContainerRef,
   createNativeStackNavigator: createNativeStackNavigator,
   StackActions: StackActions,
-  Provider: Provider
+  Provider: Provider,
+  SafeAreaProvider: SafeAreaProvider,
+  useSafeAreaInsets: useSafeAreaInsets
 }\n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,

package/lib/react/style-helper.js

@@ -47,7 +47,16 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
         prop = dash2hump(item.prop)
         value = item.value
         if (Array.isArray(value)) {
-          value = value.map(item => formatValue(item))
+          value = value.map(val => {
+            if (typeof val === 'object') {
+              for (const key in val) {
+                val[key] = formatValue(val[key])
+              }
+              return val
+            } else {
+              return formatValue(val)
+            }
+          })
         } else if (typeof value === 'object') {
           for (const key in value) {
             value[key] = formatValue(value[key])

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -10,8 +10,8 @@ const getTouchEvent = (type, event, props, config) => {
         ...event,
         type,
         timeStamp: timestamp,
-        target: {
-            ...(event.target || {}),
+        currentTarget: {
+            ...(event.currentTarget || {}),
             id: id || '',
             dataset: getDataSet(props),
             offsetLeft: layoutRef?.current?.offsetLeft || 0,

package/lib/runtime/components/react/dist/mpx-text.jsx

@@ -8,13 +8,13 @@ import { useRef, useEffect, forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
 // @ts-ignore
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { PERCENT_REGX } from './utils';
+import { PERCENT_REGEX } from './utils';
 const DEFAULT_STYLE = {
     fontSize: 16
 };
 const transformStyle = (styleObj) => {
     let { lineHeight } = styleObj;
-    if (typeof lineHeight === 'string' && PERCENT_REGX.test(lineHeight)) {
+    if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) {
         lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize);
         styleObj.lineHeight = lineHeight;
     }

package/lib/runtime/components/react/dist/mpx-view.jsx

@@ -10,7 +10,7 @@ import { useRef, useState, useEffect, forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
 // @ts-ignore
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { parseUrl, TEXT_STYLE_REGEX, PERCENT_REGX, isText } from './utils';
+import { parseUrl, TEXT_STYLE_REGEX, PERCENT_REGEX, isText } from './utils';
 const IMAGE_STYLE_REGEX = /^background(Image|Size|Repeat|Position)$/;
 function groupBy(style, callback, group = {}) {
     let groupKey = '';
@@ -33,7 +33,7 @@ const applyHandlers = (handlers, args) => {
 };
 const checkNeedLayout = (style) => {
     const [width, height] = style.sizeList;
-    return (PERCENT_REGX.test(`${height}`) && width === 'auto') || (PERCENT_REGX.test(`${width}`) && height === 'auto');
+    return (PERCENT_REGEX.test(`${height}`) && width === 'auto') || (PERCENT_REGEX.test(`${width}`) && height === 'auto');
 };
 /**
  * h - 用户设置的高度
@@ -42,7 +42,7 @@ const checkNeedLayout = (style) => {
  * **/
 function calculateSize(h, lh, ratio) {
     let height, width;
-    if (PERCENT_REGX.test(`${h}`)) { // auto  px/rpx 
+    if (PERCENT_REGEX.test(`${h}`)) { // auto  px/rpx 
         if (!lh)
             return null;
         height = (parseFloat(`${h}`) / 100) * lh;
@@ -97,8 +97,8 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.style.resizeMode = 'stretch';
-            newWidth = PERCENT_REGX.test(`${width}`) ? width : +width;
-            newHeight = PERCENT_REGX.test(`${width}`) ? height : +height;
+            newWidth = PERCENT_REGEX.test(`${width}`) ? width : +width;
+            newHeight = PERCENT_REGEX.test(`${width}`) ? height : +height;
         }
         // 样式合并
         imageProps.style = {

package/lib/runtime/components/react/dist/utils.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef, Children, isValidElement } from 'react';
 import { StyleSheet } from 'react-native';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
-export const PERCENT_REGX = /^\s*-?\d+(\.\d+)?%\s*$/;
+export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
 const URL_REGEX = /url\(["']?(.*?)["']?\)/;
 export function omit(obj, fields) {
     const shallowCopy = Object.assign({}, obj);

package/lib/runtime/components/react/getInnerListeners.ts

@@ -33,8 +33,8 @@ const getTouchEvent = (
     ...event,
     type,
     timeStamp: timestamp,
-    target: {
-      ...(event.target || {}),
+    currentTarget: {
+      ...(event.currentTarget || {}),
       id: id || '',
       dataset: getDataSet(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,

package/lib/runtime/components/react/mpx-text.tsx

@@ -9,7 +9,7 @@ import { useRef, useEffect, forwardRef, ReactNode, ForwardedRef, JSX } from 'rea
 import useInnerProps from './getInnerListeners'
 // @ts-ignore
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { PERCENT_REGX } from './utils'
+import { PERCENT_REGEX } from './utils'
 
 
 interface _TextProps extends TextProps {
@@ -28,7 +28,7 @@ const DEFAULT_STYLE = {
 
 const transformStyle = (styleObj: TextStyle) => {
   let { lineHeight } = styleObj
-  if (typeof lineHeight === 'string' && PERCENT_REGX.test(lineHeight)) {
+  if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) {
     lineHeight = (parseFloat(lineHeight)/100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize)
     styleObj.lineHeight = lineHeight
   }

package/lib/runtime/components/react/mpx-view.tsx

@@ -5,13 +5,13 @@
  * ✔ hover-stay-time
  */
 import { View, Text, StyleProp, TextStyle, ViewStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ForwardedRef, ReactNode, JSX } from 'react'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
 // @ts-ignore
 import useInnerProps from './getInnerListeners'
 // @ts-ignore
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 
-import { parseUrl, TEXT_STYLE_REGEX, PERCENT_REGX, isText} from './utils'
+import { parseUrl, TEXT_STYLE_REGEX, PERCENT_REGEX, isText} from './utils'
 
 
 type ExtendedViewStyle = ViewStyle & {
@@ -79,7 +79,7 @@ const applyHandlers = (handlers: Handler[] , args: any [] ) => {
 
 const checkNeedLayout = (style: PreImageInfo) => {  
   const [width, height] = style.sizeList
-  return (PERCENT_REGX.test(`${height}`) && width === 'auto') || (PERCENT_REGX.test(`${width}`) && height === 'auto')
+  return (PERCENT_REGEX.test(`${height}`) && width === 'auto') || (PERCENT_REGEX.test(`${width}`) && height === 'auto')
 }
 
 /**
@@ -89,7 +89,7 @@ const checkNeedLayout = (style: PreImageInfo) => {
  * **/
 function calculateSize(h: number, lh: number, ratio: number) {
   let height, width
-  if (PERCENT_REGX.test(`${h}`)) { // auto  px/rpx 
+  if (PERCENT_REGEX.test(`${h}`)) { // auto  px/rpx 
     if (!lh) return null
     height = (parseFloat(`${h}`) / 100) * lh
     width = height * ratio
@@ -136,8 +136,8 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       (imageProps.style as ImageStyle).resizeMode = 'stretch'
-      newWidth = PERCENT_REGX.test(`${width}`) ? width : +width! as DimensionValue
-      newHeight = PERCENT_REGX.test(`${width}`) ? height : +height! as DimensionValue
+      newWidth = PERCENT_REGEX.test(`${width}`) ? width : +width! as DimensionValue
+      newHeight = PERCENT_REGEX.test(`${width}`) ? height : +height! as DimensionValue
     }
     // 样式合并
     imageProps.style = {

package/lib/runtime/components/react/utils.ts

@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 
-export const PERCENT_REGX = /^\s*-?\d+(\.\d+)?%\s*$/
+export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
 
 const URL_REGEX = /url\(["']?(.*?)["']?\)/
 

package/lib/template-compiler/compiler.js

@@ -1052,7 +1052,7 @@ function stringifyWithResolveComputed (modelValue) {
   return result.join('+')
 }
 
-function processStyleReact (el) {
+function processStyleReact (el, options) {
   // process class/wx:class/style/wx:style/wx:show for react native
   const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val
   let staticClass = getAndRemoveAttr(el, 'class').val || ''
@@ -1088,10 +1088,24 @@ function processStyleReact (el) {
     const staticClassExp = parseMustacheWithContext(staticHoverClass).result
     addAttrs(el, [{
       name: 'hoverStyle',
-      // runtime helper
       value: `{{this.__getStyle(${staticClassExp})}}`
     }])
   }
+
+  // 处理externalClasses，将其转换为style作为props传递
+  if (options.externalClasses) {
+    options.externalClasses.forEach((className) => {
+      let externalClass = getAndRemoveAttr(el, className).val || ''
+      externalClass = externalClass.replace(/\s+/g, ' ')
+      if (externalClass) {
+        const externalClassExp = parseMustacheWithContext(externalClass).result
+        addAttrs(el, [{
+          name: className,
+          value: `{{this.__getStyle(${externalClassExp})}}`
+        }])
+      }
+    })
+  }
 }
 
 function getModelConfig (el, match) {
@@ -2590,7 +2604,7 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
-    processStyleReact(el)
+    processStyleReact(el, options)
     processEventReact(el)
     processComponentIs(el, options)
     processSlotReact(el)

package/lib/utils/shallow-stringify.js

@@ -6,7 +6,7 @@ module.exports = function shallowStringify (obj, isTemplateExp) {
     if (hasOwn(obj, key)) {
       let value = obj[key]
       if (Array.isArray(value)) {
-        value = `[${value.join(',')}]`
+        value = `[${value.map((item) => typeof item === 'object' ? shallowStringify(item, isTemplateExp) : item).join(',')}]`
       } else if (typeof value === 'object') {
         value = shallowStringify(value, isTemplateExp)
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.58",
+  "version": "2.9.59",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -90,5 +90,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "49fe4c4bc46ff4bf87cd8adde37981d4b4134aa7"
+  "gitHead": "aa001c11cc7b21772fc6f9f5bcdd13118fc6d67c"
 }