@mpxjs/webpack-plugin 2.9.55 → 2.9.57

package/lib/index.js

@@ -897,6 +897,8 @@ class MpxWebpackPlugin {
           runtimeInfo: {},
           // 记录运行时组件依赖的运行时组件当中使用的基础组件 slot，最终依据依赖关系注入到运行时组件的 json 配置当中
           dynamicSlotDependencies: {},
+          // 模板引擎参数，用来检测模板引擎支持渲染的模板
+          dynamicTemplateRuleRunner: this.options.dynamicTemplateRuleRunner,
           // 依据 package 注入到 mpx-custom-element-*.json 里面的组件路径
           getPackageInjectedComponentsMap: (packageName = 'main') => {
             const res = {}

package/lib/json-compiler/index.js

@@ -706,7 +706,8 @@ module.exports = function (content) {
       for (const root in subPackagesCfg) {
         const subPackageCfg = subPackagesCfg[root]
         // 分包不存在 pages，输出 subPackages 字段会报错
-        if (subPackageCfg.pages.length) {
+        // tt模式下分包异步允许一个分包不存在 pages
+        if (subPackageCfg.pages.length || mode === 'tt') {
           if (!json.subPackages) {
             json.subPackages = []
           }

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

@@ -153,7 +153,6 @@ module.exports = function getSpec ({ warn, error }) {
       test: 'componentPlaceholder',
       ali: aliComponentPlaceholderFallback,
       swan: deletePath(),
-      tt: deletePath(),
       jd: deletePath()
     },
     {

package/lib/runtime/base.styl

@@ -128,3 +128,30 @@ page {
   font-family "weui"
   src url('data:application/octet-stream;base64,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') format('truetype')
 }
+
+.mpx-slide-left-enter {
+  transform: translateX(100%)
+}
+.mpx-slide-left-enter-active {
+  transition: transform 0.3s;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+}
+.mpx-slide-left-leave-active {
+  transition: transform 0.2s
+}
+
+.mpx-slide-right-leave-active {
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  transform: translateX(100%);
+  transition: transform 0.3s
+}

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

@@ -0,0 +1,27 @@
+const eventConfigMap = {
+    bindtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
+    bindlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
+    bindtouchstart: ['onTouchStart'],
+    bindtouchmove: ['onTouchMove'],
+    bindtouchend: ['onTouchEnd'],
+    bindtouchcancel: ['onTouchCancel'],
+    catchtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
+    catchlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
+    catchtouchstart: ['onTouchStart'],
+    catchtouchmove: ['onTouchMove'],
+    catchtouchend: ['onTouchEnd'],
+    catchtouchcancel: ['onTouchCancel'],
+    'capture-bindtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
+    'capture-bindlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
+    'capture-bindtouchstart': ['onTouchStartCapture'],
+    'capture-bindtouchmove': ['onTouchMoveCapture'],
+    'capture-bindtouchend': ['onTouchEndCapture'],
+    'capture-bindtouchcancel': ['onTouchCancelCapture'],
+    'capture-catchtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
+    'capture-catchlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
+    'capture-catchtouchstart': ['onTouchStartCapture'],
+    'capture-catchtouchmove': ['onTouchMoveCapture'],
+    'capture-catchtouchend': ['onTouchEndCapture'],
+    'capture-catchtouchcancel': ['onTouchCancelCapture']
+};
+export default eventConfigMap;

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

@@ -0,0 +1,230 @@
+import { useRef } from 'react';
+import { omit } from './utils';
+import eventConfigMap from './event.config';
+const getTouchEvent = (type, event, props, config) => {
+    const nativeEvent = event.nativeEvent;
+    const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
+    const { id } = props;
+    const { layoutRef } = config;
+    return {
+        ...event,
+        type,
+        timeStamp: timestamp,
+        target: {
+            ...(event.target || {}),
+            id: id || '',
+            dataset: getDataSet(props),
+            offsetLeft: layoutRef?.current?.offsetLeft || 0,
+            offsetTop: layoutRef?.current?.offsetTop || 0
+        },
+        detail: {
+            x: pageX,
+            y: pageY
+        },
+        touches: touches.map(item => {
+            return {
+                identifier: item.identifier,
+                pageX: item.pageX,
+                pageY: item.pageY,
+                clientX: item.locationX,
+                clientY: item.locationY
+            };
+        }),
+        changedTouches: changedTouches.map(item => {
+            return {
+                identifier: item.identifier,
+                pageX: item.pageX,
+                pageY: item.pageY,
+                clientX: item.locationX,
+                clientY: item.locationY
+            };
+        }),
+        persist: event.persist,
+        stopPropagation: event.stopPropagation,
+        preventDefault: event.preventDefault
+    };
+};
+export const getDataSet = (props) => {
+    const result = {};
+    for (const key in props) {
+        if (key.indexOf('data-') === 0) {
+            const newKey = key.substr(5);
+            result[newKey] = props[key];
+        }
+    }
+    return result;
+};
+export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, props = {}) => {
+    return {
+        ...oe,
+        type,
+        detail,
+        target: {
+            ...(oe.target || {}),
+            id: props.id || '',
+            dataset: getDataSet(props),
+            offsetLeft: layoutRef?.current?.offsetLeft || 0,
+            offsetTop: layoutRef?.current?.offsetTop || 0
+        }
+    };
+};
+const useInnerProps = (props = {}, additionalProps = {}, removeProps = [], rawConfig) => {
+    const ref = useRef({
+        startTimer: {
+            bubble: null,
+            capture: null
+        },
+        needPress: {
+            bubble: false,
+            capture: false
+        },
+        mpxPressInfo: {
+            detail: {
+                x: 0,
+                y: 0
+            }
+        }
+    });
+    const propsRef = useRef({});
+    const eventConfig = {};
+    const config = rawConfig || {};
+    propsRef.current = { ...props, ...additionalProps };
+    for (const key in eventConfigMap) {
+        if (propsRef.current[key]) {
+            eventConfig[key] = eventConfigMap[key];
+        }
+    }
+    if (!(Object.keys(eventConfig).length) || config.disableTouch) {
+        return omit(propsRef.current, removeProps);
+    }
+    function handleEmitEvent(events, type, oe) {
+        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));
+            }
+        });
+    }
+    function handleTouchstart(e, type) {
+        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;
+        ref.current.needPress[type] = 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);
+        const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current;
+        if (catchlongpress || bindlongpress || captureCatchlongpress || captureBindlongpress) {
+            ref.current.startTimer[type] = setTimeout(() => {
+                ref.current.needPress[type] = false;
+                handleEmitEvent(currentPressEvent, 'longpress', e);
+            }, 350);
+        }
+    }
+    function handleTouchmove(e, type) {
+        const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
+        const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove'];
+        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;
+        const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
+        if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
+            ref.current.needPress[type] = false;
+            ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
+            ref.current.startTimer[type] = null;
+        }
+        handleEmitEvent(currentTouchEvent, 'touchmove', e);
+    }
+    function handleTouchend(e, type) {
+        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);
+        if (ref.current.needPress[type]) {
+            handleEmitEvent(currentTapEvent, 'tap', e);
+        }
+    }
+    function handleTouchcancel(e, type) {
+        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);
+    }
+    const touchEventList = [{
+            eventName: 'onTouchStart',
+            handler: (e) => {
+                handleTouchstart(e, 'bubble');
+            }
+        }, {
+            eventName: 'onTouchMove',
+            handler: (e) => {
+                handleTouchmove(e, 'bubble');
+            }
+        }, {
+            eventName: 'onTouchEnd',
+            handler: (e) => {
+                handleTouchend(e, 'bubble');
+            }
+        }, {
+            eventName: 'onTouchCancel',
+            handler: (e) => {
+                handleTouchcancel(e, 'bubble');
+            }
+        }, {
+            eventName: 'onTouchStartCapture',
+            handler: (e) => {
+                handleTouchstart(e, 'capture');
+            }
+        }, {
+            eventName: 'onTouchMoveCapture',
+            handler: (e) => {
+                handleTouchmove(e, 'capture');
+            }
+        }, {
+            eventName: 'onTouchEndCapture',
+            handler: (e) => {
+                handleTouchend(e, 'capture');
+            }
+        }, {
+            eventName: 'onTouchCancelCapture',
+            handler: (e) => {
+                handleTouchcancel(e, 'capture');
+            }
+        }];
+    const events = {};
+    const transformedEventKeys = [];
+    for (const key in eventConfig) {
+        transformedEventKeys.push(...eventConfig[key]);
+    }
+    const finalEventKeys = [...new Set(transformedEventKeys)];
+    touchEventList.forEach(item => {
+        if (finalEventKeys.includes(item.eventName)) {
+            events[item.eventName] = item.handler;
+        }
+    });
+    const rawEventKeys = Object.keys(eventConfig);
+    return {
+        ...events,
+        ...omit(propsRef.current, [...rawEventKeys, ...removeProps])
+    };
+};
+export default useInnerProps;

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

@@ -0,0 +1,270 @@
+/**
+ * ✔ size
+ * ✔ type
+ * ✔ plain
+ * ✔ disabled
+ * ✔ loading
+ * ✘ form-type
+ * - open-type: Partially. Only support `share`、`getUserInfo`
+ * ✔ hover-class: Convert hoverClass to hoverStyle.
+ * ✔ hover-style
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ * ✘ lang
+ * ✘ session-from
+ * ✘ send-message-title
+ * ✘ send-message-path
+ * ✘ send-message-img
+ * ✘ app-parameter
+ * ✘ show-message-card
+ * ✘ phone-number-no-quota-toast
+ * ✘ bindgetuserinfo
+ * ✘ bindcontact
+ * ✘ createliveactivity
+ * ✘ bindgetphonenumber
+ * ✘ bindgetphonenumber
+ * ✘ bindgetrealtimephonenumber
+ * ✘ binderror
+ * ✘ bindopensetting
+ * ✘ bindlaunchapp
+ * ✘ bindlaunchapp
+ * ✘ bindchooseavatar
+ * ✘ bindchooseavatar
+ * ✘ bindagreeprivacyauthorization
+ * ✔ bindtap
+ */
+import React, { useEffect, useRef, useState, forwardRef, } from 'react';
+import { View, Text, StyleSheet, Animated, Easing, } from 'react-native';
+import { extractTextStyle, isText, every } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const LOADING_IMAGE_URI = 'data:image/png;base64,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';
+const TypeColorMap = {
+    default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
+    primary: ['#1AAD19', '#179B16', '26,173,25', '#9ED99D'],
+    warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89'],
+};
+const OpenTypeEventsMap = new Map([
+    ['share', 'onShareAppMessage'],
+    ['getUserInfo', 'onUserInfo'],
+]);
+const styles = StyleSheet.create({
+    button: {
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 46,
+        borderRadius: 5,
+        backgroundColor: '#F8F8F8',
+        marginHorizontal: 'auto' // 按钮默认居中
+    },
+    buttonMini: {
+        height: 30,
+    },
+    text: {
+        fontSize: 18,
+        color: '#000000',
+    },
+    textMini: {
+        fontSize: 13,
+    },
+    loading: {
+        width: 20,
+        height: 20,
+    },
+});
+const getOpenTypeEvent = (openType) => {
+    // @ts-ignore
+    if (!global?.__mpx?.config?.rnConfig) {
+        console.warn('Environment not supported');
+        return;
+    }
+    const eventName = OpenTypeEventsMap.get(openType);
+    if (!eventName) {
+        console.warn(`open-type not support ${openType}`);
+        return;
+    }
+    // @ts-ignore
+    const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName];
+    if (!event) {
+        console.warn(`Unregistered ${eventName} event`);
+        return;
+    }
+    return event;
+};
+const Loading = ({ alone = false }) => {
+    const image = useRef(new Animated.Value(0)).current;
+    const rotate = image.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    useEffect(() => {
+        const animation = Animated.loop(Animated.timing(image, {
+            toValue: 1,
+            duration: 1000,
+            easing: Easing.linear,
+            useNativeDriver: true,
+            isInteraction: false,
+        }));
+        animation.start();
+        return () => {
+            animation.stop();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const loadingStyle = {
+        ...styles.loading,
+        transform: [{ rotate }],
+        marginRight: alone ? 0 : 5,
+    };
+    return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }}/>;
+};
+const Button = forwardRef((props, ref) => {
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = [], 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'enable-offset': enableOffset, style = [], children, bindgetuserinfo, bindtap, catchtap, bindtouchstart, bindtouchend, } = props;
+    const refs = useRef({
+        hoverStartTimer: undefined,
+        hoverStayTimer: undefined,
+    });
+    const layoutRef = useRef({});
+    const [isHover, setIsHover] = useState(false);
+    const isMiniSize = size === 'mini';
+    const applyHoverEffect = isHover && hoverClass !== 'none';
+    const inheritTextStyle = extractTextStyle(style);
+    const textHoverStyle = extractTextStyle(hoverStyle);
+    const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
+    const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color;
+    const plainBorderColor = disabled
+        ? 'rgba(0, 0, 0, .2)'
+        : applyHoverEffect
+            ? `rgba(${plainColor},.6)`
+            : `rgb(${plainColor})`;
+    const normalBorderColor = type === 'default' ? 'rgba(0, 0, 0, .2)' : normalBackgroundColor;
+    const plainTextColor = disabled
+        ? 'rgba(0, 0, 0, .2)'
+        : applyHoverEffect
+            ? `rgba(${plainColor}, .6)`
+            : `rgb(${plainColor})`;
+    const normalTextColor = type === 'default'
+        ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
+        : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`;
+    const viewStyle = {
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: plain ? plainBorderColor : normalBorderColor,
+        backgroundColor: plain ? 'transparent' : normalBackgroundColor,
+    };
+    const textStyle = {
+        color: plain ? plainTextColor : normalTextColor,
+        ...inheritTextStyle
+    };
+    const defaultViewStyle = [
+        styles.button,
+        isMiniSize && styles.buttonMini || {},
+        viewStyle,
+    ];
+    const defaultTextStyle = [
+        styles.text, isMiniSize && styles.textMini, textStyle
+    ];
+    const handleOpenTypeEvent = (evt) => {
+        if (!openType)
+            return;
+        const handleEvent = getOpenTypeEvent(openType);
+        if (openType === 'share') {
+            handleEvent && handleEvent({
+                from: 'button',
+                target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+            });
+        }
+        if (openType === 'getUserInfo') {
+            const userInfo = handleEvent && handleEvent();
+            if (typeof userInfo === 'object') {
+                bindgetuserinfo && bindgetuserinfo(userInfo);
+            }
+        }
+    };
+    const setStayTimer = () => {
+        clearTimeout(refs.current.hoverStayTimer);
+        refs.current.hoverStayTimer = setTimeout(() => {
+            setIsHover(false);
+            clearTimeout(refs.current.hoverStayTimer);
+        }, hoverStayTime);
+    };
+    const setStartTimer = () => {
+        clearTimeout(refs.current.hoverStartTimer);
+        refs.current.hoverStartTimer = setTimeout(() => {
+            setIsHover(true);
+            clearTimeout(refs.current.hoverStartTimer);
+        }, hoverStartTime);
+    };
+    const onTouchStart = (evt) => {
+        bindtouchstart && bindtouchstart(evt);
+        if (disabled)
+            return;
+        setStartTimer();
+    };
+    const onTouchEnd = (evt) => {
+        bindtouchend && bindtouchend(evt);
+        if (disabled)
+            return;
+        setStayTimer();
+    };
+    const onTap = (evt) => {
+        if (disabled)
+            return;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        handleOpenTypeEvent(evt);
+    };
+    const catchTap = (evt) => {
+        if (disabled)
+            return;
+        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
+    };
+    function wrapChildren(children, textStyle) {
+        if (every(children, (child) => isText(child))) {
+            children = [<Text key='buttonTextWrap' style={textStyle}>{children}</Text>];
+        }
+        else {
+            if (textStyle)
+                console.warn('Text style will be ignored unless every child of the Button is Text node!');
+        }
+        return children;
+    }
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle: StyleSheet.flatten([
+            ...defaultViewStyle,
+            ...defaultTextStyle,
+        ])
+    });
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        bindtouchstart: onTouchStart,
+        bindtouchend: onTouchEnd,
+        bindtap: onTap,
+        catchtap: catchTap,
+        ...(enableOffset ? { onLayout } : {}),
+    }, [
+        'enable-offset'
+    ], {
+        layoutRef
+    });
+    return (<View {...innerProps} style={[
+            ...defaultViewStyle,
+            style,
+            applyHoverEffect && hoverStyle,
+        ]}>
+      {loading && <Loading alone={!children}/>}
+      {wrapChildren(children, [
+            ...defaultTextStyle,
+            applyHoverEffect && textHoverStyle,
+        ])}
+    </View>);
+});
+Button.displayName = 'mpx-button';
+export default Button;