@mpxjs/webpack-plugin 2.10.7-beta.4 → 2.10.7-beta.6

package/lib/runtime/components/react/dist/AsyncContainer.jsx

@@ -1,19 +1,6 @@
 import { Component, Suspense } from 'react';
 import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
 import FastImage from '@d11/react-native-fast-image';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-export const PageWrapper = ({ children }) => {
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: -0 }],
-        flexBasis: 'auto',
-        flex: 1
-    }));
-    return (<Animated.View style={[
-            animatedStyle
-        ]}>
-      {children}
-    </Animated.View>);
-};
 const styles = StyleSheet.create({
     container: {
         flex: 1,
@@ -63,12 +50,12 @@ const styles = StyleSheet.create({
         textAlign: 'center'
     }
 });
-export const DefaultLoading = () => {
+const DefaultLoading = () => {
     return (<View style={styles.container}>
       <FastImage style={styles.loadingImage} source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif' }} resizeMode={FastImage.resizeMode.contain}></FastImage>
     </View>);
 };
-export const DefaultFallback = ({ onReload }) => {
+const DefaultFallback = ({ onReload }) => {
     return (<View style={styles.container}>
       <Image source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png' }} style={styles.errorImage} resizeMode="contain"/>
       <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
@@ -143,17 +130,11 @@ export default class AsyncContainer extends Component {
     }
     render() {
         if (this.state.hasError) {
-            if (this.props.type === 'component') {
-                return this.errorFallback;
-            }
-            else {
-                return (<PageWrapper>{this.errorFallback}</PageWrapper>);
-            }
+            return this.errorFallback;
         }
         else {
             return (<Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {typeof this.props.children === 'function' ? this.props.children(this.props.props) : this.props.children}
-          {/* {this.props.children(this.props.props)} */}
+          {this.props.children(this.props.props)}
         </Suspense>);
         }
     }

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

@@ -8,7 +8,7 @@ const globalEventState = {
 const getTouchEvent = (type, event, config) => {
     const { navigation, propsRef, layoutRef } = config;
     const props = propsRef.current;
-    const { top: navigationY = 0 } = navigation?.layout || {};
+    const { y: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;

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

@@ -233,14 +233,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             setHeight(height || 0);
         }
         nodeRef.current?.measure((x, y, width, height) => {
-            const { top: navigationY = 0 } = navigation?.layout || {};
+            const { y: navigationY = 0 } = navigation?.layout || {};
             layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 };
             resetBoundaryAndCheck({ width, height });
         });
         props.onLayout && props.onLayout(e);
     };
     const extendEvent = useCallback((e, type) => {
-        const { top: navigationY = 0 } = navigation?.layout || {};
+        const { y: navigationY = 0 } = navigation?.layout || {};
         const touchArr = [e.changedTouches, e.allTouches];
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {

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

@@ -1,7 +1,6 @@
 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';
@@ -56,8 +55,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,
@@ -65,18 +64,27 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const navigation = useNavigation();
-    const [isIntercept, setIsIntercept] = useState(false);
-    usePreventRemove(isIntercept, (event) => {
-        const { data } = event;
-        if (isNavigateBack.current) {
-            navigation?.dispatch(data.action);
-        }
-        else {
+    const canGoBack = useRef(false);
+    const isNavigateBack = useRef(false);
+    const beforeRemoveHandle = (e) => {
+        if (canGoBack.current && !isNavigateBack.current) {
             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
     });
@@ -123,13 +131,13 @@ 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') {
-            setIsIntercept(event.nativeEvent.canGoBack);
+            canGoBack.current = event.nativeEvent.canGoBack;
         }
     };
     const _message = function (res) {
@@ -219,6 +227,7 @@ 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;
@@ -266,13 +275,18 @@ 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} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} allowsBackForwardNavigationGestures={true}></WebView>)}
+            : (<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>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

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

@@ -48,6 +48,90 @@ 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';
@@ -56,7 +140,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props;
+    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -64,6 +148,7 @@ export default function useAnimationHooks(props) {
     }
     if (!enableAnimationRef.current)
         return { enableStyleAnimation: false };
+    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
@@ -92,7 +177,7 @@ export default function useAnimationHooks(props) {
     useEffect(() => {
         // style 更新后同步更新 lastStyleRef & shareValMap
         updateStyleVal();
-    }, [originalStyle]);
+    }, [style]);
     // ** 获取动画样式prop & 驱动动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {

package/lib/runtime/components/react/getInnerListeners.ts

@@ -24,7 +24,7 @@ const getTouchEvent = (
 ) => {
   const { navigation, propsRef, layoutRef } = config
   const props = propsRef.current
-  const { top: navigationY = 0 } = navigation?.layout || {}
+  const { y: navigationY = 0 } = navigation?.layout || {}
   const nativeEvent = event.nativeEvent
   const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -340,7 +340,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       setHeight(height || 0)
     }
     nodeRef.current?.measure((x: number, y: number, width: number, height: number) => {
-      const { top: navigationY = 0 } = navigation?.layout || {}
+      const { y: navigationY = 0 } = navigation?.layout || {}
       layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 }
       resetBoundaryAndCheck({ width, height })
     })
@@ -348,7 +348,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   }
 
   const extendEvent = useCallback((e: any, type: 'start' | 'move' | 'end') => {
-    const { top: navigationY = 0 } = navigation?.layout || {}
+    const { y: navigationY = 0 } = navigation?.layout || {}
     const touchArr = [e.changedTouches, e.allTouches]
     touchArr.forEach(touches => {
       touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number; clientX: number; clientY: number }) => {

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -1,7 +1,6 @@
-import { forwardRef, useRef, useContext, useMemo, useState } from 'react'
+import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react'
 import { warn, isFunction } from '@mpxjs/utils'
 import Portal from './mpx-portal/index'
-import { usePreventRemove, PreventRemoveEvent } 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'
@@ -76,6 +75,7 @@ const styles = StyleSheet.create({
     borderRadius: 10
   }
 })
+
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
   const { src, bindmessage, bindload, binderror } = props
   const mpx = global.__mpx
@@ -100,8 +100,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const webViewRef = useRef<WebView>(null)
   const fristLoaded = useRef<boolean>(false)
   const isLoadError = useRef<boolean>(false)
-  const isNavigateBack = useRef<boolean>(false)
   const statusCode = useRef<string|number>('')
+  const [isLoaded, setIsLoaded] = useState<boolean>(true)
   const defaultWebViewStyle = {
     position: 'absolute' as const,
     left: 0,
@@ -109,18 +109,30 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     top: 0,
     bottom: 0
   }
+  const canGoBack = useRef<boolean>(false)
+  const isNavigateBack = useRef<boolean>(false)
 
-  const navigation = useNavigation()
-  const [isIntercept, setIsIntercept] = useState<boolean>(false)
-  usePreventRemove(isIntercept, (event: PreventRemoveEvent) => {
-    const { data } = event
-    if (isNavigateBack.current) {
-      navigation?.dispatch(data.action)
-    } else {
+  const beforeRemoveHandle = (e: Event) => {
+    if (canGoBack.current && !isNavigateBack.current) {
       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<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -171,14 +183,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
   const _changeUrl = function (navState: WebViewNavigation) {
     if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+      canGoBack.current = navState.canGoBack
       currentPage.__webViewUrl = navState.url
-      setIsIntercept(navState.canGoBack)
     }
   }
 
   const _onLoadProgress = function (event: WebViewProgressEvent) {
     if (__mpx_mode__ !== 'ios') {
-      setIsIntercept(event.nativeEvent.canGoBack)
+      canGoBack.current = event.nativeEvent.canGoBack
     }
   }
   const _message = function (res: WebViewMessageEvent) {
@@ -267,6 +279,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
   const onLoadEndHandle = function (res: WebViewEvent) {
     fristLoaded.current = true
+    setIsLoaded(true)
     const src = res.nativeEvent?.url
     if (isLoadError.current) {
       isLoadError.current = false
@@ -312,6 +325,11 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       setPageLoadErr(true)
     }
   }
+  const onLoadStart = function () {
+    if (!fristLoaded.current) {
+      setIsLoaded(false)
+    }
+  }
 
   return (
       <Portal>
@@ -324,6 +342,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             )
           : (<WebView
             style={ defaultWebViewStyle }
+            pointerEvents={ isLoaded ? 'auto' : 'none' }
             source={{ uri: src }}
             ref={webViewRef}
             javaScriptEnabled={true}
@@ -334,6 +353,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             onLoadEnd={onLoadEnd}
             onHttpError={onHttpError}
             onError={onError}
+            onLoadStart={onLoadStart}
             allowsBackForwardNavigationGestures={true}
       ></WebView>)}
       </Portal>

package/lib/runtime/components/react/types/global.d.ts

@@ -42,21 +42,6 @@ declare let global: {
 
 declare module '@react-navigation/native' {
    export function useNavigation (): Record<string, any>
-   export function usePreventRemove(
-    enabled: boolean,
-    callback: (e: { data: { action: any } }) => void
-  ): void;
-  export interface PreventRemoveEvent {
-    data: {
-      action: NavigationAction;
-      route: {
-        key: string;
-        name: string;
-        params?: unknown;
-      };
-    };
-    preventDefault(): void;
-  }
 }
 
 declare module '*.png'

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -84,6 +84,88 @@ const InitialValue: ExtendedViewStyle = Object.assign({
 const TransformOrigin = 'transformOrigin'
 // transform
 const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
+// 多value解析
+const parseValues = (str: string, 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: string) => {
+  const values = parseValues(transformStr)
+  const transform: {[propName: string]: string|number|number[]}[] = []
+  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: ExtendedViewStyle): ExtendedViewStyle => {
+  if (!style.transform || Array.isArray(style.transform)) return style
+  return Object.assign({}, style, {
+    transform: parseTransform(style.transform)
+  })
+}
 
 // transform 数组转对象
 function getTransformObj (transforms: { [propName: string]: string | number }[]) {
@@ -94,7 +176,7 @@ function getTransformObj (transforms: { [propName: string]: string | number }[])
 }
 
 export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
-  const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props
+  const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props
   const enableStyleAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableStyleAnimation)
   if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -103,6 +185,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
 
   if (!enableAnimationRef.current) return { enableStyleAnimation: false }
 
+  const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
@@ -131,7 +214,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   useEffect(() => {
     // style 更新后同步更新 lastStyleRef & shareValMap
     updateStyleVal()
-  }, [originalStyle])
+  }, [style])
   // ** 获取动画样式prop & 驱动动画
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {

package/lib/template-compiler/compiler.js

@@ -180,7 +180,7 @@ const i18nModuleName = '_i'
 const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
 const stringifyModuleName = '_s'
 const optionalChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
-const optionalChainWxsName = '_oc' // 改成_oc解决web下_o重名问题
+const optionalChainWxsName = '_o'
 
 const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/

package/lib/utils/dom-tag-config.js

@@ -72,7 +72,7 @@ const isNativeMiniTag = makeMap(
  * 是否为mpx内置组件
  * collected from packages/webpack-plugin/lib/runtime/components/web/
  */
-const isBuildInWebTag = makeMap(
+const isBuildInTag = makeMap(
   'mpx-image,mpx-picker-view,mpx-slider,mpx-textarea,mpx-input,mpx-picker,' +
   'mpx-swiper-item,mpx-video,mpx-button,mpx-keep-alive,mpx-progress,' +
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
@@ -81,19 +81,6 @@ const isBuildInWebTag = makeMap(
   'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
 )
 
-/**
- * 是否为mpx2rn内置组件
- */
-const isBuildInReactTag = makeMap(
-  'mpx-web-view,mpx-view,mpx-video,mpx-textarea,mpx-text,mpx-switch,' +
-  'mpx-swiper,mpx-swiper-item,mpx-simple-view,mpx-simple-text,mpx-scroll-view,' +
-  'mpx-root-portal,mpx-radio,mpx-radio-group,mpx-navigator,mpx-movable-view,' +
-  'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
-  'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
-  'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
-)
-
 const isSpace = makeMap('ensp,emsp,nbsp')
 
 const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
@@ -118,12 +105,11 @@ module.exports = {
   isVoidTag,
   isNonPhrasingTag,
   isRichTextTag,
-  isBuildInWebTag,
+  isBuildInTag,
   isUnaryTag,
   isSpace,
   isContWidth,
   isContHeight,
   isNativeMiniTag,
-  isContConRow,
-  isBuildInReactTag
+  isContConRow
 }

package/lib/web/script-helper.js

@@ -13,7 +13,7 @@ function stringifyRequest (loaderContext, request) {
 
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}/index" */`
+    return `/* webpackChunkName: "${chunkName}" */`
   }
   return ''
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.7-beta.4",
+  "version": "2.10.7-beta.6",
   "description": "mpx compile core",
   "keywords": [
     "mpx"