fix(dev): omit default ports and decode urls in the dev url block

Author: danielroe

packages/nuxt-cli/src/dev/listen.ts

@@ -67,6 +67,24 @@ export interface Listener {
 
 const ANY_HOSTS = new Set(['', '0.0.0.0', '::'])
 const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '::1'])
+const DEFAULT_PORTS = { http: 80, https: 443 } as const
+
+/**
+ * Render a URL for display: the port is omitted when it is the protocol
+ * default, and percent-encoding is decoded so a non-ASCII `baseURL` is
+ * readable. A malformed sequence is left as-is rather than throwing.
+ */
+export function formatDisplayURL(protocol: 'http' | 'https', host: string, port: number, baseURL: string): string {
+  const hostname = host.includes(':') ? `[${host}]` : host
+  const suffix = port === DEFAULT_PORTS[protocol] ? '' : `:${port}`
+  const url = `${protocol}://${hostname}${suffix}${baseURL}`
+  try {
+    return decodeURI(url)
+  }
+  catch {
+    return url
+  }
+}
 
 const HOSTNAME_RE = /^(?!-)[\d.:a-z-]{1,253}(?<!-)$/i
 
@@ -152,7 +170,7 @@ export async function listen(handler: RequestListener, options: ListenOptions =
   const address = server.address() as AddressInfo
   const protocol = certificate ? 'https' : 'http'
   const baseURL = options.baseURL || '/'
-  const formatURL = (host: string) => `${protocol}://${host.includes(':') ? `[${host}]` : host}:${address.port}${baseURL}`
+  const formatURL = (host: string) => formatDisplayURL(protocol, host, address.port, baseURL)
 
   const anyHost = ANY_HOSTS.has(hostname)
   const url = formatURL(anyHost ? 'localhost' : hostname)

packages/nuxt-cli/test/unit/listen.spec.ts

@@ -4,7 +4,7 @@ import { networkInterfaces } from 'node:os'
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { copyURL, getNetworkAddresses, listen, openBrowser, resolveOpenCommand, validateHostname } from '../../src/dev/listen'
+import { copyURL, formatDisplayURL, getNetworkAddresses, listen, openBrowser, resolveOpenCommand, validateHostname } from '../../src/dev/listen'
 
 const writeText = vi.hoisted(() => vi.fn())
 
@@ -62,6 +62,31 @@ describe('getNetworkAddresses', () => {
   })
 })
 
+describe('formatDisplayURL', () => {
+  it('should include a non-default port', () => {
+    expect(formatDisplayURL('http', 'localhost', 3000, '/')).toBe('http://localhost:3000/')
+    expect(formatDisplayURL('https', 'localhost', 8443, '/')).toBe('https://localhost:8443/')
+  })
+
+  it('should omit the default port for the protocol', () => {
+    expect(formatDisplayURL('http', 'localhost', 80, '/')).toBe('http://localhost/')
+    expect(formatDisplayURL('https', 'localhost', 443, '/')).toBe('https://localhost/')
+    expect(formatDisplayURL('https', 'localhost', 80, '/')).toBe('https://localhost:80/')
+  })
+
+  it('should bracket ipv6 hosts', () => {
+    expect(formatDisplayURL('http', '::1', 3000, '/')).toBe('http://[::1]:3000/')
+  })
+
+  it('should decode a percent-encoded base url', () => {
+    expect(formatDisplayURL('http', 'localhost', 3000, '/%C3%A9t%C3%A9/')).toBe('http://localhost:3000/été/')
+  })
+
+  it('should leave a malformed encoding alone', () => {
+    expect(formatDisplayURL('http', 'localhost', 3000, '/%E0%A4%A/')).toBe('http://localhost:3000/%E0%A4%A/')
+  })
+})
+
 describe('validateHostname', () => {
   it('should pass through valid hosts', () => {
     expect(validateHostname('localhost')).toBe('localhost')