Merge pull request #2160 from didi/feat-compile-config-disablePageTransition

feat: 编译阶段支持disablePageTransition

Author: hiyuki

docs-vitepress/api/app-config.md

@@ -158,7 +158,7 @@ mpx.config.webRouteConfig = {
 ```
 
 ## webConfig
-web 环境下的一些配置，如路由模式，页面切换动画效果等
+web 环境下的一些配置，如路由模式
 
 - **用法**:
 ```js
@@ -169,3 +169,4 @@ mpx.config.webConfig.routeConfig = {
 // 禁用页面切换动画
 mpx.config.webConfig.disablePageTransition = true
 ```
+此处的 `disablePageTransition` 后续将被废弃，请使用编译阶段的[disablePageTransition](./compile.md#webconfig)进行配置

docs-vitepress/api/compile.md

@@ -828,6 +828,10 @@ transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换
 
 useSSR 默认值为 `false`，当 SSR 模式下使用异步分包时，需要将 useSSR 设置为 `true`, 其他场景不需要。
 
+`{disablePageTransition: boolean}`
+
+用于配置禁用/开启页面切换动画，默认禁用
+
 
 ```js
 // mpx.config.js
@@ -841,7 +845,9 @@ module.exports = defineConfig({
             return `${$1 * +(100 / 750).toFixed(8)}vw`
           },
           // 当 SSR 模式下使用异步分包时
-          useSSR: true
+          useSSR: true,
+          // 开启页面切换动画
+          disablePageTransition: false
         }
       }
     }

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

@@ -14,7 +14,8 @@ export function processComponentOption (
     componentGenerics,
     genericsInfo,
     wxsMixin,
-    hasApp
+    hasApp,
+    disablePageTransition
   }
 ) {
   // 局部注册页面和组件中依赖的组件
@@ -79,7 +80,7 @@ registered in parent context!`)
         transitionName: ''
       }
     }
-    if (!global.__mpx.config.webConfig.disablePageTransition) {
+    if (!disablePageTransition) {
       option.watch = {
         $route: {
           handler () {

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

@@ -27,6 +27,8 @@ module.exports = function (script, {
 }, callback) {
   const { projectRoot, appInfo, webConfig, i18n } = loaderContext.getMpx()
 
+  const { disablePageTransition = true } = webConfig
+
   let output = '/* script */\n'
 
   let scriptSrcMode = srcMode
@@ -86,7 +88,8 @@ module.exports = function (script, {
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
     wxsMixin: getWxsMixin(wxsModules),
-    hasApp: ${hasApp}
+    hasApp: ${hasApp},
+    disablePageTransition: ${JSON.stringify(disablePageTransition)},
   })\n`
       return content
     }

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

@@ -35,11 +35,13 @@ module.exports = function (template, {
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
-    const { el } = webConfig
+    const { el, disablePageTransition = true } = webConfig
     const idName = (el && el.match(/#(.*)/) && el.match(/#(.*)/)[1]) || 'app'
     template = {
       tag: 'template',
-      content: `<div id="${idName}"><transition :name="transitionName"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></transition></div>`
+      content: disablePageTransition
+        ? `<div id="${idName}"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></div>`
+        : `<div id="${idName}"><transition :name="transitionName"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></transition></div>`
     }
     builtInComponentsMap['mpx-keep-alive'] = {
       resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })