@mpxjs/webpack-plugin 2.9.69-beta.2 → 2.9.69-beta.3

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

@@ -1,10 +1,8 @@
-import { View } from 'react-native'
-import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
-import { ReactNode, forwardRef, useRef, useContext } from 'react'
+import { View, LayoutChangeEvent } from 'react-native'
+import { ReactNode, forwardRef, useRef } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
-import { SwiperContext } from './context'
 
 interface SwiperItemProps {
   'item-id'?: string;
@@ -16,29 +14,15 @@ interface SwiperItemProps {
   'parent-height'?: number;
   children?: ReactNode;
   style?: Object;
-  customStyle: [];
-  itemIndex: number;
-}
-
-interface ContextType {
-  offset: SharedValue<number>;
-  step: SharedValue<number>;
-  scale: boolean;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
   const {
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
-    style,
-    customStyle,
-    itemIndex
+    style
   } = props
 
-  const contextValue = useContext(SwiperContext) as ContextType
-  const offset = contextValue.offset || 0
-  const step = contextValue.step || 0
-  const scale = contextValue.scale || false
   const { textProps } = splitProps(props)
   const nodeRef = useRef(null)
 
@@ -63,31 +47,19 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
 
   const innerProps = useInnerProps(props, {
+    style: { ...innerStyle, ...layoutStyle },
     ref: nodeRef,
     ...layoutProps
   }, [
     'children',
-    'enable-offset',
-    'style'
+    'enable-offset'
   ], { layoutRef })
 
-  const itemAnimatedStyle = useAnimatedStyle(() => {
-    if (!step.value) return {}
-    const inputRange = [step.value, 0]
-    const outputRange = [0.7, 1]
-    return {
-      transform: [{
-        scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
-      }]
-    }
-  })
-  const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle)
   return (
-    <Animated.View
-      {...innerProps}
-      style={mergeStyle}
-      data-itemId={props['item-id']}>
-      {
+    <View
+      data-itemId={props['item-id']}
+      {...innerProps}>
+       {
         wrapChildren(
           props,
           {
@@ -98,7 +70,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
           }
         )
       }
-    </Animated.View>
+    </View>
   )
 })
 

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

@@ -12,10 +12,9 @@ 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 } from './utils'
 import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
-import { GestureDetector } from 'react-native-gesture-handler'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -684,6 +683,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     animation
   } = props
 
+  const [isHover, setIsHover] = useState(false)
+
   // 默认样式
   const defaultStyle: ExtendedViewStyle = style.display === 'flex'
     ? {
@@ -694,8 +695,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     : {}
 
-  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime })
-
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
@@ -726,6 +725,45 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     style: normalStyle
   })
 
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
+
+  const setStartTimer = () => {
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(false)
+    }, +hoverStayTime)
+  }
+
+  function onTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
+    const { bindtouchstart } = props
+    bindtouchstart && bindtouchstart(e)
+    setStartTimer()
+  }
+
+  function onTouchEnd (e: NativeSyntheticEvent<TouchEvent>) {
+    const { bindtouchend } = props
+    bindtouchend && bindtouchend(e)
+    setStayTimer()
+  }
+
   const {
     layoutRef,
     layoutStyle,
@@ -751,7 +789,13 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       ref: nodeRef,
       style: finalStyle
     },
-    layoutProps
+    layoutProps,
+    hoverStyle
+      ? {
+          bindtouchstart: onTouchStart,
+          bindtouchend: onTouchEnd
+        }
+      : {}
     ), [
       'hover-start-time',
       'hover-stay-time',
@@ -772,13 +816,9 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     enableFastImage
   })
 
-  const BaseComponent = enableAnimation
-    ? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode)
+  return enableAnimation
+    ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
-
-  return enableHoverStyle
-    ? createElement(GestureDetector, { gesture }, BaseComponent)
-    : BaseComponent
 })
 
 _View.displayName = 'MpxView'

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

@@ -1,4 +1,4 @@
-import { forwardRef, JSX, useRef, useContext, useMemo, createElement, useCallback, useEffect } from 'react'
+import { forwardRef, JSX, useRef, useContext, useMemo, createElement } from 'react'
 import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
@@ -6,9 +6,8 @@ import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab }
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { getCurrentPage, extendObject } from './utils'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent } from 'react-native-webview/lib/WebViewTypes'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes'
 import { RouteContext } from './context'
-import { BackHandler } from 'react-native'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -57,35 +56,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     top: 0 as number,
     bottom: 0 as number
   }
-  const canGoBack = useRef<boolean>(false)
-
-  const onAndroidBackPress = useCallback(() => {
-    if (canGoBack.current) {
-      webViewRef.current?.goBack()
-      return true
-    }
-    return false
-  }, [canGoBack])
-
-  const beforeRemoveHandle = useCallback((e: Event) => {
-    if (canGoBack.current) {
-      webViewRef.current?.goBack()
-      e.preventDefault()
-    }
-  }, [canGoBack])
-
-  const navigation = getFocusedNavigation()
-
-  navigation?.addListener('beforeRemove', beforeRemoveHandle)
-
-  useEffect(() => {
-    if (__mpx_mode__ === 'android') {
-      BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress)
-      return () => {
-        BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress)
-      }
-    }
-  }, [])
 
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -103,7 +73,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         src: res.nativeEvent?.url
       }
     }
-    bindload?.(result)
+    bindload(result)
   }
   const _error = function (res: WebViewErrorEvent) {
     const result = {
@@ -113,7 +83,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         src: ''
       }
     }
-    binderror?.(result)
+    binderror(result)
   }
   const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
@@ -139,26 +109,12 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
       });
     }
-    true;
   `
-  const sendMessage = function (params: string) {
-    return `
-      window.mpxWebviewMessageCallback(${params})
-      true;
-    `
-  }
   const _changeUrl = function (navState: WebViewNavigation) {
     if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
-      canGoBack.current = navState.canGoBack
       currentPage.__webViewUrl = navState.url
     }
   }
-
-  const _onLoadProgress = function (event: WebViewProgressEvent) {
-    if (__mpx_mode__ === 'android') {
-      canGoBack.current = event.nativeEvent.canGoBack
-    }
-  }
   const _message = function (res: WebViewMessageEvent) {
     let data: MessageData = {}
     let asyncCallback
@@ -178,6 +134,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         { // case下不允许直接声明，包个块解决该问题
           const title = postData._documentTitle
           if (title) {
+            const navigation = getFocusedNavigation()
             navigation && navigation.setOptions({ title })
           }
         }
@@ -224,21 +181,21 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
     asyncCallback && asyncCallback.then((res: any) => {
       if (webViewRef.current?.postMessage) {
-        const result = JSON.stringify({
+        const test = JSON.stringify({
           type,
           callbackId: data.callbackId,
           result: res
         })
-        webViewRef.current.injectJavaScript(sendMessage(result))
+        webViewRef.current.postMessage(test)
       }
     }).catch((error: any) => {
       if (webViewRef.current?.postMessage) {
-        const result = JSON.stringify({
+        const test = JSON.stringify({
           type,
           callbackId: data.callbackId,
           error
         })
-        webViewRef.current.injectJavaScript(sendMessage(result))
+        webViewRef.current.postMessage(test)
       }
     })
   }
@@ -254,17 +211,16 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       onError: _error
     })
   }
+  extendObject(events, {
+    onMessage: _message
+  })
 
   return createElement(Portal, null, createElement(WebView, extendObject({
     style: defaultWebViewStyle,
     source: { uri: src },
     ref: webViewRef,
     javaScriptEnabled: true,
-    onNavigationStateChange: _changeUrl,
-    onMessage: _message,
-    injectedJavaScript: injectedJavaScript,
-    onLoadProgress: _onLoadProgress,
-    allowsBackForwardNavigationGestures: true
+    onNavigationStateChange: _changeUrl
   }, events)))
 })
 

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

@@ -8,7 +8,6 @@ export type Faces = {
   deg: number
   offsetY: number
   opacity: number
-  scale: number
   screenHeight: number
 }
 
@@ -34,7 +33,7 @@ export const createFaces = (
     const maxStep = Math.trunc((visibleCount + 2) / 2) // + 2 because there are 2 more faces at 90 degrees
     const stepDegree = 90 / maxStep
 
-    const result: number[] = []
+    const result = []
     for (let i = 1; i <= maxStep; i++) {
       result.push(i * stepDegree)
     }
@@ -55,9 +54,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]
@@ -66,19 +62,17 @@ export const createFaces = (
   const getOpacity = (index: number) => {
     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
+      1: 0.2,
+      2: 0.35,
+      3: 0.45,
+      4: 0.5
     }
-    return map[index] ?? Math.min(1, map[2] + index * 0.05)
+    return map[index] ?? Math.min(1, map[4] + index * 0.5)
   }
 
   const degrees = getDegreesRelativeCenter()
   const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
 
-  const scales = [1, 0.925, 0.8]
-
   return [
     // top items
     ...degrees
@@ -88,14 +82,13 @@ export const createFaces = (
           deg: degree,
           opacity: getOpacity(degrees.length - 1 - index),
           offsetY: -1 * offsets[index],
-          scale: scales[index],
           screenHeight: screenHeight[index]
         }
       })
       .reverse(),
 
     // center item
-    { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
+    { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
 
     // bottom items
     ...degrees.map<Faces>((degree, index) => {
@@ -104,7 +97,6 @@ export const createFaces = (
         deg: -1 * degree,
         opacity: getOpacity(degrees.length - 1 - index),
         offsetY: offsets[index],
-        scale: scales[index],
         screenHeight: screenHeight[index]
       }
     })

package/lib/runtime/components/react/{pickerViewOverlay.tsx → pickerOverlay.tsx}

@@ -7,7 +7,7 @@ type OverlayProps = {
   overlayContainerStyle?: StyleProp<ViewStyle>
 }
 
-const _PickerViewOverlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
   return (
     <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
       <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
@@ -19,8 +19,7 @@ const styles = StyleSheet.create({
   overlayContainer: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 200
+    alignItems: 'center'
   },
   selection: {
     borderTopWidth: 1,
@@ -30,5 +29,4 @@ const styles = StyleSheet.create({
   }
 })
 
-_PickerViewOverlay.displayName = 'MpxPickerViewOverlay'
-export default _PickerViewOverlay
+export default React.memo(Overlay)

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

@@ -1,4 +1,3 @@
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios'
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
   export function isFunction (fn: unknown): boolean
@@ -21,8 +20,7 @@ declare module '@mpxjs/utils' {
       left: number
       right: number
     },
-    setOptions: (params: Record<string, any>) => void,
-    addListener: (eventName: string, callback: (e: Event) => void) => void
+    setOptions: (params: Record<string, any>) => void
   } | undefined
 }
 

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

@@ -110,7 +110,7 @@ const parseTransform = (transformStr: string) => {
   const values = parseValues(transformStr)
   const transform: {[propName: string]: string|number|number[]}[] = []
   values.forEach(item => {
-    const match = item.match(/([/\w]+)\((.+)\)/)
+    const match = item.match(/([/\w]+)\(([^)]+)\)/)
     if (match && match.length >= 3) {
       let key = match[1]
       const val = match[2]

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

@@ -1,13 +1,11 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
-import { VarContext, ScrollViewContext } from './context'
+import { VarContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
-import { runOnJS } from 'react-native-reanimated'
-import { Gesture } from 'react-native-gesture-handler'
+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*$/
@@ -20,9 +18,6 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
-export const isIOS = Platform.OS === 'ios'
-export const isAndroid = Platform.OS === 'android'
-
 const varDecRegExp = /^--.*/
 const varUseRegExp = /var\(/
 const calcUseRegExp = /calc\(/
@@ -502,7 +497,6 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       props.onLayout && props.onLayout(e)
     }
   }
-
   return {
     layoutRef,
     layoutStyle,
@@ -540,14 +534,13 @@ export const debounce = <T extends AnyFunc> (
 ): ((...args: Parameters<T>) => void) & { clear: () => void } => {
   let timer: any
   const wrapper = (...args: ReadonlyArray<any>) => {
-    timer && clearTimeout(timer)
+    clearTimeout(timer)
     timer = setTimeout(() => {
       func(...args)
     }, delay)
   }
   wrapper.clear = () => {
-    timer && clearTimeout(timer)
-    timer = null
+    clearTimeout(timer)
   }
   return wrapper
 }
@@ -617,66 +610,3 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
     return acc
   }, {})
 }
-
-export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disabled } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
-  const enableHoverStyle = !!hoverStyle
-  const enableHoverStyleRef = useRef(enableHoverStyle)
-  if (enableHoverStyleRef.current !== enableHoverStyle) {
-    throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
-  }
-
-  if (!enableHoverStyle) return { enableHoverStyle }
-
-  const gestureRef = useContext(ScrollViewContext).gestureRef
-  const [isHover, setIsHover] = useState(false)
-  const dataRef = useRef<{
-    startTimer?: ReturnType<typeof setTimeout>
-    stayTimer?: ReturnType<typeof setTimeout>
-  }>({})
-
-  useEffect(() => {
-    return () => {
-      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    }
-  }, [])
-
-  const setStartTimer = () => {
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.startTimer = setTimeout(() => {
-      setIsHover(true)
-    }, +hoverStartTime)
-  }
-
-  const setStayTimer = () => {
-    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.stayTimer = setTimeout(() => {
-      setIsHover(false)
-    }, +hoverStayTime)
-  }
-
-  const gesture = useMemo(() => {
-    return Gesture.Pan()
-      .onTouchesDown(() => {
-        'worklet'
-        if (disabled) return
-        runOnJS(setStartTimer)()
-      })
-      .onTouchesUp(() => {
-        'worklet'
-        if (disabled) return
-        runOnJS(setStayTimer)()
-      })
-  }, [disabled])
-
-  if (gestureRef) {
-    gesture.simultaneousWithExternalGesture(gestureRef)
-  }
-
-  return {
-    isHover,
-    gesture,
-    enableHoverStyle
-  }
-}

package/lib/style-compiler/index.js

@@ -4,6 +4,7 @@ const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
+const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
 const cssArrayList = require('./plugins/css-array-list')
@@ -57,9 +58,9 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
-    // plugins.push(pluginCondStrip({
-    //   defs
-    // }))
+    plugins.push(pluginCondStrip({
+      defs
+    }))
 
     for (const item of transRpxRules) {
       const {

package/lib/template-compiler/compiler.js

@@ -117,6 +117,7 @@ let hasOptionalChaining = false
 let processingTemplate = false
 const rulesResultMap = new Map()
 let usingComponents = []
+let usingComponentsInfo = {}
 
 function updateForScopesMap () {
   forScopesMap = {}
@@ -636,6 +637,7 @@ function parse (template, options) {
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
   usingComponents = Object.keys(options.usingComponentsInfo)
+  usingComponentsInfo = options.usingComponentsInfo
 
   const _warn = content => {
     const currentElementRuleResult = rulesResultMap.get(currentEl) || rulesResultMap.set(currentEl, {
@@ -1207,7 +1209,7 @@ function processEventReact (el) {
   for (const type in eventConfigMap) {
     const { configs } = eventConfigMap[type]
     if (!configs.length) continue
-    const needBind = configs.length > 1 || configs[0].hasArgs || tagRE.test(configs[0].value)
+    const needBind = configs.length > 1 || configs[0].hasArgs
     if (needBind) {
       configs.forEach(({ name }) => {
         if (name) {
@@ -2185,16 +2187,20 @@ function isRealNode (el) {
   return !virtualNodeTagMap[el.tag]
 }
 
-function isComponentNode (el, options) {
+function isComponentNode (el) {
   return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
 }
 
-function isReactComponent (el, options) {
-  return !isComponentNode(el, options) && isRealNode(el) && !el.isBuiltIn
+function getComponentInfo (el) {
+  return usingComponentsInfo[el.tag] || {}
+}
+
+function isReactComponent (el) {
+  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn
 }
 
 function processExternalClasses (el, options) {
-  const isComponent = isComponentNode(el, options)
+  const isComponent = isComponentNode(el)
   const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class']
 
   classLikeAttrNames.forEach((classLikeAttrName) => {
@@ -2308,8 +2314,7 @@ function postProcessAliComponentRootView (el, options, meta) {
     { condition: /^style$/, action: 'move' },
     { condition: /^slot$/, action: 'move' }
   ]
-  const tagName = el.tag
-  const mid = options.usingComponentsInfo[tagName]?.mid || moduleId
+  const mid = getComponentInfo(el).mid
   const processAppendAttrsRules = [
     { name: 'class', value: `${MPX_ROOT_VIEW} host-${mid}` }
   ]
@@ -2416,7 +2421,7 @@ function processShow (el, options, root) {
     show = has ? `{{${parseMustacheWithContext(show).result}&&mpxShow}}` : '{{mpxShow}}'
   }
   if (show === undefined) return
-  if (isComponentNode(el, options)) {
+  if (isComponentNode(el) && getComponentInfo(el).hasVirtualHost) {
     if (show === '') {
       show = '{{false}}'
     }
@@ -2715,7 +2720,7 @@ function closeElement (el, options, meta) {
         }
       })
     }
-    if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
+    if (isComponentNode(el) && !hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
       postProcessAliComponentRootView(el, options, meta)
     }
   }