@mpxjs/webpack-plugin 2.10.3-beta.17 → 2.10.3-beta.18

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

@@ -1,11 +1,10 @@
-import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } 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*$/;
@@ -26,6 +25,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',
@@ -81,7 +81,7 @@ export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
         const isCustomText = ele.type?.isCustomText;
-        return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText;
+        return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'MpxInlineText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -121,6 +121,8 @@ const selfPercentRule = {
 };
 const parentHeightPercentRule = {
     height: true,
+    minHeight: true,
+    maxHeight: true,
     top: true,
     bottom: true
 };
@@ -167,24 +169,35 @@ function transformPercent(styleObj, percentKeyPaths, percentConfig) {
 function resolveVar(input, varContext) {
     const parsed = parseFunc(input, 'var');
     const replaced = new ReplaceSource(input);
-    parsed.forEach(({ start, end, args }) => {
+    for (const { start, end, args } of parsed) {
         const varName = args[0];
-        const fallback = args[1] || '';
+        const fallback = args[1];
         let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback;
+        if (varValue === undefined)
+            return;
         if (varUseRegExp.test(varValue)) {
-            varValue = '' + resolveVar(varValue, varContext);
+            varValue = resolveVar(varValue, varContext);
+            if (varValue === undefined)
+                return;
         }
         else {
-            varValue = '' + global.__formatValue(varValue);
+            varValue = global.__formatValue(varValue);
         }
         replaced.replace(start, end - 1, varValue);
-    });
+    }
     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);
+            const resolved = resolveVar(value, varContext);
+            if (resolved === undefined) {
+                delete target[key];
+                error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`);
+                return;
+            }
+            target[key] = resolved;
+            visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });
 }
@@ -224,28 +237,122 @@ 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;
+    }
+}
+// 多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;
+                    }
+            }
         }
     });
+    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({ key, value, keyPath }) {
+    function varVisitor({ target, key, value, keyPath }) {
         if (keyPath.length === 1) {
             if (unoVarDecRegExp.test(key)) {
                 unoVarStyle[key] = value;
@@ -269,6 +376,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 +423,61 @@ 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);
+        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther);
     }
-    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());
-            }
-        }
-        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);
+    // transform rpx to px
+    transformBoxShadow(normalStyle);
+    // transform 字符串格式转化数组格式
+    transformTransform(normalStyle);
+    return {
         hasVarDec,
         varContextRef,
         setWidth,
-        setHeight
-    }, memoResult);
+        setHeight,
+        normalStyle,
+        hasSelfPercent,
+        hasPositionFixed: positionMeta.hasPositionFixed
+    };
 }
 export function traverseStyle(styleObj, visitors) {
     const keyPath = [];
@@ -387,12 +486,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();
             });
@@ -450,7 +544,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             }
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                    const { y: navigationY = 0 } = navigation?.layout || {};
+                    const { top: navigationY = 0 } = navigation?.layout || {};
                     layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
                 });
             }
@@ -527,7 +621,7 @@ export function getCurrentPage(pageId) {
 }
 export function renderImage(imageProps, enableFastImage = false) {
     const Component = enableFastImage ? FastImage : Image;
-    return <Component {...imageProps}/>;
+    return createElement(Component, imageProps);
 }
 export function pickStyle(styleObj = {}, pickedKeys, callback) {
     return pickedKeys.reduce((acc, key) => {
@@ -578,13 +672,11 @@ export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled
     const gesture = useMemo(() => {
         return Gesture.Pan()
             .onTouchesDown(() => {
-            'worklet';
-            runOnJS(setStartTimer)();
+            setStartTimer();
         })
             .onTouchesUp(() => {
-            'worklet';
-            runOnJS(setStayTimer)();
-        });
+            setStayTimer();
+        }).runOnJS(true);
     }, []);
     if (gestureRef) {
         gesture.simultaneousWithExternalGesture(gestureRef);
@@ -594,3 +686,17 @@ 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/lib/runtime/components/web/mpx-titlebar.vue

@@ -1,5 +1,13 @@
 <script>
 import mpx from '@mpxjs/core'
+
+const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
+const innerHeight = (isIOS ? 44 : 48) + 'px'
+
+const safeStyle = { paddingTop: 'var(--safe-area-inset-top)' }
+
+console.log('isIOS', isIOS)
+
 export default {
   name: 'mpx-titlebar',
   props: {
@@ -49,24 +57,20 @@ export default {
         return false
       }
     },
-    // safe area 顶部 padding，使用 env(safe-area-inset-top)
-    safeStyle() {
-      // 多数浏览器支持 env(), 为兼容也使用 constant() 备选（旧 iOS Safari）
-      return {
-        paddingTop: 'env(safe-area-inset-top, 0px)'
+    // 安卓安全高度
+    safeAreaInsetTop() {
+      if (typeof mpx.config.webConfig.safeAreaInsetTop === 'number' && mpx.config.webConfig.safeAreaInsetTop >= 0) {
+        return mpx.config.webConfig.safeAreaInsetTop
       }
+      return 24
     },
     warpStyle() {
       return {
-        paddingTop: 'calc(env(safe-area-inset-top, 0px) + 44px)',
-        height: '100%'
+        '--titlebar-height': innerHeight,
+        '--safe-area-inset-top': `${isIOS ? 'env(safe-area-inset-top, constant(safe-area-inset-top), 0px)' : this.safeAreaInsetTop + 'px'}`,
+        paddingTop: 'calc(var(--safe-area-inset-top) + var(--titlebar-height))',
       }
     },
-    // 内部标题栏高度（遵循小程序常见平台差异）
-    innerHeight() {
-      const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
-      return (isIOS ? 44 : 48) + 'px'
-    },
     rootStyle() {
       return {
         background: this.backgroundColor,
@@ -75,7 +79,7 @@ export default {
     },
     innerStyle() {
       return {
-        height: this.innerHeight
+        height: innerHeight
       }
     }
   },
@@ -134,7 +138,7 @@ export default {
         class: ['mpx-titlebar'],
         style: this.rootStyle
       }, [
-        h('div', { class: 'mpx-titlebar__safe', style: this.safeStyle }, [
+        h('div', { class: 'mpx-titlebar__safe', style: safeStyle }, [
           h('div', { class: 'mpx-titlebar__inner', style: this.innerStyle }, [
             h('div', { class: 'mpx-titlebar__left', on: { click: this.onLeftClick } }, leftChildren),
             h('div', { class: 'mpx-titlebar__center' }, centerChildren),
@@ -151,6 +155,7 @@ export default {
 <style scoped>
 .mpx-page-warp {
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
 
@@ -160,9 +165,7 @@ export default {
 }
 
 .mpx-titlebar__safe {
-  /* safe area handled by padding-top; include both env and constant for broader iOS support */
-  padding-top: env(safe-area-inset-top, 0px);
-  padding-top: constant(safe-area-inset-top, 0px);
+  padding-top: var(--safe-area-inset-top);
 }
 
 .mpx-titlebar__inner {
@@ -209,7 +212,7 @@ export default {
 
 .mpx-titlebar {
   /* flex-shrink: 0; */
-  height: calc(env(safe-area-inset-top, 0px) + 44px);
+  height: calc(var(--safe-area-inset-top) + var(--titlebar-height));
   width: 100%;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.3-beta.17",
+  "version": "2.10.3-beta.18",
   "description": "mpx compile core",
   "keywords": [
     "mpx"