@mpxjs/webpack-plugin 2.10.4-beta.19-input → 2.10.4-beta.19-input1

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

@@ -1,10 +1,11 @@
-import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
+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 } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
 import FastImage from '@d11/react-native-fast-image';
+import { runOnJS } from 'react-native-reanimated';
 import { Gesture } from 'react-native-gesture-handler';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
@@ -25,7 +26,6 @@ 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',
@@ -121,8 +121,6 @@ const selfPercentRule = {
 };
 const parentHeightPercentRule = {
     height: true,
-    minHeight: true,
-    maxHeight: true,
     top: true,
     bottom: true
 };
@@ -183,11 +181,10 @@ function resolveVar(input, varContext) {
     });
     return global.__formatValue(replaced.source());
 }
-function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
+function transformVar(styleObj, varKeyPaths, varContext) {
     varKeyPaths.forEach((varKeyPath) => {
         setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
             target[key] = resolveVar(value, varContext);
-            visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });
 }
@@ -227,122 +224,28 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
+const stringifyProps = ['fontWeight'];
 function transformStringify(styleObj) {
-    if (isNumber(styleObj.fontWeight)) {
-        styleObj.fontWeight = '' + styleObj.fontWeight;
-    }
-}
-function transformPosition(styleObj, meta) {
-    if (styleObj.position === 'fixed') {
-        styleObj.position = 'absolute';
-        meta.hasPositionFixed = true;
-    }
-}
-// 多value解析
-function 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)'
-function 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':
-                    // rotate 处理成 rotateZ
-                    key = key === 'rotate' ? 'rotateZ' : key;
-                    // 单个值处理
-                    transform.push({ [key]: global.__formatValue(val) });
-                    break;
-                case 'matrix':
-                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
-                    break;
-                case 'translate':
-                case 'scale':
-                case 'skew':
-                case 'translate3d': // x y 支持 z不支持
-                case 'scale3d': // x y 支持 z不支持
-                    {
-                        // 2 个以上的值处理
-                        key = key.replace('3d', '');
-                        const vals = parseValues(val, ',').splice(0, 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;
-                    }
-            }
+    stringifyProps.forEach((prop) => {
+        if (isNumber(styleObj[prop])) {
+            styleObj[prop] = '' + styleObj[prop];
         }
     });
-    return transform;
-}
-// format style transform
-function transformTransform(style) {
-    if (!style.transform || Array.isArray(style.transform))
-        return;
-    style.transform = parseTransform(style.transform);
-}
-function transformBoxShadow(styleObj) {
-    if (!styleObj.boxShadow)
-        return;
-    styleObj.boxShadow = parseValues(styleObj.boxShadow).reduce((res, i, idx) => {
-        return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
-    }, '');
 }
 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({ target, key, value, keyPath }) {
+    function varVisitor({ key, value, keyPath }) {
         if (keyPath.length === 1) {
             if (unoVarDecRegExp.test(key)) {
                 unoVarStyle[key] = value;
@@ -366,33 +269,6 @@ 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
@@ -413,61 +289,96 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
             varContextRef.current = newVarContext;
         }
-        transformVar(normalStyle, varKeyPaths, varContextRef.current, visitOther);
+        transformVar(normalStyle, varKeyPaths, varContextRef.current);
     }
     // apply unocss var
     if (unoVarKeyPaths.length) {
-        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther);
+        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle);
     }
-    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;
+    const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current);
+    if (diff) {
+        normalStyleRef.current = clone;
+        normalStyleChangedRef.current = !normalStyleChangedRef.current;
+    }
+    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());
+            }
         }
-        else {
-            const formatted = global.__formatValue(value);
-            if (typeof formatted === 'number') {
-                return formatted;
+        function calcVisitor({ value, keyPath }) {
+            if (calcUseRegExp.test(value)) {
+                calcKeyPaths.push(keyPath.slice());
             }
-            else {
-                warn('calc() only support number, px, rpx, % temporarily.');
-                return 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());
             }
         }
-    });
-    // apply position
-    transformPosition(normalStyle, positionMeta);
-    // transform number enum stringify
-    transformStringify(normalStyle);
-    // transform rpx to px
-    transformBoxShadow(normalStyle);
-    // transform 字符串格式转化数组格式
-    transformTransform(normalStyle);
-    return {
+        function transformPosition(styleObj) {
+            if (styleObj.position === 'fixed') {
+                hasPositionFixed = true;
+                styleObj.position = 'absolute';
+            }
+        }
+        // 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 {
+                    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({
         hasVarDec,
         varContextRef,
         setWidth,
-        setHeight,
-        normalStyle,
-        hasSelfPercent,
-        hasPositionFixed: positionMeta.hasPositionFixed
-    };
+        setHeight
+    }, memoResult);
 }
 export function traverseStyle(styleObj, visitors) {
     const keyPath = [];
@@ -476,7 +387,12 @@ 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();
             });
@@ -534,8 +450,19 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             }
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                    const { top: navigationY = 0 } = navigation?.layout || {};
-                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
+                    const { y: navigationY = 0 } = navigation?.layout || {};
+                    layoutRef.current = {
+                        x,
+                        y: y - navigationY,
+                        width,
+                        height,
+                        offsetLeft,
+                        offsetTop: offsetTop - navigationY,
+                        _x: x,
+                        _y: y,
+                        _offsetLeft: offsetLeft,
+                        _offsetTop: offsetTop
+                    };
                 });
             }
             onLayout && onLayout(e);
@@ -611,7 +538,7 @@ export function getCurrentPage(pageId) {
 }
 export function renderImage(imageProps, enableFastImage = false) {
     const Component = enableFastImage ? FastImage : Image;
-    return createElement(Component, imageProps);
+    return <Component {...imageProps}/>;
 }
 export function pickStyle(styleObj = {}, pickedKeys, callback) {
     return pickedKeys.reduce((acc, key) => {
@@ -662,11 +589,13 @@ export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled
     const gesture = useMemo(() => {
         return Gesture.Pan()
             .onTouchesDown(() => {
-            setStartTimer();
+            'worklet';
+            runOnJS(setStartTimer)();
         })
             .onTouchesUp(() => {
-            setStayTimer();
-        }).runOnJS(true);
+            'worklet';
+            runOnJS(setStayTimer)();
+        });
     }, []);
     if (gestureRef) {
         gesture.simultaneousWithExternalGesture(gestureRef);
@@ -676,17 +605,3 @@ export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled
         gesture
     };
 }
-export function useRunOnJSCallback(callbackMapRef) {
-    const invokeCallback = useCallback((key, ...args) => {
-        const callback = callbackMapRef.current[key];
-        // eslint-disable-next-line node/no-callback-literal
-        if (isFunction(callback))
-            return callback(...args);
-    }, []);
-    useEffect(() => {
-        return () => {
-            callbackMapRef.current = {};
-        };
-    }, []);
-    return invokeCallback;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4-beta.19-input",
+  "version": "2.10.4-beta.19-input1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -1,145 +0,0 @@
-import { useState, useEffect, useCallback, useRef, createElement } from 'react';
-import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
-import FastImage from '@d11/react-native-fast-image';
-const asyncChunkMap = new Map();
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        padding: 20,
-        backgroundColor: '#fff'
-    },
-    loadingImage: {
-        width: 100,
-        height: 100,
-        marginTop: 220,
-        alignSelf: 'center'
-    },
-    buttonText: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '500',
-        textAlign: 'center'
-    },
-    errorImage: {
-        marginTop: 80,
-        width: 220,
-        aspectRatio: 1,
-        alignSelf: 'center'
-    },
-    errorText: {
-        fontSize: 16,
-        textAlign: 'center',
-        color: '#333',
-        marginBottom: 20
-    },
-    retryButton: {
-        position: 'absolute',
-        bottom: 54,
-        left: 20,
-        right: 20,
-        backgroundColor: '#fff',
-        paddingVertical: 15,
-        borderRadius: 30,
-        marginTop: 40,
-        borderWidth: 1,
-        borderColor: '#FF5F00'
-    },
-    retryButtonText: {
-        color: '#FF5F00',
-        fontSize: 16,
-        fontWeight: '500',
-        textAlign: 'center'
-    }
-});
-const DefaultFallback = ({ onReload }) => {
-    return (<View style={styles.container}>
-      <Image source={{
-            uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png'
-        }} style={styles.errorImage} resizeMode="contain"/>
-      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
-      <TouchableOpacity style={styles.retryButton} onPress={onReload} activeOpacity={0.7}>
-        <Text style={styles.retryButtonText}>点击重试</Text>
-      </TouchableOpacity>
-    </View>);
-};
-const DefaultLoading = () => {
-    return (<View style={styles.container}>
-      <FastImage style={styles.loadingImage} source={{
-            uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif'
-        }} resizeMode={FastImage.resizeMode.contain}></FastImage>
-    </View>);
-};
-const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getFallback, getChildren }) => {
-    const [status, setStatus] = useState('pending');
-    const chunkLoaded = asyncChunkMap.has(moduleId);
-    const loadChunkPromise = useRef(null);
-    const reloadPage = useCallback(() => {
-        setStatus('pending');
-    }, []);
-    useEffect(() => {
-        let cancelled = false;
-        if (!chunkLoaded && status === 'pending') {
-            if (loadChunkPromise.current) {
-                loadChunkPromise
-                    .current.then((res) => {
-                    if (cancelled)
-                        return;
-                    asyncChunkMap.set(moduleId, res);
-                    setStatus('loaded');
-                })
-                    .catch((e) => {
-                    if (cancelled)
-                        return;
-                    if (type === 'component') {
-                        global.__mpxAppCbs.lazyLoad.forEach((cb) => {
-                            // eslint-disable-next-line node/no-callback-literal
-                            cb({
-                                type: 'subpackage',
-                                subpackage: [chunkName],
-                                errMsg: `loadSubpackage: ${e.type}`
-                            });
-                        });
-                    }
-                    if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.onLazyLoadPageError === 'function') {
-                        mpxGlobal.__mpx.config.rnConfig.onLazyLoadPageError({
-                            subpackage: chunkName,
-                            errType: e.type
-                        });
-                    }
-                    loadChunkPromise.current = null;
-                    setStatus('error');
-                });
-            }
-        }
-        return () => {
-            cancelled = true;
-        };
-    }, [status]);
-    if (chunkLoaded) {
-        const Comp = asyncChunkMap.get(moduleId);
-        return createElement(Comp, innerProps);
-    }
-    else if (status === 'error') {
-        if (type === 'page') {
-            const fallback = getFallback ? getFallback() : DefaultFallback;
-            return createElement(fallback, { onReload: reloadPage });
-        }
-        else {
-            return getFallback ? createElement(getFallback(), innerProps) : null;
-        }
-    }
-    else {
-        if (!loadChunkPromise.current) {
-            loadChunkPromise.current = getChildren();
-        }
-        if (type === 'page') {
-            const loading = getLoading ? getLoading() : DefaultLoading;
-            return createElement(loading);
-        }
-        else {
-            return getFallback ? createElement(getFallback(), innerProps) : null;
-        }
-    }
-};
-AsyncSuspense.displayName = 'MpxAsyncSuspense';
-export default AsyncSuspense;