@mpxjs/webpack-plugin 2.9.67 → 2.9.69

package/lib/index.js

@@ -348,14 +348,19 @@ class MpxWebpackPlugin {
       compiler.options.node.global = true
     }
 
-    let addModePlugin
-    if (['android', 'harmony'].includes(this.options.mode)) {
-      // 'android' | 'harmony' 下 使用mode = 'ios' 进行兼容兜底
-      addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file', 'ios')
-    } else {
-      addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
+    const addModeOptions = {
+      fileConditionRules: this.options.fileConditionRules
     }
-
+    const mode = this.options.mode
+    if (mode === 'web' || mode === 'ios' || mode === 'android' || mode === 'harmony') {
+      // 'web' | 'ios' | 'android' | 'harmony' 下，使用implicitMode强制进行平台转换
+      addModeOptions.implicitMode = true
+    }
+    if (mode === 'android' || mode === 'harmony') {
+      // 'android' | 'harmony' 下，使用 mode = 'ios' 进行兼容兜底
+      addModeOptions.defaultMode = 'ios'
+    }
+    const addModePlugin = new AddModePlugin('before-file', this.options.mode, addModeOptions, 'file')
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
     const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
     const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
@@ -775,7 +780,7 @@ class MpxWebpackPlugin {
             const hash = mpx.pathHash(resourcePath)
             const customOutputPath = this.options.customOutputPath
             if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
-            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext).replace(/^\//, '')
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext, resourcePath).replace(/^\//, '')
             if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
             return path.join(type, name + hash + ext)
           },

package/lib/platform/template/wx/component-config/canvas.js

@@ -8,6 +8,14 @@ module.exports = function ({ print }) {
   const qaEventLog = print({ platform: 'qa', tag: TAG_NAME, isError: false, type: 'event' })
   return {
     test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
     props: [
       {
         test: /^canvas-id$/,

package/lib/platform/template/wx/component-config/unsupported.js

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'rich-text', 'slider', 'audio', 'camera', 'video', 'canvas', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'rich-text', 'slider', 'audio', 'camera', 'video', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/react/processStyles.js

@@ -56,13 +56,23 @@ module.exports = function (styles, {
           error
         })
         if (ctorType === 'app') {
-          output += `global.__getAppClassMap = function() {
-            return ${shallowStringify(classMap)};
+          output += `
+          let __appClassMap
+          global.__getAppClassMap = function() {
+            if(!__appClassMap) {
+              __appClassMap = ${shallowStringify(classMap)};
+            }
+            return __appClassMap;
           };\n`
         } else {
-          output += `global.currentInject.injectMethods = {
+          output += `
+          let __classMap
+          global.currentInject.injectMethods = {
             __getClassMap: function() {
-              return ${shallowStringify(classMap)};
+              if(!__classMap) {
+                __classMap = ${shallowStringify(classMap)};
+              }
+              return __classMap;
             }
           };\n`
         }

package/lib/resolver/AddModePlugin.js

@@ -6,17 +6,17 @@ const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
 
 module.exports = class AddModePlugin {
-  constructor (source, mode, fileConditionRules, target, defaultMode) {
+  constructor (source, mode, options, target) {
     this.source = source
     this.target = target
     this.mode = mode
-    this.fileConditionRules = fileConditionRules
-    this.defaultMode = defaultMode
+    this.options = options
   }
 
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
-    const { defaultMode, mode } = this
+    const { options = {}, mode } = this
+    const { defaultMode, fileConditionRules, implicitMode } = options
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
       if (request.mode || request.env) {
         return callback()
@@ -32,20 +32,20 @@ module.exports = class AddModePlugin {
         extname = path.extname(resourcePath)
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
-      if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
+      if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
-      queryObj.mode = mode
+      if (!implicitMode) queryObj.mode = mode
       queryObj.infix = `${queryInfix || ''}.${mode}`
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
-        if (this.defaultMode && !result) {
+        if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`
           obj.query = stringifyQuery(queryObj)
           obj.path = addInfix(resourcePath, defaultMode, extname)
-          resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + this.defaultMode, resolveContext, (err, result) => {
+          resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + defaultMode, resolveContext, (err, result) => {
             callback(err, result)
           })
           return

package/lib/runtime/components/react/context.ts

@@ -46,3 +46,5 @@ export const PickerContext = createContext(null)
 export const VarContext = createContext({})
 
 export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)
+
+export const RouteContext = createContext<number | null>(null)

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

@@ -7,3 +7,4 @@ export const LabelContext = createContext(null);
 export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
+export const RouteContext = createContext(null);

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

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { collectDataset } from '@mpxjs/utils';
 import { omit } from './utils';
 import eventConfigMap from './event.config';
 const getTouchEvent = (type, event, props, config) => {
@@ -13,7 +14,7 @@ const getTouchEvent = (type, event, props, config) => {
         currentTarget: {
             ...(event.currentTarget || {}),
             id: id || '',
-            dataset: getDataSet(props),
+            dataset: collectDataset(props),
             offsetLeft: layoutRef?.current?.offsetLeft || 0,
             offsetTop: layoutRef?.current?.offsetTop || 0
         },
@@ -44,16 +45,6 @@ const getTouchEvent = (type, event, props, config) => {
         preventDefault: event.preventDefault
     };
 };
-export const getDataSet = (props) => {
-    const result = {};
-    for (const key in props) {
-        if (key.indexOf('data-') === 0) {
-            const newKey = key.substr(5);
-            result[newKey] = props[key];
-        }
-    }
-    return result;
-};
 export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, props = {}) => {
     return {
         ...oe,
@@ -62,7 +53,7 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
         target: {
             ...(oe.target || {}),
             id: props.id || '',
-            dataset: getDataSet(props),
+            dataset: collectDataset(props),
             offsetLeft: layoutRef?.current?.offsetLeft || 0,
             offsetTop: layoutRef?.current?.offsetTop || 0
         },

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

@@ -37,10 +37,10 @@
 import { useEffect, useRef, useState, forwardRef, useContext } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { FormContext } from './context';
+import { RouteContext, FormContext } from './context';
 const LOADING_IMAGE_URI = 'data:image/png;base64,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';
 const TypeColorMap = {
     default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
@@ -78,6 +78,8 @@ const styles = StyleSheet.create({
     }
 });
 const getOpenTypeEvent = (openType) => {
+    if (!openType)
+        return;
     if (!global.__mpx?.config?.rnConfig) {
         warn('Environment not supported');
         return;
@@ -94,6 +96,11 @@ const getOpenTypeEvent = (openType) => {
     }
     return event;
 };
+const timer = (data, time = 3000) => new Promise((resolve) => {
+    setTimeout(() => {
+        resolve(data);
+    }, time);
+});
 const Loading = ({ alone = false }) => {
     const image = useRef(new Animated.Value(0)).current;
     const rotate = image.interpolate({
@@ -123,6 +130,7 @@ const Loading = ({ alone = false }) => {
 const Button = forwardRef((buttonProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(buttonProps);
     const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend } = props;
+    const pageId = useContext(RouteContext);
     const formContext = useContext(FormContext);
     let submitFn;
     let resetFn;
@@ -187,16 +195,43 @@ const Button = forwardRef((buttonProps, ref) => {
         warn('Button does not support background image-related styles!');
     }
     const handleOpenTypeEvent = (evt) => {
-        if (!openType)
-            return;
         const handleEvent = getOpenTypeEvent(openType);
+        if (!handleEvent)
+            return;
         if (openType === 'share') {
-            handleEvent && handleEvent({
+            const currentPage = getCurrentPage(pageId);
+            const event = {
                 from: 'button',
-                target: getCustomEvent('tap', evt, { layoutRef }, props).target
-            });
+                target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+                webViewUrl: currentPage?.__webViewUrl
+            };
+            if (currentPage) {
+                const defaultMessage = {
+                    title: global.__mpx.config.rnConfig.projectName || 'AwesomeProject',
+                    path: currentPage.route || ''
+                };
+                if (currentPage.onShareAppMessage) {
+                    const { promise, ...message } = currentPage.onShareAppMessage(event) || {};
+                    if (promise) {
+                        Promise.race([Promise.resolve(promise), timer(message)])
+                            .then((msg) => {
+                            handleEvent(Object.assign({}, defaultMessage, msg));
+                        });
+                    }
+                    else {
+                        handleEvent(Object.assign({}, defaultMessage, message));
+                    }
+                }
+                else {
+                    handleEvent(defaultMessage);
+                }
+            }
+            else {
+                warn('Current page not found');
+                // Todo handleEvent(event)
+            }
         }
-        if (openType === 'getUserInfo' && handleEvent && bindgetuserinfo) {
+        if (openType === 'getUserInfo' && bindgetuserinfo) {
             Promise.resolve(handleEvent)
                 .then((userInfo) => {
                 if (typeof userInfo === 'object') {

package/lib/runtime/components/react/dist/mpx-canvas/Bus.js

@@ -0,0 +1,60 @@
+import { warn } from '@mpxjs/utils';
+export default class Bus {
+    _paused = false;
+    _messageListeners = {};
+    _queue = [];
+    _send;
+    _timeoutId = null;
+    constructor(send) {
+        this._send = send;
+    }
+    post(message) {
+        return new Promise((resolve) => {
+            if (message.type !== 'set' && message.id) {
+                this._messageListeners[message.id] = resolve;
+            }
+            if (!this._paused) {
+                this._queue.push(message);
+                this.startBatching();
+            }
+            else {
+                this._queue.push(message);
+            }
+        });
+    }
+    handle(message) {
+        if (!message.id)
+            return;
+        const handler = this._messageListeners[message.id];
+        delete this._messageListeners[message.id];
+        if (handler) {
+            handler(message);
+        }
+        else {
+            warn(`Received unexpected message: ${message}`);
+        }
+    }
+    pause() {
+        this._paused = true;
+    }
+    resume() {
+        this._paused = false;
+        this._send(this._queue);
+        this._queue = [];
+    }
+    startBatching() {
+        if (this._timeoutId)
+            return;
+        this._timeoutId = setTimeout(() => {
+            this._send(this._queue);
+            this._queue = [];
+            this._timeoutId = null;
+        }, 16);
+    }
+    clearBatchingTimeout() {
+        if (this._timeoutId) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = null;
+        }
+    }
+}

package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.js

@@ -0,0 +1,15 @@
+import { registerWebviewMethods } from './utils';
+const METHODS = ['addColorStop'];
+export default class CanvasGradient {
+    canvas;
+    constructor(canvas, noOnConstruction = false) {
+        this.canvas = canvas;
+        registerWebviewMethods(this, METHODS);
+        if (this.onConstruction && !noOnConstruction) {
+            this.onConstruction();
+        }
+    }
+    postMessage(message) {
+        return this.canvas.postMessage(message);
+    }
+}

package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.js

@@ -0,0 +1,84 @@
+import { registerWebviewProperties, registerWebviewMethods, registerWebviewTarget } from './utils';
+const PROPERTIES = {
+    direction: 'inherit',
+    fillStyle: '#000',
+    filter: 'none',
+    font: '10px sans-serif',
+    fontKerning: 'auto',
+    fontStretch: 'auto',
+    fontVariantCaps: 'normal',
+    globalAlpha: 1.0,
+    globalCompositeOperation: 'source-over',
+    imageSmoothingEnabled: 'true',
+    imageSmoothingQuality: 'low',
+    letterSpacing: '0px',
+    lineCap: 'butt',
+    lineDashOffset: 0.0,
+    lineJoin: 'miter',
+    lineWidth: 1.0,
+    miterLimit: 10.0,
+    shadowBlur: 0,
+    shadowColor: 'rgba(0,0,0,0)',
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    strokeStyle: '#000',
+    textAlign: 'start',
+    textBaseline: 'alphabetic',
+    textRendering: 'auto',
+    wordSpacing: '0px'
+};
+const METHODS = [
+    'arc',
+    'arcTo',
+    'beginPath',
+    'bezierCurveTo',
+    'clearRect',
+    'clip',
+    'closePath',
+    'createConicGradient',
+    'createImageData',
+    'createLinearGradient',
+    'createPattern',
+    'createRadialGradient',
+    'drawFocusIfNeeded',
+    'drawImage',
+    'ellipse',
+    'fill',
+    'fillRect',
+    'fillText',
+    'getImageData',
+    'getLineDash',
+    'getTransform',
+    'lineTo',
+    'measureText',
+    'moveTo',
+    'putImageData',
+    'quadraticCurveTo',
+    'rect',
+    'reset',
+    'resetTransform',
+    'restore',
+    'rotate',
+    'roundRect',
+    'save',
+    'scale',
+    'setLineDash',
+    'setTransform',
+    'stroke',
+    'strokeRect',
+    'strokeText',
+    'transform',
+    'translate'
+];
+export default class CanvasRenderingContext2D {
+    canvas;
+    constructor(canvas) {
+        this.canvas = canvas;
+        registerWebviewTarget(this, 'context2D');
+        registerWebviewProperties(this, PROPERTIES);
+        registerWebviewMethods(this, METHODS);
+    }
+    postMessage(message) {
+        return this.canvas.postMessage(message);
+    }
+}

package/lib/runtime/components/react/dist/mpx-canvas/Image.js

@@ -0,0 +1,87 @@
+import { WEBVIEW_TARGET, registerWebviewProperties } from './utils';
+const PROPERTIES = {
+    crossOrigin: undefined,
+    height: undefined,
+    src: undefined,
+    width: undefined
+};
+export class Image {
+    [WEBVIEW_TARGET];
+    canvas;
+    width;
+    height;
+    _loadListener;
+    _errorListener;
+    _onload;
+    _onerror;
+    constructor(canvas, width, height, noOnConstruction = false) {
+        this.canvas = canvas;
+        registerWebviewProperties(this, PROPERTIES);
+        if (width) {
+            this.width = width;
+        }
+        if (height) {
+            this.height = height;
+        }
+        if (this.onConstruction && !noOnConstruction) {
+            this.onConstruction();
+            this.postMessage({
+                type: 'listen',
+                payload: {
+                    types: ['error', 'load'],
+                    target: this[WEBVIEW_TARGET]
+                }
+            });
+        }
+    }
+    postMessage(message) {
+        return this.canvas.postMessage(message);
+    }
+    addEventListener(type, callbackFn) {
+        return this.canvas.addMessageListener((message) => {
+            const target = message?.payload?.target || {};
+            if (message &&
+                message.type === 'event' &&
+                target[WEBVIEW_TARGET] === this[WEBVIEW_TARGET] &&
+                message.payload.type === type) {
+                for (const key in target) {
+                    const value = target[key];
+                    if (key in this && this[key] !== value) {
+                        this[key] = value;
+                    }
+                }
+                callbackFn({
+                    ...message.payload,
+                    target: this
+                });
+            }
+        });
+    }
+    set onload(callback) {
+        this._onload = callback;
+        if (this._loadListener) {
+            this.canvas.removeMessageListener(this._loadListener);
+        }
+        if (callback) {
+            this._loadListener = this.addEventListener('load', callback);
+        }
+    }
+    get onload() {
+        return this._onload;
+    }
+    set onerror(callback) {
+        this._onerror = callback;
+        if (this._errorListener) {
+            this.canvas.removeMessageListener(this._errorListener);
+        }
+        if (callback) {
+            this._errorListener = this.addEventListener('error', callback);
+        }
+    }
+    get onerror() {
+        return this._onerror;
+    }
+}
+export function createImage(canvas, width, height) {
+    return new Image(canvas, width, height);
+}

package/lib/runtime/components/react/dist/mpx-canvas/ImageData.js

@@ -0,0 +1,15 @@
+export default class ImageData {
+    canvas;
+    constructor(canvas, dataArray, width, height, noOnConstruction) {
+        this.canvas = canvas;
+        if (this.onConstruction && !noOnConstruction) {
+            this.onConstruction(dataArray, width, height);
+        }
+    }
+    postMessage = (message) => {
+        return this.canvas.postMessage(message);
+    };
+}
+export function createImageData(canvas, dataArray, width, height) {
+    return new ImageData(canvas, dataArray, width, height);
+}

package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.js

@@ -0,0 +1,28 @@
+import { Image } from './Image';
+import CanvasGradient from './CanvasGradient';
+import ImageData from './ImageData';
+export var ConstructorType;
+(function (ConstructorType) {
+    ConstructorType["Image"] = "Image";
+    ConstructorType["CanvasGradient"] = "CanvasGradient";
+    ConstructorType["ImageData"] = "ImageData";
+})(ConstructorType || (ConstructorType = {}));
+const constructors = [
+    { type: ConstructorType.Image, instance: Image },
+    { type: ConstructorType.CanvasGradient, instance: CanvasGradient },
+    { type: ConstructorType.ImageData, instance: ImageData }
+];
+export function useConstructorsRegistry() {
+    const register = (registerWebviewConstructor) => {
+        constructors.forEach(({ type, instance }) => {
+            registerWebviewConstructor(instance, type);
+        });
+    };
+    const getConstructor = (type) => {
+        return constructors.find(c => c.type === type)?.instance;
+    };
+    return {
+        register,
+        getConstructor
+    };
+}