feat: add hmr option, enable hmr in buildStart hook

src/core/index.ts

@@ -2,6 +2,7 @@
 import cors from 'cors'
 import genEtag from 'etag'
 import { createUnplugin } from 'unplugin'
+import type { ViteDevServer } from 'vite'
 import type { Options, SvgSpriteInfo } from '../types'
 import { genCode, genDts } from './generator'
 import { MODULE_NAME, PLUGIN_NAME } from './constants'
@@ -12,18 +13,25 @@ import watchIconDir from './watcher'
 let isBuild = false
 let isWebpack = false
 let isDynamicStrategy = false
+
 let spriteInfo: SvgSpriteInfo
 let transformPluginContext: any
+let viteDevServer: ViteDevServer
 
 const unplugin = createUnplugin<Options>(options => ({
   name: PLUGIN_NAME,
   async buildStart() {
     options = resolveOptions(options)
     spriteInfo = await createSvgSprite(options, isBuild)
     isDynamicStrategy = options.domInsertionStrategy === 'dynamic'
-    // only generate dts in serve
-    if (options?.dts && !isBuild)
+
+    // dts generator
+    if (options?.dts)
       genDts(spriteInfo.symbolIds, options)
+
+    // svg hmr
+    if (!isBuild && viteDevServer && options.hmr)
+      watchIconDir(options, viteDevServer, spriteInfo)
   },
   resolveId(id: string) {
     if (id === MODULE_NAME)
@@ -67,15 +75,15 @@ const unplugin = createUnplugin<Options>(options => ({
       transformPluginContext = this
     },
     configureServer(server) {
+      viteDevServer = server
       server.middlewares.use(cors({ origin: '*' }))
       server.middlewares.use(async (req, res, next) => {
         // close #22
         const { pathname } = req.url
           ? new URL(req.url, 'https://example.com')
           : { pathname: '' }
         if (pathname.endsWith(`/@id/${MODULE_NAME}`)) {
-          watchIconDir(options, server, spriteInfo)
-
+          spriteInfo = await createSvgSprite(options, isBuild)
           const code = await genCode(options, spriteInfo, true)
           const etag = genEtag(code, { weak: true })
           const noneMatch = req.headers['if-none-match'] || req.headers['If-None-Match']

src/core/utils.ts

@@ -30,6 +30,7 @@ export function replace(dts: string, symbolIds: Set<string>, componentName: stri
 
 export function resolveOptions(options: Options): Options {
   const defaultOptions: Partial<Options> = {
+    hmr: true,
     componentName: 'SvgIcon',
     dtsDir: process.cwd(),
     projectType: 'auto',

src/core/watcher.ts

@@ -30,14 +30,6 @@ export default function watchIconDir(
   }
   isWatched = true
 
-  function notifyClientUpdate(sprite: string, { ws, config }: ViteDevServer) {
-    config.logger.info(
-      colors.green(`unplugin-svg-component reload`),
-      { clear: false, timestamp: true },
-    )
-    ws.send(LOAD_EVENT, { sprite })
-  }
-
   function isSvgFile(path: string) {
     const isSvgDir = iconDirs.some(dir => path.startsWith(dir + sep))
     return isSvgDir && path.endsWith('.svg')
@@ -57,3 +49,11 @@ export default function watchIconDir(
     notifyClientUpdate(svgSpriteInfo.sprite, server)
   }
 }
+
+function notifyClientUpdate(sprite: string, { ws, config }: ViteDevServer) {
+  config.logger.info(
+    colors.green(`unplugin-svg-component reload`),
+    { clear: false, timestamp: true },
+  )
+  ws.send(LOAD_EVENT, { sprite })
+}

src/types.ts

@@ -3,6 +3,7 @@ import type { Config as OptimizeOptions } from 'svgo'
 export interface Options {
   iconDir: string | string[]
   prefix?: string
+  hmr?: boolean
   dts?: boolean
   dtsDir?: string
   svgSpriteDomId?: string