@mpxjs/webpack-plugin 2.10.4 → 2.10.5

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

@@ -76,36 +76,36 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 
 interface VideoProps {
-  src: string;
-  autoplay?: boolean;
-  loop?: boolean;
-  muted?: boolean;
-  controls?: boolean;
-  poster?: string;
-  style?: ViewStyle;
-  'initial-time'?: number;
-  'object-fit'?: null | 'contain' | 'fill' | 'cover';
-  'is-drm'?: boolean;
-  'provision-url'?: string;
-  'certificate-url'?: string;
-  'license-url'?: string;
-  'preferred-peak-bit-rate'?: number;
-  'enable-auto-rotation'?: number;
-  'enable-var'?: boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  bindplay?: (event: Record<string, any>) => void;
-  bindpause?: (event: Record<string, any>) => void;
-  bindended?: (event: Record<string, any>) => void;
-  bindtimeupdate?: (event: Record<string, any>) => void;
-  bindfullscreenchange?: (event: Record<string, any>) => void;
-  bindwaiting?: (event: Record<string, any>) => void;
-  binderror?: (event: Record<string, any>) => void;
-  bindloadedmetadata?: (event: Record<string, any>) => void;
-  bindcontrolstoggle?: (event: Record<string, any>) => void;
-  bindseekcomplete?: (event: Record<string, any>) => void;
+  src: string
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  controls?: boolean
+  poster?: string
+  style?: ViewStyle
+  'initial-time'?: number
+  'object-fit'?: null | 'contain' | 'fill' | 'cover'
+  'is-drm'?: boolean
+  'provision-url'?: string
+  'certificate-url'?: string
+  'license-url'?: string
+  'preferred-peak-bit-rate'?: number
+  'enable-auto-rotation'?: number
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  bindplay?: (event: Record<string, any>) => void
+  bindpause?: (event: Record<string, any>) => void
+  bindended?: (event: Record<string, any>) => void
+  bindtimeupdate?: (event: Record<string, any>) => void
+  bindfullscreenchange?: (event: Record<string, any>) => void
+  bindwaiting?: (event: Record<string, any>) => void
+  binderror?: (event: Record<string, any>) => void
+  bindloadedmetadata?: (event: Record<string, any>) => void
+  bindcontrolstoggle?: (event: Record<string, any>) => void
+  bindseekcomplete?: (event: Record<string, any>) => void
 }
 interface VideoInfoData {
   naturalSize: {
@@ -332,8 +332,10 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
   }
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         style: styles.video,
         ref: videoRef,
@@ -360,8 +362,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
         onControlsVisibilityChange:
           bindcontrolstoggle && handleAndroidControlsVisibilityChange,
         onLoad: handleVideoLoad
-      },
-      layoutProps
+      }
     ),
     [
       'src',

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

@@ -13,7 +13,7 @@ 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, useHover } from './utils'
-import { error } from '@mpxjs/utils'
+import { error, isFunction } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 import Portal from './mpx-portal'
@@ -36,6 +36,8 @@ export interface _ViewProps extends ViewProps {
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  catchtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 type Handler = (...args: any[]) => void
@@ -683,7 +685,9 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
-    animation
+    animation,
+    catchtransitionend,
+    bindtransitionend
   } = props
 
   // 默认样式
@@ -737,28 +741,40 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const viewStyle = extendObject({}, innerStyle, layoutStyle)
-
+  const transitionend = isFunction(catchtransitionend)
+    ? catchtransitionend
+    : isFunction(bindtransitionend)
+      ? bindtransitionend
+      : undefined
   const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-    enableAnimation,
+    layoutRef,
     animation,
-    style: viewStyle
+    enableAnimation,
+    style: viewStyle,
+    transitionend
   })
 
   const innerProps = useInnerProps(
-    props,
-    extendObject({
-      ref: nodeRef,
-      style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
-    },
-    layoutProps
-    ), [
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef,
+        style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
+      }
+
+    ),
+    [
       'hover-start-time',
       'hover-stay-time',
       'hover-style',
       'hover-class'
-    ], {
+    ],
+    {
       layoutRef
-    })
+    }
+  )
 
   const childNode = wrapWithChildren(props, {
     hasVarDec,

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

@@ -1,58 +1,85 @@
-import { MutableRefObject } from 'react'
+import { RefObject, MutableRefObject } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
 
-type LayoutRef = MutableRefObject<any>
+type LayoutRef = MutableRefObject<{
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  offsetLeft?: number
+  offsetTop?: number
+} | null>
 
-type SetTimeoutReturnType = ReturnType<typeof setTimeout>
+type InnerRef = MutableRefObject<{
+  startTimer: {
+    bubble: ReturnType<typeof setTimeout> | null
+    capture: ReturnType<typeof setTimeout> | null
+  }
+  mpxPressInfo: {
+    detail: {
+      x: number
+      y: number
+    }
+  }
+}>
+
+type PropsRef = MutableRefObject<Props>
+
+type EventType = 'bubble' | 'capture'
 
 type Props = Record<string, any>
 
-type AdditionalProps = Record<string, any>;
+type AdditionalProps = Record<string, any>
 
-type RemoveProps = string[];
+type RemoveProps = string[]
 
 type NativeTouchEvent = NativeSyntheticEvent<NativeEvent>
 
 type Navigation = Record<string, any> | undefined
 
+interface EventConfigDetail {
+  bubble: string[],
+  capture: string[],
+  hasCatch: boolean
+}
+
+type EventConfig = {
+  innerRef: InnerRef
+  propsRef: PropsRef
+  disableTap: boolean
+  layoutRef: LayoutRef
+  navigation: Navigation
+  [index: string]: EventConfigDetail
+}
+
+interface RawConfig {
+  layoutRef?: LayoutRef
+  disableTap?: boolean
+  [index: string]: any
+}
+
 interface NativeEvent {
-  timestamp: number;
-  pageX: number;
-  pageY: number;
+  timestamp: number
+  pageX: number
+  pageY: number
   touches: TouchPoint[]
   changedTouches: TouchPoint[]
 }
 
 interface TouchPoint {
-  identifier: number;
-  pageX: number;
-  pageY: number;
-  clientX: number;
-  clientY: number;
-  locationX?: number;
-  locationY?: number;
+  identifier: number
+  pageX: number
+  pageY: number
+  clientX: number
+  clientY: number
+  locationX?: number
+  locationY?: number
 }
 
-interface InnerRef {
-  startTimer: {
-    bubble: null | ReturnType<typeof setTimeout>;
-    capture: null | ReturnType<typeof setTimeout>;
-  };
-  mpxPressInfo: {
-    detail: {
-      x: number;
-      y: number;
-    };
-  };
-}
-interface UseInnerPropsConfig {
-  layoutRef?: LayoutRef;
-  disableTouch?: boolean;
-  disableTap?: boolean
-}
 interface DataSetType {
-  [key: string]: string;
+  [key: string]: string
 }
+
 interface ExtendedNativeTouchEvent extends NativeTouchEvent {
   _stoppedEventTypes?: Set<string>
 }
@@ -65,8 +92,11 @@ export {
   UseInnerPropsConfig,
   InnerRef,
   LayoutRef,
-  SetTimeoutReturnType,
+  PropsRef,
   DataSetType,
   Navigation,
-  ExtendedNativeTouchEvent
+  ExtendedNativeTouchEvent,
+  EventConfig,
+  RawConfig,
+  EventType
 }

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

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react'
-import { TransformsStyle } from 'react-native'
+import type { MutableRefObject } from 'react'
+import type { NativeSyntheticEvent, TransformsStyle } from 'react-native'
 import {
   Easing,
   useSharedValue,
@@ -9,11 +10,10 @@ import {
   withDelay,
   makeMutable,
   cancelAnimation,
-  SharedValue,
-  WithTimingConfig,
-  AnimationCallback
+  runOnJS
 } from 'react-native-reanimated'
-import { error, hasOwn } from '@mpxjs/utils'
+import type { AnimationCallback, WithTimingConfig, SharedValue, AnimatableValue } from 'react-native-reanimated'
+import { error, hasOwn, collectDataset } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -175,9 +175,8 @@ function getTransformObj (transforms: { [propName: string]: string | number }[])
   }, {} as { [propName: string]: string | number })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
-  const { style = {}, animation, enableAnimation } = props
-
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
+  const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props
   const enableStyleAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableStyleAnimation)
   if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -285,10 +284,32 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       })
     })
   }
+  function withTimingCallback (finished?: boolean, current?: AnimatableValue, duration?: number) {
+    if (!transitionend) return
+    const target = {
+      id: animation?.id || -1,
+      dataset: collectDataset(props),
+      offsetLeft: layoutRef?.current?.offsetLeft || 0,
+      offsetTop: layoutRef?.current?.offsetTop || 0
+    }
+    transitionend({
+      type: 'transitionend',
+      // elapsedTime 对齐wx 单位s
+      detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
+      target,
+      currentTarget: target,
+      timeStamp: Date.now()
+    })
+  }
   // 创建单个animation
   function getAnimation ({ key, value }: { key: string, value: string|number }, { delay, duration, easing }: ExtendWithTimingConfig, callback?: AnimationCallback) {
     const animation = typeof callback === 'function'
-      ? withTiming(value, { duration, easing }, callback)
+      ? withTiming(value, { duration, easing }, (finished, current) => {
+        callback(finished, current)
+        if (transitionend && finished) {
+          runOnJS(withTimingCallback)(finished, current, duration)
+        }
+      })
       : withTiming(value, { duration, easing })
     return delay ? withDelay(delay, animation) : animation
   }

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

@@ -32,6 +32,7 @@ const unoVarDecRegExp = /^--un-/
 const unoVarUseRegExp = /var\(--un-/
 const calcUseRegExp = /calc\(/
 const envUseRegExp = /env\(/
+const filterRegExp = /(calc|env|%)/
 
 const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
   'safe-area-inset-top': 'top',
@@ -168,6 +169,10 @@ interface PercentConfig {
   parentHeight?: number
 }
 
+interface PositionMeta {
+  hasPositionFixed: boolean
+}
+
 function resolvePercent (value: string | number | undefined, key: string, percentConfig: PercentConfig): string | number | undefined {
   if (!(typeof value === 'string' && PERCENT_REGEX.test(value))) return value
   let base
@@ -222,10 +227,11 @@ function resolveVar (input: string, varContext: Record<string, any>) {
   return global.__formatValue(replaced.source())
 }
 
-function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<string>>, varContext: Record<string, any>) {
+function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<string>>, varContext: Record<string, any>, visitOther: (arg: VisitorArg) => void) {
   varKeyPaths.forEach((varKeyPath) => {
     setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
       target[key] = resolveVar(value, varContext)
+      visitOther({ target, key, value: target[key], keyPath: varKeyPath })
     })
   })
 }
@@ -267,13 +273,17 @@ function transformCalc (styleObj: Record<string, any>, calcKeyPaths: Array<Array
   })
 }
 
-const stringifyProps = ['fontWeight']
 function transformStringify (styleObj: Record<string, any>) {
-  stringifyProps.forEach((prop) => {
-    if (isNumber(styleObj[prop])) {
-      styleObj[prop] = '' + styleObj[prop]
-    }
-  })
+  if (isNumber(styleObj.fontWeight)) {
+    styleObj.fontWeight = '' + styleObj.fontWeight
+  }
+}
+
+function transformPosition (styleObj: Record<string, any>, meta: PositionMeta) {
+  if (styleObj.position === 'fixed') {
+    styleObj.position = 'absolute'
+    meta.hasPositionFixed = true
+  }
 }
 
 interface TransformStyleConfig {
@@ -288,17 +298,19 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   const varStyle: Record<string, any> = {}
   const unoVarStyle: Record<string, any> = {}
   const normalStyle: Record<string, any> = {}
-  const normalStyleRef = useRef<Record<string, any>>({})
-  const normalStyleChangedRef = useRef(false)
   let hasVarDec = false
   let hasVarUse = false
+  let hasSelfPercent = false
   const varKeyPaths: Array<Array<string>> = []
   const unoVarKeyPaths: Array<Array<string>> = []
+  const percentKeyPaths: Array<Array<string>> = []
+  const calcKeyPaths: Array<Array<string>> = []
+  const envKeyPaths: Array<Array<string>> = []
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
   const navigation = useNavigation()
 
-  function varVisitor ({ key, value, keyPath }: VisitorArg) {
+  function varVisitor ({ target, key, value, keyPath }: VisitorArg) {
     if (keyPath.length === 1) {
       if (unoVarDecRegExp.test(key)) {
         unoVarStyle[key] = value
@@ -318,10 +330,39 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       } else if (varUseRegExp.test(value)) {
         hasVarUse = true
         varKeyPaths.push(keyPath.slice())
+      } else {
+        visitOther({ target, key, value, keyPath })
       }
     }
   }
 
+  function envVisitor ({ value, keyPath }: VisitorArg) {
+    if (envUseRegExp.test(value)) {
+      envKeyPaths.push(keyPath.slice())
+    }
+  }
+
+  function calcVisitor ({ value, keyPath }: VisitorArg) {
+    if (calcUseRegExp.test(value)) {
+      calcKeyPaths.push(keyPath.slice())
+    }
+  }
+
+  function percentVisitor ({ key, value, keyPath }: VisitorArg) {
+    if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+      hasSelfPercent = true
+      percentKeyPaths.push(keyPath.slice())
+    } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+      percentKeyPaths.push(keyPath.slice())
+    }
+  }
+
+  function visitOther ({ target, key, value, keyPath }: VisitorArg) {
+    if (filterRegExp.test(value)) {
+      [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }))
+    }
+  }
+
   // traverse var & generate normalStyle
   traverseStyle(styleObj, [varVisitor])
 
@@ -341,104 +382,61 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
       varContextRef.current = newVarContext
     }
-    transformVar(normalStyle, varKeyPaths, varContextRef.current)
+    transformVar(normalStyle, varKeyPaths, varContextRef.current, visitOther)
   }
 
   // apply unocss var
   if (unoVarKeyPaths.length) {
-    transformVar(normalStyle, unoVarKeyPaths, unoVarStyle)
+    transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther)
   }
 
-  const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current)
-  if (diff) {
-    normalStyleRef.current = clone
-    normalStyleChangedRef.current = !normalStyleChangedRef.current
+  const percentConfig = {
+    width,
+    height,
+    fontSize: normalStyle.fontSize,
+    parentWidth,
+    parentHeight,
+    parentFontSize
   }
 
-  const memoResult = useMemo(() => {
-    let hasSelfPercent = false
-    let hasPositionFixed = false
-    const percentKeyPaths: Array<Array<string>> = []
-    const calcKeyPaths: Array<Array<string>> = []
-    const envKeyPaths: Array<Array<string>> = []
-    // transform can be memoized
-    function envVisitor ({ value, keyPath }: VisitorArg) {
-      if (envUseRegExp.test(value)) {
-        envKeyPaths.push(keyPath.slice())
-      }
-    }
-
-    function calcVisitor ({ value, keyPath }: VisitorArg) {
-      if (calcUseRegExp.test(value)) {
-        calcKeyPaths.push(keyPath.slice())
-      }
-    }
-
-    function percentVisitor ({ key, value, keyPath }: VisitorArg) {
-      if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-        hasSelfPercent = true
-        percentKeyPaths.push(keyPath.slice())
-      } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
-        percentKeyPaths.push(keyPath.slice())
-      }
-    }
-
-    function transformPosition (styleObj: Record<string, any>) {
-      if (styleObj.position === 'fixed') {
-        hasPositionFixed = true
-        styleObj.position = 'absolute'
-      }
-    }
-
-    // traverse env & calc & percent
-    traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor])
-
-    const percentConfig = {
-      width,
-      height,
-      fontSize: normalStyle.fontSize,
-      parentWidth,
-      parentHeight,
-      parentFontSize
-    }
+  const positionMeta = {
+    hasPositionFixed: false
+  }
 
-    // apply env
-    transformEnv(normalStyle, envKeyPaths, navigation)
-    // apply percent
-    transformPercent(normalStyle, percentKeyPaths, percentConfig)
-    // apply calc
-    transformCalc(normalStyle, calcKeyPaths, (value: string, key: string) => {
-      if (PERCENT_REGEX.test(value)) {
-        const resolved = resolvePercent(value, key, percentConfig)
-        return typeof resolved === 'number' ? resolved : 0
+  // apply env
+  transformEnv(normalStyle, envKeyPaths, navigation)
+  // apply percent
+  transformPercent(normalStyle, percentKeyPaths, percentConfig)
+  // apply calc
+  transformCalc(normalStyle, calcKeyPaths, (value: string, key: string) => {
+    if (PERCENT_REGEX.test(value)) {
+      const resolved = resolvePercent(value, key, percentConfig)
+      return typeof resolved === 'number' ? resolved : 0
+    } else {
+      const formatted = global.__formatValue(value)
+      if (typeof formatted === 'number') {
+        return formatted
       } else {
-        const formatted = global.__formatValue(value)
-        if (typeof formatted === 'number') {
-          return formatted
-        } else {
-          warn('calc() only support number, px, rpx, % temporarily.')
-          return 0
-        }
+        warn('calc() only support number, px, rpx, % temporarily.')
+        return 0
       }
-    })
-    // apply position
-    transformPosition(normalStyle)
-    // transform number enum stringify
-    transformStringify(normalStyle)
-
-    return {
-      normalStyle,
-      hasSelfPercent,
-      hasPositionFixed
     }
-  }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize])
+  })
+
+  // apply position
+  transformPosition(normalStyle, positionMeta)
+  // transform number enum stringify
+  transformStringify(normalStyle)
 
-  return extendObject({
+  return {
     hasVarDec,
     varContextRef,
     setWidth,
-    setHeight
-  }, memoResult)
+    setHeight,
+    normalStyle,
+    hasSelfPercent,
+    hasPositionFixed: positionMeta.hasPositionFixed
+  }
 }
 
 export interface VisitorArg {
@@ -455,12 +453,7 @@ export function traverseStyle (styleObj: Record<string, any>, visitors: Array<(a
       target.forEach((value, index) => {
         const key = String(index)
         keyPath.push(key)
-        visitors.forEach(visitor => visitor({
-          target,
-          key,
-          value,
-          keyPath
-        }))
+        visitors.forEach(visitor => visitor({ target, key, value, keyPath }))
         traverse(value)
         keyPath.pop()
       })

package/lib/template-compiler/compiler.js

@@ -2725,8 +2725,8 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
+    processStyleReact(el, options)
     if (!pass) {
-      processStyleReact(el, options)
       processEventReact(el, options)
       processComponentGenerics(el, meta)
       processComponentIs(el, options)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4",
+  "version": "2.10.5",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.4",
+    "@mpxjs/api-proxy": "^2.10.5",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "c877bcebc894c75fe107f7b997cee5b494932e43"
+  "gitHead": "80a4120733a1ee64e394ae58240497ea6721f435"
 }