perf(dev): use exsolve to resolve + import legacy loading template (#936)

Author: danielroe

packages/nuxi/src/commands/dev.ts

@@ -20,6 +20,7 @@ import { isBun, isTest } from 'std-env'
 import { initialize } from '../dev'
 import { renderError } from '../dev/error'
 import { isSocketURL, parseSocketURL } from '../dev/socket'
+import { resolveLoadingTemplate } from '../dev/utils'
 import { showVersions } from '../utils/banner'
 import { overrideEnv } from '../utils/env'
 import { loadKit } from '../utils/kit'
@@ -128,7 +129,7 @@ const command = defineCommand({
     }
 
     // Start proxy Listener
-    const devProxy = await createDevProxy(nuxtOptions, listenOptions)
+    const devProxy = await createDevProxy(cwd, nuxtOptions, listenOptions)
 
     const useSocket = nuxtOptions._majorVersion === 4 || !!process.env.NUXT_SOCKET
 
@@ -182,7 +183,7 @@ type ArgsT = Exclude<
 
 type DevProxy = Awaited<ReturnType<typeof createDevProxy>>
 
-async function createDevProxy(nuxtOptions: NuxtOptions, listenOptions: Partial<ListenOptions>) {
+async function createDevProxy(cwd: string, nuxtOptions: NuxtOptions, listenOptions: Partial<ListenOptions>) {
   let loadingMessage = 'Nuxt dev server is starting...'
   let error: Error | undefined
   let address: string | undefined
@@ -218,26 +219,16 @@ async function createDevProxy(nuxtOptions: NuxtOptions, listenOptions: Partial<L
     if (!address) {
       res.statusCode = 503
       res.setHeader('Content-Type', 'text/html')
+      res.setHeader('Cache-Control', 'no-store')
       if (loadingTemplate) {
         res.end(loadingTemplate({ loading: loadingMessage }))
         return
       }
-      // older versions of Nuxt did not have the loading template defined in the schema
 
+      // Nuxt <3.6 did not have the loading template defined in the schema
       async function resolveLoadingMessage() {
-        const { createJiti } = await import('jiti')
-        const jiti = createJiti(nuxtOptions.rootDir)
-        for (const url of nuxtOptions.modulesDir) {
-          const r = await jiti.import<{ loading: (opts?: { loading?: string }) => string }>('@nuxt/ui-templates', {
-            parentURL: url,
-            try: true,
-          })
-          if (r) {
-            loadingTemplate = r.loading
-            res.end(r.loading({ loading: loadingMessage }))
-            break
-          }
-        }
+        loadingTemplate = await resolveLoadingTemplate(cwd)
+        res.end(loadingTemplate({ loading: loadingMessage }))
       }
       return resolveLoadingMessage()
     }

packages/nuxi/src/commands/info.ts

@@ -6,7 +6,6 @@ import process from 'node:process'
 
 import { defineCommand } from 'citty'
 import clipboardy from 'clipboardy'
-import { createJiti } from 'jiti'
 import { detectPackageManager } from 'nypm'
 import { resolve } from 'pathe'
 import { readPackageJSON } from 'pkg-types'
@@ -168,6 +167,7 @@ function normalizeConfigModule(
 
 async function getNuxtConfig(rootDir: string) {
   try {
+    const { createJiti } = await import('jiti')
     const jiti = createJiti(rootDir, {
       interopDefault: true,
       // allow using `~` and `@` in `nuxt.config`

packages/nuxi/src/dev/utils.ts

@@ -9,16 +9,18 @@ import type { AddressInfo } from 'node:net'
 import EventEmitter from 'node:events'
 import { existsSync, watch } from 'node:fs'
 import { mkdir } from 'node:fs/promises'
-
 import process from 'node:process'
+import { pathToFileURL } from 'node:url'
+
 import defu from 'defu'
+import { resolveModulePath } from 'exsolve'
 import { toNodeListener } from 'h3'
 import { listen } from 'listhen'
 import { resolve } from 'pathe'
 import { debounce } from 'perfect-debounce'
 import { provider } from 'std-env'
-
 import { joinURL } from 'ufo'
+
 import { clearBuildDir } from '../utils/fs'
 import { loadKit } from '../utils/kit'
 
@@ -162,20 +164,12 @@ export class NuxtDevServer extends EventEmitter<DevServerEventMap> {
     renderError(req, res, this._loadingError)
   }
 
-  async resolveLoadingTemplate() {
-    const { createJiti } = await import('jiti')
-    const jiti = createJiti(this.cwd)
-    const loading = await jiti.import<{ loading: () => string }>('@nuxt/ui-templates').then(r => r.loading).catch(() => {})
-
-    return loading || ((params: { loading: string }) => `<h2>${params.loading}</h2>`)
-  }
-
   async _renderLoadingScreen(req: IncomingMessage, res: ServerResponse) {
     res.statusCode = 503
     res.setHeader('Content-Type', 'text/html')
     const loadingTemplate = this.options.loadingTemplate
       || this._currentNuxt?.options.devServer.loadingTemplate
-      || await this.resolveLoadingTemplate()
+      || await resolveLoadingTemplate(this.cwd)
     res.end(
       loadingTemplate({
         loading: this._loadingMessage || 'Loading...',
@@ -434,3 +428,12 @@ function createConfigDirWatcher(cwd: string, onReload: (file: string) => void) {
 
   return () => configDirWatcher.close()
 }
+
+// Nuxt <3.6 did not have the loading template defined in the schema
+export async function resolveLoadingTemplate(cwd: string) {
+  const nuxtPath = resolveModulePath('nuxt', { from: cwd, try: true })
+  const uiTemplatesPath = resolveModulePath('@nuxt/ui-templates', { from: nuxtPath || cwd })
+  const r: { loading: (opts?: { loading?: string }) => string } = await import(pathToFileURL(uiTemplatesPath).href)
+
+  return r.loading || ((params: { loading: string }) => `<h2>${params.loading}</h2>`)
+}