@mpxjs/webpack-plugin 2.10.6-beta.2 → 2.10.6-beta.3

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

@@ -0,0 +1,189 @@
+import { ComponentType, ReactNode, Component, Fragment, Suspense } from 'react'
+import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
+import FastImage from '@d11/react-native-fast-image'
+
+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'
+  }
+})
+
+type AsyncType = 'page' | 'component'
+
+interface PropsType<T extends AsyncType> {
+  type: T
+  props: object
+  loading: ComponentType<unknown>
+  fallback: ComponentType<unknown>
+  children: (props: unknown) => ReactNode
+}
+
+interface StateType {
+  hasError: boolean,
+  key: number
+}
+
+interface ComponentError extends Error {
+  request?: string
+  type: 'timeout' | 'fail'
+}
+
+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 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>
+  )
+}
+
+export default class AsyncContainer extends Component<PropsType<AsyncType>, StateType> {
+  private suspenseFallback: ReactNode
+  private errorFallback: ReactNode
+
+  constructor (props: PropsType<AsyncType>) {
+    super(props)
+    this.state = {
+      hasError: false,
+      key: 0
+    }
+    this.suspenseFallback = this.getSuspenseFallback()
+    this.errorFallback = this.getErrorFallback()
+  }
+
+  // render 阶段收集到的错误
+  static getDerivedStateFromError (error: ComponentError): StateType | undefined {
+    if (error.name === 'ChunkLoadError') {
+      return {
+        hasError: true,
+        key: 0
+      }
+    } else {
+      // 被外层捕获
+      throw error
+    }
+  }
+
+  componentDidCatch (error: ComponentError): void {
+    if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
+      const request = error.request || ''
+      const subpackage = request.split('/').filter((i: string) => !!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 as ComponentType<DefaultFallbackProps> || 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) {
+      return this.errorFallback
+    } else {
+      return (
+        <Suspense fallback={this.suspenseFallback} key={this.state.key}>
+          {this.props.children(this.props.props)}
+        </Suspense>
+      )
+    }
+  }
+}

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

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

package/lib/runtime/components/react/mpx-input.tsx

@@ -218,7 +218,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   useEffect(() => {
-    if (inputValue !== value) {
+    if (value !== tmpValue.current) {
       const parsed = parseValue(value)
       tmpValue.current = parsed
       setInputValue(parsed)

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

@@ -327,7 +327,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       setHeight(height || 0)
     }
     nodeRef.current?.measure((x: number, y: number, width: number, height: number) => {
-      const { y: navigationY = 0 } = navigation?.layout || {}
+      const { top: navigationY = 0 } = navigation?.layout || {}
       layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 }
       resetBoundaryAndCheck({ width, height })
     })
@@ -335,7 +335,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   }
 
   const extendEvent = useCallback((e: any, type: 'start' | 'move' | 'end') => {
-    const { y: navigationY = 0 } = navigation?.layout || {}
+    const { top: 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-swiper-item.tsx

@@ -3,7 +3,7 @@ import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-nati
 import { ReactNode, forwardRef, useRef, useContext, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject, isHarmony } from './utils'
 import { SwiperContext } from './context'
 
 interface SwiperItemProps {
@@ -80,7 +80,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     ],
     { layoutRef })
   const itemAnimatedStyle = useAnimatedStyle(() => {
-    if (!step.value) return {}
+    if (!step.value && !isHarmony) return {}
     const inputRange = [step.value, 0]
     const outputRange = [0.7, 1]
     // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -23,6 +23,7 @@ import Portal from './mpx-portal'
  * ✔ easing-function  ="easeOutCubic"
  * ✘ display-multiple-items
  * ✘ snap-to-edge
+ * ✔ disableGesture
  */
 type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
 type StrAbsoType = 'absoluteX' | 'absoluteY'
@@ -206,6 +207,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTranstion = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 的时间
   const moveTime = useSharedValue(0)
+  // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
+  const anotherDirectionMove = useSharedValue(0)
+  // 另一个方向的
+  const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase() as StrAbsoType
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
 
@@ -504,7 +509,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    updateCurrent(props.current || 0, step.value)
+    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+    // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+    if (props.current !== currentIndex.value) {
+      updateCurrent(props.current || 0, step.value)
+    }
   }, [props.current])
 
   useEffect(() => {
@@ -566,18 +575,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         targetOffset: -moveToTargetPos
       }
     }
-    function canMove (eventData: EventDataType) {
+    function checkUnCircular (eventData: EventDataType) {
       'worklet'
       const { translation } = eventData
       const currentOffset = Math.abs(offset.value)
-      if (!circularShared.value) {
-        if (translation < 0) {
-          return currentOffset < step.value * (childrenLength.value - 1)
-        } else {
-          return currentOffset > 0
+      // 向右滑动swiper
+      if (translation < 0) {
+        const boundaryOffset = step.value * (childrenLength.value - 1)
+        const gestureMovePos = Math.abs(translation) + currentOffset
+        return {
+          // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
+          targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
+          canMove: currentOffset < boundaryOffset
         }
       } else {
-        return true
+        const gestureMovePos = currentOffset - translation
+        return {
+          targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+          canMove: currentOffset > 0
+        }
       }
     }
     function handleEnd (eventData: EventDataType) {
@@ -636,7 +652,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    function handleLongPress () {
+    function computeHalf () {
       'worklet'
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
@@ -646,6 +662,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
       const half = Math.abs(diffOffset) > step.value / 2
+      return {
+        diffOffset,
+        half
+      }
+    }
+    function handleLongPress () {
+      'worklet'
+      const { diffOffset, half } = computeHalf()
       if (+diffOffset === 0) {
         runOnJS(resumeLoop)()
       } else if (half) {
@@ -701,18 +725,29 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         runOnJS(pauseLoop)()
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
+        anotherDirectionMove.value = e[anotherAbso]
         moveTime.value = new Date().getTime()
       })
-      .onTouchesMove((e) => {
+      .onUpdate((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
+        const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance
         }
-        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-        if (!circularShared.value && !canMove(eventData)) {
+        // 1. 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
+        const { half } = computeHalf()
+        if (half) {
+          const { selectedIndex } = getTargetPosition(eventData)
+          currentIndex.value = selectedIndex
+        }
+        // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+        const { canMove, targetOffset } = checkUnCircular(eventData)
+        if (!circularShared.value) {
+          if (canMove) {
+            offset.value = targetOffset
+            preAbsolutePos.value = e[strAbso]
+          }
           return
         }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
@@ -721,13 +756,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         } else {
           offset.value = moveDistance + offset.value
         }
-        preAbsolutePos.value = touchEventData[strAbso]
+        preAbsolutePos.value = e[strAbso]
       })
-      .onTouchesUp((e) => {
+      .onFinalize((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - moveTranstion.value
+        const moveDistance = e[strAbso] - moveTranstion.value
         touchfinish.value = true
         const eventData = {
           translation: moveDistance
@@ -743,6 +777,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (Math.abs(strVelocity) < longPressRatio) {
           handleLongPress()
         } else {
+          // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
           handleEnd(eventData)
         }
       })

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

@@ -1,6 +1,7 @@
-import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react'
+import { forwardRef, useRef, useContext, useMemo, useState } 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'
@@ -75,7 +76,6 @@ 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,30 +109,18 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     top: 0,
     bottom: 0
   }
-  const canGoBack = useRef<boolean>(false)
-  const isNavigateBack = useRef<boolean>(false)
 
-  const beforeRemoveHandle = (e: Event) => {
-    if (canGoBack.current && !isNavigateBack.current) {
+  const navigation = useNavigation()
+  const [isIntercept, setIsIntercept] = useState<boolean>(false)
+  usePreventRemove(isIntercept, (event: PreventRemoveEvent) => {
+    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<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -183,14 +171,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') {
-      canGoBack.current = event.nativeEvent.canGoBack
+      setIsIntercept(event.nativeEvent.canGoBack)
     }
   }
   const _message = function (res: WebViewMessageEvent) {
@@ -279,7 +267,6 @@ 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
@@ -325,11 +312,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       setPageLoadErr(true)
     }
   }
-  const onLoadStart = function () {
-    if (!fristLoaded.current) {
-      setIsLoaded(false)
-    }
-  }
 
   return (
       <Portal>
@@ -342,7 +324,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             )
           : (<WebView
             style={ defaultWebViewStyle }
-            pointerEvents={ isLoaded ? 'auto' : 'none' }
             source={{ uri: src }}
             ref={webViewRef}
             javaScriptEnabled={true}
@@ -353,7 +334,6 @@ 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,6 +42,21 @@ 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/optionProcessor.js

@@ -79,7 +79,7 @@ registered in parent context!`)
         transitionName: ''
       }
     }
-    if (!global.__mpx.config.webConfig?.disablePageTransition) {
+    if (!global.__mpx.config.webConfig.disablePageTransition) {
       option.watch = {
         $route: {
           handler () {
@@ -161,7 +161,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         redirect: '/' + firstPage
       })
     }
-    const webRouteConfig = global.__mpx.config.webConfig?.routeConfig || global.__mpx.config.webRouteConfig
+    const webRouteConfig = global.__mpx.config.webConfig.routeConfig || global.__mpx.config.webRouteConfig
     global.__mpxRouter = option.router = new VueRouter(extend({ routes }, webRouteConfig))
     let mpxStackPath = []
     if (isBrowser) {