@mpxjs/webpack-plugin 2.10.7-beta.9 → 2.10.8-beta.1

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -0,0 +1,180 @@
+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'
+
+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 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 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 {
+  type: 'component' | 'page'
+  chunkName: string
+  moduleId: string
+  innerProps: any,
+  loading?: ComponentType<unknown>
+  fallback?: ComponentType<unknown>
+  getChildren: () => Promise<ReactNode>
+}
+
+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<ReactNode>>(null)
+
+  const reloadPage = useCallback(() => {
+    setStatus('pending')
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    if (!chunkLoaded && status === 'pending') {
+      if (loadChunkPromise.current) {
+        loadChunkPromise
+          .current.then((res: ReactNode) => {
+            if (cancelled) return
+            asyncChunkMap.set(moduleId, res)
+            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
+    }
+  }, [status])
+
+  if (chunkLoaded) {
+    const Comp = asyncChunkMap.get(moduleId)
+    return createElement(Comp, innerProps)
+  } else if (status === 'error') {
+    if (type === 'page') {
+      fallback = fallback || DefaultFallback
+      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage })
+    } else {
+      return fallback ? createElement(fallback, innerProps) : null
+    }
+  } else {
+    if (!loadChunkPromise.current) {
+      loadChunkPromise.current = getChildren()
+    }
+    if (type === 'page') {
+      return createElement(loading || DefaultLoading)
+    } else {
+      return fallback ? createElement(fallback, innerProps) : null
+    }
+  }
+}
+
+AsyncSuspense.displayName = 'MpxAsyncSuspense'
+
+export default AsyncSuspense

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

@@ -1,14 +1,12 @@
 /**
- * ✔ scale-area
+ * ✘ scale-area
  */
 
 import { View } from 'react-native'
-import { JSX, forwardRef, ReactNode, useRef, useMemo, useCallback, createElement } from 'react'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
-import { useSharedValue } from 'react-native-reanimated'
+import { JSX, forwardRef, ReactNode, useRef, useMemo, createElement } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
-import { MovableAreaContext, MovableAreaContextValue } from './context'
+import { MovableAreaContext } from './context'
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
 import Portal from './mpx-portal'
 
@@ -17,7 +15,6 @@ interface MovableAreaProps {
   children: ReactNode
   width?: number
   height?: number
-  'scale-area'?: boolean
   'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
@@ -26,21 +23,8 @@ interface MovableAreaProps {
   'parent-height'?: number
 }
 
-interface MovableViewCallbacks {
-   onScale: (scaleInfo: {scale: number}) => void
-   onScaleEnd?: () => void
-}
-
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const {
-    style = {},
-    'scale-area': scaleArea = false,
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
-    'parent-width': parentWidth,
-    'parent-height': parentHeight
-  } = props
+  const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
 
   const {
     hasSelfPercent,
@@ -52,67 +36,17 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const movableAreaRef = useRef(null)
-  const movableViewsValue = useSharedValue<Record<string, MovableViewCallbacks>>({})
-  useNodesRef(props, ref, movableAreaRef, {
+  const movableViewRef = useRef(null)
+  useNodesRef(props, ref, movableViewRef, {
     style: normalStyle
   })
 
-  // 注册/注销 MovableView 的回调
-  const registerMovableView = useCallback((id: string, callbacks: { onScale?: (scaleInfo: { scale: number }) => void; onScaleEnd?: () => void }) => {
-    movableViewsValue.value = extendObject(movableViewsValue.value, { [id]: callbacks })
-  }, [])
-
-  const unregisterMovableView = useCallback((id: string) => {
-    delete movableViewsValue.value[id]
-  }, [])
-
-  // 处理区域缩放手势
-  const handleAreaScale = useCallback((scaleInfo: { scale: number }) => {
-    'worklet'
-    if (scaleArea) {
-      // 将缩放信息广播给所有注册的 MovableView
-      Object.values(movableViewsValue.value).forEach((callbacks) => {
-        callbacks.onScale && callbacks.onScale(scaleInfo)
-      })
-    }
-  }, [scaleArea])
-
-  // 处理区域缩放结束
-  const handleAreaScaleEnd = useCallback(() => {
-    'worklet'
-    if (scaleArea) {
-      // 通知所有注册的 MovableView 缩放结束
-      Object.values(movableViewsValue.value).forEach((callbacks) => {
-        callbacks.onScaleEnd && callbacks.onScaleEnd()
-      })
-    }
-  }, [scaleArea])
-
-  const contextValue: MovableAreaContextValue = useMemo(() => ({
+  const contextValue = useMemo(() => ({
     height: normalStyle.height || 10,
-    width: normalStyle.width || 10,
-    scaleArea,
-    registerMovableView,
-    unregisterMovableView
-  }), [normalStyle.width, normalStyle.height, scaleArea])
+    width: normalStyle.width || 10
+  }), [normalStyle.width, normalStyle.height])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableAreaRef })
-
-  // 创建缩放手势
-  const scaleGesture = useMemo(() => {
-    if (!scaleArea) return null
-
-    return Gesture.Pinch()
-      .onUpdate((e) => {
-        'worklet'
-        handleAreaScale(e)
-      })
-      .onEnd(() => {
-        'worklet'
-        handleAreaScaleEnd()
-      })
-  }, [scaleArea])
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 
   const innerProps = useInnerProps(
     extendObject(
@@ -121,7 +55,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       layoutProps,
       {
         style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
-        ref: movableAreaRef
+        ref: movableViewRef
       }
     ),
     [],
@@ -139,30 +73,9 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       }
     )
   ))
-
-  // 如果启用了 scale-area，包装一个 GestureDetector
-  if (scaleArea && scaleGesture) {
-    movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
-      GestureDetector,
-      { gesture: scaleGesture },
-      createElement(
-        View,
-        innerProps,
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current
-          }
-        )
-      )
-    ))
-  }
-
   if (hasPositionFixed) {
     movableComponent = createElement(Portal, null, movableComponent)
   }
-
   return movableComponent
 })