@mpxjs/webpack-plugin 2.10.6-beta.7 → 2.10.7-beta.1

package/lib/runtime/components/react/dist/mpx-view.jsx

@@ -57,7 +57,7 @@ const normalizeStyle = (style = {}) => {
 const isPercent = (val) => typeof val === 'string' && PERCENT_REGEX.test(val);
 const isBackgroundSizeKeyword = (val) => typeof val === 'string' && /^cover|contain$/.test(val);
 const isNeedLayout = (preImageInfo) => {
-    const { sizeList, backgroundPosition, linearInfo } = preImageInfo;
+    const { sizeList, backgroundPosition, linearInfo, type } = preImageInfo;
     const [width, height] = sizeList;
     const bp = backgroundPosition;
     // 含有百分号，center 需计算布局
@@ -66,7 +66,8 @@ const isNeedLayout = (preImageInfo) => {
         (isPercent(width) && height === 'auto') ||
         isPercent(bp[1]) ||
         isPercent(bp[3]) ||
-        isDiagonalAngle(linearInfo);
+        isDiagonalAngle(linearInfo) ||
+        (type === 'linear' && (isPercent(height) || isPercent(width)));
 };
 const checkNeedLayout = (preImageInfo) => {
     const { sizeList } = preImageInfo;
@@ -155,7 +156,7 @@ function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
 }
 // background-size 转换
 function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
-    const sizeList = preImageInfo.sizeList;
+    const { sizeList, type } = preImageInfo;
     if (!sizeList)
         return;
     const { width: layoutWidth, height: layoutHeight } = layoutInfo || {};
@@ -202,10 +203,23 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            dimensions = {
-                width: isPercent(width) ? width : +width,
-                height: isPercent(height) ? height : +height
-            };
+            if (type === 'linear') {
+                const dimensionWidth = calcPercent(width, layoutWidth) || 0;
+                const dimensionHeight = calcPercent(height, layoutHeight) || 0;
+                // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
+                if (dimensionWidth && dimensionHeight) {
+                    dimensions = {
+                        width: dimensionWidth,
+                        height: dimensionHeight
+                    };
+                }
+            }
+            else {
+                dimensions = {
+                    width: isPercent(width) ? width : +width,
+                    height: isPercent(height) ? height : +height
+                };
+            }
         }
     }
     // 样式合并

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

@@ -319,6 +319,13 @@ function transformTransform(style) {
         return;
     style.transform = parseTransform(style.transform);
 }
+function transformBoxShadow(styleObj) {
+    if (!styleObj.boxShadow)
+        return;
+    styleObj.boxShadow = parseValues(styleObj.boxShadow).reduce((res, i, idx) => {
+        return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
+    }, '');
+}
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
@@ -447,6 +454,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformPosition(normalStyle, positionMeta);
     // transform number enum stringify
     transformStringify(normalStyle);
+    // transform rpx to px
+    transformBoxShadow(normalStyle);
     // transform 字符串格式转化数组格式
     transformTransform(normalStyle);
     return {

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

@@ -44,6 +44,7 @@ interface MovableViewProps {
   disabled?: boolean
   animation?: boolean
   id?: string
+  changeThrottleTime?:number
   bindchange?: (event: unknown) => void
   bindtouchstart?: (event: GestureTouchEvent) => void
   catchtouchstart?: (event: GestureTouchEvent) => void
@@ -105,6 +106,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     'simultaneous-handlers': originSimultaneousHandlers = [],
     'wait-for': waitFor = [],
     style = {},
+    changeThrottleTime = 60,
     bindtouchstart,
     catchtouchstart,
     bindhtouchmove,
@@ -150,6 +152,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const isFirstTouch = useSharedValue(true)
   const touchEvent = useSharedValue<string>('')
   const initialViewPosition = useSharedValue({ x: x || 0, y: y || 0 })
+  const lastChangeTime = useSharedValue(0)
 
   const MovableAreaLayout = useContext(MovableAreaContext)
 
@@ -197,6 +200,16 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     )
   }, [])
 
+  // 节流版本的 change 事件触发
+  const handleTriggerChangeThrottled = useCallback(({ x, y, type }: { x: number; y: number; type?: string }) => {
+    'worklet'
+    const now = Date.now()
+    if (now - lastChangeTime.value >= changeThrottleTime) {
+      lastChangeTime.value = now
+      runOnJS(handleTriggerChange)({ x, y, type })
+    }
+  }, [changeThrottleTime])
+
   useEffect(() => {
     runOnUI(() => {
       if (offsetX.value !== x || offsetY.value !== y) {
@@ -460,7 +473,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           }
         }
         if (bindchange) {
-          runOnJS(handleTriggerChange)({
+          // 使用节流版本减少 runOnJS 调用
+          handleTriggerChangeThrottled({
             x: offsetX.value,
             y: offsetY.value
           })

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

@@ -116,6 +116,9 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
       source: { html: generateHTML(html) },
       onMessage: (event: WebViewMessageEvent) => {
         setWebViewHeight(+event.nativeEvent.data)
+      },
+      style: {
+        backgroundColor: 'transparent'
       }
     })
   )

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

@@ -143,7 +143,7 @@ const isPercent = (val: string | number | undefined): val is string => typeof va
 const isBackgroundSizeKeyword = (val: string | number): boolean => typeof val === 'string' && /^cover|contain$/.test(val)
 
 const isNeedLayout = (preImageInfo: PreImageInfo): boolean => {
-  const { sizeList, backgroundPosition, linearInfo } = preImageInfo
+  const { sizeList, backgroundPosition, linearInfo, type } = preImageInfo
   const [width, height] = sizeList
   const bp = backgroundPosition
 
@@ -153,7 +153,8 @@ const isNeedLayout = (preImageInfo: PreImageInfo): boolean => {
     (isPercent(width) && height === 'auto') ||
     isPercent(bp[1]) ||
     isPercent(bp[3]) ||
-    isDiagonalAngle(linearInfo)
+    isDiagonalAngle(linearInfo) ||
+    (type === 'linear' && (isPercent(height) || isPercent(width)))
 }
 
 const checkNeedLayout = (preImageInfo: PreImageInfo) => {
@@ -246,7 +247,7 @@ function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo,
 
 // background-size 转换
 function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
-  const sizeList = preImageInfo.sizeList
+  const { sizeList, type } = preImageInfo
   if (!sizeList) return
   const { width: layoutWidth, height: layoutHeight } = layoutInfo || {}
   const { width: imageSizeWidth, height: imageSizeHeight } = imageSize || {}
@@ -286,10 +287,22 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      dimensions = {
-        width: isPercent(width) ? width : +width,
-        height: isPercent(height) ? height : +height
-      } as { width: NumberVal, height: NumberVal }
+      if (type === 'linear') {
+        const dimensionWidth = calcPercent(width as NumberVal, layoutWidth) || 0
+        const dimensionHeight = calcPercent(height as NumberVal, layoutHeight) || 0
+        // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
+        if (dimensionWidth && dimensionHeight) {
+          dimensions = {
+            width: dimensionWidth,
+            height: dimensionHeight
+          } as { width: NumberVal, height: NumberVal }
+        }
+      } else {
+        dimensions = {
+          width: isPercent(width) ? width : +width,
+          height: isPercent(height) ? height : +height
+        } as { width: NumberVal, height: NumberVal }
+      }
     }
   }
 

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

@@ -365,6 +365,14 @@ function transformTransform (style: Record<string, any>) {
   if (!style.transform || Array.isArray(style.transform)) return
   style.transform = parseTransform(style.transform)
 }
+
+function transformBoxShadow (styleObj: Record<string, any>) {
+  if (!styleObj.boxShadow) return
+  styleObj.boxShadow = parseValues(styleObj.boxShadow).reduce((res, i, idx) => {
+    return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`
+  }, '')
+}
+
 interface TransformStyleConfig {
   enableVar?: boolean
   externalVarContext?: Record<string, any>
@@ -506,6 +514,8 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformPosition(normalStyle, positionMeta)
   // transform number enum stringify
   transformStringify(normalStyle)
+  // transform rpx to px
+  transformBoxShadow(normalStyle)
 
   // transform 字符串格式转化数组格式
   transformTransform(normalStyle)

package/lib/runtime/optionProcessor.js

@@ -181,7 +181,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     global.__mpxRouter.lastStack = null
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
-    global.__mpxRouter.eventChannelMap = {}
     global.__mpxRouter.currentActionType = null
     // 处理reLaunch中传递的url并非首页时的replace逻辑
     global.__mpxRouter.beforeEach(function (to, from, next) {
@@ -241,7 +240,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         case 'to':
           stack.push(insertItem)
           global.__mpxRouter.needCache = insertItem
-          if (action.eventChannel) global.__mpxRouter.eventChannelMap[to.path.slice(1)] = action.eventChannel
           break
         case 'back':
           global.__mpxRouter.needRemove = stack.splice(stack.length - action.delta, action.delta)

package/lib/runtime/optionProcessorReact.d.ts

@@ -1,4 +1,3 @@
-import { ReactNode, ComponentType } from 'react'
 declare global {
   namespace NodeJS {
     interface Global {
@@ -8,20 +7,3 @@ declare global {
 }
 
 export function getComponent (...args: any): object
-
-interface AsyncModule {
-  __esModule: boolean
-  default: ReactNode
-}
-
-interface AsyncSuspenseProps {
-  type: 'component' | 'page'
-  chunkName: string
-  moduleId: string
-  innerProps: any
-  loading: ComponentType<unknown>
-  fallback: ComponentType<unknown>
-  getChildren: () => Promise<AsyncModule>
-}
-
-export function getAsyncSuspense(props: AsyncSuspenseProps): ReactNode

package/lib/runtime/optionProcessorReact.js

@@ -1,30 +1,6 @@
-import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/AsyncSuspense'
-import { memo, forwardRef, createElement } from 'react'
-import { extend } from './utils'
-
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
   if (extendOptions) Object.assign(component, extendOptions)
   return component
 }
-
-export function getAsyncSuspense (commonProps) {
-  if (commonProps.type === 'component') {
-    return memo(forwardRef(function (props, ref) {
-      return createElement(AsyncSuspense,
-        extend(commonProps, {
-          innerProps: Object.assign({}, props, { ref })
-        })
-      )
-    }))
-  } else {
-    return function (props) {
-      return createElement(AsyncSuspense,
-        extend(commonProps, {
-          innerProps: props
-        })
-      )
-    }
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.6-beta.7",
+  "version": "2.10.7-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.6 | ^2.10.6-beta.1",
+    "@mpxjs/utils": "^2.10.7 | ^2.10.7-beta.1",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.6 | ^2.10.6-beta.1",
+    "@mpxjs/api-proxy": "^2.10.7 | ^2.10.7-beta.1",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",

package/lib/dependencies/RecordFileUrlDependency.js

@@ -1,58 +0,0 @@
-const path = require('path')
-const NullDependency = require('webpack/lib/dependencies/NullDependency')
-const makeSerializable = require('webpack/lib/util/makeSerializable')
-
-class RecordFileUrlDependency extends NullDependency {
-  constructor (range, url) {
-    super()
-    this.range = range
-    this.url = url
-  }
-
-  get type () {
-    return 'mpx record file url'
-  }
-
-  mpxAction (module, compilation, callback) {
-    return callback()
-  }
-
-  updateHash (hash, context) {
-    hash.update('' + (+new Date()) + Math.random())
-    super.updateHash(hash, context)
-  }
-
-  serialize (context) {
-    const { write } = context
-    write(this.url)
-    super.serialize(context)
-  }
-
-  deserialize (context) {
-    const { read } = context
-    this.url = read()
-    super.deserialize(context)
-  }
-}
-
-RecordFileUrlDependency.Template = class RecordFileUrlDependencyTemplate {
-  apply (dependency, source, { module, chunkGraph, runtimeTemplate }) {
-    const { range } = dependency
-    const compliation = runtimeTemplate.compilation
-    const publicPath = compliation.outputOptions.publicPath
-    const chunks = chunkGraph.getModuleChunks(module)
-    const chunk = chunks[0]
-    const chunkPath = path.dirname(publicPath + chunk.name)
-    const imgPath = publicPath + dependency.url
-    let relativePath = path.relative(chunkPath, imgPath)
-    if (!relativePath.startsWith('.')) {
-      relativePath = './' + relativePath
-    }
-
-    source.replace(range[0], range[1] - 1, JSON.stringify(relativePath))
-  }
-}
-
-makeSerializable(RecordFileUrlDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordFileUrlDependency')
-
-module.exports = RecordFileUrlDependency

package/lib/utils/trans-async-sub-rules.js

@@ -1,34 +0,0 @@
-const { matchCondition } = require('./match-condition')
-
-function transAsyncSubNameRules (asyncSubpackageNameRules, tarRoot) {
-  // 如果没有tarRoot，则无需进行tarRoot的修改，因此
-  if (tarRoot && Array.isArray(asyncSubpackageNameRules) && asyncSubpackageNameRules.length >= 1) {
-    for (const item of asyncSubpackageNameRules) {
-      if (item?.from) {
-        const fromPaths = Array.isArray(item.from) ? item.from : [item.from];
-        if (fromPaths.includes(tarRoot)) {
-          tarRoot = item.to
-          break
-        }
-      }
-    }
-  }
-  return tarRoot
-}
-
-function transAsyncSubRules (resourcePath, asyncSubpackageRules, tarRoot) {
-  if (!tarRoot && Array.isArray(asyncSubpackageRules) && asyncSubpackageRules.length >= 1) {
-    for (const item of asyncSubpackageRules) {
-      if (matchCondition(resourcePath, item)) {
-        tarRoot = item.root
-        break
-      }
-    }
-  }
-  return tarRoot
-}
-
-module.exports = {
-  transAsyncSubNameRules,
-  transAsyncSubRules
-}