@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

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

@@ -45,19 +45,102 @@ const InitialValue = Object.assign({
     transformOrigin: ['50%', '50%', 0]
 }, TransformInitial);
 const TransformOrigin = 'transformOrigin';
-// deg 角度
-// const isDeg = (key: RuleKey) => ['rotateX', 'rotateY', 'rotateZ', 'rotate', 'skewX', 'skewY'].includes(key)
-// 背景色
-// const isBg = (key: RuleKey) => key === 'backgroundColor'
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// 多value解析
+const parseValues = (str, char = ' ') => {
+    let stack = 0;
+    let temp = '';
+    const result = [];
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === '(') {
+            stack++;
+        }
+        else if (str[i] === ')') {
+            stack--;
+        }
+        // 非括号内 或者 非分隔字符且非空
+        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+            temp += str[i];
+        }
+        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+            result.push(temp);
+            temp = '';
+        }
+    }
+    return result;
+};
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+const parseTransform = (transformStr) => {
+    const values = parseValues(transformStr);
+    const transform = [];
+    values.forEach(item => {
+        const match = item.match(/([/\w]+)\(([^)]+)\)/);
+        if (match && match.length >= 3) {
+            let key = match[1];
+            const val = match[2];
+            switch (key) {
+                case 'translateX':
+                case 'translateY':
+                case 'scaleX':
+                case 'scaleY':
+                case 'rotateX':
+                case 'rotateY':
+                case 'rotateZ':
+                case 'rotate':
+                case 'skewX':
+                case 'skewY':
+                case 'perspective':
+                    // 单个值处理
+                    transform.push({ [key]: global.__formatValue(val) });
+                    break;
+                case 'matrix':
+                case 'matrix3d':
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
+                    break;
+                case 'translate':
+                case 'scale':
+                case 'skew':
+                case 'rotate3d': // x y z angle
+                case 'translate3d': // x y 支持 z不支持
+                case 'scale3d': // x y 支持 z不支持
+                    {
+                        // 2 个以上的值处理
+                        key = key.replace('3d', '');
+                        const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5)
+                        if (vals.length === 1 && key === 'scale') {
+                            vals.push(vals[0]);
+                        }
+                        const xyz = ['X', 'Y', 'Z'];
+                        transform.push(...vals.map((v, index) => {
+                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
+                        }));
+                        break;
+                    }
+            }
+        }
+    });
+    return transform;
+};
+// format style
+const formatStyle = (style) => {
+    if (!style.transform || Array.isArray(style.transform))
+        return style;
+    return Object.assign({}, style, {
+        transform: parseTransform(style.transform)
+    });
+};
 export default function useAnimationHooks(props) {
-    const { style: originalStyle = {}, animation } = props;
+    const { style = {}, animation } = props;
+    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
     const animatedStyleKeys = useSharedValue([]);
+    // 记录动画key的style样式值 没有的话设置为false
     const animatedKeys = useRef({});
+    // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -80,6 +163,16 @@ export default function useAnimationHooks(props) {
         // 驱动动画
         createAnimation(keys);
     }, [id]);
+    // 同步style更新
+    // useEffect(() => {
+    //   Object.keys(animatedKeys.current).forEach(key => {
+    //     const originVal = getOriginalStyleVal(key, isTransform(key))
+    //     if (originVal && animatedKeys.current[key] !== originVal) {
+    //       animatedKeys.current[key] = originVal
+    //       shareValMap[key].value = originVal
+    //     }
+    //   })
+    // }, [style])
     // ** 清空动画
     useEffect(() => {
         return () => {
@@ -113,11 +206,14 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个key的多次step动画
             animatedKeys.forEach(key => {
-                let toVal = (rules.get(key) || transform.get(key));
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                if (!toVal) {
-                    toVal = index > 0 ? lastValueMap[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 animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {
@@ -143,9 +239,8 @@ export default function useAnimationHooks(props) {
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }
-    // 获取初始值（prop style or 默认值）
     function getInitialVal(key, isTransform = false) {
-        if (isTransform && originalStyle.transform?.length) {
+        if (isTransform && Array.isArray(originalStyle.transform)) {
             let initialVal = InitialValue[key];
             // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
             originalStyle.transform.forEach(item => {
@@ -156,12 +251,31 @@ export default function useAnimationHooks(props) {
         }
         return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key];
     }
+    // 从 prop style 中获取样式初始值 没有为undefined
+    // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   if (isTransform && Array.isArray(originalStyle.transform)) {
+    //     let initialVal = undefined // InitialValue[key]
+    //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+    //     originalStyle.transform.forEach(item => {
+    //       if (item[key] !== undefined) initialVal = item[key]
+    //     })
+    //     return initialVal
+    //   }
+    //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
+    // }
+    // 获取动画shareVal初始值（prop style or 默认值）
+    // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   const originalVal = getOriginalStyleVal(key, isTransform)
+    //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
+    // }
     // 循环 animation actions 获取所有有动画的 style prop name
     function getAnimatedStyleKeys() {
         return (animation?.actions || []).reduce((keyMap, action) => {
             const { rules, transform } = action;
             const ruleArr = [...rules.keys(), ...transform.keys()];
             ruleArr.forEach(key => {
+                // const originalVal = getOriginalStyleVal(key, isTransform(key))
+                // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
                 if (!keyMap[key])
                     keyMap[key] = true;
             });
@@ -210,6 +324,6 @@ export default function useAnimationHooks(props) {
                 styles[key] = shareValMap[key].value;
             }
             return styles;
-        }, Object.assign({}, originalStyle));
+        }, {});
     });
 }

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

@@ -1,15 +1,18 @@
-import { useEffect, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
-import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
+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 { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
+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 DEFAULT_UNLAY_STYLE = {
+export const HIDDEN_STYLE = {
     opacity: 0
 };
 const varDecRegExp = /^--.*/;
@@ -24,10 +27,7 @@ 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) {
@@ -69,7 +69,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]: v.trim() });
+        return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) });
     }, {});
 };
 export const parseUrl = (cssUrl = '') => {
@@ -79,23 +79,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 === 'mpx-text' || 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;
 }
@@ -238,6 +228,14 @@ 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 normalStyle = {};
@@ -336,6 +334,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             }
         }
     });
+    // transform number enum stringify
+    transformStringify(normalStyle);
     return {
         normalStyle,
         hasSelfPercent,
@@ -402,7 +402,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 ? DEFAULT_UNLAY_STYLE : {};
+    const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}; }, [hasLayoutRef.current]);
     const layoutProps = {};
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
@@ -433,8 +433,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;
         });
@@ -444,3 +444,59 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     }
     return children;
 }
+export const debounce = (func, delay) => {
+    let timer;
+    const wrapper = (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+    wrapper.clear = () => {
+        clearTimeout(timer);
+    };
+    return wrapper;
+};
+export const useDebounceCallback = (func, delay) => {
+    const debounced = useMemo(() => debounce(func, delay), [func]);
+    return debounced;
+};
+export const useStableCallback = (callback) => {
+    const ref = useRef(callback);
+    ref.current = callback;
+    return useCallback((...args) => ref.current?.(...args), []);
+};
+export const usePrevious = (value) => {
+    const ref = useRef(undefined);
+    const prev = ref.current;
+    ref.current = value;
+    return prev;
+};
+export function flatGesture(gestures = []) {
+    return (gestures && gestures.flatMap((gesture) => {
+        if (gesture && gesture.nodeRefs) {
+            return gesture.nodeRefs
+                .map((item) => item.getNodeInstance()?.instance?.gestureRef || {});
+        }
+        return gesture?.current ? [gesture] : [];
+    })) || [];
+}
+export const extendObject = Object.assign;
+export function getCurrentPage(pageId) {
+    if (!global.getCurrentPages)
+        return;
+    const pages = global.getCurrentPages();
+    return pages.find((page) => isFunction(page.getPageId) && page.getPageId() === pageId);
+}
+export function renderImage(imageProps, enableFastImage = false) {
+    const Component = enableFastImage ? FastImage : Image;
+    return <Component {...imageProps}/>;
+}
+export function pickStyle(styleObj = {}, pickedKeys, callback) {
+    return pickedKeys.reduce((acc, key) => {
+        if (key in styleObj) {
+            acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key];
+        }
+        return acc;
+    }, {});
+}

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