From 01acf66c675e0e6f08b9bb24a1cbe98c0939256e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@orion.sh>
Date: Sat, 20 Apr 2019 12:01:59 +0200
Subject: [PATCH] feat(vue-app): rename `transition` to `pageTransition` and
 deprecate it (#5558)

---
 examples/routes-transitions/package.json      |  1 -
 examples/routes-transitions/pages/users.vue   |  5 ++-
 packages/builder/src/context/template.js      |  2 +-
 .../__snapshots__/template.test.js.snap       | 12 +++----
 .../builder/test/context/template.test.js     |  2 +-
 packages/config/src/config/_app.js            |  2 +-
 packages/config/src/options.js                | 16 +++++++---
 .../test/__snapshots__/options.test.js.snap   | 16 +++++-----
 .../config/__snapshots__/index.test.js.snap   | 32 +++++++++----------
 packages/config/test/options.test.js          | 22 +++++++++----
 packages/vue-app/template/index.js            |  2 +-
 test/fixtures/basic/nuxt.config.js            |  2 +-
 test/fixtures/config-explicit/nuxt.config.js  |  2 +-
 test/fixtures/spa/nuxt.config.js              |  2 +-
 test/fixtures/with-config/nuxt.config.js      |  2 +-
 15 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/examples/routes-transitions/package.json b/examples/routes-transitions/package.json
index b71b1c928e..365851f279 100644
--- a/examples/routes-transitions/package.json
+++ b/examples/routes-transitions/package.json
@@ -1,7 +1,6 @@
 {
   "name": "example-routes-transitions",
   "dependencies": {
-    "axios": "^0.15.3",
     "nuxt": "latest"
   },
   "scripts": {
diff --git a/examples/routes-transitions/pages/users.vue b/examples/routes-transitions/pages/users.vue
index c1cd619b74..85dba09c73 100644
--- a/examples/routes-transitions/pages/users.vue
+++ b/examples/routes-transitions/pages/users.vue
@@ -28,8 +28,6 @@
 </template>
 
 <script>
-import axios from 'axios'
-
 export default {
   // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
   watchQuery: ['page'],
@@ -42,7 +40,8 @@ export default {
   },
   async asyncData({ query }) {
     const page = +query.page || 1
-    const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+    const data = await fetch(`https://reqres.in/api/users?page=${page}`).then(res => res.json())
+
     return {
       page: +data.page,
       totalPages: data.total_pages,
diff --git a/packages/builder/src/context/template.js b/packages/builder/src/context/template.js
index 7c5971d007..bf55ff4221 100644
--- a/packages/builder/src/context/template.js
+++ b/packages/builder/src/context/template.js
@@ -37,7 +37,7 @@ export default class TemplateContext {
         typeof options.loading === 'string'
           ? builder.relativeToBuild(options.srcDir, options.loading)
           : options.loading,
-      transition: options.transition,
+      pageTransition: options.pageTransition,
       layoutTransition: options.layoutTransition,
       dir: options.dir,
       components: {
diff --git a/packages/builder/test/context/__snapshots__/template.test.js.snap b/packages/builder/test/context/__snapshots__/template.test.js.snap
index 6fb2a1e0a6..7c96dd8676 100644
--- a/packages/builder/test/context/__snapshots__/template.test.js.snap
+++ b/packages/builder/test/context/__snapshots__/template.test.js.snap
@@ -71,19 +71,22 @@ TemplateContext {
         "test": "test message",
       },
       "mode": "test mode",
+      "pageTransition": Object {
+        "name": "test_trans",
+      },
       "router": Object {
         "route": "test",
       },
       "srcDir": "test_src_dir",
       "store": "test_store",
       "test": "test_test",
-      "transition": Object {
-        "name": "test_trans",
-      },
       "vue": Object {
         "config": "test_config",
       },
     },
+    "pageTransition": Object {
+      "name": "test_trans",
+    },
     "plugins": Array [
       "plugins",
     ],
@@ -94,9 +97,6 @@ TemplateContext {
       "testSC": true,
     },
     "store": "test_store",
-    "transition": Object {
-      "name": "test_trans",
-    },
     "uniqBy": [Function],
     "vue": Object {
       "config": "test_config",
diff --git a/packages/builder/test/context/template.test.js b/packages/builder/test/context/template.test.js
index 3ad3872c06..b070395b0a 100644
--- a/packages/builder/test/context/template.test.js
+++ b/packages/builder/test/context/template.test.js
@@ -37,7 +37,7 @@ describe('builder: buildContext', () => {
     },
     srcDir: 'test_src_dir',
     loading: 'test-loading',
-    transition: { name: 'test_trans' },
+    pageTransition: { name: 'test_trans' },
     layoutTransition: { name: 'test_layout_trans' },
     dir: ['test_dir'],
     ErrorPage: 'test_error_page'
diff --git a/packages/config/src/config/_app.js b/packages/config/src/config/_app.js
index 0b4a07d40a..cff8bd596f 100644
--- a/packages/config/src/config/_app.js
+++ b/packages/config/src/config/_app.js
@@ -42,7 +42,7 @@ export default () => ({
 
   loadingIndicator: 'default',
 
-  transition: {
+  pageTransition: {
     name: 'page',
     mode: 'out-in',
     appear: false,
diff --git a/packages/config/src/options.js b/packages/config/src/options.js
index d1c66fb74f..7563be0d52 100644
--- a/packages/config/src/options.js
+++ b/packages/config/src/options.js
@@ -35,8 +35,16 @@ export function getNuxtConfig(_options) {
     options._routerBaseSpecified = true
   }
 
-  if (typeof options.transition === 'string') {
-    options.transition = { name: options.transition }
+  // TODO: Remove for Nuxt 3
+  // transition -> pageTransition
+  if (typeof options.transition !== 'undefined') {
+    consola.warn('`transition` property is deprecated in favor of `pageTransition` and will be removed in Nuxt 3')
+    options.pageTransition = options.transition
+    delete options.transition
+  }
+
+  if (typeof options.pageTransition === 'string') {
+    options.pageTransition = { name: options.pageTransition }
   }
 
   if (typeof options.layoutTransition === 'string') {
@@ -275,8 +283,8 @@ export function getNuxtConfig(_options) {
   defaultsDeep(options, modePreset || options.modes.universal)
 
   // If no server-side rendering, add appear true transition
-  if (options.render.ssr === false && options.transition) {
-    options.transition.appear = true
+  if (options.render.ssr === false && options.pageTransition) {
+    options.pageTransition.appear = true
   }
 
   // We assume the SPA fallback path is 404.html (for GitHub Pages, Surge, etc.)
diff --git a/packages/config/test/__snapshots__/options.test.js.snap b/packages/config/test/__snapshots__/options.test.js.snap
index d527642508..e7bfc85efa 100644
--- a/packages/config/test/__snapshots__/options.test.js.snap
+++ b/packages/config/test/__snapshots__/options.test.js.snap
@@ -256,6 +256,14 @@ Object {
     "/var/nuxt/node_modules",
     "/var/nuxt/test/node_modules",
   ],
+  "pageTransition": Object {
+    "appear": false,
+    "appearActiveClass": "appear-active",
+    "appearClass": "appear",
+    "appearToClass": "appear-to",
+    "mode": "out-in",
+    "name": "page",
+  },
   "plugins": Array [],
   "render": Object {
     "bundleRenderer": Object {
@@ -332,14 +340,6 @@ Object {
     "less",
   ],
   "test": true,
-  "transition": Object {
-    "appear": false,
-    "appearActiveClass": "appear-active",
-    "appearClass": "appear",
-    "appearToClass": "appear-to",
-    "mode": "out-in",
-    "name": "page",
-  },
   "vue": Object {
     "config": Object {
       "performance": false,
diff --git a/packages/config/test/config/__snapshots__/index.test.js.snap b/packages/config/test/config/__snapshots__/index.test.js.snap
index 7727a82fb6..1070f24265 100644
--- a/packages/config/test/config/__snapshots__/index.test.js.snap
+++ b/packages/config/test/config/__snapshots__/index.test.js.snap
@@ -230,6 +230,14 @@ Object {
   "modulesDir": Array [
     "node_modules",
   ],
+  "pageTransition": Object {
+    "appear": false,
+    "appearActiveClass": "appear-active",
+    "appearClass": "appear",
+    "appearToClass": "appear-to",
+    "mode": "out-in",
+    "name": "page",
+  },
   "plugins": Array [],
   "render": Object {
     "bundleRenderer": Object {
@@ -305,14 +313,6 @@ Object {
     "less",
   ],
   "test": true,
-  "transition": Object {
-    "appear": false,
-    "appearActiveClass": "appear-active",
-    "appearClass": "appear",
-    "appearToClass": "appear-to",
-    "mode": "out-in",
-    "name": "page",
-  },
   "vue": Object {
     "config": Object {
       "performance": undefined,
@@ -562,6 +562,14 @@ Object {
   "modulesDir": Array [
     "node_modules",
   ],
+  "pageTransition": Object {
+    "appear": false,
+    "appearActiveClass": "appear-active",
+    "appearClass": "appear",
+    "appearToClass": "appear-to",
+    "mode": "out-in",
+    "name": "page",
+  },
   "plugins": Array [],
   "render": Object {
     "bundleRenderer": Object {
@@ -637,14 +645,6 @@ Object {
     "less",
   ],
   "test": true,
-  "transition": Object {
-    "appear": false,
-    "appearActiveClass": "appear-active",
-    "appearClass": "appear",
-    "appearToClass": "appear-to",
-    "mode": "out-in",
-    "name": "page",
-  },
   "vue": Object {
     "config": Object {
       "performance": undefined,
diff --git a/packages/config/test/options.test.js b/packages/config/test/options.test.js
index 87b458d818..41cdef0d94 100644
--- a/packages/config/test/options.test.js
+++ b/packages/config/test/options.test.js
@@ -53,12 +53,20 @@ describe('config: options', () => {
     })
   })
 
-  test('should transform transition/layoutTransition to name', () => {
-    const { transition, layoutTransition } = getNuxtConfig({
-      transition: 'test-tran',
+  test('[Compatibility] should transform transition to pageTransition', () => {
+    const { pageTransition, transition } = getNuxtConfig({
+      transition: 'test-tran'
+    })
+    expect(pageTransition).toMatchObject({ name: 'test-tran' })
+    expect(transition).toBeUndefined()
+  })
+
+  test('should transform pageTransition/layoutTransition to name', () => {
+    const { pageTransition, layoutTransition } = getNuxtConfig({
+      pageTransition: 'test-tran',
       layoutTransition: 'test-layout-tran'
     })
-    expect(transition).toMatchObject({ name: 'test-tran' })
+    expect(pageTransition).toMatchObject({ name: 'test-tran' })
     expect(layoutTransition).toMatchObject({ name: 'test-layout-tran' })
   })
 
@@ -96,9 +104,9 @@ describe('config: options', () => {
     expect(render.ssr).toEqual(true)
   })
 
-  test('should add appear true in transition when no ssr', () => {
-    const { transition } = getNuxtConfig({ render: { ssr: false } })
-    expect(transition.appear).toEqual(true)
+  test('should add appear true in pageTransition when no ssr', () => {
+    const { pageTransition } = getNuxtConfig({ render: { ssr: false } })
+    expect(pageTransition.appear).toEqual(true)
   })
 
   test('should return 404.html as default generate.fallback', () => {
diff --git a/packages/vue-app/template/index.js b/packages/vue-app/template/index.js
index 5da67521a8..c9004d538a 100644
--- a/packages/vue-app/template/index.js
+++ b/packages/vue-app/template/index.js
@@ -36,7 +36,7 @@ Vue.use(Meta, {
 })
 
 const defaultTransition = <%=
-  serialize(transition)
+  serialize(pageTransition)
   .replace('beforeEnter(', 'function(').replace('enter(', 'function(').replace('afterEnter(', 'function(')
   .replace('enterCancelled(', 'function(').replace('beforeLeave(', 'function(').replace('leave(', 'function(')
   .replace('afterLeave(', 'function(').replace('leaveCancelled(', 'function(').replace('beforeAppear(', 'function(')
diff --git a/test/fixtures/basic/nuxt.config.js b/test/fixtures/basic/nuxt.config.js
index 3ae9716734..fd9f29b899 100644
--- a/test/fixtures/basic/nuxt.config.js
+++ b/test/fixtures/basic/nuxt.config.js
@@ -63,7 +63,7 @@ export default {
     bad: null,
     '': true
   },
-  transition: false,
+  pageTransition: false,
   plugins: [
     '~/plugins/vuex-module',
     '~/plugins/dir-plugin',
diff --git a/test/fixtures/config-explicit/nuxt.config.js b/test/fixtures/config-explicit/nuxt.config.js
index 629194fed7..76f166d56a 100644
--- a/test/fixtures/config-explicit/nuxt.config.js
+++ b/test/fixtures/config-explicit/nuxt.config.js
@@ -2,7 +2,7 @@ import path from 'path'
 
 export default {
   modulesDir: path.join(__dirname, '..', '..', '..', 'node_modules'),
-  transition: false,
+  pageTransition: false,
   vue: {
     config: {
       silent: false,
diff --git a/test/fixtures/spa/nuxt.config.js b/test/fixtures/spa/nuxt.config.js
index ff64b078da..9fc8ba0480 100644
--- a/test/fixtures/spa/nuxt.config.js
+++ b/test/fixtures/spa/nuxt.config.js
@@ -1,6 +1,6 @@
 export default {
   mode: 'spa',
-  transition: false,
+  pageTransition: false,
   render: {
     http2: {
       push: true
diff --git a/test/fixtures/with-config/nuxt.config.js b/test/fixtures/with-config/nuxt.config.js
index 404ddee974..df2985fd30 100644
--- a/test/fixtures/with-config/nuxt.config.js
+++ b/test/fixtures/with-config/nuxt.config.js
@@ -34,7 +34,7 @@ export default {
     }
   },
   modulesDir: [path.join(__dirname, '..', '..', '..', 'node_modules')],
-  transition: 'test',
+  pageTransition: 'test',
   layoutTransition: 'test',
   loadingIndicator: 'circle',
   extensions: 'ts',