@mpxjs/webpack-plugin 2.9.62 → 2.9.64

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -1,14 +1,15 @@
 import { forwardRef, useEffect } from 'react';
-// @ts-ignore
-import { noop } from '@mpxjs/utils';
+import { noop, warn } from '@mpxjs/utils';
 import { Portal } from '@ant-design/react-native';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
-// @ts-ignore
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
 const _WebView = forwardRef((props, ref) => {
     const { src, bindmessage = noop, bindload = noop, binderror = noop } = props;
+    if (props.style) {
+        warn('The web-view component does not support the style prop.');
+    }
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -56,12 +57,14 @@ const _WebView = forwardRef((props, ref) => {
         binderror(result);
     };
     const _message = function (res) {
-        let data;
+        let data = {};
         let asyncCallback;
         const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab });
         try {
             const nativeEventData = res.nativeEvent?.data;
-            data = JSON.parse(nativeEventData);
+            if (typeof nativeEventData === 'string') {
+                data = JSON.parse(nativeEventData);
+            }
         }
         catch (e) {
             data = {};

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

@@ -0,0 +1,218 @@
+export class ExpressionParser {
+    tokens;
+    formatter;
+    functions;
+    current;
+    constructor(input, formatter = val => parseFloat(val), functions = {}) {
+        this.tokens = this.tokenize(input);
+        this.formatter = formatter;
+        this.functions = functions;
+        this.current = 0;
+    }
+    tokenize(input) {
+        const tokens = [];
+        const regex = /(\d+\.?\d*(?:px|rpx|%|vw|vh)?|[+\-*/(),]|\b[a-zA-Z_][a-zA-Z0-9_]*\b)/g;
+        let match;
+        while ((match = regex.exec(input))) {
+            if (/^\d+\.?\d*(?:px|rpx|%|vw|vh)?$/.test(match[0])) {
+                const lastToken = tokens[tokens.length - 1];
+                const last2Token = tokens[tokens.length - 2];
+                if (lastToken?.type === '-' && (!last2Token || /^[+\-*/(,]$/.test(last2Token?.type))) {
+                    tokens.pop();
+                    tokens.push({
+                        type: 'NUMBER',
+                        value: '-' + match[0]
+                    });
+                }
+                else {
+                    tokens.push({
+                        type: 'NUMBER',
+                        value: match[0]
+                    });
+                }
+            }
+            else {
+                tokens.push({
+                    type: match[0],
+                    value: match[0]
+                });
+            }
+        }
+        return tokens;
+    }
+    parse() {
+        return this.expression();
+    }
+    expression() {
+        let node = this.term();
+        while (this.current < this.tokens.length &&
+            (this.tokens[this.current].type === '+' || this.tokens[this.current].type === '-')) {
+            const operator = this.tokens[this.current].type;
+            this.current++;
+            const right = this.term();
+            node = this.applyOperator(operator, node, right);
+        }
+        return node;
+    }
+    term() {
+        let node = this.factor();
+        while (this.current < this.tokens.length &&
+            (this.tokens[this.current].type === '*' || this.tokens[this.current].type === '/')) {
+            const operator = this.tokens[this.current].type;
+            this.current++;
+            const right = this.factor();
+            node = this.applyOperator(operator, node, right);
+        }
+        return node;
+    }
+    factor() {
+        const token = this.tokens[this.current];
+        if (token.type === 'NUMBER') {
+            this.current++;
+            const numericValue = this.formatter(token.value);
+            return { type: 'NUMBER', value: numericValue };
+        }
+        else if (token.type === '(') {
+            this.current++;
+            const node = this.expression();
+            if (this.tokens[this.current].type !== ')') {
+                throw new Error('Expected closing parenthesis');
+            }
+            this.current++;
+            return node;
+        }
+        else if (this.functions[token.type]) {
+            this.current++;
+            if (this.tokens[this.current].type !== '(') {
+                throw new Error('Expected opening parenthesis after function');
+            }
+            this.current++;
+            const args = this.parseArguments();
+            if (this.tokens[this.current].type !== ')') {
+                throw new Error('Expected closing parenthesis');
+            }
+            this.current++;
+            return this.applyFunction(token.type, args);
+        }
+        throw new Error(`Unexpected token: ${token.type}`);
+    }
+    parseArguments() {
+        const args = [];
+        while (this.current < this.tokens.length && this.tokens[this.current].type !== ')') {
+            args.push(this.expression());
+            if (this.tokens[this.current].type === ',') {
+                this.current++;
+            }
+        }
+        return args;
+    }
+    applyOperator(operator, left, right) {
+        const leftVal = left.value;
+        const rightVal = right.value;
+        let result;
+        switch (operator) {
+            case '+':
+                result = leftVal + rightVal;
+                break;
+            case '-':
+                result = leftVal - rightVal;
+                break;
+            case '*':
+                result = leftVal * rightVal;
+                break;
+            case '/':
+                result = leftVal / rightVal;
+                break;
+            default: throw new Error(`Unknown operator: ${operator}`);
+        }
+        return { type: 'NUMBER', value: result };
+    }
+    applyFunction(func, args) {
+        if (args.some(arg => arg.type !== 'NUMBER')) {
+            throw new Error('Function arguments must be numbers');
+        }
+        const numericArgs = args.map(arg => arg.value);
+        if (this.functions[func]) {
+            return { type: 'NUMBER', value: this.functions[func].apply(null, numericArgs) };
+        }
+        else {
+            throw new Error(`Unknown function: ${func}`);
+        }
+    }
+}
+export function parseFunc(str, funcName) {
+    const regex = new RegExp(`${funcName}\\(`, 'g');
+    const result = [];
+    let match;
+    while ((match = regex.exec(str)) !== null) {
+        const start = match.index;
+        let i = start + funcName.length + 1;
+        let depth = 1;
+        const args = [];
+        let arg = '';
+        while (depth && i < str.length) {
+            if (depth === 1 && (str[i] === ',' || str[i] === ')')) {
+                args.push(arg.trim());
+                arg = '';
+            }
+            else {
+                arg += str[i];
+            }
+            switch (str[i]) {
+                case '(':
+                    depth++;
+                    break;
+                case ')':
+                    depth--;
+                    break;
+                default:
+                // Do nothing
+            }
+            i++;
+        }
+        const end = regex.lastIndex = i;
+        result.push({
+            start,
+            end,
+            args
+        });
+    }
+    return result;
+}
+export class ReplaceSource {
+    _source;
+    _replacements;
+    constructor(source) {
+        this._source = source;
+        this._replacements = [];
+    }
+    replace(start, end, content) {
+        this._replacements.push({ start, end, content });
+    }
+    source() {
+        if (this._replacements.length === 0) {
+            return this._source;
+        }
+        let current = this._source;
+        let pos = 0;
+        const result = [];
+        for (const replacement of this._replacements) {
+            const start = Math.floor(replacement.start);
+            const end = Math.floor(replacement.end) + 1;
+            if (pos < start) {
+                const offset = start - pos;
+                result.push(current.slice(0, offset));
+                current = current.slice(offset);
+                pos = start;
+            }
+            result.push(replacement.content);
+            if (pos < end) {
+                const offset = end - pos;
+                current = current.slice(offset);
+                pos = end;
+            }
+        }
+        result.push(current);
+        return result.join('');
+    }
+}

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;
+}