Skip to content

Commit 0cf1b9b

Browse files
meteorlxymeteorlxy
committed
feat(plugin-palette): add watchers for palette and style files
1 parent ac80f20 commit 0cf1b9b

File tree

6 files changed

+157
-64
lines changed

6 files changed

+157
-64
lines changed

‎packages/@vuepress/plugin-palette/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
},
3535
"dependencies": {
3636
"@vuepress/core": "2.0.0-beta.8",
37-
"@vuepress/utils": "2.0.0-beta.8"
37+
"@vuepress/utils": "2.0.0-beta.8",
38+
"chokidar": "^3.5.1"
3839
},
3940
"publishConfig": {
4041
"access": "public"

‎packages/@vuepress/plugin-palette/src/node/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { palettePlugin } from './palettePlugin'
22

33
export * from './palettePlugin'
4+
export * from './preparePaletteFile'
5+
export * from './prepareStyleFile'
6+
export * from './presetOptions'
47

58
export default palettePlugin

‎packages/@vuepress/plugin-palette/src/node/palettePlugin.ts‎

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import * as chokidar from 'chokidar'
12
import type { Plugin } from '@vuepress/core'
2-
import { fs } from '@vuepress/utils'
3+
import { preparePaletteFile } from './preparePaletteFile'
4+
import { prepareStyleFile } from './prepareStyleFile'
5+
import { presetOptions } from './presetOptions'
36

47
/**
58
* Options of @vuepress/plugin-palette
@@ -36,43 +39,6 @@ export interface PalettePluginOptions {
3639
importCode?: (filePath: string) => string
3740
}
3841

39-
/**
40-
* Default options for different palette preset
41-
*/
42-
export const presetOptions: Record<
43-
Required<PalettePluginOptions>['preset'],
44-
Omit<Required<PalettePluginOptions>, 'preset'>
45-
> = {
46-
css: {
47-
userPaletteFile: '.vuepress/styles/palette.css',
48-
tempPaletteFile: 'styles/palette.css',
49-
userStyleFile: '.vuepress/styles/index.css',
50-
tempStyleFile: 'styles/index.css',
51-
importCode: (filePath) => `@import '${filePath}';\n`,
52-
},
53-
sass: {
54-
userPaletteFile: '.vuepress/styles/palette.scss',
55-
tempPaletteFile: 'styles/palette.scss',
56-
userStyleFile: '.vuepress/styles/index.scss',
57-
tempStyleFile: 'styles/index.scss',
58-
importCode: (filePath) => `@forward '${filePath}';\n`,
59-
},
60-
less: {
61-
userPaletteFile: '.vuepress/styles/palette.less',
62-
tempPaletteFile: 'styles/palette.less',
63-
userStyleFile: '.vuepress/styles/index.less',
64-
tempStyleFile: 'styles/index.less',
65-
importCode: (filePath) => `@import '${filePath}';\n`,
66-
},
67-
stylus: {
68-
userPaletteFile: '.vuepress/styles/palette.styl',
69-
tempPaletteFile: 'styles/palette.styl',
70-
userStyleFile: '.vuepress/styles/index.styl',
71-
tempStyleFile: 'styles/index.styl',
72-
importCode: (filePath) => `@require '${filePath}';\n`,
73-
},
74-
}
75-
7642
export const palettePlugin: Plugin<PalettePluginOptions> = (
7743
{
7844
preset = 'css',
@@ -83,34 +49,69 @@ export const palettePlugin: Plugin<PalettePluginOptions> = (
8349
importCode = presetOptions[preset].importCode,
8450
},
8551
app
86-
) => {
87-
const userPalette = app.dir.source(userPaletteFile)
88-
const userStyle = app.dir.source(userStyleFile)
89-
90-
return {
91-
name: '@vuepress/plugin-palette',
92-
93-
alias: {
94-
'@vuepress/plugin-palette/palette': app.dir.temp(tempPaletteFile),
95-
'@vuepress/plugin-palette/style': app.dir.temp(tempStyleFile),
96-
},
52+
) => ({
53+
name: '@vuepress/plugin-palette',
9754

98-
onPrepared: async () => {
99-
let paletteContent = ''
100-
let styleContent = ''
55+
alias: {
56+
'@vuepress/plugin-palette/palette': app.dir.temp(tempPaletteFile),
57+
'@vuepress/plugin-palette/style': app.dir.temp(tempStyleFile),
58+
},
10159

102-
if (await fs.pathExists(userPalette)) {
103-
paletteContent += importCode(userPalette)
104-
}
60+
onPrepared: () =>
61+
Promise.all([
62+
preparePaletteFile(app, {
63+
userPaletteFile,
64+
tempPaletteFile,
65+
importCode,
66+
}),
67+
prepareStyleFile(app, {
68+
userStyleFile,
69+
tempStyleFile,
70+
importCode,
71+
}),
72+
]),
10573

106-
if (await fs.pathExists(userStyle)) {
107-
styleContent += importCode(userStyle)
108-
}
74+
onWatched: (app, watchers) => {
75+
const paletteWatcher = chokidar.watch(userPaletteFile, {
76+
cwd: app.dir.source(),
77+
ignoreInitial: true,
78+
})
79+
paletteWatcher.on('add', () => {
80+
preparePaletteFile(app, {
81+
userPaletteFile,
82+
tempPaletteFile,
83+
importCode,
84+
})
85+
})
86+
paletteWatcher.on('unlink', () => {
87+
preparePaletteFile(app, {
88+
userPaletteFile,
89+
tempPaletteFile,
90+
importCode,
91+
})
92+
})
93+
watchers.push(paletteWatcher)
10994

110-
await app.writeTemp(tempPaletteFile, paletteContent)
111-
await app.writeTemp(tempStyleFile, styleContent)
112-
},
113-
}
114-
}
95+
const styleWatcher = chokidar.watch(userStyleFile, {
96+
cwd: app.dir.source(),
97+
ignoreInitial: true,
98+
})
99+
styleWatcher.on('add', () => {
100+
prepareStyleFile(app, {
101+
userStyleFile,
102+
tempStyleFile,
103+
importCode,
104+
})
105+
})
106+
styleWatcher.on('unlink', () => {
107+
prepareStyleFile(app, {
108+
userStyleFile,
109+
tempStyleFile,
110+
importCode,
111+
})
112+
})
113+
watchers.push(styleWatcher)
114+
},
115+
})
115116

116117
export default palettePlugin

‎packages/@vuepress/plugin-palette/src/node/preparePaletteFile.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { App } from '@vuepress/core'
2+
import { fs } from '@vuepress/utils'
3+
import type { PalettePluginOptions } from './palettePlugin'
4+
5+
export const preparePaletteFile = async (
6+
app: App,
7+
{
8+
userPaletteFile,
9+
tempPaletteFile,
10+
importCode,
11+
}: Pick<
12+
Required<PalettePluginOptions>,
13+
'userPaletteFile' | 'tempPaletteFile' | 'importCode'
14+
>
15+
): Promise<string> => {
16+
const userPalette = app.dir.source(userPaletteFile)
17+
18+
let content = ''
19+
20+
if (await fs.pathExists(userPalette)) {
21+
content += importCode(userPalette)
22+
}
23+
24+
return app.writeTemp(tempPaletteFile, content)
25+
}

‎packages/@vuepress/plugin-palette/src/node/prepareStyleFile.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { App } from '@vuepress/core'
2+
import { fs } from '@vuepress/utils'
3+
import type { PalettePluginOptions } from './palettePlugin'
4+
5+
export const prepareStyleFile = async (
6+
app: App,
7+
{
8+
userStyleFile,
9+
tempStyleFile,
10+
importCode,
11+
}: Pick<
12+
Required<PalettePluginOptions>,
13+
'userStyleFile' | 'tempStyleFile' | 'importCode'
14+
>
15+
): Promise<string> => {
16+
const userStyle = app.dir.source(userStyleFile)
17+
18+
let content = ''
19+
20+
if (await fs.pathExists(userStyle)) {
21+
content += importCode(userStyle)
22+
}
23+
24+
return app.writeTemp(tempStyleFile, content)
25+
}

‎packages/@vuepress/plugin-palette/src/node/presetOptions.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import type { PalettePluginOptions } from './palettePlugin'
2+
3+
/**
4+
* Default options for different palette preset
5+
*/
6+
export const presetOptions: Record<
7+
Required<PalettePluginOptions>['preset'],
8+
Omit<Required<PalettePluginOptions>, 'preset'>
9+
> = {
10+
css: {
11+
userPaletteFile: '.vuepress/styles/palette.css',
12+
tempPaletteFile: 'styles/palette.css',
13+
userStyleFile: '.vuepress/styles/index.css',
14+
tempStyleFile: 'styles/index.css',
15+
importCode: (filePath) => `@import '${filePath}';\n`,
16+
},
17+
sass: {
18+
userPaletteFile: '.vuepress/styles/palette.scss',
19+
tempPaletteFile: 'styles/palette.scss',
20+
userStyleFile: '.vuepress/styles/index.scss',
21+
tempStyleFile: 'styles/index.scss',
22+
importCode: (filePath) => `@forward '${filePath}';\n`,
23+
},
24+
less: {
25+
userPaletteFile: '.vuepress/styles/palette.less',
26+
tempPaletteFile: 'styles/palette.less',
27+
userStyleFile: '.vuepress/styles/index.less',
28+
tempStyleFile: 'styles/index.less',
29+
importCode: (filePath) => `@import '${filePath}';\n`,
30+
},
31+
stylus: {
32+
userPaletteFile: '.vuepress/styles/palette.styl',
33+
tempPaletteFile: 'styles/palette.styl',
34+
userStyleFile: '.vuepress/styles/index.styl',
35+
tempStyleFile: 'styles/index.styl',
36+
importCode: (filePath) => `@require '${filePath}';\n`,
37+
},
38+
}

0 commit comments

Comments
 (0)