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

package/lib/runtime/components/ali/mpx-sticky-header.mpx

@@ -0,0 +1,212 @@
+<template>
+  <view class="mpx-sticky-header-container">
+    <view class="mpx-sticky-header" wx:ref="stickyHeader" wx:style="{{stickyHeaderStyle}}">
+      <slot></slot>
+    </view>
+    <view
+      class="mpx-sticky-header-placeholder"
+      id="{{stickyId}}"
+      wx:style="{{placeholderStyle}}"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import mpx, { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    properties: {
+      offsetTop: {
+        type: Number,
+        value: 0
+      },
+      scrollViewId: {
+        type: String,
+        value: ''
+      },
+      stickyId: {
+        type: String,
+        value: ''
+      },
+      padding: Array,
+      enablePolling: {
+        type: Boolean,
+        value: false
+      },
+      pollingDuration: {
+        type: Number,
+        value: 300
+      }
+    },
+    data: {
+      isStickOnTop: false,
+      scrollOffsetTop: 0,
+      headerHeight: 0,
+      stickyHeader: '',
+      headerTop: 0,
+      lastIntersectionRatio: -1,
+      pollingTimer: null
+    },
+    computed: {
+      paddingStyle() {
+        if (!this.padding || !Array.isArray(this.padding)) {
+          return ''
+        }
+        const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
+        return `padding: ${top}px ${right}px ${bottom}px ${left}px;`
+      },
+      stickyHeaderStyle() {
+        const baseStyle = this.isStickOnTop
+          ? `position: fixed;top: ${this.scrollOffsetTop + this.offsetTop}px;`
+          : ''
+        return baseStyle + this.paddingStyle
+      },
+      placeholderStyle() {
+        const position = this.isStickOnTop ? 'relative' : 'absolute'
+        return `position: ${position};height: ${this.headerHeight}px;`
+      }
+    },
+    ready() {
+      if (!this.scrollViewId) {
+        console.error('[mpx runtime error]: scroll-view-id is necessary property in ali environment')
+      }
+      if (!this.stickyId) {
+        console.error('[mpx runtime error]: sticky-id is necessary property in ali environment')
+      }
+      this.initStickyHeader()
+        // 启动轮询
+      if (this.enablePolling) {
+        this.startPolling()
+      }
+    },
+    methods: {
+      initStickyHeader() {
+        this.createSelectorQuery()
+          .select('.mpx-sticky-header')
+          .boundingClientRect()
+          .exec((rect = []) => {
+            this.headerHeight = rect[0]?.height || 0
+          })
+
+        mpx
+          .createSelectorQuery()
+          .select(`#${this.scrollViewId}`)
+          .boundingClientRect()
+          .exec((res) => {
+            if (!res) return
+            this.scrollOffsetTop = res[0]?.top || 0
+            this.stickyHeader = mpx.createIntersectionObserver({
+              thresholds: [0.1, 0.9]
+            })
+            this.initObserver()
+          })
+      },
+      initObserver() {
+        this.stickyHeader.relativeTo(`#${this.scrollViewId}`).observe(`#${this.stickyId}`, (res) => {
+          const { intersectionRatio, intersectionRect, relativeRect, boundingClientRect } = res
+          if (intersectionRatio < this.lastIntersectionRatio) {
+            // boundingClientRect.top < relativeRect.top fixed，否则默认布局
+            this.handleStickyStateChange(boundingClientRect.top < relativeRect.top)
+          } else if (intersectionRatio > this.lastIntersectionRatio) {
+            this.handleStickyStateChange(false)
+          }
+          this.lastIntersectionRatio = intersectionRatio
+        })
+      },
+      refresh() {
+        // 并行执行两个独立的查询
+        Promise.all([
+          // 查询1：组件内部元素
+          new Promise((resolve) => {
+            this.createSelectorQuery()
+              .select('.mpx-sticky-header')
+              .boundingClientRect()
+              .select('.mpx-sticky-header-placeholder')
+              .boundingClientRect()
+              .exec((results) => {
+                resolve(results)
+              })
+          }),
+          // 查询2：页面级scrollView
+          new Promise((resolve) => {
+            mpx.createSelectorQuery()
+              .select(`#${this.scrollViewId}`)
+              .boundingClientRect()
+              .select(`#${this.scrollViewId}`)
+              .scrollOffset()
+              .exec((results) => {
+                resolve(results)
+              })
+          })
+        ]).then(([componentResults, scrollResults]) => {
+          const [stickyHeaderRect, placeholderRect] = componentResults
+          const [scrollViewRect, scrollOffsetData] = scrollResults
+          
+          if (!stickyHeaderRect || !placeholderRect || !scrollViewRect || !scrollOffsetData) return
+
+          this.scrollOffsetTop = scrollViewRect.top || 0
+          this.headerHeight = stickyHeaderRect.height
+
+          // 模拟 offsetTop 计算：sticky placeholder具体顶部距离 - scrollView顶部 + scrollView滚动位置
+          // 必须用 placeholder 到顶部距离，用 sticky 如果刚好差值为 0， 区分不出是本身就在顶部还是 fixed 在顶部
+          this.headerTop = placeholderRect.top - this.scrollOffsetTop + scrollOffsetData.scrollTop
+          
+          this.handleStickyStateChange(scrollOffsetData.scrollTop > this.headerTop)
+        })
+      },
+      handleStickyStateChange(shouldStick) {
+        // 如果状态没有变化，直接返回
+        if (shouldStick === this.isStickOnTop) {
+          return
+        }
+        // 更新状态
+        this.isStickOnTop = shouldStick
+        // 触发事件
+        this.triggerEvent('stickontopchange', {
+          isStickOnTop: shouldStick,
+          id: this.stickyId
+        })
+      },
+       // 启动轮询
+      startPolling() {
+        if (this.pollingTimer) {
+          clearInterval(this.pollingTimer)
+        }
+        this.pollingTimer = setInterval(() => {
+          this.refresh()
+        }, this.pollingDuration)
+      },
+      // 停止轮询
+      stopPolling() {
+        if (this.pollingTimer) {
+          clearInterval(this.pollingTimer)
+          this.pollingTimer = null
+        }
+      }
+    },
+    detached() {
+      // 清理观察器
+      if (this.stickyHeader) {
+        this.stickyHeader.disconnect()
+      }
+       // 清理轮询定时器
+      if (this.pollingTimer) {
+        clearInterval(this.pollingTimer)
+        this.pollingTimer = null
+      }
+    }
+  })
+</script>
+<style lang="stylus" scoped>
+  .mpx-sticky-header-container
+    position relative
+  .mpx-sticky-header-placeholder
+    position absolute
+    left 0
+    right 0
+    top 0
+    pointer-events none
+  .mpx-sticky-header
+    width 100%
+    box-sizing border-box
+</style>

package/lib/runtime/components/ali/mpx-sticky-section.mpx

@@ -0,0 +1,17 @@
+<template>
+  <view class="mpx-sticky-section">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    
+  })
+</script>
+<style lang="stylus" scoped>
+  .mpx-sticky-section
+    position relative
+</style>

package/lib/runtime/components/react/animationHooks/index.ts

@@ -0,0 +1,75 @@
+import { error, collectDataset, hasOwn } from '@mpxjs/utils'
+import { useRef } from 'react'
+import useAnimationAPIHooks from './useAnimationAPIHooks'
+import useTransitionHooks from './useTransitionHooks'
+import type { AnimatableValue } from 'react-native-reanimated'
+import type { MutableRefObject } from 'react'
+import type { NativeSyntheticEvent } from 'react-native'
+import type { _ViewProps } from '../mpx-view'
+
+// 动画类型
+export type AnimationType = 'api'|'animation'|'transition'|'none'
+
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean | AnimationType, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
+  const { style: originalStyle = {}, enableAnimation, animation, transitionend, layoutRef } = props
+  // 记录动画类型
+  let animationType = ''
+  if (hasOwn(originalStyle, 'animation') || (hasOwn(originalStyle, 'animationName') && hasOwn(originalStyle, 'animationDuration'))) {
+    // css animation 只做检测提示
+    animationType = 'animation'
+  }
+  if (!!animation || enableAnimation === true) {
+    animationType = 'api'
+  }
+  // 优先级 css transition > API
+  if (hasOwn(originalStyle, 'transition') || (hasOwn(originalStyle, 'transitionProperty') && hasOwn(originalStyle, 'transitionDuration'))) {
+    animationType = 'transition'
+  }
+  // 优先以 enableAnimation 定义类型为准
+  if (enableAnimation === 'api' || enableAnimation === 'transition' || enableAnimation === 'animation') {
+    animationType = enableAnimation
+  }
+  const animationTypeRef = useRef(animationType)
+  if (animationType! && animationTypeRef.current !== animationType) {
+    // 允许 API、CssTransition 到 none，不允许 API、CssTransition 互切，不允许 none 到 API、CssTransition
+    error('[Mpx runtime error]: The animation type should be stable in the component lifecycle, or you can set animation type with [enable-animation].')
+  }
+  if (animationType === 'animation') {
+    // 暂不支持 CssAnimation 提示
+    error('[Mpx runtime error]: CSS animation is not supported yet')
+    return { enableStyleAnimation: false }
+  }
+  if (!animationTypeRef.current) return { enableStyleAnimation: false }
+
+  const hooksProps = { style: originalStyle }
+  if (transitionend && typeof transitionend === 'function') {
+    function withTimingCallback (finished?: boolean, current?: AnimatableValue, duration?: number) {
+      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()
+      })
+    }
+    Object.assign(hooksProps, { transitionend: withTimingCallback })
+  }
+  if (animationTypeRef.current === 'api') {
+    Object.assign(hooksProps, { animation })
+  }
+  return {
+    enableStyleAnimation: !!animationTypeRef.current,
+    animationStyle: animationTypeRef.current === 'api'
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      ? useAnimationAPIHooks(hooksProps)
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      : useTransitionHooks(hooksProps)
+  }
+}

package/lib/runtime/components/react/animationHooks/useAnimationAPIHooks.ts

@@ -0,0 +1,197 @@
+import { useMemo, useRef, useEffect } from 'react'
+import { error, hasOwn } from '@mpxjs/utils'
+import {
+  Easing,
+  withSequence,
+  makeMutable,
+  runOnJS,
+  useSharedValue,
+  useAnimatedStyle,
+  cancelAnimation
+} from 'react-native-reanimated'
+import {
+  easingKey,
+  animationAPIInitialValue,
+  percentExp,
+  isTransform,
+  getInitialVal,
+  getAnimation,
+  getTransformObj,
+  formatAnimatedKeys
+} from './utils'
+import { useRunOnJSCallback } from '../utils'
+import type { NativeSyntheticEvent, TransformsStyle } from 'react-native'
+import type { AnimationCallback, SharedValue, AnimatableValue } from 'react-native-reanimated'
+import type { ExtendedViewStyle } from '../types/common'
+import type { AnimationHooksPropsType } from './utils'
+
+export default function useAnimationAPIHooks<T, P> (props: AnimationHooksPropsType) {
+  // console.log(`useAnimationAPIHooks, props=`, props)
+  const { style: originalStyle = {}, animation, transitionend } = props
+  // style变更标识(首次render不执行)
+  const animationDeps = useRef(-1)
+  // animation API 使用 animation.id 为依赖
+  if (animation?.id) {
+    animationDeps.current = animation.id
+  }
+  // 有动画样式的 style key(useAnimatedStyle使用)
+  const animatedStyleKeys = useSharedValue([] as (string|string[])[])
+  // 记录需要执行动画的 propName
+  const animatedKeys = useRef([] as string[])
+  // 记录上次style map
+  const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
+  // ** 全量 style prop sharedValue
+  const shareValMap = useMemo(() => {
+    return Object.keys(animationAPIInitialValue).reduce((valMap, key) => {
+      const defaultVal = getInitialVal(originalStyle, key)
+      valMap[key] = makeMutable(defaultVal)
+      return valMap
+    }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
+  }, [])
+  const runOnJSCallbackRef = useRef({})
+  if (transitionend) {
+    runOnJSCallbackRef.current = {
+      transitionend
+    }
+  }
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+  // 设置 lastShareValRef & shareValMap
+  function updateStyleVal () {
+    Object.keys(shareValMap).forEach(key => {
+      let value = originalStyle[key]
+      if (isTransform(key)) {
+        value = originalStyle.transform
+        Object.entries(getTransformObj(value)).forEach(([key, value]) => {
+          if (value !== lastStyleRef.current[key]) {
+            lastStyleRef.current[key] = value
+            shareValMap[key].value = value
+          }
+        })
+      } else {
+        if (value !== lastStyleRef.current[key]) {
+          lastStyleRef.current[key] = value
+          shareValMap[key].value = 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 = timingFunction ? easingKey[timingFunction] : Easing.inOut(Easing.quad)
+      let needSetCallback = true
+      const callback: AnimationCallback = (finished?: boolean, current?: AnimatableValue) => {
+        'worklet'
+        // 动画结束后设置下一次transformOrigin
+        if (finished) {
+          if (index < actions.length - 1) {
+            const transformOrigin = actions[index + 1].animatedOption?.transformOrigin
+            transformOrigin && (shareValMap.transformOrigin.value = transformOrigin)
+          }
+          transitionend && runOnJS(runOnJSCallback)('transitionend', finished, current, duration)
+        }
+      }
+      if (index === 0 && transformOrigin) {
+        // 设置当次中心
+        shareValMap.transformOrigin.value = transformOrigin
+      }
+      // 添加每个key的多次step动画
+      animatedKeys.forEach(key => {
+        const shareVal = shareValMap[key].value
+        const ruleV = isTransform(key) ? transform.get(key) : rules.get(key)
+        // color 设置为 1
+        // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
+        let toVal = ruleV !== undefined
+          ? ruleV
+          : index > 0
+            ? lastValueMap[key]
+            : shareVal
+        if (percentExp.test(`${toVal}`) && !percentExp.test(shareVal as string) && !isNaN(+shareVal)) {
+          // 获取到的toVal为百分比格式化shareValMap为百分比
+          shareValMap[key].value = `${shareVal as number * 100}%`
+        } else if (percentExp.test(shareVal as string) && !percentExp.test(toVal as string) && !isNaN(+toVal)) {
+          // 初始值为百分比则格式化toVal为百分比
+          toVal = `${toVal as number * 100}%`
+        } else if (typeof toVal !== typeof shareVal) {
+          // 动画起始值和终态值类型不一致报错提示一下
+          error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
+        }
+        const animation = (toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal)) ? toVal : getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? callback : 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 = animations.length > 1 ? withSequence(...animations) : animations[0]
+      })
+    })
+  }
+  // 循环 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 => {
+        keyMap.push(key)
+      })
+      // console.log('getAnimatedStyleKeys keyMap=', keyMap)
+      return keyMap
+    }, [] as string[])
+  }
+  // 获取动画样式&驱动动画
+  function startAnimation () {
+    // 更新动画样式 key map
+    animatedKeys.current = getAnimatedStyleKeys()
+    animatedStyleKeys.value = formatAnimatedKeys(['transformOrigin', ...animatedKeys.current])
+    // 驱动动画
+    createAnimation(animatedKeys.current)
+  }
+  // ** style 更新
+  useEffect(() => {
+    // animation api style 更新同步更新 shareVal（默认）
+    updateStyleVal()
+  }, [originalStyle])
+  // ** 获取动画样式prop & 驱动动画
+  useEffect(() => {
+    if (animationDeps.current <= 0) return
+    startAnimation()
+  }, [animationDeps.current])
+  // ** 清空动画
+  useEffect(() => {
+    return () => {
+      Object.values(shareValMap).forEach((value) => {
+        cancelAnimation(value)
+      })
+    }
+  }, [])
+  // ** 生成动画样式
+  return useAnimatedStyle(() => {
+    // console.info(`useAnimatedStyle styles=`, originalStyle)
+    return animatedStyleKeys.value.reduce((styles, key) => {
+      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
+      }
+      // console.log('animationStyle', styles)
+      return styles
+    }, {} as ExtendedViewStyle)
+  })
+}