@mpxjs/webpack-plugin 2.9.57 → 2.9.58

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,
@@ -220,7 +240,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
     }
   }
 
@@ -339,7 +359,7 @@ module.exports = function getSpec ({ warn, error }) {
     supportedModes: ['ios', 'android'],
     rules: [
       { // 背景相关属性的处理
-        test: /.*background*./,
+        test: /^(background|background-image|background-color|background-size|background-repeat|background-position)$/,
         ios: checkBackgroundImage,
         android: checkBackgroundImage
       },
@@ -372,7 +392,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 +402,7 @@ module.exports = function getSpec ({ warn, error }) {
         android: getBorderRadius
       },
       { // margin padding 内外边距的处理
-        test: /.*(margin|padding).*/,
+        test: /^(margin|padding)$/,
         ios: formatMargins,
         android: formatMargins
       },
@@ -398,13 +418,13 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatLineHeight
       },
       // 值类型校验放到最后
-      { // 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/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 => {
@@ -70,7 +66,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/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_REGX = /^\s*-?\d+(\.\d+)?%\s*$/;
 const URL_REGEX = /url\(["']?(.*?)["']?\)/;
 export function omit(obj, fields) {
     const shallowCopy = Object.assign({}, obj);

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_REGX = /^\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

@@ -1121,12 +1121,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 +1153,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 +1174,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 +1183,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 +1691,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}') }}`
     }])
   }
 }
@@ -2572,7 +2591,7 @@ function processElement (el, root, options, meta) {
     processFor(el)
     processRefReact(el, meta)
     processStyleReact(el)
-    processEventReact(el, options, meta)
+    processEventReact(el)
     processComponentIs(el, options)
     processSlotReact(el)
     processAttrs(el, options)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.57",
+  "version": "2.9.58",
   "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": "49fe4c4bc46ff4bf87cd8adde37981d4b4134aa7"
 }