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

package/lib/global.d.ts

@@ -1,16 +1,245 @@
+import * as webpack from 'webpack'
+
+declare module 'webpack' {
+  interface Compilation {
+    __mpx__: MpxContext
+  }
+
+  interface Compiler {
+    __mpx__?: boolean
+  }
+}
 
 declare global {
     interface MpxWebpackPluginOptions {
-        style: {
-            cssCondition?: {
-                before?: boolean;
-                after?: boolean;
-                beforeExclude?: (string | RegExp)[];
-                afterExclude?: (string | RegExp)[];
-                legacy?: boolean;
-                afterLegacy?: boolean;
-                beforeLegacy?: boolean;
-            }
-        }
+    style: {
+      cssCondition?: {
+        before?: boolean
+        after?: boolean
+        beforeExclude?: (string | RegExp)[]
+        afterExclude?: (string | RegExp)[]
+        legacy?: boolean
+        afterLegacy?: boolean
+        beforeLegacy?: boolean
+      }
     }
+  }
+
+  type MpxLoaderContext<T> = webpack.LoaderContext<T> & {
+    getMpx(): MpxContext
+  }
+
+  interface MpxContext {
+    /**
+     * 用于使用 webpack-virtual-modules 功能，目前仅在输出 web 时支持使用
+     */
+    __vfs: any | null
+
+    /**
+     * app 信息，便于获取 appName
+     */
+    appInfo: {
+      resourcePath?: string
+      name?: string
+      [key: string]: any
+    }
+
+    /**
+     * pageConfig 信息
+     */
+    pageConfigsMap: Record<string, any>
+
+    /**
+     * pages 全局记录，无需区分主包/分包
+     */
+    pagesMap: Record<string, string>
+
+    /**
+     * 组件资源记录，按所属包进行记录（如 componentsMap.main）
+     */
+    componentsMap: Record<string, Record<string, string>>
+
+    /**
+     * 静态资源（图片、字体、独立样式）等，按所属包进行记录
+     */
+    staticResourcesMap: Record<string, Record<string, string>>
+
+    /**
+     * 用于记录命中 subpackageModulesRules 的 JS 模块分包归属，用于 JS 多分包冗余输出
+     */
+    subpackageModulesMap: Record<string, Record<string, string>>
+
+    /**
+     * 记录其他资源，如 pluginMain、pluginExport，无需区分主包/分包
+     */
+    otherResourcesMap: Record<string, any>
+
+    /**
+     * 记录独立分包
+     */
+    independentSubpackagesMap: Record<string, any>
+
+    subpackagesEntriesMap: Record<string, any>
+    postSubpackageEntriesMap: Record<string, any>
+    replacePathMap: Record<string, string>
+
+    /**
+     * 导出模块集合
+     */
+    exportModules: Set<any>
+
+    /**
+     * 记录动态添加入口的分包信息
+     */
+    dynamicEntryInfo: Record<string, any>
+
+    /**
+     * 记录 entryModule 与 entryNode 的对应关系，用于体积分析
+     */
+    entryNodeModulesMap: Map<any, any>
+
+    /**
+     * 记录与 asset 相关联的 modules，用于体积分析
+     */
+    assetsModulesMap: Map<string, Set<any>>
+
+    /**
+     * 记录与 asset 相关联的 AST，用于体积分析和 esCheck，避免重复 parse
+     */
+    assetsASTsMap: Map<string, any>
+
+    /**
+     * 记录 RequireExternalDependency 相关资源路径
+     */
+    externalRequestsMap: Map<string, any>
+
+    globalComponents: Record<string, any>
+    globalComponentsInfo: Record<string, any>
+
+    /**
+     * todo: es6 Map 读写性能高于 object，之后会逐步替换
+     */
+    wxsAssetsCache: Map<string, any>
+    addEntryPromiseMap: Map<string, Promise<any>>
+    currentPackageRoot: string
+    wxsContentMap: Record<string, string>
+
+    /**
+     * 是否强制使用页面构造函数
+     */
+    forceUsePageCtor: boolean
+
+    resolveMode: string
+    mode: string
+    srcMode: string
+    env: string
+    externalClasses: string[]
+    projectRoot: string
+    autoScopeRules: any
+    autoVirtualHostRules: any
+    customTextRules: any
+    transRpxRules: any
+    postcssInlineConfig: any
+    decodeHTMLText: boolean
+
+    /**
+     * native 文件专用配置
+     */
+    i18n: any | null
+    checkUsingComponentsRules: any
+    forceDisableBuiltInLoader: boolean
+
+    /**
+     * 默认的应用标题
+     */
+    appTitle: string
+
+    attributes: any[]
+    externals: any[]
+    useRelativePath: boolean
+    removedChunks: any[]
+    forceProxyEventRules: any
+
+    /**
+     * 若配置 disableRequireAsync=true，则全平台构建不支持异步分包
+     */
+    supportRequireAsync: boolean
+    partialCompileRules: any
+    asyncSubpackageRules: any[]
+    transSubpackageRules: any
+    optimizeRenderRules: any[]
+
+    addEntryModuleIssuer: (module: string, issuer: string) => void
+
+    /**
+     * 资源路径的哈希函数（用于生成输出唯一名）
+     */
+    pathHash: (resourcePath: string) => string
+
+    // 缓存与工具
+    loaderContentCache: Map<string, any>
+    extractedFilesCache: Map<string, string>
+
+    // 函数接口
+
+    /**
+     * 收集动态入口信息（分包、文件名、是否为页面、是否包含异步等）
+     */
+    collectDynamicEntryInfo: (info: { resource: string; packageName: string; filename: string; entryType: string; hasAsync: boolean }) => void
+
+    /**
+     * 添加入口（包装了 webpack 的 addEntry）
+     */
+    addEntry: (request: string, name: string, callback: (err?: Error, result?: any) => void) => any
+
+    getModuleId: (filePath: string, isApp?: boolean) => string
+    getEntryNode: (module: any, type?: string) => any
+
+    /**
+     * 根据资源路径和类型返回输出路径（支持自定义输出、冲突处理等）
+     */
+    getOutputPath: (resourcePath: string, type: string, opts?: { ext?: string; conflictPath?: string }) => string
+
+    /**
+     * 获取提取后的文件名（支持静态、插件、普通资源）
+     */
+    getExtractedFile: (resource: string, opts?: { error?: (err: Error) => void }) => string
+
+    recordResourceMap: (params: {
+      resourcePath: string
+      resourceType: string
+      outputPath?: string
+      packageRoot?: string
+      recordOnly?: boolean
+      warn?: (e: Error) => void
+      error?: (e: Error) => void
+    }) => { outputPath?: string; alreadyOutputted?: boolean }
+
+    getPackageInfo: (params: {
+      resource: string
+      resourceType: string
+      outputPath?: string
+      issuerResource?: string
+      warn?: (e: Error) => void
+      error?: (e: Error) => void
+    }) => { packageName: string; packageRoot: string; outputPath?: string; alreadyOutputted?: boolean }
+
+    // 运行时信息与注入相关
+    runtimeInfo: Record<string, any>
+    dynamicSlotDependencies: Record<string, any>
+    dynamicTemplateRuleRunner: any
+
+    /**
+     * 依据 package 注入到 mpx-custom-element-*.json 里面的组件路径
+     */
+    getPackageInjectedComponentsMap: (packageName?: string) => Record<string, string>
+
+    getPackageInjectedTemplateConfig: (packageName?: string) => any
+    injectDynamicSlotDependencies: (usingComponents: string, resourcePath: string) => string
+    changeHashNameForAstNode: (templateAst: string, componentsMap: any) => string
+    collectDynamicSlotDependencies: (packageName?: string) => void
+
+    // 其它任意扩展字段
+    [key: string]: any
+  }
 }

package/lib/index.js

@@ -87,6 +87,10 @@ const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
 }
 
+/**
+ * @param {import('webpack').NormalModule} module
+ * @returns
+ */
 const isStaticModule = module => {
   if (!module.resource) return false
   const { queryObj } = parseRequest(module.resource)
@@ -323,6 +327,9 @@ class MpxWebpackPlugin {
     }
   }
 
+  /**
+   * @param {import('webpack').Compiler} compiler
+   */
   apply (compiler) {
     // 注入 fs 代理
     startFSStripForCss(this.options.defs)

package/lib/loader.js

@@ -19,6 +19,10 @@ const processWeb = require('./web')
 const processReact = require('./react')
 const genMpxCustomElement = require('./runtime-render/gen-mpx-custom-element')
 
+/**
+ * @this {MpxLoaderContext<any>}
+ * @param {string} content
+ */
 module.exports = function (content) {
   this.cacheable()
 

package/lib/platform/style/wx/index.js

@@ -139,11 +139,10 @@ module.exports = function getSpec ({ warn, error }) {
     const type = getValueType(prop)
     const tipsType = (type) => {
       const info = {
-        [ValueType.number]: '2rpx,10%,30rpx',
         [ValueType.color]: 'rgb,rgba,hsl,hsla,hwb,named color,#000000',
         [ValueType.enum]: `${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}`
       }
-      tips(`Value of ${prop} in ${selector} should be ${type}, eg ${info[type]}, received [${value}], please check again!`)
+      tips(`Value of ${prop} in ${selector} should be ${type}${info[type] ? `, eg ${info[type]}` : ''}, received [${value}], please check again!`)
     }
     switch (type) {
       case ValueType.number: {
@@ -549,15 +548,6 @@ module.exports = function getSpec ({ warn, error }) {
     return { prop, value: values[0].trim() }
   }
 
-  const formatZIndex = ({ prop, value, selector }, { mode }) => {
-    // z-index auto 报错
-    if (value === 'auto') {
-      error(`Property [${prop}] does not supported [${value}] on ${selector} in ${mode} environment, please check again!`)
-      return { prop, value: 0 }
-    }
-    return { prop, value: value }
-  }
-
   // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
   //   value = value.trim()
   //   if (value === 'none') {
@@ -623,12 +613,6 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
-      {
-        test: 'z-index',
-        ios: formatZIndex,
-        android: formatZIndex,
-        harmony: formatZIndex
-      },
       // {
       //   test: 'box-shadow',
       //   ios: formatBoxShadow,

package/lib/platform/template/wx/component-config/button.js

@@ -197,7 +197,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(lang|from-type|hover-class|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/,
+        test: /^(lang|from-type|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

package/lib/platform/template/wx/component-config/input.js

@@ -107,7 +107,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(always-embed|hold-keyboard|safe-password-.+)$/,
+        test: /^(always-embed|safe-password-.+)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

package/lib/platform/template/wx/component-config/textarea.js

@@ -93,7 +93,7 @@ module.exports = function ({ print }) {
         }
       },
       {
-        test: /^(always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        test: /^(always-embed|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

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

@@ -1,4 +1,4 @@
-import { hasOwn, dash2hump, error } from '@mpxjs/utils'
+import { hasOwn, dash2hump, error, warn } from '@mpxjs/utils'
 import { useMemo, useRef, useEffect } from 'react'
 import {
   Easing,
@@ -169,10 +169,11 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
     return parseTransitionStyle(originalStyle)
   }, [])
   // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
-  const { shareValMap, animatedKeys, animatedKeysShareVal } = useMemo(() => {
+  const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
     // 记录需要执行动画的 propName
     const animatedKeys = [] as string[]
-    const animatedKeysShareVal = [] as (string|string[])[]
+    // 有动画样式的 style key(useAnimatedStyle使用)
+    const animatedStyleKeys = [] as (string|string[])[]
     const transforms = [] as string[]
     const shareValMap = Object.keys(transitionMap).reduce((valMap, property) => {
       // const { property } = transition || {}
@@ -189,20 +190,18 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
         // console.log(`shareValMap property=${property} defaultVal=${defaultVal}`)
         valMap[property] = makeMutable(defaultVal)
         animatedKeys.push(property)
-        animatedKeysShareVal.push(property)
+        animatedStyleKeys.push(property)
       }
       // console.log('shareValMap = ', valMap)
       return valMap
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
-    if (transforms.length) animatedKeysShareVal.push(transforms)
+    if (transforms.length) animatedStyleKeys.push(transforms)
     return {
       shareValMap,
       animatedKeys,
-      animatedKeysShareVal
+      animatedStyleKeys
     }
   }, [])
-  // 有动画样式的 style key(useAnimatedStyle使用)
-  const animatedStyleKeys = useSharedValue(animatedKeysShareVal)
   const runOnJSCallbackRef = useRef({})
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
   // 根据 animation action 创建&驱动动画
@@ -228,32 +227,37 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
         toVal = `${toVal * 100}%`
       } else if (typeof toVal !== typeof shareVal) {
         // 动画起始值和终态值类型不一致报错提示一下
-        error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
+        warn(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
       }
-      // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
-      const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key]
-      // console.log('animationOptions=', { delay, duration, easing })
-      let callback
-      if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
-        runOnJSCallbackRef.current = {
-          animationCallback: (duration: number, finished: boolean, current?: AnimatableValue) => {
-            transitionend(finished, current, duration)
+      if ((toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal))) {
+        // 有 auto 直接赋值不做动画
+        shareValMap[key].value = toVal
+      } else {
+        // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
+        const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key]
+        // console.log('animationOptions=', { delay, duration, easing })
+        let callback
+        if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
+          runOnJSCallbackRef.current = {
+            animationCallback: (duration: number, finished: boolean, current?: AnimatableValue) => {
+              transitionend(finished, current, duration)
+            }
           }
-        }
-        callback = (finished?: boolean, current?: AnimatableValue) => {
-          'worklet'
-          // 动画结束后设置下一次transformOrigin
-          if (finished) {
-            runOnJS(runOnJSCallback)('animationCallback', duration, finished, current)
+          callback = (finished?: boolean, current?: AnimatableValue) => {
+            'worklet'
+            // 动画结束后设置下一次transformOrigin
+            if (finished) {
+              runOnJS(runOnJSCallback)('animationCallback', duration, finished, current)
+            }
           }
         }
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, callback)
+        // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
+        if (isTransformKey) {
+          transformTransitionendDone = true
+        }
+        shareValMap[key].value = animation
       }
-      const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, callback)
-      // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
-      if (isTransformKey) {
-        transformTransitionendDone = true
-      }
-      shareValMap[key].value = animation
       // console.log(`useTransitionHooks, ${key}=`, animation)
     })
   }
@@ -278,7 +282,7 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
   // ** 生成动画样式
   return useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
-    return animatedStyleKeys.value.reduce((styles, key) => {
+    return animatedStyleKeys.reduce((styles, key) => {
       if (Array.isArray(key)) {
         const transformStyle = getTransformObj(originalStyle.transform || [])
         key.forEach((transformKey) => {

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

@@ -94,8 +94,9 @@ export const transformInitial: ExtendedViewStyle = {
 export const animationAPIInitialValue: ExtendedViewStyle = Object.assign({
   opacity: 1,
   backgroundColor: 'transparent',
-  width: 0,
-  height: 0,
+  // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+  width: 'auto',
+  height: 'auto',
   top: 0,
   right: 0,
   bottom: 0,

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

@@ -13,4 +13,3 @@ export default function useAnimationHooks<T, P>(props: _ViewProps & {
     enableStyleAnimation: boolean;
     animationStyle: import("../types/common").ExtendedViewStyle;
 };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,3 @@
 import type { ExtendedViewStyle } from '../types/common';
 import type { AnimationHooksPropsType } from './utils';
 export default function useAnimationAPIHooks<T, P>(props: AnimationHooksPropsType): ExtendedViewStyle;
-//# sourceMappingURL=useAnimationAPIHooks.d.ts.map

package/lib/runtime/components/react/dist/animationHooks/useTransitionHooks.d.ts

@@ -1,4 +1,3 @@
 import type { ExtendedViewStyle } from '../types/common';
 import type { AnimationHooksPropsType } from './utils';
 export default function useTransitionHooks<T, P>(props: AnimationHooksPropsType): ExtendedViewStyle;
-//# sourceMappingURL=useTransitionHooks.d.ts.map

package/lib/runtime/components/react/dist/animationHooks/useTransitionHooks.js

@@ -1,6 +1,6 @@
-import { hasOwn, dash2hump, error } from '@mpxjs/utils';
+import { hasOwn, dash2hump, error, warn } from '@mpxjs/utils';
 import { useMemo, useRef, useEffect } from 'react';
-import { Easing, makeMutable, runOnJS, useSharedValue, useAnimatedStyle, cancelAnimation } from 'react-native-reanimated';
+import { Easing, makeMutable, runOnJS, useAnimatedStyle, cancelAnimation } from 'react-native-reanimated';
 import { easingKey, transitionSupportedProperty, transformInitial, cubicBezierExp, secondRegExp, percentExp, getTransformObj, getUnit, getInitialVal, getAnimation, isTransform } from './utils';
 import { parseValues, useRunOnJSCallback } from '../utils';
 const propName = {
@@ -141,10 +141,11 @@ export default function useTransitionHooks(props) {
         return parseTransitionStyle(originalStyle);
     }, []);
     // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
-    const { shareValMap, animatedKeys, animatedKeysShareVal } = useMemo(() => {
+    const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
         // 记录需要执行动画的 propName
         const animatedKeys = [];
-        const animatedKeysShareVal = [];
+        // 有动画样式的 style key(useAnimatedStyle使用)
+        const animatedStyleKeys = [];
         const transforms = [];
         const shareValMap = Object.keys(transitionMap).reduce((valMap, property) => {
             // const { property } = transition || {}
@@ -162,21 +163,19 @@ export default function useTransitionHooks(props) {
                 // console.log(`shareValMap property=${property} defaultVal=${defaultVal}`)
                 valMap[property] = makeMutable(defaultVal);
                 animatedKeys.push(property);
-                animatedKeysShareVal.push(property);
+                animatedStyleKeys.push(property);
             }
             // console.log('shareValMap = ', valMap)
             return valMap;
         }, {});
         if (transforms.length)
-            animatedKeysShareVal.push(transforms);
+            animatedStyleKeys.push(transforms);
         return {
             shareValMap,
             animatedKeys,
-            animatedKeysShareVal
+            animatedStyleKeys
         };
     }, []);
-    // 有动画样式的 style key(useAnimatedStyle使用)
-    const animatedStyleKeys = useSharedValue(animatedKeysShareVal);
     const runOnJSCallbackRef = useRef({});
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     // 根据 animation action 创建&驱动动画
@@ -204,32 +203,38 @@ export default function useTransitionHooks(props) {
             }
             else if (typeof toVal !== typeof shareVal) {
                 // 动画起始值和终态值类型不一致报错提示一下
-                error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`);
+                warn(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`);
             }
-            // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
-            const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key];
-            // console.log('animationOptions=', { delay, duration, easing })
-            let callback;
-            if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
-                runOnJSCallbackRef.current = {
-                    animationCallback: (duration, finished, current) => {
-                        transitionend(finished, current, duration);
-                    }
-                };
-                callback = (finished, current) => {
-                    'worklet';
-                    // 动画结束后设置下一次transformOrigin
-                    if (finished) {
-                        runOnJS(runOnJSCallback)('animationCallback', duration, finished, current);
-                    }
-                };
+            if ((toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal))) {
+                // 有 auto 直接赋值不做动画
+                shareValMap[key].value = toVal;
             }
-            const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, callback);
-            // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
-            if (isTransformKey) {
-                transformTransitionendDone = true;
+            else {
+                // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
+                const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key];
+                // console.log('animationOptions=', { delay, duration, easing })
+                let callback;
+                if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
+                    runOnJSCallbackRef.current = {
+                        animationCallback: (duration, finished, current) => {
+                            transitionend(finished, current, duration);
+                        }
+                    };
+                    callback = (finished, current) => {
+                        'worklet';
+                        // 动画结束后设置下一次transformOrigin
+                        if (finished) {
+                            runOnJS(runOnJSCallback)('animationCallback', duration, finished, current);
+                        }
+                    };
+                }
+                const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, callback);
+                // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
+                if (isTransformKey) {
+                    transformTransitionendDone = true;
+                }
+                shareValMap[key].value = animation;
             }
-            shareValMap[key].value = animation;
             // console.log(`useTransitionHooks, ${key}=`, animation)
         });
     }
@@ -254,7 +259,7 @@ export default function useTransitionHooks(props) {
     // ** 生成动画样式
     return useAnimatedStyle(() => {
         // console.info(`useAnimatedStyle styles=`, originalStyle)
-        return animatedStyleKeys.value.reduce((styles, key) => {
+        return animatedStyleKeys.reduce((styles, key) => {
             if (Array.isArray(key)) {
                 const transformStyle = getTransformObj(originalStyle.transform || []);
                 key.forEach((transformKey) => {

package/lib/runtime/components/react/dist/animationHooks/utils.d.ts

@@ -107,4 +107,3 @@ export declare function getAnimation({ key, value }: {
     key: string;
     value: string | number;
 }, { delay, duration, easing }: ExtendWithTimingConfig, callback?: AnimationCallback): string | number;
-//# sourceMappingURL=utils.d.ts.map

package/lib/runtime/components/react/dist/animationHooks/utils.js

@@ -47,8 +47,9 @@ export const transformInitial = {
 export const animationAPIInitialValue = Object.assign({
     opacity: 1,
     backgroundColor: 'transparent',
-    width: 0,
-    height: 0,
+    // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+    width: 'auto',
+    height: 'auto',
     top: 0,
     right: 0,
     bottom: 0,

package/lib/runtime/components/react/dist/context.d.ts

@@ -77,4 +77,3 @@ export declare const ScrollViewContext: import("react").Context<ScrollViewContex
 export declare const PortalContext: import("react").Context<PortalContextValue>;
 export declare const StickyContext: import("react").Context<StickyContextValue>;
 export declare const ProviderContext: import("react").Context<null>;
-//# sourceMappingURL=context.d.ts.map

package/lib/runtime/components/react/dist/event.config.d.ts

@@ -5,4 +5,3 @@ declare const eventConfigMap: {
     };
 };
 export default eventConfigMap;
-//# sourceMappingURL=event.config.d.ts.map

package/lib/runtime/components/react/dist/getInnerListeners.d.ts

@@ -5,4 +5,3 @@ export declare const getCustomEvent: (type: string | undefined, oe: any, { detai
 }, props?: Props) => any;
 declare const useInnerProps: (props?: Props, userRemoveProps?: RemoveProps, rawConfig?: RawConfig) => Record<string, (e: ExtendedNativeTouchEvent) => void> & Omit<Props, string>;
 export default useInnerProps;
-//# sourceMappingURL=getInnerListeners.d.ts.map