@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

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

@@ -0,0 +1,289 @@
+import { forwardRef, useRef, useContext, useMemo, useState, useEffect } from 'react';
+import { warn, isFunction } from '@mpxjs/utils';
+import Portal from './mpx-portal/index';
+import { getCustomEvent } from './getInnerListeners';
+import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
+import { WebView } from 'react-native-webview';
+import useNodesRef from './useNodesRef';
+import { getCurrentPage, useNavigation } from './utils';
+import { RouteContext } from './context';
+import { StyleSheet, View, Text } from 'react-native';
+const styles = StyleSheet.create({
+    loadErrorContext: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    loadErrorText: {
+        fontSize: 12,
+        color: '#666666',
+        paddingTop: '40%',
+        paddingBottom: 20,
+        paddingLeft: '10%',
+        paddingRight: '10%',
+        textAlign: 'center'
+    },
+    loadErrorButton: {
+        color: '#666666',
+        textAlign: 'center',
+        padding: 10,
+        borderColor: '#666666',
+        borderStyle: 'solid',
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 10
+    }
+});
+const _WebView = forwardRef((props, ref) => {
+    const { src, bindmessage, bindload, binderror } = props;
+    const mpx = global.__mpx;
+    const errorText = {
+        'zh-CN': {
+            text: '网络不可用，请检查网络设置',
+            button: '重新加载'
+        },
+        'en-US': {
+            text: 'The network is not available. Please check the network settings',
+            button: 'Reload'
+        }
+    };
+    const currentErrorText = errorText[mpx.i18n.locale || 'zh-CN'];
+    if (props.style) {
+        warn('The web-view component does not support the style prop.');
+    }
+    const { pageId } = useContext(RouteContext) || {};
+    const [pageLoadErr, setPageLoadErr] = useState(false);
+    const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
+    const webViewRef = useRef(null);
+    const fristLoaded = useRef(false);
+    const isLoadError = useRef(false);
+    const statusCode = useRef('');
+    const [isLoaded, setIsLoaded] = useState(true);
+    const defaultWebViewStyle = {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+    };
+    const canGoBack = useRef(false);
+    const isNavigateBack = useRef(false);
+    const beforeRemoveHandle = (e) => {
+        if (canGoBack.current && !isNavigateBack.current) {
+            webViewRef.current?.goBack();
+            e.preventDefault();
+        }
+        isNavigateBack.current = false;
+    };
+    const navigation = useNavigation();
+    useEffect(() => {
+        const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        return () => {
+            if (isFunction(beforeRemoveSubscription)) {
+                beforeRemoveSubscription();
+            }
+        };
+    }, []);
+    useNodesRef(props, ref, webViewRef, {
+        style: defaultWebViewStyle
+    });
+    if (!src) {
+        return null;
+    }
+    const _reload = function () {
+        if (__mpx_mode__ === 'android') {
+            fristLoaded.current = false; // 安卓需要重新设置
+        }
+        setPageLoadErr(false);
+    };
+    const injectedJavaScript = `
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      var _documentTitle = document.title;
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'setTitle',
+        payload: {
+          _documentTitle: _documentTitle
+        }
+      }))
+      Object.defineProperty(document, 'title', {
+        set (val) {
+          _documentTitle = val
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'setTitle',
+            payload: {
+              _documentTitle: _documentTitle
+            }
+          }))
+        },
+        get () {
+          return _documentTitle
+        }
+      });
+    }
+    true;
+  `;
+    const sendMessage = function (params) {
+        return `
+      window.mpxWebviewMessageCallback && window.mpxWebviewMessageCallback(${params})
+      true;
+    `;
+    };
+    const _changeUrl = function (navState) {
+        if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+            canGoBack.current = navState.canGoBack;
+            currentPage.__webViewUrl = navState.url;
+        }
+    };
+    const _onLoadProgress = function (event) {
+        if (__mpx_mode__ === 'android') {
+            canGoBack.current = event.nativeEvent.canGoBack;
+        }
+    };
+    const _message = function (res) {
+        let data = {};
+        let asyncCallback;
+        const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab });
+        try {
+            const nativeEventData = res.nativeEvent?.data;
+            if (typeof nativeEventData === 'string') {
+                data = JSON.parse(nativeEventData);
+            }
+        }
+        catch (e) { }
+        const args = data.args;
+        const postData = data.payload || {};
+        const params = Array.isArray(args) ? args : [postData];
+        const type = data.type;
+        switch (type) {
+            case 'setTitle':
+                { // case下不允许直接声明，包个块解决该问题
+                    const title = postData._documentTitle;
+                    if (title) {
+                        navigation && navigation.setOptions({ title });
+                    }
+                }
+                break;
+            case 'postMessage':
+                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                    detail: {
+                        data: params[0]?.data
+                    }
+                }));
+                asyncCallback = Promise.resolve({
+                    errMsg: 'invokeWebappApi:ok'
+                });
+                break;
+            case 'navigateTo':
+                asyncCallback = navObj.navigateTo(...params);
+                break;
+            case 'navigateBack':
+                isNavigateBack.current = true;
+                asyncCallback = navObj.navigateBack(...params);
+                break;
+            case 'redirectTo':
+                asyncCallback = navObj.redirectTo(...params);
+                break;
+            case 'switchTab':
+                asyncCallback = navObj.switchTab(...params);
+                break;
+            case 'reLaunch':
+                asyncCallback = navObj.reLaunch(...params);
+                break;
+            default:
+                if (type) {
+                    const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type];
+                    if (isFunction(implement)) {
+                        asyncCallback = Promise.resolve(implement(...params));
+                    }
+                    else {
+                        /* eslint-disable prefer-promise-reject-errors */
+                        asyncCallback = Promise.reject({
+                            errMsg: `未在apiImplementations中配置${type}方法`
+                        });
+                    }
+                }
+                break;
+        }
+        asyncCallback && asyncCallback.then((res) => {
+            if (webViewRef.current?.postMessage) {
+                const result = JSON.stringify({
+                    type,
+                    callbackId: data.callbackId,
+                    result: res
+                });
+                webViewRef.current.injectJavaScript(sendMessage(result));
+            }
+        }).catch((error) => {
+            if (webViewRef.current?.postMessage) {
+                const result = JSON.stringify({
+                    type,
+                    callbackId: data.callbackId,
+                    error
+                });
+                webViewRef.current.injectJavaScript(sendMessage(result));
+            }
+        });
+    };
+    const onLoadEndHandle = function (res) {
+        fristLoaded.current = true;
+        setIsLoaded(true);
+        const src = res.nativeEvent?.url;
+        if (isLoadError.current) {
+            isLoadError.current = false;
+            isNavigateBack.current = false;
+            const result = {
+                type: 'error',
+                timeStamp: res.timeStamp,
+                detail: {
+                    src,
+                    statusCode: statusCode.current
+                }
+            };
+            binderror && binderror(result);
+        }
+        else {
+            const result = {
+                type: 'load',
+                timeStamp: res.timeStamp,
+                detail: {
+                    src
+                }
+            };
+            bindload?.(result);
+        }
+    };
+    const onLoadEnd = function (res) {
+        if (__mpx_mode__ === 'android') {
+            setTimeout(() => {
+                onLoadEndHandle(res);
+            }, 0);
+        }
+        else {
+            onLoadEndHandle(res);
+        }
+    };
+    const onHttpError = function (res) {
+        isLoadError.current = true;
+        statusCode.current = res.nativeEvent?.statusCode;
+    };
+    const onError = function () {
+        statusCode.current = '';
+        isLoadError.current = true;
+        if (!fristLoaded.current) {
+            setPageLoadErr(true);
+        }
+    };
+    const onLoadStart = function () {
+        if (!fristLoaded.current) {
+            setIsLoaded(false);
+        }
+    };
+    return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
+        {pageLoadErr
+            ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
+              <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
+              <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
+            </View>)
+            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={isLoaded}></WebView>)}
+      </Portal>);
+});
+_WebView.displayName = 'MpxWebview';
+export default _WebView;

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/pickerFaces.js

@@ -0,0 +1,76 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+export const degToRad = (deg) => (Math.PI * deg) / 180;
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree, itemHeight) => itemHeight * Math.cos(degToRad(degree));
+export const calcPickerHeight = (faces, itemHeight) => {
+    if (faces.length === 7) {
+        return itemHeight * 5;
+    }
+    return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0);
+};
+export const createFaces = (itemHeight, visibleCount) => {
+    // e.g [30, 60, 90]
+    const getDegreesRelativeCenter = () => {
+        const maxStep = Math.trunc((visibleCount + 2) / 2); // + 2 because there are 2 more faces at 90 degrees
+        const stepDegree = 90 / maxStep;
+        const result = [];
+        for (let i = 1; i <= maxStep; i++) {
+            result.push(i * stepDegree);
+        }
+        return result;
+    };
+    const getScreenHeightsAndOffsets = (degrees) => {
+        const screenHeights = degrees.map((deg) => calcHeight(deg, itemHeight));
+        const freeSpaces = screenHeights.map((screenHeight) => itemHeight - screenHeight);
+        const offsets = freeSpaces.map((freeSpace, index) => {
+            let offset = freeSpace / 2;
+            for (let i = 0; i < index; i++) {
+                offset += freeSpaces[i];
+            }
+            return offset;
+        });
+        return [screenHeights, offsets];
+    };
+    const getOpacity = (index) => {
+        const map = {
+            0: 0,
+            1: 0.8,
+            2: 0.9
+        };
+        return map[index] ?? Math.min(1, map[2] + index * 0.05);
+    };
+    const degrees = getDegreesRelativeCenter();
+    const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
+    const scales = [0.973, 0.9, 0.8];
+    return [
+        // top items
+        ...degrees
+            .map((degree, index) => {
+            return {
+                index: -1 * (index + 1),
+                deg: degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: -1 * offsets[index],
+                scale: scales[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+            .reverse(),
+        // center item
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
+        // bottom items
+        ...degrees.map((degree, index) => {
+            return {
+                index: index + 1,
+                deg: -1 * degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: offsets[index],
+                scale: scales[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+    ];
+};

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

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+export const PickerViewColumnAnimationContext = createContext(undefined);
+export const usePickerViewColumnAnimationContext = () => {
+    const value = useContext(PickerViewColumnAnimationContext);
+    if (value === undefined) {
+        throw new Error('usePickerViewColumnAnimationContext must be called from within PickerViewColumnAnimationContext.Provider!');
+    }
+    return value;
+};
+export const PickerViewStyleContext = createContext(undefined);
+export const usePickerViewStyleContext = () => {
+    const value = useContext(PickerViewStyleContext);
+    return value;
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+const _PickerViewIndicator = ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }) => {
+    return (<View style={[styles.indicatorContainer, indicatorContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, indicatorItemStyle]}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    indicatorContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 200
+    },
+    selection: {
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.05)',
+        alignSelf: 'stretch'
+    }
+});
+_PickerViewIndicator.displayName = 'MpxPickerViewIndicator';
+export default _PickerViewIndicator;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+const _PickerViewMask = ({ itemHeight, maskContainerStyle }) => {
+    return (<View style={[styles.maskContainer, maskContainerStyle]} pointerEvents={'none'}>
+      <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }}/>
+      <View style={{ height: itemHeight }}/>
+      <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    maskContainer: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 100
+    }
+});
+_PickerViewMask.displayName = 'MpxPickerViewMask';
+export default _PickerViewMask;