@mpxjs/webpack-plugin 2.10.17-beta.2 → 2.10.17-beta.4

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

@@ -18,7 +18,7 @@
  * ✔ selection-start
  * ✔ selection-end
  * ✔ adjust-position
- * ✘ hold-keyboard
+ * ✔ hold-keyboard
  * ✘ safe-password-cert-path
  * ✘ safe-password-length
  * ✘ safe-password-time-stamp
@@ -95,13 +95,16 @@ export interface InputProps {
   'selection-start'?: number
   'selection-end'?: number
   'placeholder-style'?: { color?: string }
-  '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
-  'adjust-position': boolean,
+  // 只有 RN 环境读取
+  'keyboard-type'?: string
+  'adjust-position': boolean
+  'hold-keyboard'?: boolean
   bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void
   bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
   bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
@@ -118,11 +121,11 @@ export interface PrivateInputProps {
 
 type FinalInputProps = InputProps & PrivateInputProps
 
-const keyboardTypeMap: Record<Type, string> = {
-  text: 'default',
+const inputModeMap: Record<Type, string> = {
+  text: 'text',
   number: 'numeric',
-  idcard: 'default',
-  digit: isIOS ? 'decimal-pad' : 'numeric'
+  idcard: 'text',
+  digit: 'decimal'
 }
 
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
@@ -150,6 +153,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'adjust-position': adjustPosition = true,
+    'keyboard-type': originalKeyboardType,
+    'hold-keyboard': holdKeyboard = false,
     bindinput,
     bindfocus,
     bindblur,
@@ -182,7 +187,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     return ''
   }
 
-  const keyboardType = keyboardTypeMap[type]
   const defaultValue = parseValue(value)
   const textAlignVertical = multiline ? 'top' : 'auto'
 
@@ -281,7 +285,15 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const setKeyboardAvoidContext = () => {
     if (keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition }
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard }
+      keyboardAvoid.current = {
+        cursorSpacing,
+        ref: nodeRef,
+        adjustPosition,
+        // fix: iOS 会在 onFocus 之前触发 keyboardWillShow 并且赋值 keyboardHeight
+        // 这里手动同步下 keyboardHeight，防止 onFocus setKeyboardAvoidContext 删掉 keyboardHeight
+        keyboardHeight: keyboardAvoid?.current?.keyboardHeight
+      }
     }
   }
 
@@ -316,6 +328,9 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         if (keyboardAvoid?.current?.onKeyboardShow) {
           keyboardAvoid.current.onKeyboardShow = undefined
         }
+        if (keyboardAvoid?.current?.keyboardHeight) {
+          keyboardAvoid.current.keyboardHeight = undefined
+        }
       }
       if (keyboardAvoid?.current) {
         // 有 keyboardAvoiding
@@ -463,7 +478,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
-        keyboardType: keyboardType,
+        inputMode: originalKeyboardType ? undefined : inputModeMap[type],
+        keyboardType: originalKeyboardType,
         secureTextEntry: !!password,
         defaultValue: defaultValue,
         value: inputValue,

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

@@ -53,6 +53,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
 
   const onTouchEnd = ({ nativeEvent }: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
     if (nativeEvent.origin !== 'input') {
+      if (keyboardAvoid?.current?.holdKeyboard) {
+        return
+      }
       Keyboard.isVisible() && Keyboard.dismiss()
     }
   }

package/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -19,7 +19,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
     setState((prevState) => ({
       portals: [...prevState.portals, { key, children }]
     }))
-  }, [state])
+  }, [])
 
   const update = useCallback((key: number, children: ReactNode) => {
     setState((prevState) => ({
@@ -30,7 +30,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
         return item
       })
     }))
-  }, [state])
+  }, [])
 
   const unmount = useCallback((key: number) => {
     setState((prevState) => ({

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

@@ -11,6 +11,11 @@ import Portal from './mpx-portal'
 /**
  * ✔ indicator-dots
  * ✔ indicator-color
+ * ✔ indicator-width
+ * ✔ indicator-height
+ * ✔ indicator-radius
+ * ✔ indicator-spacing
+ * ✔ indicator-margin
  * ✔ indicator-active-color
  * ✔ autoplay
  * ✔ current
@@ -46,6 +51,11 @@ interface SwiperProps {
   scale?: boolean
   'indicator-dots'?: boolean
   'indicator-color'?: string
+  'indicator-width'?: number
+  'indicator-height'?: number
+  'indicator-spacing'?: number
+  'indicator-radius'?: number
+  'indicator-margin'?: number
   'indicator-active-color'?: string
   vertical?: boolean
   style: {
@@ -72,23 +82,23 @@ interface SwiperProps {
 const styles: { [key: string]: Object } = {
   pagination_x: {
     position: 'absolute',
-    bottom: 25,
+    bottom: 0,
     left: 0,
     right: 0,
     flexDirection: 'row',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'flex-end'
   },
   pagination_y: {
     position: 'absolute',
-    right: 15,
+    right: 0,
     top: 0,
     bottom: 0,
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'flex-end'
   },
   pagerWrapperx: {
     position: 'absolute',
@@ -109,16 +119,6 @@ const styles: { [key: string]: Object } = {
   }
 }
 
-const dotCommonStyle = {
-  width: 8,
-  height: 8,
-  borderRadius: 4,
-  marginLeft: 3,
-  marginRight: 3,
-  marginTop: 3,
-  marginBottom: 3,
-  zIndex: 98
-}
 const activeDotStyle = {
   zIndex: 99
 }
@@ -136,6 +136,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const {
     'indicator-dots': showPagination,
     'indicator-color': dotColor = 'rgba(0, 0, 0, .3)',
+    'indicator-width': dotWidth = 8,
+    'indicator-height': dotHeight = 8,
+    'indicator-radius': dotRadius = 4,
+    'indicator-spacing': dotSpacing = 4,
+    'indicator-margin': paginationMargin = 10,
     'indicator-active-color': activeDotColor = '#000000',
     'enable-var': enableVar = false,
     'parent-font-size': parentFontSize,
@@ -151,6 +156,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     current: propCurrent = 0,
     bindchange
   } = props
+
+  const dotCommonStyle = {
+    width: dotWidth,
+    height: dotHeight,
+    borderRadius: dotRadius,
+    marginLeft: dotSpacing,
+    marginRight: dotSpacing,
+    marginTop: dotSpacing,
+    marginBottom: dotSpacing,
+    zIndex: 98
+  }
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
   const horizontal = props.vertical !== undefined ? !props.vertical : true
@@ -252,6 +268,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       'style',
       'indicator-dots',
       'indicator-color',
+      'indicator-width',
       'indicator-active-color',
       'previous-margin',
       'vertical',
@@ -294,8 +311,18 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     for (let i = 0; i < children.length; i++) {
       dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>)
     }
+    let paginationStyle = styles['pagination_' + dir]
+    if (paginationMargin) {
+      paginationStyle = {
+        ...paginationStyle,
+        marginBottom: paginationMargin,
+        marginLeft: paginationMargin,
+        marginRight: paginationMargin,
+        marginTop: paginationMargin
+      }
+    }
     return (
-      <View pointerEvents="none" style={styles['pagination_' + dir]}>
+      <View pointerEvents="none" style={paginationStyle} key="pagination">
         <View style={[styles['pagerWrapper' + dir]]}>
           <Animated.View style={[
             dotCommonStyle,
@@ -861,6 +888,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     style: [normalStyle, layoutStyle, styles.swiper]
   }, layoutProps, innerProps)
   const animateComponent = createElement(Animated.View, {
+    key: 'swiperContainer',
     style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
   }, wrapChildren({
     children: arrPages

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

@@ -8,8 +8,8 @@ import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleShee
 import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import Animated from 'react-native-reanimated'
-import useAnimationHooks from './useAnimationHooks'
-import type { AnimationProp } from './useAnimationHooks'
+import useAnimationHooks, { AnimationType } from './animationHooks/index'
+import type { AnimationProp } from './animationHooks/utils'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
@@ -32,7 +32,7 @@ export interface _ViewProps extends ViewProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
-  'enable-animation'?: boolean
+  'enable-animation'?: boolean | AnimationType
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
@@ -287,7 +287,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+      if (type === 'linear' && (!layoutWidth || !layoutHeight) && (isPercent(width) || isPercent(height))) {
         // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
         // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
         dimensions = {
@@ -777,7 +777,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
         ref: nodeRef,
         style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
       }
-
     ),
     [
       'hover-start-time',

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

@@ -234,7 +234,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
         break
       case 'postMessage':
-        bindmessage && bindmessage(getCustomEvent('messsage', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
+        bindmessage && bindmessage(getCustomEvent('message', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
           detail: {
             data: params[0]?.data
           }

package/lib/runtime/components/react/types/global.d.ts

@@ -34,6 +34,7 @@ declare module '@mpxjs/utils' {
     },
     setOptions: (params: Record<string, any>) => void
   } | undefined
+  export function dash2hump (str: string): string
 }
 
 declare let global: {

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

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement, MutableRefObject } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext, RouteContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
@@ -238,7 +238,7 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
       const resolved = resolveVar(value, varContext)
       if (resolved === undefined) {
         delete target[key]
-        error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
+        // error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
         return
       }
       target[key] = resolved
@@ -288,6 +288,10 @@ function transformStringify (styleObj: Record<string, any>) {
   if (isNumber(styleObj.fontWeight)) {
     styleObj.fontWeight = '' + styleObj.fontWeight
   }
+  // transformOrigin 20px 需要转换为 transformOrigin '20'
+  if (isNumber(styleObj.transformOrigin)) {
+    styleObj.transformOrigin = '' + styleObj.transformOrigin
+  }
 }
 
 function transformPosition (styleObj: Record<string, any>, meta: PositionMeta) {
@@ -297,7 +301,7 @@ function transformPosition (styleObj: Record<string, any>, meta: PositionMeta) {
   }
 }
 // 多value解析
-function parseValues (str: string, char = ' ') {
+export function parseValues (str: string, char = ' ') {
   let stack = 0
   let temp = ''
   const result = []
@@ -308,11 +312,11 @@ function parseValues (str: string, char = ' ') {
       stack--
     }
     // 非括号内 或者 非分隔字符且非空
-    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+    if (stack !== 0 || str[i] !== char) {
       temp += str[i]
     }
     if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-      result.push(temp)
+      result.push(temp.trim())
       temp = ''
     }
   }
@@ -321,6 +325,8 @@ function parseValues (str: string, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform (transformStr: string) {
   const values = parseValues(transformStr)
+  // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+  values.sort()
   const transform: { [propName: string]: string | number | number[] }[] = []
   values.forEach(item => {
     const match = item.match(/([/\w]+)\((.+)\)/)
@@ -384,6 +390,14 @@ function transformBoxShadow (styleObj: Record<string, any>) {
   }, '')
 }
 
+function transformZIndex (styleObj: Record<string, any>) {
+  if (!styleObj.zIndex || typeof styleObj.zIndex === 'number') return
+  if (styleObj.zIndex === 'auto') {
+    error('Property [z-index] does not supported [auto], please check again!')
+    styleObj.zIndex = 0
+  }
+}
+
 interface TransformStyleConfig {
   enableVar?: boolean
   externalVarContext?: Record<string, any>
@@ -440,17 +454,20 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     }
   }
 
-  function calcVisitor ({ value, keyPath }: VisitorArg) {
+  function calcVisitor ({ key, value, keyPath }: VisitorArg) {
     if (calcUseRegExp.test(value)) {
+      // calc translate & border-radius 的百分比计算
+      if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
+        hasSelfPercent = true
+        percentKeyPaths.push(keyPath.slice())
+      }
       calcKeyPaths.push(keyPath.slice())
     }
   }
 
   function percentVisitor ({ key, value, keyPath }: VisitorArg) {
-    if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-      hasSelfPercent = true
-      percentKeyPaths.push(keyPath.slice())
-    } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+    // fixme 去掉 translate & border-radius 的百分比计算
+    if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
       percentKeyPaths.push(keyPath.slice())
     }
   }
@@ -460,10 +477,10 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }))
     }
   }
-
+  // transform 字符串格式转化数组格式(先转数组再处理css var)
+  transformTransform(styleObj)
   // traverse var & generate normalStyle
   traverseStyle(styleObj, [varVisitor])
-
   hasVarDec = hasVarDec || !!externalVarContext
   enableVar = enableVar || hasVarDec || hasVarUse
   const enableVarRef = useRef(enableVar)
@@ -527,10 +544,11 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformStringify(normalStyle)
   // transform rpx to px
   transformBoxShadow(normalStyle)
-
-  // transform 字符串格式转化数组格式
-  transformTransform(normalStyle)
-
+  // transform z-index auto to 0
+  transformZIndex(normalStyle)
+  if (Array.isArray(normalStyle.transform)) {
+    normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item))
+  }
   return {
     hasVarDec,
     varContextRef,

package/lib/runtime/optionProcessor.js

@@ -2,6 +2,7 @@ import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
+import { error } from '@mpxjs/utils'
 const dash2hump = require('../utils/hump-dash').dash2hump
 
 export function processComponentOption (
@@ -107,6 +108,10 @@ registered in parent context!`)
 
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
+  if (!component) {
+    error('getComponent() expected component options as the first argument, but got undefined.')
+    return null
+  }
   // eslint-disable-next-line
   if (extendOptions && !component.__mpxExtended) {
     extend(component, extendOptions, { __mpxExtended: true })

package/lib/runtime/optionProcessorReact.js

@@ -1,9 +1,16 @@
 import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-async-suspense'
 import { memo, forwardRef, createElement } from 'react'
+import { error } from '@mpxjs/utils'
 import { extend } from './utils'
 
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
+  if (!component) {
+    error(
+      `getComponent expecting function/class component ${extendOptions?.displayName ? `[${extendOptions.displayName}] ` : ''}as the first argument, but got undefined.`
+    )
+    return null
+  }
   // eslint-disable-next-line
   if (extendOptions && !component.__mpxExtended) {
     extend(component, extendOptions, { __mpxExtended: true })

package/lib/runtime/stringify.wxs

@@ -45,7 +45,7 @@ function objectKeys (obj) {
 }
 
 function genRegExp (str, flags) {
-  if (!__mpx_wxs__) {
+  if (!__mpx_wxs__ || __mpx_mode__ === 'ks') {
     return new RegExp(str, flags)
   } else {
     return getRegExp(str, flags)
@@ -234,4 +234,4 @@ module.exports = {
     var parsedStaticStyle = typeof staticStyle === 'string' ? parseStyleText(staticStyle) : {}
     return genStyleText(extend(parsedStaticStyle, normalizedDynamicStyle))
   }
-}
+}