@mpxjs/webpack-plugin 2.9.70-alpha.1 → 2.9.70-alpha.2

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

@@ -316,8 +316,7 @@ var handleError = function (err, message) {
   document.removeEventListener('message', handleIncomingMessage);
 };
 
-function handleIncomingMessage(e) {
-  var data = JSON.parse(e.data);
+function handleIncomingMessage(data) {
   if (Array.isArray(data)) {
     for (var i = 0; i < data.length; i++) {
       try {
@@ -335,8 +334,7 @@ function handleIncomingMessage(e) {
   }
 }
 
-window.addEventListener('message', handleIncomingMessage);
-document.addEventListener('message', handleIncomingMessage);
+window.mpxWebviewMessageCallback = handleIncomingMessage
 </script>
   
 

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

@@ -9,7 +9,7 @@
  * ✔ bindlongtap
  * ✔ binderror
  */
-import React, { useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
+import React, { createElement, 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'
@@ -106,7 +106,11 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   useEffect(() => {
     const webviewPostMessage = (message: WebviewMessage) => {
       if (canvasRef.current.webview) {
-        canvasRef.current.webview.postMessage(JSON.stringify(message))
+        const jsCode = `
+        window.mpxWebviewMessageCallback(${JSON.stringify(message)});
+        true;
+      `
+        canvasRef.current.webview.injectJavaScript(jsCode)
       }
     }
 
@@ -249,54 +253,48 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
 
   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) => {
+    return createElement(View, innerProps, createElement(
+      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>
-  )
+        },
+        style: [
+          isAndroid9 ? stylesheet.webviewAndroid9 : stylesheet.webview,
+          { height, width }
+        ],
+        source: { html },
+        originWhitelist: originWhitelist,
+        onMessage: onMessage,
+        onLoad: onLoad,
+        overScrollMode: 'never',
+        mixedContentMode: 'always',
+        scalesPageToFit: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        thirdPartyCookiesEnabled: true,
+        allowUniversalAccessFromFileURLs: true
+      })
+    )
+  }
+
+  return createElement(View, innerProps, createElement(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
+  }))
 })
+
 _Canvas.displayName = 'mpxCanvas'
 
 export default _Canvas

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

@@ -8,7 +8,8 @@ import {
   ReactNode,
   useContext,
   useMemo,
-  useEffect
+  useEffect,
+  createElement
 } from 'react'
 import {
   View,
@@ -156,20 +157,21 @@ const CheckboxGroup = forwardRef<
       notifyChange
     }
   }, [])
-  return (
-    <View {...innerProps}>
-      <CheckboxGroupContext.Provider value={contextValue}>
+
+  return createElement(
+    View,
+    innerProps,
+    createElement(
+      CheckboxGroupContext.Provider,
+      { value: contextValue },
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current
         }
-      </CheckboxGroupContext.Provider>
-    </View>
+      )
+    )
   )
 })
 

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

@@ -13,7 +13,8 @@ import {
   ReactNode,
   useContext,
   Dispatch,
-  SetStateAction
+  SetStateAction,
+  createElement
 } from 'react'
 import {
   View,
@@ -206,28 +207,26 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       }
     }, [checked])
 
-    return (
-      <View {...innerProps}>
-        <View style={defaultStyle}>
-          <Icon
-            type='success_no_circle'
-            size={18}
-            color={disabled ? '#ADADAD' : color}
-            style={isChecked ? styles.iconChecked : styles.icon}
-          />
-        </View>
+    return createElement(View, innerProps,
+      createElement(
+        View,
+        { style: defaultStyle },
+        createElement(Icon, {
+          type: 'success_no_circle',
+          size: 18,
+          color: disabled ? '#ADADAD' : color,
+          style: isChecked ? styles.iconChecked : styles.icon
+        })
+      ),
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
         }
-      </View>
+      )
     )
   }
 )

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

@@ -5,7 +5,7 @@
  * ✔ bindreset
  */
 import { View } from 'react-native'
-import { JSX, useRef, forwardRef, ReactNode, useMemo, useCallback } from 'react'
+import { JSX, useRef, forwardRef, ReactNode, useMemo, createElement } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
@@ -102,25 +102,20 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
       reset
     }
   }, [])
-  return (
-    <View
-      {...innerProps}
-    >
-      <FormContext.Provider value={contextValue}>
-        {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
-        }
-      </FormContext.Provider>
-    </View>
-  )
+
+  return createElement(View, innerProps, createElement(
+    FormContext.Provider,
+    { value: contextValue },
+    wrapChildren(
+      props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+      }
+    )
+  ))
 })
 
 _Form.displayName = 'MpxForm'

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

@@ -0,0 +1,111 @@
+/**
+ * ✔ type
+ * ✔ size
+ * ✔ color
+ */
+import { JSX, forwardRef, useRef, createElement } from 'react'
+import { Text, TextStyle, Image } from 'react-native'
+import useInnerProps from '../getInnerListeners'
+import useNodesRef, { HandlerRef } from '../useNodesRef'
+import { useLayout, useTransformStyle, extendObject } from '../utils'
+import Success from './icons/success.png'
+import SuccessNoCircle from './icons/success_no_circle.png'
+import Info from './icons/info.png'
+import Warn from './icons/warn.png'
+import Waiting from './icons/waiting.png'
+import Cancel from './icons/cancel.png'
+import Download from './icons/download.png'
+import Search from './icons/search.png'
+import Clear from './icons/clear.png'
+
+export type IconType =
+  | 'success'
+  | 'success_no_circle'
+  | 'info'
+  | 'warn'
+  | 'waiting'
+  | 'cancel'
+  | 'download'
+  | 'search'
+  | 'clear'
+
+export interface IconProps {
+  type: IconType
+  size?: number
+  color?: string
+  style?: TextStyle & Record<string, any>
+  'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+
+const IconTypeMap = new Map<IconType, string>([
+  ['success', Success],
+  ['success_no_circle', SuccessNoCircle],
+  ['info', Info],
+  ['warn', Warn],
+  ['waiting', Waiting],
+  ['cancel', Cancel],
+  ['download', Download],
+  ['search', Search],
+  ['clear', Clear]
+])
+
+const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
+  (props, ref): JSX.Element => {
+    const {
+      type,
+      size = 23,
+      color,
+      style = {},
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight
+    } = props
+
+    const source = IconTypeMap.get(type)
+
+    const defaultStyle = { width: ~~size, height: ~~size }
+
+    const styleObj = extendObject({}, defaultStyle, style)
+
+    const {
+      hasSelfPercent,
+      normalStyle,
+      setWidth,
+      setHeight
+    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+    const nodeRef = useRef(null)
+    useNodesRef(props, ref, nodeRef, { style: normalStyle })
+
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+    const innerProps = useInnerProps(
+      props,
+      extendObject(
+        {
+          ref: nodeRef,
+          source,
+          style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
+        },
+        layoutProps
+      ),
+      [],
+      {
+        layoutRef
+      }
+    )
+
+    return createElement(Image, innerProps)
+  }
+)
+
+Icon.displayName = 'MpxIcon'
+
+export default Icon

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

@@ -10,7 +10,7 @@
  * ✔ bindtap
  * ✔ DEFAULT_SIZE
  */
-import { useEffect, useMemo, useState, useRef, forwardRef } from 'react'
+import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react'
 import {
   Image as RNImage,
   View,
@@ -22,10 +22,11 @@ import {
   DimensionValue,
   ImageLoadEventData
 } from 'react-native'
+import { noop } from '@mpxjs/utils'
 import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { SVG_REGEXP, useLayout, useTransformStyle, extendObject } from './utils'
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
 
 export type Mode =
   | 'scaleToFill'
@@ -48,16 +49,25 @@ export interface ImageProps {
   mode?: Mode
   svg?: boolean
   style?: ImageStyle & Record<string, any>
-  'enable-offset'?: boolean;
+  'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
+  'enable-fast-image'?: boolean
   bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void
   binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void
 }
 
+interface ImageState {
+  viewWidth?: number
+  viewHeight?: number
+  imageWidth?: number
+  imageHeight?: number
+  ratio?: number
+}
+
 const DEFAULT_IMAGE_WIDTH = 320
 const DEFAULT_IMAGE_HEIGHT = 240
 
@@ -101,6 +111,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
+    'enable-fast-image': enableFastImage,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     bindload,
@@ -119,23 +130,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     { overflow: 'hidden' }
   )
 
-  const nodeRef = useRef(null)
-
-  const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
-    setViewWidth(width)
-    setViewHeight(height)
-  }
-
-  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  const state = useRef<ImageState>({})
 
+  const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, {
-    style: normalStyle
+    defaultStyle
   })
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout })
-
-  const { width, height } = normalStyle
-
   const isSvg = SVG_REGEXP.test(src)
   const isWidthFixMode = mode === 'widthFix'
   const isHeightFixMode = mode === 'heightFix'
@@ -143,11 +144,40 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode
   const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch'
 
+  const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
+    state.current.viewWidth = width
+    state.current.viewHeight = height
+
+    if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+      setViewWidth(width)
+      setViewHeight(height)
+      setRatio(state.current.ratio)
+      setImageWidth(state.current.imageWidth)
+      setImageHeight(state.current.imageHeight)
+      state.current = {}
+      setLoaded(true)
+    }
+  }
+
+  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef,
+    onLayout: isLayoutMode ? onLayout : noop
+  })
+
+  const { width, height } = normalStyle
+
   const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0)
   const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0)
   const [imageWidth, setImageWidth] = useState(0)
   const [imageHeight, setImageHeight] = useState(0)
   const [ratio, setRatio] = useState(0)
+  const [loaded, setLoaded] = useState(!isLayoutMode)
 
   const fixedHeight = useMemo(() => {
     const fixed = viewWidth * ratio
@@ -327,9 +357,23 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   useEffect(() => {
     if (!isSvg && isLayoutMode) {
       RNImage.getSize(src, (width: number, height: number) => {
-        setRatio(!width ? 0 : height / width)
-        setImageWidth(width)
-        setImageHeight(height)
+        state.current.imageWidth = width
+        state.current.imageHeight = height
+        state.current.ratio = !width ? 0 : height / width
+
+        if (isWidthFixMode
+          ? state.current.viewWidth
+          : isHeightFixMode
+            ? state.current.viewHeight
+            : state.current.viewWidth && state.current.viewHeight) {
+          state.current.viewWidth && setViewWidth(state.current.viewWidth)
+          state.current.viewHeight && setViewHeight(state.current.viewHeight)
+          setRatio(!width ? 0 : height / width)
+          setImageWidth(width)
+          setImageHeight(height)
+          state.current = {}
+          setLoaded(true)
+        }
       })
     }
   }, [src, isSvg, isLayoutMode])
@@ -359,36 +403,44 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   )
 
-  return (
-    <View {...innerProps}>
+  const SvgImage = createElement(
+    View,
+    innerProps,
+    createElement(SvgCssUri, {
+      uri: src,
+      onLayout: onSvgLoad,
+      onError: binderror && onSvgError,
+      style: extendObject(
+        { transformOrigin: 'top left' },
+        modeStyle
+      )
+    })
+  )
+
+  const BaseImage = renderImage(
+    extendObject(
       {
-        isSvg
-          ? <SvgCssUri
-              uri={src}
-              onLayout={onSvgLoad}
-              onError={binderror && onSvgError}
-              style={extendObject(
-                { transformOrigin: 'top left' },
-                modeStyle
-              )}
-            />
-          : <RNImage
-              source={{ uri: src }}
-              resizeMode={resizeMode}
-              onLoad={bindload && onImageLoad}
-              onError={binderror && onImageError}
-              style={extendObject(
-                {
-                  transformOrigin: 'top left',
-                  width: isCropMode ? imageWidth : '100%',
-                  height: isCropMode ? imageHeight : '100%'
-                },
-                isCropMode ? modeStyle : {}
-              )}
-            />
-      }
-    </View>
+        source: { uri: src },
+        resizeMode: resizeMode,
+        onLoad: bindload && onImageLoad,
+        onError: binderror && onImageError,
+        style: extendObject(
+          {
+            transformOrigin: 'top left',
+            width: isCropMode ? imageWidth : '100%',
+            height: isCropMode ? imageHeight : '100%'
+          },
+          isCropMode ? modeStyle : {}
+        )
+      },
+      isLayoutMode ? {} : innerProps
+    ),
+    enableFastImage
   )
+
+  const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
+
+  return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
 })
 
 Image.displayName = 'mpx-image'