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

package/lib/react/style-helper.js

@@ -3,31 +3,70 @@ const selectorParser = require('postcss-selector-parser')
 const { MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
-const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
-const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const parseValues = require('../utils/string').parseValues
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh|px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error }) {
-  const classMap = ctorType === 'page' ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1 } } : {}
+function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueName, warn, error }) {
+  const classMap = ctorType === 'page'
+      ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
+      : {}
 
   const root = postcss.parse(content, {
     from: filename
   })
 
   function formatValue (value) {
-    let matched
     let needStringify = true
-    if ((matched = numberRegExp.exec(value))) {
-      value = matched[1]
-      needStringify = false
-    } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) {
-      value = `global.__formatValue(${JSON.stringify(value)})`
+    const matched = unitRegExp.exec(value)
+    if (matched) {
+      if (!matched[2] || matched[2] === 'px') {
+        value = matched[1]
+        needStringify = false
+      } else {
+        value = `${formatValueName}(${+matched[1]}, '${matched[2]}')`
+        needStringify = false
+      }
+    }
+    if (hairlineRegExp.test(value)) {
+      value = `${formatValueName}(${JSON.stringify(value)}, 'hairlineWidth')`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
   }
 
+  function getMediaOptions (params) {
+    return parseValues(params).reduce((option, item) => {
+      if (['all', 'print'].includes(item)) {
+        if (item === 'media') {
+          option.type = item
+        } else {
+          error('not supported ', item)
+          return option
+        }
+      }
+      if (['not', 'only', 'or', ','].includes(item)) {
+        if (item === 'and') {
+          option.logical_operators = item
+        } else {
+          error('not supported ', item)
+          return option
+        }
+      }
+      const bracketsExp = /\((.+?)\)/
+      if (bracketsExp.test(item)) {
+        const range = parseValues((item.match(bracketsExp)?.[1] || ''), ':')
+        if (range.length < 2) {
+          return option
+        } else {
+          option[dash2hump(range[0])] = +formatValue(range[1])
+        }
+      }
+      return option
+    }, {})
+  }
+
   const rulesRunner = getRulesRunner({
     mode,
     srcMode,
@@ -41,13 +80,15 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
   root.walkAtRules(rule => {
     if (rule.name !== 'media') {
       warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`)
+      // 删除不支持的 AtRule，防止其影响后续解析
+      rule.remove()
     }
   })
 
   root.walkRules(rule => {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {
-      if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
+      if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
       let newData = rulesRunner({ prop, value, selector: rule.selector })
       if (!newData) return
       if (!Array.isArray(newData)) {
@@ -79,7 +120,8 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     })
 
     const classMapKeys = []
-
+    const options = getMediaOptions(rule.parent.params || '')
+    const isMedia = options.maxWidth || options.minWidth
     selectorParser(selectors => {
       selectors.each(selector => {
         if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
@@ -93,7 +135,28 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     if (classMapKeys.length) {
       classMapKeys.forEach((key) => {
         if (Object.keys(classMapValue).length) {
-          classMap[key] = Object.assign(classMap[key] || {}, classMapValue)
+          let _default = classMap[key]?._default
+          let _media = classMap[key]?._media
+          if (isMedia) {
+            // 当前是媒体查询
+            _default = _default || {}
+            _media = _media || []
+            _media.push({
+              options,
+              value: classMapValue
+            })
+            classMap[key] = {
+              _media,
+              _default
+            }
+          } else if (_default) {
+            // 已有媒体查询数据，此次非媒体查询
+            Object.assign(_default, classMapValue)
+          } else {
+            // 无媒体查询
+            const val = classMap[key] || {}
+            classMap[key] = Object.assign(val, classMapValue)
+          }
         }
       })
     }

package/lib/resolver/AddModePlugin.js

@@ -24,6 +24,12 @@ module.exports = class AddModePlugin {
       if (request.mode || request.env) {
         return callback()
       }
+
+      const queryObj = parseQuery(request.query || '?')
+      if (queryObj.mode) {
+        return callback()
+      }
+
       const obj = {
         mode
       }
@@ -37,23 +43,32 @@ module.exports = class AddModePlugin {
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
 
-      const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
-      if (!implicitMode) queryObj.mode = mode
-      queryObj.infix = `${queryInfix || ''}.${mode}`
 
       // 如果已经确认是mode后缀的文件，添加query与mode后直接返回
       if (modePattern.test(path.basename(resourcePath))) {
-        request.query = stringifyQuery(queryObj)
-        request.mode = obj.mode
+        // 已经被resolved到对应mode的文件，避免重复添加mode
+        const isResolved = (implicitMode || queryObj.mode === mode) && modePattern.test(queryObj.infix)
+        if (!isResolved) {
+          queryObj.infix = `${queryInfix || ''}.${mode}`
+          if (!implicitMode) queryObj.mode = mode
+          request.query = stringifyQuery(queryObj)
+          request.mode = obj.mode
+        }
         return callback()
       } else if (defaultMode && defaultModePattern.test(path.basename(resourcePath))) {
-        queryObj.infix = `${queryInfix || ''}.${defaultMode}`
-        request.query = stringifyQuery(queryObj)
-        request.mode = obj.mode
+        const isResolved = (implicitMode || queryObj.mode === mode) && defaultModePattern.test(queryObj.infix)
+        if (!isResolved) {
+          queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+          if (!implicitMode) queryObj.mode = mode
+          request.query = stringifyQuery(queryObj)
+          request.mode = obj.mode
+        }
         return callback()
       }
 
+      if (!implicitMode) queryObj.mode = mode
+      queryObj.infix = `${queryInfix || ''}.${mode}`
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)

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,198 @@
+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`)
+        }
+        // Todo 对齐wx
+        const animation = 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)
+  })
+}