@mpxjs/webpack-plugin 2.9.65 → 2.9.66

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/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/utils.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef, ReactNode, ReactElement, FunctionComponent, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+import { useEffect, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
 import { LayoutChangeEvent, TextStyle } from 'react-native'
 import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
 import { VarContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
+import type { ExtendedFunctionComponent } from './types/common'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -96,15 +97,16 @@ export const getRestProps = (transferProps: any = {}, originProps: any = {}, del
 
 export function isText (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
-    const displayName = (ele.type as FunctionComponent)?.displayName
-    return displayName === 'mpx-text' || displayName === 'Text'
+    const displayName = (ele.type as ExtendedFunctionComponent)?.displayName
+    const isCustomText = (ele.type as ExtendedFunctionComponent)?.isCustomText
+    return displayName === 'mpx-text' || displayName === 'Text' || !!isCustomText
   }
   return false
 }
 
 export function isEmbedded (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
-    const displayName = (ele.type as FunctionComponent)?.displayName || ''
+    const displayName = (ele.type as ExtendedFunctionComponent)?.displayName || ''
     return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName)
   }
   return false

package/lib/template-compiler/compiler.js

@@ -101,6 +101,7 @@ let moduleId
 let isNative
 let hasScoped
 let hasVirtualHost
+let isCustomText
 let runtimeCompile
 let rulesRunner
 let currentEl
@@ -617,6 +618,7 @@ function parse (template, options) {
   isNative = options.isNative
   hasScoped = options.hasScoped
   hasVirtualHost = options.hasVirtualHost
+  isCustomText = options.isCustomText
   filePath = options.filePath
   i18n = options.i18n
   runtimeCompile = options.runtimeCompile
@@ -661,6 +663,14 @@ function parse (template, options) {
   const stack = []
   let root
   const meta = {}
+  if (isCustomText) {
+    meta.options = meta.options || {}
+    meta.options.isCustomText = true
+  }
+  if (hasVirtualHost) {
+    meta.options = meta.options || {}
+    meta.options.virtualHost = true
+  }
   let currentParent
   let multiRootError
   // 用于记录模板用到的组件，匹配引用组件，看是否有冗余
@@ -736,23 +746,22 @@ function parse (template, options) {
       const children = currentParent.children
       if (currentParent.tag !== 'text') {
         text = text.trim()
+      } else {
+        text = text.trim() ? text : ''
       }
-
       if ((!config[mode].wxs || currentParent.tag !== config[mode].wxs.tag) && options.decodeHTMLText) {
         text = he.decode(text)
       }
 
       if (text) {
-        if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
-          const el = {
-            type: 3,
-            // 支付宝小程序模板解析中未对Mustache进行特殊处理，无论是否decode都会解析失败，无解，只能支付宝侧进行修复
-            text: decodeInMustache(text),
-            parent: currentParent
-          }
-          children.push(el)
-          runtimeCompile ? processTextDynamic(el) : processText(el)
+        const el = {
+          type: 3,
+          // 支付宝小程序模板解析中未对Mustache进行特殊处理，无论是否decode都会解析失败，无解，只能支付宝侧进行修复
+          text: decodeInMustache(text),
+          parent: currentParent
         }
+        children.push(el)
+        runtimeCompile ? processTextDynamic(el) : processText(el)
       }
     },
     comment: function comment (text) {
@@ -2311,11 +2320,6 @@ function postProcessAliComponentRootView (el, options, meta) {
 function getVirtualHostRoot (options, meta) {
   if (srcMode === 'wx') {
     if (ctorType === 'component') {
-      if (mode === 'wx' && hasVirtualHost) {
-        // wx组件注入virtualHost配置
-        meta.options = meta.options || {}
-        meta.options.virtualHost = true
-      }
       if (isWeb(mode) && !hasVirtualHost) {
         // ali组件根节点实体化
         const rootView = createASTElement('view', [
@@ -2332,7 +2336,8 @@ function getVirtualHostRoot (options, meta) {
         return rootView
       }
       if (isReact(mode) && !hasVirtualHost) {
-        const rootView = createASTElement('view', [
+        const tagName = isCustomText ? 'text' : 'view'
+        const rootView = createASTElement(tagName, [
           {
             name: 'class',
             value: `${MPX_ROOT_VIEW} host-${moduleId}`
@@ -2526,7 +2531,7 @@ function processDuplicateAttrsList (el) {
 }
 
 // 处理wxs注入逻辑
-function processInjectWxs (el, meta, options) {
+function processInjectWxs (el, meta) {
   if (el.injectWxsProps && el.injectWxsProps.length) {
     el.injectWxsProps.forEach((injectWxsProp) => {
       const { injectWxsPath, injectWxsModuleName } = injectWxsProp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.65",
+  "version": "2.9.66",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -82,13 +82,14 @@
   },
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
-    "@mpxjs/api-proxy": "^2.9.65",
+    "@mpxjs/api-proxy": "^2.9.66",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
     "react-native": "^0.74.5",
     "react-native-gesture-handler": "^2.18.1",
     "react-native-linear-gradient": "^2.8.3",
+    "react-native-reanimated": "^3.15.2",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1"
@@ -96,5 +97,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "24efa90e90b4d42c285ca61739cb9e4d0696976c"
+  "gitHead": "ff9eb06a3be28538870823cebf813ed56f39bbd7"
 }