docs: add NonInheritBadge to options that are not inherited to other environments (vitejs#20471)

Author: sapphi-red

docs/.vitepress/theme/components/NonInheritBadge.vue

@@ -0,0 +1,8 @@
+<template>
+  <a
+    href="/guide/api-environment#environments-configuration"
+    class="ignore-header"
+  >
+    <Badge type="info" text="non-inherit" />
+  </a>
+</template>

docs/.vitepress/theme/index.ts

@@ -9,6 +9,7 @@ import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
 import YouTubeVideo from './components/YouTubeVideo.vue'
 import SponsorBanner from './components/SponsorBanner.vue'
+import NonInheritBadge from './components/NonInheritBadge.vue'
 import 'virtual:group-icons.css'
 
 export default {
@@ -22,6 +23,7 @@ export default {
   enhanceApp({ app }) {
     app.component('SvgImage', SvgImage)
     app.component('YouTubeVideo', YouTubeVideo)
+    app.component('NonInheritBadge', NonInheritBadge)
     app.use(TwoslashFloatingVue)
   },
 } satisfies Theme

docs/config/dep-optimization-options.md

@@ -4,15 +4,15 @@
 
 Unless noted, the options in this section are only applied to the dependency optimizer, which is only used in dev.
 
-## optimizeDeps.entries
+## optimizeDeps.entries <NonInheritBadge />
 
 - **Type:** `string | string[]`
 
 By default, Vite will crawl all your `.html` files to detect dependencies that need to be pre-bundled (ignoring `node_modules`, `build.outDir`, `__tests__` and `coverage`). If `build.rollupOptions.input` is specified, Vite will crawl those entry points instead.
 
 If neither of these fit your needs, you can specify custom entries using this option - the value should be a [`tinyglobby` pattern](https://github.com/SuperchupuDev/tinyglobby) or array of patterns that are relative from Vite project root. This will overwrite default entries inference. Only `node_modules` and `build.outDir` folders will be ignored by default when `optimizeDeps.entries` is explicitly defined. If other folders need to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`. `node_modules` will not be ignored for patterns that explicitly include the string `node_modules`.
 
-## optimizeDeps.exclude
+## optimizeDeps.exclude <NonInheritBadge />
 
 - **Type:** `string[]`
 
@@ -33,7 +33,7 @@ export default defineConfig({
 
 :::
 
-## optimizeDeps.include
+## optimizeDeps.include <NonInheritBadge />
 
 - **Type:** `string[]`
 
@@ -51,7 +51,7 @@ export default defineConfig({
 })
 ```
 
-## optimizeDeps.esbuildOptions
+## optimizeDeps.esbuildOptions <NonInheritBadge />
 
 - **Type:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`[`EsbuildBuildOptions`](https://esbuild.github.io/api/#general-options)`,
 | 'bundle'
@@ -72,28 +72,28 @@ Certain options are omitted since changing them would not be compatible with Vit
 - `external` is also omitted, use Vite's `optimizeDeps.exclude` option
 - `plugins` are merged with Vite's dep plugin
 
-## optimizeDeps.force
+## optimizeDeps.force <NonInheritBadge />
 
 - **Type:** `boolean`
 
 Set to `true` to force dependency pre-bundling, ignoring previously cached optimized dependencies.
 
-## optimizeDeps.noDiscovery
+## optimizeDeps.noDiscovery <NonInheritBadge />
 
 - **Type:** `boolean`
 - **Default:** `false`
 
 When set to `true`, automatic dependency discovery will be disabled and only dependencies listed in `optimizeDeps.include` will be optimized. CJS-only dependencies must be present in `optimizeDeps.include` during dev.
 
-## optimizeDeps.holdUntilCrawlEnd
+## optimizeDeps.holdUntilCrawlEnd <NonInheritBadge />
 
 - **Experimental:** [Give Feedback](https://github.com/vitejs/vite/discussions/15834)
 - **Type:** `boolean`
 - **Default:** `true`
 
 When enabled, it will hold the first optimized deps results until all static imports are crawled on cold start. This avoids the need for full-page reloads when new dependencies are discovered and they trigger the generation of new common chunks. If all dependencies are found by the scanner plus the explicitly defined ones in `include`, it is better to disable this option to let the browser process more requests in parallel.
 
-## optimizeDeps.disabled
+## optimizeDeps.disabled <NonInheritBadge />
 
 - **Deprecated**
 - **Experimental:** [Give Feedback](https://github.com/vitejs/vite/discussions/13839)
@@ -108,7 +108,7 @@ To disable the optimizer completely, use `optimizeDeps.noDiscovery: true` to dis
 Optimizing dependencies during build time was an **experimental** feature. Projects trying out this strategy also removed `@rollup/plugin-commonjs` using `build.commonjsOptions: { include: [] }`. If you did so, a warning will guide you to re-enable it to support CJS only packages while bundling.
 :::
 
-## optimizeDeps.needsInterop
+## optimizeDeps.needsInterop <NonInheritBadge />
 
 - **Experimental**
 - **Type:** `string[]`

docs/config/shared-options.md

@@ -114,7 +114,7 @@ If you have duplicated copies of the same dependency in your app (likely due to
 For SSR builds, deduplication does not work for ESM build outputs configured from `build.rollupOptions.output`. A workaround is to use CJS build outputs until ESM has better plugin support for module loading.
 :::
 
-## resolve.conditions
+## resolve.conditions <NonInheritBadge />
 
 - **Type:** `string[]`
 - **Default:** `['module', 'browser', 'development|production']` (`defaultClientConditions`)
@@ -140,7 +140,7 @@ Here, `import` and `require` are "conditions". Conditions can be nested and shou
 
 Note that `import`, `require`, `default` conditions are always applied if the requirements are met.
 
-## resolve.mainFields
+## resolve.mainFields <NonInheritBadge />
 
 - **Type:** `string[]`
 - **Default:** `['browser', 'module', 'jsnext:main', 'jsnext']` (`defaultClientMainFields`)

docs/guide/api-environment.md

@@ -70,7 +70,7 @@ export default {
 }
 ```
 
-When not explicitly documented, environment inherits the configured top-level config options (for example, the new `server` and `edge` environments will inherit the `build.sourcemap: false` option). A small number of top-level options, like `optimizeDeps`, only apply to the `client` environment, as they don't work well when applied as a default to server environments. The `client` environment can also be configured explicitly through `environments.client`, but we recommend to do it with the top-level options so the client config remains unchanged when adding new environments.
+When not explicitly documented, environment inherits the configured top-level config options (for example, the new `server` and `edge` environments will inherit the `build.sourcemap: false` option). A small number of top-level options, like `optimizeDeps`, only apply to the `client` environment, as they don't work well when applied as a default to server environments. Those options have <NonInheritBadge /> badge in [the reference](/config/). The `client` environment can also be configured explicitly through `environments.client`, but we recommend to do it with the top-level options so the client config remains unchanged when adding new environments.
 
 The `EnvironmentOptions` interface exposes all the per-environment options. There are environment options that apply to both `build` and `dev`, like `resolve`. And there are `DevEnvironmentOptions` and `BuildEnvironmentOptions` for dev and build specific options (like `dev.warmup` or `build.outDir`). Some options like `optimizeDeps` only applies to dev, but is kept as top level instead of nested in `dev` for backward compatibility.