@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

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

@@ -1,11 +1,13 @@
-import { forwardRef, JSX, useEffect, useRef } from 'react'
-import { noop, warn } from '@mpxjs/utils'
+import { forwardRef, JSX, useRef, useContext, useMemo, createElement } from 'react'
+import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes'
+import { getCurrentPage, extendObject } from './utils'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes'
+import { RouteContext } from './context'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -28,29 +30,25 @@ interface WebViewProps {
 }
 
 interface PayloadData {
-  data?: Record<string, any>
+  [x: string]: any
 }
 
 type MessageData = {
   payload?: PayloadData,
+  args?: Array<any>,
   type?: string,
   callbackId?: number
 }
 
-interface NativeEvent {
-  url: string,
-  data: string
-}
-
-interface FormRef {
-  postMessage: (value: any) => void;
-}
-
-const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
-  const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props
+const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
+  const { src, bindmessage, bindload, binderror } = props
+  const mpx = global.__mpx
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }
+  const pageId = useContext(RouteContext)
+  const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
+  const webViewRef = useRef<WebView>(null)
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -59,28 +57,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     bottom: 0 as number
   }
 
-  const webViewRef = useRef<WebView>(null)
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
-    defaultStyle: defaultWebViewStyle
+    style: defaultWebViewStyle
   })
 
-  const _messageList: any[] = []
-  const handleUnload = () => {
-    // 这里是 WebView 销毁前执行的逻辑
-    bindmessage(getCustomEvent('messsage', {}, {
-      detail: {
-        data: _messageList
-      },
-      layoutRef: webViewRef
-    }))
+  if (!src) {
+    return null
   }
 
-  useEffect(() => {
-    // 组件卸载时执行
-    return () => {
-      handleUnload()
-    }
-  }, [])
   const _load = function (res: WebViewNavigationEvent) {
     const result = {
       type: 'load',
@@ -101,6 +85,36 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     binderror(result)
   }
+  const injectedJavaScript = `
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      var _documentTitle = document.title;
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'setTitle',
+        payload: {
+          _documentTitle: _documentTitle
+        }
+      }))
+      Object.defineProperty(document, 'title', {
+        set (val) {
+          _documentTitle = val
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'setTitle',
+            payload: {
+              _documentTitle: _documentTitle
+            }
+          }))
+        },
+        get () {
+          return _documentTitle
+        }
+      });
+    }
+  `
+  const _changeUrl = function (navState: WebViewNavigation) {
+    if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+      currentPage.__webViewUrl = navState.url
+    }
+  }
   const _message = function (res: WebViewMessageEvent) {
     let data: MessageData = {}
     let asyncCallback
@@ -110,58 +124,106 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       if (typeof nativeEventData === 'string') {
         data = JSON.parse(nativeEventData)
       }
-    } catch (e) {
-      data = {}
-    }
+    } catch (e) {}
+    const args = data.args
     const postData: PayloadData = data.payload || {}
-    switch (data.type) {
+    const params = Array.isArray(args) ? args : [postData]
+    const type = data.type
+    switch (type) {
+      case 'setTitle':
+        { // case下不允许直接声明，包个块解决该问题
+          const title = postData._documentTitle
+          if (title) {
+            const navigation = getFocusedNavigation()
+            navigation && navigation.setOptions({ title })
+          }
+        }
+        break
       case 'postMessage':
-        _messageList.push(postData.data)
+        bindmessage && bindmessage(getCustomEvent('messsage', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
+          detail: {
+            data: params[0]?.data
+          }
+        }))
         asyncCallback = Promise.resolve({
           errMsg: 'invokeWebappApi:ok'
         })
         break
       case 'navigateTo':
-        asyncCallback = navObj.navigateTo(postData)
+        asyncCallback = navObj.navigateTo(...params)
         break
       case 'navigateBack':
-        asyncCallback = navObj.navigateBack(postData)
+        asyncCallback = navObj.navigateBack(...params)
         break
       case 'redirectTo':
-        asyncCallback = navObj.redirectTo(postData)
+        asyncCallback = navObj.redirectTo(...params)
         break
       case 'switchTab':
-        asyncCallback = navObj.switchTab(postData)
+        asyncCallback = navObj.switchTab(...params)
         break
       case 'reLaunch':
-        asyncCallback = navObj.reLaunch(postData)
+        asyncCallback = navObj.reLaunch(...params)
+        break
+      default:
+        if (type) {
+          const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type]
+          if (isFunction(implement)) {
+            asyncCallback = Promise.resolve(implement(...params))
+          } else {
+            /* eslint-disable prefer-promise-reject-errors */
+            asyncCallback = Promise.reject({
+              errMsg: `未在apiImplementations中配置${type}方法`
+            })
+          }
+        }
         break
     }
 
     asyncCallback && asyncCallback.then((res: any) => {
       if (webViewRef.current?.postMessage) {
         const test = JSON.stringify({
-          type: data.type,
+          type,
           callbackId: data.callbackId,
           result: res
         })
         webViewRef.current.postMessage(test)
       }
+    }).catch((error: any) => {
+      if (webViewRef.current?.postMessage) {
+        const test = JSON.stringify({
+          type,
+          callbackId: data.callbackId,
+          error
+        })
+        webViewRef.current.postMessage(test)
+      }
     })
   }
-  return (<Portal>
-    <WebView
-      style={defaultWebViewStyle}
-      source={{ uri: src }}
-      ref={webViewRef}
-      onLoad={_load}
-      onError={_error}
-      onMessage={_message}
-      javaScriptEnabled={true}
-    ></WebView>
-  </Portal>)
+  const events = {}
+
+  if (bindload) {
+    extendObject(events, {
+      onLoad: _load
+    })
+  }
+  if (binderror) {
+    extendObject(events, {
+      onError: _error
+    })
+  }
+  extendObject(events, {
+    onMessage: _message
+  })
+
+  return createElement(Portal, null, createElement(WebView, extendObject({
+    style: defaultWebViewStyle,
+    source: { uri: src },
+    ref: webViewRef,
+    javaScriptEnabled: true,
+    onNavigationStateChange: _changeUrl
+  }, events)))
 })
 
-_WebView.displayName = 'mpx-web-view'
+_WebView.displayName = 'MpxWebview'
 
 export default _WebView

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

@@ -0,0 +1,104 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+
+export type Faces = {
+  index: number
+  deg: number
+  offsetY: number
+  opacity: number
+  screenHeight: number
+}
+
+export const degToRad = (deg: number) => (Math.PI * deg) / 180
+
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree: number, itemHeight: number) =>
+  itemHeight * Math.cos(degToRad(degree))
+
+export const calcPickerHeight = (faces: Faces[], itemHeight: number) => {
+  if (faces.length === 7) {
+    return itemHeight * 5
+  }
+  return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0)
+}
+
+export const createFaces = (
+  itemHeight: number,
+  visibleCount: number
+): Faces[] => {
+  // e.g [30, 60, 90]
+  const getDegreesRelativeCenter = () => {
+    const maxStep = Math.trunc((visibleCount + 2) / 2) // + 2 because there are 2 more faces at 90 degrees
+    const stepDegree = 90 / maxStep
+
+    const result = []
+    for (let i = 1; i <= maxStep; i++) {
+      result.push(i * stepDegree)
+    }
+    return result
+  }
+
+  const getScreenHeightsAndOffsets = <T extends readonly number[]>(
+    degrees: T
+  ): [T, T] => {
+    const screenHeights = degrees.map((deg) =>
+      calcHeight(deg, itemHeight)
+    ) as unknown as T
+    const freeSpaces = screenHeights.map(
+      (screenHeight) => itemHeight - screenHeight
+    )
+    const offsets = freeSpaces.map((freeSpace, index) => {
+      let offset = freeSpace / 2
+      for (let i = 0; i < index; i++) {
+        offset += freeSpaces[i]
+      }
+      return offset
+    }) as unknown as T
+    return [screenHeights, offsets]
+  }
+
+  const getOpacity = (index: number) => {
+    const map: Record<number, number> = {
+      0: 0,
+      1: 0.2,
+      2: 0.35,
+      3: 0.45,
+      4: 0.5
+    }
+    return map[index] ?? Math.min(1, map[4] + index * 0.5)
+  }
+
+  const degrees = getDegreesRelativeCenter()
+  const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
+
+  return [
+    // top items
+    ...degrees
+      .map<Faces>((degree, index) => {
+        return {
+          index: -1 * (index + 1),
+          deg: degree,
+          opacity: getOpacity(degrees.length - 1 - index),
+          offsetY: -1 * offsets[index],
+          screenHeight: screenHeight[index]
+        }
+      })
+      .reverse(),
+
+    // center item
+    { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+
+    // bottom items
+    ...degrees.map<Faces>((degree, index) => {
+      return {
+        index: index + 1,
+        deg: -1 * degree,
+        opacity: getOpacity(degrees.length - 1 - index),
+        offsetY: offsets[index],
+        screenHeight: screenHeight[index]
+      }
+    })
+  ]
+}

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+type OverlayProps = {
+  itemHeight: number
+  overlayItemStyle?: StyleProp<ViewStyle>
+  overlayContainerStyle?: StyleProp<ViewStyle>
+}
+
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+  return (
+    <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selection: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.05)',
+    alignSelf: 'stretch'
+  }
+})
+
+export default React.memo(Overlay)

package/lib/runtime/components/react/types/common.ts

@@ -16,3 +16,5 @@ export type ExtendedViewStyle = ViewStyle & {
 export type ExtendedFunctionComponent = FunctionComponent & {
   isCustomText?: boolean
 }
+
+export type AnyFunc = (...args: ReadonlyArray<any>) => any

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

@@ -1,21 +1,7 @@
-declare module 'react-native-svg/css' {
-  import type { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native'
-  import type { SvgProps as SvgCssUriProps } from 'react-native-svg'
-
-  export const SvgCssUri: React.ComponentType<SvgCssUriProps & { uri?: string }>
-
-  export interface WithLocalSvgProps {
-    asset: ImageSourcePropType
-    style?: StyleProp<ImageStyle>
-    width?: string | number
-    height?: string | number
-  }
-
-  export const WithLocalSvg: React.ComponentType<WithLocalSvgProps>
-}
-
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
+  export function isFunction (fn: unknown): boolean
+  export function isNumber (num: unknown): boolean
   export function hasOwn (obj: Object, key: string): boolean
   export function noop (...arg: any): void
   export function diffAndCloneA<A, B> (a: A, b?: B): {
@@ -26,13 +12,15 @@ declare module '@mpxjs/utils' {
   export function isObject (value): value is Object
   export function error (msg: string, location?: string, e?: any): void
   export function warn (msg: string, location?: string, e?: any): void
+  export function collectDataset (props: Record<string, any>, needParse?: boolean): Record<string, any>
   export function getFocusedNavigation (): {
     insets: {
       top: number
       bottom: number
       left: number
       right: number
-    }
+    },
+    setOptions: (params: Record<string, any>) => void
   } | undefined
 }
 

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

@@ -16,9 +16,6 @@ import {
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
-// type TransformKey = 'translateX' | 'translateY' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scaleX' | 'scaleY' | 'skewX' | 'skewY'
-// type NormalKey = 'opacity' | 'backgroundColor' | 'width' | 'height' | 'top' | 'right' | 'bottom' | 'left' | 'transformOrigin'
-// type RuleKey = TransformKey | NormalKey
 type AnimatedOption = {
   duration: number
   delay: number
@@ -84,20 +81,101 @@ const InitialValue: ExtendedViewStyle = Object.assign({
   transformOrigin: ['50%', '50%', 0]
 }, TransformInitial)
 const TransformOrigin = 'transformOrigin'
-// deg 角度
-// const isDeg = (key: RuleKey) => ['rotateX', 'rotateY', 'rotateZ', 'rotate', 'skewX', 'skewY'].includes(key)
-// 背景色
-// const isBg = (key: RuleKey) => key === 'backgroundColor'
 // 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':
+          // 单个值处理
+          transform.push({ [key]: global.__formatValue(val) })
+          break
+        case 'matrix':
+        case 'matrix3d':
+          transform.push({ [key]: parseValues(val, ',').map(val => +val) })
+          break
+        case 'translate':
+        case 'scale':
+        case 'skew':
+        case 'rotate3d': // x y z angle
+        case 'translate3d': // x y 支持 z不支持
+        case 'scale3d': // x y 支持 z不支持
+        {
+          // 2 个以上的值处理
+          key = key.replace('3d', '')
+          const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 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)
+  })
+}
 
 export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style: originalStyle = {}, animation } = props
+  const { style = {}, animation } = props
+  const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
   const animatedStyleKeys = useSharedValue([] as (string|string[])[])
-  const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: Boolean})
+  // 记录动画key的style样式值 没有的话设置为false
+  const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
+  // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
   // ** 全量 style prop sharedValue
   // 不能做增量的原因：
   // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -119,6 +197,16 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     // 驱动动画
     createAnimation(keys)
   }, [id])
+  // 同步style更新
+  // useEffect(() => {
+  //   Object.keys(animatedKeys.current).forEach(key => {
+  //     const originVal = getOriginalStyleVal(key, isTransform(key))
+  //     if (originVal && animatedKeys.current[key] !== originVal) {
+  //       animatedKeys.current[key] = originVal
+  //       shareValMap[key].value = originVal
+  //     }
+  //   })
+  // }, [style])
   // ** 清空动画
   useEffect(() => {
     return () => {
@@ -152,12 +240,15 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       }
       // 添加每个key的多次step动画
       animatedKeys.forEach(key => {
-        let toVal = (rules.get(key) || transform.get(key)) as number|string
         // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-        if (!toVal) {
-          toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value
-        }
-        const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
+        const toVal = rules.get(key) !== undefined
+          ? rules.get(key)
+          : transform.get(key) !== undefined
+            ? transform.get(key)
+            : index > 0
+              ? lastValueMap[key]
+              : shareValMap[key].value
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
         needSetCallback = false
         if (!sequence[key]) {
           sequence[key] = [animation]
@@ -165,7 +256,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
           sequence[key].push(animation)
         }
         // 更新一下 lastValueMap
-        lastValueMap[key] = toVal
+        lastValueMap[key] = toVal!
       })
       // 赋值驱动动画
       animatedKeys.forEach((key) => {
@@ -181,9 +272,8 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       : withTiming(value, { duration, easing })
     return delay ? withDelay(delay, animation) : animation
   }
-  // 获取初始值（prop style or 默认值）
   function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
-    if (isTransform && originalStyle.transform?.length) {
+    if (isTransform && Array.isArray(originalStyle.transform)) {
       let initialVal = InitialValue[key]
       // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
       originalStyle.transform.forEach(item => {
@@ -193,12 +283,31 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }
     return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key]
   }
+  // 从 prop style 中获取样式初始值 没有为undefined
+  // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
+  //   if (isTransform && Array.isArray(originalStyle.transform)) {
+  //     let initialVal = undefined // InitialValue[key]
+  //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+  //     originalStyle.transform.forEach(item => {
+  //       if (item[key] !== undefined) initialVal = item[key]
+  //     })
+  //     return initialVal
+  //   }
+  //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
+  // }
+  // 获取动画shareVal初始值（prop style or 默认值）
+  // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
+  //   const originalVal = getOriginalStyleVal(key, isTransform)
+  //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
+  // }
   // 循环 animation actions 获取所有有动画的 style prop name
   function getAnimatedStyleKeys () {
     return (animation?.actions || []).reduce((keyMap, action) => {
       const { rules, transform } = action
       const ruleArr = [...rules.keys(), ...transform.keys()]
       ruleArr.forEach(key => {
+        // const originalVal = getOriginalStyleVal(key, isTransform(key))
+        // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
         if (!keyMap[key]) keyMap[key] = true
       })
       return keyMap
@@ -243,6 +352,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
         styles[key] = shareValMap[key].value
       }
       return styles
-    }, Object.assign({}, originalStyle) as ExtendedViewStyle)
+    }, {} as ExtendedViewStyle)
   })
 }

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

@@ -1,4 +1,5 @@
 import { useRef, useImperativeHandle, RefObject, ForwardedRef } from 'react'
+import { useAnimatedRef } from 'react-native-reanimated'
 
 type Obj = Record<string, any>