@mpxjs/webpack-plugin 2.9.64 → 2.9.66

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

@@ -1,8 +1,10 @@
-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 { useEffect, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+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'
+import type { ExtendedFunctionComponent } from './types/common'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -14,19 +16,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)
@@ -88,15 +97,16 @@ export const getRestProps = (transferProps: any = {}, originProps: any = {}, del
 
 export function isText (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
-    const displayName = (ele.type as FunctionComponent)?.displayName
-    return displayName === 'mpx-text' || displayName === 'Text'
+    const displayName = (ele.type as ExtendedFunctionComponent)?.displayName
+    const isCustomText = (ele.type as ExtendedFunctionComponent)?.isCustomText
+    return displayName === 'mpx-text' || displayName === 'Text' || !!isCustomText
   }
   return false
 }
 
 export function isEmbedded (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
-    const displayName = (ele.type as FunctionComponent)?.displayName || ''
+    const displayName = (ele.type as ExtendedFunctionComponent)?.displayName || ''
     return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName)
   }
   return false
@@ -122,9 +132,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 +145,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 +167,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 +223,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 +238,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 +270,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 +292,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 +312,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       varKeyPaths.push(keyPath.slice())
     }
   }
+
   // traverse var
   traverseStyle(styleObj, [varVisitor])
   hasVarDec = hasVarDec || !!externalVarContext
@@ -318,6 +333,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 +349,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 +366,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 +376,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 +432,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 +448,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 +458,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 +471,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 }))
     }