@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -1,12 +1,11 @@
-import { forwardRef, JSX, useEffect } from 'react'
-// @ts-ignore
-import { noop } from '@mpxjs/utils'
+import { forwardRef, JSX, useEffect, useRef } 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 { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -21,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 {
@@ -42,27 +42,25 @@ 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',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0
+    position: 'absolute' as 'absolute' | 'relative' | 'static',
+    left: 0 as number,
+    right: 0 as number,
+    top: 0 as number,
+    bottom: 0 as number
   }
 
-  const { nodeRef: webViewRef } = useNodesRef<WebView, WebViewProps>(props, ref, {
+  const webViewRef = useRef<WebView>(null)
+  useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     defaultStyle: defaultWebViewStyle
   })
 
@@ -83,7 +81,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,
@@ -93,7 +91,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,
@@ -103,13 +101,15 @@ 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 = {}
     }

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

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

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

@@ -15,5 +15,27 @@ declare module 'react-native-svg/css' {
 }
 
 declare module '@mpxjs/utils' {
-  export function isEmptyObject(obj: Record<string, any>): boolean;
-}
+  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
+  export function getFocusedNavigation (): {
+    insets: {
+      top: number
+      bottom: number
+      left: number
+      right: number
+    }
+  } | undefined
+}
+
+declare let global: {
+  __formatValue (value: string): string | number
+} & Record<string, any>

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

@@ -1,6 +1,5 @@
 import { useRef, useImperativeHandle, RefObject, ForwardedRef } from 'react'
 
-
 type Obj = Record<string, any>
 
 export type HandlerRef<T, P> = {
@@ -11,8 +10,7 @@ export type HandlerRef<T, P> = {
   }
 }
 
-export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {} ) {
-  const nodeRef = useRef<T>(null)
+export default function useNodesRef<T, P> (props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance:Obj = {}) {
   const _props = useRef<P | null>(null)
   _props.current = props
 
@@ -27,8 +25,4 @@ export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef
       }
     }
   })
-
-  return {
-    nodeRef
-  }
 }