@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.71

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

@@ -1,10 +1,13 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
 import { Image } from 'react-native';
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
-import { VarContext } from './context';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
+import { VarContext, ScrollViewContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
 import FastImage from '@d11/react-native-fast-image';
+import { runOnJS } from 'react-native-reanimated';
+import { Gesture } from 'react-native-gesture-handler';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/;
@@ -15,8 +18,12 @@ export const DEFAULT_FONT_SIZE = 16;
 export const HIDDEN_STYLE = {
     opacity: 0
 };
-const varDecRegExp = /^--.*/;
+export const isIOS = __mpx_mode__ === 'ios';
+export const isAndroid = __mpx_mode__ === 'android';
+const varDecRegExp = /^--/;
 const varUseRegExp = /var\(/;
+const unoVarDecRegExp = /^--un-/;
+const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
 const envUseRegExp = /env\(/;
 const safeAreaInsetMap = {
@@ -25,13 +32,12 @@ const safeAreaInsetMap = {
     'safe-area-inset-bottom': 'bottom',
     'safe-area-inset-left': 'left'
 };
-function getSafeAreaInset(name) {
-    const navigation = getFocusedNavigation();
+function getSafeAreaInset(name, navigation) {
     const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets);
     return insets[safeAreaInsetMap[name]];
 }
 export function omit(obj, fields) {
-    const shallowCopy = Object.assign({}, obj);
+    const shallowCopy = extendObject({}, obj);
     for (let i = 0; i < fields.length; i += 1) {
         const key = fields[i];
         delete shallowCopy[key];
@@ -69,7 +75,7 @@ export const parseInlineStyle = (inlineStyle = '') => {
         if (rest.length || !v || !k)
             return styleObj;
         const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
-        return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) });
+        return extendObject(styleObj, { [key]: global.__formatValue(v.trim()) });
     }, {});
 };
 export const parseUrl = (cssUrl = '') => {
@@ -192,7 +198,7 @@ function transformVar(styleObj, varKeyPaths, varContext) {
         });
     });
 }
-function transformEnv(styleObj, envKeyPaths) {
+function transformEnv(styleObj, envKeyPaths, navigation) {
     envKeyPaths.forEach((envKeyPath) => {
         setStyle(styleObj, envKeyPath, ({ target, key, value }) => {
             const parsed = parseFunc(value, 'env');
@@ -200,7 +206,7 @@ function transformEnv(styleObj, envKeyPaths) {
             parsed.forEach(({ start, end, args }) => {
                 const name = args[0];
                 const fallback = args[1] || '';
-                const value = '' + (getSafeAreaInset(name) ?? global.__formatValue(fallback));
+                const value = '' + (getSafeAreaInset(name, navigation) ?? global.__formatValue(fallback));
                 replaced.replace(start, end - 1, value);
             });
             target[key] = global.__formatValue(replaced.source());
@@ -238,19 +244,27 @@ function transformStringify(styleObj) {
 }
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
+    const unoVarStyle = {};
     const normalStyle = {};
+    const normalStyleRef = useRef({});
+    const normalStyleChangedRef = useRef(false);
     let hasVarDec = false;
     let hasVarUse = false;
     let hasSelfPercent = false;
     const varKeyPaths = [];
+    const unoVarKeyPaths = [];
     const percentKeyPaths = [];
     const calcKeyPaths = [];
     const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
+    const navigation = useNavigation();
     function varVisitor({ key, value, keyPath }) {
         if (keyPath.length === 1) {
-            if (varDecRegExp.test(key)) {
+            if (unoVarDecRegExp.test(key)) {
+                unoVarStyle[key] = value;
+            }
+            else if (varDecRegExp.test(key)) {
                 hasVarDec = true;
                 varStyle[key] = value;
             }
@@ -260,12 +274,18 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             }
         }
         // 对于var定义中使用的var无需替换值，可以通过resolveVar递归解析出值
-        if (!varDecRegExp.test(key) && varUseRegExp.test(value)) {
-            hasVarUse = true;
-            varKeyPaths.push(keyPath.slice());
+        if (!varDecRegExp.test(key)) {
+            // 一般情况下一个样式属性中不会混用unocss var和普通css var，可分开进行互斥处理
+            if (unoVarUseRegExp.test(value)) {
+                unoVarKeyPaths.push(keyPath.slice());
+            }
+            else if (varUseRegExp.test(value)) {
+                hasVarUse = true;
+                varKeyPaths.push(keyPath.slice());
+            }
         }
     }
-    // traverse var
+    // traverse var & generate normalStyle
     traverseStyle(styleObj, [varVisitor]);
     hasVarDec = hasVarDec || !!externalVarContext;
     enableVar = enableVar || hasVarDec || hasVarUse;
@@ -273,78 +293,92 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     if (enableVarRef.current !== enableVar) {
         error('css variable use/declare should be stable in the component lifecycle, or you can set [enable-var] with true.');
     }
-    // apply var
+    // apply css var
     const varContextRef = useRef({});
     if (enableVarRef.current) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         const varContext = useContext(VarContext);
-        const newVarContext = Object.assign({}, varContext, externalVarContext, varStyle);
+        const newVarContext = extendObject({}, varContext, externalVarContext, varStyle);
         // 缓存比较newVarContext是否发生变化
         if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
             varContextRef.current = newVarContext;
         }
         transformVar(normalStyle, varKeyPaths, varContextRef.current);
     }
-    function envVisitor({ value, keyPath }) {
-        if (envUseRegExp.test(value)) {
-            envKeyPaths.push(keyPath.slice());
-        }
+    // apply unocss var
+    if (unoVarKeyPaths.length) {
+        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle);
     }
-    function calcVisitor({ value, keyPath }) {
-        if (calcUseRegExp.test(value)) {
-            calcKeyPaths.push(keyPath.slice());
-        }
+    const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current);
+    if (diff) {
+        normalStyleRef.current = clone;
+        normalStyleChangedRef.current = !normalStyleChangedRef.current;
     }
-    function percentVisitor({ key, value, keyPath }) {
-        if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-            hasSelfPercent = true;
-            percentKeyPaths.push(keyPath.slice());
+    const memoResult = useMemo(() => {
+        // transform can be memoized
+        function envVisitor({ value, keyPath }) {
+            if (envUseRegExp.test(value)) {
+                envKeyPaths.push(keyPath.slice());
+            }
         }
-        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
-            percentKeyPaths.push(keyPath.slice());
+        function calcVisitor({ value, keyPath }) {
+            if (calcUseRegExp.test(value)) {
+                calcKeyPaths.push(keyPath.slice());
+            }
         }
-    }
-    // traverse env & calc & percent
-    traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
-    const percentConfig = {
-        width,
-        height,
-        fontSize: normalStyle.fontSize,
-        parentWidth,
-        parentHeight,
-        parentFontSize
-    };
-    // apply env
-    transformEnv(normalStyle, envKeyPaths);
-    // apply percent
-    transformPercent(normalStyle, percentKeyPaths, percentConfig);
-    // apply calc
-    transformCalc(normalStyle, calcKeyPaths, (value, key) => {
-        if (PERCENT_REGEX.test(value)) {
-            const resolved = resolvePercent(value, key, percentConfig);
-            return typeof resolved === 'number' ? resolved : 0;
+        function percentVisitor({ key, value, keyPath }) {
+            if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+                hasSelfPercent = true;
+                percentKeyPaths.push(keyPath.slice());
+            }
+            else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+                percentKeyPaths.push(keyPath.slice());
+            }
         }
-        else {
-            const formatted = global.__formatValue(value);
-            if (typeof formatted === 'number') {
-                return formatted;
+        // traverse env & calc & percent
+        traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
+        const percentConfig = {
+            width,
+            height,
+            fontSize: normalStyle.fontSize,
+            parentWidth,
+            parentHeight,
+            parentFontSize
+        };
+        // apply env
+        transformEnv(normalStyle, envKeyPaths, navigation);
+        // apply percent
+        transformPercent(normalStyle, percentKeyPaths, percentConfig);
+        // apply calc
+        transformCalc(normalStyle, calcKeyPaths, (value, key) => {
+            if (PERCENT_REGEX.test(value)) {
+                const resolved = resolvePercent(value, key, percentConfig);
+                return typeof resolved === 'number' ? resolved : 0;
             }
             else {
-                warn('calc() only support number, px, rpx, % temporarily.');
-                return 0;
+                const formatted = global.__formatValue(value);
+                if (typeof formatted === 'number') {
+                    return formatted;
+                }
+                else {
+                    warn('calc() only support number, px, rpx, % temporarily.');
+                    return 0;
+                }
             }
-        }
-    });
-    // transform number enum stringify
-    transformStringify(normalStyle);
-    return {
-        normalStyle,
-        hasSelfPercent,
+        });
+        // transform number enum stringify
+        transformStringify(normalStyle);
+        return {
+            normalStyle,
+            hasSelfPercent
+        };
+    }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize]);
+    return extendObject({
         hasVarDec,
-        enableVarRef,
         varContextRef,
         setWidth,
         setHeight
-    };
+    }, memoResult);
 }
 export function traverseStyle(styleObj, visitors) {
     const keyPath = [];
@@ -447,13 +481,14 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
 export const debounce = (func, delay) => {
     let timer;
     const wrapper = (...args) => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
         timer = setTimeout(() => {
             func(...args);
         }, delay);
     };
     wrapper.clear = () => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
+        timer = null;
     };
     return wrapper;
 };
@@ -466,12 +501,12 @@ export const useStableCallback = (callback) => {
     ref.current = callback;
     return useCallback((...args) => ref.current?.(...args), []);
 };
-export const usePrevious = (value) => {
-    const ref = useRef(undefined);
+export function usePrevious(value) {
+    const ref = useRef();
     const prev = ref.current;
     ref.current = value;
     return prev;
-};
+}
 export function flatGesture(gestures = []) {
     return (gestures && gestures.flatMap((gesture) => {
         if (gesture && gesture.nodeRefs) {
@@ -500,3 +535,60 @@ export function pickStyle(styleObj = {}, pickedKeys, callback) {
         return acc;
     }, {});
 }
+export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }) {
+    const enableHoverRef = useRef(enableHover);
+    if (enableHoverRef.current !== enableHover) {
+        error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+    }
+    if (!enableHoverRef.current)
+        return { isHover: false };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gestureRef = useContext(ScrollViewContext).gestureRef;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isHover, setIsHover] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const dataRef = useRef({});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        return () => {
+            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        };
+    }, []);
+    const setStartTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.startTimer = setTimeout(() => {
+            setIsHover(true);
+        }, +hoverStartTime);
+    };
+    const setStayTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.stayTimer = setTimeout(() => {
+            setIsHover(false);
+        }, +hoverStayTime);
+    };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gesture = useMemo(() => {
+        return Gesture.Pan()
+            .onTouchesDown(() => {
+            'worklet';
+            runOnJS(setStartTimer)();
+        })
+            .onTouchesUp(() => {
+            'worklet';
+            runOnJS(setStayTimer)();
+        });
+    }, []);
+    if (gestureRef) {
+        gesture.simultaneousWithExternalGesture(gestureRef);
+    }
+    return {
+        isHover,
+        gesture
+    };
+}

package/lib/runtime/components/react/event.config.ts

@@ -2,31 +2,30 @@ interface EventConfig {
   [key: string]: string[];
 }
 
-const eventConfigMap: EventConfig = {
-  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']
+const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } = {
+  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