@mpxjs/webpack-plugin 2.9.66 → 2.9.69

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

@@ -0,0 +1,104 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+
+export type Faces = {
+  index: number
+  deg: number
+  offsetY: number
+  opacity: number
+  screenHeight: number
+}
+
+export const degToRad = (deg: number) => (Math.PI * deg) / 180
+
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree: number, itemHeight: number) =>
+  itemHeight * Math.cos(degToRad(degree))
+
+export const calcPickerHeight = (faces: Faces[], itemHeight: number) => {
+  if (faces.length === 7) {
+    return itemHeight * 5
+  }
+  return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0)
+}
+
+export const createFaces = (
+  itemHeight: number,
+  visibleCount: number
+): Faces[] => {
+  // e.g [30, 60, 90]
+  const getDegreesRelativeCenter = () => {
+    const maxStep = Math.trunc((visibleCount + 2) / 2) // + 2 because there are 2 more faces at 90 degrees
+    const stepDegree = 90 / maxStep
+
+    const result = []
+    for (let i = 1; i <= maxStep; i++) {
+      result.push(i * stepDegree)
+    }
+    return result
+  }
+
+  const getScreenHeightsAndOffsets = <T extends readonly number[]>(
+    degrees: T
+  ): [T, T] => {
+    const screenHeights = degrees.map((deg) =>
+      calcHeight(deg, itemHeight)
+    ) as unknown as T
+    const freeSpaces = screenHeights.map(
+      (screenHeight) => itemHeight - screenHeight
+    )
+    const offsets = freeSpaces.map((freeSpace, index) => {
+      let offset = freeSpace / 2
+      for (let i = 0; i < index; i++) {
+        offset += freeSpaces[i]
+      }
+      return offset
+    }) as unknown as T
+    return [screenHeights, offsets]
+  }
+
+  const getOpacity = (index: number) => {
+    const map: Record<number, number> = {
+      0: 0,
+      1: 0.2,
+      2: 0.35,
+      3: 0.45,
+      4: 0.5
+    }
+    return map[index] ?? Math.min(1, map[4] + index * 0.5)
+  }
+
+  const degrees = getDegreesRelativeCenter()
+  const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
+
+  return [
+    // top items
+    ...degrees
+      .map<Faces>((degree, index) => {
+        return {
+          index: -1 * (index + 1),
+          deg: degree,
+          opacity: getOpacity(degrees.length - 1 - index),
+          offsetY: -1 * offsets[index],
+          screenHeight: screenHeight[index]
+        }
+      })
+      .reverse(),
+
+    // center item
+    { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+
+    // bottom items
+    ...degrees.map<Faces>((degree, index) => {
+      return {
+        index: index + 1,
+        deg: -1 * degree,
+        opacity: getOpacity(degrees.length - 1 - index),
+        offsetY: offsets[index],
+        screenHeight: screenHeight[index]
+      }
+    })
+  ]
+}

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+type OverlayProps = {
+  itemHeight: number
+  overlayItemStyle?: StyleProp<ViewStyle>
+  overlayContainerStyle?: StyleProp<ViewStyle>
+}
+
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+  return (
+    <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selection: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.05)',
+    alignSelf: 'stretch'
+  }
+})
+
+export default React.memo(Overlay)

package/lib/runtime/components/react/types/common.ts

@@ -16,3 +16,5 @@ export type ExtendedViewStyle = ViewStyle & {
 export type ExtendedFunctionComponent = FunctionComponent & {
   isCustomText?: boolean
 }
+
+export type AnyFunc = (...args: ReadonlyArray<any>) => any

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

@@ -16,6 +16,7 @@ declare module 'react-native-svg/css' {
 
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
+  export function isFunction (fn: unknown): boolean
   export function hasOwn (obj: Object, key: string): boolean
   export function noop (...arg: any): void
   export function diffAndCloneA<A, B> (a: A, b?: B): {
@@ -26,6 +27,7 @@ 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 collectDataset (props: Record<string, any>, needParse?: boolean): Record<string, any>
   export function getFocusedNavigation (): {
     insets: {
       top: number

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

@@ -16,9 +16,6 @@ import {
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
-// type TransformKey = 'translateX' | 'translateY' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scaleX' | 'scaleY' | 'skewX' | 'skewY'
-// type NormalKey = 'opacity' | 'backgroundColor' | 'width' | 'height' | 'top' | 'right' | 'bottom' | 'left' | 'transformOrigin'
-// type RuleKey = TransformKey | NormalKey
 type AnimatedOption = {
   duration: number
   delay: number
@@ -84,20 +81,79 @@ const InitialValue: ExtendedViewStyle = Object.assign({
   transformOrigin: ['50%', '50%', 0]
 }, TransformInitial)
 const TransformOrigin = 'transformOrigin'
-// deg 角度
-// const isDeg = (key: RuleKey) => ['rotateX', 'rotateY', 'rotateZ', 'rotate', 'skewX', 'skewY'].includes(key)
-// 背景色
-// const isBg = (key: RuleKey) => key === 'backgroundColor'
 // transform
 const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+const parseTransform = (transformStr: string) => {
+  const values = transformStr.trim().split(/\s+/)
+  const transform: {[propName: string]: string|number|number[]}[] = []
+  values.forEach(item => {
+    const match = item.match(/([/\w]+)\(([^)]+)\)/)
+    if (match && match.length >= 3) {
+      let key = match[1]
+      const val = match[2]
+      switch (key) {
+        case 'translateX':
+        case 'translateY':
+        case 'scaleX':
+        case 'scaleY':
+        case 'rotateX':
+        case 'rotateY':
+        case 'rotateZ':
+        case 'rotate':
+        case 'skewX':
+        case 'skewY':
+        case 'perspective':
+          // 单个值处理
+          transform.push({ [key]: global.__formatValue(val) })
+          break
+        case 'matrix':
+        case 'matrix3d':
+          transform.push({ [key]: val.split(',').map(val => +val) })
+          break
+        case 'translate':
+        case 'scale':
+        case 'skew':
+        case 'rotate3d': // x y z angle
+        case 'translate3d': // x y 支持 z不支持
+        case 'scale3d': // x y 支持 z不支持
+        {
+          // 2 个以上的值处理
+          key = key.replace('3d', '')
+          const vals = val.split(',', key === 'rotate' ? 4 : 3)
+          // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+          if (vals.length === 1 && key === 'scale') {
+            vals.push(vals[0])
+          }
+          const xyz = ['X', 'Y', 'Z']
+          transform.push(...vals.map((v, index) => {
+            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) }
+          }))
+          break
+        }
+      }
+    }
+  })
+  return transform
+}
+// format style
+const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
+  if (!style.transform || Array.isArray(style.transform)) return style
+  return Object.assign({}, style, {
+    transform: parseTransform(style.transform)
+  })
+}
 
 export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style: originalStyle = {}, animation } = props
+  const { style = {}, animation } = props
+  const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
   const animatedStyleKeys = useSharedValue([] as (string|string[])[])
-  const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: Boolean})
+  // 记录动画key的style样式值 没有的话设置为false
+  const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
+  // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
   // ** 全量 style prop sharedValue
   // 不能做增量的原因：
   // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -119,6 +175,16 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     // 驱动动画
     createAnimation(keys)
   }, [id])
+  // 同步style更新
+  // useEffect(() => {
+  //   Object.keys(animatedKeys.current).forEach(key => {
+  //     const originVal = getOriginalStyleVal(key, isTransform(key))
+  //     if (originVal && animatedKeys.current[key] !== originVal) {
+  //       animatedKeys.current[key] = originVal
+  //       shareValMap[key].value = originVal
+  //     }
+  //   })
+  // }, [style])
   // ** 清空动画
   useEffect(() => {
     return () => {
@@ -152,9 +218,9 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       }
       // 添加每个key的多次step动画
       animatedKeys.forEach(key => {
-        let toVal = (rules.get(key) || transform.get(key)) as number|string
+        let toVal = (rules.get(key) || transform.get(key))
         // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-        if (!toVal) {
+        if (toVal === undefined) {
           toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value
         }
         const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
@@ -181,9 +247,8 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       : withTiming(value, { duration, easing })
     return delay ? withDelay(delay, animation) : animation
   }
-  // 获取初始值（prop style or 默认值）
   function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
-    if (isTransform && originalStyle.transform?.length) {
+    if (isTransform && Array.isArray(originalStyle.transform)) {
       let initialVal = InitialValue[key]
       // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
       originalStyle.transform.forEach(item => {
@@ -193,12 +258,31 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }
     return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key]
   }
+  // 从 prop style 中获取样式初始值 没有为undefined
+  // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
+  //   if (isTransform && Array.isArray(originalStyle.transform)) {
+  //     let initialVal = undefined // InitialValue[key]
+  //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+  //     originalStyle.transform.forEach(item => {
+  //       if (item[key] !== undefined) initialVal = item[key]
+  //     })
+  //     return initialVal
+  //   }
+  //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
+  // }
+  // 获取动画shareVal初始值（prop style or 默认值）
+  // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
+  //   const originalVal = getOriginalStyleVal(key, isTransform)
+  //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
+  // }
   // 循环 animation actions 获取所有有动画的 style prop name
   function getAnimatedStyleKeys () {
     return (animation?.actions || []).reduce((keyMap, action) => {
       const { rules, transform } = action
       const ruleArr = [...rules.keys(), ...transform.keys()]
       ruleArr.forEach(key => {
+        // const originalVal = getOriginalStyleVal(key, isTransform(key))
+        // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
         if (!keyMap[key]) keyMap[key] = true
       })
       return keyMap

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

@@ -1,4 +1,5 @@
 import { useRef, useImperativeHandle, RefObject, ForwardedRef } from 'react'
+import { useAnimatedRef } from 'react-native-reanimated'
 
 type Obj = Record<string, any>
 

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

@@ -1,10 +1,11 @@
-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 { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
+import { isObject, isFunction, 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'
+import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
+import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -12,7 +13,7 @@ export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/
 export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/
 export const DEFAULT_FONT_SIZE = 16
-export const DEFAULT_UNLAY_STYLE = {
+export const HIDDEN_STYLE = {
   opacity: 0
 }
 
@@ -78,7 +79,7 @@ export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
     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() })
+    return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) })
   }, {})
 }
 
@@ -99,7 +100,7 @@ export function isText (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
     const displayName = (ele.type as ExtendedFunctionComponent)?.displayName
     const isCustomText = (ele.type as ExtendedFunctionComponent)?.isCustomText
-    return displayName === 'mpx-text' || displayName === 'Text' || !!isCustomText
+    return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText
   }
   return false
 }
@@ -474,7 +475,7 @@ interface 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 : {}
+  const layoutStyle: Record<string, any> = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
   const layoutProps: Record<string, any> = {}
   const enableOffset = props['enable-offset']
   if (hasSelfPercent || onLayout || enableOffset) {
@@ -524,3 +525,88 @@ export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varC
   }
   return children
 }
+
+export const debounce = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  let timer: any
+  const wrapper = (...args: ReadonlyArray<any>) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+  wrapper.clear = () => {
+    clearTimeout(timer)
+  }
+  return wrapper
+}
+
+export const useDebounceCallback = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  const debounced = useMemo(() => debounce(func, delay), [func])
+  return debounced
+}
+
+export const useStableCallback = <T extends AnyFunc | null | undefined> (
+  callback: T
+): T extends AnyFunc ? T : () => void => {
+  const ref = useRef<T>(callback)
+  ref.current = callback
+  return useCallback<any>(
+    (...args: any[]) => ref.current?.(...args),
+    []
+  )
+}
+
+export const usePrevious = <T, > (value: T): T | undefined => {
+  const ref = useRef<T | undefined>(undefined)
+  const prev = ref.current
+  ref.current = value
+  return prev
+}
+
+export interface GestureHandler {
+  nodeRefs?: Array<{ getNodeInstance: () => { nodeRef: unknown } }>
+  current?: unknown
+}
+
+export function flatGesture (gestures: Array<GestureHandler> = []) {
+  return (gestures && gestures.flatMap((gesture: GestureHandler) => {
+    if (gesture && gesture.nodeRefs) {
+      return gesture.nodeRefs
+        .map((item: { getNodeInstance: () => any }) => item.getNodeInstance()?.instance?.gestureRef || {})
+    }
+    return gesture?.current ? [gesture] : []
+  })) || []
+}
+
+export function extendObject (...args: Record<string, any>[]) {
+  return Object.assign({}, ...args)
+}
+
+export function getCurrentPage (pageId: number | null) {
+  if (!global.getCurrentPages) return
+  const pages = global.getCurrentPages()
+  return pages.find((page: any) => isFunction(page.getPageId) && page.getPageId() === pageId)
+}
+
+export function renderImage (
+  imageProps: ImageProps | FastImageProps,
+  enableFastImage = false
+) {
+  const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? FastImage : Image
+  return <Component {...imageProps} />
+}
+
+export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string) {
+  return pickedKeys.reduce<Record<string, any>>((acc, key) => {
+    if (key in styleObj) {
+      acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key]
+    }
+    return acc
+  }, {})
+}

package/lib/runtime/optionProcessorReact.js

@@ -4,18 +4,3 @@ export function getComponent (component, extendOptions) {
   if (extendOptions) Object.assign(component, extendOptions)
   return component
 }
-
-export function createApp ({
-  App,
-  pagesMap,
-  firstPage,
-  createElement,
-  NavigationContainer,
-  createNativeStackNavigator
-}) {
-  const Stack = createNativeStackNavigator()
-  const pages = []
-  return () => {
-    return createElement(NavigationContainer, null, createElement(Stack.Navigator, null, ...pages))
-  }
-}

package/lib/runtime/swanHelper.wxs

@@ -23,7 +23,7 @@ module.exports = {
       }
       return list
     }
-    if ( typeof value === 'string') {
+    if (typeof value === 'string') {
       return value.split('')
     }
     return value

package/lib/style-compiler/index.js

@@ -19,7 +19,7 @@ module.exports = function (css, map) {
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
   const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {}
-  const id = queryObj.moduleId || mpxStyleOptions.mid || '_' + mpx.pathHash(resourcePath)
+  const id = queryObj.moduleId || mpxStyleOptions.mid || mpx.getModuleId(resourcePath)
   const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode

package/lib/style-compiler/plugins/scope-id.js

@@ -20,6 +20,7 @@ module.exports = ({ id }) => {
           }
           return
         }
+        if (node.selector === ':host') return
         node.selector = selectorParser(selectors => {
           selectors.each(selector => {
             let node = null