@mpxjs/webpack-plugin 2.10.3-beta.4 → 2.10.4-beta.2

package/lib/index.js

@@ -131,7 +131,7 @@ class MpxWebpackPlugin {
       errors.push('MpxWebpackPlugin supports mode to be "web" only when srcMode is set to "wx"!')
     }
     if (isReact(options.mode) && options.srcMode !== 'wx') {
-      errors.push('MpxWebpackPlugin supports mode to be "ios" or "android" of "harmony" only when srcMode is set to "wx"!')
+      errors.push('MpxWebpackPlugin supports mode to be "ios" | "android" | "harmony" only when srcMode is set to "wx"!')
     }
     if (options.dynamicComponentRules && !options.dynamicRuntime) {
       errors.push('Please make sure you have set dynamicRuntime true in mpx webpack plugin config because you have use the dynamic runtime feature.')

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

@@ -62,7 +62,7 @@ module.exports = function ({ print }) {
         test: 'type',
         web (prop) {
           let { name, value } = prop
-          if (value === 'idcard' || value === 'digit') {
+          if (value === 'idcard') {
             webValueLog(prop)
             value = 'text'
           }

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

@@ -25,15 +25,15 @@ module.exports = function ({ print }) {
     },
     ios (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-text'
+      return el.isSimple ? 'mpx-simple-text' : 'mpx-text'
     },
     android (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-text'
+      return el.isSimple ? 'mpx-simple-text' : 'mpx-text'
     },
     harmony (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-text'
+      return el.isSimple ? 'mpx-simple-text' : 'mpx-text'
     },
     props: [
       {
@@ -59,6 +59,21 @@ module.exports = function ({ print }) {
           el.isBuiltIn = true
         },
         qa: qaPropLog
+      },
+      {
+        test: /^(is-simple)$/,
+        android (prop, { el }) {
+          el.isSimple = true
+          return false
+        },
+        harmony (prop, { el }) {
+          el.isSimple = true
+          return false
+        },
+        ios (prop, { el }) {
+          el.isSimple = true
+          return false
+        }
       }
     ]
   }

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

@@ -31,12 +31,10 @@ module.exports = function ({ print }) {
     android (tag, { el }) {
       el.isBuiltIn = true
       return el.isSimple ? 'mpx-simple-view' : 'mpx-view'
-      return 'mpx-view'
     },
     harmony (tag, { el }) {
       el.isBuiltIn = true
       return el.isSimple ? 'mpx-simple-view' : 'mpx-view'
-      return 'mpx-view'
     },
     qa (tag) {
       return 'div'

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

@@ -8,6 +8,41 @@ const normalize = require('../../../utils/normalize')
 const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
+  function getRnDirectiveEventHandle (mode) {
+    return function ({ name, value }, { eventRules, el }) {
+      const match = this.test.exec(name)
+      const prefix = match[1]
+      const eventName = match[2]
+      const modifierStr = match[3] || ''
+      const meta = {
+        modifierStr
+      }
+      const rPrefix = runRules(spec.event.prefix, prefix, { mode })
+      const rEventName = runRules(eventRules, eventName, { mode, data: { el } })
+      return {
+        name: rPrefix + rEventName + meta.modifierStr,
+        value
+      }
+    }
+  }
+
+  function rnEventRulesHandle (eventName) {
+    const eventMap = {
+      tap: 'tap',
+      longtap: 'longpress',
+      longpress: 'longpress',
+      touchstart: 'touchstart',
+      touchmove: 'touchmove',
+      touchend: 'touchend',
+      touchcancel: 'touchcancel'
+    }
+    if (eventMap[eventName]) {
+      return eventMap[eventName]
+    } else {
+      error(`React native environment does not support [${eventName}] event!`)
+    }
+  }
+
   const spec = {
     supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android', 'harmony'],
     // props预处理
@@ -389,51 +424,9 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
-        ios ({ name, value }, { eventRules, el }) {
-          const match = this.test.exec(name)
-          const prefix = match[1]
-          const eventName = match[2]
-          const modifierStr = match[3] || ''
-          const meta = {
-            modifierStr
-          }
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ios' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'ios', data: { el } })
-          return {
-            name: rPrefix + rEventName + meta.modifierStr,
-            value
-          }
-        },
-        android ({ name, value }, { eventRules, el }) {
-          const match = this.test.exec(name)
-          const prefix = match[1]
-          const eventName = match[2]
-          const modifierStr = match[3] || ''
-          const meta = {
-            modifierStr
-          }
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'android' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'android', data: { el } })
-          return {
-            name: rPrefix + rEventName + meta.modifierStr,
-            value
-          }
-        },
-        harmony ({ name, value }, { eventRules, el }) {
-          const match = this.test.exec(name)
-          const prefix = match[1]
-          const eventName = match[2]
-          const modifierStr = match[3] || ''
-          const meta = {
-            modifierStr
-          }
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'harmony' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'harmony', data: { el } })
-          return {
-            name: rPrefix + rEventName + meta.modifierStr,
-            value
-          }
-        }
+        ios: getRnDirectiveEventHandle('ios'),
+        android: getRnDirectiveEventHandle('android'),
+        harmony: getRnDirectiveEventHandle('harmony')
       },
       // 无障碍
       {
@@ -537,54 +530,9 @@ module.exports = function getSpec ({ warn, error }) {
               error(`Web environment does not support [${eventName}] event!`)
             }
           },
-          ios (eventName) {
-            const eventMap = {
-              tap: 'tap',
-              longtap: 'longpress',
-              longpress: 'longpress',
-              touchstart: 'touchstart',
-              touchmove: 'touchmove',
-              touchend: 'touchend',
-              touchcancel: 'touchcancel'
-            }
-            if (eventMap[eventName]) {
-              return eventMap[eventName]
-            } else {
-              error(`React native environment does not support [${eventName}] event!`)
-            }
-          },
-          android (eventName) {
-            const eventMap = {
-              tap: 'tap',
-              longtap: 'longpress',
-              longpress: 'longpress',
-              touchstart: 'touchstart',
-              touchmove: 'touchmove',
-              touchend: 'touchend',
-              touchcancel: 'touchcancel'
-            }
-            if (eventMap[eventName]) {
-              return eventMap[eventName]
-            } else {
-              error(`React native environment does not support [${eventName}] event!`)
-            }
-          },
-          harmony (eventName) {
-            const eventMap = {
-              tap: 'tap',
-              longtap: 'longpress',
-              longpress: 'longpress',
-              touchstart: 'touchstart',
-              touchmove: 'touchmove',
-              touchend: 'touchend',
-              touchcancel: 'touchcancel'
-            }
-            if (eventMap[eventName]) {
-              return eventMap[eventName]
-            } else {
-              error(`React native environment does not support [${eventName}] event!`)
-            }
-          }
+          ios: rnEventRulesHandle,
+          android: rnEventRulesHandle,
+          harmony: rnEventRulesHandle
         },
         // web event escape
         {

package/lib/react/processScript.js

@@ -17,7 +17,6 @@ module.exports = function (script, {
   genericsInfo
 }, callback) {
   let scriptSrcMode = srcMode
-  const mode = loaderContext.getMpx().mode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
@@ -28,23 +27,7 @@ module.exports = function (script, {
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
-import { NavigationContainer, StackActions } from '@react-navigation/native'
-${mode === 'ios' || mode === 'harmony' ? "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'
-import { GestureHandlerRootView } from 'react-native-gesture-handler'
-
-global.__navigationHelper = {
-  NavigationContainer: NavigationContainer,
-  createStackNavigator: createStackNavigator,
-  useHeaderHeight: useHeaderHeight,
-  StackActions: StackActions,
-  GestureHandlerRootView: GestureHandlerRootView,
-  PortalHost: PortalHost,
-  SafeAreaProvider: SafeAreaProvider,
-  useSafeAreaInsets: useSafeAreaInsets
-}\n`
+\n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
       loaderContext,

package/lib/runtime/components/react/dist/event.config.js

@@ -1,4 +1,5 @@
 export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
+export const LONGPRESS_EVENTS = ['bindlongpress', 'catchlongpress', 'capture-bindlongpress', 'capture-catchlongpress'];
 const eventConfigMap = {
     bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
     bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },

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

@@ -1,7 +1,7 @@
 import { useRef, useMemo } from 'react';
 import { hasOwn, collectDataset } from '@mpxjs/utils';
 import { omit, extendObject, useNavigation } from './utils';
-import eventConfigMap, { TAP_EVENTS } from './event.config';
+import eventConfigMap, { TAP_EVENTS, LONGPRESS_EVENTS } from './event.config';
 const globalEventState = {
     needPress: true
 };
@@ -74,8 +74,23 @@ function handleEmitEvent(events, type, oe, propsRef, config, navigation) {
     events.forEach((event) => {
         if (propsRef.current[event]) {
             const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
+            // 检查是否已经被上层的 catch 阻止
+            if ((type === 'tap' || type === 'longpress') && oe._stoppedEventTypes?.has(type)) {
+                return;
+            }
             if (match) {
-                oe.stopPropagation();
+                const eventBase = match[2] || '';
+                if (eventBase === 'tap' || eventBase === 'longpress') {
+                    // 为 tap、longpress 添加标记，影响后续的冒泡
+                    if (!oe._stoppedEventTypes) {
+                        oe._stoppedEventTypes = new Set();
+                    }
+                    oe._stoppedEventTypes.add(eventBase);
+                }
+                else {
+                    // 原生 touch 事件使用 stopPropagation
+                    oe.stopPropagation();
+                }
             }
             propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
         }
@@ -116,11 +131,7 @@ function handleTouchstart(e, type, ref, propsRef, config, navigation) {
     const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
     const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
     handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
-    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current;
-    if (catchlongpress ||
-        bindlongpress ||
-        captureCatchlongpress ||
-        captureBindlongpress) {
+    if (LONGPRESS_EVENTS.some(eventName => propsRef.current[eventName])) {
         ref.current.startTimer[type] = setTimeout(() => {
             // 只要触发过longpress, 全局就不再触发tap
             globalEventState.needPress = false;

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

@@ -193,7 +193,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
         node: canvasRef.current,
         context: context2D
     });
-    if (Platform.OS === 'android') {
+    if (__mpx_mode__ !== 'ios') {
         const isAndroid9 = Platform.Version >= 28;
         return createElement(View, innerProps, createElement(WebView, {
             ref: (element) => {

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

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+import { createElement } from 'react';
+import { extendObject } from './utils';
+const InlineText = (props) => {
+    const { allowFontScaling = false } = props;
+    return createElement(Text, extendObject({}, props, {
+        allowFontScaling
+    }));
+};
+InlineText.displayName = 'MpxInlineText';
+export default InlineText;

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

@@ -38,9 +38,9 @@
  * ✘ bind:onkeyboardheightchange
  */
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
-import { Platform, TextInput } from 'react-native';
+import { TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
@@ -48,10 +48,7 @@ const keyboardTypeMap = {
     text: 'default',
     number: 'numeric',
     idcard: 'default',
-    digit: Platform.select({
-        ios: 'decimal-pad',
-        android: 'numeric'
-    }) || ''
+    digit: isIOS ? 'decimal-pad' : 'numeric'
 };
 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, 
@@ -82,7 +79,7 @@ const Input = forwardRef((props, ref) => {
     const lineCount = useRef(0);
     const [inputValue, setInputValue] = useState(defaultValue);
     const [contentHeight, setContentHeight] = useState(0);
-    const [selection, setSelection] = useState({ start: -1, end: -1 });
+    const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
         ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
@@ -94,15 +91,17 @@ const Input = forwardRef((props, ref) => {
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
-            setInputValue(parseValue(value));
+            const parsed = parseValue(value);
+            tmpValue.current = parsed;
+            setInputValue(parsed);
         }
     }, [value]);
     useEffect(() => {
-        if (typeof cursor === 'number') {
-            setSelection({ start: cursor, end: cursor });
+        if (selectionStart > -1) {
+            setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd });
         }
-        else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-            setSelection({ start: selectionStart, end: selectionEnd });
+        else if (typeof cursor === 'number') {
+            setSelection({ start: cursor, end: cursor });
         }
     }, [cursor, selectionStart, selectionEnd]);
     // have not selection on the Android platformg
@@ -211,6 +210,7 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const resetValue = () => {
+        tmpValue.current = '';
         setInputValue('');
     };
     const getValue = () => {
@@ -255,7 +255,7 @@ const Input = forwardRef((props, ref) => {
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',

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

@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useMemo } from 'react';
-import { Keyboard, Platform, View } from 'react-native';
+import { Keyboard, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
+import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
-    const isIOS = Platform.OS === 'ios';
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
     const offset = useSharedValue(0);