@mpxjs/webpack-plugin 2.10.4 → 2.10.5

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

@@ -26,6 +26,7 @@ const unoVarDecRegExp = /^--un-/;
 const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
 const envUseRegExp = /env\(/;
+const filterRegExp = /(calc|env|%)/;
 const safeAreaInsetMap = {
     'safe-area-inset-top': 'top',
     'safe-area-inset-right': 'right',
@@ -181,10 +182,11 @@ function resolveVar(input, varContext) {
     });
     return global.__formatValue(replaced.source());
 }
-function transformVar(styleObj, varKeyPaths, varContext) {
+function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
     varKeyPaths.forEach((varKeyPath) => {
         setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
             target[key] = resolveVar(value, varContext);
+            visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });
 }
@@ -224,28 +226,33 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
-const stringifyProps = ['fontWeight'];
 function transformStringify(styleObj) {
-    stringifyProps.forEach((prop) => {
-        if (isNumber(styleObj[prop])) {
-            styleObj[prop] = '' + styleObj[prop];
-        }
-    });
+    if (isNumber(styleObj.fontWeight)) {
+        styleObj.fontWeight = '' + styleObj.fontWeight;
+    }
+}
+function transformPosition(styleObj, meta) {
+    if (styleObj.position === 'fixed') {
+        styleObj.position = 'absolute';
+        meta.hasPositionFixed = true;
+    }
 }
 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 }) {
+    function varVisitor({ target, key, value, keyPath }) {
         if (keyPath.length === 1) {
             if (unoVarDecRegExp.test(key)) {
                 unoVarStyle[key] = value;
@@ -269,6 +276,33 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 hasVarUse = true;
                 varKeyPaths.push(keyPath.slice());
             }
+            else {
+                visitOther({ target, key, value, keyPath });
+            }
+        }
+    }
+    function envVisitor({ value, keyPath }) {
+        if (envUseRegExp.test(value)) {
+            envKeyPaths.push(keyPath.slice());
+        }
+    }
+    function calcVisitor({ value, keyPath }) {
+        if (calcUseRegExp.test(value)) {
+            calcKeyPaths.push(keyPath.slice());
+        }
+    }
+    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());
+        }
+    }
+    function visitOther({ target, key, value, keyPath }) {
+        if (filterRegExp.test(value)) {
+            [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }));
         }
     }
     // traverse var & generate normalStyle
@@ -289,96 +323,57 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
             varContextRef.current = newVarContext;
         }
-        transformVar(normalStyle, varKeyPaths, varContextRef.current);
+        transformVar(normalStyle, varKeyPaths, varContextRef.current, visitOther);
     }
     // apply unocss var
     if (unoVarKeyPaths.length) {
-        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle);
-    }
-    const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current);
-    if (diff) {
-        normalStyleRef.current = clone;
-        normalStyleChangedRef.current = !normalStyleChangedRef.current;
+        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther);
     }
-    const memoResult = useMemo(() => {
-        let hasSelfPercent = false;
-        let hasPositionFixed = false;
-        const percentKeyPaths = [];
-        const calcKeyPaths = [];
-        const envKeyPaths = [];
-        // transform can be memoized
-        function envVisitor({ value, keyPath }) {
-            if (envUseRegExp.test(value)) {
-                envKeyPaths.push(keyPath.slice());
-            }
-        }
-        function calcVisitor({ value, keyPath }) {
-            if (calcUseRegExp.test(value)) {
-                calcKeyPaths.push(keyPath.slice());
-            }
-        }
-        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());
-            }
-        }
-        function transformPosition(styleObj) {
-            if (styleObj.position === 'fixed') {
-                hasPositionFixed = true;
-                styleObj.position = 'absolute';
-            }
+    const percentConfig = {
+        width,
+        height,
+        fontSize: normalStyle.fontSize,
+        parentWidth,
+        parentHeight,
+        parentFontSize
+    };
+    const positionMeta = {
+        hasPositionFixed: false
+    };
+    // 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;
         }
-        // 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 {
+            const formatted = global.__formatValue(value);
+            if (typeof formatted === 'number') {
+                return formatted;
             }
             else {
-                const formatted = global.__formatValue(value);
-                if (typeof formatted === 'number') {
-                    return formatted;
-                }
-                else {
-                    warn('calc() only support number, px, rpx, % temporarily.');
-                    return 0;
-                }
+                warn('calc() only support number, px, rpx, % temporarily.');
+                return 0;
             }
-        });
-        // apply position
-        transformPosition(normalStyle);
-        // transform number enum stringify
-        transformStringify(normalStyle);
-        return {
-            normalStyle,
-            hasSelfPercent,
-            hasPositionFixed
-        };
-    }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize]);
-    return extendObject({
+        }
+    });
+    // apply position
+    transformPosition(normalStyle, positionMeta);
+    // transform number enum stringify
+    transformStringify(normalStyle);
+    return {
         hasVarDec,
         varContextRef,
         setWidth,
-        setHeight
-    }, memoResult);
+        setHeight,
+        normalStyle,
+        hasSelfPercent,
+        hasPositionFixed: positionMeta.hasPositionFixed
+    };
 }
 export function traverseStyle(styleObj, visitors) {
     const keyPath = [];
@@ -387,12 +382,7 @@ export function traverseStyle(styleObj, visitors) {
             target.forEach((value, index) => {
                 const key = String(index);
                 keyPath.push(key);
-                visitors.forEach(visitor => visitor({
-                    target,
-                    key,
-                    value,
-                    keyPath
-                }));
+                visitors.forEach(visitor => visitor({ target, key, value, keyPath }));
                 traverse(value);
                 keyPath.pop();
             });

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

@@ -1,11 +1,3 @@
-interface EventConfig {
-  [key: string]: string[];
-}
-
-export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap']
-
-export const LONGPRESS_EVENTS = ['bindlongpress', 'catchlongpress', 'capture-bindlongpress', 'capture-catchlongpress']
-
 const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } = {
   bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
   bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
@@ -32,4 +24,5 @@ const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } =
   'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
   'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
 }
+
 export default eventConfigMap