Merge d2491a0a3b into edc299a043

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -248,7 +248,7 @@ jobs:
           TEST_PAYLOAD: ${{ matrix.payload }}
           SKIP_BUNDLE_SIZE: ${{ github.event_name != 'push' || matrix.env == 'dev' || matrix.builder == 'webpack' || matrix.context == 'default' || matrix.payload == 'js' || runner.os == 'Windows' }}
 
-      - uses: codecov/codecov-action@5c47607acb93fed5485fdbf7232e8a31425f672a # v5.0.2
+      - uses: codecov/codecov-action@985343d70564a82044c1b7fcb84c2fa05405c1a2 # v5.0.4
         if: github.event_name != 'push' && matrix.env == 'built' && matrix.builder == 'vite' && matrix.context == 'default' && matrix.os == 'ubuntu-latest' && matrix.manifest == 'manifest-on'
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

package.json

@@ -91,7 +91,7 @@
     "devalue": "5.1.1",
     "eslint": "9.15.0",
     "eslint-plugin-no-only-tests": "3.3.0",
-    "eslint-plugin-perfectionist": "4.0.2",
+    "eslint-plugin-perfectionist": "4.0.3",
     "eslint-typegen": "0.3.2",
     "h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
     "happy-dom": "15.11.6",
@@ -118,7 +118,7 @@
     "vue-router": "4.4.5",
     "vue-tsc": "2.1.10"
   },
-  "packageManager": "pnpm@9.13.2",
+  "packageManager": "pnpm@9.14.1",
   "engines": {
     "node": "^16.10.0 || >=18.0.0"
   },

packages/nuxt/src/app/entry.ts

@@ -17,7 +17,7 @@ import plugins from '#build/plugins'
 // @ts-expect-error virtual file
 import RootComponent from '#build/root-component.mjs'
 // @ts-expect-error virtual file
-import { appId, multiApp, vueAppRootContainer } from '#build/nuxt.config.mjs'
+import { appId, appSpaLoaderAttrs, multiApp, vueAppRootContainer } from '#build/nuxt.config.mjs'
 
 let entry: (ssrContext?: CreateOptions['ssrContext']) => Promise<App<Element>>
 
@@ -72,6 +72,11 @@ if (import.meta.client) {
       if (vueApp.config.errorHandler === handleVueError) { vueApp.config.errorHandler = undefined }
     })
 
+    // Remove spa loader if present
+    nuxt.hook('app:suspense:resolve', () => {
+      if (!isSSR && appSpaLoaderAttrs.id) { document.getElementById(appSpaLoaderAttrs.id)?.remove() }
+    })
+
     try {
       await applyPlugins(nuxt, plugins)
     } catch (err) {

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -30,7 +30,7 @@ import { renderSSRHeadOptions } from '#internal/unhead.config.mjs'
 
 import type { NuxtPayload, NuxtSSRContext } from '#app'
 // @ts-expect-error virtual file
-import { appHead, appId, appRootAttrs, appRootTag, appTeleportAttrs, appTeleportTag, componentIslands, multiApp } from '#internal/nuxt.config.mjs'
+import { appHead, appId, appRootAttrs, appRootTag, appSpaLoaderAttrs, appSpaLoaderTag, appTeleportAttrs, appTeleportTag, componentIslands, multiApp, spaPreloaderOutside } from '#internal/nuxt.config.mjs'
 // @ts-expect-error virtual file
 import { buildAssetsURL, publicAssetsURL } from '#internal/nuxt/paths'
 
@@ -144,7 +144,15 @@ const getSPARenderer = lazyCachedFunction(async () => {
 
   // @ts-expect-error virtual file
   const spaTemplate = await import('#spa-template').then(r => r.template).catch(() => '')
-    .then(r => APP_ROOT_OPEN_TAG + r + APP_ROOT_CLOSE_TAG)
+    .then((r) => {
+      if (spaPreloaderOutside) {
+        const appTemplate = APP_ROOT_OPEN_TAG + APP_ROOT_CLOSE_TAG
+        const loaderTemplate = r ? APP_SPA_LOADER_OPEN_TAG + r + APP_SPA_LOADER_CLOSE_TAG : ''
+        return appTemplate + loaderTemplate
+      } else {
+        return APP_ROOT_OPEN_TAG + r + APP_ROOT_CLOSE_TAG
+      }
+    })
 
   const options = {
     manifest,
@@ -222,6 +230,9 @@ async function getIslandContext (event: H3Event): Promise<NuxtIslandContext> {
   return ctx
 }
 
+const APP_SPA_LOADER_OPEN_TAG = `<${appSpaLoaderTag}${propsToString(appSpaLoaderAttrs)}>`
+const APP_SPA_LOADER_CLOSE_TAG = `</${appSpaLoaderTag}>`
+
 const HAS_APP_TELEPORTS = !!(appTeleportTag && appTeleportAttrs.id)
 const APP_TELEPORT_OPEN_TAG = HAS_APP_TELEPORTS ? `<${appTeleportTag}${propsToString(appTeleportAttrs)}>` : ''
 const APP_TELEPORT_CLOSE_TAG = HAS_APP_TELEPORTS ? `</${appTeleportTag}>` : ''

packages/nuxt/src/core/templates.ts

@@ -525,6 +525,7 @@ export const nuxtConfigTemplate: NuxtTemplate = {
       `export const multiApp = ${!!ctx.nuxt.options.future.multiApp}`,
       `export const chunkErrorEvent = ${ctx.nuxt.options.experimental.emitRouteChunkError ? ctx.nuxt.options.builder === '@nuxt/vite-builder' ? '"vite:preloadError"' : '"nuxt:preloadError"' : 'false'}`,
       `export const crawlLinks = ${!!((ctx.nuxt as any)._nitro as Nitro).options.prerender.crawlLinks}`,
+      `export const spaPreloaderOutside = ${ctx.nuxt.options.experimental.spaPreloaderOutside}`,
     ].join('\n\n')
   },
 }

packages/schema/src/config/app.ts

@@ -235,7 +235,7 @@ export default defineUntypedSchema({
     },
 
     /**
-     * Customize Nuxt root element tag.
+     * Customize Nuxt Teleport element tag.
      */
     teleportTag: {
       $resolve: val => val || 'div',
@@ -262,6 +262,26 @@ export default defineUntypedSchema({
         })
       },
     },
+
+    /**
+     * Customize Nuxt SpaLoader element tag.
+     */
+    spaLoaderTag: {
+      $resolve: val => val || 'div',
+    },
+
+    /**
+     * Customize Nuxt Nuxt SpaLoader element attributes.
+     * @type {typeof import('@unhead/schema').HtmlAttributes}
+     */
+    spaLoaderAttrs: {
+      $resolve: async (val: undefined | null | Record<string, unknown>, get) => {
+        const spaLoaderId = await get('app.spaLoaderId')
+        return defu(val, {
+          id: spaLoaderId === false ? undefined : (spaLoaderId || '__nuxt-spa-loader'),
+        })
+      },
+    },
   },
 
   /**

packages/schema/src/config/experimental.ts

@@ -407,5 +407,11 @@ export default defineUntypedSchema({
         return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
       },
     },
+
+    /**
+     * Keep showing the spa-loading-template until suspense:resolve
+     * @see [Nuxt Issues #24770](https://github.com/nuxt/nuxt/issues/21721)
+     */
+    spaPreloaderOutside: false,
   },
 })

pnpm-lock.yaml

@@ -114,8 +114,8 @@ importers:
         specifier: 3.3.0
         version: 3.3.0
       eslint-plugin-perfectionist:
-        specifier: 4.0.2
+        specifier: 4.0.3
-        version: 4.0.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+        version: 4.0.3(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       eslint-typegen:
         specifier: 0.3.2
         version: 0.3.2(eslint@9.15.0(jiti@2.4.0))
@@ -1195,6 +1195,12 @@ importers:
         specifier: workspace:*
         version: link:../../../packages/nuxt
 
+  test/fixtures/spa-loader:
+    dependencies:
+      nuxt:
+        specifier: workspace:*
+        version: link:../../../packages/nuxt
+
   test/fixtures/suspense:
     dependencies:
       nuxt:
@@ -4373,8 +4379,8 @@ packages:
     resolution: {integrity: sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q==}
     engines: {node: '>=5.0.0'}
 
-  eslint-plugin-perfectionist@4.0.2:
+  eslint-plugin-perfectionist@4.0.3:
-    resolution: {integrity: sha512-zWdgyg2SdHqhp/P9d9vKwo5qD9is28xMAGzBslHqkZz5mVIikjyz1qvuJ4yS7Wrsf4KlbGorORefb4Kbe7Puzg==}
+    resolution: {integrity: sha512-CyafnreF6boy4lf1XaF72U8NbkwrfjU/mOf1y6doaDMS9zGXhUU1DSk+ZPf/rVwCf1PL1m+rhHqFs+IcB8kDmA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       eslint: '>=8.0.0'
@@ -11519,7 +11525,7 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@4.0.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3):
+  eslint-plugin-perfectionist@4.0.3(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3):
     dependencies:
       '@typescript-eslint/types': 8.15.0
       '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)

test/bundle.test.ts

@@ -37,7 +37,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
     const serverDir = join(rootDir, '.output/server')
 
     const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot(`"208k"`)
+    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot(`"209k"`)
 
     const modules = await analyzeSizes(['node_modules/**/*'], serverDir)
     expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot(`"1396k"`)

test/fixtures/spa-loader/app.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+await useAsyncData(async () => {
+  await new Promise((r) => { setTimeout(r, 50) })
+  return 42
+})
+</script>
+
+<template>
+  <div data-testid="content">
+    app content
+  </div>
+</template>
+
+<style scoped>
+
+</style>

test/fixtures/spa-loader/app/spa-loading-template.html

@@ -0,0 +1 @@
+<div data-testid="loader">loading...</div>

test/fixtures/spa-loader/nuxt.config.ts

@@ -0,0 +1,12 @@
+export default defineNuxtConfig({
+  devtools: { enabled: false },
+  spaLoadingTemplate: true,
+  routeRules: {
+    '/spa': { ssr: false },
+    '/ssr': { ssr: true },
+  },
+  experimental: {
+    spaPreloaderOutside: false,
+  },
+  compatibilityDate: '2024-06-28',
+})

test/fixtures/spa-loader/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-playground",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "nuxi preview"
+  },
+  "dependencies": {
+    "nuxt": "workspace:*"
+  }
+}

test/fixtures/spa-loader/server/api/test.ts

@@ -0,0 +1,3 @@
+export default eventHandler((_event) => {
+  return 'Hello!'
+})

test/fixtures/spa-loader/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

test/fixtures/spa-loader/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

test/spa-loader/spa-preloader-outside-disabled.test.ts

@@ -0,0 +1,41 @@
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { isWindows } from 'std-env'
+import { $fetch, getBrowser, setup, url } from '@nuxt/test-utils'
+
+const isWebpack =
+  process.env.TEST_BUILDER === 'webpack' ||
+  process.env.TEST_BUILDER === 'rspack'
+
+await setup({
+  rootDir: fileURLToPath(new URL('../fixtures/spa-loader', import.meta.url)),
+  dev: process.env.TEST_ENV === 'dev',
+  server: true,
+  browser: true,
+  setupTimeout: (isWindows ? 360 : 120) * 1000,
+  nuxtConfig: {
+    builder: isWebpack ? 'webpack' : 'vite',
+    spaLoadingTemplate: true,
+    experimental: {
+      spaPreloaderOutside: false,
+    },
+  },
+})
+
+describe('spaPreloaderOutside flag is disabled', () => {
+  it('shoul be render loader inside appTag', async () => {
+    const html = await $fetch('/spa')
+    expect(html).toContain(`<div id="__nuxt"><div data-testid="loader">loading...</div>\n</div>`)
+  })
+
+  it('spa-loader does not appear while the app is mounting', async () => {
+    const browser = await getBrowser()
+    const page = await browser.newPage({})
+    await page.goto(url('/spa'), { waitUntil: 'domcontentloaded' })
+
+    const loader = page.getByTestId('__nuxt-spa-loader')
+    expect(await loader.isHidden()).toBeTruthy()
+
+    await page.close()
+  }, 60_000)
+})

test/spa-loader/spa-preloader-outside-enabled.test.ts

@@ -0,0 +1,52 @@
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { isWindows } from 'std-env'
+import { getBrowser, setup, url } from '@nuxt/test-utils'
+
+const isWebpack = process.env.TEST_BUILDER === 'webpack' || process.env.TEST_BUILDER === 'rspack'
+
+await setup({
+  rootDir: fileURLToPath(new URL('../fixtures/spa-loader', import.meta.url)),
+  dev: process.env.TEST_ENV === 'dev',
+  server: true,
+  browser: true,
+  setupTimeout: (isWindows ? 360 : 120) * 1000,
+  nuxtConfig: {
+    builder: isWebpack ? 'webpack' : 'vite',
+    spaLoadingTemplate: true,
+    experimental: {
+      spaPreloaderOutside: true,
+    },
+  },
+})
+
+describe('spaPreloaderOutside flag is enabled', () => {
+  it('should render spa-loader', async () => {
+    const browser = await getBrowser()
+    const page = await browser.newPage({})
+    await page.goto(url('/spa'), { waitUntil: 'domcontentloaded' })
+    const loader = page.getByTestId('loader')
+    expect(await loader.isVisible()).toBeTruthy()
+
+    const content = page.getByTestId('content')
+    await content.waitFor({ state: 'visible' })
+    expect(await loader.isHidden()).toBeTruthy()
+
+    await page.close()
+  }, 60_000)
+
+  it('should render content without spa-loader', async () => {
+    const browser = await getBrowser()
+    const page = await browser.newPage({})
+    await page.goto(url('/ssr'), { waitUntil: 'domcontentloaded' })
+
+    const loader = page.getByTestId('__nuxt-spa-loader')
+    expect(await loader.isHidden()).toBeTruthy()
+
+    const content = page.getByTestId('content')
+    await content.waitFor({ state: 'visible' })
+    expect(await loader.isHidden()).toBeTruthy()
+
+    await page.close()
+  }, 60_000)
+})