@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.0

package/lib/runtime/components/react/dist/mpx-canvas/index.jsx

@@ -0,0 +1,232 @@
+/**
+ * ✘ type
+ * ✘ canvas-id
+ * ✘ disable-scroll
+ * ✔ bindtouchstart
+ * ✔ bindtouchmove
+ * ✔ bindtouchend
+ * ✔ bindtouchcancel
+ * ✔ bindlongtap
+ * ✔ binderror
+ */
+import { createElement, useRef, useState, useCallback, useEffect, forwardRef } from 'react';
+import { View, Platform, StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+import useNodesRef from '../useNodesRef';
+import { useLayout, useTransformStyle, extendObject } from '../utils';
+import useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import Bus from './Bus';
+import { useWebviewBinding, constructors, WEBVIEW_TARGET, ID, registerWebviewConstructor } from './utils';
+import CanvasRenderingContext2D from './CanvasRenderingContext2D';
+import html from './html';
+import './CanvasGradient';
+import { createImage as canvasCreateImage } from './Image';
+import { createImageData as canvasCreateImageData } from './ImageData';
+import { useConstructorsRegistry } from './constructorsRegistry';
+const stylesheet = StyleSheet.create({
+    container: { overflow: 'hidden', flex: 0 },
+    webview: {
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+        flex: 0
+    },
+    webviewAndroid9: {
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+        flex: 0,
+        opacity: 0.99
+    }
+});
+const _Canvas = forwardRef((props = {}, ref) => {
+    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const [isLoaded, setIsLoaded] = useState(false);
+    const nodeRef = useRef(null);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { width, height } = normalStyle;
+    const canvasRef = useWebviewBinding({
+        targetName: 'canvas',
+        properties: { width, height },
+        methods: ['toDataURL']
+    });
+    const { register } = useConstructorsRegistry();
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
+        ...layoutProps
+    }, [], {
+        layoutRef
+    });
+    const context2D = new CanvasRenderingContext2D(canvasRef.current);
+    register(registerWebviewConstructor);
+    // 初始化bus和context2D
+    useEffect(() => {
+        const webviewPostMessage = (message) => {
+            if (canvasRef.current.webview) {
+                canvasRef.current.webview.postMessage(JSON.stringify(message));
+            }
+        };
+        // 设置bus
+        canvasRef.current.bus = new Bus(webviewPostMessage);
+        canvasRef.current.bus.pause();
+        // 设置 context 2D
+        canvasRef.current.context2D = context2D;
+        // 设置 getContext 方法
+        canvasRef.current.getContext = getContext;
+        // 设置 createImage 方法
+        canvasRef.current.createImage = createImage;
+        // 设置 postMessage 方法
+        canvasRef.current.postMessage = postMessage;
+        // 设置 listeners
+        canvasRef.current.listeners = [];
+        canvasRef.current.addMessageListener = addMessageListener;
+        canvasRef.current.removeMessageListener = removeMessageListener;
+        canvasRef.current.createImageData = createImageData;
+        return () => {
+            canvasRef.current.bus?.clearBatchingTimeout();
+        };
+    }, []);
+    const createImageData = (dataArray, width, height) => {
+        return canvasCreateImageData(canvasRef.current, dataArray, width, height);
+    };
+    const createImage = (width, height) => {
+        return canvasCreateImage(canvasRef.current, width, height);
+    };
+    const getContext = useCallback((contextType) => {
+        if (contextType === '2d') {
+            return context2D;
+        }
+        return null;
+    }, []);
+    const postMessage = useCallback(async (message) => {
+        if (!canvasRef.current?.bus)
+            return;
+        const { type, payload } = await canvasRef.current.bus.post({
+            id: ID(),
+            ...message
+        });
+        switch (type) {
+            case 'error': {
+                const { binderror } = props;
+                binderror &&
+                    binderror(getCustomEvent('error', {}, {
+                        detail: {
+                            errMsg: payload.message
+                        },
+                        layoutRef
+                    }, props));
+                break;
+            }
+            case 'json': {
+                return payload;
+            }
+            case 'blob': {
+                return atob(payload);
+            }
+        }
+    }, []);
+    const addMessageListener = (listener) => {
+        canvasRef.current.listeners.push(listener);
+        return () => canvasRef.current.removeMessageListener(listener);
+    };
+    const removeMessageListener = (listener) => {
+        canvasRef.current.listeners.splice(canvasRef.current.listeners.indexOf(listener), 1);
+    };
+    const onMessage = useCallback((e) => {
+        let data = JSON.parse(e.nativeEvent.data);
+        switch (data.type) {
+            case 'error': {
+                const { binderror } = props;
+                binderror &&
+                    binderror(getCustomEvent('error', e, {
+                        detail: {
+                            errMsg: data.payload.message
+                        },
+                        layoutRef
+                    }, props));
+                break;
+            }
+            default: {
+                if (data.payload) {
+                    // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
+                    const constructor = constructors[data.meta.constructor];
+                    if (constructor) {
+                        const { args, payload } = data;
+                        // RN 端同步生成一个 CanvasGradient 的实例
+                        const object = constructor.constructLocally(canvasRef.current, ...args);
+                        Object.assign(object, payload, {
+                            [WEBVIEW_TARGET]: data.meta.target
+                        });
+                        data = {
+                            ...data,
+                            payload: object
+                        };
+                    }
+                    for (const listener of canvasRef.current.listeners) {
+                        listener(data.payload);
+                    }
+                }
+                if (canvasRef.current.bus) {
+                    canvasRef.current.bus.handle(data);
+                }
+            }
+        }
+    }, []);
+    const onLoad = useCallback(() => {
+        setIsLoaded(true);
+        if (canvasRef.current?.bus) {
+            canvasRef.current.bus.resume();
+        }
+    }, []);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle,
+        node: canvasRef.current,
+        context: context2D
+    });
+    if (Platform.OS === 'android') {
+        const isAndroid9 = Platform.Version >= 28;
+        return createElement(View, innerProps, createElement(WebView, {
+            ref: (element) => {
+                if (canvasRef.current) {
+                    canvasRef.current.webview = element;
+                }
+            },
+            style: [
+                isAndroid9 ? stylesheet.webviewAndroid9 : stylesheet.webview,
+                { height, width }
+            ],
+            source: { html },
+            originWhitelist: originWhitelist,
+            onMessage: onMessage,
+            onLoad: onLoad,
+            overScrollMode: 'never',
+            mixedContentMode: 'always',
+            scalesPageToFit: false,
+            javaScriptEnabled: true,
+            domStorageEnabled: true,
+            thirdPartyCookiesEnabled: true,
+            allowUniversalAccessFromFileURLs: true
+        }));
+    }
+    return createElement(View, innerProps, createElement(WebView, {
+        ref: (element) => {
+            if (canvasRef.current) {
+                canvasRef.current.webview = element;
+            }
+        },
+        style: [stylesheet.webview, { height, width }],
+        source: { html },
+        originWhitelist: originWhitelist,
+        onMessage: onMessage,
+        onLoad: onLoad,
+        scrollEnabled: false
+    }));
+});
+_Canvas.displayName = 'mpxCanvas';
+export default _Canvas;

package/lib/runtime/components/react/dist/mpx-canvas/utils.jsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from 'react';
+export const WEBVIEW_TARGET = '@@WEBVIEW_TARGET';
+export const constructors = {};
+export const ID = () => Math.random().toString(32).slice(2);
+const SPECIAL_CONSTRUCTOR = {
+    ImageData: {
+        className: 'Uint8ClampedArray',
+        paramNum: 0
+    }
+};
+export const registerWebviewTarget = (instance, targetName) => {
+    instance[WEBVIEW_TARGET] = targetName;
+};
+export const registerWebviewProperties = (instance, properties) => {
+    Object.entries(properties).forEach(([key, initialValue]) => {
+        const privateKey = `__${key}__`;
+        instance[privateKey] = initialValue;
+        Object.defineProperty(instance, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return instance[privateKey];
+            },
+            set(value) {
+                instance.postMessage({
+                    type: 'set',
+                    payload: {
+                        target: instance[WEBVIEW_TARGET],
+                        key,
+                        value
+                    }
+                });
+                if (instance.forceUpdate) {
+                    instance.forceUpdate();
+                }
+                return (instance[privateKey] = value);
+            }
+        });
+    });
+};
+export const registerWebviewMethods = (instance, methods) => {
+    methods.forEach(method => {
+        instance[method] = (...args) => {
+            return instance.postMessage({
+                type: 'exec',
+                payload: {
+                    target: instance[WEBVIEW_TARGET],
+                    method,
+                    args
+                }
+            });
+        };
+    });
+};
+export const registerWebviewConstructor = (constructor, constructorName) => {
+    constructors[constructorName] = constructor;
+    constructor.constructLocally = function (...args) {
+        return new constructor(...args, true);
+    };
+    constructor.prototype.onConstruction = function (...args) {
+        if (SPECIAL_CONSTRUCTOR[constructorName] !== undefined) {
+            const { className, paramNum } = SPECIAL_CONSTRUCTOR[constructorName];
+            args[paramNum] = { className, classArgs: [args[paramNum]] };
+        }
+        this[WEBVIEW_TARGET] = ID();
+        this.postMessage({
+            type: 'construct',
+            payload: {
+                constructor: constructorName,
+                id: this[WEBVIEW_TARGET],
+                args
+            }
+        });
+    };
+    constructor.prototype.toJSON = function () {
+        return { __ref__: this[WEBVIEW_TARGET] };
+    };
+};
+export const useWebviewBinding = ({ targetName, properties = {}, methods = [] }) => {
+    const instanceRef = useRef({});
+    useEffect(() => {
+        if (instanceRef.current) {
+            registerWebviewTarget(instanceRef.current, targetName);
+            registerWebviewProperties(instanceRef.current, properties);
+            registerWebviewMethods(instanceRef.current, methods);
+        }
+    }, []);
+    return instanceRef;
+};

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -1,13 +1,13 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect, createElement } from 'react';
 import { View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { FormContext, CheckboxGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, useTransformStyle, wrapChildren } from './utils';
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 const CheckboxGroup = forwardRef((props, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
@@ -22,13 +22,10 @@ const CheckboxGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const styleObj = {
-        ...defaultStyle,
-        ...style
-    };
+    const styleObj = extendObject({}, defaultStyle, style);
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getValue = () => {
         const arr = [];
@@ -60,11 +57,12 @@ const CheckboxGroup = forwardRef((props, ref) => {
             }
         };
     }, []);
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...normalStyle, ...layoutStyle },
-        ...layoutProps
-    }, [], {
+        style: extendObject({}, normalStyle, layoutStyle)
+    }, layoutProps), [
+        'name'
+    ], {
         layoutRef
     });
     const contextValue = useMemo(() => {
@@ -83,14 +81,10 @@ const CheckboxGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    return (<View {...innerProps}>
-      <CheckboxGroupContext.Provider value={contextValue}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-      </CheckboxGroupContext.Provider>
-    </View>);
+    return createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
 });
 CheckboxGroup.displayName = 'MpxCheckboxGroup';
 export default CheckboxGroup;

package/lib/runtime/components/react/dist/mpx-checkbox.jsx

@@ -4,13 +4,13 @@
  * ✔ checked
  * ✔ color
  */
-import { useState, useRef, forwardRef, useEffect, useContext } from 'react';
+import { useState, useRef, forwardRef, useEffect, useContext, createElement } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import Icon from './mpx-icon';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import { CheckboxGroupContext, LabelContext } from './context';
 const styles = StyleSheet.create({
     container: {
@@ -40,19 +40,13 @@ const styles = StyleSheet.create({
 });
 const Checkbox = forwardRef((checkboxProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(checkboxProps);
-    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, catchtap } = props;
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, _onChange } = props;
     const [isChecked, setIsChecked] = useState(!!checked);
     const groupContext = useContext(CheckboxGroupContext);
     let groupValue;
     let notifyChange;
-    const defaultStyle = {
-        ...styles.wrapper,
-        ...(disabled && styles.wrapperDisabled)
-    };
-    const styleObj = {
-        ...styles.container,
-        ...style
-    };
+    const defaultStyle = extendObject({}, styles.wrapper, disabled ? styles.wrapperDisabled : null);
+    const styleObj = extendObject({}, styles.container, style);
     const onChange = (evt) => {
         if (disabled)
             return;
@@ -62,27 +56,21 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
             groupValue[value].checked = checked;
         }
         notifyChange && notifyChange(evt);
+        // Called when the switch type attribute is checkbox
+        _onChange && _onChange(evt, { checked });
     };
     const onTap = (evt) => {
-        if (disabled)
-            return;
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const catchTap = (evt) => {
-        if (disabled)
-            return;
-        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
-        onChange(evt);
-    };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle,
+        style: extendObject({}, defaultStyle, normalStyle),
         change: onChange
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     if (backgroundStyle) {
         warn('Checkbox does not support background image-related styles!');
     }
@@ -94,13 +82,16 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
     if (labelContext) {
         labelContext.current.triggerChange = onChange;
     }
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap,
-        catchtap: catchTap
-    }, [], {
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
+        bindtap: !disabled && onTap
+    }), [
+        'value',
+        'disabled',
+        'checked'
+    ], {
         layoutRef
     });
     useEffect(() => {
@@ -124,17 +115,17 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
             }
         }
     }, [checked]);
-    return (<View {...innerProps}>
-        <View style={defaultStyle}>
-          <Icon type='success_no_circle' size={18} color={disabled ? '#ADADAD' : color} style={isChecked ? styles.iconChecked : styles.icon}/>
-        </View>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </View>);
+    return createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+        type: 'success_no_circle',
+        size: 18,
+        color: disabled ? '#ADADAD' : color,
+        style: isChecked ? styles.iconChecked : styles.icon
+    })), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
 });
 Checkbox.displayName = 'MpxCheckbox';
 export default Checkbox;

package/lib/runtime/components/react/dist/mpx-form.jsx

@@ -5,26 +5,27 @@
  * ✔ bindreset
  */
 import { View } from 'react-native';
-import { useRef, forwardRef, useMemo } from 'react';
+import { useRef, forwardRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import { FormContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils';
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils';
 const _Form = forwardRef((fromProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(fromProps);
     const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const formRef = useRef(null);
-    useNodesRef(props, ref, formRef);
+    useNodesRef(props, ref, formRef, {
+        style: normalStyle
+    });
     const propsRef = useRef({});
     propsRef.current = props;
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
-    const innerProps = useInnerProps(props, {
-        style: { ...innerStyle, ...layoutStyle },
-        ref: formRef,
-        ...layoutProps
-    }, [
+    const innerProps = useInnerProps(props, extendObject({
+        style: extendObject({}, innerStyle, layoutStyle),
+        ref: formRef
+    }, layoutProps), [
         'bindsubmit',
         'bindreset'
     ], { layoutRef });
@@ -56,16 +57,12 @@ const _Form = forwardRef((fromProps, ref) => {
             reset
         };
     }, []);
-    return (<View {...innerProps}>
-      <FormContext.Provider value={contextValue}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </FormContext.Provider>
-    </View>);
+    return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
 _Form.displayName = 'MpxForm';
 export default _Form;