@mpxjs/webpack-plugin 2.10.1 → 2.10.2

package/lib/index.js

@@ -1598,7 +1598,7 @@ class MpxWebpackPlugin {
         name: 'MpxWebpackPlugin',
         stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
       }, () => {
-        if (isWeb(mpx.mode) || isReact(mpx.mode)) return
+        if (isWeb(mpx.mode)) return
 
         if (this.options.generateBuildMap) {
           const pagesMap = compilation.__mpx__.pagesMap
@@ -1637,6 +1637,16 @@ class MpxWebpackPlugin {
 
           const originalSource = compilation.assets[chunkFile]
           const source = new ConcatSource()
+
+          if (isReact(mpx.mode)) {
+            // 添加 @refresh reset 注释用于在 React HMR 时刷新组件
+            source.add('/* @refresh reset */\n')
+            source.add(originalSource)
+            compilation.assets[chunkFile] = source
+            processedChunk.add(chunk)
+            return
+          }
+
           source.add(`\nvar ${globalObject} = {};\n`)
 
           relativeChunks.forEach((relativeChunk, index) => {

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

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

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

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

package/lib/react/processScript.js

@@ -15,6 +15,7 @@ module.exports = function (script, {
   localPagesMap
 }, callback) {
   let scriptSrcMode = srcMode
+  const mode = loaderContext.getMpx().mode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
@@ -26,7 +27,7 @@ module.exports = function (script, {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+${mode === 'ios' ? "import { createNativeStackNavigator as createStackNavigator } from '@react-navigation/native-stack'" : "import { createStackNavigator } from '@react-navigation/stack'"}
 import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
 import { useHeaderHeight } from '@react-navigation/elements';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -34,7 +35,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createStackNavigator: createNativeStackNavigator,
+  createStackNavigator: createStackNavigator,
   useHeaderHeight: useHeaderHeight,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,

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

@@ -1,8 +1,8 @@
-import React, { ReactNode, useContext, useEffect } from 'react'
+import React, { ReactNode, useContext, useEffect, useMemo } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyle } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated'
+import { GestureDetector, Gesture } from 'react-native-gesture-handler'
 import { KeyboardAvoidContext } from './context'
-import { extendObject } from './utils'
 
 type KeyboardAvoidViewProps = {
   children?: ReactNode
@@ -19,6 +19,17 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
+  const dismiss = () => {
+    Keyboard.isVisible() && Keyboard.dismiss()
+  }
+
+  const gesture = useMemo(() => {
+    return Gesture.Tap()
+      .onEnd(() => {
+        runOnJS(dismiss)()
+      })
+  }, [])
+
   const animatedStyle = useAnimatedStyle(() => {
     return Object.assign(
       {
@@ -29,10 +40,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   })
 
   const resetKeyboard = () => {
-    keyboardAvoid?.current && extendObject(keyboardAvoid.current, {
-      cursorSpacing: 0,
-      ref: null
-    })
+    if (keyboardAvoid?.current) {
+      keyboardAvoid.current = null
+    }
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -48,7 +58,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
           const { ref, cursorSpacing = 0 } = keyboardAvoid.current
           setTimeout(() => {
             ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-              const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
+              const aboveOffset = pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
@@ -92,16 +102,18 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <View style={style}>
-      <Animated.View
-        style={[
-          contentContainerStyle,
-          animatedStyle
-        ]}
-      >
-        {children}
-      </Animated.View>
-    </View>
+    <GestureDetector gesture={gesture}>
+      <View style={style}>
+        <Animated.View
+          style={[
+            contentContainerStyle,
+            animatedStyle
+          ]}
+        >
+          {children}
+        </Animated.View>
+      </View>
+    </GestureDetector>
   )
 }
 

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

@@ -5,10 +5,9 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
-export type KeyboardAvoidContextValue = MutableRefObject<{
-  cursorSpacing: number
-  ref: MutableRefObject<any>
-}>
+export type KeyboardAvoidContextValue = MutableRefObject<
+  { cursorSpacing: number, ref: MutableRefObject<any> } | null
+>
 
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }

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

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Keyboard, Platform, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
-import { extendObject } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const isIOS = Platform.OS === 'ios';
     const duration = isIOS ? 250 : 300;
@@ -10,16 +10,24 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    const dismiss = () => {
+        Keyboard.isVisible() && Keyboard.dismiss();
+    };
+    const gesture = useMemo(() => {
+        return Gesture.Tap()
+            .onEnd(() => {
+            runOnJS(dismiss)();
+        });
+    }, []);
     const animatedStyle = useAnimatedStyle(() => {
         return Object.assign({
             transform: [{ translateY: -offset.value }]
         }, isIOS ? {} : { flexBasis: basic.value });
     });
     const resetKeyboard = () => {
-        keyboardAvoid?.current && extendObject(keyboardAvoid.current, {
-            cursorSpacing: 0,
-            ref: null
-        });
+        if (keyboardAvoid?.current) {
+            keyboardAvoid.current = null;
+        }
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -34,7 +42,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                     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 aboveOffset = pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
@@ -77,13 +85,15 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<View style={style}>
-      <Animated.View style={[
+    return (<GestureDetector gesture={gesture}>
+      <View style={style}>
+        <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-        {children}
-      </Animated.View>
-    </View>);
+          {children}
+        </Animated.View>
+      </View>
+    </GestureDetector>);
 };
 export default KeyboardAvoidingView;

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

@@ -272,7 +272,7 @@ const Image = forwardRef((props, ref) => {
         uri: src,
         onLayout: onSvgLoad,
         onError: binderror && onSvgError,
-        style: extendObject({ transformOrigin: 'top left' }, modeStyle)
+        style: extendObject({ transformOrigin: 'left top' }, modeStyle)
     }));
     const BaseImage = renderImage(extendObject({
         source: { uri: src },
@@ -280,7 +280,7 @@ const Image = forwardRef((props, ref) => {
         onLoad: bindload && onImageLoad,
         onError: binderror && onImageError,
         style: extendObject({
-            transformOrigin: 'top left',
+            transformOrigin: 'left top',
             width: isCropMode ? imageWidth : '100%',
             height: isCropMode ? imageHeight : '100%'
         }, isCropMode ? modeStyle : {})

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

@@ -4,7 +4,7 @@
  * ✔ password
  * ✔ placeholder
  * - placeholder-style: Only support color.
- * ✘ placeholder-class
+ * - placeholder-class: Only support color.
  * ✔ disabled
  * ✔ maxlength
  * ✔ cursor-spacing
@@ -40,7 +40,7 @@
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { Platform, TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
@@ -54,7 +54,7 @@ const keyboardTypeMap = {
     }) || ''
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
@@ -76,7 +76,6 @@ const Input = forwardRef((props, ref) => {
     };
     const keyboardType = keyboardTypeMap[type];
     const defaultValue = parseValue(value);
-    const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
     const textAlignVertical = multiline ? 'top' : 'auto';
     const tmpValue = useRef(defaultValue);
     const cursorIndex = useRef(0);
@@ -85,7 +84,7 @@ const Input = forwardRef((props, ref) => {
     const [contentHeight, setContentHeight] = useState(0);
     const [selection, setSelection] = useState({ start: -1, end: -1 });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
-        ? { minHeight: Math.max(style?.minHeight || 35, contentHeight) }
+        ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
     const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
@@ -106,44 +105,54 @@ const Input = forwardRef((props, ref) => {
             setSelection({ start: selectionStart, end: selectionEnd });
         }
     }, [cursor, selectionStart, selectionEnd]);
-    const onTextInput = ({ nativeEvent }) => {
-        if (!bindinput && !bindblur)
-            return;
-        const { range: { start, end }, text } = nativeEvent;
-        cursorIndex.current = start < end ? start : start + text.length;
+    // have not selection on the Android platformg
+    const getCursorIndex = (changedSelection, prevValue, curValue) => {
+        if (changedSelection)
+            return changedSelection.end;
+        if (!prevValue || !curValue || prevValue.length === curValue.length)
+            return curValue.length;
+        const prevStr = prevValue.substring(cursorIndex.current);
+        const curStr = curValue.substring(cursorIndex.current);
+        return cursorIndex.current + curStr.length - prevStr.length;
     };
     const onChange = (evt) => {
-        tmpValue.current = evt.nativeEvent.text;
-        if (!bindinput)
+        const { text, selection } = evt.nativeEvent;
+        // will trigger twice on the Android platformg, prevent the second trigger
+        if (tmpValue.current === text)
             return;
-        const result = bindinput(getCustomEvent('input', evt, {
-            detail: {
-                value: evt.nativeEvent.text,
-                cursor: cursorIndex.current
-            },
-            layoutRef
-        }, props));
-        if (typeof result === 'string') {
-            tmpValue.current = result;
-            setInputValue(result);
+        const index = getCursorIndex(selection, tmpValue.current, text);
+        tmpValue.current = text;
+        cursorIndex.current = index;
+        if (bindinput) {
+            const result = bindinput(getCustomEvent('input', evt, {
+                detail: {
+                    value: tmpValue.current,
+                    cursor: cursorIndex.current
+                },
+                layoutRef
+            }, props));
+            if (typeof result === 'string') {
+                tmpValue.current = result;
+                setInputValue(result);
+            }
+            else {
+                setInputValue(tmpValue.current);
+            }
         }
         else {
             setInputValue(tmpValue.current);
         }
     };
     const setKeyboardAvoidContext = () => {
-        if (adjustPosition && keyboardAvoid?.current) {
-            extendObject(keyboardAvoid.current, {
-                cursorSpacing,
-                ref: nodeRef
-            });
+        if (adjustPosition && keyboardAvoid) {
+            keyboardAvoid.current = { cursorSpacing, ref: nodeRef };
         }
     };
-    const onInputTouchStart = () => {
+    const onTouchStart = () => {
         // sometimes the focus event occurs later than the keyboardWillShow event
         setKeyboardAvoidContext();
     };
-    const onInputFocus = (evt) => {
+    const onFocus = (evt) => {
         setKeyboardAvoidContext();
         bindfocus && bindfocus(getCustomEvent('focus', evt, {
             detail: {
@@ -152,7 +161,7 @@ const Input = forwardRef((props, ref) => {
             layoutRef
         }, props));
     };
-    const onInputBlur = (evt) => {
+    const onBlur = (evt) => {
         bindblur && bindblur(getCustomEvent('blur', evt, {
             detail: {
                 value: tmpValue.current || '',
@@ -179,11 +188,14 @@ const Input = forwardRef((props, ref) => {
         }, props));
     };
     const onSelectionChange = (evt) => {
-        setSelection(evt.nativeEvent.selection);
+        const { selection } = evt.nativeEvent;
+        const { start, end } = selection;
+        cursorIndex.current = start;
+        setSelection(selection);
         bindselectionchange && bindselectionchange(getCustomEvent('selectionchange', evt, {
             detail: {
-                selectionStart: evt.nativeEvent.selection.start,
-                selectionEnd: evt.nativeEvent.selection.end
+                selectionStart: start,
+                selectionEnd: end
             },
             layoutRef
         }, props));
@@ -252,24 +264,22 @@ const Input = forwardRef((props, ref) => {
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        returnKeyType: confirmType,
         selection: selection,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
-        placeholderTextColor: placeholderTextColor,
+        placeholderTextColor: placeholderStyle?.color,
         multiline: !!multiline
-    }, layoutProps, {
-        onTouchStart: onInputTouchStart,
-        onFocus: onInputFocus,
-        onBlur: onInputBlur,
+    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
+        onTouchStart,
+        onFocus,
+        onBlur,
+        onChange,
+        onSelectionChange,
+        onContentSizeChange,
         onKeyPress: bindconfirm && onKeyPress,
-        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: onSelectionChange,
-        onTextInput: onTextInput,
-        onChange: onChange,
-        onContentSizeChange: onContentSizeChange
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing
     }), [
         'type',
         'password',

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

@@ -41,7 +41,7 @@ import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, ext
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const [refreshing, setRefreshing] = useState(true);
@@ -73,7 +73,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled,
             fastDeceleration: false,
             decelerationDisabled: false,
-            scrollTo: scrollToOffset
+            scrollTo
         },
         gestureRef: scrollViewRef
     });
@@ -112,6 +112,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
         firstScrollIntoViewChange.current = true;
     }, [scrollIntoView]);
+    function scrollTo({ top = 0, left = 0, animated = false }) {
+        scrollToOffset(left, top, animated);
+    }
     function handleScrollIntoView() {
         const refs = __selectRef(`#${scrollIntoView}`, 'node');
         if (!refs)
@@ -230,9 +233,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             }
         }
     }
-    function scrollToOffset(x = 0, y = 0) {
+    function scrollToOffset(x = 0, y = 0, animated = scrollWithAnimation) {
         if (scrollViewRef.current) {
-            scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
+            scrollViewRef.current.scrollTo({ x, y, animated });
             scrollOptions.current.scrollLeft = x;
             scrollOptions.current.scrollTop = y;
             snapScrollLeft.current = x;

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

@@ -3,33 +3,33 @@
  *   Subtraction:
  *     type, password, confirm-hold
  *   Addition:
- *     - confirm-type: Not support `return`
+ *     ✔ confirm-type
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
 import { forwardRef, createElement } from 'react';
-import { Keyboard } from 'react-native';
 import Input from './mpx-input';
 import { omit, extendObject } from './utils';
 const DEFAULT_TEXTAREA_WIDTH = 300;
 const DEFAULT_TEXTAREA_HEIGHT = 150;
 const Textarea = forwardRef((props, ref) => {
-    const { style = {} } = props;
+    const { style = {}, 'confirm-type': confirmType = 'return' } = props;
     const restProps = omit(props, [
         'ref',
         'type',
         'style',
         'password',
         'multiline',
+        'confirm-type',
         'confirm-hold'
     ]);
     return createElement(Input, extendObject(restProps, {
-        ref: ref,
+        ref,
+        confirmType,
         multiline: true,
-        confirmType: 'next',
-        bindblur: () => Keyboard.dismiss(),
+        'confirm-type': confirmType,
         style: extendObject({
             width: DEFAULT_TEXTAREA_WIDTH,
             height: DEFAULT_TEXTAREA_HEIGHT

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

@@ -155,8 +155,8 @@ const _WebView = forwardRef((props, ref) => {
         switch (type) {
             case 'setTitle':
                 { // case下不允许直接声明，包个块解决该问题
-                    const title = postData._documentTitle;
-                    if (title) {
+                    const title = postData._documentTitle?.trim();
+                    if (title !== undefined) {
                         navigation && navigation.setOptions({ title });
                     }
                 }
@@ -252,6 +252,7 @@ const _WebView = forwardRef((props, ref) => {
     };
     const onLoadEnd = function (res) {
         if (__mpx_mode__ === 'android') {
+            res.persist();
             setTimeout(() => {
                 onLoadEndHandle(res);
             }, 0);
@@ -282,7 +283,7 @@ const _WebView = forwardRef((props, ref) => {
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>)
-            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={isLoaded}></WebView>)}
+            : (<WebView style={defaultWebViewStyle} pointerEvents={isLoaded ? 'auto' : 'none'} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={true}></WebView>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

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

@@ -67,20 +67,6 @@ export const useUpdateEffect = (effect, deps) => {
         }
     }, deps);
 };
-/**
- * 解析行内样式
- * @param inlineStyle
- * @returns
- */
-export const parseInlineStyle = (inlineStyle = '') => {
-    return inlineStyle.split(';').reduce((styleObj, style) => {
-        const [k, v, ...rest] = style.split(':');
-        if (rest.length || !v || !k)
-            return styleObj;
-        const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
-        return extendObject(styleObj, { [key]: global.__formatValue(v.trim()) });
-    }, {});
-};
 export const parseUrl = (cssUrl = '') => {
     if (!cssUrl)
         return;

package/lib/runtime/components/react/mpx-image.tsx

@@ -411,7 +411,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       onLayout: onSvgLoad,
       onError: binderror && onSvgError,
       style: extendObject(
-        { transformOrigin: 'top left' },
+        { transformOrigin: 'left top' },
         modeStyle
       )
     })
@@ -426,7 +426,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
         onError: binderror && onImageError,
         style: extendObject(
           {
-            transformOrigin: 'top left',
+            transformOrigin: 'left top',
             width: isCropMode ? imageWidth : '100%',
             height: isCropMode ? imageHeight : '100%'
           },

package/lib/runtime/components/react/mpx-input.tsx

@@ -4,7 +4,7 @@
  * ✔ password
  * ✔ placeholder
  * - placeholder-style: Only support color.
- * ✘ placeholder-class
+ * - placeholder-class: Only support color.
  * ✔ disabled
  * ✔ maxlength
  * ✔ cursor-spacing
@@ -54,7 +54,7 @@ import {
   TextInputSubmitEditingEventData
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -73,6 +73,8 @@ type InputStyle = Omit<
 
 type Type = 'text' | 'number' | 'idcard' | 'digit'
 
+type ConfirmType = 'done' | 'send' | 'search' | 'next' | 'go' | 'return'
+
 export interface InputProps {
   name?: string
   style?: InputStyle & Record<string, any>
@@ -85,13 +87,13 @@ export interface InputProps {
   maxlength?: number
   'auto-focus'?: boolean
   focus?: boolean
-  'confirm-type'?: 'done' | 'send' | 'search' | 'next' | 'go'
+  'confirm-type'?: ConfirmType
   'confirm-hold'?: boolean
   cursor?: number
   'cursor-color'?: string
   'selection-start'?: number
   'selection-end'?: number
-  'placeholder-style'?: string
+  'placeholder-style'?: { color?: string }
   'enable-offset'?: boolean,
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
@@ -133,7 +135,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     type = 'text',
     value,
     password,
-    'placeholder-style': placeholderStyle,
+    'placeholder-style': placeholderStyle = {},
     disabled,
     maxlength = 140,
     'cursor-spacing': cursorSpacing = 0,
@@ -185,10 +187,9 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const keyboardType = keyboardTypeMap[type]
   const defaultValue = parseValue(value)
-  const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color
   const textAlignVertical = multiline ? 'top' : 'auto'
 
-  const tmpValue = useRef<string | undefined>(defaultValue)
+  const tmpValue = useRef<string>(defaultValue)
   const cursorIndex = useRef<number>(0)
   const lineCount = useRef<number>(0)
 
@@ -200,7 +201,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     { padding: 0, backgroundColor: '#fff' },
     style,
     multiline && autoHeight
-      ? { minHeight: Math.max((style as any)?.minHeight || 35, contentHeight) }
+      ? { height: 'auto', minHeight: Math.max((style as any)?.minHeight || 35, contentHeight) }
       : {}
   )
 
@@ -232,55 +233,64 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }, [cursor, selectionStart, selectionEnd])
 
-  const onTextInput = ({ nativeEvent }: NativeSyntheticEvent<TextInputTextInputEventData>) => {
-    if (!bindinput && !bindblur) return
-    const {
-      range: { start, end },
-      text
-    } = nativeEvent
-    cursorIndex.current = start < end ? start : start + text.length
+  // have not selection on the Android platformg
+  const getCursorIndex = (
+    changedSelection: TextInputSelectionChangeEventData['selection'] | undefined,
+    prevValue: string,
+    curValue: string
+  ) => {
+    if (changedSelection) return changedSelection.end
+    if (!prevValue || !curValue || prevValue.length === curValue.length) return curValue.length
+    const prevStr = prevValue.substring(cursorIndex.current)
+    const curStr = curValue.substring(cursorIndex.current)
+    return cursorIndex.current + curStr.length - prevStr.length
   }
 
-  const onChange = (evt: NativeSyntheticEvent<TextInputChangeEventData>) => {
-    tmpValue.current = evt.nativeEvent.text
-    if (!bindinput) return
-    const result = bindinput(
-      getCustomEvent(
-        'input',
-        evt,
-        {
-          detail: {
-            value: evt.nativeEvent.text,
-            cursor: cursorIndex.current
+  const onChange = (evt: NativeSyntheticEvent<TextInputChangeEventData & TextInputSelectionChangeEventData>) => {
+    const { text, selection } = evt.nativeEvent
+    // will trigger twice on the Android platformg, prevent the second trigger
+    if (tmpValue.current === text) return
+    const index = getCursorIndex(selection, tmpValue.current, text)
+    tmpValue.current = text
+    cursorIndex.current = index
+    if (bindinput) {
+      const result = bindinput(
+        getCustomEvent(
+          'input',
+          evt,
+          {
+            detail: {
+              value: tmpValue.current,
+              cursor: cursorIndex.current
+            },
+            layoutRef
           },
-          layoutRef
-        },
-        props
+          props
+        )
       )
-    )
-    if (typeof result === 'string') {
-      tmpValue.current = result
-      setInputValue(result)
+      if (typeof result === 'string') {
+        tmpValue.current = result
+        setInputValue(result)
+      } else {
+        setInputValue(tmpValue.current)
+      }
     } else {
       setInputValue(tmpValue.current)
     }
   }
 
   const setKeyboardAvoidContext = () => {
-    if (adjustPosition && keyboardAvoid?.current) {
-      extendObject(keyboardAvoid.current, {
-        cursorSpacing,
-        ref: nodeRef
-      })
+    if (adjustPosition && keyboardAvoid) {
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef }
     }
   }
 
-  const onInputTouchStart = () => {
+  const onTouchStart = () => {
     // sometimes the focus event occurs later than the keyboardWillShow event
     setKeyboardAvoidContext()
   }
 
-  const onInputFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
     bindfocus && bindfocus(
       getCustomEvent(
@@ -297,7 +307,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     )
   }
 
-  const onInputBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     bindblur && bindblur(
       getCustomEvent(
         'blur',
@@ -348,15 +358,18 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onSelectionChange = (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-    setSelection(evt.nativeEvent.selection)
+    const { selection } = evt.nativeEvent
+    const { start, end } = selection
+    cursorIndex.current = start
+    setSelection(selection)
     bindselectionchange && bindselectionchange(
       getCustomEvent(
         'selectionchange',
         evt,
         {
           detail: {
-            selectionStart: evt.nativeEvent.selection.start,
-            selectionEnd: evt.nativeEvent.selection.end
+            selectionStart: start,
+            selectionEnd: end
           },
           layoutRef
         },
@@ -444,26 +457,25 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        returnKeyType: confirmType,
         selection: selection,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
-        placeholderTextColor: placeholderTextColor,
+        placeholderTextColor: placeholderStyle?.color,
         multiline: !!multiline
       },
+      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType },
       layoutProps,
       {
-        onTouchStart: onInputTouchStart,
-        onFocus: onInputFocus,
-        onBlur: onInputBlur,
+        onTouchStart,
+        onFocus,
+        onBlur,
+        onChange,
+        onSelectionChange,
+        onContentSizeChange,
         onKeyPress: bindconfirm && onKeyPress,
-        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: onSelectionChange,
-        onTextInput: onTextInput,
-        onChange: onChange,
-        onContentSizeChange: onContentSizeChange
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing
       }
     ),
     [

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -124,7 +124,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'paging-enabled': pagingEnabled = false,
     'upper-threshold': upperThreshold = 50,
     'lower-threshold': lowerThreshold = 50,
-    'scroll-with-animation': scrollWithAnimation,
+    'scroll-with-animation': scrollWithAnimation = false,
     'refresher-enabled': refresherEnabled,
     'refresher-default-style': refresherDefaultStyle,
     'refresher-background': refresherBackground,
@@ -189,7 +189,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       pagingEnabled,
       fastDeceleration: false,
       decelerationDisabled: false,
-      scrollTo: scrollToOffset
+      scrollTo
     },
     gestureRef: scrollViewRef
   })
@@ -236,6 +236,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     firstScrollIntoViewChange.current = true
   }, [scrollIntoView])
 
+  function scrollTo ({ top = 0, left = 0, animated = false } : { top?: number; left?: number; animated?: boolean }) {
+    scrollToOffset(left, top, animated)
+  }
+
   function handleScrollIntoView () {
     const refs = __selectRef!(`#${scrollIntoView}`, 'node')
     if (!refs) return
@@ -371,9 +375,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       }
     }
   }
-  function scrollToOffset (x = 0, y = 0) {
+  function scrollToOffset (x = 0, y = 0, animated = scrollWithAnimation) {
     if (scrollViewRef.current) {
-      scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation })
+      scrollViewRef.current.scrollTo({ x, y, animated })
       scrollOptions.current.scrollLeft = x
       scrollOptions.current.scrollTop = y
       snapScrollLeft.current = x

package/lib/runtime/components/react/mpx-textarea.tsx

@@ -3,14 +3,14 @@
  *   Subtraction:
  *     type, password, confirm-hold
  *   Addition:
- *     - confirm-type: Not support `return`
+ *     ✔ confirm-type
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
 import { JSX, forwardRef, createElement } from 'react'
-import { Keyboard, TextInput } from 'react-native'
+import { TextInput } from 'react-native'
 import Input, { InputProps, PrivateInputProps } from './mpx-input'
 import { omit, extendObject } from './utils'
 import { HandlerRef } from './useNodesRef'
@@ -25,7 +25,10 @@ const DEFAULT_TEXTAREA_HEIGHT = 150
 
 const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
   (props, ref): JSX.Element => {
-    const { style = {} } = props
+    const {
+      style = {},
+      'confirm-type': confirmType = 'return'
+    } = props
 
     const restProps = omit(props, [
       'ref',
@@ -33,16 +36,17 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
       'style',
       'password',
       'multiline',
+      'confirm-type',
       'confirm-hold'
     ])
 
     return createElement(
       Input,
       extendObject(restProps, {
-        ref: ref,
+        ref,
+        confirmType,
         multiline: true,
-        confirmType: 'next',
-        bindblur: () => Keyboard.dismiss(),
+        'confirm-type': confirmType,
         style: extendObject({
           width: DEFAULT_TEXTAREA_WIDTH,
           height: DEFAULT_TEXTAREA_HEIGHT

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -207,8 +207,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     switch (type) {
       case 'setTitle':
         { // case下不允许直接声明，包个块解决该问题
-          const title = postData._documentTitle
-          if (title) {
+          const title = postData._documentTitle?.trim()
+          if (title !== undefined) {
             navigation && navigation.setOptions({ title })
           }
         }
@@ -303,6 +303,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
   const onLoadEnd = function (res: WebViewEvent) {
     if (__mpx_mode__ === 'android') {
+      res.persist()
       setTimeout(() => {
         onLoadEndHandle(res)
       }, 0)
@@ -338,6 +339,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             )
           : (<WebView
             style={ defaultWebViewStyle }
+            pointerEvents={ isLoaded ? 'auto' : 'none' }
             source={{ uri: src }}
             ref={webViewRef}
             javaScriptEnabled={true}
@@ -349,7 +351,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             onHttpError={onHttpError}
             onError={onError}
             onLoadStart={onLoadStart}
-            allowsBackForwardNavigationGestures={isLoaded}
+            allowsBackForwardNavigationGestures={true}
       ></WebView>)}
       </Portal>
   )

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

@@ -80,20 +80,6 @@ export const useUpdateEffect = (effect: any, deps: any) => {
   }, deps)
 }
 
-/**
- * 解析行内样式
- * @param inlineStyle
- * @returns
- */
-export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
-  return inlineStyle.split(';').reduce((styleObj, style) => {
-    const [k, v, ...rest] = style.split(':')
-    if (rest.length || !v || !k) return styleObj
-    const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
-    return extendObject(styleObj, { [key]: global.__formatValue(v.trim()) })
-  }, {})
-}
-
 export const parseUrl = (cssUrl = '') => {
   if (!cssUrl) return
   const match = cssUrl.match(URL_REGEX)

package/lib/template-compiler/compiler.js

@@ -38,7 +38,7 @@ const endTag = new RegExp(('^<\\/' + qnameCapture + '[^>]*>'))
 const doctype = /^<!DOCTYPE [^>]+>/i
 const comment = /^<!--/
 const conditionalComment = /^<!\[/
-const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view)$/
+const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view|input|textarea)$/
 let IS_REGEX_CAPTURING_BROKEN = false
 'x'.replace(/x(.)?/g, function (m, g) {
   IS_REGEX_CAPTURING_BROKEN = g === ''
@@ -1104,7 +1104,7 @@ function processStyleReact (el, options) {
   }
 
   if (specialClassReg.test(el.tag)) {
-    const staticClassNames = ['hover', 'indicator', 'mask']
+    const staticClassNames = ['hover', 'indicator', 'mask', 'placeholder']
     staticClassNames.forEach((className) => {
       let staticClass = el.attrsMap[className + '-class'] || ''
       let staticStyle = getAndRemoveAttr(el, className + '-style').val || ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.0",
+    "@mpxjs/utils": "^2.10.2",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -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.1",
+    "@mpxjs/api-proxy": "^2.10.2",
     "@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": "7e4f9ab5528f1ab0ae08fdfad1bfbbb445088848"
+  "gitHead": "4445de7c3ce29fb0166d3bb77a1a0460e41a32d3"
 }