@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.1

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

@@ -1,6 +1,6 @@
 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 { 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;
@@ -15,6 +15,12 @@ export declare const HIDDEN_STYLE: {
 export declare const isIOS: boolean;
 export declare const isAndroid: boolean;
 export declare const isHarmony: boolean;
+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 useNavigation(): Record<string, any> | undefined;
 export declare function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K>;
 /**
@@ -32,14 +38,16 @@ export declare function splitStyle<T extends Record<string, any>>(styleObj: T):
     backgroundStyle?: Partial<T>;
     innerStyle?: Partial<T>;
 };
+export declare function parseValues(str: string, char?: string): string[];
 interface TransformStyleConfig {
     enableVar?: boolean;
     externalVarContext?: Record<string, any>;
     parentFontSize?: number;
     parentWidth?: number;
     parentHeight?: number;
+    transformRadiusPercent?: boolean;
 }
-export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, transformRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
     hasVarDec: boolean;
     varContextRef: MutableRefObject<{}>;
     setWidth: Dispatch<SetStateAction<number>>;
@@ -97,12 +105,6 @@ export interface GestureHandler {
     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>;
@@ -120,4 +122,3 @@ export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, d
 };
 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.jsx

@@ -4,7 +4,6 @@ import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } fr
 import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
-import FastImage from '@d11/react-native-fast-image';
 import { Gesture } from 'react-native-gesture-handler';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
@@ -24,6 +23,7 @@ const varUseRegExp = /var\(/;
 const unoVarDecRegExp = /^--un-/;
 const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
+const calcPercentExp = /^calc\(.*-?\d+(\.\d+)?%.*\)$/;
 const envUseRegExp = /env\(/;
 const filterRegExp = /(calc|env|%)/;
 const safeAreaInsetMap = {
@@ -32,6 +32,7 @@ const safeAreaInsetMap = {
     'safe-area-inset-bottom': 'bottom',
     'safe-area-inset-left': 'left'
 };
+export const extendObject = Object.assign;
 function getSafeAreaInset(name, navigation) {
     const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets);
     return insets[safeAreaInsetMap[name]];
@@ -110,15 +111,17 @@ export function splitStyle(styleObj) {
         }
     });
 }
-const selfPercentRule = {
-    translateX: 'width',
-    translateY: 'height',
+const radiusPercentRule = {
     borderTopLeftRadius: 'width',
     borderBottomLeftRadius: 'width',
     borderBottomRightRadius: 'width',
     borderTopRightRadius: 'width',
     borderRadius: 'width'
 };
+const selfPercentRule = extendObject({
+    translateX: 'width',
+    translateY: 'height'
+}, radiusPercentRule);
 const parentHeightPercentRule = {
     height: true,
     minHeight: true,
@@ -170,19 +173,22 @@ function resolveVar(input, varContext) {
     const parsed = parseFunc(input, 'var');
     const replaced = new ReplaceSource(input);
     for (const { start, end, args } of parsed) {
+        // NOTE:
+        // - CSS var() fallback 允许包含空格、逗号等字符（如 font-family 的 fallback）
+        // - parseFunc 会按逗号分割 args，因此这里把 args[1..] 重新 join 回 fallback
         const varName = args[0];
-        const fallback = args[1];
-        let varValue = hasOwn(varContext, varName) ? varContext[varName] : fallback;
-        if (varValue === undefined)
-            return;
-        if (varUseRegExp.test(varValue)) {
-            varValue = resolveVar(varValue, varContext);
-            if (varValue === undefined)
-                return;
+        const fallback = args.length > 1 ? args.slice(1).join(',').trim() : undefined;
+        // 先处理 varValue
+        let varValue = hasOwn(varContext, varName) ? varContext[varName] : undefined;
+        if (varValue !== undefined) {
+            varValue = varUseRegExp.test(varValue) ? resolveVar(varValue, varContext) : global.__formatValue(varValue);
         }
-        else {
-            varValue = global.__formatValue(varValue);
+        // 再处理 fallback
+        if (varValue === undefined && fallback !== undefined) {
+            varValue = varUseRegExp.test(fallback) ? resolveVar(fallback, varContext) : global.__formatValue(fallback);
         }
+        if (varValue === undefined)
+            return;
         replaced.replace(start, end - 1, varValue);
     }
     return global.__formatValue(replaced.source());
@@ -241,6 +247,10 @@ function transformStringify(styleObj) {
     if (isNumber(styleObj.fontWeight)) {
         styleObj.fontWeight = '' + styleObj.fontWeight;
     }
+    // transformOrigin 20px 需要转换为 transformOrigin '20'
+    if (isNumber(styleObj.transformOrigin)) {
+        styleObj.transformOrigin = '' + styleObj.transformOrigin;
+    }
 }
 function transformPosition(styleObj, meta) {
     if (styleObj.position === 'fixed') {
@@ -249,7 +259,7 @@ function transformPosition(styleObj, meta) {
     }
 }
 // 多value解析
-function parseValues(str, char = ' ') {
+export function parseValues(str, char = ' ') {
     let stack = 0;
     let temp = '';
     const result = [];
@@ -261,11 +271,11 @@ function parseValues(str, char = ' ') {
             stack--;
         }
         // 非括号内 或者 非分隔字符且非空
-        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+        if (stack !== 0 || str[i] !== char) {
             temp += str[i];
         }
         if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-            result.push(temp);
+            result.push(temp.trim());
             temp = '';
         }
     }
@@ -274,6 +284,8 @@ function parseValues(str, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform(transformStr) {
     const values = parseValues(transformStr);
+    // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+    values.sort();
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\((.+)\)/);
@@ -337,7 +349,7 @@ function transformBoxShadow(styleObj) {
         return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
     }, '');
 }
-export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
+export function useTransformStyle(styleObj = {}, { enableVar, transformRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
     const normalStyle = {};
@@ -386,13 +398,20 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             envKeyPaths.push(keyPath.slice());
         }
     }
-    function calcVisitor({ value, keyPath }) {
+    function calcVisitor({ key, value, keyPath }) {
         if (calcUseRegExp.test(value)) {
+            // calc translate & border-radius 的百分比计算
+            if (hasOwn(selfPercentRule, key) && calcPercentExp.test(value)) {
+                hasSelfPercent = true;
+                percentKeyPaths.push(keyPath.slice());
+            }
             calcKeyPaths.push(keyPath.slice());
         }
     }
     function percentVisitor({ key, value, keyPath }) {
-        if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+        // fixme 去掉 translate & border-radius 的百分比计算
+        // fixme Image 组件 borderRadius 仅支持 number
+        if (transformRadiusPercent && hasOwn(radiusPercentRule, key) && PERCENT_REGEX.test(value)) {
             hasSelfPercent = true;
             percentKeyPaths.push(keyPath.slice());
         }
@@ -467,7 +486,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformStringify(normalStyle);
     // transform rpx to px
     transformBoxShadow(normalStyle);
-    // transform 字符串格式转化数组格式
+    // transform 字符串格式转化数组格式(先转数组再处理css var)
     transformTransform(normalStyle);
     return {
         hasVarDec,
@@ -612,15 +631,19 @@ export function flatGesture(gestures = []) {
         return gesture?.current ? [gesture] : [];
     })) || [];
 }
-export const extendObject = Object.assign;
 export function getCurrentPage(pageId) {
     if (!global.getCurrentPages)
         return;
     const pages = global.getCurrentPages();
     return pages.find((page) => isFunction(page.getPageId) && page.getPageId() === pageId);
 }
-export function renderImage(imageProps, enableFastImage = false) {
-    const Component = enableFastImage ? FastImage : Image;
+export function renderImage(imageProps, enableFastImage = true) {
+    let Component = Image;
+    if (enableFastImage) {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const fastImageModule = require('@d11/react-native-fast-image');
+        Component = fastImageModule.default || fastImageModule;
+    }
     return createElement(Component, imageProps);
 }
 export function pickStyle(styleObj = {}, pickedKeys, callback) {

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -1,6 +1,5 @@
 import { useState, ComponentType, useEffect, useCallback, useRef, ReactNode, createElement } from 'react'
 import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native'
-import FastImage from '@d11/react-native-fast-image'
 import { AnyFunc } from './types/common'
 
 const asyncChunkMap = new Map()
@@ -82,6 +81,9 @@ const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
 }
 
 const DefaultLoading = () => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const FastImageModule = require('@d11/react-native-fast-image')
+  const FastImage = FastImageModule.default || FastImageModule
   return (
     <View style={styles.container}>
       <FastImage

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

@@ -0,0 +1,327 @@
+import React, { createElement, forwardRef, useRef, useCallback, useContext, useState, useEffect } from 'react'
+import { useTransformStyle, useLayout, extendObject } from './utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import { noop } from '@mpxjs/utils'
+import { RouteContext } from './context'
+
+const qualityValue = {
+  high: 90,
+  normal: 75,
+  low: 50,
+  original: 100
+}
+
+interface CameraProps {
+  mode?: 'normal' | 'scanCode'
+  resolution?: 'low' | 'medium' | 'high'
+  devicePosition?: 'front' | 'back'
+  flash?: 'auto' | 'on' | 'off'
+  frameSize?: 'small' | 'medium' | 'large'
+  style?: Record<string, any>
+  bindstop?: () => void
+  binderror?: (error: { message: string }) => void
+  bindinitdone?: (result: { type: string, data: string }) => void
+  bindscancode?: (result: { type: string, data: string }) => void
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'enable-var'?: boolean
+  'external-var-context'?: any
+}
+
+interface TakePhotoOptions {
+  quality?: 'high' | 'normal' | 'low' | 'original'
+  success?: (result: { errMsg: string, tempImagePath: string }) => void
+  fail?: (result: { errMsg: string }) => void
+  complete?: (result: { errMsg: string, tempImagePath?: string }) => void
+}
+
+interface RecordOptions {
+  timeout?: number
+  success?: (result: { errMsg: string }) => void
+  fail?: (result: { errMsg: string, error?: any }) => void
+  complete?: (result: { errMsg: string }) => void
+  timeoutCallback?: (result: { errMsg: string, error?: any }) => void
+}
+
+interface StopRecordOptions {
+  success?: (result: { errMsg: string, tempVideoPath: string, duration: number }) => void
+  fail?: (result: { errMsg: string }) => void
+  complete?: (result: { errMsg: string, tempVideoPath?: string, duration?: number }) => void
+}
+
+interface CameraRef {
+  setZoom: (zoom: number) => void
+  takePhoto: (options?: TakePhotoOptions) => void
+  startRecord: (options?: RecordOptions) => void
+  stopRecord: (options?: StopRecordOptions) => void
+}
+
+type HandlerRef<T, P> = {
+  current: T | null
+}
+
+let RecordRes: any = null
+
+const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: CameraProps, ref): JSX.Element | null => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { Camera, useCameraDevice, useCodeScanner, useCameraFormat } = require('react-native-vision-camera')
+  const cameraRef = useRef<any>(null)
+  const {
+    mode = 'normal',
+    resolution = 'medium',
+    devicePosition = 'back',
+    flash = 'auto',
+    frameSize = 'medium',
+    bindinitdone,
+    bindstop,
+    bindscancode,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    style = {}
+  } = props
+  const styleObj = extendObject(
+    {},
+    style
+  )
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: cameraRef })
+  const isPhoto = mode === 'normal'
+  const device = useCameraDevice(devicePosition || 'back')
+  const { navigation } = useContext(RouteContext) || {}
+  const [zoomValue, setZoomValue] = useState<number>(1)
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null)
+  const hasCamera = useRef(false)
+
+  // 先定义常量，避免在条件判断后使用
+  const maxZoom = device?.maxZoom || 1
+  const RESOLUTION_MAPPING: Record<string, { width: number, height: number }> = {
+    low: { width: 640, height: 480 },
+    medium: { width: 1280, height: 720 },
+    high: { width: 1920, height: 1080 }
+  }
+  const FRAME_SIZE_MAPPING: Record<string, { width: number, height: number }> = {
+    small: { width: 480, height: 360 },
+    medium: { width: 720, height: 540 },
+    large: { width: 1080, height: 810 }
+  }
+
+  const format = useCameraFormat(device, [
+    {
+      photoResolution: RESOLUTION_MAPPING[resolution],
+      videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
+    }
+  ])
+
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr', 'ean-13'],
+    onCodeScanned: (codes: any[]) => {
+      const result = codes.map(code => code.value).join(',')
+      bindscancode && bindscancode(getCustomEvent('scancode', {}, {
+        detail: {
+          result: codes.map(code => code.value).join(',')
+        }
+      }))
+    }
+  })
+
+  const onInitialized = useCallback(() => {
+    bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
+      detail: {
+        maxZoom
+      }
+    }))
+  }, [bindinitdone, maxZoom])
+
+  const onStopped = useCallback(() => {
+    bindstop && bindstop()
+  }, [bindstop])
+
+  const camera: CameraRef = {
+    setZoom: (zoom: number) => {
+      setZoomValue(zoom)
+    },
+    takePhoto: (options: TakePhotoOptions = {}) => {
+      const { success = noop, fail = noop, complete = noop } = options
+      cameraRef.current?.takePhoto?.({
+        flash,
+        quality: qualityValue[options.quality || 'normal'] as number
+      } as any).then((res: { path: any }) => {
+        const result = {
+          errMsg: 'takePhoto:ok',
+          tempImagePath: res.path
+        }
+        success(result)
+        complete(result)
+      }).catch(() => {
+        const result = {
+          errMsg: 'takePhoto:fail'
+        }
+        fail(result)
+        complete(result)
+      })
+    },
+    startRecord: (options: RecordOptions = {}) => {
+      let { timeout = 30, success = noop, fail = noop, complete = noop, timeoutCallback = noop } = options
+      timeout = timeout > 300 ? 300 : timeout
+      let recordTimer: NodeJS.Timeout | null = null
+      let isTimeout = false
+      try {
+        const result = {
+          errMsg: 'startRecord:ok'
+        }
+        success(result)
+        complete(result)
+
+        cameraRef.current?.startRecording?.({
+          flash,
+          onRecordingError: (error: any) => {
+            if (recordTimer) clearTimeout(recordTimer)
+            const errorResult = {
+              errMsg: 'startRecord:fail during recording',
+              error: error
+            }
+            timeoutCallback(errorResult)
+          },
+          onRecordingFinished: (video: any) => {
+            RecordRes = video
+            if (recordTimer) clearTimeout(recordTimer)
+          }
+        })
+
+        recordTimer = setTimeout(() => { // 超时自动停止
+          isTimeout = true
+          cameraRef.current?.stopRecording().catch(() => {
+            // 忽略停止录制时的错误
+          })
+        }, timeout * 1000)
+      } catch (error: any) {
+        if (recordTimer) clearTimeout(recordTimer)
+        const result = {
+          errMsg: 'startRecord:fail ' + (error.message || 'unknown error')
+        }
+        fail(result)
+        complete(result)
+      }
+    },
+    stopRecord: (options: StopRecordOptions = {}) => {
+      const { success = noop, fail = noop, complete = noop } = options
+      try {
+        cameraRef.current?.stopRecording().then(() => {
+          setTimeout(() => {
+            if (RecordRes) {
+              const result = {
+                errMsg: 'stopRecord:ok',
+                tempVideoPath: RecordRes?.path,
+                duration: RecordRes.duration * 1000 // 转成ms
+              }
+              RecordRes = null
+              success(result)
+              complete(result)
+            }
+          }, 200) // 延时200ms，确保录制结果已准备好
+        }).catch((e: any) => {
+          const result = {
+            errMsg: 'stopRecord:fail ' + (e.message || 'promise rejected')
+          }
+          fail(result)
+          complete(result)
+        })
+      } catch (error: any) {
+        const result = {
+          errMsg: 'stopRecord:fail ' + (error.message || 'unknown error')
+        }
+        fail(result)
+        complete(result)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (navigation) {
+      if (navigation && !navigation.camera) {
+        navigation.camera = camera
+      } else {
+        hasCamera.current = true
+        navigation.camera.multi = true
+      }
+    }
+    const checkCameraPermission = async () => {
+      try {
+        const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission
+        if (typeof cameraPermission === 'function') {
+          const permissionResult = await cameraPermission()
+          setHasPermission(permissionResult === true)
+        } else {
+          setHasPermission(true)
+        }
+      } catch (error) {
+        setHasPermission(false)
+      }
+    }
+    checkCameraPermission()
+    return () => {
+      if (navigation && navigation.camera) {
+        navigation.camera = null
+      }
+    }
+  }, [])
+
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: cameraRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        isActive: true,
+        photo: true,
+        video: true,
+        onInitialized,
+        onStopped,
+        device,
+        format,
+        codeScanner: !isPhoto ? codeScanner : undefined,
+        zoom: zoomValue
+      }
+    ),
+    [
+      'mode',
+      'resolution',
+      'frame-size',
+      'bindinitdone',
+      'bindstop',
+      'flash',
+      'bindscancode',
+      'binderror'
+    ],
+    {
+      layoutRef
+    }
+  )
+
+  if (!hasPermission || hasCamera.current || !device) {
+    return null
+  }
+
+  return createElement(Camera, innerProps)
+})
+
+_camera.displayName = 'MpxCamera'
+
+export default _camera

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

@@ -26,7 +26,7 @@ import { noop } from '@mpxjs/utils'
 import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
 import Portal from './mpx-portal'
 
 export type Mode =
@@ -190,7 +190,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,