feat(vite-material-symbols-plugin): track new icons

Author: mlaursen

.changeset/quick-bees-wash.md

@@ -0,0 +1,5 @@
+---
+"@react-md/vite-material-symbols-plugin": minor
+---
+
+Automatically add any new icons while running the dev server by reloading the page. This used to require a full dev server restart to track new icons.

packages/vite-material-symbols-plugin/package.json

@@ -45,6 +45,9 @@
   ],
   "license": "MIT",
   "packageManager": "pnpm@10.28.0",
+  "dependencies": {
+    "minimatch": "^10.2.4"
+  },
   "devDependencies": {
     "@react-md/core": "workspace:*",
     "@react-md/eslint-config": "workspace:*",

packages/vite-material-symbols-plugin/src/index.ts

@@ -1,6 +1,7 @@
 import { getMaterialSymbolsUrl } from "@react-md/core/icon/getMaterialSymbolsUrl";
 import { type MaterialSymbolName } from "@react-md/core/icon/material";
 import { DEFAULT_MATERIAL_SYMBOL_NAMES } from "@react-md/core/icon/symbols";
+import { minimatch } from "minimatch";
 import { glob, readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { type HtmlTagDescriptor, type Plugin } from "vite";
@@ -45,6 +46,33 @@ export function materialSymbolsPlugin(
       }
     },
 
+    configureServer: (server) => {
+      const { root } = server.config;
+      const sliceFrom = root.length + 1;
+      const handler = async (file: string): Promise<void> => {
+        const relativeFile = file.slice(sliceFrom);
+        if (!minimatch(relativeFile, pattern)) {
+          return;
+        }
+
+        const fileSymbolNames = new Set<MaterialSymbolName>();
+        const contents = await readFile(file, "utf8");
+        addMaterialSymbolNames(contents, fileSymbolNames);
+        const additions = fileSymbolNames.difference(symbolNames);
+        if (additions.size === 0) {
+          return;
+        }
+
+        for (const name of fileSymbolNames) {
+          symbolNames.add(name);
+        }
+        server.ws.send({ type: "full-reload" });
+      };
+
+      server.watcher.on("add", handler);
+      server.watcher.on("change", handler);
+    },
+
     transformIndexHtml() {
       if (symbolNames.size === 0) {
         return [];