@mpxjs/webpack-plugin 2.9.64 → 2.9.65

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

@@ -34,6 +34,7 @@
 import { ScrollView } from 'react-native-gesture-handler'
 import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
 import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef } from 'react'
+import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
@@ -150,7 +151,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const { textStyle, innerStyle } = splitStyle(normalStyle)
 
-  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
+  const scrollViewRef = useAnimatedRef<ScrollView>()
+  useNodesRef(props, ref, scrollViewRef, {
     scrollOffset: scrollOptions,
     node: {
       scrollEnabled: scrollX || scrollY,

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

@@ -89,7 +89,8 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   const defaultY = (defaultHeight * initOffsetIndex) || 0
   // 内部存储上一次的offset值
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
-  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView & View, CarouseProps>(props, ref, {})
+  const scrollViewRef = useRef<ScrollView & View>(null)
+  useNodesRef<ScrollView & View, CarouseProps>(props, ref, scrollViewRef, {})
   const {
     // 存储layout布局信息
     layoutRef,

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

@@ -45,7 +45,10 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     bindchange: props.bindchange,
     easingFunction: props['easing-function'] || 'default'
   }
-  const { nodeRef } = useNodesRef<ScrollView, SwiperProps>(props, ref, {})
+
+  const nodeRef = useRef(null)
+  useNodesRef<ScrollView, SwiperProps>(props, ref, nodeRef, {})
+
   const innerProps = useInnerProps(props, {
     ref: nodeRef
   }, [

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

@@ -25,7 +25,8 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   } = props
 
   const { textProps } = splitProps(props)
-  const { nodeRef } = useNodesRef(props, ref, {})
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, {})
 
   const {
     normalStyle,

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

@@ -76,7 +76,8 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     setIsChecked(checked)
   }, [checked])
 
-  const { nodeRef } = useNodesRef<Switch, _SwitchProps>(props, ref)
+  const nodeRef = useRef(null)
+  useNodesRef<Switch, _SwitchProps>(props, ref, nodeRef)
 
   const {
     layoutRef,

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

@@ -48,7 +48,8 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     parentHeight
   })
 
-  const { nodeRef } = useNodesRef<Text, _TextProps>(props, ref)
+  const nodeRef = useRef(null)
+  useNodesRef<Text, _TextProps>(props, ref, nodeRef)
 
   const innerProps = useInnerProps(props, {
     ref: nodeRef,

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

@@ -114,6 +114,17 @@ const applyHandlers = (handlers: Handler[], args: any[]) => {
   }
 }
 
+const normalizeStyle = (style: ExtendedViewStyle = {}) => {
+  ['backgroundSize', 'backgroundPosition'].forEach(name => {
+    if (style[name] && typeof style[name] === 'string') {
+      if (style[name].trim()) {
+        style[name] = style[name].split(' ')
+      }
+    }
+  })
+  return style
+}
+
 const isPercent = (val: string | number | undefined): val is string => typeof val === 'string' && PERCENT_REGEX.test(val)
 
 const isBackgroundSizeKeyword = (val: string | number): boolean => typeof val === 'string' && /^cover|contain$/.test(val)
@@ -501,7 +512,7 @@ function normalizeBackgroundSize (backgroundSize: Exclude<ExtendedViewStyle['bac
 }
 
 function preParseImage (imageStyle?: ExtendedViewStyle) {
-  const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {}
+  const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {}
   const { type, src, linearInfo } = parseBgImage(backgroundImage)
 
   return {
@@ -589,8 +600,8 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
         }
         setImageSizeWidth(sizeInfo.current.width)
         setImageSizeHeight(sizeInfo.current.height)
-        setShow(true)
       }
+      setShow(true)
     } else if (sizeInfo.current) {
       setLayoutInfoWidth(width)
       setLayoutInfoHeight(height)
@@ -600,7 +611,7 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
     }
   }
 
-  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden' }}>
+  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} /> }
     {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
   </View>
@@ -686,7 +697,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
   }
 
-  const { nodeRef } = useNodesRef<View, _ViewProps>(props, ref, {
+  const nodeRef = useRef(null)
+  useNodesRef<View, _ViewProps>(props, ref, nodeRef, {
     defaultStyle
   })
 

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

@@ -1,4 +1,4 @@
-import { forwardRef, JSX, useEffect } from 'react'
+import { forwardRef, JSX, useEffect, useRef } from 'react'
 import { noop, warn } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
@@ -59,7 +59,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     bottom: 0 as number
   }
 
-  const { nodeRef: webViewRef } = useNodesRef<WebView, WebViewProps>(props, ref, {
+  const webViewRef = useRef<WebView>(null)
+  useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     defaultStyle: defaultWebViewStyle
   })
 

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

@@ -26,6 +26,16 @@ declare module '@mpxjs/utils' {
   export function isObject (value): value is Object
   export function error (msg: string, location?: string, e?: any): void
   export function warn (msg: string, location?: string, e?: any): void
+  export function getFocusedNavigation (): {
+    insets: {
+      top: number
+      bottom: number
+      left: number
+      right: number
+    }
+  } | undefined
 }
 
-declare let global: Record<string, any>
+declare let global: {
+  __formatValue (value: string): string | number
+} & Record<string, any>

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

@@ -10,8 +10,7 @@ export type HandlerRef<T, P> = {
   }
 }
 
-export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {}) {
-  const nodeRef = useRef<T>(null)
+export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance:Obj = {}) {
   const _props = useRef<P | null>(null)
   _props.current = props
 
@@ -26,8 +25,4 @@ export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRe
       }
     }
   })
-
-  return {
-    nodeRef
-  }
 }

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

@@ -1,8 +1,9 @@
 import { useEffect, useRef, ReactNode, ReactElement, FunctionComponent, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { Dimensions, StyleSheet, LayoutChangeEvent, TextStyle } from 'react-native'
-import { isObject, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
+import { LayoutChangeEvent, TextStyle } from 'react-native'
+import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
 import { VarContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
+import { initialWindowMetrics } from 'react-native-safe-area-context'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -14,19 +15,26 @@ export const DEFAULT_UNLAY_STYLE = {
   opacity: 0
 }
 
-export function rpx (value: number) {
-  const { width } = Dimensions.get('screen')
-  // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
-  // px = rpx * (750 / 屏幕宽度)
-  return value * width / 750
-}
-
-const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
-const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
-const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varDecRegExp = /^--.*/
 const varUseRegExp = /var\(/
 const calcUseRegExp = /calc\(/
+const envUseRegExp = /env\(/
+
+const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
+  'safe-area-inset-top': 'top',
+  'safe-area-inset-right': 'right',
+  'safe-area-inset-bottom': 'bottom',
+  'safe-area-inset-left': 'left'
+}
+
+function getSafeAreaInset (name: string) {
+  const navigation = getFocusedNavigation()
+  const insets = {
+    ...initialWindowMetrics?.insets,
+    ...navigation?.insets
+  }
+  return insets[safeAreaInsetMap[name]]
+}
 
 export function omit<T, K extends string> (obj: T, fields: K[]): Omit<T, K> {
   const shallowCopy: any = Object.assign({}, obj)
@@ -122,9 +130,9 @@ export function groupBy<T extends Record<string, any>> (
 }
 
 export function splitStyle<T extends Record<string, any>> (styleObj: T): {
-  textStyle?: Partial<T>;
-  backgroundStyle?: Partial<T>;
-  innerStyle?: Partial<T>;
+  textStyle?: Partial<T>
+  backgroundStyle?: Partial<T>
+  innerStyle?: Partial<T>
 } {
   return groupBy(styleObj, (key) => {
     if (TEXT_STYLE_REGEX.test(key)) {
@@ -135,9 +143,9 @@ export function splitStyle<T extends Record<string, any>> (styleObj: T): {
       return 'innerStyle'
     }
   }) as {
-    textStyle: Partial<T>;
-    backgroundStyle: Partial<T>;
-    innerStyle: Partial<T>;
+    textStyle: Partial<T>
+    backgroundStyle: Partial<T>
+    innerStyle: Partial<T>
   }
 }
 
@@ -157,19 +165,6 @@ const parentHeightPercentRule: Record<string, boolean> = {
   bottom: true
 }
 
-// todo calc时处理角度和时间等单位
-function formatValue (value: string) {
-  let matched
-  if ((matched = pxRegExp.exec(value))) {
-    return +matched[1]
-  } else if ((matched = rpxRegExp.exec(value))) {
-    return rpx(+matched[1])
-  } else if (hairlineRegExp.test(value)) {
-    return StyleSheet.hairlineWidth
-  }
-  return value
-}
-
 interface PercentConfig {
   fontSize?: number | string
   width?: number
@@ -226,11 +221,11 @@ function resolveVar (input: string, varContext: Record<string, any>) {
     if (varUseRegExp.test(varValue)) {
       varValue = '' + resolveVar(varValue, varContext)
     } else {
-      varValue = '' + formatValue(varValue)
+      varValue = '' + global.__formatValue(varValue)
     }
     replaced.replace(start, end - 1, varValue)
   })
-  return formatValue(replaced.source())
+  return global.__formatValue(replaced.source())
 }
 
 function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<string>>, varContext: Record<string, any>) {
@@ -241,6 +236,22 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
   })
 }
 
+function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<string>>) {
+  envKeyPaths.forEach((envKeyPath) => {
+    setStyle(styleObj, envKeyPath, ({ target, key, value }) => {
+      const parsed = parseFunc(value, 'env')
+      const replaced = new ReplaceSource(value)
+      parsed.forEach(({ start, end, args }) => {
+        const name = args[0]
+        const fallback = args[1] || ''
+        const value = '' + (getSafeAreaInset(name) ?? global.__formatValue(fallback))
+        replaced.replace(start, end - 1, value)
+      })
+      target[key] = global.__formatValue(replaced.source())
+    })
+  })
+}
+
 function transformCalc (styleObj: Record<string, any>, calcKeyPaths: Array<Array<string>>, formatter: (value: string, key: string) => number) {
   calcKeyPaths.forEach((calcKeyPath) => {
     setStyle(styleObj, calcKeyPath, ({ target, key, value }) => {
@@ -257,7 +268,7 @@ function transformCalc (styleObj: Record<string, any>, calcKeyPaths: Array<Array
           error(`calc(${exp}) parse error.`, undefined, e)
         }
       })
-      target[key] = formatValue(replaced.source())
+      target[key] = global.__formatValue(replaced.source())
     })
   })
 }
@@ -279,6 +290,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   const varKeyPaths: Array<Array<string>> = []
   const percentKeyPaths: Array<Array<string>> = []
   const calcKeyPaths: Array<Array<string>> = []
+  const envKeyPaths: Array<Array<string>> = []
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
 
@@ -298,6 +310,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       varKeyPaths.push(keyPath.slice())
     }
   }
+
   // traverse var
   traverseStyle(styleObj, [varVisitor])
   hasVarDec = hasVarDec || !!externalVarContext
@@ -318,6 +331,12 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     transformVar(normalStyle, varKeyPaths, varContextRef.current)
   }
 
+  function envVisitor ({ value, keyPath }: VisitorArg) {
+    if (envUseRegExp.test(value)) {
+      envKeyPaths.push(keyPath.slice())
+    }
+  }
+
   function calcVisitor ({ value, keyPath }: VisitorArg) {
     if (calcUseRegExp.test(value)) {
       calcKeyPaths.push(keyPath.slice())
@@ -328,13 +347,13 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
       hasSelfPercent = true
       percentKeyPaths.push(keyPath.slice())
-    } else if (key === 'fontSize' || key === 'lineHeight') {
+    } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
       percentKeyPaths.push(keyPath.slice())
     }
   }
 
-  // traverse calc & percent
-  traverseStyle(normalStyle, [percentVisitor, calcVisitor])
+  // traverse env & calc & percent
+  traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor])
 
   const percentConfig = {
     width,
@@ -345,6 +364,8 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     parentFontSize
   }
 
+  // apply env
+  transformEnv(normalStyle, envKeyPaths)
   // apply percent
   transformPercent(normalStyle, percentKeyPaths, percentConfig)
   // apply calc
@@ -353,7 +374,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       const resolved = resolvePercent(value, key, percentConfig)
       return typeof resolved === 'number' ? resolved : 0
     } else {
-      const formatted = formatValue(value)
+      const formatted = global.__formatValue(value)
       if (typeof formatted === 'number') {
         return formatted
       } else {
@@ -409,11 +430,9 @@ export function traverseStyle (styleObj: Record<string, any>, visitors: Array<(a
   traverse(styleObj)
 }
 
-export function setStyle (styleObj: Record<string, any>, keyPath: Array<string>, setter: (arg: VisitorArg) => void, needClone = false) {
+export function setStyle (styleObj: Record<string, any>, keyPath: Array<string>, setter: (arg: VisitorArg) => void) {
   let target = styleObj
-  const firstKey = keyPath[0]
   const lastKey = keyPath[keyPath.length - 1]
-  if (needClone) target[firstKey] = diffAndCloneA(target[firstKey]).clone
   for (let i = 0; i < keyPath.length - 1; i++) {
     target = target[keyPath[i]]
     if (!target) return
@@ -427,8 +446,8 @@ export function setStyle (styleObj: Record<string, any>, keyPath: Array<string>,
 }
 
 export function splitProps<T extends Record<string, any>> (props: T): {
-  textProps?: Partial<T>;
-  innerProps?: Partial<T>;
+  textProps?: Partial<T>
+  innerProps?: Partial<T>
 } {
   return groupBy(props, (key) => {
     if (TEXT_PROPS_REGEX.test(key)) {
@@ -437,8 +456,8 @@ export function splitProps<T extends Record<string, any>> (props: T): {
       return 'innerProps'
     }
   }) as {
-    textProps: Partial<T>;
-    innerProps: Partial<T>;
+    textProps: Partial<T>
+    innerProps: Partial<T>
   }
 }
 
@@ -450,7 +469,7 @@ interface LayoutConfig {
   onLayout?: (event?: LayoutChangeEvent) => void
   nodeRef: React.RefObject<any>
 }
-export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }:LayoutConfig) => {
+export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }: LayoutConfig) => {
   const layoutRef = useRef({})
   const hasLayoutRef = useRef(false)
   const layoutStyle: Record<string, any> = !hasLayoutRef.current && hasSelfPercent ? DEFAULT_UNLAY_STYLE : {}

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -9,6 +9,7 @@
   BScroll.use(PullDown)
 
   let mutationObserver = null
+  let resizeObserver = null
 
   export default {
     name: 'mpx-scroll-view',
@@ -357,11 +358,15 @@
         let minTop
         let maxBottom
         childrenArr.forEach(item => {
-          const temp = item.getBoundingClientRect()
-          minLeft = getMinLength(minLeft, temp.left)
-          minTop = getMinLength(minTop, temp.top)
-          maxRight = getMaxLength(maxRight, temp.right)
-          maxBottom = getMaxLength(maxBottom, temp.bottom)
+            const left = item.offsetLeft
+            const top = item.offsetTop
+            const width = item.offsetWidth
+            const height = item.offsetHeight
+    
+            minLeft = getMinLength(minLeft, left)
+            minTop = getMinLength(minTop, top)
+            maxRight = getMaxLength(maxRight, left + width)
+            maxBottom = getMaxLength(maxBottom, top + height)
         })
         const width = maxRight - minLeft || 0
         const height = maxBottom - minTop || 0
@@ -399,6 +404,17 @@
           const config = { attributes: true, childList: true, subtree: true }
           mutationObserver.observe(this.$refs.wrapper, config)
         }
+        if (typeof ResizeObserver !== 'undefined') {
+          let isFirstResize = true
+          resizeObserver = new ResizeObserver(() => {
+            if (isFirstResize) {
+              isFirstResize = false
+              return
+            }
+            this.debounceRefresh()
+          })
+          resizeObserver.observe(this.$refs.wrapper)
+        }
       },
        mutationObserverHandler (mutations) {
         let needRefresh = false
@@ -428,6 +444,10 @@
           mutationObserver.disconnect()
           mutationObserver = null
         }
+        if (resizeObserver) {
+          resizeObserver.disconnect()
+          resizeObserver = null
+        }
       }
     },
     render (createElement) {

package/lib/style-compiler/index.js

@@ -18,7 +18,8 @@ module.exports = function (css, map) {
   const cb = this.async()
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
-  const id = queryObj.moduleId || queryObj.mid || '_' + mpx.pathHash(resourcePath)
+  const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {}
+  const id = queryObj.moduleId || mpxStyleOptions.mid || '_' + mpx.pathHash(resourcePath)
   const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode
@@ -46,14 +47,14 @@ module.exports = function (css, map) {
       config.options
     )
     // ali平台下处理scoped和host选择器
-    if (mode === 'ali') {
-      if (queryObj.scoped) {
+    if (mode === 'ali' || mode === 'web') {
+      if (queryObj.scoped || mpxStyleOptions.scoped) {
         plugins.push(scopeId({ id }))
       }
       plugins.push(transSpecial({ id }))
     }
 
-    if (mode === 'web' || isReact(mode)) {
+    if (isReact(mode)) {
       plugins.push(transSpecial({ id }))
     }