@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.1

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

@@ -4,12 +4,12 @@
  * ✘ decode
  */
 import { Text } from 'react-native';
-import { useRef, forwardRef } from 'react';
+import { useRef, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, wrapChildren } from './utils';
 const _Text = forwardRef((props, ref) => {
-    const { style = {}, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const layoutRef = useRef({});
     const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
         enableVar,
@@ -19,22 +19,23 @@ const _Text = forwardRef((props, ref) => {
         parentHeight
     });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: normalStyle,
-        selectable: !!selectable || !!userSelect
+        selectable: !!selectable || !!userSelect,
+        allowFontScaling
     }, [
         'user-select'
     ], {
         layoutRef
     });
-    return (<Text {...innerProps}>
-      {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-    </Text>);
+    return createElement(Text, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    }));
 });
 _Text.displayName = 'MpxText';
 export default _Text;

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

@@ -9,10 +9,10 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import { forwardRef } from 'react';
+import { forwardRef, createElement } from 'react';
 import { Keyboard } from 'react-native';
 import Input from './mpx-input';
-import { omit } from './utils';
+import { omit, extendObject } from './utils';
 const Textarea = forwardRef((props, ref) => {
     const restProps = omit(props, [
         'ref',
@@ -21,7 +21,12 @@ const Textarea = forwardRef((props, ref) => {
         'multiline',
         'confirm-hold'
     ]);
-    return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
+    return createElement(Input, extendObject({
+        ref: ref,
+        multiline: true,
+        confirmType: 'next',
+        bindblur: () => Keyboard.dismiss()
+    }, restProps));
 });
 Textarea.displayName = 'MpxTextarea';
 export default Textarea;

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

@@ -5,13 +5,15 @@
  * ✔ 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 } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHoverStyle } from './utils';
+import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
+import { GestureDetector } from 'react-native-gesture-handler';
 const linearMap = new Map([
     ['top', 0],
     ['bottom', 180],
@@ -148,10 +150,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) {
@@ -201,7 +200,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         }
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
-            imageProps.style.resizeMode = 'stretch';
+            imageProps.resizeMode = 'stretch';
             dimensions = {
                 width: isPercent(width) ? width : +width,
                 height: isPercent(height) ? height : +height
@@ -209,15 +208,13 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         }
     }
     // 样式合并
-    imageProps.style = {
-        ...imageProps.style,
-        ...dimensions
-    };
+    extendObject(imageProps.style, dimensions);
 }
 // background-image转换为source
 function backgroundImage(imageProps, preImageInfo) {
-    if (preImageInfo.src) {
-        imageProps.src = preImageInfo.src;
+    const src = preImageInfo.src;
+    if (src) {
+        imageProps.source = { uri: src };
     }
 }
 // 渐变的转换
@@ -241,8 +238,8 @@ function linearGradient(imageProps, preImageInfo, imageSize, layoutInfo) {
 const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
     // 初始化
     const imageProps = {
+        resizeMode: 'cover',
         style: {
-            resizeMode: 'cover',
             position: 'absolute'
             // ...StyleSheet.absoluteFillObject
         },
@@ -384,10 +381,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)
@@ -430,7 +426,23 @@ function preParseImage(imageStyle) {
 function isDiagonalAngle(linearInfo) {
     return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction]);
 }
-function wrapImage(imageStyle) {
+function inheritStyle(innerStyle = {}) {
+    const { borderWidth, borderRadius } = innerStyle;
+    const borderStyles = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'];
+    return pickStyle(innerStyle, borderStyles, borderWidth && borderRadius
+        ? (key, val) => {
+            // 盒子内圆角borderWith与borderRadius的关系
+            // 当borderRadius 小于 当borderWith 内边框为直角
+            // 当borderRadius 大于等于 当borderWith 内边框为圆角
+            if (borderStyles.includes(key)) {
+                const borderVal = +val - borderWidth;
+                return borderVal > 0 ? borderVal : 0;
+            }
+            return val;
+        }
+        : undefined);
+}
+function wrapImage(imageStyle, innerStyle, enableFastImage) {
     // 预处理数据
     const preImageInfo = preParseImage(imageStyle);
     // 预解析
@@ -510,12 +522,12 @@ function wrapImage(imageStyle) {
             setShow(true);
         }
     };
-    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
+    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
-    {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
+    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage))}
   </View>;
 }
-function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }) {
+function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
     const children = wrapChildren(props, {
         hasVarDec,
         varContext,
@@ -523,29 +535,24 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
         textProps
     });
     return [
-        enableBackground ? wrapImage(backgroundStyle) : null,
+        enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
         children
     ];
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    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-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
-    const [isHover, setIsHover] = useState(false);
+    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 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 { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime });
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
         externalVarContext,
@@ -553,57 +560,33 @@ 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(() => {
-        return () => {
-            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        };
-    }, []);
-    const setStartTimer = () => {
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.startTimer = setTimeout(() => {
-            setIsHover(true);
-        }, +hoverStartTime);
-    };
-    const setStayTimer = () => {
-        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.stayTimer = setTimeout(() => {
-            setIsHover(false);
-        }, +hoverStayTime);
-    };
-    function onTouchStart(e) {
-        const { bindtouchstart } = props;
-        bindtouchstart && bindtouchstart(e);
-        setStartTimer();
-    }
-    function onTouchEnd(e) {
-        const { bindtouchend } = props;
-        bindtouchend && bindtouchend(e);
-        setStayTimer();
-    }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
-    const innerProps = useInnerProps(props, {
+    const viewStyle = extendObject({}, innerStyle, layoutStyle);
+    enableAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableAnimation);
+    if (enableAnimationRef.current !== enableAnimation) {
+        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    const finalStyle = enableAnimationRef.current
+        ? [viewStyle, useAnimationHooks({
+                animation,
+                style: viewStyle
+            })]
+        : viewStyle;
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: viewStyle,
-        ...layoutProps,
-        ...(hoverStyle && {
-            bindtouchstart: onTouchStart,
-            bindtouchend: onTouchEnd
-        })
-    }, [
+        style: finalStyle
+    }, layoutProps), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',
@@ -611,32 +594,22 @@ const _View = forwardRef((viewProps, ref) => {
     ], {
         layoutRef
     });
-    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.');
-    }
-    const finalStyle = enableAnimation
-        ? useAnimationHooks({
-            animation,
-            style: viewStyle
-        })
-        : viewStyle;
     const childNode = wrapWithChildren(props, {
         hasVarDec,
         enableBackground: enableBackgroundRef.current,
         textStyle,
         backgroundStyle,
         varContext: varContextRef.current,
-        textProps
+        textProps,
+        innerStyle,
+        enableFastImage
     });
-    return animation?.actions?.length
-        ? (<Animated.View {...innerProps} style={finalStyle}>
-      {childNode}
-    </Animated.View>)
-        : (<View {...innerProps}>
-      {childNode}
-    </View>);
+    const BaseComponent = enableAnimation
+        ? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode)
+        : createElement(View, innerProps, childNode);
+    return enableHoverStyle
+        ? createElement(GestureDetector, { gesture }, BaseComponent)
+        : BaseComponent;
 });
 _View.displayName = 'MpxView';
 export default _View;

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

@@ -1,15 +1,22 @@
-import { forwardRef, useEffect, useRef } from 'react';
-import { noop, warn } from '@mpxjs/utils';
+import { forwardRef, useRef, useContext, useMemo, createElement, useCallback, useEffect } 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, extendObject } from './utils';
+import { RouteContext } from './context';
+import { BackHandler } from 'react-native';
 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,
@@ -17,26 +24,36 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const webViewRef = useRef(null);
-    useNodesRef(props, ref, webViewRef, {
-        defaultStyle: defaultWebViewStyle
-    });
-    const _messageList = [];
-    const handleUnload = () => {
-        // 这里是 WebView 销毁前执行的逻辑
-        bindmessage(getCustomEvent('messsage', {}, {
-            detail: {
-                data: _messageList
-            },
-            layoutRef: webViewRef
-        }));
-    };
+    const canGoBack = useRef(false);
+    const onAndroidBackPress = useCallback(() => {
+        if (canGoBack.current) {
+            webViewRef.current?.goBack();
+            return true;
+        }
+        return false;
+    }, [canGoBack]);
+    const beforeRemoveHandle = useCallback((e) => {
+        if (canGoBack.current) {
+            webViewRef.current?.goBack();
+            e.preventDefault();
+        }
+    }, [canGoBack]);
+    const navigation = getFocusedNavigation();
+    navigation?.addListener('beforeRemove', beforeRemoveHandle);
     useEffect(() => {
-        // 组件卸载时执行
-        return () => {
-            handleUnload();
-        };
+        if (__mpx_mode__ === 'android') {
+            BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
+            return () => {
+                BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
+            };
+        }
     }, []);
+    useNodesRef(props, ref, webViewRef, {
+        style: defaultWebViewStyle
+    });
+    if (!src) {
+        return null;
+    }
     const _load = function (res) {
         const result = {
             type: 'load',
@@ -57,6 +74,49 @@ 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
+        }
+      });
+    }
+    true;
+  `;
+    const sendMessage = function (params) {
+        return `
+      window.mpxWebviewMessageCallback(${params})
+      true;
+    `;
+    };
+    const _changeUrl = function (navState) {
+        if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+            canGoBack.current = navState.canGoBack;
+            currentPage.__webViewUrl = navState.url;
+        }
+    };
+    const _onLoadProgress = function (event) {
+        if (__mpx_mode__ === 'android') {
+            canGoBack.current = event.nativeEvent.canGoBack;
+        }
+    };
     const _message = function (res) {
         let data = {};
         let asyncCallback;
@@ -67,47 +127,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) {
+                        navigation && navigation.setOptions({ title });
+                    }
+                }
+                break;
             case 'postMessage':
-                _messageList.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,
+                const result = JSON.stringify({
+                    type,
                     callbackId: data.callbackId,
                     result: res
                 });
-                webViewRef.current.postMessage(test);
+                webViewRef.current.injectJavaScript(sendMessage(result));
+            }
+        }).catch((error) => {
+            if (webViewRef.current?.postMessage) {
+                const result = JSON.stringify({
+                    type,
+                    callbackId: data.callbackId,
+                    error
+                });
+                webViewRef.current.injectJavaScript(sendMessage(result));
             }
         });
     };
-    return (<Portal>
-    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
-  </Portal>);
+    const events = {};
+    if (bindload) {
+        extendObject(events, {
+            onLoad: _load
+        });
+    }
+    if (binderror) {
+        extendObject(events, {
+            onError: _error
+        });
+    }
+    return createElement(Portal, null, createElement(WebView, extendObject({
+        style: defaultWebViewStyle,
+        source: { uri: src },
+        ref: webViewRef,
+        javaScriptEnabled: true,
+        onNavigationStateChange: _changeUrl,
+        onMessage: _message,
+        injectedJavaScript: injectedJavaScript,
+        onLoadProgress: _onLoadProgress,
+        allowsBackForwardNavigationGestures: true
+    }, events)));
 });
 _WebView.displayName = 'MpxWebview';
 export default _WebView;