Merge branch 'master' into feat-border-none

Author: hiyuki

docs-vitepress/api/compile.md

@@ -824,8 +824,13 @@ module.exports = defineConfig({
 
 transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem
 
+`{useSSR: boolean}`
+
+useSSR 默认值为 `false`，当 SSR 模式下使用异步分包时，需要将 useSSR 设置为 `true`, 其他场景不需要。
+
+
 ```js
-// vue.config.js
+// mpx.config.js
 module.exports = defineConfig({
   pluginOptions: {
     mpx: {
@@ -834,7 +839,9 @@ module.exports = defineConfig({
           transRpxFn: function (match, $1) {
             if ($1 === '0') return $1
             return `${$1 * +(100 / 750).toFixed(8)}vw`
-          }
+          },
+          // 当 SSR 模式下使用异步分包时
+          useSSR: true
         }
       }
     }

docs-vitepress/guide/platform/rn.md

@@ -1001,11 +1001,11 @@ movable-view的可移动区域。
 
 - 触感反馈回调方法
 
-通过在全局注册 `mpx.config.rnConfig.pickerVibrate` 方法，在每次滚动选择时会调用该方法。
+通过在全局注册 `mpx.config.rnConfig.onPickerVibrate` 方法，在每次滚动选择时会调用该方法。
 
 | 注册触感方法名           | 类型          | 说明                |
 | ----------------------| --------------| ------------------- |
-| pickerVibrate         | Function      | 注册自定义触感反馈方法。调用时机：在每次滚动选择时会调用该方法。可以在方法内自定义实现类似 iOS 端原生表盘的振动触感。    |
+| onPickerVibrate         | Function      | 注册自定义触感反馈方法。调用时机：在每次滚动选择时会调用该方法。可以在方法内自定义实现类似 iOS 端原生表盘的振动触感。    |
 
 #### picker-view-column
 
@@ -2597,7 +2597,7 @@ mpx.config.rnConfig.downloadChunkAsync = function (packages) {
 
 ```javascript
 // RN 场景下监听异步页面加载失败的全局配置
-mpx.config.rnConfig.lazyLoadPageErrorHandler = function (error) {
+mpx.config.rnConfig.onLazyLoadPageError = function (error) {
   console.log(
     error.subpackage, // 加载失败的分包名
     error.errType // 加载失败的类型：'timeout' | 'fail'

packages/core/@types/index.d.ts

@@ -274,7 +274,7 @@ export interface RnConfig {
    *
    * @param state 当前的导航状态对象
    */
-  onStateChange?: (state: Record<string, any>) => void;
+  onStateChange?: (state: Record<string, any>) => void
 
   /**
    * 用于获取初始路由配置的函数。
@@ -286,7 +286,7 @@ export interface RnConfig {
    */
   parseAppProps?: (
     props: Record<string, any>
-  ) => { initialRouteName?: string; initialParams?: any } | void;
+  ) => { initialRouteName?: string; initialParams?: any } | void
 
   /**
    * 页面栈长度为 1（即根页面）且用户尝试退出 App 时触发。
@@ -295,20 +295,20 @@ export interface RnConfig {
    * - `true`：允许退出应用
    * - `false`：阻止退出应用
    */
-  onAppBack?: () => boolean;
+  onAppBack?: () => boolean
 
   /**
    * 是否禁用框架内部的 AppStateChange 监听。
    */
-  disableAppStateListener?: boolean;
+  disableAppStateListener?: boolean
 
   /**
    * 控制首页回退按钮是否展示，并监听点击事件。
    *
    * 如果绑定该函数，则首页显示返回按钮，点击后调用该函数作为回调。
    * 如需返回，请在函数内部手动调用 `back()`。
    */
-  onStackTopBack?: () => void;
+  onStackTopBack?: () => void
 
   /**
    * 容器实现的 open-type 能力集合。
@@ -324,16 +324,26 @@ export interface RnConfig {
      * @returns `void`
      */
     onShareAppMessage?: (shareInfo: {
-      title: string;
-      path: string;
-      imageUrl?: string;
-    }) => void;
-  };
+      title: string
+      path: string
+      imageUrl?: string
+    }) => void
+  }
 
   /**
    * 在使用 picker-view-column 时，触发短震动反馈。
    */
-  pickerVibrate?: () => void;
+  onPickerVibrate?: () => void
+
+  /**
+   * 分包页面加载失败时触发
+   * @param subpackage 失败分包名
+   * @param errType 失败类型
+   */
+  onLazyLoadPageError?: (error: {
+    subpackage: string
+    errType: 'timeout' | 'fail'
+  }) => void
 
   /**
    * 自定义屏幕尺寸信息，用于 mpx style 渲染等依赖尺寸的功能。
@@ -343,7 +353,7 @@ export interface RnConfig {
    */
   customDimensions?: <T extends { window: ScaledSize; screen: ScaledSize }>(
     dimensions: T
-  ) => T | void;
+  ) => T | void
 
   /**
    * 异步分包加载配置。
@@ -352,18 +362,18 @@ export interface RnConfig {
     /**
      * 加载超时时长配置，单位为毫秒。
      */
-    timeout: number;
+    timeout: number
 
     /**
      * 异步分包页面加载超时或失败时，自定义兜底页面文件路径。
      */
-    fallback: string;
+    fallback: string
 
     /**
      * 异步分包页面加载时，自定义 loading 页面文件路径。
      */
-    loading: string;
-  };
+    loading: string
+  }
 
   /**
    * 加载并执行异步分包的方法。
@@ -373,14 +383,14 @@ export interface RnConfig {
    * @param params.package 分包名
    * @returns Promise，表示加载完成
    */
-  loadChunkAsync?: (params: { url: string; package: string }) => Promise<any>;
+  loadChunkAsync?: (params: { url: string; package: string }) => Promise<any>
 
   /**
    * 下载多个异步分包的方法（不执行）。
    *
    * @param packages 分包名数组
    */
-  downloadChunkAsync?: (packages: Array<string>) => void;
+  downloadChunkAsync?: (packages: Array<string>) => void
 }
 
 interface MpxConfig {

packages/webpack-plugin/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -146,8 +146,8 @@ const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
                 })
               })
             }
-            if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.lazyLoadPageErrorHandler === 'function') {
-              mpxGlobal.__mpx.config.rnConfig.lazyLoadPageErrorHandler({
+            if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.onLazyLoadPageError === 'function') {
+              mpxGlobal.__mpx.config.rnConfig.onLazyLoadPageError({
                 subpackage: chunkName,
                 errType: e.type
               })

packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -223,8 +223,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
     // 全局注册的振动触感 hook
-    const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate
-    if (typeof pickerVibrate !== 'function') {
+    const onPickerVibrate = global.__mpx?.config?.rnConfig?.onPickerVibrate
+    if (typeof onPickerVibrate !== 'function') {
       return
     }
     const { y } = e.nativeEvent.contentOffset
@@ -238,7 +238,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
             y: currentId * itemRawH
           }
           // vibrateShort({ type: 'selection' })
-          pickerVibrate()
+          onPickerVibrate()
         }
       }
     }

packages/webpack-plugin/lib/runtime/optionProcessor.js

@@ -352,7 +352,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
   return extend({ app }, option)
 }
 
-export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el }) {
+export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el, useSSR }) {
   if (!isBrowser) {
     return context => {
       const { app, router, pinia = {} } = createApp({
@@ -379,7 +379,7 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
       }
     }
   } else {
-    const { app, pinia } = createApp({
+    const { app, pinia, router } = createApp({
       App,
       componentsMap,
       Vue,
@@ -391,6 +391,14 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
     if (window.__INITIAL_STATE__ && pinia) {
       pinia.state.value = window.__INITIAL_STATE__
     }
-    app.$mount(el)
+    if (useSSR) {
+      // https://v3.router.vuejs.org/api/#router-onready
+      // ssr 场景如果使用了异步组件，需要在 onReady 回调中挂载，否则 hydrate 可能会报错
+      router.onReady(() => {
+        app.$mount(el)
+      })
+    } else {
+      app.$mount(el)
+    }
   }
 }

packages/webpack-plugin/lib/runtime/optionProcessorReact.js

@@ -14,15 +14,15 @@ export function getAsyncSuspense (commonProps) {
   if (commonProps.type === 'component') {
     result = memo(forwardRef(function (props, ref) {
       return createElement(AsyncSuspense,
-        extend(commonProps, {
+        extend({}, commonProps, {
           innerProps: Object.assign({}, props, { ref })
         })
       )
     }))
   } else {
     result = memo(function (props) {
       return createElement(AsyncSuspense,
-        extend(commonProps, {
+        extend({}, commonProps, {
           innerProps: props
         })
       )

packages/webpack-plugin/lib/web/processMainScript.js

@@ -71,7 +71,8 @@ export default processAppOption({
   componentsMap: ${shallowStringify(componentsMap)},
   Vue: Vue,
   VueRouter: VueRouter,
-  el: ${JSON.stringify(webConfig.el || '#app')}
+  el: ${JSON.stringify(webConfig.el || '#app')},
+  useSSR: ${JSON.stringify(!!webConfig.useSSR)}
 })\n`
 
   callback(null, {