feat(vue-app): support functional watchQuery (nuxt#6222)

clarkdo · pi0 · commit c6a9b3782199 · 2019-08-19T00:05:16.000+04:30
diff --git a/packages/vue-app/template/client.js b/packages/vue-app/template/client.js
@@ -140,15 +140,21 @@ async function loadAsyncComponents(to, from, next) {
   <% } %>
 
   try {
-    const Components = await resolveRouteComponents(to)
+    const Components = await resolveRouteComponents(
+      to,
+      (Component, instance) => ({ Component, instance })
+    )
     <% if (loading) { %>
     if (!this._pathChanged && this._queryChanged) {
       // Add a marker on each component that it needs to refresh or not
-      const startLoader = Components.some((Component) => {
+      const startLoader = Components.some(({Component, instance}) => {
         const watchQuery = Component.options.watchQuery
-        if (watchQuery === true) return true
-        if (Array.isArray(watchQuery)) {
+        if (watchQuery === true) {
+          return true
+        } else if (Array.isArray(watchQuery)) {
           return watchQuery.some(key => this._diffQuery[key])
+        } else if (typeof watchQuery === 'function') {
+          return watchQuery.apply(instance, [to.query, from.query])
         }
         return false
       })
diff --git a/packages/vue-app/template/utils.js b/packages/vue-app/template/utils.js
@@ -98,15 +98,15 @@ export function flatMapComponents(route, fn) {
   }))
 }
 
-export function resolveRouteComponents(route) {
+export function resolveRouteComponents(route, fn) {
   return Promise.all(
-    flatMapComponents(route, async (Component, _, match, key) => {
+    flatMapComponents(route, async (Component, instance, match, key) => {
       // If component is a function, resolve it
       if (typeof Component === 'function' && !Component.options) {
         Component = await Component()
       }
-      match.components[key] = sanitizeComponent(Component)
-      return match.components[key]
+      match.components[key] = Component = sanitizeComponent(Component)
+      return typeof fn === 'function' ? fn(Component, instance, match, key) : Component
     })
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -98,15 +98,15 @@ export function flatMapComponents(route, fn) {`
`98`	`98`	`}))`
`99`	`99`	`}`
`100`	`100`
`101`		`-export function resolveRouteComponents(route) {`
	`101`	`+export function resolveRouteComponents(route, fn) {`
`102`	`102`	`return Promise.all(`
`103`		`- flatMapComponents(route, async (Component, _, match, key) => {`
	`103`	`+ flatMapComponents(route, async (Component, instance, match, key) => {`
`104`	`104`	`// If component is a function, resolve it`
`105`	`105`	`if (typeof Component === 'function' && !Component.options) {`
`106`	`106`	`Component = await Component()`
`107`	`107`	`}`
`108`		`- match.components[key] = sanitizeComponent(Component)`
`109`		`- return match.components[key]`
	`108`	`+ match.components[key] = Component = sanitizeComponent(Component)`
	`109`	`+ return typeof fn === 'function' ? fn(Component, instance, match, key) : Component`
`110`	`110`	`})`
`111`	`111`	`)`
`112`	`112`	`}`