perf(nuxt): call cookie decode function only for named cookie (#28215)

package.json

@@ -65,6 +65,7 @@
     "changelogen": "0.5.5",
     "consola": "3.2.3",
     "cssnano": "7.0.5",
+    "destr": "^2.0.3",
     "devalue": "5.0.0",
     "eslint": "9.9.0",
     "eslint-plugin-no-only-tests": "3.1.0",

packages/nuxt/src/app/composables/cookie.ts

@@ -40,6 +40,7 @@ export function useCookie<T = string | null | undefined> (name: string, _opts?:
 export function useCookie<T = string | null | undefined> (name: string, _opts: CookieOptions<T> & { readonly: true }): Readonly<CookieRef<T>>
 export function useCookie<T = string | null | undefined> (name: string, _opts?: CookieOptions<T>): CookieRef<T> {
   const opts = { ...CookieDefaults, ..._opts }
+  opts.filter ??= key => key === name
   const cookies = readRawCookies(opts) || {}
 
   let delay: number | undefined

pnpm-lock.yaml

@@ -75,6 +75,9 @@ importers:
       cssnano:
         specifier: 7.0.5
         version: 7.0.5(postcss@8.4.41)
+      destr:
+        specifier: ^2.0.3
+        version: 2.0.3
       devalue:
         specifier: 5.0.0
         version: 5.0.0
@@ -4019,7 +4022,7 @@ packages:
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
     peerDependencies:
-      typescript: 5.5.4
+      typescript: '>=4.9.5'
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -4028,7 +4031,7 @@ packages:
     resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
-      typescript: 5.5.4
+      typescript: '>=4.9.5'
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -7788,7 +7791,7 @@ packages:
   vue@3.4.37:
     resolution: {integrity: sha512-3vXvNfkKTBsSJ7JP+LyR7GBuwQuckbWvuwAid3xbqK9ppsKt/DUvfqgZ48fgOLEfpy1IacL5f8QhUVl77RaI7A==}
     peerDependencies:
-      typescript: 5.5.4
+      typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true

test/nuxt/composables.test.ts

@@ -2,6 +2,7 @@
 
 import { describe, expect, it, vi } from 'vitest'
 import { defineEventHandler } from 'h3'
+import { destr } from 'destr'
 
 import { mount } from '@vue/test-utils'
 import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
@@ -694,6 +695,38 @@ describe('useCookie', () => {
     expect(computedVal.value).toBe(0)
   })
 
+  it('cookie decode function should be invoked once', () => {
+    // Pre-set cookies
+    document.cookie = 'foo=Foo'
+    document.cookie = 'bar=%7B%22s2%22%3A0%7D'
+    document.cookie = 'baz=%7B%22s2%22%3A0%7D'
+
+    let barCallCount = 0
+    const bazCookie = useCookie<{ s2: number }>('baz', {
+      default: () => ({ s2: -1 }),
+      decode (value) {
+        barCallCount++
+        return destr(decodeURIComponent(value))
+      },
+    })
+    bazCookie.value.s2++
+    expect(bazCookie.value.s2).toEqual(1)
+    expect(barCallCount).toBe(1)
+
+    let quxCallCount = 0
+    const quxCookie = useCookie<{ s3: number }>('qux', {
+      default: () => ({ s3: -1 }),
+      filter: key => key === 'bar' || key === 'baz',
+      decode (value) {
+        quxCallCount++
+        return destr(decodeURIComponent(value))
+      },
+    })
+    quxCookie.value.s3++
+    expect(quxCookie.value.s3).toBe(0)
+    expect(quxCallCount).toBe(2)
+  })
+
   it('should not watch custom cookie refs when shallow', () => {
     for (const value of ['shallow', false] as const) {
       const user = useCookie('shallowUserInfo', {