@mpxjs/webpack-plugin 2.9.69 → 2.9.70

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

@@ -5,12 +5,13 @@
  * ✔ hover-stay-time
  */
 import { View, StyleSheet, Image } from 'react-native';
-import { useRef, useState, useEffect, forwardRef } from 'react';
+import { useRef, useState, useEffect, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils';
+import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 const linearMap = new Map([
     ['top', 0],
@@ -148,10 +149,7 @@ function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
             style[key] = val;
         }
     }
-    imageProps.style = {
-        ...imageProps.style,
-        ...style
-    };
+    extendObject(imageProps.style, style);
 }
 // background-size 转换
 function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
@@ -209,10 +207,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         }
     }
     // 样式合并
-    imageProps.style = {
-        ...imageProps.style,
-        ...dimensions
-    };
+    extendObject(imageProps.style, dimensions);
 }
 // background-image转换为source
 function backgroundImage(imageProps, preImageInfo) {
@@ -385,10 +380,9 @@ function parseLinearGradient(text) {
         !isNaN(numberVal) && locations.push(numberVal);
         return prev;
     }, { colors: [], locations: [] });
-    return {
-        ...linearInfo,
+    return extendObject({}, linearInfo, {
         direction: direction.trim()
-    };
+    });
 }
 function parseBgImage(text) {
     if (!text)
@@ -447,7 +441,7 @@ function inheritStyle(innerStyle = {}) {
         }
         : undefined);
 }
-function wrapImage(imageStyle, innerStyle, enableFastImage) {
+function useWrapImage(imageStyle, innerStyle, enableFastImage) {
     // 预处理数据
     const preImageInfo = preParseImage(imageStyle);
     // 预解析
@@ -540,7 +534,8 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
         textProps
     });
     return [
-        enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        enableBackground ? useWrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
         children
     ];
 }
@@ -549,20 +544,15 @@ const _View = forwardRef((viewProps, ref) => {
     let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     const [isHover, setIsHover] = useState(false);
     // 默认样式
-    const defaultStyle = {
-        // flex 布局相关的默认样式
-        ...style.display === 'flex' && {
+    const defaultStyle = style.display === 'flex'
+        ? {
             flexDirection: 'row',
             flexBasis: 'auto',
             flexShrink: 1,
             flexWrap: 'nowrap'
         }
-    };
-    const styleObj = {
-        ...defaultStyle,
-        ...style,
-        ...(isHover ? hoverStyle : null)
-    };
+        : {};
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
         externalVarContext,
@@ -570,15 +560,15 @@ const _View = forwardRef((viewProps, ref) => {
         parentWidth,
         parentHeight
     });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     enableBackground = enableBackground || !!backgroundStyle;
     const enableBackgroundRef = useRef(enableBackground);
     if (enableBackgroundRef.current !== enableBackground) {
-        throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
+        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
     }
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle
+        style: normalStyle
     });
     const dataRef = useRef({});
     useEffect(() => {
@@ -611,27 +601,29 @@ const _View = forwardRef((viewProps, ref) => {
         setStayTimer();
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
+    const viewStyle = extendObject({}, innerStyle, layoutStyle);
     enableAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableAnimation);
     if (enableAnimationRef.current !== enableAnimation) {
-        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
     }
-    const finalStyle = enableAnimation
-        ? useAnimationHooks({
-            animation,
-            style: viewStyle
-        })
+    const finalStyle = enableAnimationRef.current
+        ? [viewStyle,
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            useAnimationHooks({
+                animation,
+                style: viewStyle
+            })]
         : viewStyle;
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: finalStyle,
-        ...layoutProps,
-        ...(hoverStyle && {
+        style: finalStyle
+    }, layoutProps, hoverStyle
+        ? {
             bindtouchstart: onTouchStart,
             bindtouchend: onTouchEnd
-        })
-    }, [
+        }
+        : {}), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',
@@ -650,12 +642,8 @@ const _View = forwardRef((viewProps, ref) => {
         enableFastImage
     });
     return enableAnimation
-        ? (<Animated.View {...innerProps}>
-      {childNode}
-    </Animated.View>)
-        : (<View {...innerProps}>
-      {childNode}
-    </View>);
+        ? createElement(Animated.View, innerProps, childNode)
+        : createElement(View, innerProps, childNode);
 });
 _View.displayName = 'MpxView';
 export default _View;

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

@@ -1,19 +1,21 @@
-import { forwardRef, useEffect, useRef, useContext, useMemo } from 'react';
-import { noop, warn } from '@mpxjs/utils';
+import { forwardRef, useRef, useContext, useMemo, createElement } from 'react';
+import { warn, getFocusedNavigation, isFunction } 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';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
-import { getCurrentPage } from './utils';
+import { getCurrentPage, extendObject } from './utils';
 import { RouteContext } from './context';
 const _WebView = forwardRef((props, ref) => {
-    const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const { src, bindmessage, bindload, binderror } = props;
+    const mpx = global.__mpx;
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
     const pageId = useContext(RouteContext);
     const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
+    const webViewRef = useRef(null);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -21,31 +23,12 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const webViewRef = useRef(null);
     useNodesRef(props, ref, webViewRef, {
-        defaultStyle: defaultWebViewStyle
+        style: defaultWebViewStyle
     });
-    const _messageList = useRef([]);
-    const handleUnload = () => {
-        // 这里是 WebView 销毁前执行的逻辑
-        bindmessage(getCustomEvent('messsage', {}, {
-            detail: {
-                data: _messageList.current
-            },
-            layoutRef: webViewRef
-        }));
-    };
-    useEffect(() => {
-        if (currentPage) {
-            currentPage.__webViewUrl = src;
-        }
-    }, [src, currentPage]);
-    useEffect(() => {
-        // 组件卸载时执行
-        return () => {
-            handleUnload();
-        };
-    }, []);
+    if (!src) {
+        return null;
+    }
     const _load = function (res) {
         const result = {
             type: 'load',
@@ -66,8 +49,33 @@ const _WebView = forwardRef((props, ref) => {
         };
         binderror(result);
     };
+    const injectedJavaScript = `
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      var _documentTitle = document.title;
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'setTitle',
+        payload: {
+          _documentTitle: _documentTitle
+        }
+      }))
+      Object.defineProperty(document, 'title', {
+        set (val) {
+          _documentTitle = val
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'setTitle',
+            payload: {
+              _documentTitle: _documentTitle
+            }
+          }))
+        },
+        get () {
+          return _documentTitle
+        }
+      });
+    }
+  `;
     const _changeUrl = function (navState) {
-        if (currentPage) {
+        if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
             currentPage.__webViewUrl = navState.url;
         }
     };
@@ -81,47 +89,102 @@ const _WebView = forwardRef((props, ref) => {
                 data = JSON.parse(nativeEventData);
             }
         }
-        catch (e) {
-            data = {};
-        }
+        catch (e) { }
+        const args = data.args;
         const postData = data.payload || {};
-        switch (data.type) {
+        const params = Array.isArray(args) ? args : [postData];
+        const type = data.type;
+        switch (type) {
+            case 'setTitle':
+                { // case下不允许直接声明，包个块解决该问题
+                    const title = postData._documentTitle;
+                    if (title) {
+                        const navigation = getFocusedNavigation();
+                        navigation && navigation.setOptions({ title });
+                    }
+                }
+                break;
             case 'postMessage':
-                _messageList.current.push(postData.data);
+                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                    detail: {
+                        data: params[0]?.data
+                    }
+                }));
                 asyncCallback = Promise.resolve({
                     errMsg: 'invokeWebappApi:ok'
                 });
                 break;
             case 'navigateTo':
-                asyncCallback = navObj.navigateTo(postData);
+                asyncCallback = navObj.navigateTo(...params);
                 break;
             case 'navigateBack':
-                asyncCallback = navObj.navigateBack(postData);
+                asyncCallback = navObj.navigateBack(...params);
                 break;
             case 'redirectTo':
-                asyncCallback = navObj.redirectTo(postData);
+                asyncCallback = navObj.redirectTo(...params);
                 break;
             case 'switchTab':
-                asyncCallback = navObj.switchTab(postData);
+                asyncCallback = navObj.switchTab(...params);
                 break;
             case 'reLaunch':
-                asyncCallback = navObj.reLaunch(postData);
+                asyncCallback = navObj.reLaunch(...params);
+                break;
+            default:
+                if (type) {
+                    const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type];
+                    if (isFunction(implement)) {
+                        asyncCallback = Promise.resolve(implement(...params));
+                    }
+                    else {
+                        /* eslint-disable prefer-promise-reject-errors */
+                        asyncCallback = Promise.reject({
+                            errMsg: `未在apiImplementations中配置${type}方法`
+                        });
+                    }
+                }
                 break;
         }
         asyncCallback && asyncCallback.then((res) => {
             if (webViewRef.current?.postMessage) {
                 const test = JSON.stringify({
-                    type: data.type,
+                    type,
                     callbackId: data.callbackId,
                     result: res
                 });
                 webViewRef.current.postMessage(test);
             }
+        }).catch((error) => {
+            if (webViewRef.current?.postMessage) {
+                const test = JSON.stringify({
+                    type,
+                    callbackId: data.callbackId,
+                    error
+                });
+                webViewRef.current.postMessage(test);
+            }
         });
     };
-    return (<Portal>
-    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} onNavigationStateChange={_changeUrl} javaScriptEnabled={true}></WebView>
-  </Portal>);
+    const events = {};
+    if (bindload) {
+        extendObject(events, {
+            onLoad: _load
+        });
+    }
+    if (binderror) {
+        extendObject(events, {
+            onError: _error
+        });
+    }
+    extendObject(events, {
+        onMessage: _message
+    });
+    return createElement(Portal, null, createElement(WebView, extendObject({
+        style: defaultWebViewStyle,
+        source: { uri: src },
+        ref: webViewRef,
+        javaScriptEnabled: true,
+        onNavigationStateChange: _changeUrl
+    }, events)));
 });
 _WebView.displayName = 'MpxWebview';
 export default _WebView;

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

@@ -47,12 +47,35 @@ const InitialValue = Object.assign({
 const TransformOrigin = 'transformOrigin';
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// 多value解析
+const parseValues = (str, char = ' ') => {
+    let stack = 0;
+    let temp = '';
+    const result = [];
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === '(') {
+            stack++;
+        }
+        else if (str[i] === ')') {
+            stack--;
+        }
+        // 非括号内 或者 非分隔字符且非空
+        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+            temp += str[i];
+        }
+        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+            result.push(temp);
+            temp = '';
+        }
+    }
+    return result;
+};
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 const parseTransform = (transformStr) => {
-    const values = transformStr.trim().split(/\s+/);
+    const values = parseValues(transformStr);
     const transform = [];
     values.forEach(item => {
-        const match = item.match(/([/\w]+)\(([^)]+)\)/);
+        const match = item.match(/([/\w]+)\((.+)\)/);
         if (match && match.length >= 3) {
             let key = match[1];
             const val = match[2];
@@ -73,7 +96,7 @@ const parseTransform = (transformStr) => {
                     break;
                 case 'matrix':
                 case 'matrix3d':
-                    transform.push({ [key]: val.split(',').map(val => +val) });
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
                     break;
                 case 'translate':
                 case 'scale':
@@ -84,8 +107,8 @@ const parseTransform = (transformStr) => {
                     {
                         // 2 个以上的值处理
                         key = key.replace('3d', '');
-                        const vals = val.split(',', key === 'rotate' ? 4 : 3);
-                        // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+                        const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5)
                         if (vals.length === 1 && key === 'scale') {
                             vals.push(vals[0]);
                         }
@@ -183,11 +206,13 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个key的多次step动画
             animatedKeys.forEach(key => {
-                let toVal = (rules.get(key) || transform.get(key));
+                const ruleV = isTransform(key) ? transform.get(key) : rules.get(key);
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                if (toVal === undefined) {
-                    toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
-                }
+                const toVal = ruleV !== undefined
+                    ? ruleV
+                    : index > 0
+                        ? lastValueMap[key]
+                        : shareValMap[key].value;
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {
@@ -298,6 +323,6 @@ export default function useAnimationHooks(props) {
                 styles[key] = shareValMap[key].value;
             }
             return styles;
-        }, Object.assign({}, originalStyle));
+        }, {});
     });
 }