@qualcomm-ui/mdx-vite 3.2.2 → 3.3.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import {createRequire} from "node:module";const require=createRequire(import.meta.url);
 
 // src/angular-demo-plugin/angular-demo-plugin.ts
-import chalk4 from "chalk";
+import chalk5 from "chalk";
 import { watch } from "chokidar";
 import { glob as glob2 } from "glob";
 import { existsSync, statSync } from "node:fs";
@@ -126,7 +126,8 @@ var configSchema = implement().with({
   routingStrategy: z2.union([z2.literal("vite-generouted"), z2.any()]).optional(),
   throwOnError: z2.boolean().optional(),
   typeDocProps: z2.string().optional(),
-  typeDocPropsOptions: typeDocPropsSchema.optional()
+  typeDocPropsOptions: typeDocPropsSchema.optional(),
+  validatePageLinks: z2.boolean().optional()
 });
 
 // src/docs-plugin/config/config-loader.ts
@@ -157,7 +158,8 @@ var ConfigLoader = class {
       ...conf,
       appDirectory: conf.appDirectory || "app",
       filePath: config.filepath,
-      pageDirectory: conf.pageDirectory ? removeTrailingSlash(conf.pageDirectory) : "routes"
+      pageDirectory: conf.pageDirectory ? removeTrailingSlash(conf.pageDirectory) : "routes",
+      validatePageLinks: conf.validatePageLinks ?? true
     };
   }
   loadConfig() {
@@ -171,7 +173,7 @@ import { join as join7 } from "node:path";
 import { dedent } from "@qualcomm-ui/utils/dedent";
 
 // src/docs-plugin/plugin-state.ts
-import chalk3 from "chalk";
+import chalk4 from "chalk";
 import chokidar from "chokidar";
 import { glob } from "glob";
 import { readFileSync as readFileSync2 } from "node:fs";
@@ -2965,7 +2967,7 @@ ${pageEntry.content}`;
 };
 
 // src/docs-plugin/search-indexer.ts
-import chalk2 from "chalk";
+import chalk3 from "chalk";
 import { defined as defined2 } from "@qualcomm-ui/utils/guard";
 
 // src/docs-plugin/doc-props/doc-props-indexer.ts
@@ -3161,6 +3163,93 @@ var DocPropsIndexer = class {
   }
 };
 
+// src/docs-plugin/link-validator.ts
+import chalk2 from "chalk";
+import { posix } from "node:path";
+import { visit as visit18 } from "unist-util-visit";
+var externalPrefixes = ["https://", "http://", "mailto:", "tel:"];
+function isExternal(url) {
+  return externalPrefixes.some((prefix) => url.startsWith(prefix));
+}
+function resolveLink(url, sourcePathname) {
+  if (isExternal(url)) {
+    return null;
+  }
+  const [rawPath, fragment] = url.split("#", 2);
+  let pathname;
+  if (!rawPath || rawPath === "./" || rawPath === ".") {
+    pathname = sourcePathname;
+  } else if (rawPath.startsWith("/")) {
+    pathname = rawPath;
+  } else {
+    const sourceDir = sourcePathname.endsWith("/") ? sourcePathname : posix.dirname(sourcePathname);
+    pathname = posix.resolve(sourceDir, rawPath);
+  }
+  if (pathname !== "/" && pathname.endsWith("/")) {
+    pathname = pathname.slice(0, -1);
+  }
+  return { fragment: fragment || void 0, pathname };
+}
+function collectLinks(tree, sourceFile, sourcePathname) {
+  const links = [];
+  visit18(tree, "link", (node) => {
+    const resolved = resolveLink(node.url, sourcePathname);
+    if (!resolved) {
+      return;
+    }
+    links.push({
+      fragment: resolved.fragment,
+      sourceFile,
+      sourcePathname,
+      targetPathname: resolved.pathname,
+      url: node.url
+    });
+  });
+  return links;
+}
+function validateLinks(links, pageMap, docPropIds) {
+  const invalid = [];
+  for (const link of links) {
+    const page = pageMap[link.targetPathname];
+    if (!page) {
+      invalid.push({ ...link, reason: "page-not-found" });
+      continue;
+    }
+    if (link.fragment) {
+      const inToc = page.toc?.some((h) => h.id === link.fragment);
+      const inDocProps = docPropIds?.[link.targetPathname]?.has(link.fragment);
+      if (!inToc && !inDocProps) {
+        invalid.push({ ...link, reason: "fragment-not-found" });
+      }
+    }
+  }
+  return invalid;
+}
+function reportInvalidLinks(invalidLinks) {
+  if (invalidLinks.length === 0) {
+    return;
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  for (const link of invalidLinks) {
+    const existing = grouped.get(link.sourcePathname) ?? [];
+    existing.push(link);
+    grouped.set(link.sourcePathname, existing);
+  }
+  console.debug(
+    `
+${chalk2.yellowBright.bold(`Found ${invalidLinks.length} broken link${invalidLinks.length === 1 ? "" : "s"}:`)}`
+  );
+  for (const [sourcePathname, links] of grouped) {
+    console.debug(`
+  ${chalk2.blueBright.bold(sourcePathname)}`);
+    for (const link of links) {
+      const reason = link.reason === "page-not-found" ? "page not found" : `fragment "#${link.fragment}" not found`;
+      console.debug(`    ${chalk2.red("x")} ${link.url} \u2014 ${reason}`);
+    }
+  }
+  console.debug("");
+}
+
 // src/docs-plugin/search-indexer.ts
 var SearchIndexer = class {
   docPropsIndexer;
@@ -3169,6 +3258,8 @@ var SearchIndexer = class {
   mdxFileReader;
   allowedHeadings;
   metaJson;
+  _collectedLinks = [];
+  _docPropIds = {};
   routeMetaNav = {};
   config;
   logWarnings;
@@ -3196,6 +3287,8 @@ var SearchIndexer = class {
   _searchIndex = [];
   reset() {
     this.mdxFileReader.reset();
+    this._collectedLinks = [];
+    this._docPropIds = {};
     this._pageMap = {};
     this._searchIndex = [];
   }
@@ -3306,6 +3399,11 @@ var SearchIndexer = class {
           removeMermaidCodeBlocks: true
         });
         const tree = processor.runSync(processor.parse(fileContents));
+        if (this.config.validatePageLinks) {
+          this._collectedLinks.push(
+            ...collectLinks(tree, filePath, defaultSection.pathname)
+          );
+        }
         const pageInfo = {
           frontmatter,
           id: defaultSection.id,
@@ -3318,9 +3416,9 @@ var SearchIndexer = class {
       }
     } catch (error) {
       console.debug(
-        `${chalk2.yellowBright.bold(
+        `${chalk3.yellowBright.bold(
           "Failed to parse mdx page content."
-        )} ${chalk2.blueBright.bold(filePath)}`
+        )} ${chalk3.blueBright.bold(filePath)}`
       );
       if (this.config.throwOnError) {
         throw new Error(error);
@@ -3349,6 +3447,17 @@ var SearchIndexer = class {
     }
     if (docPropSections.length) {
       this._pageDocProps[defaultSection.pathname] = docProps;
+      if (this.config.validatePageLinks) {
+        const ids = /* @__PURE__ */ new Set();
+        for (const section of docPropSections) {
+          if (section.heading?.id) {
+            ids.add(section.heading.id);
+          }
+        }
+        if (ids.size) {
+          this._docPropIds[defaultSection.pathname] = ids;
+        }
+      }
     }
     if (!cached) {
       this.mdxFileReader.updateCache(filePath, fileContents, {
@@ -3445,6 +3554,14 @@ var SearchIndexer = class {
     ).map((file) => this.compileTsxFile(file));
     this._searchIndex.push(...mdxIndex.filter((entry) => !entry.hideFromSearch));
     this.navBuilder.build();
+    if (this.config.validatePageLinks) {
+      const invalidLinks = validateLinks(
+        this._collectedLinks,
+        this._pageMap,
+        this._docPropIds
+      );
+      reportInvalidLinks(invalidLinks);
+    }
     return compiledFiles;
   }
 };
@@ -3546,7 +3663,7 @@ var PluginState = class {
     const compiledMdxFiles = this.indexer.buildIndex(files, shouldLog);
     if (isDev && shouldLog) {
       console.debug(
-        `${chalk3.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Compiled search index in: ${chalk3.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}${this.indexer.cachedFileCount ? chalk3.greenBright.bold(` (${this.indexer.cachedFileCount}/${this.indexer.mdxFileCount} files cached)`) : ""}`
+        `${chalk4.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Compiled search index in: ${chalk4.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}${this.indexer.cachedFileCount ? chalk4.greenBright.bold(` (${this.indexer.cachedFileCount}/${this.indexer.mdxFileCount} files cached)`) : ""}`
       );
     }
     return compiledMdxFiles;
@@ -3639,11 +3756,11 @@ var PluginState = class {
       "utf-8"
     );
     this.exports.pathnames = result.pages.pages.map((p) => p.pathname);
-    const cacheInfo = result.cachedPageCount > 0 ? chalk3.greenBright.bold(
+    const cacheInfo = result.cachedPageCount > 0 ? chalk4.greenBright.bold(
       ` (${result.cachedPageCount}/${result.totalPageCount} pages cached)`
     ) : "";
     console.debug(
-      `${chalk3.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Generated knowledge exports in: ${chalk3.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}${cacheInfo}`
+      `${chalk4.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Generated knowledge exports in: ${chalk4.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}${cacheInfo}`
     );
   }
   debouncedGenerateKnowledge(publicDir, opts = {}) {
@@ -3850,7 +3967,7 @@ import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 // src/docs-plugin/rehype/rehype-slug.ts
 import { headingRank } from "hast-util-heading-rank";
 import { toString as toString3 } from "hast-util-to-string";
-import { visit as visit18 } from "unist-util-visit";
+import { visit as visit19 } from "unist-util-visit";
 var emptyOptions2 = {};
 var rehypeSlug = (options) => {
   const settings = options || emptyOptions2;
@@ -3861,7 +3978,7 @@ var rehypeSlug = (options) => {
   const slugGenerator = new SlugGenerator();
   return (tree) => {
     slugGenerator.reset();
-    visit18(tree, "element", function(node) {
+    visit19(tree, "element", function(node) {
       if (headingRank(node) && !node.properties.id && allowedHeadings.has(node.tagName)) {
         node.properties.id = prefix + slugGenerator.createSlug(toString3(node));
       }
@@ -4230,7 +4347,7 @@ import { readFile as readFile4 } from "node:fs/promises";
 import postcss from "postcss";
 import selectorParser from "postcss-selector-parser";
 import { compile } from "tailwindcss";
-import { visit as visit19 } from "unist-util-visit";
+import { visit as visit20 } from "unist-util-visit";
 import { camelCase } from "@qualcomm-ui/utils/change-case";
 async function loadStylesheetContent(id) {
   const resolveId = id === "tailwindcss" ? "tailwindcss/index.css" : id;
@@ -4676,15 +4793,15 @@ function angularDemoPlugin({
             langs: ["angular-ts", "angular-html", "css"],
             themes: [theme.dark, theme.light]
           });
-          logDev(`${chalk4.blue.bold(LOG_PREFIX)} Shiki highlighter initialized`);
+          logDev(`${chalk5.blue.bold(LOG_PREFIX)} Shiki highlighter initialized`);
         } catch (error) {
           console.warn(
-            `${chalk4.blue.bold(LOG_PREFIX)} Failed to initialize highlighter:`,
+            `${chalk5.blue.bold(LOG_PREFIX)} Failed to initialize highlighter:`,
             error
           );
         }
       }
-      logDev(`${chalk4.blue.bold(LOG_PREFIX)} Initializing Angular demo scanner`);
+      logDev(`${chalk5.blue.bold(LOG_PREFIX)} Initializing Angular demo scanner`);
       await collectAngularDemos();
       if (process.env.NODE_ENV === "development") {
         if (!hasWatcherInitialized) {
@@ -4692,7 +4809,7 @@ function angularDemoPlugin({
           setupAngularWatcher();
         } else {
           logDev(
-            `${chalk4.blue.bold(LOG_PREFIX)} Watcher already initialized by another instance`
+            `${chalk5.blue.bold(LOG_PREFIX)} Watcher already initialized by another instance`
           );
         }
       }
@@ -4749,7 +4866,7 @@ function angularDemoPlugin({
         return [];
       }
       logDev(
-        `${chalk4.blue.bold(LOG_PREFIX)} Processing Angular demo change: ${chalk4.cyan(file)}`
+        `${chalk5.blue.bold(LOG_PREFIX)} Processing Angular demo change: ${chalk5.cyan(file)}`
       );
       const code = await readFile5(file, "utf-8");
       const demoInfo = await parseAngularDemo(file, code);
@@ -4803,14 +4920,14 @@ function angularDemoPlugin({
     },
     writeBundle() {
       console.log(
-        `${chalk4.blue.bold(LOG_PREFIX)} Successfully integrated ${chalk4.green(demoRegistry.size)} component demos`
+        `${chalk5.blue.bold(LOG_PREFIX)} Successfully integrated ${chalk5.green(demoRegistry.size)} component demos`
       );
     }
   };
   async function collectAngularDemos() {
     if (demoRegistry.size) {
       logDev(
-        `${chalk4.magenta.bold(LOG_PREFIX)} Using cached ${chalk4.cyanBright.bold(demoRegistry.size)} demos`
+        `${chalk5.magenta.bold(LOG_PREFIX)} Using cached ${chalk5.cyanBright.bold(demoRegistry.size)} demos`
       );
       return;
     }
@@ -4829,7 +4946,7 @@ function angularDemoPlugin({
     for (const [demoId, demo] of demoRegistry.entries()) {
       if (demo.sourceCode.find((entry) => entry.filePath === file)) {
         logDev(
-          `${chalk4.blue.bold(LOG_PREFIX)} Reloading demo ${chalk4.cyan(demoId)} due to imported file change: ${chalk4.yellow(file)}`
+          `${chalk5.blue.bold(LOG_PREFIX)} Reloading demo ${chalk5.cyan(demoId)} due to imported file change: ${chalk5.yellow(file)}`
         );
         const code = await readFile5(demo.filePath, "utf-8");
         const updatedDemo = await parseAngularDemo(demo.filePath, code);
@@ -4897,7 +5014,7 @@ function angularDemoPlugin({
       };
     } catch (error) {
       console.warn(
-        `${chalk4.blue.bold(LOG_PREFIX)} Failed to highlight code with ${language} language:`,
+        `${chalk5.blue.bold(LOG_PREFIX)} Failed to highlight code with ${language} language:`,
         error
       );
       return { full: code };
@@ -4905,7 +5022,7 @@ function angularDemoPlugin({
   }
   async function extractRelativeImports2(filePath) {
     try {
-      let visit21 = function(node) {
+      let visit22 = function(node) {
         if (ts2.isImportDeclaration(node)) {
           const moduleSpecifier = node.moduleSpecifier;
           if (ts2.isStringLiteral(moduleSpecifier)) {
@@ -4924,9 +5041,9 @@ function angularDemoPlugin({
             }
           }
         }
-        ts2.forEachChild(node, visit21);
+        ts2.forEachChild(node, visit22);
       };
-      var visit20 = visit21;
+      var visit21 = visit22;
       const content = await readFile5(filePath, "utf-8");
       const sourceFile = ts2.createSourceFile(
         filePath,
@@ -4936,11 +5053,11 @@ function angularDemoPlugin({
         ts2.ScriptKind.TS
       );
       const relativeImports = [];
-      visit21(sourceFile);
+      visit22(sourceFile);
       return relativeImports;
     } catch (error) {
       logDev(
-        `${chalk4.blue.bold(LOG_PREFIX)} ${chalk4.yellowBright("Failed to extract imports from")} ${chalk4.cyan(filePath)}:`,
+        `${chalk5.blue.bold(LOG_PREFIX)} ${chalk5.yellowBright("Failed to extract imports from")} ${chalk5.cyan(filePath)}:`,
         error
       );
       return [];
@@ -4959,16 +5076,16 @@ function angularDemoPlugin({
   }
   function stripImports(code, fileName) {
     try {
-      let visit21 = function(node) {
+      let visit22 = function(node) {
         if (ts2.isImportDeclaration(node)) {
           importRanges.push({
             end: node.getEnd(),
             start: node.getFullStart()
           });
         }
-        ts2.forEachChild(node, visit21);
+        ts2.forEachChild(node, visit22);
       };
-      var visit20 = visit21;
+      var visit21 = visit22;
       const sourceFile = ts2.createSourceFile(
         fileName,
         code,
@@ -4977,7 +5094,7 @@ function angularDemoPlugin({
         ts2.ScriptKind.TS
       );
       const importRanges = [];
-      visit21(sourceFile);
+      visit22(sourceFile);
       return importRanges.map((range) => {
         let endPos = range.end;
         if (code[endPos] === "\n") {
@@ -4987,7 +5104,7 @@ function angularDemoPlugin({
       });
     } catch (error) {
       logDev(
-        `${chalk4.blue.bold(LOG_PREFIX)} ${chalk4.redBright("Failed to strip imports from")} ${chalk4.cyan(fileName)}:`,
+        `${chalk5.blue.bold(LOG_PREFIX)} ${chalk5.redBright("Failed to strip imports from")} ${chalk5.cyan(fileName)}:`,
         error
       );
       return [];
@@ -5069,7 +5186,7 @@ function angularDemoPlugin({
       };
     } catch (error) {
       console.error(
-        `${chalk4.blue.bold(LOG_PREFIX)} Failed to parse Angular demo ${filePath}:`,
+        `${chalk5.blue.bold(LOG_PREFIX)} Failed to parse Angular demo ${filePath}:`,
         error
       );
       return null;
@@ -5089,7 +5206,7 @@ function angularDemoPlugin({
     let templateUrl = null;
     let hasDefaultExport = false;
     const importsFromAst = [];
-    function visit20(node) {
+    function visit21(node) {
       if (ts2.isImportDeclaration(node)) {
         importsFromAst.push(node.getFullText(sourceFile).trim());
       }
@@ -5137,9 +5254,9 @@ function angularDemoPlugin({
       if (ts2.isExportAssignment(node) && !node.isExportEquals) {
         hasDefaultExport = true;
       }
-      ts2.forEachChild(node, visit20);
+      ts2.forEachChild(node, visit21);
     }
-    visit20(sourceFile);
+    visit21(sourceFile);
     return {
       componentClass,
       hasDefaultExport,
@@ -5197,7 +5314,7 @@ function angularDemoPlugin({
       });
     } catch (error) {
       console.log(
-        `${chalk4.blue.bold(LOG_PREFIX)} ${chalk4.redBright("Failed to read template file:")} ${chalk4.cyan(templatePath)}`,
+        `${chalk5.blue.bold(LOG_PREFIX)} ${chalk5.redBright("Failed to read template file:")} ${chalk5.cyan(templatePath)}`,
         error
       );
       return null;
@@ -5218,7 +5335,7 @@ function angularDemoPlugin({
         entries.push(entry);
       } catch (error) {
         logDev(
-          `${chalk4.blue.bold(LOG_PREFIX)} ${chalk4.yellowBright("Failed to process relative import:")} ${chalk4.cyan(resolvedPath)}`
+          `${chalk5.blue.bold(LOG_PREFIX)} ${chalk5.yellowBright("Failed to process relative import:")} ${chalk5.cyan(resolvedPath)}`
         );
       }
     }
@@ -5377,7 +5494,7 @@ export function getAngularDemoInfo(demoId) {
     });
     watcher.on("ready", () => {
       logDev(
-        `${chalk4.blue.bold(LOG_PREFIX)} Registered ${chalk4.green(demoRegistry.size)} demo files. Watching for file changes...`
+        `${chalk5.blue.bold(LOG_PREFIX)} Registered ${chalk5.green(demoRegistry.size)} demo files. Watching for file changes...`
       );
     });
     watcher.on("add", (filePath) => {
@@ -5389,7 +5506,7 @@ export function getAngularDemoInfo(demoId) {
         }
         if (isAngularDemoFile(filePath)) {
           logDev(
-            `${chalk4.blue.bold(LOG_PREFIX)} New Angular demo: ${chalk4.green(filePath)}`
+            `${chalk5.blue.bold(LOG_PREFIX)} New Angular demo: ${chalk5.green(filePath)}`
           );
           void handleAngularDemoUpdate(filePath).then(() => {
             triggerRegistryUpdate();
@@ -5408,7 +5525,7 @@ export function getAngularDemoInfo(demoId) {
           const [demoId] = demoEntry;
           demoRegistry.delete(demoId);
           logDev(
-            `${chalk4.blue.bold(LOG_PREFIX)} Removed demo: ${chalk4.red(demoId)}`
+            `${chalk5.blue.bold(LOG_PREFIX)} Removed demo: ${chalk5.red(demoId)}`
           );
           triggerRegistryUpdate();
         }
@@ -5557,7 +5674,7 @@ var NODE_BUILTINS = [
 ];
 
 // src/react-demo-plugin/demo-plugin-utils.ts
-import chalk5 from "chalk";
+import chalk6 from "chalk";
 import { existsSync as existsSync2, readFileSync as readFileSync3 } from "node:fs";
 import { readFile as readFile6 } from "node:fs/promises";
 import { dirname as dirname4, join as join9, relative as relative3, resolve as resolve6, sep } from "node:path";
@@ -5580,7 +5697,7 @@ async function extractFileImports(filePath) {
     return extractImports(content, filePath);
   } catch (error) {
     console.log(
-      `${chalk5.magenta.bold(LOG_PREFIX2)} ${chalk5.yellowBright("Failed to parse")} ${chalk5.blueBright.bold(filePath)}:`,
+      `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.yellowBright("Failed to parse")} ${chalk6.blueBright.bold(filePath)}:`,
       error
     );
     return null;
@@ -5596,7 +5713,7 @@ function extractImports(code, fileName) {
   );
   const thirdPartyImports = [];
   const relativeImports = [];
-  function visit20(node) {
+  function visit21(node) {
     if (ts3.isImportDeclaration(node)) {
       const importSpec = parseImportDeclaration(node, fileName);
       if (importSpec) {
@@ -5607,9 +5724,9 @@ function extractImports(code, fileName) {
         }
       }
     }
-    ts3.forEachChild(node, visit20);
+    ts3.forEachChild(node, visit21);
   }
-  visit20(sourceFile);
+  visit21(sourceFile);
   return { relativeImports, thirdPartyImports };
 }
 function getScriptKind(fileName) {
@@ -5854,7 +5971,7 @@ function isDemoFile(filePath) {
 }
 
 // src/react-demo-plugin/react-demo-plugin.ts
-import chalk6 from "chalk";
+import chalk7 from "chalk";
 import { glob as glob3 } from "glob";
 import { readFile as readFile7 } from "node:fs/promises";
 import { basename as basename3, resolve as resolve7 } from "node:path";
@@ -5901,11 +6018,11 @@ function reactDemoPlugin({
             themes: [theme.dark, theme.light]
           });
           console.log(
-            `${chalk6.magenta.bold(LOG_PREFIX2)} Shiki highlighter initialized`
+            `${chalk7.magenta.bold(LOG_PREFIX2)} Shiki highlighter initialized`
           );
         } catch (error) {
           console.warn(
-            `${chalk6.magenta.bold(LOG_PREFIX2)} Failed to initialize highlighter:`,
+            `${chalk7.magenta.bold(LOG_PREFIX2)} Failed to initialize highlighter:`,
             error
           );
         } finally {
@@ -5921,8 +6038,10 @@ function reactDemoPlugin({
       if (file.endsWith(".mdx")) {
         return [];
       }
+      const updatedDemoNames = [];
       if (isDemoFile(file)) {
         await handleDemoAdditionOrUpdate({ filePath: file });
+        updatedDemoNames.push(createDemoName(file));
       } else {
         const normalizedFile = resolve7(file);
         const dependentDemos = relativeImportDependents.get(normalizedFile);
@@ -5935,6 +6054,7 @@ function reactDemoPlugin({
             await handleDemoAdditionOrUpdate({
               filePath: demo.filePath
             });
+            updatedDemoNames.push(demoName);
           }
         }
       }
@@ -5943,7 +6063,16 @@ function reactDemoPlugin({
       );
       if (autoModule) {
         server.moduleGraph.invalidateModule(autoModule);
-        await server.reloadModule(autoModule);
+      }
+      for (const demoName of updatedDemoNames) {
+        const demo = demoRegistry2.get(demoName);
+        if (demo) {
+          server.ws.send({
+            data: demo,
+            event: "qui-demo:update",
+            type: "custom"
+          });
+        }
       }
       return [];
     },
@@ -5960,7 +6089,7 @@ function reactDemoPlugin({
     },
     writeBundle() {
       console.log(
-        `${chalk6.blue.bold(LOG_PREFIX2)} Successfully integrated ${chalk6.green(demoRegistry2.size)} component demos`
+        `${chalk7.blue.bold(LOG_PREFIX2)} Successfully integrated ${chalk7.green(demoRegistry2.size)} component demos`
       );
     }
   };
@@ -6048,7 +6177,7 @@ function reactDemoPlugin({
       };
     } catch (error) {
       console.warn(
-        `${chalk6.magenta.bold(LOG_PREFIX2)} Failed to highlight code:`,
+        `${chalk7.magenta.bold(LOG_PREFIX2)} Failed to highlight code:`,
         error
       );
       return { full: code };
@@ -6085,11 +6214,24 @@ function reactDemoPlugin({
   }
   function generateAutoScopeModule() {
     const registryCode = generateDemoRegistry(demoRegistry2);
-    return [
-      "// Auto-generated demo scope resolver (PROD MODE)",
+    const parts = [
+      "// Auto-generated demo scope resolver",
       registryCode,
       generateExportedFunctions()
-    ].join("\n\n");
+    ];
+    if (process.env.NODE_ENV === "development") {
+      parts.push(generateHmrHandler());
+    }
+    return parts.join("\n\n");
+  }
+  function generateHmrHandler() {
+    return dedent4`
+    if (import.meta.hot) {
+      import.meta.hot.on("qui-demo:update", (data) => {
+        demoRegistry.set(data.demoName, data)
+      })
+    }
+  `;
   }
   function transformLines(code) {
     if (!transformLine) {
@@ -6206,16 +6348,16 @@ function reactDemoPlugin({
   }
   function stripImports(code, fileName) {
     try {
-      let visit21 = function(node) {
+      let visit22 = function(node) {
         if (ts4.isImportDeclaration(node)) {
           importRanges.push({
             end: node.getEnd(),
             start: node.getFullStart()
           });
         }
-        ts4.forEachChild(node, visit21);
+        ts4.forEachChild(node, visit22);
       };
-      var visit20 = visit21;
+      var visit21 = visit22;
       const sourceFile = ts4.createSourceFile(
         fileName,
         code,
@@ -6224,7 +6366,7 @@ function reactDemoPlugin({
         getScriptKind(fileName)
       );
       const importRanges = [];
-      visit21(sourceFile);
+      visit22(sourceFile);
       return importRanges.map((range) => {
         let endPos = range.end;
         if (code[endPos] === "\n") {