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

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

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -45,10 +45,10 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { FormContext } from './context'
+import { RouteContext, FormContext } from './context'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -128,7 +128,8 @@ const styles = StyleSheet.create({
   }
 })
 
-const getOpenTypeEvent = (openType: OpenType) => {
+const getOpenTypeEvent = (openType?: OpenType) => {
+  if (!openType) return
   if (!global.__mpx?.config?.rnConfig) {
     warn('Environment not supported')
     return
@@ -148,6 +149,12 @@ const getOpenTypeEvent = (openType: OpenType) => {
   return event
 }
 
+const timer = (data: any, time = 3000) => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve(data)
+  }, time)
+})
+
 const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
   const image = useRef(new Animated.Value(0)).current
 
@@ -174,11 +181,14 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
     }
   }, [])
 
-  const loadingStyle = {
-    ...styles.loading,
-    transform: [{ rotate }],
-    marginRight: alone ? 0 : 5
-  }
+  const loadingStyle = extendObject(
+    {},
+    styles.loading,
+    {
+      transform: [{ rotate }],
+      marginRight: alone ? 0 : 5
+    }
+  )
 
   return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }} />
 }
@@ -211,6 +221,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     bindtouchend
   } = props
 
+  const pageId = useContext(RouteContext)
+
   const formContext = useContext(FormContext)
 
   let submitFn: () => void | undefined
@@ -265,28 +277,28 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     backgroundColor: plain ? 'transparent' : normalBackgroundColor
   }
 
-  const defaultViewStyle = {
-    ...styles.button,
-    ...(isMiniSize && styles.buttonMini),
-    ...viewStyle
-  }
+  const defaultViewStyle = extendObject(
+    {},
+    styles.button,
+    isMiniSize ? styles.buttonMini : null,
+    viewStyle
+  )
 
-  const defaultTextStyle = {
-    ...styles.text,
-    ...(isMiniSize && styles.textMini),
-    color: plain ? plainTextColor : normalTextColor
-  }
+  const defaultTextStyle = extendObject(
+    {},
+    styles.text,
+    isMiniSize ? styles.textMini : {},
+    { color: plain ? plainTextColor : normalTextColor }
+  )
 
-  const defaultStyle = {
-    ...defaultViewStyle,
-    ...defaultTextStyle
-  }
+  const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle)
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style,
-    ...(applyHoverEffect && hoverStyle)
-  }
+  const styleObj = extendObject(
+    {},
+    defaultStyle,
+    style,
+    applyHoverEffect ? hoverStyle : {}
+  )
 
   const {
     hasSelfPercent,
@@ -299,28 +311,52 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   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 })
 
-  const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   if (backgroundStyle) {
     warn('Button does not support background image-related styles!')
   }
 
   const handleOpenTypeEvent = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    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') {
@@ -375,36 +411,47 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...innerStyle, ...layoutStyle },
-      ...layoutProps,
-      bindtouchstart: onTouchStart,
-      bindtouchend: onTouchEnd,
-      bindtap: onTap
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+      },
+      layoutProps,
+      {
+        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
+        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
+        bindtap: !disabled && onTap
+      }
+    ),
+    [
+      'disabled',
+      'size',
+      'type',
+      'plain',
+      'loading',
+      'hover-class',
+      'hover-style',
+      'hover-start-time',
+      'hover-stay-time',
+      'open-type',
+      'form-type'
+    ],
     {
       layoutRef,
       disableTap: disabled
     }
   )
 
-  return (
-    <View {...innerProps}>
-      {loading && <Loading alone={!children} />}
+  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+    wrapChildren(
+      props,
       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
       }
-    </View>
+    )
   )
 })
 

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

@@ -0,0 +1,70 @@
+import { warn } from '@mpxjs/utils'
+interface Message {
+  id?: string
+  type: string
+  payload?: any
+}
+export default class Bus {
+  _paused: Boolean = false;
+  _messageListeners: { [key: string]: (message: Message) => void } = {}
+  _queue: Message[] = []
+  _send: (message: Message | Message[]) => void
+  _timeoutId: NodeJS.Timeout | null = null
+  constructor (send: (message: Message | Message[]) => void) {
+    this._send = send
+  }
+
+  post (message: Message): Promise<any> {
+    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: Message): void {
+    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 (): void {
+    this._paused = true
+  }
+
+  resume (): void {
+    this._paused = false
+    this._send(this._queue)
+    this._queue = []
+  }
+
+  startBatching (): void {
+    if (this._timeoutId) return
+
+    this._timeoutId = setTimeout(() => {
+      this._send(this._queue)
+      this._queue = []
+      this._timeoutId = null
+    }, 16)
+  }
+
+  clearBatchingTimeout (): void {
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId)
+      this._timeoutId = null
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import { WebviewMessage, CanvasInstance, registerWebviewMethods } from './utils'
+
+const METHODS = ['addColorStop']
+export default class CanvasGradient {
+  private canvas: CanvasInstance;
+  [key: string]: any;
+  constructor (canvas: CanvasInstance, noOnConstruction = false) {
+    this.canvas = canvas
+    registerWebviewMethods(this, METHODS)
+    if (this.onConstruction && !noOnConstruction) {
+      this.onConstruction()
+    }
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+}

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