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

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

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

@@ -0,0 +1,343 @@
+export default `<html><head>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" name="viewport">
+    <style>
+      html {
+        -ms-content-zooming: none;
+        -ms-touch-action: pan-x pan-y;
+      }
+      body {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+      * {
+        user-select: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+  <script>
+  var scale = function (ratio) {
+    return function (item) {
+        if (typeof item === "number") {
+            return item * ratio;
+        }
+        return item;
+    };
+};
+function autoScaleCanvas(canvas) {
+    var ctx = canvas.getContext("2d");
+    var ratio = window.devicePixelRatio || 1;
+    if (ratio !== 1) {
+        canvas.width *= ratio;
+        canvas.height *= ratio;
+        ctx.scale(ratio, ratio);
+        ctx.isPointInPath = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return CanvasRenderingContext2D.prototype.isPointInPath.apply(ctx, args.map(scale(ratio)));
+        };
+    }
+    return canvas;
+}
+window.autoScaleCanvas = autoScaleCanvas;
+</script>
+<script>
+
+var WEBVIEW_TARGET = '@@WEBVIEW_TARGET';
+
+var ID = function () {
+  return Math.random().toString(32).slice(2);
+};
+
+var flattenObjectCopyValue = function (flatObj, srcObj, key) {
+  var value = srcObj[key];
+  if (typeof value === 'function') {
+    return;
+  }
+  if (typeof value === 'object' && value instanceof Node) {
+    return;
+  }
+  flatObj[key] = flattenObject(value);
+};
+
+var flattenObject = function (object) {
+  if (typeof object !== 'object' || object === null) {
+    return object;
+  }
+  // Handle TypedArray
+  if (object instanceof Uint8ClampedArray) {
+    return Array.from(object);
+  }
+  var flatObject = {};
+  for (var key in object) {
+    flattenObjectCopyValue(flatObject, object, key);
+  }
+  for (var key in Object.getOwnPropertyNames(object)) {
+    flattenObjectCopyValue(flatObject, object, key);
+  }
+  return flatObject;
+};
+
+var AutoScaledCanvas = function (element) {
+  this.element = element;
+};
+
+AutoScaledCanvas.prototype.toDataURL = function () {
+  return this.element.toDataURL.apply(this.element, arguments);
+};
+
+AutoScaledCanvas.prototype.autoScale = function () {
+  if (this.savedHeight !== undefined) {
+    this.element.height = this.savedHeight;
+  }
+  if (this.savedWidth !== undefined) {
+    this.element.width = this.savedWidth;
+  }
+  window.autoScaleCanvas(this.element);
+};
+
+Object.defineProperty(AutoScaledCanvas.prototype, 'width', {
+  get: function () {
+    return this.element.width;
+  },
+  set: function (value) {
+    this.savedWidth = value;
+    this.autoScale();
+    return value;
+  },
+});
+
+Object.defineProperty(AutoScaledCanvas.prototype, 'height', {
+  get: function () {
+    return this.element.height;
+  },
+  set: function (value) {
+    this.savedHeight = value;
+    this.autoScale();
+    return value;
+  },
+});
+var toMessage = function (result) {
+  if (result instanceof Blob) {
+    return {
+      type: 'blob',
+      payload: btoa(result),
+      meta: {},
+    };
+  }
+  if (result instanceof Object) {
+    if (!result[WEBVIEW_TARGET]) {
+      var id = ID();
+      result[WEBVIEW_TARGET] = id;
+      targets[id] = result;
+    }
+    return {
+      type: 'json',
+      payload: flattenObject(result),
+      args: toArgs(flattenObject(result)),
+      meta: {
+        target: result[WEBVIEW_TARGET],
+        constructor: result.__constructorName__ || result.constructor.name,
+      },
+    };
+  }
+  return {
+    type: 'json',
+    payload: typeof result === 'string' ? result : JSON.stringify(result),
+    meta: {},
+  };
+};
+var toArgs = function (result) {
+    var args = [];
+    for (var key in result) {
+        if (result[key] !== undefined && key !== '@@WEBVIEW_TARGET') {
+            args.push(result[key]);
+        }
+    }
+    return args;
+};
+
+var createObjectsFromArgs = function (args) {
+    for (var index = 0; index < args.length; index += 1) {
+        var currentArg = args[index];
+        if (currentArg && currentArg.className !== undefined) {
+            var className = currentArg.className, classArgs = currentArg.classArgs;
+            // new ImageData，第一个参数需要是 Uint8ClampedArray
+            var object = new (Function.prototype.bind.apply(constructors[className], [null].concat(classArgs)))();
+            args[index] = object;
+        }
+    }
+    return args;
+};
+
+var canvas = document.createElement('canvas');
+canvas.style.width = '100%';
+canvas.style.height = '100%';
+var autoScaledCanvas = new AutoScaledCanvas(canvas);
+
+var targets = {
+  canvas: autoScaledCanvas,
+  context2D: canvas.getContext('2d'),
+};
+
+var constructors = {
+  CanvasGradient: CanvasGradient,
+  Image: Image,
+  ImageData: ImageData,
+  Uint8ClampedArray: Uint8ClampedArray,
+};
+
+Image.bind =
+  Image.bind ||
+  function () {
+    return Image;
+  };
+
+ImageData.bind =
+  ImageData.bind ||
+  function () {
+    return ImageData;
+  };
+Uint8ClampedArray.bind =
+  Uint8ClampedArray.bind ||
+  function () {
+    return Uint8ClampedArray;
+  };
+
+var populateRefs = function (arg) {
+  if (arg && arg.__ref__) {
+    return targets[arg.__ref__];
+  }
+  return arg;
+};
+document.body.appendChild(canvas);
+
+var mergeObjects = function (target, source) {
+  for (var key in source) {
+    if (source.hasOwnProperty(key)) {
+      target[key] = source[key];
+    }
+  }
+  return target;
+};
+
+function handleMessage(message) {
+  var id = message.id,
+      type = message.type,
+      payload = message.payload;
+
+  switch (type) {
+    case 'exec': {
+      var target = payload.target,
+          method = payload.method,
+          args = payload.args;
+      var result = targets[target][method].apply(targets[target], args.map(populateRefs));
+      var msg = toMessage(result);
+
+      if (typeof result === 'object' && !msg.meta.constructor) {
+        for (var constructorName in constructors) {
+          if (result instanceof constructors[constructorName]) {
+            msg.meta.constructor = constructorName;
+          }
+        }
+      }
+      window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));
+      break;
+    }
+    case 'set': {
+      var target = payload.target,
+          key = payload.key,
+          value = payload.value;
+      targets[target][key] = populateRefs(value);
+      break;
+    }
+        case 'construct': {
+            var constructor = payload.constructor,
+          target = payload.id,
+          args = payload.args || [];
+            var newArgs = createObjectsFromArgs(args);
+            var object;
+            try {
+                object = new (Function.prototype.bind.apply(constructors[constructor], [null].concat(newArgs)))();
+            }
+            catch (error) {
+                throw new Error('Error while constructing '.concat(constructor, ' ').concat(error.message));
+            }
+            object.__constructorName__ = constructor;
+            var msg = toMessage({});
+            targets[target] = object;
+            window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));
+            break;
+        }
+            case 'listen': {
+      var types = payload.types,
+          target = payload.target;
+    for (var i = 0; i < types.length; i++) {
+    var eventType = types[i];
+    targets[target].addEventListener(eventType, function (e) {
+          const message = toMessage({
+            type: 'event',
+            payload: {
+                type: e.type,
+                target: mergeObjects(flattenObject(targets[target]), {
+                [WEBVIEW_TARGET]: target,
+            }),
+            },
+          });
+      window.ReactNativeWebView.postMessage(
+        JSON.stringify(mergeObjects({ id: id }, message))
+      );
+    });
+  }
+  break;
+}
+    }
+}
+var handleError = function (err, message) {
+  window.ReactNativeWebView.postMessage(JSON.stringify({
+    id: message.id,
+    type: 'error',
+    payload: {
+      message: err.message,
+      stack: err.stack,
+    },
+  }));
+  document.removeEventListener('message', handleIncomingMessage);
+};
+
+function handleIncomingMessage(e) {
+  var data = JSON.parse(e.data);
+  if (Array.isArray(data)) {
+    for (var i = 0; i < data.length; i++) {
+      try {
+        handleMessage(data[i]);
+      } catch (err) {
+        handleError(err, data[i]);
+      }
+    }
+  } else {
+    try {
+      handleMessage(data);
+    } catch (err) {
+      handleError(err, data);
+    }
+  }
+}
+
+window.addEventListener('message', handleIncomingMessage);
+document.addEventListener('message', handleIncomingMessage);
+</script>
+  
+
+</body></html>`;