From 22f1f71e3ec9a2277c72f7d29b502a6112b9b9fb Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Apr 2023 09:42:45 +0100
Subject: [PATCH] fix(nuxt): mark entire payload as reactive (#20218)

---
 packages/nuxt/src/app/nuxt.ts       | 10 +++++-----
 test/basic.test.ts                  |  1 +
 test/bundle.test.ts                 | 14 +++++++++++---
 test/fixtures/basic/pages/index.vue |  1 +
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/nuxt/src/app/nuxt.ts b/packages/nuxt/src/app/nuxt.ts
index 1fa4c2ab88..eb4d218f0d 100644
--- a/packages/nuxt/src/app/nuxt.ts
+++ b/packages/nuxt/src/app/nuxt.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { getCurrentInstance, reactive, shallowReactive } from 'vue'
+import { getCurrentInstance, reactive } from 'vue'
 import type { App, Ref, VNode, onErrorCaptured } from 'vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import type { HookCallback, Hookable } from 'hookable'
@@ -181,10 +181,10 @@ export function createNuxtApp (options: CreateOptions) {
       get nuxt () { return __NUXT_VERSION__ },
       get vue () { return nuxtApp.vueApp.version }
     },
-    payload: shallowReactive({
-      data: shallowReactive({}),
-      state: shallowReactive({}),
-      _errors: shallowReactive({}),
+    payload: reactive({
+      data: {},
+      state: {},
+      _errors: {},
       ...(process.client ? window.__NUXT__ ?? {} : { serverRendered: true })
     }),
     static: {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 4fe77b8731..f091eff326 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -544,6 +544,7 @@ describe('errors', () => {
     const { page, consoleLogs } = await renderPage('/')
     await page.getByText('Increment state').click()
     await page.getByText('Increment state').click()
+    expect(await page.innerText('div')).toContain('Some value: 3')
     await page.getByText('Chunk error').click()
     await page.waitForURL(url('/chunk-error'))
     expect(consoleLogs.map(c => c.text).join('')).toContain('caught chunk load error')
diff --git a/test/bundle.test.ts b/test/bundle.test.ts
index cd30d6c2ba..d1dc7dce85 100644
--- a/test/bundle.test.ts
+++ b/test/bundle.test.ts
@@ -5,8 +5,16 @@ import { execaCommand } from 'execa'
 import { globby } from 'globby'
 import { join } from 'pathe'
 import { isWindows } from 'std-env'
+import { isRenderingJson } from './utils'
 
-describe.skipIf(isWindows || process.env.ECOSYSTEM_CI)('minimal nuxt application', () => {
+// We only want to run this test for:
+// - ubuntu
+// - vite
+// - in our own CI
+// - using JS (default) payload rendering
+// - production build
+
+describe.skipIf(isWindows || process.env.TEST_BUILDER === 'webpack' || process.env.ECOSYSTEM_CI || !isRenderingJson || process.env.TEST_ENV === 'dev')('minimal nuxt application', () => {
   const rootDir = fileURLToPath(new URL('./fixtures/minimal', import.meta.url))
   const publicDir = join(rootDir, '.output/public')
   const serverDir = join(rootDir, '.output/server')
@@ -40,7 +48,7 @@ describe.skipIf(isWindows || process.env.ECOSYSTEM_CI)('minimal nuxt application
 
   it('default server bundle size', async () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"93k"')
+    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"92.5k"')
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"2650k"')
@@ -107,5 +115,5 @@ async function analyzeSizes (pattern: string | string[], rootDir: string) {
 }
 
 function roundToKilobytes (bytes: number) {
-  return (Math.round(bytes / 1024) + 'k')
+  return (bytes / 1024).toFixed(bytes > (100 * 1024) ? 0 : 1) + 'k'
 }
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index 7e28cc7474..b2e39ed571 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/test/fixtures/basic/pages/index.vue
@@ -18,6 +18,7 @@
     <NuxtLink to="/chunk-error" :prefetch="false">
       Chunk error
     </NuxtLink>
+    Some value: {{ someValue }}
     <button @click="someValue++">
       Increment state
     </button>