From 44446b9b4c43dca0c07bd8b66a1952a5401265a2 Mon Sep 17 00:00:00 2001
From: Michiel Doesburg <3763566+mdoesburg@users.noreply.github.com>
Date: Thu, 9 Jun 2022 11:42:28 -0400
Subject: [PATCH 1/5] Call fetch on all components when preview is enabled

---
 packages/vue-app/template/App.js   | 9 ++++-----
 packages/vue-app/template/utils.js | 1 -
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/vue-app/template/App.js b/packages/vue-app/template/App.js
index 1cd3be1d55c9..60c2b94df070 100644
--- a/packages/vue-app/template/App.js
+++ b/packages/vue-app/template/App.js
@@ -184,11 +184,10 @@ export default {
         }
         if (page.$fetch) {
           p.push(page.$fetch())
-        } else {
-          // Get all component instance to call $fetch
-          for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) {
-            p.push(component.$fetch())
-          }
+        }
+        // Get all component instance to call $fetch
+        for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) {
+          p.push(component.$fetch())
         }
         <% } %>
         <% if (features.asyncData) { %>
diff --git a/packages/vue-app/template/utils.js b/packages/vue-app/template/utils.js
index 91bd66ee4ee4..99a4ad6b113b 100644
--- a/packages/vue-app/template/utils.js
+++ b/packages/vue-app/template/utils.js
@@ -58,7 +58,6 @@ export function getChildrenComponentInstancesUsingFetch(vm, instances = []) {
   for (const child of children) {
     if (child.$fetch) {
       instances.push(child)
-      continue; // Don't get the children since it will reload the template
     }
     if (child.$children) {
       getChildrenComponentInstancesUsingFetch(child, instances)

From e9dd6ca9b045aa7c8e2df670ce3b51053c53bcc9 Mon Sep 17 00:00:00 2001
From: Michiel Doesburg <3763566+mdoesburg@users.noreply.github.com>
Date: Thu, 9 Jun 2022 11:43:26 -0400
Subject: [PATCH 2/5] Add tests

---
 test/dev/full-static-with-preview.test.js     | 88 +++++++++++++++++++
 .../components/ComponentWithFetch.vue         | 29 ++++++
 .../full-static-with-preview.test.js          |  3 +
 .../full-static-with-preview/nuxt.config.js   |  7 ++
 .../full-static-with-preview/pages/index.vue  | 22 +++++
 .../pages/with-component.vue                  | 23 +++++
 .../pages/with-nested-components.vue          | 25 ++++++
 .../plugins/preview.client.js                 |  5 ++
 8 files changed, 202 insertions(+)
 create mode 100644 test/dev/full-static-with-preview.test.js
 create mode 100644 test/fixtures/full-static-with-preview/components/ComponentWithFetch.vue
 create mode 100644 test/fixtures/full-static-with-preview/full-static-with-preview.test.js
 create mode 100644 test/fixtures/full-static-with-preview/nuxt.config.js
 create mode 100644 test/fixtures/full-static-with-preview/pages/index.vue
 create mode 100644 test/fixtures/full-static-with-preview/pages/with-component.vue
 create mode 100644 test/fixtures/full-static-with-preview/pages/with-nested-components.vue
 create mode 100644 test/fixtures/full-static-with-preview/plugins/preview.client.js

diff --git a/test/dev/full-static-with-preview.test.js b/test/dev/full-static-with-preview.test.js
new file mode 100644
index 000000000000..cbc8f8309e16
--- /dev/null
+++ b/test/dev/full-static-with-preview.test.js
@@ -0,0 +1,88 @@
+import http from 'http'
+import { resolve } from 'path'
+import serveStatic from 'serve-static'
+import finalhandler from 'finalhandler'
+import { Builder, Generator, getPort, loadFixture, Nuxt } from '../utils'
+
+let port
+const url = route => 'http://localhost:' + port + route
+const rootDir = resolve(__dirname, '..', 'fixtures/full-static-with-preview')
+const distDir = resolve(rootDir, '.nuxt-generate')
+
+let builder
+let server = null
+let generator = null
+
+describe('full-static-with-preview', () => {
+  beforeAll(async () => {
+    const config = await loadFixture('full-static-with-preview', {
+      generate: {
+        static: false,
+        dir: '.nuxt-generate'
+      }
+    })
+    const nuxt = new Nuxt(config)
+    await nuxt.ready()
+
+    builder = new Builder(nuxt)
+    builder.build = jest.fn()
+    generator = new Generator(nuxt, builder)
+
+    await generator.generate()
+
+    const serve = serveStatic(distDir)
+    server = http.createServer((req, res) => {
+      serve(req, res, finalhandler(req, res))
+    })
+
+    port = await getPort()
+    server.listen(port)
+  })
+
+  test('/', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called</p>')
+  })
+
+  test('preview: /', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/?preview=true'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called-in-preview</p>')
+  })
+
+  test('/with-component', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/with-component'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called</p>')
+    expect(html).toContain('<p>component-fetch-called</p>')
+  })
+
+  test('preview: /with-component', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/with-component?preview=true'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called-in-preview</p>')
+    expect(html).toContain('<p>component-fetch-called-in-preview</p>')
+  })
+
+  test('/with-nested-components', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/with-nested-components'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called</p>')
+    expect(html).toContain('<p>component-fetch-called</p>')
+    expect(html).toContain('<p>sub-component-fetch-called</p>')
+  })
+
+  test('preview: /with-nested-components', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/with-nested-components?preview=true'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called-in-preview</p>')
+    expect(html).toContain('<p>component-fetch-called-in-preview</p>')
+    expect(html).toContain('<p>sub-component-fetch-called-in-preview</p>')
+  })
+
+  // Close server and ask nuxt to stop listening to file changes
+  afterAll(async () => {
+    await server.close()
+  })
+})
diff --git a/test/fixtures/full-static-with-preview/components/ComponentWithFetch.vue b/test/fixtures/full-static-with-preview/components/ComponentWithFetch.vue
new file mode 100644
index 000000000000..456d91237d69
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/components/ComponentWithFetch.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p>{{ text }}</p>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: 'component'
+    }
+  },
+  data () {
+    return {
+      text: ''
+    }
+  },
+  fetch () {
+    this.text = `${this.name}-fetch-called`
+
+    if (this.$preview) {
+      this.text = `${this.name}-fetch-called-in-preview`
+    }
+  }
+}
+</script>
diff --git a/test/fixtures/full-static-with-preview/full-static-with-preview.test.js b/test/fixtures/full-static-with-preview/full-static-with-preview.test.js
new file mode 100644
index 000000000000..dcb2d721ca40
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/full-static-with-preview.test.js
@@ -0,0 +1,3 @@
+import { buildFixture } from '../../utils/build'
+
+buildFixture('full-static-with-preview')
diff --git a/test/fixtures/full-static-with-preview/nuxt.config.js b/test/fixtures/full-static-with-preview/nuxt.config.js
new file mode 100644
index 000000000000..ed827d0ee405
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/nuxt.config.js
@@ -0,0 +1,7 @@
+export default {
+  target: 'static',
+  components: true,
+  plugins: [
+    '~/plugins/preview.client.js'
+  ]
+}
diff --git a/test/fixtures/full-static-with-preview/pages/index.vue b/test/fixtures/full-static-with-preview/pages/index.vue
new file mode 100644
index 000000000000..faf8f3cad647
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/pages/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: ''
+    }
+  },
+  fetch () {
+    this.text = 'page-fetch-called'
+
+    if (this.$preview) {
+      this.text = 'page-fetch-called-in-preview'
+    }
+  }
+}
+</script>
diff --git a/test/fixtures/full-static-with-preview/pages/with-component.vue b/test/fixtures/full-static-with-preview/pages/with-component.vue
new file mode 100644
index 000000000000..b00a24683543
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/pages/with-component.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <p>{{ text }}</p>
+    <ComponentWithFetch />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: ''
+    }
+  },
+  fetch () {
+    this.text = 'page-fetch-called'
+
+    if (this.$preview) {
+      this.text = 'page-fetch-called-in-preview'
+    }
+  }
+}
+</script>
diff --git a/test/fixtures/full-static-with-preview/pages/with-nested-components.vue b/test/fixtures/full-static-with-preview/pages/with-nested-components.vue
new file mode 100644
index 000000000000..3d87ee098210
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/pages/with-nested-components.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>{{ text }}</p>
+    <ComponentWithFetch>
+      <ComponentWithFetch name="sub-component" />
+    </ComponentWithFetch>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: ''
+    }
+  },
+  fetch () {
+    this.text = 'page-fetch-called'
+
+    if (this.$preview) {
+      this.text = 'page-fetch-called-in-preview'
+    }
+  }
+}
+</script>
diff --git a/test/fixtures/full-static-with-preview/plugins/preview.client.js b/test/fixtures/full-static-with-preview/plugins/preview.client.js
new file mode 100644
index 000000000000..db610489f48e
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/plugins/preview.client.js
@@ -0,0 +1,5 @@
+export default function ({ query, enablePreview }) {
+  if (query.preview) {
+    enablePreview()
+  }
+}

From c9a3a996bcab62cc207cc551c1bb45fdecffddfc Mon Sep 17 00:00:00 2001
From: Michiel Doesburg <3763566+mdoesburg@users.noreply.github.com>
Date: Thu, 9 Jun 2022 11:50:44 -0400
Subject: [PATCH 3/5] Fix lifecycle hook order

---
 packages/vue-app/template/App.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/vue-app/template/App.js b/packages/vue-app/template/App.js
index 60c2b94df070..78975e8497de 100644
--- a/packages/vue-app/template/App.js
+++ b/packages/vue-app/template/App.js
@@ -174,7 +174,7 @@ export default {
       }
       <% if (loading) { %>this.$loading.start()<% } %>
 
-      const promises = pages.map((page) => {
+      const promises = pages.map(async (page) => {
         const p = []
 
         <% if (features.fetch) { %>
@@ -182,14 +182,8 @@ export default {
         if (page.$options.fetch && page.$options.fetch.length) {
           p.push(promisify(page.$options.fetch, this.context))
         }
-        if (page.$fetch) {
-          p.push(page.$fetch())
-        }
-        // Get all component instance to call $fetch
-        for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) {
-          p.push(component.$fetch())
-        }
         <% } %>
+
         <% if (features.asyncData) { %>
         if (page.$options.asyncData) {
           p.push(
@@ -202,6 +196,20 @@ export default {
           )
         }
         <% } %>
+
+        <% if (features.fetch) { %>
+        // Wait for asyncData & old fetch to finish
+        await Promise.all(p)
+
+        if (page.$fetch) {
+          p.push(page.$fetch())
+        }
+        // Get all component instance to call $fetch
+        for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) {
+          p.push(component.$fetch())
+        }
+        <% } %>
+
         return Promise.all(p)
       })
       try {

From f338d25244485d8f987c4603b31f7fb4c1008c7a Mon Sep 17 00:00:00 2001
From: Michiel Doesburg <3763566+mdoesburg@users.noreply.github.com>
Date: Thu, 9 Jun 2022 11:51:20 -0400
Subject: [PATCH 4/5] Add tests

---
 test/dev/full-static-with-preview.test.js     | 21 ++++++-
 .../components/ComponentRenderer.vue          | 24 ++++++++
 .../pages/async-data-dependent-fetch.vue      | 59 +++++++++++++++++++
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/full-static-with-preview/components/ComponentRenderer.vue
 create mode 100644 test/fixtures/full-static-with-preview/pages/async-data-dependent-fetch.vue

diff --git a/test/dev/full-static-with-preview.test.js b/test/dev/full-static-with-preview.test.js
index cbc8f8309e16..ab8ee42e3cc9 100644
--- a/test/dev/full-static-with-preview.test.js
+++ b/test/dev/full-static-with-preview.test.js
@@ -2,7 +2,7 @@ import http from 'http'
 import { resolve } from 'path'
 import serveStatic from 'serve-static'
 import finalhandler from 'finalhandler'
-import { Builder, Generator, getPort, loadFixture, Nuxt } from '../utils'
+import { Builder, Generator, getPort, loadFixture, Nuxt, waitFor } from '../utils'
 
 let port
 const url = route => 'http://localhost:' + port + route
@@ -81,6 +81,25 @@ describe('full-static-with-preview', () => {
     expect(html).toContain('<p>sub-component-fetch-called-in-preview</p>')
   })
 
+  test('/async-data-dependent-fetch', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/async-data-dependent-fetch'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called</p>')
+    expect(html).toContain('<p>component-1-fetch-called</p>')
+    expect(html).toContain('<p>component-2-fetch-called</p>')
+    expect(html).toContain('<p>component-3-fetch-called</p>')
+  })
+
+  test('preview: /async-data-dependent-fetch', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/async-data-dependent-fetch?preview=true'))
+    await waitFor(100)
+    const html = window.document.body.innerHTML
+    expect(html).toContain('<p>page-fetch-called-in-preview</p>')
+    expect(html).toContain('<p>component-1-fetch-called-in-preview</p>')
+    expect(html).toContain('<p>component-2-fetch-called-in-preview</p>')
+    expect(html).toContain('<p>component-3-fetch-called-in-preview</p>')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await server.close()
diff --git a/test/fixtures/full-static-with-preview/components/ComponentRenderer.vue b/test/fixtures/full-static-with-preview/components/ComponentRenderer.vue
new file mode 100644
index 000000000000..e0c71eb1bf6b
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/components/ComponentRenderer.vue
@@ -0,0 +1,24 @@
+<template>
+  <component :is="component.name" v-bind="component.props">
+    <template v-if="component.components">
+      <ComponentRenderer
+        v-for="nestedComponent in component.components"
+        :key="nestedComponent.id"
+        :component="nestedComponent"
+      />
+    </template>
+  </component>
+</template>
+
+<script>
+
+export default {
+  name: 'ComponentRenderer',
+  props: {
+    component: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/test/fixtures/full-static-with-preview/pages/async-data-dependent-fetch.vue b/test/fixtures/full-static-with-preview/pages/async-data-dependent-fetch.vue
new file mode 100644
index 000000000000..29cdd9b6d57f
--- /dev/null
+++ b/test/fixtures/full-static-with-preview/pages/async-data-dependent-fetch.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <p>{{ text }}</p>
+    <ComponentRenderer
+      v-for="component in components"
+      :key="component.id"
+      :component="component"
+    />
+  </div>
+</template>
+
+<script>
+const fetchData = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve([
+      {
+        id: 1,
+        name: 'ComponentWithFetch',
+        props: { name: 'component-1' },
+        components: [
+          {
+            id: 2,
+            name: 'ComponentWithFetch',
+            props: { name: 'component-2' },
+            components: []
+          },
+          {
+            id: 3,
+            name: 'ComponentWithFetch',
+            props: { name: 'component-3' },
+            components: []
+          }
+        ]
+      }
+    ]), 10)
+  })
+}
+
+export default {
+  name: 'Page',
+  async asyncData () {
+    const components = await fetchData()
+
+    return { components }
+  },
+  data () {
+    return {
+      text: ''
+    }
+  },
+  fetch () {
+    this.text = 'page-fetch-called'
+
+    if (this.$preview) {
+      this.text = 'page-fetch-called-in-preview'
+    }
+  }
+}
+</script>

From 30014fba4f670e5687f41485577e39b1d5bc0f0d Mon Sep 17 00:00:00 2001
From: Michiel Doesburg <3763566+mdoesburg@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:55:14 -0400
Subject: [PATCH 5/5] Cleanup refs

---
 packages/vue-app/template/App.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vue-app/template/App.js b/packages/vue-app/template/App.js
index 78975e8497de..c101bdf2a114 100644
--- a/packages/vue-app/template/App.js
+++ b/packages/vue-app/template/App.js
@@ -175,7 +175,7 @@ export default {
       <% if (loading) { %>this.$loading.start()<% } %>
 
       const promises = pages.map(async (page) => {
-        const p = []
+        let p = []
 
         <% if (features.fetch) { %>
         // Old fetch
@@ -200,6 +200,8 @@ export default {
         <% if (features.fetch) { %>
         // Wait for asyncData & old fetch to finish
         await Promise.all(p)
+        // Cleanup refs
+        p = [] 
 
         if (page.$fetch) {
           p.push(page.$fetch())