@mpxjs/webpack-plugin 2.10.16-beta.7 → 2.10.16-perf.1

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

@@ -144,8 +144,8 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const setKeyboardAvoidContext = () => {
-        if (keyboardAvoid) {
-            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition };
+        if (adjustPosition && keyboardAvoid) {
+            keyboardAvoid.current = { cursorSpacing, ref: nodeRef };
         }
     };
     const onTouchStart = () => {
@@ -156,39 +156,13 @@ const Input = forwardRef((props, ref) => {
         evt.nativeEvent.origin = 'input';
     };
     const onFocus = (evt) => {
-        if (!keyboardAvoid?.current) {
-            setKeyboardAvoidContext();
-        }
-        if (bindfocus) {
-            const focusAction = () => {
-                bindfocus(getCustomEvent('focus', evt, {
-                    detail: {
-                        value: tmpValue.current || '',
-                        height: keyboardAvoid?.current?.keyboardHeight
-                    },
-                    layoutRef
-                }, props));
-                if (keyboardAvoid?.current?.onKeyboardShow) {
-                    keyboardAvoid.current.onKeyboardShow = undefined;
-                }
-            };
-            if (keyboardAvoid?.current) {
-                // 有 keyboardAvoiding
-                if (keyboardAvoid.current.keyboardHeight) {
-                    // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
-                    focusAction();
-                }
-                else {
-                    // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
-                    evt.persist();
-                    keyboardAvoid.current.onKeyboardShow = focusAction;
-                }
-            }
-            else {
-                // 无 keyboardAvoiding，直接执行 focus 回调
-                focusAction();
-            }
-        }
+        setKeyboardAvoidContext();
+        bindfocus && bindfocus(getCustomEvent('focus', evt, {
+            detail: {
+                value: tmpValue.current || ''
+            },
+            layoutRef
+        }, props));
     };
     const onBlur = (evt) => {
         bindblur && bindblur(getCustomEvent('blur', evt, {

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

@@ -1,38 +1,22 @@
-/* eslint-disable space-before-function-paren */
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
-import { isAndroid, isIOS } from './utils';
+import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
-    // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
-    // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
-    // 因此增加状态标记 + cancelAnimation 来优化
-    const isShow = useRef(false);
     const animatedStyle = useAnimatedStyle(() => ({
-        // translate/position top可能会导致底部渲染区域缺失
-        marginTop: -offset.value,
+        transform: [{ translateY: -offset.value }],
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
-        if (!isShow.current) {
-            return;
-        }
-        isShow.current = false;
         if (keyboardAvoid?.current) {
-            const inputRef = keyboardAvoid.current.ref?.current;
-            if (inputRef && inputRef.isFocused()) {
-                // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
-                inputRef.blur();
-            }
             keyboardAvoid.current = null;
         }
-        cancelAnimation(offset);
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -43,58 +27,66 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     };
     useEffect(() => {
         let subscriptions = [];
-        function keybaordAvoding(evt) {
-            if (!keyboardAvoid?.current || isShow.current) {
-                return;
-            }
-            isShow.current = true;
-            const { endCoordinates } = evt;
-            const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
-            keyboardAvoid.current.keyboardHeight = endCoordinates.height;
-            onKeyboardShow?.();
-            if (adjustPosition) {
-                // 默认沿用旧版本逻辑，在 android 原生关闭键盘避让的情况下应该将该配置设置为 false，走 mpx 的键盘避让逻辑，否则bundle内的所有input都会无法避让键盘
-                const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true;
-                const callback = () => {
-                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                        function calculateOffset() {
-                            // enableNativeKeyboardAvoding 默认开启
-                            if (enableNativeKeyboardAvoiding && isAndroid) {
-                                const aboveOffset = pageY + height - endCoordinates.screenY;
-                                const belowOffset = endCoordinates.height - aboveOffset;
-                                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
-                                const belowValue = Math.min(belowOffset, cursorSpacing);
-                                return aboveOffset > 0 ? belowValue : aboveValue;
-                            }
+        if (isIOS) {
+            subscriptions = [
+                Keyboard.addListener('keyboardWillShow', (evt) => {
+                    if (!keyboardAvoid?.current)
+                        return;
+                    const { endCoordinates } = evt;
+                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
+                    setTimeout(() => {
+                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
                             const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
-                            return aboveOffset > 0 ? belowValue : aboveValue;
-                        }
-                        cancelAnimation(offset);
-                        offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
+                            const value = aboveOffset > 0 ? belowValue : aboveValue;
+                            offset.value = withTiming(value, { duration, easing }, (finished) => {
+                                if (finished) {
+                                    // Set flexBasic after animation to trigger re-layout and reset layout information
+                                    basic.value = '99.99%';
+                                }
+                            });
+                        });
+                    });
+                }),
+                Keyboard.addListener('keyboardWillHide', resetKeyboard)
+            ];
+        }
+        else {
+            subscriptions = [
+                Keyboard.addListener('keyboardDidShow', (evt) => {
+                    if (!keyboardAvoid?.current)
+                        return;
+                    const { endCoordinates } = evt;
+                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
+                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                        const aboveOffset = pageY + height - endCoordinates.screenY;
+                        const belowOffset = endCoordinates.height - aboveOffset;
+                        const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                        const belowValue = Math.min(belowOffset, cursorSpacing);
+                        const value = aboveOffset > 0 ? belowValue : aboveValue;
+                        offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
                     });
-                };
-                (isIOS ? () => setTimeout(callback) : callback)();
-            }
-        }
-        if (isIOS) {
-            subscriptions = [Keyboard.addListener('keyboardWillShow', keybaordAvoding), Keyboard.addListener('keyboardWillHide', resetKeyboard)];
-        }
-        else {
-            subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)];
+                }),
+                Keyboard.addListener('keyboardDidHide', resetKeyboard)
+            ];
         }
         return () => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
-      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
+    return (<View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View style={[
+            contentContainerStyle,
+            animatedStyle
+        ]}>
+        {children}
+      </Animated.View>
     </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';

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

@@ -17,7 +17,7 @@ const styles = {
 };
 const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
-    const { children, value = [], bindchange, style, 'enable-wheel-animation': enableWheelAnimation = true, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { children, value = [], bindchange, style, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
     const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
     const nodeRef = useRef(null);
     const cloneRef = useRef(null);
@@ -67,7 +67,7 @@ const _PickerView = forwardRef((props, ref) => {
             columnData,
             ref: cloneRef,
             columnIndex: index,
-            key: `pick-view-${index}-${columnData.length}`,
+            key: `pick-view-${index}`,
             wrapperStyle: {
                 height: normalStyle?.height || DefaultPickerItemH,
                 itemHeight: indicatorH || DefaultPickerItemH
@@ -75,8 +75,7 @@ const _PickerView = forwardRef((props, ref) => {
             onSelectChange: onSelectChange.bind(null, index),
             initialIndex,
             pickerIndicatorStyle,
-            pickerMaskStyle,
-            enableWheelAnimation
+            pickerMaskStyle
         });
         const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({

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

@@ -5,13 +5,12 @@ import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAn
 import useNodesRef from '../useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
-import MpxPickerViewColumnItem from './pickerViewColumnItem';
-import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite';
+import MpxPickerVIewColumnItem from './pickerViewColumnItem';
 import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext';
 import { calcHeightOffsets } from './pickerViewFaces';
 const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, enableWheelAnimation = true, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
     const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     const { textStyle = {} } = splitStyle(normalStyle);
     const { textProps = {} } = splitProps(props);
@@ -44,7 +43,6 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const contentContainerStyle = useMemo(() => {
         return [{ paddingVertical: paddingHeight }];
     }, [paddingHeight]);
-    const initialContentOffsetY = useMemo(() => initialIndex * itemRawH, [initialIndex, itemRawH]);
     const getIndex = useCallback((y) => {
         const calc = Math.round(y / itemRawH);
         return Math.max(0, Math.min(calc, maxIndex));
@@ -94,6 +92,16 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             activeIndex.current = initialIndex;
         }, isIOS ? 0 : 200);
     }, [itemRawH, maxIndex, initialIndex]);
+    const onContentSizeChange = useCallback((_w, h) => {
+        const y = initialIndex * itemRawH;
+        if (y <= h) {
+            clearTimerScrollTo();
+            timerScrollTo.current = setTimeout(() => {
+                scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
+                activeIndex.current = initialIndex;
+            }, 0);
+        }
+    }, [itemRawH, initialIndex]);
     const onItemLayout = useCallback((e) => {
         const { height: rawH } = e.nativeEvent.layout;
         const roundedH = Math.round(rawH);
@@ -209,9 +217,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     }, [itemRawH, maxIndex, calcOffset, onMomentumScrollEnd]);
     const renderInnerchild = () => columnData.map((item, index) => {
-        return enableWheelAnimation
-            ? (<MpxPickerViewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>)
-            : (<MpxPickerViewColumnItemLite key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} onItemLayout={onItemLayout}/>);
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
         const innerProps = extendObject({}, layoutProps, {
@@ -232,17 +238,17 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             onScrollEndDrag,
             onMomentumScrollBegin,
             onMomentumScrollEnd,
-            contentContainerStyle,
-            contentOffset: { x: 0, y: initialContentOffsetY }
+            onContentSizeChange,
+            contentContainerStyle
         });
         return createElement(PickerViewColumnAnimationContext.Provider, { value: offsetYShared }, createElement(Reanimated.ScrollView, innerProps, renderInnerchild()));
     };
     const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
     const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
     return (<View style={[styles.wrapper, normalStyle]}>
-      {renderScollView()}
-      {renderMask()}
-      {renderIndicator()}
+        {renderScollView()}
+        {renderMask()}
+        {renderIndicator()}
     </View>);
 });
 const styles = StyleSheet.create({

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

@@ -1,20 +1,23 @@
-import React, { useMemo } from 'react';
-import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { extendObject } from '../utils';
 import { createFaces } from './pickerViewFaces';
 import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext';
 const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, visibleCount, onItemLayout }) => {
     const textStyleFromAncestor = usePickerViewStyleContext();
     const offsetYShared = usePickerViewColumnAnimationContext();
-    const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount]);
+    const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
+    useEffect(() => {
+        facesShared.value = createFaces(itemHeight, visibleCount);
+    }, [itemHeight]);
     const animatedStyles = useAnimatedStyle(() => {
-        const inputRange = facesShared.map((f) => itemHeight * (index + f.index));
+        const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
         return {
-            opacity: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.opacity), Extrapolation.CLAMP),
+            opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
             transform: [
-                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
-                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
-                { scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
+                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+                { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
             ]
         };
     });

package/lib/runtime/components/react/dist/mpx-portal/index.jsx

@@ -1,18 +1,14 @@
 import { useContext, useEffect, useRef } from 'react';
-import { PortalContext, ProviderContext, RouteContext, VarContext } from '../context';
+import { PortalContext, RouteContext, VarContext } from '../context';
 import PortalHost, { portal } from './portal-host';
 const Portal = ({ children }) => {
     const manager = useContext(PortalContext);
     const keyRef = useRef(null);
     const { pageId } = useContext(RouteContext) || {};
     const varContext = useContext(VarContext);
-    const parentProvides = useContext(ProviderContext);
     if (varContext) {
         children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>);
     }
-    if (parentProvides) {
-        children = (<ProviderContext.Provider value={parentProvides} key='providerContextWrap'>{children}</ProviderContext.Provider>);
-    }
     useEffect(() => {
         manager.update(keyRef.current, children);
     }, [children]);

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

@@ -48,6 +48,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
+    const snapScrollTop = useRef(0);
+    const snapScrollLeft = useRef(0);
     const [refreshing, setRefreshing] = useState(false);
     const [enableScroll, setEnableScroll] = useState(true);
     const enableScrollValue = useSharedValue(true);
@@ -125,12 +127,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
     }
     useEffect(() => {
-        initialTimeout.current = setTimeout(() => {
-            scrollToOffset(scrollLeft, scrollTop);
-        }, 0);
-        return () => {
-            initialTimeout.current && clearTimeout(initialTimeout.current);
-        };
+        if (snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft) {
+            initialTimeout.current = setTimeout(() => {
+                scrollToOffset(scrollLeft, scrollTop);
+            }, 0);
+            return () => {
+                initialTimeout.current && clearTimeout(initialTimeout.current);
+            };
+        }
     }, [scrollTop, scrollLeft]);
     useEffect(() => {
         if (scrollIntoView && __selectRef) {
@@ -312,6 +316,10 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function scrollToOffset(x = 0, y = 0, animated = scrollWithAnimation) {
         if (scrollViewRef.current) {
             scrollViewRef.current.scrollTo({ x, y, animated });
+            scrollOptions.current.scrollLeft = x;
+            scrollOptions.current.scrollTop = y;
+            snapScrollLeft.current = x;
+            snapScrollTop.current = y;
         }
     }
     function onScrollTouchMove(e) {

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

@@ -1,40 +1,16 @@
 /**
  * ✔ selectable
  * ✘ space
- * ✔ decode
+ * ✘ decode
  */
 import { Text } from 'react-native';
-import { useRef, forwardRef, createElement, Children } from 'react';
+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 decodeMap = {
-    '&lt;': '<',
-    '&gt;': '>',
-    '&quot;': '"',
-    '&amp;': '&',
-    '&#39;': '\'',
-    '&nbsp;': ' '
-};
-const encodedRe = /&(?:lt|gt|quot|amp|#39|nbsp);/g;
-function decode(value) {
-    if (value != null) {
-        return value.replace(encodedRe, function (match) {
-            return decodeMap[match];
-        });
-    }
-}
-function getDecodedChildren(children) {
-    return Children.map(children, (child) => {
-        if (typeof child === 'string') {
-            return decode(child);
-        }
-        return child;
-    });
-}
 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, decode } = props;
+    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, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
@@ -52,13 +28,9 @@ const _Text = forwardRef((props, ref) => {
         selectable: !!selectable || !!userSelect,
         allowFontScaling
     }), [
-        'user-select',
-        'decode'
+        'user-select'
     ]);
-    const children = decode ? getDecodedChildren(props.children) : props.children;
-    let finalComponent = createElement(Text, innerProps, wrapChildren(extendObject({}, props, {
-        children
-    }), {
+    let finalComponent = createElement(Text, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     }));

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

@@ -398,7 +398,7 @@ function parseLinearGradient(text) {
     });
 }
 function parseBgImage(text) {
-    if (!text || text === 'none')
+    if (!text)
         return {};
     const src = parseUrl(text);
     if (src)

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

@@ -176,7 +176,7 @@ const _WebView = forwardRef((props, ref) => {
                 }
                 break;
             case 'postMessage':
-                bindmessage && bindmessage(getCustomEvent('message', {}, {
+                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
                     detail: {
                         data: params[0]?.data
                     }

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

@@ -169,34 +169,24 @@ function transformPercent(styleObj, percentKeyPaths, percentConfig) {
 function resolveVar(input, varContext) {
     const parsed = parseFunc(input, 'var');
     const replaced = new ReplaceSource(input);
-    for (const { start, end, args } of parsed) {
+    parsed.forEach(({ start, end, args }) => {
         const varName = args[0];
-        const fallback = args[1];
+        const fallback = args[1] || '';
         let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback;
-        if (varValue === undefined)
-            return;
         if (varUseRegExp.test(varValue)) {
-            varValue = resolveVar(varValue, varContext);
-            if (varValue === undefined)
-                return;
+            varValue = '' + resolveVar(varValue, varContext);
         }
         else {
-            varValue = global.__formatValue(varValue);
+            varValue = '' + global.__formatValue(varValue);
         }
         replaced.replace(start, end - 1, varValue);
-    }
+    });
     return global.__formatValue(replaced.source());
 }
 function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
     varKeyPaths.forEach((varKeyPath) => {
         setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
-            const resolved = resolveVar(value, varContext);
-            if (resolved === undefined) {
-                delete target[key];
-                error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`);
-                return;
-            }
-            target[key] = resolved;
+            target[key] = resolveVar(value, varContext);
             visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });