@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -1,13 +1,11 @@
-import { forwardRef, JSX, useRef, useEffect } from 'react'
-// @ts-ignore
-import { noop } from '@mpxjs/utils'
+import { forwardRef, JSX, useEffect } from 'react'
+import { noop, warn } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
-// @ts-ignore
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { StyleSheet } from 'react-native'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -22,10 +20,11 @@ type CommonCallbackEvent = {
 }
 
 interface WebViewProps {
-  src: string
+  src?: string
   bindmessage?: (event: OnMessageCallbackEvent) => void
   bindload?: (event: CommonCallbackEvent) => void
   binderror?: (event: CommonCallbackEvent) => void
+  [x: string]: any
 }
 
 interface PayloadData {
@@ -43,33 +42,28 @@ interface NativeEvent {
   data: string
 }
 
-interface LoadRes {
-  timeStamp: string,
-  nativeEvent: NativeEvent
-}
-
 interface FormRef {
   postMessage: (value: any) => void;
 }
 
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
   const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
+  if (props.style) {
+    warn('The web-view component does not support the style prop.')
+  }
+  const defaultWebViewStyle = {
+    position: 'absolute' as 'absolute' | 'relative' | 'static',
+    left: 0 as number,
+    right: 0 as number,
+    top: 0 as number,
+    bottom: 0 as number
+  }
 
-  const defaultWebViewStyle = [
-    {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    }
-  ]
   const { nodeRef: webViewRef } = useNodesRef<WebView, WebViewProps>(props, ref, {
-    defaultStyle: StyleSheet.flatten([
-      ...defaultWebViewStyle
-    ])
+    defaultStyle: defaultWebViewStyle
   })
-  const _messageList:any[] = []
+
+  const _messageList: any[] = []
   const handleUnload = () => {
     // 这里是 WebView 销毁前执行的逻辑
     bindmessage(getCustomEvent('messsage', {}, {
@@ -86,7 +80,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       handleUnload()
     }
   }, [])
-  const _load = function(res:LoadRes) {
+  const _load = function (res: WebViewNavigationEvent) {
     const result = {
       type: 'load',
       timeStamp: res.timeStamp,
@@ -96,7 +90,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     bindload(result)
   }
-  const _error = function(res:LoadRes) {
+  const _error = function (res: WebViewErrorEvent) {
     const result = {
       type: 'error',
       timeStamp: res.timeStamp,
@@ -106,17 +100,19 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     binderror(result)
   }
-  const _message = function(res:LoadRes) {
-    let data: MessageData
+  const _message = function (res: WebViewMessageEvent) {
+    let data: MessageData = {}
     let asyncCallback
     const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
     try {
       const nativeEventData = res.nativeEvent?.data
-      data = JSON.parse(nativeEventData)
+      if (typeof nativeEventData === 'string') {
+        data = JSON.parse(nativeEventData)
+      }
     } catch (e) {
       data = {}
     }
-    const postData:PayloadData = data.payload || {}
+    const postData: PayloadData = data.payload || {}
     switch (data.type) {
       case 'postMessage':
         _messageList.push(postData.data)
@@ -152,16 +148,15 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       }
     })
   }
-  // @ts-ignore
-  return(<Portal>
+  return (<Portal>
     <WebView
-        style={[ ...defaultWebViewStyle ]}
-        source={{ uri: src }}
-        ref={webViewRef}
-        onLoad={_load}
-        onError={_error}
-        onMessage={_message}
-        javaScriptEnabled={true}
+      style={defaultWebViewStyle}
+      source={{ uri: src }}
+      ref={webViewRef}
+      onLoad={_load}
+      onError={_error}
+      onMessage={_message}
+      javaScriptEnabled={true}
     ></WebView>
   </Portal>)
 })

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

@@ -0,0 +1,245 @@
+interface Token {
+  type: string
+  value: string | number
+}
+
+interface ExpressionNode {
+  type: 'NUMBER'
+  value: number
+}
+
+export class ExpressionParser {
+  private tokens: Token[]
+  private formatter: (val: string) => number
+  private functions: { [key: string]: (...args: number[]) => number }
+  private current: number
+
+  constructor (input: string, formatter: (val: string) => number = val => parseFloat(val), functions: { [key: string]: (...args: number[]) => number } = {}) {
+    this.tokens = this.tokenize(input)
+    this.formatter = formatter
+    this.functions = functions
+    this.current = 0
+  }
+
+  tokenize (input: string): Token[] {
+    const tokens: Token[] = []
+    const regex = /(\d+\.?\d*(?:px|rpx|%|vw|vh)?|[+\-*/(),]|\b[a-zA-Z_][a-zA-Z0-9_]*\b)/g
+    let match: RegExpExecArray | null
+    while ((match = regex.exec(input))) {
+      if (/^\d+\.?\d*(?:px|rpx|%|vw|vh)?$/.test(match[0])) {
+        const lastToken = tokens[tokens.length - 1]
+        const last2Token = tokens[tokens.length - 2]
+        if (lastToken?.type === '-' && (!last2Token || /^[+\-*/(,]$/.test(last2Token?.type))) {
+          tokens.pop()
+          tokens.push({
+            type: 'NUMBER',
+            value: '-' + match[0]
+          })
+        } else {
+          tokens.push({
+            type: 'NUMBER',
+            value: match[0]
+          })
+        }
+      } else {
+        tokens.push({
+          type: match[0],
+          value: match[0]
+        })
+      }
+    }
+    return tokens
+  }
+
+  parse (): ExpressionNode {
+    return this.expression()
+  }
+
+  private expression (): ExpressionNode {
+    let node = this.term()
+    while (this.current < this.tokens.length &&
+      (this.tokens[this.current].type === '+' || this.tokens[this.current].type === '-')) {
+      const operator = this.tokens[this.current].type
+      this.current++
+      const right = this.term()
+      node = this.applyOperator(operator, node, right)
+    }
+    return node
+  }
+
+  private term (): ExpressionNode {
+    let node = this.factor()
+    while (this.current < this.tokens.length &&
+      (this.tokens[this.current].type === '*' || this.tokens[this.current].type === '/')) {
+      const operator = this.tokens[this.current].type
+      this.current++
+      const right = this.factor()
+      node = this.applyOperator(operator, node, right)
+    }
+    return node
+  }
+
+  private factor (): ExpressionNode {
+    const token = this.tokens[this.current]
+    if (token.type === 'NUMBER') {
+      this.current++
+      const numericValue = this.formatter(token.value as string)
+      return { type: 'NUMBER', value: numericValue }
+    } else if (token.type === '(') {
+      this.current++
+      const node = this.expression()
+      if (this.tokens[this.current].type !== ')') {
+        throw new Error('Expected closing parenthesis')
+      }
+      this.current++
+      return node
+    } else if (this.functions[token.type]) {
+      this.current++
+      if (this.tokens[this.current].type !== '(') {
+        throw new Error('Expected opening parenthesis after function')
+      }
+      this.current++
+      const args = this.parseArguments()
+      if (this.tokens[this.current].type !== ')') {
+        throw new Error('Expected closing parenthesis')
+      }
+      this.current++
+      return this.applyFunction(token.type, args)
+    }
+    throw new Error(`Unexpected token: ${token.type}`)
+  }
+
+  private parseArguments (): ExpressionNode[] {
+    const args: ExpressionNode[] = []
+    while (this.current < this.tokens.length && this.tokens[this.current].type !== ')') {
+      args.push(this.expression())
+      if (this.tokens[this.current].type === ',') {
+        this.current++
+      }
+    }
+    return args
+  }
+
+  private applyOperator (operator: string, left: ExpressionNode, right: ExpressionNode): ExpressionNode {
+    const leftVal = left.value
+    const rightVal = right.value
+    let result: number
+    switch (operator) {
+      case '+': result = leftVal + rightVal; break
+      case '-': result = leftVal - rightVal; break
+      case '*': result = leftVal * rightVal; break
+      case '/': result = leftVal / rightVal; break
+      default: throw new Error(`Unknown operator: ${operator}`)
+    }
+    return { type: 'NUMBER', value: result }
+  }
+
+  private applyFunction (func: string, args: ExpressionNode[]): ExpressionNode {
+    if (args.some(arg => arg.type !== 'NUMBER')) {
+      throw new Error('Function arguments must be numbers')
+    }
+    const numericArgs = args.map(arg => arg.value)
+    if (this.functions[func]) {
+      return { type: 'NUMBER', value: this.functions[func].apply(null, numericArgs) }
+    } else {
+      throw new Error(`Unknown function: ${func}`)
+    }
+  }
+}
+
+interface FuncInfo {
+  start: number
+  end: number
+  args: string[]
+}
+
+export function parseFunc (str: string, funcName: string): FuncInfo[] {
+  const regex = new RegExp(`${funcName}\\(`, 'g')
+  const result: FuncInfo[] = []
+  let match: RegExpExecArray | null
+
+  while ((match = regex.exec(str)) !== null) {
+    const start = match.index
+    let i = start + funcName.length + 1
+    let depth = 1
+    const args: string[] = []
+    let arg = ''
+
+    while (depth && i < str.length) {
+      if (depth === 1 && (str[i] === ',' || str[i] === ')')) {
+        args.push(arg.trim())
+        arg = ''
+      } else {
+        arg += str[i]
+      }
+      switch (str[i]) {
+        case '(':
+          depth++
+          break
+        case ')':
+          depth--
+          break
+        default:
+        // Do nothing
+      }
+      i++
+    }
+
+    const end = regex.lastIndex = i
+    result.push({
+      start,
+      end,
+      args
+    })
+  }
+
+  return result
+}
+
+interface Replacement {
+  start: number
+  end: number
+  content: string
+}
+
+export class ReplaceSource {
+  private _source: string
+  private _replacements: Replacement[]
+
+  constructor (source: string) {
+    this._source = source
+    this._replacements = []
+  }
+
+  replace (start: number, end: number, content: string): void {
+    this._replacements.push({ start, end, content })
+  }
+
+  source (): string {
+    if (this._replacements.length === 0) {
+      return this._source
+    }
+    let current = this._source
+    let pos = 0
+    const result: string[] = []
+
+    for (const replacement of this._replacements) {
+      const start = Math.floor(replacement.start)
+      const end = Math.floor(replacement.end) + 1
+      if (pos < start) {
+        const offset = start - pos
+        result.push(current.slice(0, offset))
+        current = current.slice(offset)
+        pos = start
+      }
+      result.push(replacement.content)
+      if (pos < end) {
+        const offset = end - pos
+        current = current.slice(offset)
+        pos = end
+      }
+    }
+    result.push(current)
+    return result.join('')
+  }
+}

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

@@ -0,0 +1,12 @@
+import { ViewStyle, ImageResizeMode } from 'react-native'
+
+type NumberVal = number | `${number}%`
+type backgroundPositionList = [ 'left'| 'right', NumberVal, 'top' | 'bottom', NumberVal ] | []
+
+export type ExtendedViewStyle = ViewStyle & {
+  backgroundImage?: string
+  backgroundSize?: Array<NumberVal | 'auto' | 'contain' | 'cover'>
+  borderRadius?: string | number
+  backgroundPosition?: backgroundPositionList
+  [key: string]: any
+}

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

@@ -49,7 +49,8 @@ interface InnerRef {
 }
 interface UseInnerPropsConfig {
   layoutRef: LayoutRef;
-  disableTouch?: boolean
+  disableTouch?: boolean;
+  disableTap?: boolean
 }
 interface DataSetType {
   [key: string]: string;

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

@@ -12,4 +12,20 @@ declare module 'react-native-svg/css' {
   }
 
   export const WithLocalSvg: React.ComponentType<WithLocalSvgProps>
-}
+}
+
+declare module '@mpxjs/utils' {
+  export function isEmptyObject (obj: Object): boolean
+  export function hasOwn (obj: Object, key: string): boolean
+  export function noop (...arg: any): void
+  export function diffAndCloneA<A, B> (a: A, b?: B): {
+    clone: A
+    diff: boolean
+    diffData: Object | null
+  }
+  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
+}
+
+declare let global: Record<string, any>

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

@@ -1,5 +1,4 @@
-import { useRef, useEffect, useImperativeHandle, RefObject, ForwardedRef } from 'react'
-
+import { useRef, useImperativeHandle, RefObject, ForwardedRef } from 'react'
 
 type Obj = Record<string, any>
 
@@ -11,16 +10,11 @@ export type HandlerRef<T, P> = {
   }
 }
 
-export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {} ) {
+export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {}) {
   const nodeRef = useRef<T>(null)
-  const _props = useRef<P | null>(props)
+  const _props = useRef<P | null>(null)
+  _props.current = props
 
-  useEffect(() => {
-    _props.current = props
-    return () => {
-      _props.current = null // 组件销毁，清空 _props 依赖数据
-    }
-  }, [props])
   useImperativeHandle(ref, () => {
     return {
       getNodeInstance () {