@mpxjs/webpack-plugin 2.9.66 → 2.9.69

package/lib/react/processJSON.js

@@ -12,9 +12,8 @@ const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
-const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 
-module.exports = function (json, {
+module.exports = function (jsonContent, {
   loaderContext,
   ctorType,
   pagesMap,
@@ -81,12 +80,11 @@ module.exports = function (json, {
   }
 
   const isApp = ctorType === 'app'
-  if (!json) {
+  if (!jsonContent) {
     return callback()
   }
-  // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
   try {
-    jsonObj = JSON5.parse(json.content)
+    jsonObj = JSON5.parse(jsonContent)
     // 处理runner
     const rulesRunnerOptions = {
       mode,
@@ -96,8 +94,8 @@ module.exports = function (json, {
       warn: emitWarning,
       error: emitError,
       data: {
-        // polyfill global usingComponents & record globalComponents
-        globalComponents: mpx.usingComponents
+        // polyfill global usingComponents
+        globalComponents: mpx.globalComponents
       }
     }
 
@@ -110,12 +108,6 @@ module.exports = function (json, {
     if (rulesRunner) {
       rulesRunner(jsonObj)
     }
-    if (isApp) {
-      // 收集全局组件
-      Object.assign(mpx.usingComponents, jsonObj.usingComponents)
-      // 在 rulesRunner 运行后保存全局注册组件
-      loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, loaderContext.context))
-    }
   } catch (e) {
     return callback(e)
   }

package/lib/react/processMainScript.js

@@ -8,7 +8,7 @@ const {
 module.exports = function ({
   loaderContext
 }, callback) {
-  const { i18n, projectName } = loaderContext.getMpx()
+  const { i18n, rnConfig } = loaderContext.getMpx()
 
   let output = 'import { AppRegistry } from \'react-native\'\n'
 
@@ -16,8 +16,12 @@ module.exports = function ({
     output += buildI18n({ loaderContext })
   }
   // 此处可添加前置于App执行的语句
-  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
-  output += `AppRegistry.registerComponent(${JSON.stringify(projectName)}, () => App)\n`
+  output += `var app = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
+  if (rnConfig.projectName) {
+    output += `AppRegistry.registerComponent(${JSON.stringify(rnConfig.projectName)}, () => app)\n`
+  } else {
+    output += 'export default app\n'
+  }
 
   callback(null, {
     output

package/lib/react/processScript.js

@@ -24,16 +24,15 @@ module.exports = function (script, {
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
-import { NavigationContainer, createNavigationContainerRef, StackActions } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { NavigationContainer, StackActions } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import { Provider } from '@ant-design/react-native'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createNavigationContainerRef: createNavigationContainerRef,
-  createNativeStackNavigator: createNativeStackNavigator,
+  createStackNavigator: createStackNavigator,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,

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/react/processTemplate.js

@@ -14,7 +14,7 @@ module.exports = function (template, {
   srcMode,
   moduleId,
   ctorType,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics
 }, callback) {
   const mpx = loaderContext.getMpx()
@@ -64,7 +64,7 @@ module.exports = function (template, {
       const { root, meta } = templateCompiler.parse(template.content, {
         warn,
         error,
-        usingComponents,
+        usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
         hasComment,
         isNative,
         ctorType,

package/lib/resolver/AddModePlugin.js

@@ -6,16 +6,17 @@ const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
 
 module.exports = class AddModePlugin {
-  constructor (source, mode, fileConditionRules, target) {
+  constructor (source, mode, options, target) {
     this.source = source
     this.target = target
     this.mode = mode
-    this.fileConditionRules = fileConditionRules
+    this.options = options
   }
 
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
-    const mode = this.mode
+    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()
@@ -31,14 +32,26 @@ 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 || '?')
-      queryObj.mode = mode
-      queryObj.infix = `${queryObj.infix || ''}.${mode}`
+      const queryInfix = queryObj.infix
+      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, callback)
+      resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, 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: ' + defaultMode, resolveContext, (err, result) => {
+            callback(err, result)
+          })
+          return
+        }
+        callback(err, result)
+      })
     })
   }
 }

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') {
@@ -267,5 +302,5 @@ const Button = forwardRef((buttonProps, ref) => {
         })}
     </View>);
 });
-Button.displayName = 'mpx-button';
+Button.displayName = 'MpxButton';
 export default Button;

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