@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -0,0 +1,433 @@
+import { useEffect, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { Dimensions, StyleSheet } from 'react-native';
+import { isObject, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
+import { VarContext } from './context';
+import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
+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 BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/;
+export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
+export const DEFAULT_FONT_SIZE = 16;
+export const DEFAULT_UNLAY_STYLE = {
+    opacity: 0
+};
+export function rpx(value) {
+    const { width } = Dimensions.get('screen');
+    // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
+    // px = rpx * (750 / 屏幕宽度)
+    return value * width / 750;
+}
+const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/;
+const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/;
+const hairlineRegExp = /^\s*hairlineWidth\s*$/;
+const varDecRegExp = /^--.*/;
+const varUseRegExp = /var\(/;
+const calcUseRegExp = /calc\(/;
+export function omit(obj, fields) {
+    const shallowCopy = Object.assign({}, obj);
+    for (let i = 0; i < fields.length; i += 1) {
+        const key = fields[i];
+        delete shallowCopy[key];
+    }
+    return shallowCopy;
+}
+/**
+ * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
+ */
+export const useUpdateEffect = (effect, deps) => {
+    const isMounted = useRef(false);
+    // for react-refresh
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+        }
+        else {
+            return effect();
+        }
+    }, deps);
+};
+/**
+ * 解析行内样式
+ * @param inlineStyle
+ * @returns
+ */
+export const parseInlineStyle = (inlineStyle = '') => {
+    return inlineStyle.split(';').reduce((styleObj, style) => {
+        const [k, v, ...rest] = style.split(':');
+        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() });
+    }, {});
+};
+export const parseUrl = (cssUrl = '') => {
+    if (!cssUrl)
+        return;
+    const match = cssUrl.match(URL_REGEX);
+    return match?.[1];
+};
+export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKey = []) => {
+    return {
+        ...transferProps,
+        ...omit(originProps, deletePropsKey)
+    };
+};
+export function isText(ele) {
+    if (isValidElement(ele)) {
+        const displayName = ele.type?.displayName;
+        return displayName === 'mpx-text' || displayName === 'Text';
+    }
+    return false;
+}
+export function isEmbedded(ele) {
+    if (isValidElement(ele)) {
+        const displayName = ele.type?.displayName || '';
+        return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName);
+    }
+    return false;
+}
+export function every(children, callback) {
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return childrenArray.every((child) => callback(child));
+}
+export function groupBy(obj, callback, group = {}) {
+    Object.entries(obj).forEach(([key, val]) => {
+        const groupKey = callback(key, val);
+        group[groupKey] = group[groupKey] || {};
+        group[groupKey][key] = val;
+    });
+    return group;
+}
+export function splitStyle(styleObj) {
+    return groupBy(styleObj, (key) => {
+        if (TEXT_STYLE_REGEX.test(key)) {
+            return 'textStyle';
+        }
+        else if (BACKGROUND_REGEX.test(key)) {
+            return 'backgroundStyle';
+        }
+        else {
+            return 'innerStyle';
+        }
+    });
+}
+const selfPercentRule = {
+    translateX: 'width',
+    translateY: 'height',
+    borderTopLeftRadius: 'width',
+    borderBottomLeftRadius: 'width',
+    borderBottomRightRadius: 'width',
+    borderTopRightRadius: 'width',
+    borderRadius: 'width'
+};
+const parentHeightPercentRule = {
+    height: true,
+    top: true,
+    bottom: true
+};
+// todo calc时处理角度和时间等单位
+function formatValue(value) {
+    let matched;
+    if ((matched = pxRegExp.exec(value))) {
+        return +matched[1];
+    }
+    else if ((matched = rpxRegExp.exec(value))) {
+        return rpx(+matched[1]);
+    }
+    else if (hairlineRegExp.test(value)) {
+        return StyleSheet.hairlineWidth;
+    }
+    return value;
+}
+function resolvePercent(value, key, percentConfig) {
+    if (!(typeof value === 'string' && PERCENT_REGEX.test(value)))
+        return value;
+    let base;
+    let reason;
+    if (key === 'fontSize') {
+        base = percentConfig.parentFontSize;
+        reason = 'parent-font-size';
+    }
+    else if (key === 'lineHeight') {
+        base = resolvePercent(percentConfig.fontSize, 'fontSize', percentConfig);
+        reason = 'font-size';
+    }
+    else if (selfPercentRule[key]) {
+        base = percentConfig[selfPercentRule[key]];
+        reason = selfPercentRule[key];
+    }
+    else if (parentHeightPercentRule[key]) {
+        base = percentConfig.parentHeight;
+        reason = 'parent-height';
+    }
+    else {
+        base = percentConfig.parentWidth;
+        reason = 'parent-width';
+    }
+    if (typeof base !== 'number') {
+        error(`[${key}] can not contain % unit unless you set [${reason}] with a number for the percent calculation.`);
+        return value;
+    }
+    else {
+        return parseFloat(value) / 100 * base;
+    }
+}
+function transformPercent(styleObj, percentKeyPaths, percentConfig) {
+    percentKeyPaths.forEach((percentKeyPath) => {
+        setStyle(styleObj, percentKeyPath, ({ target, key, value }) => {
+            target[key] = resolvePercent(value, key, percentConfig);
+        });
+    });
+}
+function resolveVar(input, varContext) {
+    const parsed = parseFunc(input, 'var');
+    const replaced = new ReplaceSource(input);
+    parsed.forEach(({ start, end, args }) => {
+        const varName = args[0];
+        const fallback = args[1] || '';
+        let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback;
+        if (varUseRegExp.test(varValue)) {
+            varValue = '' + resolveVar(varValue, varContext);
+        }
+        else {
+            varValue = '' + formatValue(varValue);
+        }
+        replaced.replace(start, end - 1, varValue);
+    });
+    return formatValue(replaced.source());
+}
+function transformVar(styleObj, varKeyPaths, varContext) {
+    varKeyPaths.forEach((varKeyPath) => {
+        setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
+            target[key] = resolveVar(value, varContext);
+        });
+    });
+}
+function transformCalc(styleObj, calcKeyPaths, formatter) {
+    calcKeyPaths.forEach((calcKeyPath) => {
+        setStyle(styleObj, calcKeyPath, ({ target, key, value }) => {
+            const parsed = parseFunc(value, 'calc');
+            const replaced = new ReplaceSource(value);
+            parsed.forEach(({ start, end, args }) => {
+                const exp = args[0];
+                try {
+                    const result = new ExpressionParser(exp, (value) => {
+                        return formatter(value, key);
+                    }).parse();
+                    replaced.replace(start, end - 1, '' + result.value);
+                }
+                catch (e) {
+                    error(`calc(${exp}) parse error.`, undefined, e);
+                }
+            });
+            target[key] = formatValue(replaced.source());
+        });
+    });
+}
+export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
+    const varStyle = {};
+    const normalStyle = {};
+    let hasVarDec = false;
+    let hasVarUse = false;
+    let hasSelfPercent = false;
+    const varKeyPaths = [];
+    const percentKeyPaths = [];
+    const calcKeyPaths = [];
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    function varVisitor({ key, value, keyPath }) {
+        if (keyPath.length === 1) {
+            if (varDecRegExp.test(key)) {
+                hasVarDec = true;
+                varStyle[key] = value;
+            }
+            else {
+                // clone对象避免set值时改写到props
+                normalStyle[key] = isObject(value) ? diffAndCloneA(value).clone : value;
+            }
+        }
+        // 对于var定义中使用的var无需替换值，可以通过resolveVar递归解析出值
+        if (!varDecRegExp.test(key) && varUseRegExp.test(value)) {
+            hasVarUse = true;
+            varKeyPaths.push(keyPath.slice());
+        }
+    }
+    // traverse var
+    traverseStyle(styleObj, [varVisitor]);
+    hasVarDec = hasVarDec || !!externalVarContext;
+    enableVar = enableVar || hasVarDec || hasVarUse;
+    const enableVarRef = useRef(enableVar);
+    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
+    const varContextRef = useRef({});
+    if (enableVarRef.current) {
+        const varContext = useContext(VarContext);
+        const newVarContext = Object.assign({}, varContext, externalVarContext, varStyle);
+        // 缓存比较newVarContext是否发生变化
+        if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
+            varContextRef.current = newVarContext;
+        }
+        transformVar(normalStyle, varKeyPaths, varContextRef.current);
+    }
+    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') {
+            percentKeyPaths.push(keyPath.slice());
+        }
+    }
+    // traverse calc & percent
+    traverseStyle(normalStyle, [percentVisitor, calcVisitor]);
+    const percentConfig = {
+        width,
+        height,
+        fontSize: normalStyle.fontSize,
+        parentWidth,
+        parentHeight,
+        parentFontSize
+    };
+    // 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 = formatValue(value);
+            if (typeof formatted === 'number') {
+                return formatted;
+            }
+            else {
+                warn('calc() only support number, px, rpx, % temporarily.');
+                return 0;
+            }
+        }
+    });
+    return {
+        normalStyle,
+        hasSelfPercent,
+        hasVarDec,
+        enableVarRef,
+        varContextRef,
+        setWidth,
+        setHeight
+    };
+}
+export function traverseStyle(styleObj, visitors) {
+    const keyPath = [];
+    function traverse(target) {
+        if (Array.isArray(target)) {
+            target.forEach((value, index) => {
+                const key = String(index);
+                keyPath.push(key);
+                visitors.forEach(visitor => visitor({
+                    target,
+                    key,
+                    value,
+                    keyPath
+                }));
+                traverse(value);
+                keyPath.pop();
+            });
+        }
+        else if (isObject(target)) {
+            Object.entries(target).forEach(([key, value]) => {
+                keyPath.push(key);
+                visitors.forEach(visitor => visitor({ target, key, value, keyPath }));
+                traverse(value);
+                keyPath.pop();
+            });
+        }
+    }
+    traverse(styleObj);
+}
+export function setStyle(styleObj, keyPath, setter, needClone = false) {
+    let target = styleObj;
+    const firstKey = keyPath[0];
+    const lastKey = keyPath[keyPath.length - 1];
+    if (needClone)
+        target[firstKey] = diffAndCloneA(target[firstKey]).clone;
+    for (let i = 0; i < keyPath.length - 1; i++) {
+        target = target[keyPath[i]];
+        if (!target)
+            return;
+    }
+    setter({
+        target,
+        key: lastKey,
+        value: target[lastKey],
+        keyPath
+    });
+}
+export function splitProps(props) {
+    return groupBy(props, (key) => {
+        if (TEXT_PROPS_REGEX.test(key)) {
+            return 'textProps';
+        }
+        else {
+            return 'innerProps';
+        }
+    });
+}
+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 layoutProps = {};
+    const enableOffset = props['enable-offset'];
+    if (hasSelfPercent || onLayout || enableOffset) {
+        layoutProps.onLayout = (e) => {
+            hasLayoutRef.current = true;
+            if (hasSelfPercent) {
+                const { width, height } = e?.nativeEvent?.layout || {};
+                setWidth(width || 0);
+                setHeight(height || 0);
+            }
+            if (enableOffset) {
+                nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+                    layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+                });
+            }
+            onLayout && onLayout(e);
+            props.onLayout && props.onLayout(e);
+        };
+    }
+    return {
+        layoutRef,
+        layoutStyle,
+        layoutProps
+    };
+};
+export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, textProps }) {
+    let { children } = props;
+    if (textStyle || textProps) {
+        children = Children.map(children, (child) => {
+            if (isText(child)) {
+                const style = { ...textStyle, ...child.props.style };
+                return cloneElement(child, { ...textProps, style });
+            }
+            return child;
+        });
+    }
+    if (hasVarDec && varContext) {
+        children = <VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>;
+    }
+    return children;
+}

package/lib/runtime/components/react/getInnerListeners.ts

@@ -82,7 +82,7 @@ export const getDataSet = (props: Record<string, any>) => {
 }
 
 export const getCustomEvent = (
-  type: string = '',
+  type = '',
   oe: any = {},
   { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
   props: Props = {}
@@ -97,16 +97,18 @@ export const getCustomEvent = (
       dataset: getDataSet(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
-    }
-
+    },
+    persist: oe.persist,
+    stopPropagation: oe.stopPropagation,
+    preventDefault: oe.preventDefault
   }
 }
 
 const useInnerProps = (
   props: Props = {},
   additionalProps: AdditionalProps = {},
-  removeProps: RemoveProps = [],
-  rawConfig: UseInnerPropsConfig
+  userRemoveProps: RemoveProps = [],
+  rawConfig?: UseInnerPropsConfig
 ) => {
   const ref = useRef<InnerRef>({
     startTimer: {
@@ -127,7 +129,18 @@ const useInnerProps = (
 
   const propsRef = useRef<Record<string, any>>({})
   const eventConfig: { [key: string]: string[] } = {}
-  const config = rawConfig || {}
+  const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false }
+  const removeProps = [
+    'children',
+    'enable-background',
+    'enable-offset',
+    'enable-var',
+    'external-var-context',
+    'parent-font-size',
+    'parent-width',
+    'parent-height',
+    ...userRemoveProps
+  ]
 
   propsRef.current = { ...props, ...additionalProps }
 
@@ -141,7 +154,7 @@ const useInnerProps = (
     return omit(propsRef.current, removeProps)
   }
 
-  function handleEmitEvent(
+  function handleEmitEvent (
     events: string[],
     type: string,
     oe: NativeTouchEvent
@@ -156,7 +169,20 @@ const useInnerProps = (
       }
     })
   }
-  function handleTouchstart(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+
+  function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
+    const nativeEvent = e.nativeEvent
+    const currentPageX = nativeEvent.changedTouches[0].pageX
+    const currentPageY = nativeEvent.changedTouches[0].pageY
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
+      ref.current.needPress[type] = false
+      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
+      ref.current.startTimer[type] = null
+    }
+  }
+
+  function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture') {
     e.persist()
     const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
     const bubblePressEvent = ['catchlongpress', 'bindlongpress']
@@ -181,23 +207,17 @@ const useInnerProps = (
     }
   }
 
-  function handleTouchmove(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+  function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture') {
     const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
     const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove']
-    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
-    const nativeEvent = e.nativeEvent
-    const currentPageX = nativeEvent.changedTouches[0].pageX
-    const currentPageY = nativeEvent.changedTouches[0].pageY
     const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-      ref.current.needPress[type] = false
-      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-      ref.current.startTimer[type] = null
-    }
     handleEmitEvent(currentTouchEvent, 'touchmove', e)
+    checkIsNeedPress(e, type)
   }
 
-  function handleTouchend(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+  function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture') {
+    // move event may not be triggered
+    checkIsNeedPress(e, type)
     const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
     const bubbleTapEvent = ['catchtap', 'bindtap']
     const captureTouchEvent = ['capture-catchtouchend', 'capture-bindtouchend']
@@ -208,11 +228,14 @@ const useInnerProps = (
     ref.current.startTimer[type] = null
     handleEmitEvent(currentTouchEvent, 'touchend', e)
     if (ref.current.needPress[type]) {
+      if (type === 'bubble' && config.disableTap) {
+        return
+      }
       handleEmitEvent(currentTapEvent, 'tap', e)
     }
   }
 
-  function handleTouchcancel(e: NativeTouchEvent, type: 'bubble' | 'capture') {
+  function handleTouchcancel (e: NativeTouchEvent, type: 'bubble' | 'capture') {
     const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
     const captureTouchEvent = ['capture-catchtouchcancel', 'capture-bindtouchcancel']
     const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
@@ -272,7 +295,6 @@ const useInnerProps = (
 
   const finalEventKeys = [...new Set(transformedEventKeys)]
 
-
   touchEventList.forEach(item => {
     if (finalEventKeys.includes(item.eventName)) {
       events[item.eventName] = item.handler