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

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

@@ -75,7 +75,7 @@ const parseTransform = (transformStr) => {
     const values = parseValues(transformStr);
     const transform = [];
     values.forEach(item => {
-        const match = item.match(/([/\w]+)\(([^)]+)\)/);
+        const match = item.match(/([/\w]+)\((.+)\)/);
         if (match && match.length >= 3) {
             let key = match[1];
             const val = match[2];
@@ -206,14 +206,13 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个key的多次step动画
             animatedKeys.forEach(key => {
+                const ruleV = isTransform(key) ? transform.get(key) : rules.get(key);
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                const toVal = rules.get(key) !== undefined
-                    ? rules.get(key)
-                    : transform.get(key) !== undefined
-                        ? transform.get(key)
-                        : index > 0
-                            ? lastValueMap[key]
-                            : shareValMap[key].value;
+                const toVal = ruleV !== undefined
+                    ? ruleV
+                    : index > 0
+                        ? lastValueMap[key]
+                        : shareValMap[key].value;
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {

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

@@ -15,8 +15,10 @@ 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 = {
@@ -31,7 +33,7 @@ function getSafeAreaInset(name) {
     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 +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 = '') => {
@@ -238,11 +240,15 @@ 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 = [];
@@ -250,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;
             }
@@ -260,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;
@@ -273,78 +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;
+                }
             }
-        }
-    });
-    // 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 = [];
@@ -467,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;

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