@mpxjs/webpack-plugin 2.9.57 → 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

@@ -60,7 +60,7 @@ module.exports = function getSpec ({ warn, error }) {
     default: 'default' // 不校验
   }
   // number 类型支持的单位(包含auto)
-  const numberRegExp = /^\s*((\d+(\.\d+)?)(rpx|px|%)?)|(auto)\s*$/
+  const numberRegExp = /^\s*((-?\d+(\.\d+)?)(rpx|px|%)?)|(auto)\s*$/
   // RN 不支持的颜色格式
   const colorRegExp = /^\s*(lab|lch|oklab|oklch|color-mix|color|hwb|lch|light-dark).*$/
 
@@ -101,6 +101,26 @@ module.exports = function getSpec ({ warn, error }) {
       borderStyle: ValueType.default,
       borderColor: ValueType.color
     },
+    'border-left': { // 仅支持 width | style | color 这种排序
+      borderLeftWidth: ValueType.number,
+      borderLeftStyle: ValueType.default,
+      borderLeftColor: ValueType.color
+    },
+    'border-right': { // 仅支持 width | style | color 这种排序
+      borderRightWidth: ValueType.number,
+      borderRightStyle: ValueType.default,
+      borderRightColor: ValueType.color
+    },
+    'border-top': { // 仅支持 width | style | color 这种排序
+      borderTopWidth: ValueType.number,
+      borderTopStyle: ValueType.default,
+      borderTopColor: ValueType.color
+    },
+    'border-bottom': { // 仅支持 width | style | color 这种排序
+      borderBottomWidth: ValueType.number,
+      borderBottomStyle: ValueType.default,
+      borderBottomColor: ValueType.color
+    },
     'box-shadow': { // 仅支持 offset-x | offset-y | blur-radius | color 排序
       'shadowOffset.width': ValueType.number,
       'shadowOffset.height': ValueType.number,
@@ -133,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('.')
@@ -158,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
   }
@@ -220,7 +247,7 @@ module.exports = function getSpec ({ warn, error }) {
 
     return {
       prop,
-      value: /\d+(\.\d+)?$/.test(value) ? `${Math.round(value * 100)}%` : value
+      value: /^\s*-?\d+(\.\d+)?\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
     }
   }
 
@@ -335,11 +362,74 @@ 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: [
       { // 背景相关属性的处理
-        test: /.*background*./,
+        test: /^(background|background-image|background-color|background-size|background-repeat|background-position)$/,
         ios: checkBackgroundImage,
         android: checkBackgroundImage
       },
@@ -372,7 +462,7 @@ module.exports = function getSpec ({ warn, error }) {
         android: getAbbreviationAndroid
       },
       {
-        test: /.*font-variant.*/,
+        test: /^(font-variant|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures)$/,
         ios: getFontVariant,
         android: getFontVariant
       },
@@ -382,7 +472,7 @@ module.exports = function getSpec ({ warn, error }) {
         android: getBorderRadius
       },
       { // margin padding 内外边距的处理
-        test: /.*(margin|padding).*/,
+        test: /^(margin|padding)$/,
         ios: formatMargins,
         android: formatMargins
       },
@@ -397,14 +487,19 @@ module.exports = function getSpec ({ warn, error }) {
         ios: formatLineHeight,
         android: formatLineHeight
       },
+      {
+        test: 'transform',
+        ios: formatTransform,
+        android: formatTransform
+      },
       // 值类型校验放到最后
-      { // color 颜色值校验
-        test: /.*color.*/i,
+      { // color 颜色值校验 color xx-color 等
+        test: /^(color|(.+-color))$/,
         ios: checkCommonValue(ValueType.color),
         android: checkCommonValue(ValueType.color)
       },
-      { // number 值校验
-        test: /.*width|height|left|right|top|bottom|radius|margin|padding|spacing|offset|size.*/i,
+      { // number 值校验 // width height xx-left xx-top 等
+        test: /^((width|height)|(.+-(left|right|top|bottom|radius|spacing|size)))$/,
         ios: checkCommonValue(ValueType.number),
         android: checkCommonValue(ValueType.number)
       }

package/lib/platform/template/wx/component-config/web-view.js

@@ -6,6 +6,14 @@ module.exports = function () {
     web (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-web-view'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-web-view'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-web-view'
     }
   }
 }

package/lib/react/index.js

@@ -57,7 +57,6 @@ module.exports = function ({
         (callback) => {
           processStyles(parts.styles, {
             loaderContext,
-            srcMode,
             ctorType,
             autoScope,
             moduleId

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

@@ -5,7 +5,6 @@ const shallowStringify = require('../utils/shallow-stringify')
 
 module.exports = function (styles, {
   loaderContext,
-  srcMode,
   ctorType,
   autoScope,
   moduleId
@@ -14,7 +13,17 @@ module.exports = function (styles, {
   let content = ''
   let output = '/* styles */\n'
   if (styles.length) {
-    const { mode } = loaderContext.getMpx()
+    const warn = (msg) => {
+      loaderContext.emitWarning(
+        new Error('[style compiler][' + loaderContext.resource + ']: ' + msg)
+      )
+    }
+    const error = (msg) => {
+      loaderContext.emitError(
+        new Error('[style compiler][' + loaderContext.resource + ']: ' + msg)
+      )
+    }
+    const { mode, srcMode } = loaderContext.getMpx()
     async.eachOfSeries(styles, (style, i, callback) => {
       const scoped = style.scoped || autoScope
       const extraOptions = {
@@ -41,7 +50,9 @@ module.exports = function (styles, {
           content,
           filename: loaderContext.resourcePath,
           mode,
-          srcMode
+          srcMode,
+          warn,
+          error
         })
         if (ctorType === 'app') {
           output += `global.__getAppClassMap = function() {

package/lib/react/style-helper.js

@@ -2,10 +2,10 @@ const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
-const rpxRegExp = /^\s*(\d+(\.\d+)?)rpx\s*$/
-const pxRegExp = /^\s*(\d+(\.\d+)?)(px)?\s*$/
+const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
+const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode }) {
+function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
   const classMap = {}
 
   const root = postcss.parse(content, {
@@ -30,12 +30,8 @@ function getClassMap ({ content, filename, mode, srcMode }) {
     srcMode,
     type: 'style',
     testKey: 'prop',
-    warn: (msg) => {
-      console.warn('[style compiler warn]: ' + msg)
-    },
-    error: (msg) => {
-      console.error('[style compiler error]: ' + msg)
-    }
+    warn,
+    error
   })
 
   root.walkRules(rule => {
@@ -51,7 +47,16 @@ function getClassMap ({ content, filename, mode, srcMode }) {
         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])
@@ -70,7 +75,7 @@ function getClassMap ({ content, filename, mode, srcMode }) {
         if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
           classMapKeys.push(selector.nodes[0].value)
         } else {
-          rule.error('Only single class selector is supported in react native mode temporarily.')
+          error('Only single class selector is supported in react native mode temporarily.')
         }
       })
     }).processSync(rule.selector)

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/mpx-web-view.jsx

@@ -0,0 +1,115 @@
+import { forwardRef, useEffect } from 'react';
+// @ts-ignore
+import { noop } from '@mpxjs/utils';
+import { Portal } from '@ant-design/react-native';
+import { getCustomEvent } from './getInnerListeners';
+import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
+// @ts-ignore
+import { WebView } from 'react-native-webview';
+import useNodesRef from './useNodesRef';
+import { StyleSheet } from 'react-native';
+const _WebView = forwardRef((props, ref) => {
+    const { src, bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const defaultWebViewStyle = [
+        {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0
+        }
+    ];
+    const { nodeRef: webViewRef } = useNodesRef(props, ref, {
+        defaultStyle: StyleSheet.flatten([
+            ...defaultWebViewStyle
+        ])
+    });
+    const _messageList = [];
+    const handleUnload = () => {
+        // 这里是 WebView 销毁前执行的逻辑
+        bindmessage(getCustomEvent('messsage', {}, {
+            detail: {
+                data: _messageList
+            },
+            layoutRef: webViewRef
+        }));
+    };
+    useEffect(() => {
+        // 组件卸载时执行
+        return () => {
+            handleUnload();
+        };
+    }, []);
+    const _load = function (res) {
+        const result = {
+            type: 'load',
+            timeStamp: res.timeStamp,
+            detail: {
+                src: res.nativeEvent?.url
+            }
+        };
+        bindload(result);
+    };
+    const _error = function (res) {
+        const result = {
+            type: 'error',
+            timeStamp: res.timeStamp,
+            detail: {
+                src: ''
+            }
+        };
+        binderror(result);
+    };
+    const _message = function (res) {
+        let data;
+        let asyncCallback;
+        const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab });
+        try {
+            const nativeEventData = res.nativeEvent?.data;
+            data = JSON.parse(nativeEventData);
+        }
+        catch (e) {
+            data = {};
+        }
+        const postData = data.payload || {};
+        switch (data.type) {
+            case 'postMessage':
+                _messageList.push(postData.data);
+                asyncCallback = Promise.resolve({
+                    errMsg: 'invokeWebappApi:ok'
+                });
+                break;
+            case 'navigateTo':
+                asyncCallback = navObj.navigateTo(postData);
+                break;
+            case 'navigateBack':
+                asyncCallback = navObj.navigateBack(postData);
+                break;
+            case 'redirectTo':
+                asyncCallback = navObj.redirectTo(postData);
+                break;
+            case 'switchTab':
+                asyncCallback = navObj.switchTab(postData);
+                break;
+            case 'reLaunch':
+                asyncCallback = navObj.reLaunch(postData);
+                break;
+        }
+        asyncCallback && asyncCallback.then((res) => {
+            if (webViewRef.current?.postMessage) {
+                const test = JSON.stringify({
+                    type: data.type,
+                    callbackId: data.callbackId,
+                    result: res
+                });
+                webViewRef.current.postMessage(test);
+            }
+        });
+    };
+    // @ts-ignore
+    return (<Portal>
+    <WebView style={[...defaultWebViewStyle]} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
+  </Portal>);
+});
+_WebView.displayName = 'mpx-web-view';
+export default _WebView;

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 = /\d+(\.\d+)?%$/;
+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/mpx-web-view.tsx

@@ -0,0 +1,171 @@
+import { forwardRef, JSX, useRef, useEffect } from 'react'
+// @ts-ignore
+import { noop } from '@mpxjs/utils'
+import { Portal } from '@ant-design/react-native'
+import { getCustomEvent } from './getInnerListeners'
+import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
+// @ts-ignore
+import { WebView } from 'react-native-webview'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { StyleSheet } from 'react-native'
+
+type OnMessageCallbackEvent = {
+  detail: {
+    data: any[]
+  }
+}
+
+type CommonCallbackEvent = {
+  detail: {
+    src?: string
+  }
+}
+
+interface WebViewProps {
+  src: string
+  bindmessage?: (event: OnMessageCallbackEvent) => void
+  bindload?: (event: CommonCallbackEvent) => void
+  binderror?: (event: CommonCallbackEvent) => void
+}
+
+interface PayloadData {
+  data?: Record<string, any>
+}
+
+type MessageData = {
+  payload?: PayloadData,
+  type?: string,
+  callbackId?: number
+}
+
+interface NativeEvent {
+  url: string,
+  data: string
+}
+
+interface LoadRes {
+  timeStamp: string,
+  nativeEvent: NativeEvent
+}
+
+interface FormRef {
+  postMessage: (value: any) => void;
+}
+
+const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
+  const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
+
+  const defaultWebViewStyle = [
+    {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    }
+  ]
+  const { nodeRef: webViewRef } = useNodesRef<WebView, WebViewProps>(props, ref, {
+    defaultStyle: StyleSheet.flatten([
+      ...defaultWebViewStyle
+    ])
+  })
+  const _messageList:any[] = []
+  const handleUnload = () => {
+    // 这里是 WebView 销毁前执行的逻辑
+    bindmessage(getCustomEvent('messsage', {}, {
+      detail: {
+        data: _messageList
+      },
+      layoutRef: webViewRef
+    }))
+  }
+
+  useEffect(() => {
+    // 组件卸载时执行
+    return () => {
+      handleUnload()
+    }
+  }, [])
+  const _load = function(res:LoadRes) {
+    const result = {
+      type: 'load',
+      timeStamp: res.timeStamp,
+      detail: {
+        src: res.nativeEvent?.url
+      }
+    }
+    bindload(result)
+  }
+  const _error = function(res:LoadRes) {
+    const result = {
+      type: 'error',
+      timeStamp: res.timeStamp,
+      detail: {
+        src: ''
+      }
+    }
+    binderror(result)
+  }
+  const _message = function(res:LoadRes) {
+    let data: MessageData
+    let asyncCallback
+    const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
+    try {
+      const nativeEventData = res.nativeEvent?.data
+      data = JSON.parse(nativeEventData)
+    } catch (e) {
+      data = {}
+    }
+    const postData:PayloadData = data.payload || {}
+    switch (data.type) {
+      case 'postMessage':
+        _messageList.push(postData.data)
+        asyncCallback = Promise.resolve({
+          errMsg: 'invokeWebappApi:ok'
+        })
+        break
+      case 'navigateTo':
+        asyncCallback = navObj.navigateTo(postData)
+        break
+      case 'navigateBack':
+        asyncCallback = navObj.navigateBack(postData)
+        break
+      case 'redirectTo':
+        asyncCallback = navObj.redirectTo(postData)
+        break
+      case 'switchTab':
+        asyncCallback = navObj.switchTab(postData)
+        break
+      case 'reLaunch':
+        asyncCallback = navObj.reLaunch(postData)
+        break
+    }
+
+    asyncCallback && asyncCallback.then((res: any) => {
+      if (webViewRef.current?.postMessage) {
+        const test = JSON.stringify({
+          type: data.type,
+          callbackId: data.callbackId,
+          result: res
+        })
+        webViewRef.current.postMessage(test)
+      }
+    })
+  }
+  // @ts-ignore
+  return(<Portal>
+    <WebView
+        style={[ ...defaultWebViewStyle ]}
+        source={{ uri: src }}
+        ref={webViewRef}
+        onLoad={_load}
+        onError={_error}
+        onMessage={_message}
+        javaScriptEnabled={true}
+    ></WebView>
+  </Portal>)
+})
+
+_WebView.displayName = 'mpx-web-view'
+
+export default _WebView

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 = /\d+(\.\d+)?%$/
+export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
 
 const URL_REGEX = /url\(["']?(.*?)["']?\)/
 

package/lib/runtime/transRpxStyle.js

@@ -5,7 +5,7 @@ module.exports = function (style) {
   }
   const transRpxFn = global.__mpxTransRpxFn || defaultTransRpxFn
   const parsedStyleObj = {}
-  const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+  const rpxRegExpG = /\b(-?\d+(\.\d+)?)rpx\b/g
   const parseStyleText = (cssText) => {
     const listDelimiter = /;(?![^(]*\))/g
     const propertyDelimiter = /:(.+)/

package/lib/style-compiler/plugins/rpx.js

@@ -1,5 +1,5 @@
-const pxRegExp = /\b(\d+(\.\d+)?)px\b/
-const pxRegExpG = /\b(\d+(\.\d+)?)px\b/g
+const pxRegExp = /\b(-?\d+(\.\d+)?)px\b/
+const pxRegExpG = /\b(-?\d+(\.\d+)?)px\b/g
 // rpx
 module.exports = (options = {}) => {
   return {

package/lib/style-compiler/plugins/vw.js

@@ -1,5 +1,5 @@
-const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/
-const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+const rpxRegExp = /\b(-?\d+(\.\d+)?)rpx\b/
+const rpxRegExpG = /\b(-?\d+(\.\d+)?)rpx\b/g
 
 module.exports = (options = {}) => {
   return {

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) {
@@ -1121,12 +1135,12 @@ function getModelConfig (el, match) {
   }
 }
 
-function processEventReact (el, options, meta) {
+function processEventReact (el) {
   const eventConfigMap = {}
   el.attrsList.forEach(function ({ name, value }) {
     const parsedEvent = config[mode].event.parseEvent(name)
     if (parsedEvent) {
-      const type = parsedEvent.eventName
+      const type = config[mode].event.getEvent(parsedEvent.eventName, parsedEvent.prefix)
       const parsedFunc = parseFuncStr(value)
       if (parsedFunc) {
         if (!eventConfigMap[type]) {
@@ -1153,12 +1167,14 @@ function processEventReact (el, options, meta) {
       // } else {
       //   stringifiedModelValue = stringify(modelValue)
       // }
-      if (!eventConfigMap[modelEvent]) {
-        eventConfigMap[modelEvent] = {
+      // todo 未来可能需要支持类似modelEventPrefix这样的配置来声明model事件的绑定方式
+      const modelEventType = config[mode].event.getEvent(modelEvent)
+      if (!eventConfigMap[modelEventType]) {
+        eventConfigMap[modelEventType] = {
           configs: []
         }
       }
-      eventConfigMap[modelEvent].configs.unshift({
+      eventConfigMap[modelEventType].configs.unshift({
         hasArgs: true,
         expStr: `[${stringify('__model')},${stringifiedModelValue},${stringify(eventIdentifier)},${stringify(modelValuePathArr)}${modelFilter ? `,${stringify(modelFilter)}` : ''}]`
       })
@@ -1172,11 +1188,8 @@ function processEventReact (el, options, meta) {
   }
 
   // let wrapper
-
   for (const type in eventConfigMap) {
     let { configs } = eventConfigMap[type]
-
-    let resultName
     configs.forEach(({ name }) => {
       if (name) {
         // 清空原始事件绑定
@@ -1184,21 +1197,15 @@ function processEventReact (el, options, meta) {
         do {
           has = getAndRemoveAttr(el, name).has
         } while (has)
-
-        if (!resultName) {
-          // 清除修饰符
-          resultName = name.replace(/\..*/, '')
-        }
       }
     })
     configs = configs.map((item) => {
       return item.expStr
     })
-    const name = resultName || config[mode].event.getEvent(type)
     const value = `{{(e)=>this.__invoke(e, [${configs}])}}`
     addAttrs(el, [
       {
-        name,
+        name: type,
         value
       }
     ])
@@ -1698,23 +1705,49 @@ function processFor (el) {
 }
 
 function processRefReact (el, meta) {
-  const val = getAndRemoveAttr(el, config[mode].directive.ref).val
+  const { val, has } = getAndRemoveAttr(el, config[mode].directive.ref)
+
   // rn中只有内建组件能被作为node ref处理
   const type = el.isBuiltIn ? 'node' : 'component'
-  if (val) {
+  if (has) {
     if (!meta.refs) {
       meta.refs = []
     }
     const all = !!forScopes.length
-    meta.refs.push({
+    const refConf = {
       key: val,
       all,
       type
-    })
+    }
+
+    if (!val) {
+      refConf.key = `ref_rn_${++refId}`
+      refConf.sKeys = []
+      const rawId = el.attrsMap.id
+      const rawClass = el.attrsMap.class
+      const rawDynamicClass = el.attrsMap[config[mode].directive.dynamicClass]
+
+      meta.computed = meta.computed || []
+      if (rawId) {
+        const staticId = parseMustacheWithContext(rawId).result
+        const computedIdKey = `_ri${refId}`
+        refConf.sKeys.push({ key: computedIdKey, prefix: '#' })
+        meta.computed.push(`${computedIdKey}() {\n return ${staticId}}`)
+      }
+      if (rawClass || rawDynamicClass) {
+        const staticClass = parseMustacheWithContext(rawClass).result
+        const dynamicClass = parseMustacheWithContext(rawDynamicClass).result
+        const computedClassKey = `_rc${refId}`
+        refConf.sKeys.push({ key: computedClassKey, prefix: '.' })
+        meta.computed.push(`${computedClassKey}() {\n return this.__getClass(${staticClass}, ${dynamicClass})}`)
+      }
+    }
+
+    meta.refs.push(refConf)
 
     addAttrs(el, [{
       name: 'ref',
-      value: `{{ this.__getRefVal('${val}') }}`
+      value: `{{ this.__getRefVal('${refConf.key}') }}`
     }])
   }
 }
@@ -2571,8 +2604,8 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
-    processStyleReact(el)
-    processEventReact(el, options, meta)
+    processStyleReact(el, options)
+    processEventReact(el)
     processComponentIs(el, options)
     processSlotReact(el)
     processAttrs(el, options)

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.57",
+  "version": "2.9.59",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,6 +80,7 @@
     "build": "rimraf ./lib/runtime/components/react/dist && tsc"
   },
   "devDependencies": {
+    "@ant-design/react-native": "^5.2.2",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -89,5 +90,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "f52627676fd798818980c2d1a6890c5ea99e2862"
+  "gitHead": "aa001c11cc7b21772fc6f9f5bcdd13118fc6d67c"
 }