@mpxjs/webpack-plugin 2.10.2 → 2.10.3

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

@@ -13,7 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
-import { error } from '@mpxjs/utils'
+import { error, hasOwn } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -50,20 +50,20 @@ const EasingKey = {
 const TransformInitial: ExtendedViewStyle = {
   // matrix: 0,
   // matrix3d: 0,
-  rotate: '0deg',
+  // rotate: '0deg',
   rotateX: '0deg',
   rotateY: '0deg',
   rotateZ: '0deg',
   // rotate3d:[0,0,0]
-  scale: 1,
+  // scale: 1,
   // scale3d: [1, 1, 1],
   scaleX: 1,
   scaleY: 1,
   // scaleZ: 1,
-  skew: 0,
+  // skew: 0,
   skewX: '0deg',
   skewY: '0deg',
-  translate: 0,
+  // translate: 0,
   // translate3d: 0,
   translateX: 0,
   translateY: 0
@@ -127,23 +127,23 @@ const parseTransform = (transformStr: string) => {
         case 'skewX':
         case 'skewY':
         case 'perspective':
+          // rotate 处理成 rotateZ
+          key = key === 'rotate' ? 'rotateZ' : key
           // 单个值处理
           transform.push({ [key]: global.__formatValue(val) })
           break
         case 'matrix':
-        case 'matrix3d':
           transform.push({ [key]: parseValues(val, ',').map(val => +val) })
           break
         case 'translate':
         case 'scale':
         case 'skew':
-        case 'rotate3d': // x y z angle
         case 'translate3d': // x y 支持 z不支持
         case 'scale3d': // x y 支持 z不支持
         {
           // 2 个以上的值处理
           key = key.replace('3d', '')
-          const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+          const vals = parseValues(val, ',').splice(0, 3)
           // scale(.5) === scaleX(.5) scaleY(.5)
           if (vals.length === 1 && key === 'scale') {
             vals.push(vals[0])
@@ -167,6 +167,14 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
+// 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 }) {
   const { style = {}, animation, enableAnimation } = props
 
@@ -187,7 +195,9 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   // 记录动画key的style样式值 没有的话设置为false
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
-  // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
+  // 记录上次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 不能在增加新的值，被冻结
@@ -200,6 +210,12 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       return valMap
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
   }, [])
+  // ** style更新同步
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    // style 更新后同步更新 lastStyleRef & shareValMap
+    updateStyleVal()
+  }, [style])
   // ** 获取动画样式prop & 驱动动画
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
@@ -211,16 +227,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     // 驱动动画
     createAnimation(keys)
   }, [id])
-  // 同步style更新
-  // useEffect(() => {
-  //   Object.keys(animatedKeys.current).forEach(key => {
-  //     const originVal = getOriginalStyleVal(key, isTransform(key))
-  //     if (originVal && animatedKeys.current[key] !== originVal) {
-  //       animatedKeys.current[key] = originVal
-  //       shareValMap[key].value = originVal
-  //     }
-  //   })
-  // }, [style])
   // ** 清空动画
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
@@ -230,7 +236,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       })
     }
   }, [])
-  // 根据 animation action 创建&驱动动画 key => wi
+  // 根据 animation action 创建&驱动动画
   function createAnimation (animatedKeys: string[] = []) {
     const actions = animation?.actions || []
     const sequence = {} as { [propName: keyof ExtendedViewStyle]: (string|number)[] }
@@ -286,6 +292,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       : 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]
@@ -297,38 +304,19 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     }
     return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key]
   }
-  // 从 prop style 中获取样式初始值 没有为undefined
-  // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
-  //   if (isTransform && Array.isArray(originalStyle.transform)) {
-  //     let initialVal = undefined // 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]
-  // }
-  // 获取动画shareVal初始值（prop style or 默认值）
-  // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
-  //   const originalVal = getOriginalStyleVal(key, isTransform)
-  //   return originalVal === 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 => {
-        // const originalVal = getOriginalStyleVal(key, isTransform(key))
-        // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
         if (!keyMap[key]) keyMap[key] = true
       })
       return keyMap
     }, animatedKeys.current)
   }
   // animated key transform 格式化
-  function formatAnimatedKeys (keys: string[] = []) {
+  function formatAnimatedKeys (keys: string[]) {
     const animatedKeys = [] as (string|string[])[]
     const transforms = [] as string[]
     keys.forEach(key => {
@@ -341,13 +329,23 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     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 })
+  // 设置 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
@@ -356,7 +354,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     return animatedStyleKeys.value.reduce((styles, key) => {
       // console.info('getAnimationStyles', key, shareValMap[key].value)
       if (Array.isArray(key)) {
-        const transformStyle = getTransformObj()
+        const transformStyle = getTransformObj(originalStyle.transform || [])
         key.forEach((transformKey) => {
           transformStyle[transformKey] = shareValMap[transformKey].value
         })

package/lib/runtime/components/react/utils.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext, RouteContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
+import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
 import { runOnJS } from 'react-native-reanimated'
 import { Gesture } from 'react-native-gesture-handler'
 
@@ -291,12 +291,8 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   const normalStyleChangedRef = useRef(false)
   let hasVarDec = false
   let hasVarUse = false
-  let hasSelfPercent = false
   const varKeyPaths: Array<Array<string>> = []
   const unoVarKeyPaths: Array<Array<string>> = []
-  const percentKeyPaths: Array<Array<string>> = []
-  const calcKeyPaths: Array<Array<string>> = []
-  const envKeyPaths: Array<Array<string>> = []
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
   const navigation = useNavigation()
@@ -359,6 +355,11 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   }
 
   const memoResult = useMemo(() => {
+    let hasSelfPercent = false
+    let hasPositionFixed = false
+    const percentKeyPaths: Array<Array<string>> = []
+    const calcKeyPaths: Array<Array<string>> = []
+    const envKeyPaths: Array<Array<string>> = []
     // transform can be memoized
     function envVisitor ({ value, keyPath }: VisitorArg) {
       if (envUseRegExp.test(value)) {
@@ -381,6 +382,13 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       }
     }
 
+    function transformPosition (styleObj: Record<string, any>) {
+      if (styleObj.position === 'fixed') {
+        hasPositionFixed = true
+        styleObj.position = 'absolute'
+      }
+    }
+
     // traverse env & calc & percent
     traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor])
 
@@ -412,12 +420,15 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
         }
       }
     })
+    // apply position
+    transformPosition(normalStyle)
     // transform number enum stringify
     transformStringify(normalStyle)
 
     return {
       normalStyle,
-      hasSelfPercent
+      hasSelfPercent,
+      hasPositionFixed
     }
   }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize])
 
@@ -515,8 +526,8 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       hasLayoutRef.current = true
       if (hasSelfPercent) {
         const { width, height } = e?.nativeEvent?.layout || {}
-        setWidth(width || 0)
-        setHeight(height || 0)
+        setWidth && setWidth(width || 0)
+        setHeight && setHeight(height || 0)
       }
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
@@ -643,7 +654,7 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
-export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled }: { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
   const enableHoverRef = useRef(enableHover)
   if (enableHoverRef.current !== enableHover) {
     error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')

package/lib/runtime/optionProcessor.js

@@ -2,6 +2,7 @@ import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
+const dash2hump = require('../utils/hump-dash').dash2hump
 
 export function processComponentOption (
   {
@@ -45,12 +46,12 @@ registered in parent context!`)
     option.props.generichash = String
     Object.keys(componentGenerics).forEach((genericName) => {
       if (componentGenerics[genericName].default) {
-        option.props[`generic${genericName}`] = {
+        option.props[`generic${dash2hump(genericName)}`] = {
           type: String,
           default: `${genericName}default`
         }
       } else {
-        option.props[`generic${genericName}`] = String
+        option.props[`generic${dash2hump(genericName)}`] = String
       }
     })
   }

package/lib/style-compiler/index.js

@@ -37,6 +37,7 @@ module.exports = function (css, map) {
   const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs, inlineConfigFile: path.join(mpx.projectRoot, 'vue.config.js') })
   loadPostcssConfig(this, inlineConfig).then(config => {
     const plugins = [] // init with trim plugin
+    const postPlugins = []
     const options = Object.assign(
       {
         to: this.resourcePath,
@@ -77,9 +78,6 @@ module.exports = function (css, map) {
       }
     }
 
-    if (mpx.mode === 'web') {
-      plugins.push(vw({ transRpxFn }))
-    }
     // source map
     if (this.sourceMap && !options.map) {
       options.map = {
@@ -89,13 +87,17 @@ module.exports = function (css, map) {
       }
     }
 
-    const finalPlugins = config.prePlugins.concat(plugins, config.plugins)
-
     const cssList = []
     if (runtimeCompile) {
-      finalPlugins.push(cssArrayList(cssList))
+      postPlugins.push(cssArrayList(cssList))
     }
 
+    if (mpx.mode === 'web') {
+      postPlugins.push(vw({ transRpxFn }))
+    }
+
+    const finalPlugins = config.prePlugins.concat(plugins, config.plugins, postPlugins)
+
     return postcss(finalPlugins)
       .process(css, options)
       .then(result => {

package/lib/template-compiler/compiler.js

@@ -118,6 +118,7 @@ let processingTemplate = false
 const rulesResultMap = new Map()
 let usingComponents = []
 let usingComponentsInfo = {}
+let componentGenerics = {}
 
 function updateForScopesMap () {
   forScopesMap = {}
@@ -634,6 +635,7 @@ function parse (template, options) {
   hasOptionalChaining = false
   processingTemplate = false
   rulesResultMap.clear()
+  componentGenerics = options.componentGenerics || {}
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
   usingComponents = Object.keys(options.usingComponentsInfo)
@@ -942,32 +944,37 @@ function stringify (str) {
 
 const genericRE = /^generic:(.+)$/
 
-function processComponentGenericsWeb (el, options, meta) {
-  if (options.componentGenerics && options.componentGenerics[el.tag]) {
+function processComponentGenerics (el, meta) {
+  if (componentGenerics && componentGenerics[el.tag]) {
     const generic = dash2hump(el.tag)
     el.tag = 'component'
     addAttrs(el, [{
-      name: ':is',
-      value: `generic${generic}`
+      name: isWeb(mode) ? ':is' : 'is',
+      value: isWeb(mode) ? `generic${generic}` : `{{generic${generic}}}`
     }])
   }
 
   let hasGeneric = false
-
   const genericHash = moduleId
+  const genericAttrs = []
 
   el.attrsList.forEach((attr) => {
     if (genericRE.test(attr.name)) {
-      getAndRemoveAttr(el, attr.name)
-      addAttrs(el, [{
-        name: attr.name.replace(':', ''),
-        value: attr.value
-      }])
+      genericAttrs.push(attr)
       hasGeneric = true
       addGenericInfo(meta, genericHash, attr.value)
     }
   })
 
+  // 统一处理所有的generic:属性
+  genericAttrs.forEach((attr) => {
+    getAndRemoveAttr(el, attr.name)
+    addAttrs(el, [{
+      name: attr.name.replace(':', ''),
+      value: attr.value
+    }])
+  })
+
   if (hasGeneric) {
     addAttrs(el, [{
       name: 'generichash',
@@ -2253,7 +2260,7 @@ function isRealNode (el) {
 }
 
 function isComponentNode (el) {
-  return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
+  return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component' || componentGenerics[el.tag]
 }
 
 function getComponentInfo (el) {
@@ -2706,7 +2713,7 @@ function processElement (el, root, options, meta) {
     processEventWeb(el)
     // processWebExternalClassesHack(el, options)
     processExternalClasses(el, options)
-    processComponentGenericsWeb(el, options, meta)
+    processComponentGenerics(el, meta)
     return
   }
 
@@ -2721,6 +2728,7 @@ function processElement (el, root, options, meta) {
     if (!pass) {
       processStyleReact(el, options)
       processEventReact(el, options)
+      processComponentGenerics(el, meta)
       processComponentIs(el, options)
       processSlotReact(el, meta)
     }

package/lib/utils/match-condition.js

@@ -1,3 +1,5 @@
+const toPosix = require('./to-posix')
+
 const orMatcher = items => {
   return str => {
     for (let i = 0; i < items.length; i++) {
@@ -33,16 +35,20 @@ const normalizeCondition = (condition) => {
 
 // 匹配规则为include匹配到且未被exclude匹配到的资源为true，其余资源全部为false，如果需要实现不传include为全部匹配的话可以将include的默认值设置为()=>true进行传入
 const matchCondition = (resourcePath, condition = {}) => {
-  let matched = false
-  const includeMatcher = condition.include && normalizeCondition(condition.include)
-  const excludeMatcher = condition.exclude && normalizeCondition(condition.exclude)
-  if (includeMatcher && includeMatcher(resourcePath)) {
-    matched = true
+  const posixResourcePath = toPosix(resourcePath)
+  const checkPath = (path) => {
+    let matched = false
+    const includeMatcher = condition.include && normalizeCondition(condition.include)
+    const excludeMatcher = condition.exclude && normalizeCondition(condition.exclude)
+    if (includeMatcher?.(path)) matched = true
+    if (excludeMatcher?.(path)) matched = false
+    return matched
   }
-  if (excludeMatcher && excludeMatcher(resourcePath)) {
-    matched = false
+  if (checkPath(resourcePath)) return true
+  if (posixResourcePath !== resourcePath) {
+    return checkPath(posixResourcePath)
   }
-  return matched
+  return false
 }
 
 module.exports = {

package/lib/web/processJSON.js

@@ -79,8 +79,6 @@ module.exports = function (jsonContent, {
     })
   }
 
-  const isApp = ctorType === 'app'
-
   if (!jsonContent) {
     return callback()
   }
@@ -100,7 +98,7 @@ module.exports = function (jsonContent, {
       }
     }
 
-    if (!isApp) {
+    if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -84,7 +84,7 @@
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.2",
+    "@mpxjs/api-proxy": "^2.10.3",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -101,5 +101,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "4445de7c3ce29fb0166d3bb77a1a0460e41a32d3"
+  "gitHead": "043c9bc770ce9cc11f865bab67f46849ff573728"
 }