@mpxjs/webpack-plugin 2.8.25-alpha.22 → 2.8.25-alpha.23

package/lib/template-compiler/compiler.js

@@ -1975,8 +1975,13 @@ function processAtMode (el) {
                 el._atModeStatus = 'match'
               }
             } else {
-              // 如果命中了指定的mode，则先存在el上，等跑完转换后再挂回去
-              el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
+              if (replacedAttrName === 'mpxTagName') {
+                // mpxTagName 特殊标签，需要做转换保留处理
+                addAttrs(el, [processedAttr])
+              } else {
+                // 如果命中了指定的mode，则先存在el上，等跑完转换后再挂回去
+                el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
+              }
             }
             // 命中mode，命中env，完成匹配，直接退出
             break
@@ -2041,6 +2046,8 @@ function processElement (el, root, options, meta) {
     return
   }
 
+  processMpxTagName(el)
+
   if (rulesRunner && el._atModeStatus !== 'match') {
     currentEl = el
     rulesRunner(el)
@@ -2050,8 +2057,6 @@ function processElement (el, root, options, meta) {
 
   processDuplicateAttrsList(el)
 
-  processMpxTagName(el)
-
   processInjectWxs(el, meta)
 
   const transAli = mode === 'ali' && srcMode === 'wx'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.25-alpha.22",
+  "version": "2.8.25-alpha.23",
   "description": "mpx compile core",
   "keywords": [
     "mpx"

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

@@ -1,89 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { Keyboard, Platform, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { KeyboardAvoidContext } from './context';
-import { extendObject } 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);
-    const basic = useSharedValue('auto');
-    const keyboardAvoid = useContext(KeyboardAvoidContext);
-    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
-        });
-        offset.value = withTiming(0, { duration, easing });
-        basic.value = 'auto';
-    };
-    useEffect(() => {
-        let subscriptions = [];
-        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);
-                            const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing });
-                        });
-                    });
-                }),
-                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) {
-                                /**
-                                 * In the Android environment, the layout information is not synchronized after the animation,
-                                 * which results in the inability to correctly trigger element events.
-                                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                                 */
-                                basic.value = '99.99%';
-                            }
-                        });
-                    });
-                }),
-                Keyboard.addListener('keyboardDidHide', resetKeyboard)
-            ];
-        }
-        return () => {
-            subscriptions.forEach(subscription => subscription.remove());
-        };
-    }, [keyboardAvoid]);
-    return (<View style={style}>
-      <Animated.View style={[
-            contentContainerStyle,
-            animatedStyle
-        ]}>
-        {children}
-      </Animated.View>
-    </View>);
-};
-export default KeyboardAvoidingView;

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

@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-export const MovableAreaContext = createContext({ width: 0, height: 0 });
-export const FormContext = createContext(null);
-export const CheckboxGroupContext = createContext(null);
-export const RadioGroupContext = createContext(null);
-export const LabelContext = createContext(null);
-export const PickerContext = createContext(null);
-export const VarContext = createContext({});
-export const IntersectionObserverContext = createContext(null);
-export const RouteContext = createContext(null);
-export const SwiperContext = createContext({});
-export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null });
-export const PortalContext = createContext(null);

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

@@ -1,27 +0,0 @@
-const eventConfigMap = {
-    bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
-    bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
-    bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
-    bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
-    bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
-    bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
-    catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
-    catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
-    catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
-    catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
-    catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
-    catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
-    'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
-    'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
-    'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
-    'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
-    'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
-    'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
-    'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
-    'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
-    'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
-    'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
-    'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
-    'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
-};
-export default eventConfigMap;

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

@@ -1,262 +0,0 @@
-import { useRef, useMemo } from 'react';
-import { hasOwn, collectDataset } from '@mpxjs/utils';
-import { omit, extendObject, useNavigation } from './utils';
-import eventConfigMap from './event.config';
-const globalEventState = {
-    needPress: true
-};
-const getTouchEvent = (type, event, props, config, navigation) => {
-    const { y: navigationY = 0 } = navigation?.layout || {};
-    const nativeEvent = event.nativeEvent;
-    const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
-    const { id } = props;
-    const { layoutRef } = config;
-    const currentTarget = extendObject({}, event.currentTarget, {
-        id: id || '',
-        dataset: collectDataset(props),
-        offsetLeft: layoutRef?.current?.offsetLeft || 0,
-        offsetTop: layoutRef?.current?.offsetTop || 0
-    });
-    const pendingProps = event._targetInst?.pendingProps || {};
-    const target = extendObject({}, event.target, {
-        id: pendingProps.parentId || pendingProps.nativeID || '',
-        dataset: collectDataset(pendingProps)
-    });
-    return extendObject({}, event, {
-        type,
-        timeStamp: timestamp,
-        currentTarget,
-        target,
-        detail: {
-            x: pageX,
-            y: pageY - navigationY
-        },
-        touches: touches.map((item) => {
-            return {
-                identifier: item.identifier,
-                pageX: item.pageX,
-                pageY: item.pageY - navigationY,
-                clientX: item.pageX,
-                clientY: item.pageY - navigationY
-            };
-        }),
-        changedTouches: changedTouches.map((item) => {
-            return {
-                identifier: item.identifier,
-                pageX: item.pageX,
-                pageY: item.pageY - navigationY,
-                clientX: item.pageX,
-                clientY: item.pageY - navigationY
-            };
-        }),
-        persist: event.persist,
-        stopPropagation: event.stopPropagation,
-        preventDefault: event.preventDefault
-    });
-};
-export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, props = {}) => {
-    const targetInfo = extendObject({}, oe.target, {
-        id: props.id || '',
-        dataset: collectDataset(props),
-        offsetLeft: layoutRef?.current?.offsetLeft || 0,
-        offsetTop: layoutRef?.current?.offsetTop || 0
-    });
-    return extendObject({}, oe, {
-        type,
-        detail,
-        target: targetInfo,
-        persist: oe.persist,
-        stopPropagation: oe.stopPropagation,
-        preventDefault: oe.preventDefault
-    });
-};
-function handleEmitEvent(events, type, oe, propsRef, config, navigation) {
-    events.forEach((event) => {
-        if (propsRef.current[event]) {
-            const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
-            if (match) {
-                oe.stopPropagation();
-            }
-            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
-        }
-    });
-}
-function checkIsNeedPress(e, type, ref) {
-    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
-    const nativeEvent = e.nativeEvent;
-    const currentPageX = nativeEvent.changedTouches[0].pageX;
-    const currentPageY = nativeEvent.changedTouches[0].pageY;
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 3) {
-        globalEventState.needPress = false;
-        ref.current.startTimer[type] &&
-            clearTimeout(ref.current.startTimer[type]);
-        ref.current.startTimer[type] = null;
-    }
-}
-function handleTouchstart(e, type, ref, propsRef, config, navigation) {
-    e.persist();
-    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
-    const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
-    const captureTouchEvent = [
-        'capture-catchtouchstart',
-        'capture-bindtouchstart'
-    ];
-    const capturePressEvent = [
-        'capture-catchlongpress',
-        'capture-bindlongpress'
-    ];
-    ref.current.startTimer[type] = null;
-    globalEventState.needPress = true;
-    const nativeEvent = e.nativeEvent;
-    ref.current.mpxPressInfo.detail = {
-        x: nativeEvent.changedTouches[0].pageX,
-        y: nativeEvent.changedTouches[0].pageY
-    };
-    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) {
-        ref.current.startTimer[type] = setTimeout(() => {
-            // 只要触发过longpress, 全局就不再触发tap
-            globalEventState.needPress = false;
-            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation);
-        }, 350);
-    }
-}
-function handleTouchmove(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
-    const captureTouchEvent = [
-        'capture-catchtouchmove',
-        'capture-bindtouchmove'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
-    checkIsNeedPress(e, type, ref);
-}
-function handleTouchend(e, type, ref, propsRef, config, navigation) {
-    // move event may not be triggered
-    checkIsNeedPress(e, type, ref);
-    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
-    const bubbleTapEvent = ['catchtap', 'bindtap'];
-    const captureTouchEvent = [
-        'capture-catchtouchend',
-        'capture-bindtouchend'
-    ];
-    const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation);
-    if (globalEventState.needPress) {
-        if (type === 'bubble' && config.disableTap) {
-            return;
-        }
-        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation);
-    }
-}
-function handleTouchcancel(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
-    const captureTouchEvent = [
-        'capture-catchtouchcancel',
-        'capture-bindtouchcancel'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation);
-}
-function createTouchEventHandler(eventName, type) {
-    return (e, ref, propsRef, config, navigation) => {
-        const handlerMap = {
-            onTouchStart: handleTouchstart,
-            onTouchMove: handleTouchmove,
-            onTouchEnd: handleTouchend,
-            onTouchCancel: handleTouchcancel
-        };
-        const handler = handlerMap[eventName];
-        if (handler) {
-            handler(e, type, ref, propsRef, config, navigation);
-        }
-    };
-}
-const touchEventList = [
-    { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
-    { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
-    { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
-    { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
-    { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
-    { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
-    { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
-    { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
-];
-const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
-    const ref = useRef({
-        startTimer: {
-            bubble: null,
-            capture: null
-        },
-        mpxPressInfo: {
-            detail: {
-                x: 0,
-                y: 0
-            }
-        }
-    });
-    const propsRef = useRef({});
-    const eventConfig = {};
-    const config = rawConfig || {
-        layoutRef: { current: {} },
-        disableTap: false
-    };
-    const navigation = useNavigation();
-    const removeProps = [
-        'children',
-        'enable-background',
-        'enable-offset',
-        'enable-var',
-        'external-var-context',
-        'parent-font-size',
-        'parent-width',
-        'parent-height',
-        ...userRemoveProps
-    ];
-    propsRef.current = extendObject({}, props, additionalProps);
-    let hashEventKey = '';
-    const rawEventKeys = [];
-    for (const key in eventConfigMap) {
-        if (hasOwn(propsRef.current, key)) {
-            eventConfig[key] = eventConfigMap[key].events;
-            hashEventKey = hashEventKey + eventConfigMap[key].bitFlag;
-            rawEventKeys.push(key);
-        }
-    }
-    const events = useMemo(() => {
-        if (!rawEventKeys.length) {
-            return {};
-        }
-        const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
-            if (propsRef.current[key]) {
-                return acc.concat(eventConfig[key]);
-            }
-            return acc;
-        }, []);
-        const finalEventKeys = [...new Set(transformedEventKeys)];
-        const events = {};
-        touchEventList.forEach((item) => {
-            if (finalEventKeys.includes(item.eventName)) {
-                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config, navigation);
-            }
-        });
-        return events;
-    }, [hashEventKey]);
-    return extendObject({}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]));
-};
-export default useInnerProps;