@mpxjs/webpack-plugin 2.10.17-beta.2 → 2.10.17-beta.4

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -1,289 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation, runOnJS } from 'react-native-reanimated';
-import { error, hasOwn, collectDataset } from '@mpxjs/utils';
-import { useRunOnJSCallback } from './utils';
-// 微信 timingFunction 和 RN Easing 对应关系
-const EasingKey = {
-    linear: Easing.linear,
-    ease: Easing.inOut(Easing.ease),
-    'ease-in': Easing.in(Easing.poly(3)),
-    'ease-in-out': Easing.inOut(Easing.poly(3)),
-    'ease-out': Easing.out(Easing.poly(3))
-    // 'step-start': '',
-    // 'step-end': ''
-};
-const TransformInitial = {
-    // 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 = 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';
-// transform
-const isTransform = (key) => Object.keys(TransformInitial).includes(key);
-// transform 数组转对象
-function getTransformObj(transforms) {
-    'worklet';
-    return transforms.reduce((transformObj, item) => {
-        return Object.assign(transformObj, item);
-    }, {});
-}
-export default function useAnimationHooks(props) {
-    const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props;
-    const enableStyleAnimation = enableAnimation || !!animation;
-    const enableAnimationRef = useRef(enableStyleAnimation);
-    if (enableAnimationRef.current !== enableStyleAnimation) {
-        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
-    }
-    if (!enableAnimationRef.current)
-        return { enableStyleAnimation: false };
-    // id 标识
-    const id = animation?.id || -1;
-    // 有动画样式的 style key
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const animatedStyleKeys = useSharedValue([]);
-    // 记录动画key的style样式值 没有的话设置为false
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const animatedKeys = useRef({});
-    // 记录上次style map
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const lastStyleRef = useRef({});
-    // ** 全量 style prop sharedValue
-    // 不能做增量的原因：
-    // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
-    // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const shareValMap = useMemo(() => {
-        return Object.keys(InitialValue).reduce((valMap, key) => {
-            const defaultVal = getInitialVal(key, isTransform(key));
-            valMap[key] = makeMutable(defaultVal);
-            return valMap;
-        }, {});
-    }, []);
-    // ** style更新同步
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        // style 更新后同步更新 lastStyleRef & shareValMap
-        updateStyleVal();
-    }, [originalStyle]);
-    // ** 获取动画样式prop & 驱动动画
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        if (id === -1)
-            return;
-        // 更新动画样式 key map
-        animatedKeys.current = getAnimatedStyleKeys();
-        const keys = Object.keys(animatedKeys.current);
-        animatedStyleKeys.value = formatAnimatedKeys([TransformOrigin, ...keys]);
-        // 驱动动画
-        createAnimation(keys);
-    }, [id]);
-    // ** 清空动画
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        return () => {
-            Object.values(shareValMap).forEach((value) => {
-                cancelAnimation(value);
-            });
-        };
-    }, []);
-    // 根据 animation action 创建&驱动动画
-    function createAnimation(animatedKeys = []) {
-        const actions = animation?.actions || [];
-        const sequence = {};
-        const lastValueMap = {};
-        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 = (finished) => {
-                '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 => {
-                const ruleV = isTransform(key) ? transform.get(key) : rules.get(key);
-                // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                const toVal = ruleV !== undefined
-                    ? ruleV
-                    : 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);
-            });
-        });
-    }
-    function withTimingCallback(finished, current, duration) {
-        if (!transitionend)
-            return;
-        const target = {
-            id: animation?.id || -1,
-            dataset: collectDataset(props),
-            offsetLeft: layoutRef?.current?.offsetLeft || 0,
-            offsetTop: layoutRef?.current?.offsetTop || 0
-        };
-        transitionend({
-            type: 'transitionend',
-            // elapsedTime 对齐wx 单位s
-            detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
-            target,
-            currentTarget: target,
-            timeStamp: Date.now()
-        });
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const runOnJSCallbackRef = useRef({
-        withTimingCallback
-    });
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
-    // 创建单个animation
-    function getAnimation({ key, value }, { delay, duration, easing }, callback) {
-        const animation = typeof callback === 'function'
-            ? withTiming(value, { duration, easing }, (finished, current) => {
-                callback(finished, current);
-                if (transitionend && finished) {
-                    runOnJS(runOnJSCallback)('withTimingCallback', finished, current, duration);
-                }
-            })
-            : withTiming(value, { duration, easing });
-        return delay ? withDelay(delay, animation) : animation;
-    }
-    // 获取样式初始值（prop style or 默认值）
-    function getInitialVal(key, isTransform = false) {
-        if (isTransform && Array.isArray(originalStyle.transform)) {
-            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) {
-        const animatedKeys = [];
-        const transforms = [];
-        keys.forEach(key => {
-            if (isTransform(key)) {
-                transforms.push(key);
-            }
-            else {
-                animatedKeys.push(key);
-            }
-        });
-        if (transforms.length)
-            animatedKeys.push(transforms);
-        return animatedKeys;
-    }
-    // 设置 lastShareValRef & shareValMap
-    function updateStyleVal() {
-        Object.entries(originalStyle).forEach(([key, value]) => {
-            if (key === 'transform') {
-                Object.entries(getTransformObj(value)).forEach(([key, value]) => {
-                    if (value !== lastStyleRef.current[key]) {
-                        lastStyleRef.current[key] = value;
-                        shareValMap[key].value = value;
-                    }
-                });
-            }
-            else if (hasOwn(shareValMap, key)) {
-                if (value !== lastStyleRef.current[key]) {
-                    lastStyleRef.current[key] = value;
-                    shareValMap[key].value = value;
-                }
-            }
-        });
-    }
-    // ** 生成动画样式
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const animationStyle = 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(originalStyle.transform || []);
-                key.forEach((transformKey) => {
-                    transformStyle[transformKey] = shareValMap[transformKey].value;
-                });
-                styles.transform = Object.entries(transformStyle).map(([key, value]) => {
-                    return { [key]: value };
-                });
-            }
-            else {
-                styles[key] = shareValMap[key].value;
-            }
-            return styles;
-        }, {});
-    });
-    return {
-        enableStyleAnimation: enableAnimationRef.current,
-        animationStyle
-    };
-}

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

@@ -1,320 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react'
-import type { MutableRefObject } from 'react'
-import type { NativeSyntheticEvent, TransformsStyle } from 'react-native'
-import {
-  Easing,
-  useSharedValue,
-  withTiming,
-  useAnimatedStyle,
-  withSequence,
-  withDelay,
-  makeMutable,
-  cancelAnimation,
-  runOnJS
-} from 'react-native-reanimated'
-import type { AnimationCallback, WithTimingConfig, SharedValue, AnimatableValue } from 'react-native-reanimated'
-import { error, hasOwn, collectDataset } from '@mpxjs/utils'
-import { useRunOnJSCallback } from './utils'
-import { ExtendedViewStyle } from './types/common'
-import type { _ViewProps } from './mpx-view'
-
-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.inOut(Easing.ease),
-  'ease-in': Easing.in(Easing.poly(3)),
-  'ease-in-out': Easing.inOut(Easing.poly(3)),
-  'ease-out': Easing.out(Easing.poly(3))
-  // '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'
-// transform
-const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
-
-// transform 数组转对象
-function getTransformObj (transforms: { [propName: string]: string | number }[]) {
-  'worklet'
-  return transforms.reduce((transformObj, item) => {
-    return Object.assign(transformObj, item)
-  }, {} as { [propName: string]: string | number })
-}
-
-export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
-  const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props
-  const enableStyleAnimation = enableAnimation || !!animation
-  const enableAnimationRef = useRef(enableStyleAnimation)
-  if (enableAnimationRef.current !== enableStyleAnimation) {
-    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
-  }
-
-  if (!enableAnimationRef.current) return { enableStyleAnimation: false }
-
-  // id 标识
-  const id = animation?.id || -1
-  // 有动画样式的 style key
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const animatedStyleKeys = useSharedValue([] as (string|string[])[])
-  // 记录动画key的style样式值 没有的话设置为false
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
-  // 记录上次style map
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
-  // ** 全量 style prop sharedValue
-  // 不能做增量的原因：
-  // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
-  // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  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> })
-  }, [])
-  // ** style更新同步
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    // style 更新后同步更新 lastStyleRef & shareValMap
-    updateStyleVal()
-  }, [originalStyle])
-  // ** 获取动画样式prop & 驱动动画
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    if (id === -1) return
-    // 更新动画样式 key map
-    animatedKeys.current = getAnimatedStyleKeys()
-    const keys = Object.keys(animatedKeys.current)
-    animatedStyleKeys.value = formatAnimatedKeys([TransformOrigin, ...keys])
-    // 驱动动画
-    createAnimation(keys)
-  }, [id])
-  // ** 清空动画
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    return () => {
-      Object.values(shareValMap).forEach((value) => {
-        cancelAnimation(value)
-      })
-    }
-  }, [])
-  // 根据 animation action 创建&驱动动画
-  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 => {
-        const ruleV = isTransform(key) ? transform.get(key) : rules.get(key)
-        // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-        const toVal = ruleV !== undefined
-          ? ruleV
-          : 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)
-      })
-    })
-  }
-  function withTimingCallback (finished?: boolean, current?: AnimatableValue, duration?: number) {
-    if (!transitionend) return
-    const target = {
-      id: animation?.id || -1,
-      dataset: collectDataset(props),
-      offsetLeft: layoutRef?.current?.offsetLeft || 0,
-      offsetTop: layoutRef?.current?.offsetTop || 0
-    }
-    transitionend({
-      type: 'transitionend',
-      // elapsedTime 对齐wx 单位s
-      detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
-      target,
-      currentTarget: target,
-      timeStamp: Date.now()
-    })
-  }
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const runOnJSCallbackRef = useRef({
-    withTimingCallback
-  })
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
-  // 创建单个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 }, (finished, current) => {
-        callback(finished, current)
-        if (transitionend && finished) {
-          runOnJS(runOnJSCallback)('withTimingCallback', finished, current, duration)
-        }
-      })
-      : withTiming(value, { duration, easing })
-    return delay ? withDelay(delay, animation) : animation
-  }
-  // 获取样式初始值（prop style or 默认值）
-  function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
-    if (isTransform && Array.isArray(originalStyle.transform)) {
-      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
-  }
-  // 设置 lastShareValRef & shareValMap
-  function updateStyleVal () {
-    Object.entries(originalStyle).forEach(([key, value]) => {
-      if (key === 'transform') {
-        Object.entries(getTransformObj(value)).forEach(([key, value]) => {
-          if (value !== lastStyleRef.current[key]) {
-            lastStyleRef.current[key] = value
-            shareValMap[key].value = value
-          }
-        })
-      } else if (hasOwn(shareValMap, key)) {
-        if (value !== lastStyleRef.current[key]) {
-          lastStyleRef.current[key] = value
-          shareValMap[key].value = value
-        }
-      }
-    })
-  }
-  // ** 生成动画样式
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const animationStyle = 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(originalStyle.transform || [])
-        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
-    }, {} as ExtendedViewStyle)
-  })
-
-  return {
-    enableStyleAnimation: enableAnimationRef.current,
-    animationStyle
-  }
-}