@mpxjs/webpack-plugin 2.9.69 → 2.9.70

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

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
 import { Image } from 'react-native';
-import { isObject, isFunction, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
 import { VarContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
@@ -8,14 +8,17 @@ import FastImage from '@d11/react-native-fast-image';
 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*$/;
+export const SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i;
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/;
-export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
+export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines|allowFontScaling/;
 export const DEFAULT_FONT_SIZE = 16;
 export const HIDDEN_STYLE = {
     opacity: 0
 };
-const varDecRegExp = /^--.*/;
+const varDecRegExp = /^--/;
 const varUseRegExp = /var\(/;
+const unoVarDecRegExp = /^--un-/;
+const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
 const envUseRegExp = /env\(/;
 const safeAreaInsetMap = {
@@ -26,14 +29,11 @@ const safeAreaInsetMap = {
 };
 function getSafeAreaInset(name) {
     const navigation = getFocusedNavigation();
-    const insets = {
-        ...initialWindowMetrics?.insets,
-        ...navigation?.insets
-    };
+    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];
@@ -71,7 +71,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 = '') => {
@@ -81,23 +81,13 @@ export const parseUrl = (cssUrl = '') => {
     return match?.[1];
 };
 export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKey = []) => {
-    return {
-        ...transferProps,
-        ...omit(originProps, deletePropsKey)
-    };
+    return extendObject({}, transferProps, omit(originProps, deletePropsKey));
 };
 export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
         const isCustomText = ele.type?.isCustomText;
-        return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText;
-    }
-    return false;
-}
-export function isEmbedded(ele) {
-    if (isValidElement(ele)) {
-        const displayName = ele.type?.displayName || '';
-        return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName);
+        return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -240,13 +230,25 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
+const stringifyProps = ['fontWeight'];
+function transformStringify(styleObj) {
+    stringifyProps.forEach((prop) => {
+        if (isNumber(styleObj[prop])) {
+            styleObj[prop] = '' + styleObj[prop];
+        }
+    });
+}
 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 = [];
@@ -254,7 +256,10 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     const [height, setHeight] = useState(0);
     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;
             }
@@ -264,12 +269,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;
@@ -277,76 +288,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);
+        // 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;
+                }
             }
-        }
-    });
-    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 = [];
@@ -404,7 +431,7 @@ export function splitProps(props) {
 export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }) => {
     const layoutRef = useRef({});
     const hasLayoutRef = useRef(false);
-    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
+    const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}; }, [hasLayoutRef.current]);
     const layoutProps = {};
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
@@ -435,8 +462,8 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     if (textStyle || textProps) {
         children = Children.map(children, (child) => {
             if (isText(child)) {
-                const style = { ...textStyle, ...child.props.style };
-                return cloneElement(child, { ...textProps, style });
+                const style = extendObject({}, textStyle, child.props.style);
+                return cloneElement(child, extendObject({}, textProps, { style }));
             }
             return child;
         });
@@ -469,7 +496,7 @@ export const useStableCallback = (callback) => {
     return useCallback((...args) => ref.current?.(...args), []);
 };
 export const usePrevious = (value) => {
-    const ref = useRef(undefined);
+    const ref = useRef();
     const prev = ref.current;
     ref.current = value;
     return prev;
@@ -483,9 +510,7 @@ export function flatGesture(gestures = []) {
         return gesture?.current ? [gesture] : [];
     })) || [];
 }
-export function extendObject(...args) {
-    return Object.assign({}, ...args);
-}
+export const extendObject = Object.assign;
 export function getCurrentPage(pageId) {
     if (!global.getCurrentPages)
         return;

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