@mpxjs/webpack-plugin 2.9.72 → 2.10.0

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

@@ -1,13 +1,14 @@
-import { forwardRef, JSX, useRef, useContext, useMemo, createElement } from 'react'
-import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils'
-import { Portal } from '@ant-design/react-native'
+import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react'
+import { warn, isFunction } from '@mpxjs/utils'
+import Portal from './mpx-portal/index'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { getCurrentPage, extendObject } from './utils'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes'
+import { getCurrentPage, useNavigation } from './utils'
+import { WebViewHttpErrorEvent, WebViewEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent } from 'react-native-webview/lib/WebViewTypes'
 import { RouteContext } from './context'
+import { StyleSheet, View, Text } from 'react-native'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -28,6 +29,7 @@ interface WebViewProps {
   binderror?: (event: CommonCallbackEvent) => void
   [x: string]: any
 }
+type Listener = (type: string, callback: (e: Event) => void) => () => void
 
 interface PayloadData {
   [x: string]: any
@@ -40,15 +42,66 @@ type MessageData = {
   callbackId?: number
 }
 
+type LanguageCode = 'zh-CN' | 'en-US'; // 支持的语言代码
+
+interface ErrorText {
+  text: string;
+  button: string;
+}
+
+type ErrorTextMap = Record<LanguageCode, ErrorText>
+
+const styles = StyleSheet.create({
+  loadErrorContext: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  loadErrorText: {
+    fontSize: 12,
+    color: '#666666',
+    paddingTop: '40%',
+    paddingBottom: 20,
+    paddingLeft: '10%',
+    paddingRight: '10%',
+    textAlign: 'center'
+  },
+  loadErrorButton: {
+    color: '#666666',
+    textAlign: 'center',
+    padding: 10,
+    borderColor: '#666666',
+    borderStyle: 'solid',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 10
+  }
+})
+
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
   const { src, bindmessage, bindload, binderror } = props
   const mpx = global.__mpx
+  const errorText: ErrorTextMap = {
+    'zh-CN': {
+      text: '网络不可用，请检查网络设置',
+      button: '重新加载'
+    },
+    'en-US': {
+      text: 'The network is not available. Please check the network settings',
+      button: 'Reload'
+    }
+  }
+  const currentErrorText = errorText[(mpx.i18n.locale as LanguageCode) || 'zh-CN']
+
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }
-  const pageId = useContext(RouteContext)
+  const { pageId } = useContext(RouteContext) || {}
+  const [pageLoadErr, setPageLoadErr] = useState<boolean>(false)
   const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
   const webViewRef = useRef<WebView>(null)
+  const fristLoaded = useRef<boolean>(false)
+  const isLoadError = useRef<boolean>(false)
+  const statusCode = useRef<string|number>('')
+  const [isLoaded, setIsLoaded] = useState<boolean>(true)
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -56,6 +109,27 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     top: 0 as number,
     bottom: 0 as number
   }
+  const canGoBack = useRef<boolean>(false)
+  const isNavigateBack = useRef<boolean>(false)
+
+  const beforeRemoveHandle = (e: Event) => {
+    if (canGoBack.current && !isNavigateBack.current) {
+      webViewRef.current?.goBack()
+      e.preventDefault()
+    }
+    isNavigateBack.current = false
+  }
+
+  const navigation = useNavigation()
+
+  useEffect(() => {
+    const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    return () => {
+      if (isFunction(beforeRemoveSubscription)) {
+        beforeRemoveSubscription()
+      }
+    }
+  }, [])
 
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -65,25 +139,11 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     return null
   }
 
-  const _load = function (res: WebViewNavigationEvent) {
-    const result = {
-      type: 'load',
-      timeStamp: res.timeStamp,
-      detail: {
-        src: res.nativeEvent?.url
-      }
-    }
-    bindload(result)
-  }
-  const _error = function (res: WebViewErrorEvent) {
-    const result = {
-      type: 'error',
-      timeStamp: res.timeStamp,
-      detail: {
-        src: ''
-      }
+  const _reload = function () {
+    if (__mpx_mode__ === 'android') {
+      fristLoaded.current = false // 安卓需要重新设置
     }
-    binderror(result)
+    setPageLoadErr(false)
   }
   const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
@@ -109,12 +169,27 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
       });
     }
+    true;
   `
+
+  const sendMessage = function (params: string) {
+    return `
+      window.mpxWebviewMessageCallback && 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
@@ -134,7 +209,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         { // case下不允许直接声明，包个块解决该问题
           const title = postData._documentTitle
           if (title) {
-            const navigation = getFocusedNavigation()
             navigation && navigation.setOptions({ title })
           }
         }
@@ -153,6 +227,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':
@@ -181,47 +256,103 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
     asyncCallback && asyncCallback.then((res: any) => {
       if (webViewRef.current?.postMessage) {
-        const test = JSON.stringify({
+        const result = JSON.stringify({
           type,
           callbackId: data.callbackId,
           result: res
         })
-        webViewRef.current.postMessage(test)
+        webViewRef.current.injectJavaScript(sendMessage(result))
       }
     }).catch((error: any) => {
       if (webViewRef.current?.postMessage) {
-        const test = JSON.stringify({
+        const result = JSON.stringify({
           type,
           callbackId: data.callbackId,
           error
         })
-        webViewRef.current.postMessage(test)
+        webViewRef.current.injectJavaScript(sendMessage(result))
       }
     })
   }
-  const events = {}
-
-  if (bindload) {
-    extendObject(events, {
-      onLoad: _load
-    })
+  const onLoadEndHandle = function (res: WebViewEvent) {
+    fristLoaded.current = true
+    setIsLoaded(true)
+    const src = res.nativeEvent?.url
+    if (isLoadError.current) {
+      isLoadError.current = false
+      isNavigateBack.current = false
+      const result = {
+        type: 'error',
+        timeStamp: res.timeStamp,
+        detail: {
+          src,
+          statusCode: statusCode.current
+        }
+      }
+      binderror && binderror(result)
+    } else {
+      const result = {
+        type: 'load',
+        timeStamp: res.timeStamp,
+        detail: {
+          src
+        }
+      }
+      bindload?.(result)
+    }
   }
-  if (binderror) {
-    extendObject(events, {
-      onError: _error
-    })
+  const onLoadEnd = function (res: WebViewEvent) {
+    if (__mpx_mode__ === 'android') {
+      setTimeout(() => {
+        onLoadEndHandle(res)
+      }, 0)
+    } else {
+      onLoadEndHandle(res)
+    }
+  }
+  const onHttpError = function (res: WebViewHttpErrorEvent) {
+    isLoadError.current = true
+    statusCode.current = res.nativeEvent?.statusCode
+  }
+  const onError = function () {
+    statusCode.current = ''
+    isLoadError.current = true
+    if (!fristLoaded.current) {
+      setPageLoadErr(true)
+    }
+  }
+  const onLoadStart = function () {
+    if (!fristLoaded.current) {
+      setIsLoaded(false)
+    }
   }
-  extendObject(events, {
-    onMessage: _message
-  })
 
-  return createElement(Portal, null, createElement(WebView, extendObject({
-    style: defaultWebViewStyle,
-    source: { uri: src },
-    ref: webViewRef,
-    javaScriptEnabled: true,
-    onNavigationStateChange: _changeUrl
-  }, events)))
+  return (
+      <Portal key={pageLoadErr ? 'error' : 'webview'}>
+        {pageLoadErr
+          ? (
+            <View style={[styles.loadErrorContext, defaultWebViewStyle]}>
+              <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
+              <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
+            </View>
+            )
+          : (<WebView
+            style={ defaultWebViewStyle }
+            source={{ uri: src }}
+            ref={webViewRef}
+            javaScriptEnabled={true}
+            onNavigationStateChange={_changeUrl}
+            onMessage={_message}
+            injectedJavaScript={injectedJavaScript}
+            onLoadProgress={_onLoadProgress}
+            onLoadEnd={onLoadEnd}
+            onHttpError={onHttpError}
+            onError={onError}
+            onLoadStart={onLoadStart}
+            allowsBackForwardNavigationGestures={isLoaded}
+      ></WebView>)}
+      </Portal>
+  )
 })
 
 _WebView.displayName = 'MpxWebview'

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

@@ -13,7 +13,7 @@ type RemoveProps = string[];
 
 type NativeTouchEvent = NativeSyntheticEvent<NativeEvent>
 
-type Navigation = Record<string, any>
+type Navigation = Record<string, any> | undefined
 
 interface NativeEvent {
   timestamp: number;

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

@@ -1,3 +1,4 @@
+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
@@ -20,6 +21,11 @@ declare module '@mpxjs/utils' {
       left: number
       right: number
     },
+    setOptions: (params: Record<string, any>) => void,
+    addListener: (eventName: string, callback: (e: Event) => void) => void
+    removeListener: (eventName: string, callback: (e: Event) => void) => void
+    dispatch: (eventName: string) => void
+    pageId: number
     layout: {
       x: number
       y: number
@@ -37,3 +43,5 @@ declare let global: {
 declare module '@react-navigation/native' {
    export function useNavigation (): Record<string, any>
 }
+
+declare module '*.png'

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

@@ -40,10 +40,10 @@ export type AnimationProp = {
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
   linear: Easing.linear,
-  ease: Easing.ease,
-  'ease-in': Easing.in(Easing.ease),
-  'ease-in-out': Easing.inOut(Easing.ease),
-  'ease-out': Easing.out(Easing.ease)
+  ease: Easing.inOut(Easing.ease),
+  'ease-in': Easing.in(Easing.poly(3)),
+  'ease-in-out': Easing.inOut(Easing.poly(3)),
+  'ease-out': Easing.out(Easing.poly(3))
   // 'step-start': '',
   // 'step-end': ''
 }

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

@@ -1,10 +1,9 @@
 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 { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
-import { VarContext, ScrollViewContext } from './context'
+import { VarContext, ScrollViewContext, RouteContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import { useNavigation } from '@react-navigation/native'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
 import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
 import { runOnJS } from 'react-native-reanimated'
@@ -40,11 +39,16 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
   'safe-area-inset-left': 'left'
 }
 
-function getSafeAreaInset (name: string, navigation: Record<string, any>) {
+function getSafeAreaInset (name: string, navigation: Record<string, any> | undefined) {
   const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
 }
 
+export function useNavigation (): Record<string, any> | undefined {
+  const { navigation } = useContext(RouteContext) || {}
+  return navigation
+}
+
 export function omit<T, K extends string> (obj: T, fields: K[]): Omit<T, K> {
   const shallowCopy: any = extendObject({}, obj)
   for (let i = 0; i < fields.length; i += 1) {
@@ -239,7 +243,7 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
   })
 }
 
-function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<string>>, navigation: Record<string, any>) {
+function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<string>>, navigation: Record<string, any> | undefined) {
   envKeyPaths.forEach((envKeyPath) => {
     setStyle(styleObj, envKeyPath, ({ target, key, value }) => {
       const parsed = parseFunc(value, 'env')
@@ -518,6 +522,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
   const hasLayoutRef = useRef(false)
   const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {} }, [hasLayoutRef.current])
   const layoutProps: Record<string, any> = {}
+  const navigation = useNavigation()
   const enableOffset = props['enable-offset']
   if (hasSelfPercent || onLayout || enableOffset) {
     layoutProps.onLayout = (e: LayoutChangeEvent) => {
@@ -529,7 +534,8 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       }
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-          layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+          const { y: navigationY = 0 } = navigation?.layout || {}
+          layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY }
         })
       }
       onLayout && onLayout(e)
@@ -628,7 +634,7 @@ export function flatGesture (gestures: Array<GestureHandler> = []) {
 
 export const extendObject = Object.assign
 
-export function getCurrentPage (pageId: number | null) {
+export function getCurrentPage (pageId: number | null | undefined) {
   if (!global.getCurrentPages) return
   const pages = global.getCurrentPages()
   return pages.find((page: any) => isFunction(page.getPageId) && page.getPageId() === pageId)

package/lib/script-setup-compiler/index.js

@@ -380,7 +380,9 @@ function compileScriptSetup (
 
     if (node.type === 'ImportDeclaration') {
       // import declarations are moved to top
-      _s.move(start, end, 0)
+      if (start !== 0) {
+        _s.move(start, end, 0)
+      }
       // dedupe imports
       let removed = 0
       const removeSpecifier = (i) => {
@@ -533,7 +535,9 @@ function compileScriptSetup (
         (node.type === 'VariableDeclaration' && node.declare)
       ) {
         recordType(node, declaredTypes)
-        _s.move(node.start, node.end + 1, 0)
+        if (node.start !== 0) {
+          _s.move(node.start, node.end + 1, 0)
+        }
       }
     }
 

package/lib/style-compiler/index.js

@@ -4,7 +4,6 @@ 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')
@@ -58,9 +57,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/style-compiler/strip-conditional-loader.js

@@ -0,0 +1,127 @@
+class Node {
+  constructor (type, condition = null) {
+    this.type = type // 'If', 'ElseIf', 'Else' 或 'Text'
+    this.condition = condition // If 或 Elif 的条件
+    this.children = []
+    this.value = ''
+  }
+}
+
+// 提取 css string 为 token
+function tokenize (cssString) {
+  const regex = /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*\*\//g
+  const tokens = []
+  let lastIndex = 0
+  let match
+
+  while ((match = regex.exec(cssString)) !== null) {
+    // 如果 token 前有普通文本，生成文本 token
+    if (match.index > lastIndex) {
+      const text = cssString.substring(lastIndex, match.index)
+      tokens.push({ type: 'text', content: text })
+    }
+    // match[1] 为关键字：if, elif, else, endif
+    // match[2] 为条件（如果存在）
+    tokens.push({
+      type: match[1], // 'if'、'elif'、'else' 或 'endif'
+      condition: match[2] ? match[2].trim() : null
+    })
+    lastIndex = regex.lastIndex
+  }
+  // 处理结尾剩余的文本
+  if (lastIndex < cssString.length) {
+    const text = cssString.substring(lastIndex)
+    tokens.push({ type: 'text', content: text })
+  }
+  return tokens
+}
+
+// parse：将生成的 token 数组构造成嵌套的 AST
+function parse (cssString) {
+  const tokens = tokenize(cssString)
+  const ast = []
+  const nodeStack = []
+  let currentChildren = ast
+  tokens.forEach(token => {
+    if (token.type === 'text') {
+      const node = new Node('Text')
+      node.value = token.content
+      currentChildren.push(node)
+    } else if (token.type === 'if') {
+      const node = new Node('If', token.condition)
+      currentChildren.push(node)
+      nodeStack.push(currentChildren)
+      currentChildren = node.children
+    } else if (token.type === 'elif') {
+      if (nodeStack.length === 0) {
+        throw new Error('elif without a preceding if')
+      }
+      currentChildren = nodeStack[nodeStack.length - 1]
+      const node = new Node('ElseIf', token.condition)
+      currentChildren.push(node)
+      currentChildren = node.children
+    } else if (token.type === 'else') {
+      if (nodeStack.length === 0) {
+        throw new Error('else without a preceding if')
+      }
+      currentChildren = nodeStack[nodeStack.length - 1]
+      const node = new Node('Else')
+      currentChildren.push(node)
+      currentChildren = node.children
+    } else if (token.type === 'endif') {
+      if (nodeStack.length > 0) {
+        currentChildren = nodeStack.pop()
+      }
+    }
+  })
+  return ast
+}
+
+function evaluateCondition (condition, defs) {
+  try {
+    const keys = Object.keys(defs)
+    const values = keys.map(key => defs[key])
+    /* eslint-disable no-new-func */
+    const func = new Function(...keys, `return (${condition});`)
+    return func(...values)
+  } catch (e) {
+    console.error(`Error evaluating condition: ${condition}`, e)
+    return false
+  }
+}
+
+function traverseAndEvaluate (ast, defs) {
+  let output = ''
+  let batchedIf = false
+  function traverse (nodes) {
+    for (const node of nodes) {
+      if (node.type === 'Text') {
+        output += node.value
+      } else if (node.type === 'If') {
+        // 直接判断 If 节点
+        batchedIf = false
+        if (evaluateCondition(node.condition, defs)) {
+          traverse(node.children)
+          batchedIf = true
+        }
+      } else if (node.type === 'ElseIf' && !batchedIf) {
+        if (evaluateCondition(node.condition, defs)) {
+          traverse(node.children)
+          batchedIf = true
+        }
+      } else if (node.type === 'Else' && !batchedIf) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(ast)
+  return output
+}
+
+module.exports = function (css) {
+  this.cacheable()
+  const mpx = this.getMpx()
+  const defs = mpx.defs
+  const ast = parse(css)
+  return traverseAndEvaluate(ast, defs)
+}