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

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

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

package/lib/runtime/components/react/mpx-canvas/utils.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef } from 'react'
+import { WebView } from 'react-native-webview'
+import Bus from './Bus'
+
+export const WEBVIEW_TARGET = '@@WEBVIEW_TARGET'
+
+export const constructors: Record<string, any> = {}
+
+export const ID = () => Math.random().toString(32).slice(2)
+
+const SPECIAL_CONSTRUCTOR: Record<string, { className: string, paramNum: number }> = {
+  ImageData: {
+    className: 'Uint8ClampedArray',
+    paramNum: 0
+  }
+}
+
+export interface Instance {
+  postMessage: (...args: any[]) => void;
+  [WEBVIEW_TARGET]?: string;
+  [key: string]: any;
+}
+
+export interface WebviewConstructor {
+  new (...args: any[]): Instance;
+  constructLocally?: (...args: unknown[]) => Instance;
+}
+
+export interface WebviewMessage {
+  type: 'set' | 'exec' | 'listen' | 'event' | 'construct'
+  payload: {
+    target?: string | { [key: string]: any }
+    key?: string
+    value?: any
+    method?: string
+    args?: any[]
+    types?: string[]
+    type?: string
+    constructor?: string | Function
+    id?: string
+  }
+}
+
+export interface CanvasInstance {
+  webview: WebView | null;
+  bus: Bus | null;
+  context2D: CanvasRenderingContext2D;
+  getContext: (contextType: string) => CanvasRenderingContext2D | null;
+  createImage: (width?: number, height?: number) => any;
+  postMessage: (message: WebviewMessage) => Promise<any>;
+  listeners: Array<(payload: any) => void>;
+  addMessageListener: (listener: (payload: any) => void) => () => void;
+  removeMessageListener: (listener: (payload: any) => void) => void;
+  createImageData: (dataArray: number[], width?: number, height?: number) => any;
+}
+
+export const registerWebviewTarget = (instance: Instance, targetName: string): void => {
+  instance[WEBVIEW_TARGET] = targetName
+}
+
+export const registerWebviewProperties = (instance: Instance, properties: Record<string, any>): void => {
+  Object.entries(properties).forEach(([key, initialValue]) => {
+    const privateKey = `__${key}__`
+    instance[privateKey] = initialValue
+    Object.defineProperty(instance, key, {
+      configurable: true,
+      enumerable: true,
+      get () {
+        return instance[privateKey]
+      },
+      set (value) {
+        instance.postMessage({
+          type: 'set',
+          payload: {
+            target: instance[WEBVIEW_TARGET],
+            key,
+            value
+          }
+        })
+
+        if (instance.forceUpdate) {
+          instance.forceUpdate()
+        }
+        return (instance[privateKey] = value)
+      }
+    })
+  })
+}
+
+export const registerWebviewMethods = (instance: Instance, methods: string[]): void => {
+  methods.forEach(method => {
+    instance[method] = (...args: any[]) => {
+      return instance.postMessage({
+        type: 'exec',
+        payload: {
+          target: instance[WEBVIEW_TARGET],
+          method,
+          args
+        }
+      })
+    }
+  })
+}
+
+export const registerWebviewConstructor = (constructor: WebviewConstructor, constructorName: string): void => {
+  constructors[constructorName] = constructor
+  constructor.constructLocally = function (...args: unknown[]): Instance {
+    return new (constructor as any)(...args, true)
+  }
+
+  constructor.prototype.onConstruction = function (...args: any[]): void {
+    if (SPECIAL_CONSTRUCTOR[constructorName] !== undefined) {
+      const { className, paramNum } = SPECIAL_CONSTRUCTOR[constructorName]
+      args[paramNum] = { className, classArgs: [args[paramNum]] }
+    }
+    this[WEBVIEW_TARGET] = ID()
+    this.postMessage({
+      type: 'construct',
+      payload: {
+        constructor: constructorName,
+        id: this[WEBVIEW_TARGET],
+        args
+      }
+    })
+  }
+  constructor.prototype.toJSON = function () {
+    return { __ref__: this[WEBVIEW_TARGET] }
+  }
+}
+export const useWebviewBinding = ({
+  targetName,
+  properties = {},
+  methods = []
+}: {
+  targetName: string;
+  properties?: Record<string, any>;
+  methods?: string[]
+}) => {
+  const instanceRef = useRef({})
+
+  useEffect(() => {
+    if (instanceRef.current) {
+      registerWebviewTarget(instanceRef.current as Instance, targetName)
+      registerWebviewProperties(instanceRef.current as Instance, properties)
+      registerWebviewMethods(instanceRef.current as Instance, methods)
+    }
+  }, [])
+
+  return instanceRef
+}

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -19,7 +19,7 @@ import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { useLayout, useTransformStyle, wrapChildren } from './utils'
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 
 export interface CheckboxGroupProps {
   name: string
@@ -64,10 +64,7 @@ const CheckboxGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style
-  }
+  const styleObj = extendObject({}, defaultStyle, style)
 
   const {
     hasSelfPercent,
@@ -80,7 +77,7 @@ const CheckboxGroup = forwardRef<
 
   const nodeRef = useRef(null)
 
-  useNodesRef(props, ref, nodeRef, { defaultStyle })
+  useNodesRef(props, ref, nodeRef, { style: normalStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
@@ -119,12 +116,16 @@ const CheckboxGroup = forwardRef<
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...normalStyle, ...layoutStyle },
-      ...layoutProps
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+      },
+      layoutProps
+    ),
+    [
+      'name'
+    ],
     {
       layoutRef
     }

package/lib/runtime/components/react/mpx-checkbox.tsx

@@ -25,7 +25,7 @@ import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
 
 interface Selection {
@@ -46,7 +46,7 @@ export interface CheckboxProps extends Selection {
   'parent-height'?: number;
   children?: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  _onChange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown, { checked }: { checked: boolean }) => void
 }
 
 const styles = StyleSheet.create({
@@ -92,7 +92,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       'parent-width': parentWidth,
       'parent-height': parentHeight,
       bindtap,
-      catchtap
+      _onChange
     } = props
 
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
@@ -101,15 +101,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
-    const defaultStyle = {
-      ...styles.wrapper,
-      ...(disabled && styles.wrapperDisabled)
-    }
+    const defaultStyle = extendObject(
+      {},
+      styles.wrapper,
+      disabled ? styles.wrapperDisabled : null
+    )
 
-    const styleObj = {
-      ...styles.container,
-      ...style
-    }
+    const styleObj = extendObject({}, styles.container, style)
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled) return
@@ -119,20 +117,15 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         groupValue[value].checked = checked
       }
       notifyChange && notifyChange(evt)
+      // Called when the switch type attribute is checkbox
+      _onChange && _onChange(evt, { checked })
     }
 
     const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      if (disabled) return
       bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
       onChange(evt)
     }
 
-    const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      if (disabled) return
-      catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
-      onChange(evt)
-    }
-
     const {
       hasSelfPercent,
       normalStyle,
@@ -145,13 +138,13 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const nodeRef = useRef(null)
 
     useNodesRef(props, ref, nodeRef, {
-      defaultStyle,
+      style: extendObject({}, defaultStyle, normalStyle),
       change: onChange
     })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
     if (backgroundStyle) {
       warn('Checkbox does not support background image-related styles!')
@@ -170,14 +163,21 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap,
-        catchtap: catchTap
-      },
-      [],
+      extendObject(
+        {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
+        },
+        layoutProps,
+        {
+          bindtap: !disabled && onTap
+        }
+      ),
+      [
+        'value',
+        'disabled',
+        'checked'
+      ],
       {
         layoutRef
       }

package/lib/runtime/components/react/mpx-form.tsx

@@ -9,7 +9,7 @@ import { JSX, useRef, forwardRef, ReactNode, useMemo, useCallback } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils'
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils'
 interface FormProps {
   style?: Record<string, any>;
   children?: ReactNode;
@@ -47,21 +47,23 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { textStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   const formRef = useRef(null)
-  useNodesRef(props, ref, formRef)
+  useNodesRef(props, ref, formRef, {
+    style: normalStyle
+  })
 
   const propsRef = useRef<FormProps>({})
   propsRef.current = props
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
-  const innerProps = useInnerProps(props, {
-    style: { ...innerStyle, ...layoutStyle },
-    ref: formRef,
-    ...layoutProps
-  }, [
+  const innerProps = useInnerProps(props, extendObject({
+    style: extendObject({}, innerStyle, layoutStyle),
+    ref: formRef
+  }, layoutProps)
+  , [
     'bindsubmit',
     'bindreset'
   ], { layoutRef })