8000 docs: add `@shikiji/vitepress-twoslash` (#16168) · vitejs/vite@6f8a320 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 6f8a320

Browse files
sapphi-redsapphi-red
authored
docs: add @shikiji/vitepress-twoslash (#16168)
1 parent 20bf97d commit 6f8a320

24 files changed

+997
-152
lines changed

‎docs/.vitepress/config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineConfig, DefaultTheme } from 'vitepress'
2+
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
23
import { buildEnd } from './buildEnd.config'
34

45
const ogDescription = 'Next Generation Frontend Tooling'
@@ -342,5 +343,8 @@ export default defineConfig({
342343
])
343344
return pageData
344345
},
346+
markdown: {
347+
codeTransformers: [transformerTwoslash()],
348+
},
345349
buildEnd,
346350
})

‎docs/.vitepress/theme/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { h } from 'vue'
22
import type { Theme } from 'vitepress'
33
import DefaultTheme from 'vitepress/theme'
4+
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
5+
import '@shikijs/vitepress-twoslash/style.css'
46
import './styles/vars.css'
57
import HomeSponsors from './components/HomeSponsors.vue'
68
import AsideSponsors from './components/AsideSponsors.vue'
@@ -16,5 +18,6 @@ export default {
1618
},
1719
enhanceApp({ app }) {
1820
app.component('SvgImage', SvgImage)
21+
app.use(TwoslashFloatingVue)
1922
},
2023
} satisfies Theme

‎docs/.vitepress/tsconfig.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2022",
4+
"module": "ESNext",
5+
"moduleResolution": "Bundler",
6+
"strict": true< 9E12 /span>,
7+
"noImplicitOverride": true,
8+
"noUnusedLocals": true,
9+
"esModuleInterop": true,
10+
"noEmit": true
11+
},
12+
"exclude": ["cache", "dist"]
13+
}

‎docs/config/build-options.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,22 @@ type ResolveModulePreloadDependenciesFn = (
4848
4949
The `resolveDependencies` function will be called for each dynamic import with a list of the chunks it depends on, and it will also be called for each chunk imported in entry HTML files. A new dependencies array can be returned with these filtered or more dependencies injected, and their paths modified. The `deps` paths are relative to the `build.outDir`. Returning a relative path to the `hostId` for `hostType === 'js'` is allowed, in which case `new URL(dep, import.meta.url)` is used to get an absolute path when injecting this module preload in the HTML head.
5050
51-
```js
51+
<!-- prettier-ignore-start -->
52+
```js twoslash
53+
/** @type {import('vite').UserConfig} */
54+
const config = {
55+
build: {
56+
// ---cut-before---
5257
modulePreload: {
5358
resolveDependencies: (filename, deps, { hostId, hostType }) => {
5459
return deps.filter(condition)
55-
}
60+
},
61+
},
62+
// ---cut-after---
63+
},
5664
}
5765
```
66+
<!-- prettier-ignore-end -->
5867

5968
The resolved dependency paths can be further modified using [`experimental.renderBuiltUrl`](../guide/build.md#advanced-base-options).
6069

‎docs/config/dep-optimization-options.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ Dependencies to exclude from pre-bundling.
1919
:::warning CommonJS
2020
CommonJS dependencies should not be excluded from optimization. If an ESM dependency is excluded from optimization, but has a nested CommonJS dependency, the CommonJS dependency should be added to `optimizeDeps.include`. Example:
2121

22-
```js
22+
```js twoslash
23+
import { defineConfig } from 'vite'
24+
// ---cut---
2325
export default defineConfig({
2426
optimizeDeps: {
2527
include: ['esm-dep > cjs-dep'],
@@ -37,7 +39,9 @@ By default, linked packages not inside `node_modules` are not pre-bundled. Use t
3739

3840
**Experimental:** If you're using a library with many deep imports, you can also specify a trailing glob pattern to pre-bundle all deep imports at once. This will avoid constantly pre-bundling whenever a new deep import is used. [Give Feedback](https://github.com/vitejs/vite/discussions/15833). For example:
3941

40-
```js
42+
```js twoslash
43+
import { defineConfig } from 'vite'
44+
// ---cut---
4145
export default defineConfig({
4246
optimizeDeps: {
4347
include: ['my-lib/components/**/*.vue'],

‎docs/config/index.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ Vite also directly supports TS config files. You can use `vite.config.ts` with t
5050

5151
If the config needs to conditionally determine options based on the command (`serve` or `build`), the [mode](/guide/env-and-mode) being used, if it's an SSR build (`isSsrBuild`), or is previewing the build (`isPreview`), it can export a function instead:
5252

53-
```js
53+
```js twoslash
54+
import { defineConfig } from 'vite'
55+
// ---cut---
5456
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
5557
if (command === 'serve') {
5658
return {
@@ -73,7 +75,9 @@ It is important to note that in Vite's API the `command` value is `serve` during
7375

7476
If the config needs to call async functions, it can export an async function instead. And this async function can also be passed through `defineConfig` for improved intellisense support:
7577

76-
```js
78+
```js twoslash
79+
import { defineConfig } from 'vite'
80+
// ---cut---
7781
export default defineConfig(async ({ command, mode }) => {
7882
const data = await asyncFunction()
7983
return {
@@ -88,7 +92,7 @@ Environmental Variables can be obtained from `process.env` as usual.
8892

8993
Note that Vite doesn't load `.env` files by default as the files to load can only be determined after evaluating the Vite config, for example, the `root` and `envDir` options affect the loading behaviour. However, you can use the exported `loadEnv` helper to load the specific `.env` file if needed.
9094

91-
```js
95+
```js twoslash
9296
import { defineConfig, loadEnv } from 'vite'
9397

9498
export default defineConfig(({ command, mode }) => {

‎docs/config/server-options.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ The first case is when `localhost` is used. Node.js under v17 reorders the resul
1818

1919
You can set [`dns.setDefaultResultOrder('verbatim')`](https://nodejs.org/api/dns.html#dns_dns_setdefaultresultorder_order) to disable the reordering behavior. Vite will then print the address as `localhost`.
2020

21-
```js
21+
```js twoslash
2222
// vite.config.js
2323
import { defineConfig } from 'vite'
24-
import dns from 'dns'
24+
import dns from 'node:dns'
2525

2626
dns.setDefaultResultOrder('verbatim')
2727

@@ -238,7 +238,7 @@ Create Vite server in middleware mode.
238238

239239
- **Example:**
240240

241-
```js
241+
```js twoslash
242242
import express from 'express'
243243
import { createServer as createViteServer } from 'vite'
244244

@@ -358,9 +358,9 @@ export default defineConfig({
358358
// in their paths to the ignore list.
359359
sourcemapIgnoreList(sourcePath, sourcemapPath) {
360360
return sourcePath.includes('node_modules')
361-
}
362-
}
363-
};
361+
},
362+
},
363+
})
364364
```
365365

366366
::: tip Note

‎docs/config/shared-options.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -415,7 +415,7 @@ Adjust console output verbosity. Default is `'info'`.
415415

416416
Use a custom logger to log messages. You can use Vite's `createLogger` API to get the default logger and customize it to, for example, change the message or filter out certain warnings.
417417

418-
```js
418+
```ts twoslash
419419
import { createLogger, defineConfig } from 'vite'
420420

421421
const logger = createLogger()

‎docs/guide/api-hmr.md

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ The manual HMR API is primarily intended for framework and tooling authors. As a
88

99
Vite exposes its manual HMR API via the special `import.meta.hot` object:
1010

11-
```ts
11+
```ts twoslash
12+
import type { ModuleNamespace } from 'vite/types/hot.d.ts'
13+
import type { InferCustomEventPayload } from 'vite/types/customEvent.d.ts'
14+
15+
// ---cut---
1216
interface ImportMeta {
1317
readonly hot?: ViteHotContext
1418
}
1519

16-
type ModuleNamespace = Record<string, any> & {
17-
[Symbol.toStringTag]: 'Module'
18-
}
19-
2020
interface ViteHotContext {
2121
readonly data: any
2222

@@ -32,7 +32,6 @@ interface ViteHotContext {
3232
prune(cb: (data: any) => void): void
3333
invalidate(message?: string): void
3434

35-
// `InferCustomEventPayload` provides types for built-in Vite events
3635
on<T extends string>(
3736
event: T,
3837
cb: (payload: InferCustomEventPayload<T>) => void,
@@ -67,7 +66,9 @@ Vite provides type definitions for `import.meta.hot` in [`vite/client.d.ts`](htt
6766
6867
For a module to self-accept, use `import.meta.hot.accept` with a callback which receives the updated module:
6968
70-
```js
69+
```js twoslash
70+
import 'vite/client'
71+
// ---cut---
7172
export const count = 1
7273

7374
if (import.meta.hot) {
@@ -90,7 +91,13 @@ Vite requires that the call to this function appears as `import.meta.hot.accept(
9091
9192
A module can also accept updates from direct dependencies without reloading itself:
9293
93-
```js
94+
```js twoslash
95+
// @filename: /foo.d.ts
96+
export declare const foo: () => void
97+
98+
// @filename: /example.js
99+
import 'vite/client'
100+
// ---cut---
94101
import { foo } from './foo.js'
95102

96103
foo()
@@ -117,7 +124,9 @@ if (import.meta.hot) {
117124
118125
A self-accepting module or a module that expects to be accepted by others can use `hot.dispose` to clean-up any persistent side effects created by its updated copy:
119126
120-
```js
127+
```js twoslash
128+
import 'vite/client'
129+
// ---cut---
121130
function setupSideEffect() {}
122131

123132
setupSideEffect()
@@ -133,7 +142,9 @@ if (import.meta.hot) {
133142
134143
Register a callback that will call when the module is no longer imported on the page. Compared to `hot.dispose`, this can be used if the source code cleans up side-effects by itself on updates and you only need to clean-up when it's removed from the page. Vite currently uses this for `.css` imports.
135144
136-
```js
145+
```js twoslash
146+
import 'vite/client'
147+
// ---cut---
137148
function setupOrReuseSideEffect() {}
138149

139150
setupOrReuseSideEffect()
@@ -151,7 +162,9 @@ The `import.meta.hot.data` object is persisted across different instances of the
151162
152163
Note that re-assignment of `data` itself is not supported. Instead, you should mutate properties of the `data` object so information added from other handlers are preserved.
153164
154-
```js
165+
```js twoslash
166+
import 'vite/client'
167+
// ---cut---
155168
// ok
156169
import.meta.hot.data.someValue = 'hello'
157170

@@ -169,7 +182,9 @@ A self-accepting module may realize during runtime that it can't handle a HMR up
169182
170183
Note that you should always call `import.meta.hot.accept` even if you plan to call `invalidate` immediately afterwards, or else the HMR client won't listen for future changes to the self-accepting module. To communicate your intent clearly, we recommend calling `invalidate` within the `accept` callback like so:
171184
172-
```js
185+
```js twoslash
186+
import 'vite/client'
187+
// ---cut---
173188
import.meta.hot.accept((module) => {
174189
// You may use the new module instance to decide whether to invalidate.
175190
if (cannotHandleUpdate(module)) {

0 commit comments

Comments
 (0)
0