@mpxjs/webpack-plugin 2.9.69-beta.4 → 2.9.69-beta.5

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

@@ -12,10 +12,10 @@ import useAnimationHooks from './useAnimationHooks'
 import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHoverStyle } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
 import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
-import { GestureDetector } from 'react-native-gesture-handler'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -552,7 +552,7 @@ function inheritStyle (innerStyle: ExtendedViewStyle = {}) {
       : undefined)
 }
 
-function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
+function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
   // 预处理数据
   const preImageInfo: PreImageInfo = preParseImage(imageStyle)
   // 预解析
@@ -653,11 +653,6 @@ interface WrapChildrenConfig {
 }
 
 function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
-  enableBackground = enableBackground || !!backgroundStyle
-  const enableBackgroundRef = useRef(enableBackground)
-  if (enableBackgroundRef.current !== enableBackground) {
-    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
-  }
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
@@ -666,14 +661,15 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
   })
 
   return [
-    enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    enableBackground ? useWrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
     children
   ]
 }
 
 const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(viewProps)
-  const {
+  let {
     style = {},
     'hover-style': hoverStyle,
     'hover-start-time': hoverStartTime = 50,
@@ -699,7 +695,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     : {}
 
-  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime })
+  const enableHover = !!hoverStyle
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime })
 
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
@@ -720,6 +717,12 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
+  enableBackground = enableBackground || !!backgroundStyle
+  const enableBackgroundRef = useRef(enableBackground)
+  if (enableBackgroundRef.current !== enableBackground) {
+    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
+  }
+
   const nodeRef = useRef(null)
   useNodesRef<View, _ViewProps>(props, ref, nodeRef, {
     style: normalStyle
@@ -757,7 +760,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const childNode = wrapWithChildren(props, {
     hasVarDec,
-    enableBackground,
+    enableBackground: enableBackgroundRef.current,
     textStyle,
     backgroundStyle,
     varContext: varContextRef.current,
@@ -770,8 +773,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
 
-  return enableHoverStyle
-    ? createElement(GestureDetector, { gesture }, BaseComponent)
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, BaseComponent)
     : BaseComponent
 })
 

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

@@ -1,5 +1,5 @@
-import { forwardRef, useRef, useContext, useMemo, useState, createElement, useCallback, useEffect } from 'react'
-import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils'
+import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react'
+import { warn, isFunction } from '@mpxjs/utils'
 import Portal from './mpx-portal'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
@@ -7,6 +7,7 @@ import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { getCurrentPage, extendObject } from './utils'
 import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent, WebViewSource } from 'react-native-webview/lib/WebViewTypes'
+import { useNavigation } from '@react-navigation/native'
 import { RouteContext } from './context'
 import { BackHandler, StyleSheet, View, Text, Platform } from 'react-native'
 
@@ -29,6 +30,7 @@ interface WebViewProps {
   binderror?: (event: CommonCallbackEvent) => void
   [x: string]: any
 }
+type Listener = (type: string, callback: (e: Event) => void) => () => void
 
 interface PayloadData {
   [x: string]: any
@@ -105,6 +107,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     bottom: 0 as number
   }
   const canGoBack = useRef<boolean>(false)
+  const isNavigateBack = useRef<boolean>(false)
 
   const onAndroidBackPress = useCallback(() => {
     if (canGoBack.current) {
@@ -115,44 +118,27 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }, [canGoBack])
 
   const beforeRemoveHandle = useCallback((e: Event) => {
-    if (canGoBack.current) {
+    if (canGoBack.current && !isNavigateBack.current) {
       webViewRef.current?.goBack()
       e.preventDefault()
     }
+    isNavigateBack.current = false
   }, [canGoBack])
 
-  const navigation = getFocusedNavigation()
-
-  // ios 16以下版本 的hash会被转义，因此对于iOS环境下在页面load之后再注入hash部分的逻辑
-  let [baseUrl, hashParams = ''] = src.split('#')
-  if (hashParams) hashParams = '#' + hashParams
-  const source = useMemo<WebViewSource>(() => {
-    if (Platform.OS === 'ios') {
-      return { uri: baseUrl };
-    }
-    return { uri: baseUrl + hashParams };
-  }, [baseUrl, hashParams])
-
-  const hashInjectedJavascript = useMemo(() => {
-    if (Platform.OS === 'ios' && hashParams) {
-      return `(function() {
-        try {
-          location.hash = '${hashParams}';
-        } catch(e) {
-        }
-      })()`;
-    }
-    return '';
-  }, [hashParams]);
-
-  navigation?.addListener('beforeRemove', beforeRemoveHandle)
+  const navigation = useNavigation()
 
   useEffect(() => {
     if (__mpx_mode__ === 'android') {
       BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress)
-      return () => {
+    }
+    const addListener: Listener = navigation?.addListener.bind(navigation)
+    const beforeRemoveSubscription = addListener?.('beforeRemove', beforeRemoveHandle)
+    return () => {
+      if (__mpx_mode__ === 'android') {
         BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress)
-        navigation?.removeListener('beforeRemove', beforeRemoveHandle)
+      }
+      if (isFunction(beforeRemoveSubscription)) {
+        beforeRemoveSubscription()
       }
     }
   }, [])
@@ -215,10 +201,10 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
           return _documentTitle
         }
       });
-      ${hashInjectedJavascript}
     }
     true;
   `
+
   const sendMessage = function (params: string) {
     return `
       window.mpxWebviewMessageCallback(${params})
@@ -274,6 +260,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         asyncCallback = navObj.navigateTo(...params)
         break
       case 'navigateBack':
+        isNavigateBack.current = true
         asyncCallback = navObj.navigateBack(...params)
         break
       case 'redirectTo':
@@ -343,7 +330,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             )
           : (<WebView
         style={defaultWebViewStyle}
-        source={source}
+        source={{ uri: src }}
         ref={webViewRef}
         javaScriptEnabled={true}
         onNavigationStateChange={_changeUrl}

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

@@ -55,9 +55,6 @@ export const createFaces = (
       for (let i = 0; i < index; i++) {
         offset += freeSpaces[i]
       }
-      if (index === 0) {
-        offset *= 0.6
-      }
       return offset
     }) as unknown as T
     return [screenHeights, offsets]
@@ -67,9 +64,7 @@ export const createFaces = (
     const map: Record<number, number> = {
       0: 0,
       1: 0.8,
-      2: 0.9 // 0.35
-      // 3: 0.45, // 0.45
-      // 4: 0.5 // 0.5
+      2: 0.9
     }
     return map[index] ?? Math.min(1, map[2] + index * 0.05)
   }

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

@@ -32,3 +32,7 @@ declare module '@mpxjs/utils' {
 declare let global: {
   __formatValue (value: string): string | number
 } & Record<string, any>
+
+declare module '@react-navigation/native' {
+  export function useNavigation (): Record<string, any>
+}

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

@@ -176,20 +176,23 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
   }
 
-  if (!enableStyleAnimation) return { enableStyleAnimation }
+  if (!enableAnimationRef.current) return { enableStyleAnimation: false }
 
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedStyleKeys = useSharedValue([] as (string|string[])[])
   // 记录动画key的style样式值 没有的话设置为false
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   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 不能在增加新的值，被冻结
   // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const shareValMap = useMemo(() => {
     return Object.keys(InitialValue).reduce((valMap, key) => {
       const defaultVal = getInitialVal(key, isTransform(key))
@@ -198,6 +201,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
   }, [])
   // ** 获取动画样式prop & 驱动动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     if (id === -1) return
     // 更新动画样式 key map
@@ -218,6 +222,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   //   })
   // }, [style])
   // ** 清空动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     return () => {
       Object.values(shareValMap).forEach((value) => {
@@ -250,14 +255,13 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       }
       // 添加每个key的多次step动画
       animatedKeys.forEach(key => {
+        const ruleV = isTransform(key) ? transform.get(key) : rules.get(key)
         // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-        const toVal = rules.get(key) !== undefined
-          ? rules.get(key)
-          : transform.get(key) !== undefined
-            ? transform.get(key)
-            : index > 0
-              ? lastValueMap[key]
-              : shareValMap[key].value
+        const toVal = ruleV !== undefined
+          ? ruleV
+          : index > 0
+            ? lastValueMap[key]
+            : shareValMap[key].value
         const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
         needSetCallback = false
         if (!sequence[key]) {
@@ -346,7 +350,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     }, {} as { [propName: string]: string | number })
   }
   // ** 生成动画样式
-
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animationStyle = useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
     return animatedStyleKeys.value.reduce((styles, key) => {
@@ -367,7 +371,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   })
 
   return {
-    enableStyleAnimation,
+    enableStyleAnimation: enableAnimationRef.current,
     animationStyle
   }
 }

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

@@ -680,3 +680,67 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
     enableHoverStyle
   }
 }
+
+export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+  const enableHoverRef = useRef(enableHover)
+  if (enableHoverRef.current !== enableHover) {
+    error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
+  }
+
+  if (!enableHoverRef.current) return { isHover: false }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gestureRef = useContext(ScrollViewContext).gestureRef
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [isHover, setIsHover] = useState(false)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
+
+  const setStartTimer = () => {
+    if (disabled) return
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    if (disabled) return
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(false)
+    }, +hoverStayTime)
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gesture = useMemo(() => {
+    return Gesture.Pan()
+      .onTouchesDown(() => {
+        'worklet'
+        runOnJS(setStartTimer)()
+      })
+      .onTouchesUp(() => {
+        'worklet'
+        runOnJS(setStayTimer)()
+      })
+  }, [])
+
+  if (gestureRef) {
+    gesture.simultaneousWithExternalGesture(gestureRef)
+  }
+
+  return {
+    isHover,
+    gesture
+  }
+}

package/lib/wxss/loader.js

@@ -32,6 +32,13 @@ const {
 } = require('./utils')
 const createHelpers = require('../helpers')
 
+const RN_PRESET_OPTIMISATION = {
+  reduceInitial: false,
+  normalizeWhitespace: false,
+  minifyFontValues: false,
+  convertValues: false
+}
+
 module.exports = async function loader (content, map, meta) {
   const rawOptions = this.getOptions(schema)
   const plugins = []
@@ -41,6 +48,7 @@ module.exports = async function loader (content, map, meta) {
   const externals = mpx.externals
   const root = mpx.projectRoot
   const sourceMap = mpx.cssSourceMap || false
+  const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
 
   let options
 
@@ -152,12 +160,17 @@ module.exports = async function loader (content, map, meta) {
   if (this.minimize) {
     const cssnano = require('cssnano')
     const minimizeOptions = rawOptions.minimize || {}
+    const presetOptimisation = Object.assign(
+      {},
+      isRN ? RN_PRESET_OPTIMISATION : {},
+      minimizeOptions.optimisation
+    )
     let cssnanoConfig = {
-      preset: ['cssnano-preset-default', minimizeOptions.optimisation || {}]
+      preset: ['cssnano-preset-default', presetOptimisation]
     }
     if (minimizeOptions.advanced) {
       cssnanoConfig = {
-        preset: ['cssnano-preset-advanced', minimizeOptions.optimisation || {}]
+        preset: ['cssnano-preset-advanced', presetOptimisation]
       }
     }
     plugins.push(cssnano(cssnanoConfig))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.69-beta.4",
+  "version": "2.9.69-beta.5",
   "description": "mpx compile core",
   "keywords": [
     "mpx"