feat: add displayName option to whitelabel user-facing output

docs/config/shared-options.md

@@ -570,6 +570,54 @@ export default defineConfig({
 })
 ```
 
+## displayName
+
+- **Type:** `string`
+- **Default:** `'vite'`
+
+The name shown in user-facing output in place of "vite". This covers the dev server and build banners, the default logger prefix (`[vite]`), and the messages the HMR client logs to the browser console. It is meant for tools built on top of Vite that want their own name in the output.
+
+Setting it also leaves the names of Vite's own plugins (such as `vite:css`) out of error messages, warnings and the error overlay; see [`hiddenPluginNames`](#hiddenpluginnames). It does not rename plugins, or change [`envPrefix`](#envprefix) or internal URLs such as `/@vite/client`. When using [`customLogger`](#customlogger), pass the same name to `createLogger(level, { displayName })` to keep the prefix consistent.
+
+```js
+export default defineConfig({
+  displayName: 'my-tool',
+})
+```
+
+## hiddenPluginNames
+
+- **Type:** `(string | RegExp)[]`
+- **Default:** `[]`
+
+Plugin names to leave out of error messages, warnings and the error overlay. A string matches a name exactly; a RegExp is tested against it. When [`displayName`](#displayname) is set, the names of Vite's own plugins (`vite:*`) are left out as well.
+
+It is meant for tools built on top of Vite whose users neither added nor configure those plugins, so their names give the user nothing to act on. The plugins keep their names; only the output leaves them out.
+
+```js
+export default defineConfig({
+  displayName: 'my-tool',
+  hiddenPluginNames: [/^my-tool:/],
+})
+```
+
+## configHint
+
+- **Type:** `{ file: string; key?: string }`
+
+Where users set Vite's options, for the messages that tell them to change one: the error overlay's tip and the error for a blocked host. By default these name `vite.config.js`, or the overlay the config file that was loaded.
+
+`file` is the file users edit, and `key` the property Vite's options sit under in it, if any. It is meant for tools built on top of Vite that take Vite's options in their own config file:
+
+```js
+export default defineConfig({
+  displayName: 'my-tool',
+  // The overlay's tip says to set `vite.server.hmr.overlay` to `false`
+  // in `my-tool.config.js`.
+  configHint: { file: 'my-tool.config.js', key: 'vite' },
+})
+```
+
 ## clearScreen
 
 - **Type:** `boolean`

packages/plugin-legacy/package.json

@@ -56,7 +56,7 @@
     "picocolors": "^1.1.1",
     "tsdown": "^0.23.1",
     "unrun": "^0.3.1",
-    "vite": "workspace:*"
+    "vite": "workspace:@paul-browne/vite@*"
   },
   "compatiblePackages": {
     "schemaVersion": 1,

packages/vite/README.md

@@ -1,3 +1,34 @@
+# @paul-browne/vite
+
+A fork of [Vite](https://github.com/vitejs/vite) with options for tools built on Vite that want their own name in its output ([vitejs/vite#23175](https://github.com/vitejs/vite/issues/23175), [vitejs/vite#23695](https://github.com/vitejs/vite/pull/23695)):
+
+- `displayName` shows the tool's name instead of "vite" in CLI banners, log prefixes and the browser console, and leaves Vite's own plugin names (`vite:*`) out of errors, warnings and the error overlay.
+- `hiddenPluginNames` leaves more plugin names out the same way, such as the tool's own.
+- `configHint` points the error overlay's tip and the blocked-host error at the tool's config file instead of `vite.config.js`.
+
+Each release is based on an upstream Vite release, with the patch number raised for the fork's own changes: 8.3.6 is upstream 8.3.4 plus `hiddenPluginNames`, `configHint`, and a fix that names the file when one of Rolldown's native plugins, such as the JSON plugin, fails to transform it.
+
+Install it under the `vite` name so plugins and `import ... from 'vite'` keep working:
+
+```sh
+npm i -D vite@npm:@paul-browne/vite
+```
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  displayName: 'my-tool',
+  hiddenPluginNames: [/^my-tool:/],
+  configHint: { file: 'my-tool.config.js', key: 'vite' },
+})
+```
+
+The original Vite README follows.
+
+---
+
 # Vite ⚡
 
 > Next Generation Frontend Tooling

packages/vite/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vite",
-  "version": "8.3.4",
-  "description": "Native-ESM powered web dev build tool",
+  "name": "@paul-browne/vite",
+  "version": "8.3.6",
+  "description": "Vite with a configurable displayName for whitelabelling (fork of vite)",
   "keywords": [
     "build-tool",
     "dev-server",
@@ -12,13 +12,13 @@
   ],
   "homepage": "https://vite.dev",
   "bugs": {
-    "url": "https://github.com/vitejs/vite/issues"
+    "url": "https://github.com/Paul-Browne/vite/issues"
   },
   "license": "MIT",
   "author": "Evan You",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vitejs/vite.git",
+    "url": "git+https://github.com/Paul-Browne/vite.git",
     "directory": "packages/vite"
   },
   "funding": "https://github.com/vitejs/vite?sponsor=1",
@@ -133,6 +133,9 @@
     "ufo": "^1.6.4",
     "ws": "^8.22.0"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "@types/node": "^20.19.0 || >=22.12.0",
     "@vitejs/devtools": "^0.7.1 || ^0.8.0",

packages/vite/rewriteSelfImportsPlugin.ts

@@ -0,0 +1,27 @@
+import type { Plugin } from 'rolldown'
+import pkg from './package.json' with { type: 'json' }
+
+/**
+ * The bundles import `vite/module-runner` from this same package. When it is
+ * published under another name (e.g. `@paul-browne/vite`), point those imports
+ * at that name so they self-resolve instead of reaching an unrelated `vite`.
+ * Runs last so the type bundle's own checks still see `vite/module-runner`.
+ */
+export function rewriteSelfImportsPlugin(): Plugin {
+  return {
+    name: 'rewrite-self-imports',
+    generateBundle: {
+      order: 'post',
+      handler(_opts, bundle) {
+        if (pkg.name === 'vite') return
+        for (const chunk of Object.values(bundle)) {
+          if (chunk.type !== 'chunk') continue
+          chunk.code = chunk.code.replace(
+            /(["'])vite\/module-runner\1/g,
+            `$1${pkg.name}/module-runner$1`,
+          )
+        }
+      },
+    },
+  }
+}

packages/vite/rolldown.config.ts

@@ -5,6 +5,7 @@ import MagicString from 'magic-string'
 import type { Plugin } from 'rolldown'
 import { defineConfig } from 'rolldown'
 import pkg from './package.json' with { type: 'json' }
+import { rewriteSelfImportsPlugin } from './rewriteSelfImportsPlugin'
 import licensePlugin from './rollupLicensePlugin'
 
 // eslint-disable-next-line n/no-unsupported-features/node-builtins
@@ -140,6 +141,7 @@ const nodeConfig = defineConfig({
     writeTypesPlugin(),
     enableSourceMapsInWatchModePlugin(),
     externalizeDepsInWatchPlugin(),
+    rewriteSelfImportsPlugin(),
   ],
 })
 

packages/vite/rolldown.dts.config.ts

@@ -13,6 +13,7 @@ import { dts } from 'rolldown-plugin-dts'
 import { parseAst } from 'rolldown/parseAst'
 import type { ESTree } from 'rolldown/utils'
 import pkg from './package.json' with { type: 'json' }
+import { rewriteSelfImportsPlugin } from './rewriteSelfImportsPlugin'
 
 type Directive = ESTree.Directive
 type ModuleExportName = ESTree.ModuleExportName
@@ -59,6 +60,7 @@ export default defineConfig({
       },
       emitDtsOnly: true,
     }),
+    rewriteSelfImportsPlugin(),
   ],
 })
 

packages/vite/src/client/bundledDevClient.ts

@@ -10,6 +10,7 @@ import {
   registerBundledDevClient,
   transport,
 } from './client'
+import { logPrefix } from './logPrefix'
 
 declare const __HMR_PARTIAL_ACCEPT__: boolean
 
@@ -50,8 +51,8 @@ if (typeof DevRuntime !== 'undefined') {
 
   const bundledDevHmrClient = new BundledDevHMRClient(
     {
-      error: (err) => console.error('[vite]', err),
-      debug: (...msg) => console.debug('[vite]', ...msg),
+      error: (err) => console.error(logPrefix, err),
+      debug: (...msg) => console.debug(logPrefix, ...msg),
     },
     transport,
     runtime,

packages/vite/src/client/client.ts

@@ -9,6 +9,7 @@ import {
 } from '../shared/moduleRunnerTransport'
 import { wrapId } from '../shared/utils'
 import type { BundledDevHMRClient } from './bundledDevHmrClient'
+import { logPrefix } from './logPrefix'
 import { ErrorOverlay, cspNonce, overlayId } from './overlay'
 // @ts-expect-error internal virtual module
 import '@vite/env'
@@ -25,8 +26,7 @@ declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 declare const __WS_TOKEN__: string
 declare const __SERVER_FORWARD_CONSOLE__: any
-
-console.debug('[vite] connecting...')
+console.debug(`${logPrefix} connecting...`)
 
 const importMetaUrl = new URL(import.meta.url)
 
@@ -73,7 +73,7 @@ export const transport = normalizeModuleRunnerTransport(
             try {
               await wsTransport.connect(handlers)
               console.info(
-                '[vite] Direct websocket connection fallback. Check out https://vite.dev/config/server-options.html#server-hmr to remove the previous connection error.',
+                `${logPrefix} Direct websocket connection fallback. Check out https://vite.dev/config/server-options.html#server-hmr to remove the previous connection error.`,
               )
             } catch (e) {
               if (
@@ -85,7 +85,7 @@ export const transport = normalizeModuleRunnerTransport(
                   currentScriptHostURL.host +
                   currentScriptHostURL.pathname.replace(/@vite\/client$/, '')
                 console.error(
-                  '[vite] failed to connect to websocket.\n' +
+                  `${logPrefix} failed to connect to websocket.\n` +
                     'your current setup:\n' +
                     `  (browser) ${currentScriptHost} <--[HTTP]--> ${serverHost} (server)\n` +
                     `  (browser) ${socketHost} <--[WebSocket (failing)]--> ${directSocketHost} (server)\n` +
@@ -95,7 +95,7 @@ export const transport = normalizeModuleRunnerTransport(
             }
             return
           }
-          console.error(`[vite] failed to connect to websocket (${e}). `)
+          console.error(`${logPrefix} failed to connect to websocket (${e}). `)
           throw e
         }
       },
@@ -146,8 +146,8 @@ function wrapIdIfNeeded(id: string): string {
 
 const hmrClient = new HMRClient(
   {
-    error: (err) => console.error('[vite]', err),
-    debug: (...msg) => console.debug('[vite]', ...msg),
+    error: (err) => console.error(logPrefix, err),
+    debug: (...msg) => console.debug(logPrefix, ...msg),
   },
   transport,
   async function importUpdatedModule({
@@ -210,7 +210,7 @@ async function handleMessage(payload: HotPayload) {
   const activeHmrClient = bundledDevClient ?? hmrClient
   switch (payload.type) {
     case 'connected':
-      console.debug(`[vite] connected.`)
+      console.debug(`${logPrefix} connected.`)
       break
     case 'bundled-dev-update':
       bundledDevClient!.handlePush(payload)
@@ -258,7 +258,7 @@ async function handleMessage(payload: HotPayload) {
             newLinkTag.href = new URL(newPath, el.href).href
             const removeOldEl = () => {
               el.remove()
-              console.debug(`[vite] css hot updated: ${searchUrl}`)
+              console.debug(`${logPrefix} css hot updated: ${searchUrl}`)
               resolve()
             }
             newLinkTag.addEventListener('load', removeOldEl)
@@ -274,7 +274,9 @@ async function handleMessage(payload: HotPayload) {
       await activeHmrClient.notifyListeners(payload.event, payload.data)
       if (payload.event === 'vite:ws:disconnect') {
         if (hasDocument && !willUnload) {
-          console.log(`[vite] server connection lost. Polling for restart...`)
+          console.log(
+            `${logPrefix} server connection lost. Polling for restart...`,
+          )
           const socket = payload.data.webSocket as WebSocket
           const url = new URL(socket.url)
           url.search = '' // remove query string including `token`
@@ -325,7 +327,7 @@ async function handleMessage(payload: HotPayload) {
           createErrorOverlay(err)
         } else {
           console.error(
-            `[vite] Internal Server Error\n${err.message}\n${err.stack}`,
+            `${logPrefix} Internal Server Error\n${err.message}\n${err.stack}`,
           )
         }
       }
@@ -382,6 +384,8 @@ function waitForSuccessfulPing(socketUrl: string) {
   const blob = new Blob(
     [
       '"use strict";',
+      // the functions below are stringified, so module-scope values they use must be redeclared
+      `const logPrefix = ${JSON.stringify(logPrefix)};`,
       `const waitForSuccessfulPingInternal = ${waitForSuccessfulPingInternal.toString()};`,
       `const fn = ${pingWorkerContentMain.toString()};`,
       `fn(${JSON.stringify(socketUrl)})`,
@@ -439,25 +443,25 @@ function pingWorkerContentMain(socketUrl: string) {
     port.addEventListener('message', (event) => {
       const { visibility } = event.data
       visibilityManager.currentState = visibility
-      console.debug('[vite] new window visibility', visibility)
+      console.debug(`${logPrefix} new window visibility`, visibility)
       for (const listener of visibilityManager.listeners) {
         listener(visibility)
       }
     })
     port.start()
 
-    console.debug('[vite] connected from window')
+    console.debug(`${logPrefix} connected from window`)
     waitForSuccessfulPingInternal(socketUrl, visibilityManager).then(
       () => {
-        console.debug('[vite] ping successful')
+        console.debug(`${logPrefix} ping successful`)
         try {
           port.postMessage({ type: 'success' })
         } catch (error) {
           port.postMessage({ type: 'error', error })
         }
       },
       (error) => {
-        console.debug('[vite] error happened', error)
+        console.debug(`${logPrefix} error happened`, error)
         try {
           port.postMessage({ type: 'error', error })
         } catch (error) {

packages/vite/src/client/logPrefix.ts

@@ -0,0 +1,4 @@
+// injected by the hmr plugin when served
+declare const __DISPLAY_NAME__: string
+
+export const logPrefix = `[${__DISPLAY_NAME__}]`

packages/vite/src/client/overlay.ts

@@ -3,8 +3,10 @@ import type { ErrorPayload } from '#types/hmrPayload'
 // injected by the hmr plugin when served
 declare const __BASE__: string
 declare const __HMR_CONFIG_NAME__: string
+declare const __HMR_OVERLAY_OPTION__: string
 
 const hmrConfigName = __HMR_CONFIG_NAME__
+const hmrOverlayOption = __HMR_OVERLAY_OPTION__
 const base = __BASE__ || '/'
 
 export const cspNonce =
@@ -196,7 +198,7 @@ const createTemplate = () =>
         ' key, or fix the code to dismiss.',
         h('br'),
         'You can also disable this overlay by setting ',
-        h('code', { part: 'config-option-name' }, 'server.hmr.overlay'),
+        h('code', { part: 'config-option-name' }, hmrOverlayOption),
         ' to ',
         h('code', { part: 'config-option-value' }, 'false'),
         ' in ',