@mpxjs/webpack-plugin 2.9.18 → 2.9.19-react.0

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

@@ -0,0 +1,46 @@
+/**
+ * Compared with Input:
+ *   Subtraction:
+ *     type, password, confirm-hold
+ *   Addition:
+ *     - confirm-type: Not support `return`
+ *     ✔ auto-height
+ *     ✘ fixed
+ *     ✘ show-confirm-bar
+ *     ✔ bindlinechange: No `heightRpx` info.
+ */
+import React, { forwardRef } from 'react'
+import { Keyboard, TextInput } from 'react-native'
+import Input, { InputProps, PrivateInputProps } from './mpx-input'
+import { omit } from './utils'
+import { HandlerRef } from '../../useNodesRef'
+
+export type TextareProps = Omit<
+  InputProps & PrivateInputProps,
+  'type' | 'password' | 'multiline' | 'confirm-hold'
+>
+
+const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
+  (props, ref): React.JSX.Element => {
+    const restProps = omit(props, [
+      'ref',
+      'type',
+      'password',
+      'multiline',
+      'confirm-hold',
+    ])
+    return (
+      <Input
+        ref={ref}
+        multiline
+        confirm-type='next'
+        bindblur={() => Keyboard.dismiss()}
+        {...restProps}
+      />
+    )
+  }
+)
+
+Textarea.displayName = 'mpx-textarea'
+
+export default Textarea

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

@@ -0,0 +1,397 @@
+/**
+ * ✔ hover-class
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ */
+import { View, Text, StyleProp, TextStyle, ViewStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
+import { useRef, useState, useEffect, forwardRef, ForwardedRef, ReactNode, JSX } from 'react'
+// @ts-ignore
+import useInnerProps from './getInnerListeners'
+// @ts-ignore
+import useNodesRef, { HandlerRef } from '../../useNodesRef' // 引入辅助函数
+
+import { parseUrl, TEXT_STYLE_REGEX, PERCENT_REGX, isText} from './utils'
+
+
+type ExtendedViewStyle = ViewStyle & {
+  backgroundImage?: string
+  backgroundSize?: ImageResizeMode
+}
+
+export interface _ViewProps extends ViewProps {
+  style?: Array<ExtendedViewStyle>
+  children?: ReactNode | ReactNode []
+  hoverStyle: Array<ExtendedViewStyle>
+  ['hover-start-time']: number
+  ['hover-stay-time']: number
+  'enable-offset'?: boolean
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+}
+
+type Obj = Record<string, any>
+
+type GroupData = Record<string, Record<string, any>>;
+
+type Handler = (...args: any []) => void
+
+type Size = {
+  width: number,
+  height: number
+}
+
+type DimensionValue = number | 'auto' | `${number}%`
+
+type PreImageInfo = {
+  src?: string,
+  sizeList: DimensionValue []
+}
+
+type ImageProps = {
+  style: ImageStyle,
+  src?: string
+}
+
+const IMAGE_STYLE_REGEX = /^background(Image|Size|Repeat|Position)$/
+
+function groupBy(style: Obj, callback: (key: string, val: string) => string, group:GroupData = {}):GroupData {
+  let groupKey = ''
+  for (let key in style) {
+    if (style.hasOwnProperty(key)) { // 确保处理对象自身的属性
+      let val: string = style[key] as string
+      groupKey = callback(key, val)
+      if (!group[groupKey]) {
+        group[groupKey] = {}
+      }
+      group[groupKey][key] = val  
+    }
+  }
+  return group
+}
+
+const applyHandlers = (handlers: Handler[] , args: any [] ) => {
+  for (let handler of handlers) {
+    handler(...args)
+  }
+}
+
+const checkNeedLayout = (style: PreImageInfo) => {  
+  const [width, height] = style.sizeList
+  return (PERCENT_REGX.test(`${height}`) && width === 'auto') || (PERCENT_REGX.test(`${width}`) && height === 'auto')
+}
+
+/**
+ * h - 用户设置的高度
+ * lh - 容器的高度
+ * ratio - 原始图片的宽高比
+ * **/
+function calculateSize(h: number, lh: number, ratio: number) {
+  let height, width
+  if (PERCENT_REGX.test(`${h}`)) { // auto  px/rpx 
+    if (!lh) return null
+    height = (parseFloat(`${h}`) / 100) * lh
+    width = height * ratio
+  } else { // 2. auto px/rpx - 根据比例计算
+    height = h
+    width = height * ratio
+  }
+
+  return {
+    width,
+    height 
+  }
+}
+
+// background-size 转换
+function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
+  let sizeList = preImageInfo.sizeList
+  if (!sizeList) return
+  // 枚举值
+  if (['cover', 'contain'].includes(`${sizeList[0]}`)) {
+    imageProps.style.resizeMode = sizeList[0] as ImageResizeMode
+  } else {
+    const [width, height] = sizeList
+    let newWidth: ImageStyle['width'] = 0, newHeight: ImageStyle['height'] = 0
+
+    const { width: imageSizeWidth, height: imageSizeHeight } = imageSize || {}
+
+    if (width === 'auto' && height === 'auto') { // 均为auto
+      if (!imageSize) return
+      newHeight = imageSizeHeight
+      newWidth = imageSizeWidth
+    } else if (width === 'auto') { // auto px/rpx/%
+      if (!imageSize) return
+      const dimensions = calculateSize(height as number, layoutInfo?.height, imageSizeWidth / imageSizeHeight)
+      if (!dimensions) return
+      newWidth = dimensions.width
+      newHeight = dimensions.height
+    }else if (height === 'auto') { // auto px/rpx/%
+      if (!imageSize) return
+      const dimensions = calculateSize(width as number, layoutInfo?.width,  imageSizeHeight / imageSizeWidth)
+      if (!dimensions) return
+      newHeight = dimensions.width
+      newWidth = dimensions.height
+    } else { // 数值类型      ImageStyle
+      // 数值类型设置为 stretch
+      (imageProps.style as ImageStyle).resizeMode = 'stretch'
+      newWidth = PERCENT_REGX.test(`${width}`) ? width : +width! as DimensionValue
+      newHeight = PERCENT_REGX.test(`${width}`) ? height : +height! as DimensionValue
+    }
+    // 样式合并
+    imageProps.style = {
+      ...imageProps.style as ImageStyle,
+      width: newWidth,
+      height: newHeight
+    }
+  }
+}
+
+// background-image转换为source
+function backgroundImage(imageProps: ImageProps, preImageInfo: PreImageInfo) {
+  imageProps.src = preImageInfo.src
+}
+
+const imageStyleToProps = (preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) => {
+  // 初始化
+  const imageProps: ImageProps = {
+    style: {
+      resizeMode: 'cover' as ImageResizeMode,
+      ...StyleSheet.absoluteFillObject
+    }
+  }
+
+  applyHandlers([ backgroundSize, backgroundImage ],[imageProps, preImageInfo, imageSize, layoutInfo])
+  if (!imageProps?.src) return null
+  return imageProps
+}
+
+
+function preParseImage(imageStyle?: ExtendedViewStyle) {
+
+  const { backgroundImage, backgroundSize = [ "auto" ] } = imageStyle || {}
+  const src = parseUrl(backgroundImage)
+
+  let sizeList = backgroundSize.slice() as DimensionValue []
+
+  sizeList.length === 1 &&  sizeList.push(sizeList[0])
+
+  return {
+    src,
+    sizeList
+  }
+}
+
+function wrapImage(imageStyle?: ExtendedViewStyle) {
+  const [show, setShow] = useState<boolean>(false)
+  const [, setImageSizeWidth] = useState<number | null>(null)
+  const [, setImageSizeHeight] = useState<number | null>(null)
+  const [, setLayoutInfoWidth] = useState<number | null>(null)
+  const [, setLayoutInfoHeight] = useState<number | null>(null)
+  const sizeInfo = useRef<Size | null>(null)
+  const layoutInfo = useRef<Size | null>(null)
+
+  // 预解析
+  const preImageInfo: PreImageInfo = preParseImage(imageStyle)
+
+
+  // 判断是否可挂载onLayout
+  const needLayout = checkNeedLayout(preImageInfo)
+  const { src, sizeList } = preImageInfo
+
+  useEffect(() => {
+    if(!src) {
+      setShow(false)
+      sizeInfo.current = null
+      layoutInfo.current = null
+      return 
+    }
+  
+    if (!sizeList.includes('auto')) {
+      setShow(true)
+      return
+    }
+    Image.getSize(src, (width, height) => {
+      sizeInfo.current = {
+        width,
+        height
+      }
+      //1. 当需要绑定onLayout 2. 获取到布局信息
+      if (!needLayout || layoutInfo.current) {
+        setImageSizeWidth(width)
+        setImageSizeHeight(height)
+        if(layoutInfo.current) {
+          setLayoutInfoWidth(layoutInfo.current.width)
+          setLayoutInfoHeight(layoutInfo.current.height)
+        }
+        setShow(true)
+      }
+    })
+  }, [preImageInfo?.src])
+
+  if (!preImageInfo?.src) return null
+
+  const onLayout = (res: LayoutChangeEvent) => {
+    const { width, height } = res?.nativeEvent?.layout || {}
+    layoutInfo.current = {
+      width,
+      height
+    }
+    if (sizeInfo.current) {
+      setImageSizeWidth(sizeInfo.current.width)
+      setImageSizeHeight(sizeInfo.current.height)
+      setLayoutInfoWidth(width)
+      setLayoutInfoHeight(height) 
+      setShow(true)
+    }
+  }
+  
+  return <View key='viewBgImg' {...needLayout ? {onLayout} : null }   style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden'}}>
+    {show && <Image  {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
+  </View>
+}
+
+function splitStyle(styles: ExtendedViewStyle) {
+  return groupBy(styles, (key) => {
+    if (TEXT_STYLE_REGEX.test(key))
+      return 'textStyle'
+    else if (IMAGE_STYLE_REGEX.test(key)) return 'imageStyle'
+    return 'innerStyle'
+  }, {})
+}
+
+function every(children: ReactNode [], callback: (children: ReactNode) => boolean) {
+  return children.every((child) => callback(child))
+}
+
+function wrapChildren(children: ReactNode | ReactNode [] , textStyle?: StyleProp<TextStyle>, imageStyle?: ExtendedViewStyle) {
+  children = Array.isArray(children) ? children : [children]
+  if (every(children as ReactNode[], (child)=>isText(child))) {
+    children = [<Text key='viewTextWrap' style={textStyle}>{children}</Text>]
+  } else {
+    if(textStyle) console.warn('Text style will be ignored unless every child of the view is Text node!')
+  }
+
+  return [
+    wrapImage(imageStyle),
+    ...children
+  ]
+}
+
+const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((props, ref): JSX.Element => {
+  const {
+    style = [],
+    children,
+    hoverStyle,
+    'hover-start-time': hoverStartTime = 50,
+    'hover-stay-time': hoverStayTime = 400,
+    'enable-offset': enableOffset
+  } = props
+
+  const [isHover, setIsHover] = useState(false)
+
+  const layoutRef = useRef({})
+
+  // 打平 style 数组
+  const styleObj:ExtendedViewStyle = StyleSheet.flatten(style)
+  // 默认样式
+  const defaultStyle:ExtendedViewStyle = {
+    // flex 布局相关的默认样式
+    ...styleObj.display === 'flex' && {
+      flexDirection: 'row',
+      flexBasis: 'auto',
+      flexShrink: 1,
+      flexWrap: 'nowrap'
+    }
+  }
+
+  const { nodeRef } = useNodesRef<View, _ViewProps>(props, ref, {
+    defaultStyle
+  })
+
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
+
+  const setStartTimer = () => {
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(() => true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(() => false)
+    }, +hoverStayTime)
+  }
+
+  function onTouchStart(e: NativeSyntheticEvent<TouchEvent>){
+    const { bindtouchstart } = props;
+    bindtouchstart && bindtouchstart(e)
+    setStartTimer()
+  }
+
+  function onTouchEnd(e: NativeSyntheticEvent<TouchEvent>){
+    const { bindtouchend } = props;
+    bindtouchend && bindtouchend(e)
+    setStayTimer()
+  }
+
+  const onLayout = () => {
+  
+    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
+      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+    })
+  }
+
+  const {textStyle, imageStyle, innerStyle} = splitStyle(StyleSheet.flatten<ExtendedViewStyle>([ 
+    defaultStyle,
+    styleObj,
+    ...(isHover ? hoverStyle : [])]
+  ))
+
+  const innerProps = useInnerProps(props, {
+    ref: nodeRef,
+    ...enableOffset ? { onLayout } : {},
+    ...(hoverStyle && {
+      bindtouchstart: onTouchStart,
+      bindtouchend: onTouchEnd
+    })
+  }, [
+    'style',
+    'children',
+    'hover-start-time',
+    'hover-stay-time',
+    'hoverStyle',
+    'hover-class',
+    'enable-offset'
+  ], {
+    layoutRef
+  })
+
+  return (
+    <View
+      {...innerProps}
+      style={innerStyle}
+    >
+      {wrapChildren(children, textStyle, imageStyle)}
+    </View>
+  )
+})
+
+_View.displayName = 'mpx-view'
+
+export default _View
+

package/lib/runtime/components/react/utils.ts

@@ -0,0 +1,92 @@
+import { useEffect, useRef, Children, ReactNode, FunctionComponent, isValidElement } from 'react'
+import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+
+export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
+
+export const PERCENT_REGX = /\d+(\.\d+)?%$/
+
+const URL_REGEX = /url\(["']?(.*?)["']?\)/
+
+export function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K> {
+  const shallowCopy: any = Object.assign({}, obj)
+  for (let i = 0; i < fields.length; i += 1) {
+    const key = fields[i]
+    delete shallowCopy[key]
+  }
+  return shallowCopy
+}
+
+/**
+ * 从 style 中提取 TextStyle
+ * @param style
+ * @returns
+ */
+export const extractTextStyle = (style: StyleProp<ViewStyle & TextStyle>): TextStyle => {
+  return Object.entries(StyleSheet.flatten(style)).reduce((textStyle, [key, value]) => {
+    TEXT_STYLE_REGEX.test(key) && Object.assign(textStyle, { [key]: value })
+    return textStyle
+  }, {})
+}
+
+/**
+ * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
+ */
+export const useUpdateEffect = (effect: any, deps: any) => {
+  const isMounted = useRef(false)
+
+  // for react-refresh
+  useEffect(() => {
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true
+    } else {
+      return effect()
+    }
+  }, deps)
+}
+
+/**
+ * 解析行内样式
+ * @param inlineStyle
+ * @returns
+ */
+export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
+  return inlineStyle.split(';').reduce((styleObj, style) => {
+    const [k, v, ...rest] = style.split(':')
+    if (rest.length || !v || !k) return styleObj
+    const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
+    return Object.assign(styleObj, { [key]: v.trim() })
+  }, {})
+}
+
+export const parseUrl = (cssUrl: string = '') => {
+  if (!cssUrl) return
+
+  const match = cssUrl.match(URL_REGEX)
+
+  return match?.[1]
+}
+
+export const getRestProps = (transferProps: any = {}, originProps: any = {}, deletePropsKey: any = []) => {
+  return {
+    ...transferProps,
+    ...omit(originProps, deletePropsKey)
+  }
+}
+
+export const isText = (ele: ReactNode) => {
+  if (isValidElement(ele)) {
+    const displayName = (ele.type as FunctionComponent)?.displayName
+    return displayName === 'mpx-text' || displayName === 'Text'  
+  }
+  return false
+}
+
+export function every(children: ReactNode, callback: (children: ReactNode) => boolean ) {
+  return Children.toArray(children).every((child) => callback(child as ReactNode))
+}

package/lib/runtime/stringify.wxs

@@ -90,10 +90,6 @@ function isArray (arr) {
   }
 }
 
-function isDef (v) {
-  return v !== undefined && v !== null
-}
-
 var escapeMap = {
   '(': '_pl_',
   ')': '_pr_',
@@ -145,11 +141,11 @@ function stringifyDynamicClass (value) {
 
 function stringifyArray (value) {
   var res = ''
-  var stringified
+  var classString
   for (var i = 0; i < value.length; i++) {
-    if (isDef(stringified = stringifyDynamicClass(value[i])) && stringified !== '') {
+    if ((classString = stringifyDynamicClass(value[i]))) {
       if (res) res += ' '
-      res += stringified
+      res += classString
     }
   }
   return res

package/lib/runtime/useNodesRef.ts

@@ -0,0 +1,39 @@
+import { useRef, useEffect, useImperativeHandle, RefObject, ForwardedRef } from 'react'
+
+
+type Obj = Record<string, any>
+
+export type HandlerRef<T, P> = {
+  getNodeInstance(): {
+    props: RefObject<P>,
+    nodeRef: RefObject<T>,
+    instance: Obj
+  }
+}
+
+export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {} ) {
+  const nodeRef = useRef<T>(null)
+  const _props = useRef<P | null>(props)
+
+  useEffect(() => {
+    _props.current = props
+    return () => {
+      _props.current = null // 组件销毁，清空 _props 依赖数据
+    }
+  }, [props])
+  useImperativeHandle(ref, () => {
+    return {
+      getNodeInstance () {
+        return {
+          props: _props,
+          nodeRef,
+          instance
+        }
+      }
+    }
+  })
+
+  return {
+    nodeRef
+  }
+}

package/lib/style-compiler/index.js

@@ -9,6 +9,7 @@ const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
 const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
+const isReact = require('../utils/env').isReact
 
 module.exports = function (css, map) {
   this.cacheable()
@@ -47,7 +48,7 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
-    if (mode === 'web') {
+    if (mode === 'web' || isReact(mode)) {
       plugins.push(transSpecial({ id }))
     }