@mpxjs/webpack-plugin 2.10.4-beta.9 → 2.10.5-beta.1

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -1,11 +1,12 @@
 import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
-import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
+import React, { forwardRef, useRef, useEffect, useMemo, createElement } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
 import { SwiperContext } from './context';
+import Portal from './mpx-portal';
 /**
  * 默认的Style类型
  */
@@ -70,14 +71,19 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
+    // 手势协同gesture 1.0
+    const swiperGestureRef = useRef();
+    useNodesRef(props, ref, nodeRef, {
+        // scrollView内部会过滤是否绑定了gestureRef，withRef(swiperGestureRef)给gesture对象设置一个ref(2.0版本)
+        gestureRef: swiperGestureRef
+    });
     // 计算transfrom之类的
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -121,6 +127,23 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTime = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
+    // 判断gesture手势是否需要协同处理、等待手势失败响应
+    const gestureSwitch = useRef(false);
+    // 初始化上一次的手势
+    const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
+    const prevWaitForHandlersRef = useRef(waitFor || []);
+    const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+        (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index]);
+    const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+        (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index]);
+    if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+        gestureSwitch.current = !gestureSwitch.current;
+    }
+    // 存储上一次的手势
+    prevSimultaneousHandlersRef.current = originSimultaneousHandlers || [];
+    prevWaitForHandlersRef.current = waitFor || [];
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
@@ -164,8 +187,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     });
     function renderPagination() {
-        if (children.length <= 1)
-            return null;
         const activeColor = activeDotColor || '#007aff';
         const unActionColor = dotColor || 'rgba(0,0,0,.2)';
         // 正常渲染所有dots
@@ -490,6 +511,15 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 });
             }
         }
+        function handleBackInit() {
+            'worklet';
+            // 微信的效果
+            // 1. 只有一个元素，即使设置了circular，也不会产生循环的效果，2. 可以响应手势，但是会有回弹的效果
+            offset.value = withTiming(0, {
+                duration: easeDuration,
+                easing: easeMap[easeingFunc]
+            });
+        }
         function handleBack(eventData) {
             'worklet';
             const { translation } = eventData;
@@ -596,7 +626,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
-            if (isBoundary && circularShared.value) {
+            if (childrenLength.value > 1 && isBoundary && circularShared.value) {
                 offset.value = resetOffset;
             }
             else {
@@ -614,6 +644,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const eventData = {
                 translation: moveDistance
             };
+            if (childrenLength.value === 1) {
+                return handleBackInit();
+            }
             // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
             if (!circularShared.value && !canMove(eventData)) {
                 return;
@@ -625,11 +658,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 handleEnd(eventData);
             }
-        });
+        })
+            .withRef(swiperGestureRef);
+        // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+        if (dir === 'x') {
+            gesturePan.activeOffsetX([-2, 2]).failOffsetY([-5, 5]);
+        }
+        else {
+            gesturePan.activeOffsetY([-2, 2]).failOffsetX([-5, 5]);
+        }
+        // 手势协同2.0
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesturePan.requireExternalGestureToFail(...waitForHandlers);
+        }
         return {
             gestureHandler: gesturePan
         };
-    }, []);
+    }, [gestureSwitch.current]);
     const animatedStyles = useAnimatedStyle(() => {
         if (dir === 'x') {
             return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 };
@@ -638,34 +686,32 @@ const SwiperWrapper = forwardRef((props, ref) => {
             return { transform: [{ translateY: offset.value }], opacity: step.value > 0 ? 1 : 0 };
         }
     });
-    function renderSwiper() {
-        const arrPages = renderItems();
-        return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-      <Animated.View style={[{
-                    flexDirection: dir === 'x' ? 'row' : 'column',
-                    width: '100%',
-                    height: '100%'
-                }, animatedStyles]}>
-        {wrapChildren({
-                children: arrPages
-            }, {
-                hasVarDec,
-                varContext: varContextRef.current,
-                textStyle,
-                textProps
-            })}
-      </Animated.View>
-      {showsPagination && renderPagination()}
-    </View>);
-    }
-    if (children.length === 1) {
-        return renderSwiper();
+    let finalComponent;
+    const arrPages = renderItems();
+    const mergeProps = Object.assign({
+        style: [normalStyle, layoutStyle, styles.swiper]
+    }, layoutProps, innerProps);
+    const animateComponent = createElement(Animated.View, {
+        style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
+    }, wrapChildren({
+        children: arrPages
+    }, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
+    const renderChildrens = showPagination ? [animateComponent, renderPagination()] : animateComponent;
+    finalComponent = createElement(View, mergeProps, renderChildrens);
+    if (!disableGesture) {
+        finalComponent = createElement(GestureDetector, {
+            gesture: gestureHandler
+        }, finalComponent);
     }
-    else {
-        return (<GestureDetector gesture={gestureHandler}>
-      {renderSwiper()}
-    </GestureDetector>);
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
     }
+    return finalComponent;
 });
 SwiperWrapper.displayName = 'MpxSwiperWrapper';
 export default SwiperWrapper;

package/lib/runtime/components/react/dist/mpx-switch.jsx

@@ -10,6 +10,7 @@ import { warn } from '@mpxjs/utils';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import CheckBox from './mpx-checkbox';
+import Portal from './mpx-portal';
 import { FormContext } from './context';
 import { useTransformStyle, useLayout, extendObject } from './utils';
 const _Switch = forwardRef((props, ref) => {
@@ -21,7 +22,7 @@ const _Switch = forwardRef((props, ref) => {
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -83,13 +84,17 @@ const _Switch = forwardRef((props, ref) => {
             checked: isChecked
         }));
     }
-    return createElement(Switch, extendObject({}, innerProps, {
+    let finalComponent = createElement(Switch, extendObject({}, innerProps, {
         style: normalStyle,
         value: isChecked,
         trackColor: { false: '#FFF', true: color },
         thumbColor: isChecked ? '#FFF' : '#f4f3f4',
         ios_backgroundColor: '#FFF'
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _Switch.displayName = 'MpxSwitch';
 export default _Switch;

package/lib/runtime/components/react/dist/mpx-text.jsx

@@ -5,12 +5,13 @@
  */
 import { Text } from 'react-native';
 import { useRef, forwardRef, createElement } from 'react';
+import Portal from './mpx-portal';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, wrapChildren, extendObject } from './utils';
 const _Text = forwardRef((props, ref) => {
     const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -29,10 +30,14 @@ const _Text = forwardRef((props, ref) => {
     }), [
         'user-select'
     ]);
-    return createElement(Text, innerProps, wrapChildren(props, {
+    let finalComponent = createElement(Text, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _Text.displayName = 'MpxText';
 export default _Text;

package/lib/runtime/components/react/dist/mpx-video.jsx

@@ -68,6 +68,7 @@ import { StyleSheet, View } from 'react-native';
 import { splitProps, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         width: 300,
@@ -85,7 +86,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
     const videoInfoRef = useRef({});
     const propsRef = useRef({});
     propsRef.current = props;
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, styles.container, style), {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(extendObject({}, styles.container, style), {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -243,6 +244,10 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         'bindcontrolstoggle',
         'bindseekcomplete'
     ], { layoutRef });
-    return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    let videoComponent = createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    if (hasPositionFixed) {
+        videoComponent = createElement(Portal, null, videoComponent);
+    }
+    return videoComponent;
 });
 export default MpxVideo;

package/lib/runtime/components/react/dist/mpx-view.jsx

@@ -11,7 +11,7 @@ import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
-import { error } from '@mpxjs/utils';
+import { error, isFunction } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 import { GestureDetector } from 'react-native-gesture-handler';
 import Portal from './mpx-portal';
@@ -523,10 +523,8 @@ function useWrapImage(imageStyle, innerStyle, enableFastImage) {
             setShow(true);
         }
     };
-    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
-    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
-    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage))}
-  </View>;
+    const backgroundProps = extendObject({ key: 'backgroundImage' }, needLayout ? { onLayout } : {}, { style: extendObject({}, inheritStyle(innerStyle), StyleSheet.absoluteFillObject, { overflow: 'hidden' }) });
+    return createElement(View, backgroundProps, show && type === 'linear' && createElement(LinearGradient, extendObject({ useAngle: true }, imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current))), show && type === 'image' && renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage));
 }
 function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
     const children = wrapChildren(props, {
@@ -543,7 +541,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation, catchtransitionend, bindtransitionend } = props;
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -575,10 +573,17 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = extendObject({}, innerStyle, layoutStyle);
+    const transitionend = isFunction(catchtransitionend)
+        ? catchtransitionend
+        : isFunction(bindtransitionend)
+            ? bindtransitionend
+            : undefined;
     const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-        enableAnimation,
+        layoutRef,
         animation,
-        style: viewStyle
+        enableAnimation,
+        style: viewStyle,
+        transitionend
     });
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
-import { error, hasOwn } from '@mpxjs/utils';
+import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation, runOnJS } from 'react-native-reanimated';
+import { error, hasOwn, collectDataset } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -140,7 +140,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation } = props;
+    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -249,10 +249,33 @@ export default function useAnimationHooks(props) {
             });
         });
     }
+    function withTimingCallback(finished, current, duration) {
+        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()
+        });
+    }
     // 创建单个animation
     function getAnimation({ key, value }, { delay, duration, easing }, callback) {
         const animation = typeof callback === 'function'
-            ? withTiming(value, { duration, easing }, callback)
+            ? withTiming(value, { duration, easing }, (finished, current) => {
+                callback(finished, current);
+                if (transitionend && finished) {
+                    runOnJS(withTimingCallback)(finished, current, duration);
+                }
+            })
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }

package/lib/runtime/components/react/dist/utils.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
 import { Image } from 'react-native';
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } from './context';
@@ -26,6 +26,7 @@ const unoVarDecRegExp = /^--un-/;
 const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
 const envUseRegExp = /env\(/;
+const filterRegExp = /(calc|env|%)/;
 const safeAreaInsetMap = {
     'safe-area-inset-top': 'top',
     'safe-area-inset-right': 'right',
@@ -181,10 +182,11 @@ function resolveVar(input, varContext) {
     });
     return global.__formatValue(replaced.source());
 }
-function transformVar(styleObj, varKeyPaths, varContext) {
+function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
     varKeyPaths.forEach((varKeyPath) => {
         setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
             target[key] = resolveVar(value, varContext);
+            visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });
 }
@@ -224,28 +226,33 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
-const stringifyProps = ['fontWeight'];
 function transformStringify(styleObj) {
-    stringifyProps.forEach((prop) => {
-        if (isNumber(styleObj[prop])) {
-            styleObj[prop] = '' + styleObj[prop];
-        }
-    });
+    if (isNumber(styleObj.fontWeight)) {
+        styleObj.fontWeight = '' + styleObj.fontWeight;
+    }
+}
+function transformPosition(styleObj, meta) {
+    if (styleObj.position === 'fixed') {
+        styleObj.position = 'absolute';
+        meta.hasPositionFixed = true;
+    }
 }
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
     const normalStyle = {};
-    const normalStyleRef = useRef({});
-    const normalStyleChangedRef = useRef(false);
     let hasVarDec = false;
     let hasVarUse = false;
+    let hasSelfPercent = false;
     const varKeyPaths = [];
     const unoVarKeyPaths = [];
+    const percentKeyPaths = [];
+    const calcKeyPaths = [];
+    const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
     const navigation = useNavigation();
-    function varVisitor({ key, value, keyPath }) {
+    function varVisitor({ target, key, value, keyPath }) {
         if (keyPath.length === 1) {
             if (unoVarDecRegExp.test(key)) {
                 unoVarStyle[key] = value;
@@ -269,6 +276,33 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 hasVarUse = true;
                 varKeyPaths.push(keyPath.slice());
             }
+            else {
+                visitOther({ target, key, value, keyPath });
+            }
+        }
+    }
+    function envVisitor({ value, keyPath }) {
+        if (envUseRegExp.test(value)) {
+            envKeyPaths.push(keyPath.slice());
+        }
+    }
+    function calcVisitor({ value, keyPath }) {
+        if (calcUseRegExp.test(value)) {
+            calcKeyPaths.push(keyPath.slice());
+        }
+    }
+    function percentVisitor({ key, value, keyPath }) {
+        if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+            hasSelfPercent = true;
+            percentKeyPaths.push(keyPath.slice());
+        }
+        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+            percentKeyPaths.push(keyPath.slice());
+        }
+    }
+    function visitOther({ target, key, value, keyPath }) {
+        if (filterRegExp.test(value)) {
+            [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }));
         }
     }
     // traverse var & generate normalStyle
@@ -289,96 +323,57 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
             varContextRef.current = newVarContext;
         }
-        transformVar(normalStyle, varKeyPaths, varContextRef.current);
+        transformVar(normalStyle, varKeyPaths, varContextRef.current, visitOther);
     }
     // apply unocss var
     if (unoVarKeyPaths.length) {
-        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle);
-    }
-    const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current);
-    if (diff) {
-        normalStyleRef.current = clone;
-        normalStyleChangedRef.current = !normalStyleChangedRef.current;
+        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther);
     }
-    const memoResult = useMemo(() => {
-        let hasSelfPercent = false;
-        let hasPositionFixed = false;
-        const percentKeyPaths = [];
-        const calcKeyPaths = [];
-        const envKeyPaths = [];
-        // transform can be memoized
-        function envVisitor({ value, keyPath }) {
-            if (envUseRegExp.test(value)) {
-                envKeyPaths.push(keyPath.slice());
-            }
-        }
-        function calcVisitor({ value, keyPath }) {
-            if (calcUseRegExp.test(value)) {
-                calcKeyPaths.push(keyPath.slice());
-            }
-        }
-        function percentVisitor({ key, value, keyPath }) {
-            if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-                hasSelfPercent = true;
-                percentKeyPaths.push(keyPath.slice());
-            }
-            else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
-                percentKeyPaths.push(keyPath.slice());
-            }
-        }
-        function transformPosition(styleObj) {
-            if (styleObj.position === 'fixed') {
-                hasPositionFixed = true;
-                styleObj.position = 'absolute';
-            }
+    const percentConfig = {
+        width,
+        height,
+        fontSize: normalStyle.fontSize,
+        parentWidth,
+        parentHeight,
+        parentFontSize
+    };
+    const positionMeta = {
+        hasPositionFixed: false
+    };
+    // apply env
+    transformEnv(normalStyle, envKeyPaths, navigation);
+    // apply percent
+    transformPercent(normalStyle, percentKeyPaths, percentConfig);
+    // apply calc
+    transformCalc(normalStyle, calcKeyPaths, (value, key) => {
+        if (PERCENT_REGEX.test(value)) {
+            const resolved = resolvePercent(value, key, percentConfig);
+            return typeof resolved === 'number' ? resolved : 0;
         }
-        // traverse env & calc & percent
-        traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
-        const percentConfig = {
-            width,
-            height,
-            fontSize: normalStyle.fontSize,
-            parentWidth,
-            parentHeight,
-            parentFontSize
-        };
-        // apply env
-        transformEnv(normalStyle, envKeyPaths, navigation);
-        // apply percent
-        transformPercent(normalStyle, percentKeyPaths, percentConfig);
-        // apply calc
-        transformCalc(normalStyle, calcKeyPaths, (value, key) => {
-            if (PERCENT_REGEX.test(value)) {
-                const resolved = resolvePercent(value, key, percentConfig);
-                return typeof resolved === 'number' ? resolved : 0;
+        else {
+            const formatted = global.__formatValue(value);
+            if (typeof formatted === 'number') {
+                return formatted;
             }
             else {
-                const formatted = global.__formatValue(value);
-                if (typeof formatted === 'number') {
-                    return formatted;
-                }
-                else {
-                    warn('calc() only support number, px, rpx, % temporarily.');
-                    return 0;
-                }
+                warn('calc() only support number, px, rpx, % temporarily.');
+                return 0;
             }
-        });
-        // apply position
-        transformPosition(normalStyle);
-        // transform number enum stringify
-        transformStringify(normalStyle);
-        return {
-            normalStyle,
-            hasSelfPercent,
-            hasPositionFixed
-        };
-    }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize]);
-    return extendObject({
+        }
+    });
+    // apply position
+    transformPosition(normalStyle, positionMeta);
+    // transform number enum stringify
+    transformStringify(normalStyle);
+    return {
         hasVarDec,
         varContextRef,
         setWidth,
-        setHeight
-    }, memoResult);
+        setHeight,
+        normalStyle,
+        hasSelfPercent,
+        hasPositionFixed: positionMeta.hasPositionFixed
+    };
 }
 export function traverseStyle(styleObj, visitors) {
     const keyPath = [];
@@ -387,12 +382,7 @@ export function traverseStyle(styleObj, visitors) {
             target.forEach((value, index) => {
                 const key = String(index);
                 keyPath.push(key);
-                visitors.forEach(visitor => visitor({
-                    target,
-                    key,
-                    value,
-                    keyPath
-                }));
+                visitors.forEach(visitor => visitor({ target, key, value, keyPath }));
                 traverse(value);
                 keyPath.pop();
             });
@@ -538,7 +528,7 @@ export function getCurrentPage(pageId) {
 }
 export function renderImage(imageProps, enableFastImage = false) {
     const Component = enableFastImage ? FastImage : Image;
-    return <Component {...imageProps}/>;
+    return createElement(Component, imageProps);
 }
 export function pickStyle(styleObj = {}, pickedKeys, callback) {
     return pickedKeys.reduce((acc, key) => {