@mpxjs/webpack-plugin 2.10.6-beta.7 → 2.10.7-beta.1

package/lib/runtime/components/react/AsyncSuspense.tsx

@@ -1,192 +1,79 @@
-import { useState, ComponentType, useEffect, useCallback, useRef, ReactNode, createElement } from 'react'
-import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native'
-import FastImage from '@d11/react-native-fast-image'
+import { useState, ComponentType, useEffect, useCallback, useRef } from 'react'
+import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer'
+import type { DefaultFallbackProps } from './AsyncContainer'
 
 const asyncChunkMap = new Map()
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#fff'
-  },
-  loadingImage: {
-    width: 100,
-    height: 100,
-    marginTop: 220,
-    alignSelf: 'center'
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center'
-  },
-  errorImage: {
-    marginTop: 80,
-    width: 220,
-    aspectRatio: 1,
-    alignSelf: 'center'
-  },
-  errorText: {
-    fontSize: 16,
-    textAlign: 'center',
-    color: '#333',
-    marginBottom: 20
-  },
-  retryButton: {
-    position: 'absolute',
-    bottom: 54,
-    left: 20,
-    right: 20,
-    backgroundColor: '#fff',
-    paddingVertical: 15,
-    borderRadius: 30,
-    marginTop: 40,
-    borderWidth: 1,
-    borderColor: '#FF5F00'
-  },
-  retryButtonText: {
-    color: '#FF5F00',
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center'
-  }
-})
-
-interface LayoutViewProps {
-  children: ReactNode
-}
-
-interface AsyncModule {
-  __esModule: boolean
-  default: ReactNode
-}
-
-interface DefaultFallbackProps {
-  onReload: () => void
-}
-
-const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
-  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>
-      <TouchableOpacity
-        style={styles.retryButton}
-        onPress={onReload}
-        activeOpacity={0.7}
-      >
-        <Text style={styles.retryButtonText}>点击重试</Text>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-const LayoutView = (props: LayoutViewProps) => {
-  return (
-    <View style={{ flex: 1 }} collapsable={false}>{props.children}</View>
-  )
-}
-
-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>
-  )
-}
-
-interface AsyncSuspenseProps {
+interface props {
   type: 'component' | 'page'
   chunkName: string
-  moduleId: string
-  innerProps: any,
+  request: string
+  props: any,
   loading: ComponentType<unknown>
   fallback: ComponentType<unknown>
-  getChildren: () => Promise<AsyncModule>
+  getChildren: () => Promise<unknown>
 }
 
-type ComponentStauts = 'pending' | 'error' | 'loaded'
-
-const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
-  type,
-  innerProps,
-  chunkName,
-  moduleId,
-  loading,
-  fallback,
-  getChildren
-}) => {
-  const [status, setStatus] = useState<ComponentStauts>('pending')
-  const chunkLoaded = asyncChunkMap.has(moduleId)
-  const loadChunkPromise = useRef<null | Promise<AsyncModule>>(null)
+const AsyncSuspense: React.FC<props> = ({ type, props, chunkName, request, loading, fallback, getChildren }) => {
+  const [status, setStatus] = useState('pending')
+  const loaded = asyncChunkMap.has(request)
+  const [, setKey] = useState(0)
+  const chunkPromise = useRef<null | Promise<unknown>>(null)
 
   const reloadPage = useCallback(() => {
+    setKey((preV) => preV + 1)
+    console.log('[mpxAsyncSuspense]: reload page')
     setStatus('pending')
   }, [])
 
   useEffect(() => {
-    let cancelled = false
-    if (!chunkLoaded && status === 'pending') {
-      if (loadChunkPromise.current) {
-        loadChunkPromise
-          .current.then((m: AsyncModule) => {
-            if (cancelled) return
-            asyncChunkMap.set(moduleId, m.__esModule ? m.default : m)
-            setStatus('loaded')
-          })
-          .catch((e) => {
-            if (cancelled) return
-            if (type === 'component') {
-              global.onLazyLoadError({
-                type: 'subpackage',
-                subpackage: [chunkName],
-                errMsg: `loadSubpackage: ${e.type}`
-              })
-            }
-            loadChunkPromise.current = null
-            setStatus('error')
-          })
-      }
-    }
-
-    return () => {
-      cancelled = true
+    if (!loaded && status === 'pending') {
+      // todo 清楚副作用？
+      console.log('the current :', chunkPromise.current)
+      chunkPromise.current!
+        .then((m: any) => {
+          console.log('[mpxAsyncSuspense]: load sucess')
+          asyncChunkMap.set(request, m.__esModule ? m.default : m)
+          setStatus('loaded')
+        })
+        .catch((e) => {
+          if (type === 'component') {
+            console.log(11111, e)
+            global.onLazyLoadError({
+              type: 'subpackage',
+              subpackage: [chunkName],
+              errMsg: `loadSubpackage: ${e.type}`
+            })
+          }
+          console.log('[mpxAsyncSuspense]: load eror', e)
+          chunkPromise.current = null
+          setStatus('error')
+        })
     }
-  }, [status])
+  })
 
-  if (chunkLoaded) {
-    const Comp = asyncChunkMap.get(moduleId)
-    return createElement(Comp, innerProps)
+  if (loaded) {
+    const Comp = asyncChunkMap.get(request)
+    return <Comp {...props}></Comp>
   } else if (status === 'error') {
+    console.log('the status is:', status)
     if (type === 'page') {
-      const Fallback =
-        (fallback as ComponentType<DefaultFallbackProps>) || DefaultFallback
-      return createElement(LayoutView, null, createElement(Fallback, { onReload: reloadPage }))
+      const Fallback = fallback as ComponentType<DefaultFallbackProps> || DefaultFallback
+      return <><PageWrapper><Fallback onReload={reloadPage}></Fallback></PageWrapper></>
     } else {
-      return createElement(fallback, innerProps)
+      const Fallback = loading
+      return <Fallback {...props}></Fallback>
     }
   } else {
-    if (!loadChunkPromise.current) {
-      loadChunkPromise.current = getChildren()
+    if (!chunkPromise.current) {
+      chunkPromise.current = getChildren()
     }
     if (type === 'page') {
-      return createElement(LayoutView, null, createElement(loading || DefaultLoading))
+      const Fallback = loading || DefaultLoading
+      return <PageWrapper><Fallback /></PageWrapper>
     } else {
-      return createElement(fallback, innerProps)
+      const Fallback = loading
+      return <Fallback {...props}></Fallback>
     }
   }
 }

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

@@ -0,0 +1,160 @@
+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,
+        padding: 20,
+        backgroundColor: '#fff'
+    },
+    loadingImage: {
+        width: 100,
+        height: 100,
+        marginTop: 220,
+        alignSelf: 'center'
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    },
+    errorImage: {
+        marginTop: 80,
+        width: 220,
+        aspectRatio: 1,
+        alignSelf: 'center'
+    },
+    errorText: {
+        fontSize: 16,
+        textAlign: 'center',
+        color: '#333',
+        marginBottom: 20
+    },
+    retryButton: {
+        position: 'absolute',
+        bottom: 54,
+        left: 20,
+        right: 20,
+        backgroundColor: '#fff',
+        paddingVertical: 15,
+        borderRadius: 30,
+        marginTop: 40,
+        borderWidth: 1,
+        borderColor: '#FF5F00'
+    },
+    retryButtonText: {
+        color: '#FF5F00',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    }
+});
+export 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 }) => {
+    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>
+      <TouchableOpacity style={styles.retryButton} onPress={onReload} activeOpacity={0.7}>
+        <Text style={styles.retryButtonText}>点击重试</Text>
+      </TouchableOpacity>
+    </View>);
+};
+export default class AsyncContainer extends Component {
+    suspenseFallback;
+    errorFallback;
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            key: 0
+        };
+        this.suspenseFallback = this.getSuspenseFallback();
+        this.errorFallback = this.getErrorFallback();
+    }
+    // render 阶段收集到的错误
+    static getDerivedStateFromError(error) {
+        if (error.name === 'ChunkLoadError') {
+            return {
+                hasError: true,
+                key: 0
+            };
+        }
+        else {
+            // 被外层捕获
+            throw error;
+        }
+    }
+    componentDidCatch(error) {
+        if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
+            const request = error.request || '';
+            const subpackage = request.split('/').filter((i) => !!i)[0];
+            global.onLazyLoadError({
+                type: 'subpackage',
+                subpackage: [subpackage],
+                errMsg: `loadSubpackage: ${error.type}`
+            });
+        }
+    }
+    reloadPage() {
+        this.setState((prevState) => {
+            return {
+                hasError: false,
+                key: prevState.key + 1
+            };
+        });
+    }
+    getSuspenseFallback() {
+        if (this.props.type === 'page') {
+            const Fallback = this.props.loading || DefaultLoading;
+            return <Fallback />;
+        }
+        else {
+            const Fallback = this.props.loading;
+            return <Fallback {...this.props.props}></Fallback>;
+        }
+    }
+    getErrorFallback() {
+        if (this.props.type === 'page') {
+            const Fallback = this.props.fallback || DefaultFallback;
+            return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>;
+        }
+        else {
+            const Fallback = this.props.loading;
+            return <Fallback {...this.props.props}></Fallback>;
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            if (this.props.type === 'component') {
+                return this.errorFallback;
+            }
+            else {
+                return (<PageWrapper>{this.errorFallback}</PageWrapper>);
+            }
+        }
+        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)} */}
+        </Suspense>);
+        }
+    }
+}

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

@@ -1,136 +1,67 @@
-import { useState, useEffect, useCallback, useRef, createElement } from 'react';
-import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
-import FastImage from '@d11/react-native-fast-image';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer';
 const asyncChunkMap = new Map();
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        padding: 20,
-        backgroundColor: '#fff'
-    },
-    loadingImage: {
-        width: 100,
-        height: 100,
-        marginTop: 220,
-        alignSelf: 'center'
-    },
-    buttonText: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '500',
-        textAlign: 'center'
-    },
-    errorImage: {
-        marginTop: 80,
-        width: 220,
-        aspectRatio: 1,
-        alignSelf: 'center'
-    },
-    errorText: {
-        fontSize: 16,
-        textAlign: 'center',
-        color: '#333',
-        marginBottom: 20
-    },
-    retryButton: {
-        position: 'absolute',
-        bottom: 54,
-        left: 20,
-        right: 20,
-        backgroundColor: '#fff',
-        paddingVertical: 15,
-        borderRadius: 30,
-        marginTop: 40,
-        borderWidth: 1,
-        borderColor: '#FF5F00'
-    },
-    retryButtonText: {
-        color: '#FF5F00',
-        fontSize: 16,
-        fontWeight: '500',
-        textAlign: 'center'
-    }
-});
-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>
-      <TouchableOpacity style={styles.retryButton} onPress={onReload} activeOpacity={0.7}>
-        <Text style={styles.retryButtonText}>点击重试</Text>
-      </TouchableOpacity>
-    </View>);
-};
-const LayoutView = (props) => {
-    return (<View style={{ flex: 1 }} collapsable={false}>{props.children}</View>);
-};
-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>);
-};
-const AsyncSuspense = ({ type, innerProps, chunkName, moduleId, loading, fallback, getChildren }) => {
+const AsyncSuspense = ({ type, props, chunkName, request, loading, fallback, getChildren }) => {
     const [status, setStatus] = useState('pending');
-    const chunkLoaded = asyncChunkMap.has(moduleId);
-    const loadChunkPromise = useRef(null);
+    const loaded = asyncChunkMap.has(request);
+    const [, setKey] = useState(0);
+    const chunkPromise = useRef(null);
     const reloadPage = useCallback(() => {
+        setKey((preV) => preV + 1);
+        console.log('[mpxAsyncSuspense]: reload page');
         setStatus('pending');
     }, []);
     useEffect(() => {
-        let cancelled = false;
-        if (!chunkLoaded && status === 'pending') {
-            if (loadChunkPromise.current) {
-                loadChunkPromise
-                    .current.then((m) => {
-                    if (cancelled)
-                        return;
-                    asyncChunkMap.set(moduleId, m.__esModule ? m.default : m);
-                    setStatus('loaded');
-                })
-                    .catch((e) => {
-                    if (cancelled)
-                        return;
-                    if (type === 'component') {
-                        global.onLazyLoadError({
-                            type: 'subpackage',
-                            subpackage: [chunkName],
-                            errMsg: `loadSubpackage: ${e.type}`
-                        });
-                    }
-                    loadChunkPromise.current = null;
-                    setStatus('error');
-                });
-            }
+        if (!loaded && status === 'pending') {
+            // todo 清楚副作用？
+            console.log('the current :', chunkPromise.current);
+            chunkPromise.current
+                .then((m) => {
+                console.log('[mpxAsyncSuspense]: load sucess');
+                asyncChunkMap.set(request, m.__esModule ? m.default : m);
+                setStatus('loaded');
+            })
+                .catch((e) => {
+                if (type === 'component') {
+                    console.log(11111, e);
+                    global.onLazyLoadError({
+                        type: 'subpackage',
+                        subpackage: [chunkName],
+                        errMsg: `loadSubpackage: ${e.type}`
+                    });
+                }
+                console.log('[mpxAsyncSuspense]: load eror', e);
+                chunkPromise.current = null;
+                setStatus('error');
+            });
         }
-        return () => {
-            cancelled = true;
-        };
-    }, [status]);
-    if (chunkLoaded) {
-        const Comp = asyncChunkMap.get(moduleId);
-        return createElement(Comp, innerProps);
+    });
+    if (loaded) {
+        const Comp = asyncChunkMap.get(request);
+        return <Comp {...props}></Comp>;
     }
     else if (status === 'error') {
+        console.log('the status is:', status);
         if (type === 'page') {
             const Fallback = fallback || DefaultFallback;
-            return createElement(LayoutView, null, createElement(Fallback, { onReload: reloadPage }));
+            return <><PageWrapper><Fallback onReload={reloadPage}></Fallback></PageWrapper></>;
         }
         else {
-            return createElement(fallback, innerProps);
+            const Fallback = loading;
+            return <Fallback {...props}></Fallback>;
         }
     }
     else {
-        if (!loadChunkPromise.current) {
-            loadChunkPromise.current = getChildren();
+        if (!chunkPromise.current) {
+            chunkPromise.current = getChildren();
         }
         if (type === 'page') {
-            return createElement(LayoutView, null, createElement(loading || DefaultLoading));
+            const Fallback = loading || DefaultLoading;
+            return <PageWrapper><Fallback /></PageWrapper>;
         }
         else {
-            return createElement(fallback, innerProps);
+            const Fallback = loading;
+            return <Fallback {...props}></Fallback>;
         }
     }
 };

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

@@ -41,7 +41,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
@@ -62,6 +62,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const isFirstTouch = useSharedValue(true);
     const touchEvent = useSharedValue('');
     const initialViewPosition = useSharedValue({ x: x || 0, y: y || 0 });
+    const lastChangeTime = useSharedValue(0);
     const MovableAreaLayout = useContext(MovableAreaContext);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -99,6 +100,15 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             layoutRef
         }, propsRef.current));
     }, []);
+    // 节流版本的 change 事件触发
+    const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
+        'worklet';
+        const now = Date.now();
+        if (now - lastChangeTime.value >= changeThrottleTime) {
+            lastChangeTime.value = now;
+            runOnJS(handleTriggerChange)({ x, y, type });
+        }
+    }, [changeThrottleTime]);
     useEffect(() => {
         runOnUI(() => {
             if (offsetX.value !== x || offsetY.value !== y) {
@@ -354,7 +364,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 }
             }
             if (bindchange) {
-                runOnJS(handleTriggerChange)({
+                // 使用节流版本减少 runOnJS 调用
+                handleTriggerChangeThrottled({
                     x: offsetX.value,
                     y: offsetY.value
                 });

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

@@ -56,6 +56,9 @@ const _RichText = forwardRef((props, ref) => {
         source: { html: generateHTML(html) },
         onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
+        },
+        style: {
+            backgroundColor: 'transparent'
         }
     }));
     if (hasPositionFixed) {