Skip to content

Commit e5f8490

Browse files
committed
chore: changelog for 1.9.2
1 parent 63a04f9 commit e5f8490

File tree

2 files changed

+116
-0
lines changed

2 files changed

+116
-0
lines changed

Diff for: changelog/1.9.2.md

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# TS Support for VuePress Plugin and Theme.
2+
3+
## Motivation
4+
5+
We've announced [VuePress 1.9](https://github.com/vuejs/vuepress/releases/tag/v1.9.0) that takes full TypeScript Support for Config File, while VuePress 1.9.2 ships with **TS Support for VuePress Plugin and Theme**:
6+
7+
<p align="center">
8+
<img src="./assets/showcase.png" width="400px"></img>
9+
<p>
10+
11+
## Quick Start
12+
13+
In order to make the plugin developer not dependent on VuePress for development, we provide a completely independent type package `@vuepress/types`:
14+
15+
```bash
16+
npm i @vuepress/types -D
17+
```
18+
19+
`@vuepress/types` exports four functions:
20+
21+
- `defineConfig`
22+
- `defineConfig4CustomTheme`
23+
- `defineTheme`
24+
- `definePlugin`
25+
26+
Note that using `@vuepress/types` is equivalent to using `vuepress/config`.
27+
28+
## Plugin Type
29+
30+
If you already have some VuePress plugins written in JS, you can leverage your IDE's intellisense with jsdoc type hints:
31+
32+
```js
33+
/**
34+
* @type {import('@vuepress/types').Plugin}
35+
*/
36+
module.exports = {
37+
ready() {
38+
// ...
39+
}
40+
};
41+
```
42+
43+
Alternatively, you can use the defineConfig helper which should provide intellisense without the need for jsdoc annotations:
44+
45+
```js
46+
import { definePlugin } from "@vuepress/types";
47+
48+
export default definePlugin({
49+
// ...
50+
});
51+
```
52+
53+
## Plugin Options Type
54+
55+
Type of plugin options also supports passing in through generic type:
56+
57+
```ts
58+
import { definePlugin } from "@vuepress/types";
59+
60+
interface Options {
61+
name: string;
62+
}
63+
64+
export default definePlugin<Options>((options, ctx) => {
65+
return {
66+
ready() {
67+
return ctx.base + options.name;
68+
}
69+
};
70+
});
71+
```
72+
73+
## Theme Type
74+
75+
Similar to [plugin](plugin-type), the only difference is the type you use, and the define function:
76+
77+
```diff
78+
/**
79+
- * @type {import('@vuepress/types').Plugin}
80+
+ * @type {import('@vuepress/types').Theme}
81+
*/
82+
```
83+
84+
```diff
85+
-import { definePlugin } from "@vuepress/types";
86+
+import { defineTheme } from "@vuepress/types";
87+
88+
-export default definePlugin({
89+
+export default defineTheme({
90+
// ...
91+
});
92+
```
93+
94+
## Theme Config Type
95+
96+
Type of theme config also supports passing in through generic type:
97+
98+
```ts
99+
import { defineTheme } from "@vuepress/types";
100+
101+
interface ThemeConfig {
102+
lang: string;
103+
}
104+
105+
export default defineTheme<ThemeConfig>((themeConfig, ctx) => {
106+
return {
107+
ready() {
108+
return ctx.base + themeConfig.lang;
109+
}
110+
};
111+
});
112+
```
113+
114+
## Notes
115+
116+
It is worth noting that, unlike the [site configuration](https://vuepress.vuejs.org/config/), i.e. `.vuepress/config.js`, if you use TypeScript to write theme or plugin, you still need to compile it into JavaScript before publishing it to NPM.

Diff for: changelog/assets/showcase.png

133 KB
Loading

0 commit comments

Comments
 (0)