feat(core): add onWatched hook

Author: meteorlxy

README.md

@@ -47,7 +47,7 @@ Temporarily record some breaking changes here.
 
 - `shouldPrefetch` -> the default value is changed to `false`
 - `patterns` -> `pagePatterns`
-- `extraWatchFiles` -> removed
+- `extraWatchFiles` -> removed, watch files manually in `onWatched` hook
 - `evergreen` -> the default value is changed to `true`
 - `markdown`
   - `markdown.lineNumbers` -> `markdown.code.lineNumbers`, and the default value is changed to `true`
@@ -125,7 +125,7 @@ Theme authors can use their own way for users to configure styles (not be limite
 #### Plugin API
 
 - `ready` -> `onPrepared`
-- `updated` -> removed
+- `updated` -> `onWatched`
 - `generated` -> `onGenerated`
 - `additionalPages` -> removed, use `app.pages.push(createPage())` in `onInitialized` hook
 - `clientDynamicModules` -> removed, use `app.writeTemp()` in `onPrepared` hook

packages/@vuepress/cli/src/commands/dev/dev.ts

@@ -1,4 +1,5 @@
 import * as chokidar from 'chokidar'
+import type { FSWatcher } from 'chokidar'
 import { createApp } from '@vuepress/core'
 import { chalk, debug, fs, logger } from '@vuepress/utils'
 import {
@@ -70,48 +71,53 @@ export const dev = async (
     return
   }
 
+  // all watchers
+  const watchers: FSWatcher[] = []
+
+  // restart dev command
+  const restart = async (): Promise<void> => {
+    await Promise.all([
+      // close all watchers
+      ...watchers.map((item) => item.close()),
+      // close current dev server
+      close(),
+    ])
+    // restart dev command
+    await dev(sourceDir, commandOptions)
+    logger.tip(`dev server has restarted, please refresh your browser`)
+  }
+
   // watch page files
   const pagesWatcher = chokidar.watch(app.options.pagePatterns, {
     cwd: app.dir.source(),
     ignoreInitial: true,
   })
-
-  // handle page add event
   pagesWatcher.on('add', (filePathRelative) => {
     logger.info(`page ${chalk.magenta(filePathRelative)} is created`)
     handlePageAdd(app, app.dir.source(filePathRelative))
   })
-
-  // handle page change event
   pagesWatcher.on('change', (filePathRelative) => {
     logger.info(`page ${chalk.magenta(filePathRelative)} is modified`)
     handlePageChange(app, app.dir.source(filePathRelative))
   })
-
-  // handle page unlink event
   pagesWatcher.on('unlink', (filePathRelative) => {
     logger.info(`page ${chalk.magenta(filePathRelative)} is removed`)
     handlePageUnlink(app, app.dir.source(filePathRelative))
   })
+  watchers.push(pagesWatcher)
 
   // watch user config file
   if (userConfigPath) {
     const configWatcher = chokidar.watch(userConfigPath, {
       cwd: process.cwd(),
       ignoreInitial: true,
     })
-    configWatcher.on('change', async (configFile) => {
+    configWatcher.on('change', (configFile) => {
       logger.info(`config ${chalk.magenta(configFile)} is modified`)
-      await Promise.all([
-        // close file watchers
-        pagesWatcher.close(),
-        configWatcher.close(),
-        // close current dev server
-        close(),
-      ])
-      // re-run dev command
-      await dev(sourceDir, commandOptions)
-      logger.tip(`dev server has restarted, please refresh your browser`)
+      restart()
     })
+    watchers.push(configWatcher)
   }
+
+  await app.pluginApi.hooks.onWatched.process(app, restart)
 }

packages/@vuepress/core/src/pluginApi/createPluginApiHooks.ts

@@ -5,6 +5,7 @@ export const createPluginApiHooks = (): PluginApi['hooks'] => ({
   // life cycle hooks
   onInitialized: createHookQueue('onInitialized'),
   onPrepared: createHookQueue('onPrepared'),
+  onWatched: createHookQueue('onWatched'),
   onGenerated: createHookQueue('onGenerated'),
 
   // page hooks

packages/@vuepress/core/src/types/plugin-api/hooks.ts

@@ -21,7 +21,9 @@ export type Hook<
 }
 
 // life-cycle hook
-export type LifeCycleHook = Hook<(app: App) => PromiseOrNot<void>>
+export type LifeCycleHook<T extends unknown[] = []> = Hook<
+  (app: App, ...args: T) => PromiseOrNot<void>
+>
 
 // hook that generates client files
 export type ClientFilesHook = Hook<
@@ -49,6 +51,7 @@ export type ExtendsPageDataHook = Hook<
 export interface Hooks {
   onInitialized: LifeCycleHook
   onPrepared: LifeCycleHook
+  onWatched: LifeCycleHook<[restart: () => Promise<void>]>
   onGenerated: LifeCycleHook
   extendsMarkdown: ExtendsMarkdownHook
   extendsPageData: ExtendsPageDataHook