npm - @mpxjs/webpack-plugin - Versions diffs - 2.9.66 → 2.9.69 - Mend

@mpxjs/webpack-plugin 2.9.66 → 2.9.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/lib/runtime/components/react/mpx-canvas/index.tsx ADDED Viewed

@@ -0,0 +1,302 @@
+/**
+ * ✘ type
+ * ✘ canvas-id
+ * ✘ disable-scroll
+ * ✔ bindtouchstart
+ * ✔ bindtouchmove
+ * ✔ bindtouchend
+ * ✔ bindtouchcancel
+ * ✔ bindlongtap
+ * ✔ binderror
+ */
+import React, { useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
+import { View, Platform, StyleSheet, NativeSyntheticEvent } from 'react-native'
+import { WebView } from 'react-native-webview'
+import useNodesRef, { HandlerRef } from '../useNodesRef'
+import { useLayout, useTransformStyle, extendObject } from '../utils'
+import useInnerProps, { getCustomEvent } from '../getInnerListeners'
+import Bus from './Bus'
+import {
+  useWebviewBinding,
+  constructors,
+  WEBVIEW_TARGET,
+  WebviewMessage,
+  ID,
+  CanvasInstance,
+  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
+  }
+})
+interface CanvasProps {
+  style?: Record<string, any>;
+  originWhitelist?: Array<string>;
+  'enable-var'?: boolean
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'external-var-context'?: Record<string, any>
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindtouchcancel?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindlongtap?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  binderror?: (event: NativeSyntheticEvent<ErrorEvent>) => void;
+}
+const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasProps>((props: CanvasProps = {}, ref): JSX.Element => {
+  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']
+  }) as MutableRefObject<CanvasInstance>
+  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) as any
+  register(registerWebviewConstructor)
+  // 初始化bus和context2D
+  useEffect(() => {
+    const webviewPostMessage = (message: WebviewMessage) => {
+      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: Array<number>, width: number, height: number) => {
+    return canvasCreateImageData(canvasRef.current, dataArray, width, height)
+  }
+  const createImage = (width?: number, height?: number) => {
+    return canvasCreateImage(canvasRef.current, width, height)
+  }
+  const getContext = useCallback((contextType: string) => {
+    if (contextType === '2d') {
+      return context2D
+    }
+    return null
+  }, [])
+  const postMessage = useCallback(async (message: WebviewMessage) => {
+    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: any) => {
+    canvasRef.current.listeners.push(listener)
+    return () => canvasRef.current.removeMessageListener(listener)
+  }
+  const removeMessageListener = (listener: any) => {
+    canvasRef.current.listeners.splice(canvasRef.current.listeners.indexOf(listener), 1)
+  }
+  const onMessage = useCallback((e: { nativeEvent: { data: string } }) => {
+    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 (
+      <View {...innerProps}>
+        <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
+          domStorageEnabled
+          thirdPartyCookiesEnabled
+          allowUniversalAccessFromFileURLs
+        />
+      </View>
+    )
+  }
+  return (
+    <View
+      {...innerProps}
+    >
+      <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}
+      />
+    </View>
+  )
+})
+_Canvas.displayName = 'mpxCanvas'
+export default _Canvas