@mpxjs/webpack-plugin 2.9.67 → 2.9.70-alpha.0

package/lib/runtime/components/react/mpx-canvas/CanvasRenderingContext2D.ts

@@ -0,0 +1,87 @@
+import { CanvasInstance, WebviewMessage, 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: CanvasInstance
+  constructor (canvas: CanvasInstance) {
+    this.canvas = canvas
+    registerWebviewTarget(this, 'context2D')
+    registerWebviewProperties(this, PROPERTIES)
+    registerWebviewMethods(this, METHODS)
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+}

package/lib/runtime/components/react/mpx-canvas/Image.ts

@@ -0,0 +1,102 @@
+import { WebviewMessage, WEBVIEW_TARGET, registerWebviewProperties, CanvasInstance } from './utils'
+
+const PROPERTIES = {
+  crossOrigin: undefined,
+  height: undefined,
+  src: undefined,
+  width: undefined
+}
+
+export class Image {
+  [WEBVIEW_TARGET]: string;
+  canvas: any;
+  width: number;
+  height: number;
+  private _loadListener: any;
+  private _errorListener: any;
+  private _onload: ((...args: any[]) => void);
+  private _onerror: ((...args: any[]) => void);
+  [key: string]: any;
+
+  constructor (canvas: CanvasInstance, width?: number, height?: number, 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: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+
+  addEventListener (type: 'load' | 'error', callbackFn: Function) {
+    return this.canvas.addMessageListener((message: WebviewMessage) => {
+      const target = message?.payload?.target as { [key: string]: any } || {}
+      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: ((...args: any[]) => void)) {
+    this._onload = callback
+    if (this._loadListener) {
+      this.canvas.removeMessageListener(this._loadListener)
+    }
+    if (callback) {
+      this._loadListener = this.addEventListener('load', callback)
+    }
+  }
+
+  get onload (): ((...args: any[]) => void) {
+    return this._onload
+  }
+
+  set onerror (callback: ((...args: any[]) => void)) {
+    this._onerror = callback
+    if (this._errorListener) {
+      this.canvas.removeMessageListener(this._errorListener)
+    }
+    if (callback) {
+      this._errorListener = this.addEventListener('error', callback)
+    }
+  }
+
+  get onerror () : ((...args: any[]) => void) {
+    return this._onerror
+  }
+}
+
+export function createImage (canvas: CanvasInstance, width?: number, height?: number) {
+  return new Image(canvas, width, height)
+}

package/lib/runtime/components/react/mpx-canvas/ImageData.ts

@@ -0,0 +1,23 @@
+import {
+  WebviewMessage,
+  CanvasInstance
+} from './utils'
+
+export default class ImageData {
+  canvas: CanvasInstance;
+  [key: string]: any;
+  constructor (canvas: CanvasInstance, dataArray: number[], width: number, height: number, noOnConstruction?: boolean) {
+    this.canvas = canvas
+    if (this.onConstruction && !noOnConstruction) {
+      this.onConstruction(dataArray, width, height)
+    }
+  }
+
+  postMessage = (message: WebviewMessage) => {
+    return this.canvas.postMessage(message)
+  };
+}
+
+export function createImageData (canvas: CanvasInstance, dataArray: number[], width: number, height: number) {
+  return new ImageData(canvas, dataArray, width, height)
+}

package/lib/runtime/components/react/mpx-canvas/constructorsRegistry.ts

@@ -0,0 +1,38 @@
+import { Image } from './Image'
+import CanvasGradient from './CanvasGradient'
+import ImageData from './ImageData'
+import { WebviewConstructor } from './utils'
+
+export enum ConstructorType {
+  Image = 'Image',
+  CanvasGradient = 'CanvasGradient',
+  ImageData = 'ImageData'
+}
+
+interface Constructor {
+  type: ConstructorType
+  instance: WebviewConstructor
+}
+
+const constructors: Constructor[] = [
+  { type: ConstructorType.Image, instance: Image },
+  { type: ConstructorType.CanvasGradient, instance: CanvasGradient },
+  { type: ConstructorType.ImageData, instance: ImageData }
+]
+
+export function useConstructorsRegistry () {
+  const register = (registerWebviewConstructor: Function): void => {
+    constructors.forEach(({ type, instance }) => {
+      registerWebviewConstructor(instance, type)
+    })
+  }
+
+  const getConstructor = (type: ConstructorType): WebviewConstructor | undefined => {
+    return constructors.find(c => c.type === type)?.instance
+  }
+
+  return {
+    register,
+    getConstructor
+  }
+}

package/lib/runtime/components/react/mpx-canvas/html.ts

@@ -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>`