@mpxjs/webpack-plugin 2.9.67 → 2.9.70-alpha.0

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

@@ -12,7 +12,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 
 import CheckBox from './mpx-checkbox'
 import { FormContext, FormFieldValue } from './context'
-import { useTransformStyle, useLayout } from './utils'
+import { useTransformStyle, useLayout, extendObject } from './utils'
 
 interface _SwitchProps extends SwitchProps {
   style?: ViewStyle
@@ -42,7 +42,6 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
-
     bindchange,
     catchchange
   } = props
@@ -77,7 +76,9 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
   }, [checked])
 
   const nodeRef = useRef(null)
-  useNodesRef<Switch, _SwitchProps>(props, ref, nodeRef)
+  useNodesRef<Switch, _SwitchProps>(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const {
     layoutRef,
@@ -119,12 +120,13 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     }
   }, [])
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = useInnerProps(props, extendObject({
     ref: nodeRef,
-    style: { ...normalStyle, ...layoutStyle },
-    ...layoutProps,
-    ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
-  }, [
+    style: extendObject({}, normalStyle, layoutStyle)
+  },
+  layoutProps,
+  !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {})
+  , [
     'checked',
     'disabled',
     'type',

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

@@ -25,6 +25,7 @@ interface _TextProps extends TextProps {
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
   const {
     style = {},
+    allowFontScaling = false,
     selectable,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
@@ -49,12 +50,15 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
   })
 
   const nodeRef = useRef(null)
-  useNodesRef<Text, _TextProps>(props, ref, nodeRef)
+  useNodesRef<Text, _TextProps>(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
     style: normalStyle,
-    selectable: !!selectable || !!userSelect
+    selectable: !!selectable || !!userSelect,
+    allowFontScaling
   }, [
     'user-select'
   ], {

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

@@ -4,15 +4,15 @@
  * ✔ hover-start-time
  * ✔ hover-stay-time
  */
-import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent, Text } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, cloneElement } from 'react'
+import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
 import useInnerProps from './getInnerListeners'
 import Animated from 'react-native-reanimated'
 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 } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils'
 import LinearGradient from 'react-native-linear-gradient'
 
 export interface _ViewProps extends ViewProps {
@@ -24,6 +24,7 @@ export interface _ViewProps extends ViewProps {
   'hover-stay-time'?: number
   'enable-background'?: boolean
   'enable-var'?: boolean
+  'enable-fast-image'?: boolean
   'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
@@ -76,9 +77,11 @@ type PreImageInfo = {
 type ImageProps = {
   style: ImageStyle,
   src?: string,
+  source?: {uri: string },
   colors: Array<string>,
   locations?: Array<number>
   angle?: number
+  resizeMode?: 'cover' | 'stretch'
 }
 
 const linearMap = new Map([
@@ -233,10 +236,7 @@ function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo,
     }
   }
 
-  imageProps.style = {
-    ...imageProps.style as ImageStyle,
-    ...style
-  }
+  extendObject(imageProps.style, style)
 }
 
 // background-size 转换
@@ -280,24 +280,23 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
       if (!dimensions) return
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
-      (imageProps.style as ImageStyle).resizeMode = 'stretch'
+      imageProps.resizeMode = 'stretch'
       dimensions = {
         width: isPercent(width) ? width : +width,
         height: isPercent(height) ? height : +height
       } as { width: NumberVal, height: NumberVal }
     }
   }
+
   // 样式合并
-  imageProps.style = {
-    ...imageProps.style as ImageStyle,
-    ...dimensions
-  }
+  extendObject(imageProps.style, dimensions)
 }
 
 // background-image转换为source
 function backgroundImage (imageProps: ImageProps, preImageInfo: PreImageInfo) {
-  if (preImageInfo.src) {
-    imageProps.src = preImageInfo.src
+  const src = preImageInfo.src
+  if (src) {
+    imageProps.source = { uri: src }
   }
 }
 
@@ -326,8 +325,8 @@ function linearGradient (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
 const imageStyleToProps = (preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) => {
   // 初始化
   const imageProps: ImageProps = {
+    resizeMode: 'cover',
     style: {
-      resizeMode: 'cover' as ImageResizeMode,
       position: 'absolute'
       // ...StyleSheet.absoluteFillObject
     },
@@ -476,10 +475,9 @@ function parseLinearGradient (text: string): LinearInfo | undefined {
       return prev
     }, { colors: [], locations: [] })
 
-  return {
-    ...linearInfo,
+  return extendObject({}, linearInfo, {
     direction: direction.trim()
-  }
+  })
 }
 
 function parseBgImage (text: string): {
@@ -533,7 +531,26 @@ function isDiagonalAngle (linearInfo?: LinearInfo): boolean {
   return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction])
 }
 
-function wrapImage (imageStyle?: ExtendedViewStyle) {
+function inheritStyle (innerStyle: ExtendedViewStyle = {}) {
+  const { borderWidth, borderRadius } = innerStyle
+  const borderStyles = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
+  return pickStyle(innerStyle,
+    borderStyles,
+    borderWidth && borderRadius
+      ? (key, val) => {
+        // 盒子内圆角borderWith与borderRadius的关系
+        // 当borderRadius 小于 当borderWith 内边框为直角
+        // 当borderRadius 大于等于 当borderWith 内边框为圆角
+          if (borderStyles.includes(key)) {
+            const borderVal = +val - borderWidth
+            return borderVal > 0 ? borderVal : 0
+          }
+          return val
+        }
+      : undefined)
+}
+
+function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
   // 预处理数据
   const preImageInfo: PreImageInfo = preParseImage(imageStyle)
   // 预解析
@@ -616,9 +633,9 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
     }
   }
 
-  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
+  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} /> }
-    {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
+    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size), enableFastImage))}
   </View>
 }
 
@@ -629,9 +646,11 @@ interface WrapChildrenConfig {
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
   textProps?: Record<string, any>
+  innerStyle?: Record<string, any>
+  enableFastImage?: boolean
 }
 
-function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }: WrapChildrenConfig) {
+function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
@@ -640,7 +659,7 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
   })
 
   return [
-    enableBackground ? wrapImage(backgroundStyle) : null,
+    enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
     children
   ]
 }
@@ -655,6 +674,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'enable-background': enableBackground,
+    'enable-fast-image': enableFastImage,
     'enable-animation': enableAnimation,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
@@ -665,21 +685,16 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   const [isHover, setIsHover] = useState(false)
 
   // 默认样式
-  const defaultStyle: ExtendedViewStyle = {
-    // flex 布局相关的默认样式
-    ...style.display === 'flex' && {
-      flexDirection: 'row',
-      flexBasis: 'auto',
-      flexShrink: 1,
-      flexWrap: 'nowrap'
-    }
-  }
+  const defaultStyle: ExtendedViewStyle = style.display === 'flex'
+    ? {
+        flexDirection: 'row',
+        flexBasis: 'auto',
+        flexShrink: 1,
+        flexWrap: 'nowrap'
+      }
+    : {}
 
-  const styleObj: ExtendedViewStyle = {
-    ...defaultStyle,
-    ...style,
-    ...(isHover ? hoverStyle : null)
-  }
+  const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
     normalStyle,
@@ -696,7 +711,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     parentHeight
   })
 
-  const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   enableBackground = enableBackground || !!backgroundStyle
   const enableBackgroundRef = useRef(enableBackground)
@@ -706,7 +721,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const nodeRef = useRef(null)
   useNodesRef<View, _ViewProps>(props, ref, nodeRef, {
-    defaultStyle
+    style: normalStyle
   })
 
   const dataRef = useRef<{
@@ -754,23 +769,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutProps
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-  const viewStyle = Object.assign({}, innerStyle, layoutStyle)
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: viewStyle,
-    ...layoutProps,
-    ...(hoverStyle && {
-      bindtouchstart: onTouchStart,
-      bindtouchend: onTouchEnd
-    })
-  }, [
-    'hover-start-time',
-    'hover-stay-time',
-    'hover-style',
-    'hover-class'
-  ], {
-    layoutRef
-  })
+  const viewStyle = extendObject({}, innerStyle, layoutStyle)
 
   enableAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableAnimation)
@@ -783,18 +782,41 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       style: viewStyle
     })
     : viewStyle
+  const innerProps = useInnerProps(
+    props,
+    extendObject({
+      ref: nodeRef,
+      style: finalStyle
+    },
+    layoutProps,
+    hoverStyle
+      ? {
+          bindtouchstart: onTouchStart,
+          bindtouchend: onTouchEnd
+        }
+      : {}
+    ), [
+      'hover-start-time',
+      'hover-stay-time',
+      'hover-style',
+      'hover-class'
+    ], {
+      layoutRef
+    })
+
   const childNode = wrapWithChildren(props, {
     hasVarDec,
     enableBackground: enableBackgroundRef.current,
     textStyle,
     backgroundStyle,
     varContext: varContextRef.current,
-    textProps
+    textProps,
+    innerStyle,
+    enableFastImage
   })
-  return animation?.actions?.length
+  return enableAnimation
     ? (<Animated.View
       {...innerProps}
-      style={finalStyle}
     >
       {childNode}
     </Animated.View>)

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

@@ -1,11 +1,14 @@
-import { forwardRef, JSX, useEffect, useRef } from 'react'
+import { forwardRef, JSX, useEffect, useRef, useContext, useMemo } from 'react'
 import { noop, warn } from '@mpxjs/utils'
+import { View } from 'react-native'
 import { Portal } from '@ant-design/react-native'
 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 { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes'
+import { getCurrentPage, extendObject } from './utils'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes'
+import { RouteContext } from './context'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -37,20 +40,17 @@ type MessageData = {
   callbackId?: number
 }
 
-interface NativeEvent {
-  url: string,
-  data: string
-}
-
-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
+  const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
+  if (!src) {
+    return (<View></View>)
+  }
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }
+  const pageId = useContext(RouteContext)
+  const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
+
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -61,20 +61,26 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const webViewRef = useRef<WebView>(null)
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
-    defaultStyle: defaultWebViewStyle
+    style: defaultWebViewStyle
   })
 
-  const _messageList: any[] = []
+  const _messageList = useRef<any[]>([])
   const handleUnload = () => {
     // 这里是 WebView 销毁前执行的逻辑
     bindmessage(getCustomEvent('messsage', {}, {
       detail: {
-        data: _messageList
+        data: _messageList.current
       },
       layoutRef: webViewRef
     }))
   }
 
+  useEffect(() => {
+    if (currentPage) {
+      currentPage.__webViewUrl = src
+    }
+  }, [src, currentPage])
+
   useEffect(() => {
     // 组件卸载时执行
     return () => {
@@ -101,6 +107,11 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     binderror(result)
   }
+  const _changeUrl = function (navState: WebViewNavigation) {
+    if (currentPage) {
+      currentPage.__webViewUrl = navState.url
+    }
+  }
   const _message = function (res: WebViewMessageEvent) {
     let data: MessageData = {}
     let asyncCallback
@@ -116,7 +127,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     const postData: PayloadData = data.payload || {}
     switch (data.type) {
       case 'postMessage':
-        _messageList.push(postData.data)
+        _messageList.current.push(postData.data)
         asyncCallback = Promise.resolve({
           errMsg: 'invokeWebappApi:ok'
         })
@@ -149,14 +160,30 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       }
     })
   }
+  const events = {}
+
+  if (bindload) {
+    extendObject(events, {
+      onLoad: _load
+    })
+  }
+  if (binderror) {
+    extendObject(events, {
+      onError: _error
+    })
+  }
+  if (bindmessage) {
+    extendObject(events, {
+      onMessage: _message
+    })
+  }
   return (<Portal>
     <WebView
       style={defaultWebViewStyle}
       source={{ uri: src }}
       ref={webViewRef}
-      onLoad={_load}
-      onError={_error}
-      onMessage={_message}
+      {...events}
+      onNavigationStateChange={_changeUrl}
       javaScriptEnabled={true}
     ></WebView>
   </Portal>)

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

@@ -0,0 +1,104 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+
+export type Faces = {
+  index: number
+  deg: number
+  offsetY: number
+  opacity: number
+  screenHeight: number
+}
+
+export const degToRad = (deg: number) => (Math.PI * deg) / 180
+
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree: number, itemHeight: number) =>
+  itemHeight * Math.cos(degToRad(degree))
+
+export const calcPickerHeight = (faces: Faces[], itemHeight: number) => {
+  if (faces.length === 7) {
+    return itemHeight * 5
+  }
+  return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0)
+}
+
+export const createFaces = (
+  itemHeight: number,
+  visibleCount: number
+): Faces[] => {
+  // e.g [30, 60, 90]
+  const getDegreesRelativeCenter = () => {
+    const maxStep = Math.trunc((visibleCount + 2) / 2) // + 2 because there are 2 more faces at 90 degrees
+    const stepDegree = 90 / maxStep
+
+    const result = []
+    for (let i = 1; i <= maxStep; i++) {
+      result.push(i * stepDegree)
+    }
+    return result
+  }
+
+  const getScreenHeightsAndOffsets = <T extends readonly number[]>(
+    degrees: T
+  ): [T, T] => {
+    const screenHeights = degrees.map((deg) =>
+      calcHeight(deg, itemHeight)
+    ) as unknown as T
+    const freeSpaces = screenHeights.map(
+      (screenHeight) => itemHeight - screenHeight
+    )
+    const offsets = freeSpaces.map((freeSpace, index) => {
+      let offset = freeSpace / 2
+      for (let i = 0; i < index; i++) {
+        offset += freeSpaces[i]
+      }
+      return offset
+    }) as unknown as T
+    return [screenHeights, offsets]
+  }
+
+  const getOpacity = (index: number) => {
+    const map: Record<number, number> = {
+      0: 0,
+      1: 0.2,
+      2: 0.35,
+      3: 0.45,
+      4: 0.5
+    }
+    return map[index] ?? Math.min(1, map[4] + index * 0.5)
+  }
+
+  const degrees = getDegreesRelativeCenter()
+  const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
+
+  return [
+    // top items
+    ...degrees
+      .map<Faces>((degree, index) => {
+        return {
+          index: -1 * (index + 1),
+          deg: degree,
+          opacity: getOpacity(degrees.length - 1 - index),
+          offsetY: -1 * offsets[index],
+          screenHeight: screenHeight[index]
+        }
+      })
+      .reverse(),
+
+    // center item
+    { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+
+    // bottom items
+    ...degrees.map<Faces>((degree, index) => {
+      return {
+        index: index + 1,
+        deg: -1 * degree,
+        opacity: getOpacity(degrees.length - 1 - index),
+        offsetY: offsets[index],
+        screenHeight: screenHeight[index]
+      }
+    })
+  ]
+}

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+type OverlayProps = {
+  itemHeight: number
+  overlayItemStyle?: StyleProp<ViewStyle>
+  overlayContainerStyle?: StyleProp<ViewStyle>
+}
+
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
+  return (
+    <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selection: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.05)',
+    alignSelf: 'stretch'
+  }
+})
+
+export default React.memo(Overlay)

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

@@ -16,3 +16,5 @@ export type ExtendedViewStyle = ViewStyle & {
 export type ExtendedFunctionComponent = FunctionComponent & {
   isCustomText?: boolean
 }
+
+export type AnyFunc = (...args: ReadonlyArray<any>) => any

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

@@ -1,21 +1,7 @@
-declare module 'react-native-svg/css' {
-  import type { ImageSourcePropType, StyleProp, ImageStyle } from 'react-native'
-  import type { SvgProps as SvgCssUriProps } from 'react-native-svg'
-
-  export const SvgCssUri: React.ComponentType<SvgCssUriProps & { uri?: string }>
-
-  export interface WithLocalSvgProps {
-    asset: ImageSourcePropType
-    style?: StyleProp<ImageStyle>
-    width?: string | number
-    height?: string | number
-  }
-
-  export const WithLocalSvg: React.ComponentType<WithLocalSvgProps>
-}
-
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
+  export function isFunction (fn: unknown): boolean
+  export function isNumber (num: unknown): boolean
   export function hasOwn (obj: Object, key: string): boolean
   export function noop (...arg: any): void
   export function diffAndCloneA<A, B> (a: A, b?: B): {
@@ -26,6 +12,7 @@ declare module '@mpxjs/utils' {
   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 collectDataset (props: Record<string, any>, needParse?: boolean): Record<string, any>
   export function getFocusedNavigation (): {
     insets: {
       top: number