@mpxjs/webpack-plugin 2.10.16 → 2.10.17

package/lib/runtime/components/react/dist/utils.d.ts

@@ -0,0 +1,123 @@
+import { ReactNode, ReactElement, Dispatch, SetStateAction, MutableRefObject } from 'react';
+import { LayoutChangeEvent, TextStyle, ImageProps } from 'react-native';
+import { FastImageProps } from '@d11/react-native-fast-image';
+import type { AnyFunc } from './types/common';
+export declare const TEXT_STYLE_REGEX: RegExp;
+export declare const PERCENT_REGEX: RegExp;
+export declare const URL_REGEX: RegExp;
+export declare const SVG_REGEXP: RegExp;
+export declare const BACKGROUND_REGEX: RegExp;
+export declare const TEXT_PROPS_REGEX: RegExp;
+export declare const DEFAULT_FONT_SIZE = 16;
+export declare const HIDDEN_STYLE: {
+    opacity: number;
+};
+export declare const isIOS: boolean;
+export declare const isAndroid: boolean;
+export declare const isHarmony: boolean;
+export declare function useNavigation(): Record<string, any> | undefined;
+export declare function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K>;
+/**
+ * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
+ */
+export declare const useUpdateEffect: (effect: any, deps: any) => void;
+export declare const parseUrl: (cssUrl?: string) => string | undefined;
+export declare const getRestProps: (transferProps?: any, originProps?: any, deletePropsKey?: any) => any;
+export declare function isText(ele: ReactNode): ele is ReactElement;
+export declare function every(children: ReactNode, callback: (children: ReactNode) => boolean): boolean;
+type GroupData<T> = Record<string, Partial<T>>;
+export declare function groupBy<T extends Record<string, any>>(obj: T, callback: (key: string, val: T[keyof T]) => string, group?: GroupData<T>): GroupData<T>;
+export declare function splitStyle<T extends Record<string, any>>(styleObj: T): {
+    textStyle?: Partial<T>;
+    backgroundStyle?: Partial<T>;
+    innerStyle?: Partial<T>;
+};
+interface TransformStyleConfig {
+    enableVar?: boolean;
+    externalVarContext?: Record<string, any>;
+    parentFontSize?: number;
+    parentWidth?: number;
+    parentHeight?: number;
+}
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+    hasVarDec: boolean;
+    varContextRef: MutableRefObject<{}>;
+    setWidth: Dispatch<SetStateAction<number>>;
+    setHeight: Dispatch<SetStateAction<number>>;
+    normalStyle: Record<string, any>;
+    hasSelfPercent: boolean;
+    hasPositionFixed: boolean;
+};
+export interface VisitorArg {
+    target: Record<string, any>;
+    key: string;
+    value: any;
+    keyPath: Array<string>;
+}
+export declare function traverseStyle(styleObj: Record<string, any>, visitors: Array<(arg: VisitorArg) => void>): void;
+export declare function setStyle(styleObj: Record<string, any>, keyPath: Array<string>, setter: (arg: VisitorArg) => void): void;
+export declare function splitProps<T extends Record<string, any>>(props: T): {
+    textProps?: Partial<T>;
+    innerProps?: Partial<T>;
+};
+interface LayoutConfig {
+    props: Record<string, any>;
+    hasSelfPercent: boolean;
+    setWidth?: Dispatch<SetStateAction<number>>;
+    setHeight?: Dispatch<SetStateAction<number>>;
+    onLayout?: (event?: LayoutChangeEvent) => void;
+    nodeRef: React.RefObject<any>;
+}
+export declare const useLayout: ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }: LayoutConfig) => {
+    layoutRef: MutableRefObject<{}>;
+    layoutStyle: {};
+    layoutProps: Record<string, any>;
+};
+export interface WrapChildrenConfig {
+    hasVarDec: boolean;
+    varContext?: Record<string, any>;
+    textStyle?: TextStyle;
+    textProps?: Record<string, any>;
+}
+export declare function wrapChildren(props: Record<string, any> | undefined, { hasVarDec, varContext, textStyle, textProps }: WrapChildrenConfig): any;
+export declare const debounce: <T extends AnyFunc>(func: T, delay: number) => ((...args: Parameters<T>) => void) & {
+    clear: () => void;
+};
+export declare const useDebounceCallback: <T extends AnyFunc>(func: T, delay: number) => ((...args: Parameters<T>) => void) & {
+    clear: () => void;
+};
+export declare const useStableCallback: <T extends AnyFunc | null | undefined>(callback: T) => T extends AnyFunc ? T : () => void;
+export declare function usePrevious<T>(value: T): T | undefined;
+export interface GestureHandler {
+    nodeRefs?: Array<{
+        getNodeInstance: () => {
+            nodeRef: unknown;
+        };
+    }>;
+    current?: unknown;
+}
+export declare function flatGesture(gestures?: Array<GestureHandler>): any[];
+export declare const extendObject: {
+    <T extends {}, U>(target: T, source: U): T & U;
+    <T_1 extends {}, U_1, V>(target: T_1, source1: U_1, source2: V): T_1 & U_1 & V;
+    <T_2 extends {}, U_2, V_1, W>(target: T_2, source1: U_2, source2: V_1, source3: W): T_2 & U_2 & V_1 & W;
+    (target: object, ...sources: any[]): any;
+};
+export declare function getCurrentPage(pageId: number | null | undefined): any;
+export declare function renderImage(imageProps: ImageProps | FastImageProps, enableFastImage?: boolean): ReactElement<ImageProps | FastImageProps, string | import("react").JSXElementConstructor<any>>;
+export declare function pickStyle(styleObj: Record<string, any> | undefined, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string): Record<string, any>;
+export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }: {
+    enableHover: boolean;
+    hoverStartTime: number;
+    hoverStayTime: number;
+    disabled?: boolean;
+}): {
+    isHover: boolean;
+    gesture?: undefined;
+} | {
+    isHover: boolean;
+    gesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+};
+export declare function useRunOnJSCallback(callbackMapRef: MutableRefObject<Record<string, AnyFunc>>): (key: string, ...args: any) => any;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/lib/runtime/components/react/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../utils.tsx"],"names":[],"mappings":"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"}

package/lib/runtime/components/react/dist/utils.jsx

@@ -169,24 +169,34 @@ function transformPercent(styleObj, percentKeyPaths, percentConfig) {
 function resolveVar(input, varContext) {
     const parsed = parseFunc(input, 'var');
     const replaced = new ReplaceSource(input);
-    parsed.forEach(({ start, end, args }) => {
+    for (const { start, end, args } of parsed) {
         const varName = args[0];
-        const fallback = args[1] || '';
+        const fallback = args[1];
         let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback;
+        if (varValue === undefined)
+            return;
         if (varUseRegExp.test(varValue)) {
-            varValue = '' + resolveVar(varValue, varContext);
+            varValue = resolveVar(varValue, varContext);
+            if (varValue === undefined)
+                return;
         }
         else {
-            varValue = '' + global.__formatValue(varValue);
+            varValue = global.__formatValue(varValue);
         }
         replaced.replace(start, end - 1, varValue);
-    });
+    }
     return global.__formatValue(replaced.source());
 }
 function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
     varKeyPaths.forEach((varKeyPath) => {
         setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
-            target[key] = resolveVar(value, varContext);
+            const resolved = resolveVar(value, varContext);
+            if (resolved === undefined) {
+                delete target[key];
+                error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`);
+                return;
+            }
+            target[key] = resolved;
             visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -310,6 +310,6 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   return canvasComponent
 })
 
-_Canvas.displayName = 'mpxCanvas'
+_Canvas.displayName = 'MpxCanvas'
 
 export default _Canvas

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

@@ -62,8 +62,8 @@ export interface ImageProps {
 }
 
 interface ImageState {
-  viewWidth?: number
-  viewHeight?: number
+  viewWidth: number
+  viewHeight: number
   imageWidth?: number
   imageHeight?: number
   ratio?: number
@@ -93,9 +93,20 @@ const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
   ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
 ])
 
-const isNumber = (value: DimensionValue) => typeof value === 'number'
+const isNumber = (value: DimensionValue): value is number => typeof value === 'number'
 
-const relativeCenteredSize = (viewSize: number, imageSize: number) => (viewSize - imageSize) / 2
+const relativeCenteredSize = (viewSize: number, imageSize: number) => {
+  return (viewSize - imageSize) / 2
+}
+
+// 获取能完全显示图片的缩放比例：长宽方向的缩放比例最小值即为能完全展示的比例
+function getFitScale (width1: number, height1: number, width2: number, height2: number) {
+  return Math.min(width2 / width1, height2 / height1)
+}
+
+function getFillScale (width1: number, height1: number, width2: number, height2: number) {
+  return Math.max(width2 / width1, height2 / height1)
+}
 
 function noMeetCalcRule (isSvg: boolean, mode: Mode, viewWidth: number, viewHeight: number, ratio: number) {
   const isMeetSize = viewWidth && viewHeight && ratio
@@ -104,6 +115,17 @@ function noMeetCalcRule (isSvg: boolean, mode: Mode, viewWidth: number, viewHeig
   return false
 }
 
+const getFixedWidth = (viewWidth: number, viewHeight: number, ratio: number) => {
+  if (!ratio) return viewWidth
+  const fixed = viewHeight / ratio
+  return !fixed ? viewWidth : fixed
+}
+
+const getFixedHeight = (viewWidth: number, viewHeight: number, ratio: number) => {
+  const fixed = viewWidth * ratio
+  return !fixed ? viewHeight : fixed
+}
+
 const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, ref): JSX.Element => {
   const {
     src = '',
@@ -131,8 +153,6 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     { overflow: 'hidden' }
   )
 
-  const state = useRef<ImageState>({})
-
   const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, {
     defaultStyle
@@ -148,14 +168,18 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
     state.current.viewWidth = width
     state.current.viewHeight = height
-
+    // 实际渲染尺寸可能会指定的值不一致，误差低于 0.5 则认为没有变化
+    if (Math.abs(viewHeight - height) < 0.5 && Math.abs(viewWidth - width) < 0.5) {
+      if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+        if (!loaded) setLoaded(true)
+      }
+      return
+    }
     if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
-      setViewWidth(width)
-      setViewHeight(height)
       setRatio(state.current.ratio)
       setImageWidth(state.current.imageWidth)
       setImageHeight(state.current.imageHeight)
-      state.current = {}
+      setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio!)
       setLoaded(true)
     }
   }
@@ -186,43 +210,57 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   const [ratio, setRatio] = useState(0)
   const [loaded, setLoaded] = useState(!isLayoutMode)
 
-  const fixedHeight = useMemo(() => {
-    const fixed = viewWidth * ratio
-    return !fixed ? viewHeight : fixed
-  }, [ratio, viewWidth, viewHeight])
+  const state = useRef<ImageState>({
+    viewWidth,
+    viewHeight
+  })
 
-  const fixedWidth = useMemo(() => {
-    if (!ratio) return viewWidth
-    const fixed = viewHeight / ratio
-    return !fixed ? viewWidth : fixed
-  }, [ratio, viewWidth, viewHeight])
+  function setViewSize (viewWidth: number, viewHeight: number, ratio: number) {
+    // 在特定模式下可预测 view 的变化，在onLayout触发时能以此避免重复render
+    switch (mode) {
+      case 'widthFix': {
+        setViewWidth(viewWidth)
+        const fixedHeight = getFixedHeight(viewWidth, viewHeight, ratio)
+        setViewHeight(fixedHeight)
+        break
+      }
+      case 'heightFix': {
+        setViewHeight(viewHeight)
+        const fixedWidth = getFixedWidth(viewWidth, viewHeight, ratio)
+        setViewWidth(fixedWidth)
+        break
+      }
+      default:
+        setViewHeight(viewHeight)
+        setViewWidth(viewWidth)
+        break
+    }
+  }
 
   const modeStyle: ImageStyle = useMemo(() => {
     if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio)) return {}
     switch (mode) {
-      case 'scaleToFill':
+      case 'scaleToFill': // wx 中 svg 图片的 scaleToFill 模式效果与 aspectFit 一致，不会就行图片缩放，此处保持一致
       case 'aspectFit':
         if (isSvg) {
-          const scale = ratio <= 1
-            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
+          const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight)
           return {
             transform: [
-              { scale },
-              ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+              { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+              { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+              { scale }
             ]
           }
         }
         return {}
       case 'aspectFill':
         if (isSvg) {
-          const scale = ratio >= 1
-            ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-            : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight
+          const scale = getFillScale(imageWidth, imageHeight, viewWidth, viewHeight)
           return {
             transform: [
-              { scale },
-              ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+              { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+              { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+              { scale }
             ]
           }
         }
@@ -230,9 +268,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       case 'widthFix':
       case 'heightFix':
         if (isSvg) {
-          const scale = ratio >= 1
-            ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
-            : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight
+          const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight)
           return {
             transform: [{ scale }]
           }
@@ -295,13 +331,25 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       default:
         return {}
     }
-  }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight])
+  }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio])
 
   const onSvgLoad = (evt: LayoutChangeEvent) => {
     const { width, height } = evt.nativeEvent.layout
-    setRatio(!width ? 0 : height / width)
-    setImageWidth(width)
+    state.current.imageHeight = height
     setImageHeight(height)
+    state.current.ratio = !width ? 0 : height / width
+
+    if (isWidthFixMode
+      ? state.current.viewWidth
+      : isHeightFixMode
+        ? state.current.viewHeight
+        : state.current.viewWidth && state.current.viewHeight) {
+      setRatio(state.current.ratio)
+      setImageWidth(width)
+      setImageHeight(height)
+      setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio)
+      setLoaded(true)
+    }
 
     bindload && bindload(
       getCustomEvent(
@@ -375,12 +423,11 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
             : isHeightFixMode
               ? state.current.viewHeight
               : state.current.viewWidth && state.current.viewHeight) {
-            state.current.viewWidth && setViewWidth(state.current.viewWidth)
-            state.current.viewHeight && setViewHeight(state.current.viewHeight)
-            setRatio(!width ? 0 : height / width)
+            setRatio(state.current.ratio)
             setImageWidth(width)
             setImageHeight(height)
-            state.current = {}
+            setViewSize(state.current.viewWidth!, state.current.viewHeight!, state.current.ratio!)
+
             setLoaded(true)
           }
         },
@@ -402,8 +449,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           {},
           normalStyle,
           layoutStyle,
-          isHeightFixMode ? { width: fixedWidth } : {},
-          isWidthFixMode ? { height: fixedHeight } : {}
+          isHeightFixMode ? { width: viewWidth } : {},
+          isWidthFixMode ? { height: viewHeight } : {}
         )
       }
     ),
@@ -417,44 +464,50 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   )
 
-  const SvgImage = createElement(
-    View,
-    innerProps,
-    createElement(SvgCssUri, {
-      uri: src,
-      onLayout: onSvgLoad,
-      onError: binderror && onSvgError,
-      style: extendObject(
-        { transformOrigin: 'left top' },
-        modeStyle
-      )
-    })
-  )
-
-  const BaseImage = renderImage(
-    extendObject(
-      {
-        source: { uri: src },
-        resizeMode: resizeMode,
-        onLoad: bindload && onImageLoad,
-        onError: binderror && onImageError,
+  function renderSvgImage () {
+    return createElement(
+      View,
+      innerProps,
+      createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
         style: extendObject(
-          {
-            transformOrigin: 'left top',
-            width: isCropMode ? imageWidth : '100%',
-            height: isCropMode ? imageHeight : '100%'
-          },
-          isCropMode ? modeStyle : {}
+          { transformOrigin: 'left top' },
+          modeStyle
         )
-      },
-      isLayoutMode ? {} : innerProps
-    ),
-    enableFastImage
-  )
+      })
+    )
+  }
+
+  function renderBaseImage () {
+    return renderImage(
+      extendObject(
+        {
+          source: { uri: src },
+          resizeMode: resizeMode,
+          onLoad: bindload && onImageLoad,
+          onError: binderror && onImageError,
+          style: extendObject(
+            {
+              transformOrigin: 'left top',
+              width: isCropMode ? imageWidth : '100%',
+              height: isCropMode ? imageHeight : '100%'
+            },
+            isCropMode ? modeStyle : {}
+          )
+        },
+        isLayoutMode ? {} : innerProps
+      ),
+      enableFastImage
+    )
+  }
 
-  const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
+  function renderLayoutImage () {
+    return createElement(View, innerProps, loaded && renderBaseImage())
+  }
 
-  const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+  const finalComponent = isSvg ? renderSvgImage() : isLayoutMode ? renderLayoutImage() : renderBaseImage()
 
   if (hasPositionFixed) {
     return createElement(Portal, null, finalComponent)
@@ -463,6 +516,6 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   return finalComponent
 })
 
-Image.displayName = 'mpx-image'
+Image.displayName = 'MpxImage'
 
 export default Image

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

@@ -280,8 +280,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const setKeyboardAvoidContext = () => {
-    if (adjustPosition && keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef }
+    if (keyboardAvoid) {
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition }
     }
   }
 
@@ -296,19 +296,42 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
-    bindfocus && bindfocus(
-      getCustomEvent(
-        'focus',
-        evt,
-        {
-          detail: {
-            value: tmpValue.current || ''
-          },
-          layoutRef
-        },
-        props
-      )
-    )
+
+    if (bindfocus) {
+      const focusAction = () => {
+        bindfocus(
+          getCustomEvent(
+            'focus',
+            evt,
+            {
+              detail: {
+                value: tmpValue.current || '',
+                height: keyboardAvoid?.current?.keyboardHeight
+              },
+              layoutRef
+            },
+            props
+          )
+        )
+        if (keyboardAvoid?.current?.onKeyboardShow) {
+          keyboardAvoid.current.onKeyboardShow = undefined
+        }
+      }
+      if (keyboardAvoid?.current) {
+        // 有 keyboardAvoiding
+        if (keyboardAvoid.current.keyboardHeight) {
+          // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
+          focusAction()
+        } else {
+          // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
+          evt.persist()
+          keyboardAvoid.current.onKeyboardShow = focusAction
+        }
+      } else {
+        // 无 keyboardAvoiding，直接执行 focus 回调
+        focusAction()
+      }
+    }
   }
 
   const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {