Skip to content

Commit d350689

Browse files
committed
docs: update plugin documentation with quick start guide and configuration steps; enhance introduction with additional plugin links
1 parent f6e3ed7 commit d350689

File tree

4 files changed

+186
-6
lines changed

4 files changed

+186
-6
lines changed

src/plugins/introduction.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,6 @@ To draw an analogy, plugin presets are similar to Babel presets and ESLint confi
5050
| [@winner-fed/plugin-unicons](./unicons.md) | Unified icon solution |
5151
| [@winner-fed/plugin-viewport](./viewport.md) | Viewport unit adaptation solution |
5252
| [@winner-fed/plugin-security](./security.md) | Subresource Integrity (SRI) solution |
53-
| [@winner-fed/plugin-check-syntax](./checksyntax.md) | Analyze build artifact syntax compatibility to detect advanced syntax that may cause compatibility issues |
53+
| [@winner-fed/plugin-check-syntax](./checksyntax.md) | Analyze build artifact syntax compatibility to detect advanced syntax that may cause compatibility issues |
54+
55+
For more plugins, visit [https://github.com/winjs-dev](https://github.com/winjs-dev)

src/plugins/plugins.md

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default (api: IApi) => {
1515
api.describe({
1616
key: 'changeFavicon',
1717
config: {
18-
schema(joi) {
19-
return joi.string();
18+
schema({ zod }) {
19+
return zod.string();
2020
},
2121
},
2222
enableBy: api.EnableBy.config
@@ -54,6 +54,94 @@ The id is a shorthand for the plugin's path, serving as the plugin's unique iden
5454

5555
For example, for plugin `node_modules/@winner-fed/plugin-foo/index.js`, typically its id is `@winner-fed/plugin-foo` and its key is `foo`. This allows developers to configure an item with key name `foo` in the configuration to configure the plugin.
5656

57+
## Quick Start
58+
59+
WinJS provides an official plugin template to help you quickly create and develop your own plugins.
60+
61+
### Using the Plugin Template
62+
63+
Visit the [winjs-plugin-template](https://github.com/winjs-dev/winjs-plugin-template) repository and click the "Use this template" button to create your own plugin project.
64+
65+
### Development Steps
66+
67+
#### 1. Modify Package Name
68+
69+
Modify the following fields in `package.json`:
70+
71+
```json
72+
{
73+
"name": "your-plugin-name",
74+
"repository": {
75+
"type": "git",
76+
"url": "git+https://github.com/your-org/your-plugin-name.git"
77+
}
78+
}
79+
```
80+
81+
#### 2. Update Documentation
82+
83+
Update all package name references in `README.md`, replacing `winjs-plugin-example` with your new package name.
84+
85+
#### 3. Modify Plugin Configuration
86+
87+
Modify the `key` value (default is `example`) in `src/index.ts` to your plugin configuration key:
88+
89+
```ts
90+
api.describe({
91+
key: 'yourPluginKey', // Change to your plugin key
92+
config: {
93+
schema({ zod }) {
94+
// Define configuration validation rules
95+
},
96+
},
97+
enableBy: api.EnableBy.config
98+
});
99+
```
100+
101+
#### 4. Development and Testing
102+
103+
Install dependencies:
104+
105+
```shell
106+
pnpm install
107+
```
108+
109+
Development mode (watch files and auto-rebuild):
110+
111+
```shell
112+
pnpm run dev
113+
```
114+
115+
Test the plugin in the `playground` directory:
116+
117+
```shell
118+
cd playground
119+
pnpm install
120+
pnpm run dev
121+
```
122+
123+
#### 5. Build and Publish
124+
125+
Build the project:
126+
127+
```shell
128+
pnpm run build
129+
```
130+
131+
Code format check:
132+
133+
```shell
134+
pnpm run lint
135+
```
136+
137+
Run tests:
138+
139+
```shell
140+
pnpm run test
141+
```
142+
143+
For more details, visit [winjs-plugin-template](https://github.com/winjs-dev/winjs-plugin-template).
144+
57145
## Enabling Plugins
58146
There are two ways to enable plugins: through environment variables and through configuration.
59147

src/zh/plugins/introduction.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,6 @@ vue2,我们可以有 @winner-fed/preset-vue2,包含 vue 2.x 相关的构建
5252
| [@winner-fed/plugin-unicons](./unicons.md) | icons 的统一解决方案 |
5353
| [@winner-fed/plugin-viewport](./viewport.md) | 视窗单位适配的解决方案 |
5454
| [@winner-fed/plugin-security](./security.md) | 子资源完整性 Subresource Integrity(SRI)的解决方案 |
55-
| [@winner-fed/plugin-check-syntax](./checksyntax.md) | 用于分析产物的语法兼容性,判断是否存在导致兼容性问题的高级语法 |
55+
| [@winner-fed/plugin-check-syntax](./checksyntax.md) | 用于分析产物的语法兼容性,判断是否存在导致兼容性问题的高级语法 |
56+
57+
更多插件可见 [https://github.com/winjs-dev](https://github.com/winjs-dev)

src/zh/plugins/plugins.md

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default (api: IApi) => {
1515
api.describe({
1616
key: 'changeFavicon',
1717
config: {
18-
schema(joi) {
19-
return joi.string();
18+
schema({ zod }) {
19+
return zod.string();
2020
},
2121
},
2222
enableBy: api.EnableBy.config
@@ -54,6 +54,94 @@ id 是插件所在路径的简写,作为插件的唯一标识;而 key 则是
5454

5555
比如插件 `node_modules/@winner-fed/plugin-foo/index.js` ,通常来说,它的 id 是 `@winner-fed/plugin-foo` , key 是 `foo`。此时就允许开发者在配置中来配置键名为 `foo` 的项,用来对插件进行配置。
5656

57+
## 快速开始
58+
59+
WinJS 提供了官方插件模板,帮助你快速创建和开发自己的插件。
60+
61+
### 使用插件模板
62+
63+
访问 [winjs-plugin-template](https://github.com/winjs-dev/winjs-plugin-template) 仓库,点击 "Use this template" 按钮创建你自己的插件项目。
64+
65+
### 开发步骤
66+
67+
#### 1. 修改包名
68+
69+
`package.json` 中修改以下字段:
70+
71+
```json
72+
{
73+
"name": "your-plugin-name",
74+
"repository": {
75+
"type": "git",
76+
"url": "git+https://github.com/your-org/your-plugin-name.git"
77+
}
78+
}
79+
```
80+
81+
#### 2. 更新文档
82+
83+
`README.md` 中更新所有包名引用,将 `winjs-plugin-example` 替换为你的新包名。
84+
85+
#### 3. 修改插件配置
86+
87+
`src/index.ts` 中修改 `key` 值(默认为 `example`)为你的插件配置键名:
88+
89+
```ts
90+
api.describe({
91+
key: 'yourPluginKey', // 修改为你的插件 key
92+
config: {
93+
schema({ zod }) {
94+
// 定义配置的校验规则
95+
},
96+
},
97+
enableBy: api.EnableBy.config
98+
});
99+
```
100+
101+
#### 4. 开发与测试
102+
103+
安装依赖:
104+
105+
```shell
106+
pnpm install
107+
```
108+
109+
开发模式(监听文件变化自动构建):
110+
111+
```shell
112+
pnpm run dev
113+
```
114+
115+
`playground` 目录中测试插件:
116+
117+
```shell
118+
cd playground
119+
pnpm install
120+
pnpm run dev
121+
```
122+
123+
#### 5. 构建与发布
124+
125+
构建项目:
126+
127+
```shell
128+
pnpm run build
129+
```
130+
131+
代码格式检查:
132+
133+
```shell
134+
pnpm run lint
135+
```
136+
137+
运行测试:
138+
139+
```shell
140+
pnpm run test
141+
```
142+
143+
更多详细信息请访问 [winjs-plugin-template](https://github.com/winjs-dev/winjs-plugin-template)
144+
57145
## 启用插件
58146
插件有两种启用方式: 环境变量中启用和配置中启用。
59147

0 commit comments

Comments
 (0)