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

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

@@ -1,16 +1,18 @@
-import { useEffect, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle } from 'react-native'
-import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
+import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
 import { VarContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import type { ExtendedFunctionComponent } from './types/common'
+import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
+import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/
+export const SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/
-export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/
+export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines|allowFontScaling/
 export const DEFAULT_FONT_SIZE = 16
 export const HIDDEN_STYLE = {
   opacity: 0
@@ -30,10 +32,7 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
 
 function getSafeAreaInset (name: string) {
   const navigation = getFocusedNavigation()
-  const insets = {
-    ...initialWindowMetrics?.insets,
-    ...navigation?.insets
-  }
+  const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
 }
 
@@ -78,7 +77,7 @@ export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
     const [k, v, ...rest] = style.split(':')
     if (rest.length || !v || !k) return styleObj
     const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
-    return Object.assign(styleObj, { [key]: v.trim() })
+    return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) })
   }, {})
 }
 
@@ -89,25 +88,18 @@ export const parseUrl = (cssUrl = '') => {
 }
 
 export const getRestProps = (transferProps: any = {}, originProps: any = {}, deletePropsKey: any = []) => {
-  return {
-    ...transferProps,
-    ...omit(originProps, deletePropsKey)
-  }
+  return extendObject(
+    {},
+    transferProps,
+    omit(originProps, deletePropsKey)
+  )
 }
 
 export function isText (ele: ReactNode): ele is ReactElement {
   if (isValidElement(ele)) {
     const displayName = (ele.type as ExtendedFunctionComponent)?.displayName
     const isCustomText = (ele.type as ExtendedFunctionComponent)?.isCustomText
-    return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText
-  }
-  return false
-}
-
-export function isEmbedded (ele: ReactNode): ele is ReactElement {
-  if (isValidElement(ele)) {
-    const displayName = (ele.type as ExtendedFunctionComponent)?.displayName || ''
-    return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName)
+    return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText
   }
   return false
 }
@@ -275,6 +267,15 @@ 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]
+    }
+  })
+}
+
 interface TransformStyleConfig {
   enableVar?: boolean
   externalVarContext?: Record<string, any>
@@ -385,6 +386,8 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       }
     }
   })
+  // transform number enum stringify
+  transformStringify(normalStyle)
 
   return {
     normalStyle,
@@ -513,8 +516,8 @@ export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varC
   if (textStyle || textProps) {
     children = Children.map(children, (child) => {
       if (isText(child)) {
-        const style = { ...textStyle, ...child.props.style }
-        return cloneElement(child, { ...textProps, style })
+        const style = extendObject({}, textStyle, child.props.style)
+        return cloneElement(child, extendObject({}, textProps, { style }))
       }
       return child
     })
@@ -525,9 +528,52 @@ export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varC
   return children
 }
 
+export const debounce = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  let timer: any
+  const wrapper = (...args: ReadonlyArray<any>) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+  wrapper.clear = () => {
+    clearTimeout(timer)
+  }
+  return wrapper
+}
+
+export const useDebounceCallback = <T extends AnyFunc> (
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) & { clear: () => void } => {
+  const debounced = useMemo(() => debounce(func, delay), [func])
+  return debounced
+}
+
+export const useStableCallback = <T extends AnyFunc | null | undefined> (
+  callback: T
+): T extends AnyFunc ? T : () => void => {
+  const ref = useRef<T>(callback)
+  ref.current = callback
+  return useCallback<any>(
+    (...args: any[]) => ref.current?.(...args),
+    []
+  )
+}
+
+export const usePrevious = <T, > (value: T): T | undefined => {
+  const ref = useRef<T | undefined>(undefined)
+  const prev = ref.current
+  ref.current = value
+  return prev
+}
+
 export interface GestureHandler {
-  nodeRefs?: Array<{ getNodeInstance: () => { nodeRef: unknown } }>;
-  current?: unknown;
+  nodeRefs?: Array<{ getNodeInstance: () => { nodeRef: unknown } }>
+  current?: unknown
 }
 
 export function flatGesture (gestures: Array<GestureHandler> = []) {
@@ -539,3 +585,28 @@ export function flatGesture (gestures: Array<GestureHandler> = []) {
     return gesture?.current ? [gesture] : []
   })) || []
 }
+
+export const extendObject = Object.assign
+
+export function getCurrentPage (pageId: number | null) {
+  if (!global.getCurrentPages) return
+  const pages = global.getCurrentPages()
+  return pages.find((page: any) => isFunction(page.getPageId) && page.getPageId() === pageId)
+}
+
+export function renderImage (
+  imageProps: ImageProps | FastImageProps,
+  enableFastImage = false
+) {
+  const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? FastImage : Image
+  return <Component {...imageProps} />
+}
+
+export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string) {
+  return pickedKeys.reduce<Record<string, any>>((acc, key) => {
+    if (key in styleObj) {
+      acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key]
+    }
+    return acc
+  }, {})
+}

package/lib/runtime/components/tenon/getInnerListeners.js

@@ -0,0 +1,334 @@
+import { isEmptyObject } from '../../utils'
+
+const tapEvents = [
+  'onTouchstart',
+  'onTouchmove',
+  'onTouchcancel',
+  'onTouchend',
+  'onLongtap'
+]
+
+function createTouch (context, hasLongTap, __mpxTapInfo) {
+  return ({
+    onTouch (e) {
+      // 用touch模拟longtap
+      switch (e.state) {
+        case 1:
+          context.$emit('touchstart', e)
+          __mpxTapInfo.detail = {
+            x: e.position.x,
+            y: e.position.y
+          }
+          __mpxTapInfo.startTimer = null
+
+          if (hasLongTap) {
+            __mpxTapInfo.startTimer = setTimeout(() => {
+              if (hasLongTap) {
+                const re = inheritEvent(
+                  'longtap',
+                  e,
+                  __mpxTapInfo.detail
+                )
+                context.$emit('longtap', re)
+                __mpxTapInfo.startTimer = null
+              }
+            }, 350)
+          }
+
+          break
+        case 2:
+          context.$emit('touchmove', e)
+          if (
+            Math.abs(e.position.x - __mpxTapInfo.detail.x) > 1 ||
+            Math.abs(e.position.y - __mpxTapInfo.detail.y) > 1
+          ) {
+            __mpxTapInfo.startTimer &&
+              clearTimeout(__mpxTapInfo.startTimer)
+            __mpxTapInfo.startTimer = null
+          }
+          break
+        case 3:
+          context.$emit('touchend', e)
+          __mpxTapInfo.startTimer &&
+            clearTimeout(__mpxTapInfo.startTimer)
+          __mpxTapInfo.startTimer = null
+          break
+        case 4:
+          context.$emit('touchcancel', e)
+          break
+      }
+    }
+  })
+}
+
+function processOriginEvent (listeners, context, _input) {
+  // 给event添加_originEvent属性
+  const ignoreEvents = ['onTap', 'onFocus', 'onChange', 'onBlur', 'onConfirm', 'onInput']
+  Object.keys(listeners).forEach((key) => {
+    if (!ignoreEvents.includes(key)) {
+      const listener = listeners[key]
+      listeners[key] = function (e) {
+        if (e) {
+          e._originEvent = { ...e }
+        }
+        listener.call(this, e)
+      }
+    }
+  })
+
+  // 处理input输入框事件
+  if (listeners.onInput && _input) {
+    delete listeners.onInput
+    listeners.onInput = function (e) {
+      let _type
+      const { state } = e || {}
+      if (state === 1) {
+        _type = 'focus'
+      } else if (state === 2) {
+        _type = 'focus'
+      } else if (state === 3) {
+        _type = 'blur'
+      } else {
+        _type = 'confirm'
+      }
+      context.$emit(_type, { ...e, detail: e })
+    }
+  }
+}
+
+function processModel (listeners, context, _input = false) {
+  // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
+  // 该函数必须在产生merge前执行
+  // todo 此处对于$attrs的访问会导致父组件更新时子组件必然更新，暂时用短路效应避免影响，待优化
+  // todo 访问$listeners也会导致上述现象，但是为了事件代理还必须访问$listeners，待后续思考处理
+  const modelEvent = context.$attrs.mpxModelEvent
+  const modelEventId = context.$attrs.mpxModelEventId
+  if (modelEvent && modelEventId) {
+    // 对于modelEvent，内部获得时间后向外部转发，触发外部listener的同时转发为mpxModel事件
+
+    const listener = listeners.onInput
+
+    listeners.onInput = function (e) {
+      Hummer.notifyCenter.triggerEvent(modelEventId, {
+        detail: e
+      })
+      context.$emit('mpxModel', {
+        detail: e
+      })
+      listener && listener.call(this, e)
+    }
+    // 内部listener不需要mpxModel
+    delete listeners.mpxModel
+  }
+}
+
+function mergeListeners (listeners, otherListeners, options = {}, context, __mpxTapInfo) {
+  if (!otherListeners) {
+    return
+  }
+  // "onTouchstart",
+  // "onTouchmove",
+  // "onTouchcancel",
+  // "onTouchend",
+  // "onLongtap",
+
+  // 都依赖touch事件 如果listener没有touch事件 如果是force需要强行添加一个touch事件 longTap需要根据context
+  // 特殊处理
+  const listenerMap = {}
+  tapEvents.forEach((eventName) => {
+    if (listeners[eventName]) {
+      listenerMap[eventName] = true
+      delete listeners[eventName]
+    }
+  })
+  // const otherListenerKeys = Object.keys(otherListeners)
+  // for (let key of otherListenerKeys) {
+
+  // }
+
+  Object.keys(otherListeners).forEach((key) => {
+    const listener = otherListeners[key]
+    let rawListener
+    if (tapEvents.includes(key)) {
+      // 判断onTouch是否存在 若存在 则直接处理
+      rawListener = listeners.onTouch
+
+      if (!rawListener && !options.force) {
+        return
+      } else if (!rawListener && options.force) {
+        // 创建一个touh事件 并赋值
+        listeners.onTouch = createTouch(context, listenerMap.onLongtap, __mpxTapInfo).onTouch
+        rawListener = listeners.onTouch
+      }
+      // 事件处理 onTouchstart 1 onTouchmove 2 onTouchend 3 onTouchcancel 4
+      listeners.onTouch = function (e) {
+        // const thatKey = key
+        let timer = null
+        if (key === 'onLongtap') {
+          if (e.state === 1) {
+            // start
+            timer = setTimeout(
+              () => {
+                listener.call(this, e)
+              },
+              options.before ? 340 : 360
+            )
+          } else if (e.state === 3) {
+            timer && clearTimeout(timer)
+            timer = null
+          }
+        } else {
+          if (options.before) {
+            if (key === 'onTouchstart' && e.state === 1) {
+              listener.call(this, e)
+            } else if (key === 'onTouchmove' && e.state === 2) {
+              listener.call(this, e)
+            } else if (key === 'onTouchend' && e.state === 3) {
+              listener.call(this, e)
+            } else if (key === 'onTouchcancel' && e.state === 4) {
+              listener.call(this, e)
+            }
+            rawListener.call(this, e)
+          } else {
+            rawListener.call(this, e)
+            if (key === 'onTouchstart' && e.state === 1) {
+              listener.call(this, e)
+            } else if (key === 'onTouchmove' && e.state === 2) {
+              listener.call(this, e)
+            } else if (key === 'onTouchend' && e.state === 3) {
+              listener.call(this, e)
+            } else if (key === 'onTouchcancel' && e.state === 4) {
+              listener.call(this, e)
+            }
+          }
+        }
+      }
+    } else {
+      rawListener = listeners[key]
+      if (!rawListener) {
+        if (options.force) {
+          listeners[key] = listener
+        }
+      } else {
+        listeners[key] = function (e) {
+          if (options.before) {
+            listener.call(this, e)
+            rawListener.call(this, e)
+          } else {
+            rawListener.call(this, e)
+            listener.call(this, e)
+          }
+        }
+      }
+    }
+  })
+}
+// 没有tap 用touch模拟 touchstart touchmove touchcancel touchend tap longpress langtap
+function processTouchAndLtap (listeners, context, __mpxTapInfo) {
+  const listenerMap = {}
+  tapEvents.forEach((eventName) => {
+    if (listeners[eventName]) {
+      listenerMap[eventName] = true
+      delete listeners[eventName]
+    }
+  })
+  if (isEmptyObject(listenerMap)) return
+  const events = createTouch(context, listenerMap.onLongtap, __mpxTapInfo)
+  mergeListeners(
+    listeners,
+    events,
+    {
+      force: true
+    },
+    context,
+    __mpxTapInfo
+  )
+}
+
+export function extendEvent (e, extendObj = {}) {
+  Object.keys(extendObj).forEach((key) => {
+    Object.defineProperty(e, key, {
+      value: extendObj[key],
+      enumerable: true,
+      configurable: true,
+      writable: true
+    })
+  })
+}
+
+export function inheritEvent (type, oe, detail = {}) {
+  detail = Object.assign({}, oe.detail, detail)
+  const ne = getCustomEvent(type, detail)
+  extendEvent(ne, {
+    timeStamp: oe.timeStamp,
+    target: oe.target,
+    currentTarget: oe.currentTarget,
+    stopPropagation: oe.stopPropagation.bind(oe),
+    preventDefault: oe.preventDefault.bind(oe)
+  })
+  return ne
+}
+
+export function getCustomEvent (type, detail = {}, target = null) {
+  return {
+    type,
+    detail,
+    target,
+    timeStamp: new Date().valueOf()
+  }
+}
+
+function noop () {}
+
+function getListeners (context) {
+  const attrs = context.$attrs
+  const listeners = {}
+  Object.keys(attrs).forEach((v) => {
+    if (/^on[A-Z]/.test(v)) {
+      listeners[v] = attrs[v]
+    }
+  })
+  return listeners
+}
+
+export default function getInnerListeners (context, options = {}) {
+  let {
+    mergeBefore = {},
+    mergeAfter = {},
+    defaultListeners = [],
+    ignoredListeners = [],
+    _input = false
+  } = options
+  const __mpxTapInfo = {}
+  // 从attrs里面拿到以on开头的所有绑定的事件
+  const listeners = Object.assign({}, getListeners(context))
+
+  defaultListeners.forEach((key) => {
+    if (!listeners[key]) listeners[key] = noop
+  })
+  const mergeBeforeOptions = {
+    before: true
+  }
+  const mergeAfterOptions = {
+    before: false
+  }
+
+  if (mergeBefore.listeners) {
+    mergeBeforeOptions.force = mergeBefore.force
+    mergeBefore = mergeBefore.listeners
+  }
+
+  if (mergeAfter.listeners) {
+    mergeAfterOptions.force = mergeAfter.force
+    mergeAfter = mergeAfter.listeners
+  }
+  processOriginEvent(listeners, context, _input)
+  processModel(listeners, context, _input)
+  processTouchAndLtap(listeners, context, __mpxTapInfo)
+  mergeListeners(listeners, mergeBefore, mergeBeforeOptions, context, __mpxTapInfo)
+  mergeListeners(listeners, mergeAfter, mergeAfterOptions, context, __mpxTapInfo)
+  ignoredListeners.forEach((key) => {
+    delete listeners[key]
+  })
+  return listeners
+}