@mpxjs/webpack-plugin 2.9.64 → 2.9.66

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

@@ -7,6 +7,9 @@
 import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent, Text } from 'react-native'
 import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, cloneElement } from 'react'
 import useInnerProps from './getInnerListeners'
+import Animated from 'react-native-reanimated'
+import useAnimationHooks from './useAnimationHooks'
+import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils'
@@ -14,6 +17,7 @@ import LinearGradient from 'react-native-linear-gradient'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
+  animation?: AnimationProp
   children?: ReactNode | ReactNode[]
   'hover-style'?: ExtendedViewStyle
   'hover-start-time'?: number
@@ -24,6 +28,7 @@ export interface _ViewProps extends ViewProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
+  'enable-animation'?: boolean
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
@@ -114,6 +119,17 @@ const applyHandlers = (handlers: Handler[], args: any[]) => {
   }
 }
 
+const normalizeStyle = (style: ExtendedViewStyle = {}) => {
+  ['backgroundSize', 'backgroundPosition'].forEach(name => {
+    if (style[name] && typeof style[name] === 'string') {
+      if (style[name].trim()) {
+        style[name] = style[name].split(' ')
+      }
+    }
+  })
+  return style
+}
+
 const isPercent = (val: string | number | undefined): val is string => typeof val === 'string' && PERCENT_REGEX.test(val)
 
 const isBackgroundSizeKeyword = (val: string | number): boolean => typeof val === 'string' && /^cover|contain$/.test(val)
@@ -501,7 +517,7 @@ function normalizeBackgroundSize (backgroundSize: Exclude<ExtendedViewStyle['bac
 }
 
 function preParseImage (imageStyle?: ExtendedViewStyle) {
-  const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {}
+  const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {}
   const { type, src, linearInfo } = parseBgImage(backgroundImage)
 
   return {
@@ -589,8 +605,8 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
         }
         setImageSizeWidth(sizeInfo.current.width)
         setImageSizeHeight(sizeInfo.current.height)
-        setShow(true)
       }
+      setShow(true)
     } else if (sizeInfo.current) {
       setLayoutInfoWidth(width)
       setLayoutInfoHeight(height)
@@ -600,7 +616,7 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
     }
   }
 
-  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden' }}>
+  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} /> }
     {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
   </View>
@@ -639,9 +655,11 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'enable-background': enableBackground,
+    'enable-animation': enableAnimation,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
-    'parent-height': parentHeight
+    'parent-height': parentHeight,
+    animation
   } = props
 
   const [isHover, setIsHover] = useState(false)
@@ -686,7 +704,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
   }
 
-  const { nodeRef } = useNodesRef<View, _ViewProps>(props, ref, {
+  const nodeRef = useRef(null)
+  useNodesRef<View, _ViewProps>(props, ref, nodeRef, {
     defaultStyle
   })
 
@@ -735,9 +754,10 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutProps
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
+  const viewStyle = Object.assign({}, innerStyle, layoutStyle)
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    style: { ...innerStyle, ...layoutStyle },
+    style: viewStyle,
     ...layoutProps,
     ...(hoverStyle && {
       bindtouchstart: onTouchStart,
@@ -752,25 +772,37 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutRef
   })
 
-  return (
-    <View
+  enableAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableAnimation)
+  if (enableAnimationRef.current !== enableAnimation) {
+    throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+  const finalStyle = enableAnimation
+    ? useAnimationHooks({
+      animation,
+      style: viewStyle
+    })
+    : viewStyle
+  const childNode = wrapWithChildren(props, {
+    hasVarDec,
+    enableBackground: enableBackgroundRef.current,
+    textStyle,
+    backgroundStyle,
+    varContext: varContextRef.current,
+    textProps
+  })
+  return animation?.actions?.length
+    ? (<Animated.View
       {...innerProps}
+      style={finalStyle}
     >
-      {
-        wrapWithChildren(
-          props,
-          {
-            hasVarDec,
-            enableBackground: enableBackgroundRef.current,
-            textStyle,
-            backgroundStyle,
-            varContext: varContextRef.current,
-            textProps
-          }
-        )
-      }
-    </View>
-  )
+      {childNode}
+    </Animated.View>)
+    : (<View
+      {...innerProps}
+    >
+      {childNode}
+    </View>)
 })
 
 _View.displayName = 'mpx-view'

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

@@ -1,4 +1,4 @@
-import { forwardRef, JSX, useEffect } from 'react'
+import { forwardRef, JSX, useEffect, useRef } from 'react'
 import { noop, warn } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
@@ -47,7 +47,7 @@ interface FormRef {
 }
 
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
-  const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
+  const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }
@@ -59,7 +59,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     bottom: 0 as number
   }
 
-  const { nodeRef: webViewRef } = useNodesRef<WebView, WebViewProps>(props, ref, {
+  const webViewRef = useRef<WebView>(null)
+  useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     defaultStyle: defaultWebViewStyle
   })
 

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

@@ -1,7 +1,8 @@
-import { ViewStyle, ImageResizeMode } from 'react-native'
+import { ViewStyle } from 'react-native'
+import { FunctionComponent } from 'react'
 
 type NumberVal = number | `${number}%`
-type backgroundPositionList = [ 'left'| 'right', NumberVal, 'top' | 'bottom', NumberVal ] | []
+type backgroundPositionList = ['left' | 'right', NumberVal, 'top' | 'bottom', NumberVal] | []
 
 export type ExtendedViewStyle = ViewStyle & {
   backgroundImage?: string
@@ -9,4 +10,9 @@ export type ExtendedViewStyle = ViewStyle & {
   borderRadius?: string | number
   backgroundPosition?: backgroundPositionList
   [key: string]: any
+  transform?: {[key: string]: number | string}[]
+}
+
+export type ExtendedFunctionComponent = FunctionComponent & {
+  isCustomText?: boolean
 }

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

@@ -26,6 +26,16 @@ 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 getFocusedNavigation (): {
+    insets: {
+      top: number
+      bottom: number
+      left: number
+      right: number
+    }
+  } | undefined
 }
 
-declare let global: Record<string, any>
+declare let global: {
+  __formatValue (value: string): string | number
+} & Record<string, any>

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

@@ -0,0 +1,248 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { TransformsStyle } from 'react-native'
+import {
+  Easing,
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  withSequence,
+  withDelay,
+  makeMutable,
+  cancelAnimation,
+  SharedValue,
+  WithTimingConfig,
+  AnimationCallback
+} from 'react-native-reanimated'
+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
+  useNativeDriver: boolean
+  timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-in-out'| 'ease-out'
+  transformOrigin: string
+}
+type ExtendWithTimingConfig = WithTimingConfig & {
+  delay: number
+}
+export type AnimationStepItem = {
+  animatedOption: AnimatedOption
+  rules: Map<string, number | string>
+  transform: Map<string, number>
+}
+export type AnimationProp = {
+  id: number,
+  actions: AnimationStepItem[]
+}
+
+// 微信 timingFunction 和 RN Easing 对应关系
+const EasingKey = {
+  linear: Easing.linear,
+  ease: Easing.ease,
+  'ease-in': Easing.in(Easing.ease),
+  'ease-in-out': Easing.inOut(Easing.ease),
+  'ease-out': Easing.out(Easing.ease)
+  // 'step-start': '',
+  // 'step-end': ''
+}
+const TransformInitial: ExtendedViewStyle = {
+  // matrix: 0,
+  // matrix3d: 0,
+  rotate: '0deg',
+  rotateX: '0deg',
+  rotateY: '0deg',
+  rotateZ: '0deg',
+  // rotate3d:[0,0,0]
+  scale: 1,
+  // scale3d: [1, 1, 1],
+  scaleX: 1,
+  scaleY: 1,
+  // scaleZ: 1,
+  skew: 0,
+  skewX: '0deg',
+  skewY: '0deg',
+  translate: 0,
+  // translate3d: 0,
+  translateX: 0,
+  translateY: 0
+  // translateZ: 0,
+}
+// 动画默认初始值
+const InitialValue: ExtendedViewStyle = Object.assign({
+  opacity: 1,
+  backgroundColor: 'transparent',
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  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)
+
+export default function useAnimationHooks<T, P> (props: _ViewProps) {
+  const { style: originalStyle = {}, animation } = props
+  // id 标识
+  const id = animation?.id || -1
+  // 有动画样式的 style key
+  const animatedStyleKeys = useSharedValue([] as (string|string[])[])
+  const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: Boolean})
+  // ** 全量 style prop sharedValue
+  // 不能做增量的原因：
+  // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
+  // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+  const shareValMap = useMemo(() => {
+    return Object.keys(InitialValue).reduce((valMap, key) => {
+      const defaultVal = getInitialVal(key, isTransform(key))
+      valMap[key] = makeMutable(defaultVal)
+      return valMap
+    }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
+  }, [])
+  // ** 获取动画样式prop & 驱动动画
+  useEffect(() => {
+    if (id === -1) return
+    // 更新动画样式 key map
+    animatedKeys.current = getAnimatedStyleKeys()
+    const keys = Object.keys(animatedKeys.current)
+    animatedStyleKeys.value = formatAnimatedKeys([TransformOrigin, ...keys])
+    // 驱动动画
+    createAnimation(keys)
+  }, [id])
+  // ** 清空动画
+  useEffect(() => {
+    return () => {
+      Object.values(shareValMap).forEach((value) => {
+        cancelAnimation(value)
+      })
+    }
+  }, [])
+  // 根据 animation action 创建&驱动动画 key => wi
+  function createAnimation (animatedKeys: string[] = []) {
+    const actions = animation?.actions || []
+    const sequence = {} as { [propName: keyof ExtendedViewStyle]: (string|number)[] }
+    const lastValueMap = {} as { [propName: keyof ExtendedViewStyle]: string|number }
+    actions.forEach(({ animatedOption, rules, transform }, index) => {
+      const { delay, duration, timingFunction, transformOrigin } = animatedOption
+      const easing = EasingKey[timingFunction] || Easing.inOut(Easing.quad)
+      let needSetCallback = true
+      const setTransformOrigin: AnimationCallback = (finished: boolean) => {
+        'worklet'
+        // 动画结束后设置下一次transformOrigin
+        if (finished) {
+          if (index < actions.length - 1) {
+            const transformOrigin = actions[index + 1].animatedOption?.transformOrigin
+            transformOrigin && (shareValMap[TransformOrigin].value = transformOrigin)
+          }
+        }
+      }
+      if (index === 0) {
+        // 设置当次中心
+        shareValMap[TransformOrigin].value = transformOrigin
+      }
+      // 添加每个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)
+        needSetCallback = false
+        if (!sequence[key]) {
+          sequence[key] = [animation]
+        } else {
+          sequence[key].push(animation)
+        }
+        // 更新一下 lastValueMap
+        lastValueMap[key] = toVal
+      })
+      // 赋值驱动动画
+      animatedKeys.forEach((key) => {
+        const animations = sequence[key]
+        shareValMap[key].value = withSequence(...animations)
+      })
+    })
+  }
+  // 创建单个animation
+  function getAnimation ({ key, value }: { key: string, value: string|number }, { delay, duration, easing }: ExtendWithTimingConfig, callback?: AnimationCallback) {
+    const animation = typeof callback === 'function'
+      ? withTiming(value, { duration, easing }, callback)
+      : 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) {
+      let initialVal = 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]
+  }
+  // 循环 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 => {
+        if (!keyMap[key]) keyMap[key] = true
+      })
+      return keyMap
+    }, animatedKeys.current)
+  }
+  // animated key transform 格式化
+  function formatAnimatedKeys (keys: string[] = []) {
+    const animatedKeys = [] as (string|string[])[]
+    const transforms = [] as string[]
+    keys.forEach(key => {
+      if (isTransform(key)) {
+        transforms.push(key)
+      } else {
+        animatedKeys.push(key)
+      }
+    })
+    if (transforms.length) animatedKeys.push(transforms)
+    return animatedKeys
+  }
+  // transform 数组转对象
+  function getTransformObj () {
+    'worklet'
+    const transforms = originalStyle.transform || []
+    return transforms.reduce((transformObj, item) => {
+      return Object.assign(transformObj, item)
+    }, {} as { [propName: string]: string | number })
+  }
+  // ** 生成动画样式
+  return useAnimatedStyle(() => {
+    // console.info(`useAnimatedStyle styles=`, originalStyle)
+    return animatedStyleKeys.value.reduce((styles, key) => {
+      // console.info('getAnimationStyles', key, shareValMap[key].value)
+      if (Array.isArray(key)) {
+        const transformStyle = getTransformObj()
+        key.forEach((transformKey) => {
+          transformStyle[transformKey] = shareValMap[transformKey].value
+        })
+        styles.transform = Object.entries(transformStyle).map(([key, value]) => {
+          return { [key]: value }
+        }) as Extract<'transform', TransformsStyle>
+      } else {
+        styles[key] = shareValMap[key].value
+      }
+      return styles
+    }, Object.assign({}, originalStyle) as ExtendedViewStyle)
+  })
+}

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

@@ -10,8 +10,7 @@ export type HandlerRef<T, P> = {
   }
 }
 
-export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {}) {
-  const nodeRef = useRef<T>(null)
+export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance:Obj = {}) {
   const _props = useRef<P | null>(null)
   _props.current = props
 
@@ -26,8 +25,4 @@ export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRe
       }
     }
   })
-
-  return {
-    nodeRef
-  }
 }