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

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
-  }
-}

package/lib/style-compiler/strip-conditional-loader.js

@@ -1,289 +0,0 @@
-const fs = require('fs/promises')
-const parseRequest = require('../utils/parse-request')
-const atImport = require('postcss-import')
-const { default: postcss } = require('postcss')
-
-class Node {
-  constructor(type, condition = null) {
-    this.type = type // 'If', 'ElseIf', 'Else' 或 'Text'
-    this.condition = condition // If 或 Elif 的条件
-    this.children = []
-    this.value = ''
-  }
-}
-
-// 提取 css string 为 token
-function tokenize(cssString) {
-  const regex = /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*\*\//g
-  const tokens = []
-  let lastIndex = 0
-  let match
-
-  while ((match = regex.exec(cssString)) !== null) {
-    // 如果 token 前有普通文本，生成文本 token
-    if (match.index > lastIndex) {
-      const text = cssString.substring(lastIndex, match.index)
-      tokens.push({ type: 'text', content: text })
-    }
-    // match[1] 为关键字：if, elif, else, endif
-    // match[2] 为条件（如果存在）
-    tokens.push({
-      type: match[1], // 'if'、'elif'、'else' 或 'endif'
-      condition: match[2] ? match[2].trim() : null
-    })
-    lastIndex = regex.lastIndex
-  }
-  // 处理结尾剩余的文本
-  if (lastIndex < cssString.length) {
-    const text = cssString.substring(lastIndex)
-    tokens.push({ type: 'text', content: text })
-  }
-  return tokens
-}
-
-// parse：将生成的 token 数组构造成嵌套的 AST
-function parse(cssString) {
-  const tokens = tokenize(cssString)
-  const ast = []
-  const nodeStack = []
-  let currentChildren = ast
-  tokens.forEach((token) => {
-    if (token.type === 'text') {
-      const node = new Node('Text')
-      node.value = token.content
-      currentChildren.push(node)
-    } else if (token.type === 'if') {
-      const node = new Node('If', token.condition)
-      currentChildren.push(node)
-      nodeStack.push(currentChildren)
-      currentChildren = node.children
-    } else if (token.type === 'elif') {
-      if (nodeStack.length === 0) {
-        throw new Error('[Mpx style error]: elif without a preceding if')
-      }
-      currentChildren = nodeStack[nodeStack.length - 1]
-      const node = new Node('ElseIf', token.condition)
-      currentChildren.push(node)
-      currentChildren = node.children
-    } else if (token.type === 'else') {
-      if (nodeStack.length === 0) {
-        throw new Error('[Mpx style error]: else without a preceding if')
-      }
-      currentChildren = nodeStack[nodeStack.length - 1]
-      const node = new Node('Else')
-      currentChildren.push(node)
-      currentChildren = node.children
-    } else if (token.type === 'endif') {
-      if (nodeStack.length > 0) {
-        currentChildren = nodeStack.pop()
-      }
-    }
-  })
-  return ast
-}
-
-function evaluateCondition(condition, defs) {
-  try {
-    const keys = Object.keys(defs)
-    const values = keys.map((key) => defs[key])
-    /* eslint-disable no-new-func */
-    const func = new Function(...keys, `return (${condition});`)
-    return func(...values)
-  } catch (e) {
-    console.error(`[Mpx style error]:Error evaluating condition: ${condition}`, e)
-    return false
-  }
-}
-
-function traverseAndEvaluate(ast, defs) {
-  let output = ''
-  let batchedIf = false
-  function traverse(nodes) {
-    for (const node of nodes) {
-      if (node.type === 'Text') {
-        output += node.value
-      } else if (node.type === 'If') {
-        // 直接判断 If 节点
-        batchedIf = false
-        if (evaluateCondition(node.condition, defs)) {
-          traverse(node.children)
-          batchedIf = true
-        }
-      } else if (node.type === 'ElseIf' && !batchedIf) {
-        if (evaluateCondition(node.condition, defs)) {
-          traverse(node.children)
-          batchedIf = true
-        }
-      } else if (node.type === 'Else' && !batchedIf) {
-        traverse(node.children)
-      }
-    }
-  }
-  traverse(ast)
-  return output
-}
-
-/**
- *
- * @param {string} content
- * @param {Record<string, any>} defs
- * @returns
- */
-function stripCondition(content, defs) {
-  const ast = parse(content)
-  const result = traverseAndEvaluate(ast, defs)
-  return result
-}
-
-/**
- * @typedef {Object} StripByPostcssOption
- * @property {string} lang 样式语法格式
- * @property {string} resourcePath 文件路径
- * @property {string} css 源文件
- * @property {Record<string, any>} defs 条件定义
- * @property {import('webpack').LoaderContext<any>['resolve']} resolve webpack resolve 方法
- */
-
-/**
- * @typedef {Object} AtImportConfig
- * @property {string} from 当前文件路径
- * @property {(filename: string) => Promise<string> | string;} load 加载文件内容的函数
- * @property {(id: string, base: string) => Promise<string | null> | string | null;} resolve 解析文件路径的函数
- */
-
-/**
- *
- * @param {Function} callback
- * @param {string} name
- * @returns
- */
-const shouldInstallWarning = (callback, name) => {
-  return () => {
-    try {
-      return callback()
-    } catch (error) {
-      throw new Error(
-        `[mpx-strip-conditional-loader]: ${name} is not installed, please install it first.\norginal Error: ${
-          error?.message ?? error.toString()
-        }`,
-        {
-          cause: error
-        }
-      )
-    }
-  }
-}
-/**
- *
- * @typedef {import('postcss').ProcessOptions} ProcessOptions
- * @typedef {import('postcss').Root} Root
- *
- * @type {Record<string, ProcessOptions['syntax']>}
- */
-const styleSyntaxProcesserMap = {
-  stylus: shouldInstallWarning(() => require('postcss-styl'), 'postcss-styl'),
-  less: shouldInstallWarning(() => require('postcss-less'), 'postcss-less'),
-  scss: shouldInstallWarning(() => require('postcss-scss'), 'postcss-scss')
-}
-
-/**
- * @param {StripByPostcssOption} options
- */
-async function stripByPostcss(options) {
-  const syntax = styleSyntaxProcesserMap[options.lang]?.()
-  const defs = options.defs ?? {}
-
-  function stripContentCondition(content) {
-    content = stripCondition(content, defs)
-
-    if (options.lang === 'stylus') {
-      content = content.replace(/\t/g, '  ')
-    }
-
-    return content
-  }
-
-  const afterConditionStrip = stripContentCondition(options.css, defs)
-
-    /**
-   * @type {import('postcss').AcceptedPlugin[]}
-   */
-  const plugins = [
-    atImport({
-      async load(filename) {
-        let content = await fs.readFile(filename, 'utf-8')
-        const processer = postcss(plugins)
-
-        content = stripContentCondition(content, defs)
-
-        const { css } = await processer.process(content, {
-          syntax,
-          from: filename,
-          to: options.resourcePath
-        })
-        return css
-      },
-      resolve: (id, base) => {
-        return new Promise((resolve, reject) => {
-          options.resolve(base, id, (err, res) => {
-            if (err) return reject(err)
-            if (typeof res !== 'string') {
-              return reject(
-                new Error(
-                  `[mpx-strip-conditional-loader]: Cannot resolve ${id} from ${base}`
-                )
-              )
-            }
-            resolve(res)
-          })
-        })
-      }
-    }),
-    {
-      // less/scss syntax 在 postcss 重新生成 css 后，`//` 注释后面不会保留换行，会和后续的 css 语句和注释连在一起，导致后续语法错误
-      postcssPlugin: 'mpx-strip-conditional-loader-append-command',
-      CommentExit(comment) {
-        comment.raws.right ??= ''
-
-        if (comment.raws.right.endsWith('\n')) {
-          return
-        }
-
-        comment.raws.right += '\n'
-      }
-    }
-  ]
-
-  const processer = postcss(plugins)
-  return processer.process(afterConditionStrip, {
-    from: options.resourcePath,
-    syntax
-  })
-}
-
-/**
- *
- * @this {import('webpack').LoaderContext<any>}
- * @param {string} css
- */
-module.exports = async function (css) {
-  this.cacheable()
-
-  const callback = this.async()
-
-  const mpx = this.getMpx()
-  const { resourcePath, queryObj } = parseRequest(this.resource)
-
-  const result = await stripByPostcss({
-    lang: queryObj.lang,
-    resourcePath,
-    css,
-    defs: mpx.defs,
-    resolve: this.resolve.bind(this)
-  })
-
-  callback(null, result.css, result.map)
-}
-
-module.exports.stripByPostcss = stripByPostcss
-module.exports.stripCondition = stripCondition