@mpxjs/webpack-plugin 2.10.4-beta.19 → 2.10.4-beta.19-input

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

@@ -68,6 +68,7 @@ import { StyleSheet, View } from 'react-native';
 import { splitProps, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         width: 300,
@@ -85,7 +86,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
     const videoInfoRef = useRef({});
     const propsRef = useRef({});
     propsRef.current = props;
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, styles.container, style), {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(extendObject({}, styles.container, style), {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -243,6 +244,10 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         'bindcontrolstoggle',
         'bindseekcomplete'
     ], { layoutRef });
-    return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    let videoComponent = createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    if (hasPositionFixed) {
+        videoComponent = createElement(Portal, null, videoComponent);
+    }
+    return videoComponent;
 });
 export default MpxVideo;

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

@@ -57,7 +57,7 @@ const normalizeStyle = (style = {}) => {
 const isPercent = (val) => typeof val === 'string' && PERCENT_REGEX.test(val);
 const isBackgroundSizeKeyword = (val) => typeof val === 'string' && /^cover|contain$/.test(val);
 const isNeedLayout = (preImageInfo) => {
-    const { sizeList, backgroundPosition, linearInfo } = preImageInfo;
+    const { sizeList, backgroundPosition, linearInfo, type } = preImageInfo;
     const [width, height] = sizeList;
     const bp = backgroundPosition;
     // 含有百分号，center 需计算布局
@@ -66,7 +66,8 @@ const isNeedLayout = (preImageInfo) => {
         (isPercent(width) && height === 'auto') ||
         isPercent(bp[1]) ||
         isPercent(bp[3]) ||
-        isDiagonalAngle(linearInfo);
+        isDiagonalAngle(linearInfo) ||
+        (type === 'linear' && (isPercent(height) || isPercent(width)));
 };
 const checkNeedLayout = (preImageInfo) => {
     const { sizeList } = preImageInfo;
@@ -155,7 +156,7 @@ function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
 }
 // background-size 转换
 function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
-    const sizeList = preImageInfo.sizeList;
+    const { sizeList, type } = preImageInfo;
     if (!sizeList)
         return;
     const { width: layoutWidth, height: layoutHeight } = layoutInfo || {};
@@ -202,10 +203,20 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            dimensions = {
-                width: isPercent(width) ? width : +width,
-                height: isPercent(height) ? height : +height
-            };
+            if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+                // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
+                // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
+                dimensions = {
+                    width: 0,
+                    height: 0
+                };
+            }
+            else {
+                dimensions = {
+                    width: isPercent(width) ? width : +width,
+                    height: isPercent(height) ? height : +height
+                };
+            }
         }
     }
     // 样式合并
@@ -523,10 +534,8 @@ function useWrapImage(imageStyle, innerStyle, enableFastImage) {
             setShow(true);
         }
     };
-    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' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage))}
-  </View>;
+    const backgroundProps = extendObject({ key: 'backgroundImage' }, needLayout ? { onLayout } : {}, { style: extendObject({}, inheritStyle(innerStyle), StyleSheet.absoluteFillObject, { overflow: 'hidden' }) });
+    return createElement(View, backgroundProps, show && type === 'linear' && createElement(LinearGradient, extendObject({ useAngle: true }, imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current))), show && type === 'image' && renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage));
 }
 function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
     const children = wrapChildren(props, {
@@ -579,21 +588,14 @@ const _View = forwardRef((viewProps, ref) => {
         ? catchtransitionend
         : isFunction(bindtransitionend)
             ? bindtransitionend
-            : null;
-    const { enableStyleAnimation, animationStyle } = useAnimationHooks(transitionend
-        ? {
-            layoutRef,
-            animation,
-            enableAnimation,
-            style: viewStyle,
-            transitionend
-        }
-        : {
-            layoutRef,
-            animation,
-            enableAnimation,
-            style: viewStyle
-        });
+            : undefined;
+    const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+        layoutRef,
+        animation,
+        enableAnimation,
+        style: viewStyle,
+        transitionend
+    });
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle

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

@@ -1,6 +1,7 @@
 import { forwardRef, useRef, useContext, useMemo, useState } from 'react';
 import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal/index';
+import { usePreventRemove } from '@react-navigation/native';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
@@ -55,8 +56,8 @@ const _WebView = forwardRef((props, ref) => {
     const webViewRef = useRef(null);
     const fristLoaded = useRef(false);
     const isLoadError = useRef(false);
+    const isNavigateBack = useRef(false);
     const statusCode = useRef('');
-    const [isLoaded, setIsLoaded] = useState(true);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -64,33 +65,40 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const canGoBack = useRef(false);
-    const isNavigateBack = useRef(false);
-    const beforeRemoveHandle = (e) => {
-        if (canGoBack.current && !isNavigateBack.current) {
+    const navigation = useNavigation();
+    const [isIntercept, setIsIntercept] = useState(false);
+    usePreventRemove(isIntercept, (event) => {
+        const { data } = event;
+        if (isNavigateBack.current) {
+            navigation?.dispatch(data.action);
+        }
+        else {
             webViewRef.current?.goBack();
-            e.preventDefault();
         }
         isNavigateBack.current = false;
-    };
-    const navigation = useNavigation();
-    // useEffect(() => {
-    //   let beforeRemoveSubscription:any
-    //   if (__mpx_mode__ !== 'ios') {
-    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-    //   }
-    //   return () => {
-    //     if (isFunction(beforeRemoveSubscription)) {
-    //       beforeRemoveSubscription()
-    //     }
-    //   }
-    // }, [])
+    });
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
+    const hostValidate = (url) => {
+        const host = url && new URL(url).host;
+        const hostWhitelists = mpx.config.rnConfig?.webviewConfig?.hostWhitelists || [];
+        if (hostWhitelists.length) {
+            return hostWhitelists.some((item) => {
+                return host.endsWith(item);
+            });
+        }
+        else {
+            return true;
+        }
+    };
     if (!src) {
         return null;
     }
+    if (!hostValidate(src)) {
+        console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单');
+        return null;
+    }
     const _reload = function () {
         if (__mpx_mode__ !== 'ios') {
             fristLoaded.current = false; // 安卓需要重新设置
@@ -131,16 +139,19 @@ const _WebView = forwardRef((props, ref) => {
     };
     const _changeUrl = function (navState) {
         if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
-            canGoBack.current = navState.canGoBack;
             currentPage.__webViewUrl = navState.url;
+            setIsIntercept(navState.canGoBack);
         }
     };
     const _onLoadProgress = function (event) {
         if (__mpx_mode__ !== 'ios') {
-            canGoBack.current = event.nativeEvent.canGoBack;
+            setIsIntercept(event.nativeEvent.canGoBack);
         }
     };
     const _message = function (res) {
+        if (!hostValidate(res.nativeEvent?.url)) {
+            return;
+        }
         let data = {};
         let asyncCallback;
         const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab });
@@ -192,7 +203,7 @@ const _WebView = forwardRef((props, ref) => {
                 break;
             default:
                 if (type) {
-                    const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type];
+                    const implement = mpx.config.rnConfig.webviewConfig && mpx.config.rnConfig.webviewConfig.apiImplementations && mpx.config.rnConfig.webviewConfig.apiImplementations[type];
                     if (isFunction(implement)) {
                         asyncCallback = Promise.resolve(implement(...params));
                     }
@@ -227,7 +238,6 @@ const _WebView = forwardRef((props, ref) => {
     };
     const onLoadEndHandle = function (res) {
         fristLoaded.current = true;
-        setIsLoaded(true);
         const src = res.nativeEvent?.url;
         if (isLoadError.current) {
             isLoadError.current = false;
@@ -275,18 +285,13 @@ const _WebView = forwardRef((props, ref) => {
             setPageLoadErr(true);
         }
     };
-    const onLoadStart = function () {
-        if (!fristLoaded.current) {
-            setIsLoaded(false);
-        }
-    };
     return (<Portal>
         {pageLoadErr
             ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>)
-            : (<WebView style={defaultWebViewStyle} pointerEvents={isLoaded ? 'auto' : 'none'} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={true}></WebView>)}
+            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} allowsBackForwardNavigationGestures={true}></WebView>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

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

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation, runOnJS } from 'react-native-reanimated';
 import { error, hasOwn, collectDataset } from '@mpxjs/utils';
+import { useRunOnJSCallback } from './utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -48,90 +49,6 @@ 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 = parseValues(transformStr);
-    const transform = [];
-    values.forEach(item => {
-        const match = item.match(/([/\w]+)\((.+)\)/);
-        if (match && 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':
-                case 'perspective':
-                    // rotate 处理成 rotateZ
-                    key = key === 'rotate' ? 'rotateZ' : key;
-                    // 单个值处理
-                    transform.push({ [key]: global.__formatValue(val) });
-                    break;
-                case 'matrix':
-                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
-                    break;
-                case 'translate':
-                case 'scale':
-                case 'skew':
-                case 'translate3d': // x y 支持 z不支持
-                case 'scale3d': // x y 支持 z不支持
-                    {
-                        // 2 个以上的值处理
-                        key = key.replace('3d', '');
-                        const vals = parseValues(val, ',').splice(0, 3);
-                        // scale(.5) === scaleX(.5) scaleY(.5)
-                        if (vals.length === 1 && key === 'scale') {
-                            vals.push(vals[0]);
-                        }
-                        const xyz = ['X', 'Y', 'Z'];
-                        transform.push(...vals.map((v, index) => {
-                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
-                        }));
-                        break;
-                    }
-            }
-        }
-    });
-    return transform;
-};
-// format style
-const formatStyle = (style) => {
-    if (!style.transform || Array.isArray(style.transform))
-        return style;
-    return Object.assign({}, style, {
-        transform: parseTransform(style.transform)
-    });
-};
 // transform 数组转对象
 function getTransformObj(transforms) {
     'worklet';
@@ -140,7 +57,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
+    const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -148,7 +65,6 @@ export default function useAnimationHooks(props) {
     }
     if (!enableAnimationRef.current)
         return { enableStyleAnimation: false };
-    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
@@ -177,7 +93,7 @@ export default function useAnimationHooks(props) {
     useEffect(() => {
         // style 更新后同步更新 lastStyleRef & shareValMap
         updateStyleVal();
-    }, [style]);
+    }, [originalStyle]);
     // ** 获取动画样式prop & 驱动动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
@@ -260,19 +176,26 @@ export default function useAnimationHooks(props) {
         };
         transitionend({
             type: 'transitionend',
-            detail: { elapsedTime: duration, finished, current },
+            // elapsedTime 对齐wx 单位s
+            detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
             target,
             currentTarget: target,
             timeStamp: Date.now()
         });
     }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const runOnJSCallbackRef = useRef({
+        withTimingCallback
+    });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     // 创建单个animation
     function getAnimation({ key, value }, { delay, duration, easing }, callback) {
         const animation = typeof callback === 'function'
             ? withTiming(value, { duration, easing }, (finished, current) => {
                 callback(finished, current);
                 if (transitionend && finished) {
-                    runOnJS(withTimingCallback)(finished, current, duration);
+                    runOnJS(runOnJSCallback)('withTimingCallback', finished, current, duration);
                 }
             })
             : withTiming(value, { duration, easing });