@qualcomm-ui/mdx-vite 1.1.0 → 2.1.0

package/dist/index.js

@@ -1486,12 +1486,15 @@ var MarkdownFileReader = class {
   reset() {
     this.cachedFileCount = 0;
   }
-  checkCache(filepath, fileContents) {
+  readCache(filePath) {
+    return this.mdxCache[filePath] || null;
+  }
+  checkCache(filePath, fileContents) {
     if (!this.enabled) {
       return;
     }
     const fileMd5 = this.hash(fileContents);
-    const cached = this.mdxCache[filepath];
+    const cached = this.mdxCache[filePath];
     if (cached?.md5 !== fileMd5) {
       return;
     }
@@ -2012,9 +2015,9 @@ function getRouteMeta(pathSegments, metaJson) {
 }
 
 // src/docs-plugin/internal/services/nav-builder/nav-builder.ts
-import { capitalCase } from "change-case";
 import { sortBy } from "lodash-es";
 import { v4 as uuidv4 } from "uuid";
+import { capitalCase } from "@qualcomm-ui/utils/change-case";
 var NavBuilder = class {
   initialRoutes = [];
   flatNavItems = [];
@@ -2299,8 +2302,8 @@ var NavBuilder = class {
 };
 
 // src/docs-plugin/internal/services/nav-builder/page-map.ts
-import { capitalCase as capitalCase2 } from "change-case";
 import { join as join2 } from "node:path";
+import { capitalCase as capitalCase2 } from "@qualcomm-ui/utils/change-case";
 function getPathnameFromPathSegments(segments) {
   return `/${segments.join("/")}`;
 }
@@ -2570,11 +2573,25 @@ var SearchIndexer = class {
    * Parses an MDX file to extract the site data for the nav items, doc props,
    * breadcrumbs, and search index.
    */
-  compileMdxFile(filepath) {
-    const { cached, fileContents, frontmatter } = this.fileCache.readFile(filepath);
+  compileMdxFile(filePath) {
+    const { cached, fileContents, frontmatter } = this.fileCache.readFile(filePath);
+    const metadata = {
+      changed: {},
+      filePath
+    };
+    if (!cached) {
+      const previousData = this.fileCache.readCache(filePath);
+      if (previousData) {
+        const cachedFm = JSON.stringify(previousData.frontmatter);
+        const currentFm = JSON.stringify(frontmatter);
+        if (cachedFm !== currentFm) {
+          metadata.changed.frontmatter = true;
+        }
+      }
+    }
     this.docPropsIndexer.reset();
     this.markdownIndexer.reset();
-    const defaultSection = this.getPageEntry(filepath, frontmatter);
+    const defaultSection = this.getPageEntry(filePath, frontmatter);
     if (!defaultSection.categories.length && defaultSection.title) {
       defaultSection.categories = [defaultSection.title];
     }
@@ -2589,9 +2606,9 @@ var SearchIndexer = class {
       console.debug(
         `${chalk3.yellowBright.bold(
           "Failed to parse mdx page content."
-        )} ${chalk3.blueBright.bold(filepath)}`
+        )} ${chalk3.blueBright.bold(filePath)}`
       );
-      return [defaultSection];
+      return { metadata, pageSections: [defaultSection] };
     }
     const { sections, toc } = indexedPage;
     if (toc.length) {
@@ -2606,17 +2623,17 @@ var SearchIndexer = class {
     if (docPropSections.length) {
       this._pageDocProps[defaultSection.pathname] = docProps;
     }
-    this.fileCache.updateCache(filepath, fileContents, {
+    this.fileCache.updateCache(filePath, fileContents, {
       frontmatter,
       page: indexedPage,
       pageDocProps: docProps,
       pageDocPropSections: docPropSections
     });
     if (frontmatter.hideFromSearch) {
-      return [defaultSection];
+      return { metadata, pageSections: [defaultSection] };
     }
     if (!sections.length && !docPropSections.length) {
-      return [defaultSection];
+      return { metadata, pageSections: [defaultSection] };
     }
     const sectionReturn = [
       ...this.formatSections(sections, defaultSection, false)
@@ -2626,7 +2643,7 @@ var SearchIndexer = class {
         ...this.formatSections(docPropSections, defaultSection, true)
       );
     }
-    return sectionReturn;
+    return { metadata, pageSections: sectionReturn };
   }
   formatSections(sections, { toc: _toc, ...defaultSection }, isDocProp) {
     return sections.map((section, index) => {
@@ -2671,7 +2688,8 @@ var SearchIndexer = class {
       this.config.routingStrategy
     );
     this._mdxFileCount = mdxFileGlob.length;
-    const mdxIndex = mdxFileGlob.map((file) => this.compileMdxFile(file)).flat();
+    const compiledFiles = mdxFileGlob.map((file) => this.compileMdxFile(file));
+    const mdxIndex = compiledFiles.map((fileData) => fileData.pageSections).flat();
     filterFileGlob(
       fileGlob,
       "tsx",
@@ -2680,11 +2698,13 @@ var SearchIndexer = class {
     ).map((file) => this.compileTsxFile(file));
     this._searchIndex.push(...mdxIndex.filter((entry) => !entry.hideFromSearch));
     this.navBuilder.build();
+    return compiledFiles;
   }
 };
 
 // src/docs-plugin/docs-plugin.ts
 var isDev = process.env.NODE_ENV === "development";
+var VIRTUAL_MODULE_ID2 = "\0@qualcomm-ui/mdx-vite-plugin";
 var PluginState = class {
   buildCount = 0;
   configFilePath = "";
@@ -2695,12 +2715,7 @@ var PluginState = class {
   servers = [];
   timeout = void 0;
   watching = false;
-  resolvedVirtualModuleId;
-  virtualModuleId = "@qualcomm-ui/mdx-vite-plugin";
   cwd;
-  constructor() {
-    this.resolvedVirtualModuleId = `\0${this.virtualModuleId}`;
-  }
   init(cwd) {
     this.cwd = cwd;
   }
@@ -2713,6 +2728,14 @@ var PluginState = class {
       this.docPropsFilePath.lastIndexOf("/")
     );
   }
+  get siteData() {
+    return {
+      navItems: state.indexer.navItems,
+      pageDocProps: state.indexer.pageDocProps,
+      pageMap: state.indexer.pageMap,
+      searchIndex: state.indexer.searchIndex
+    };
+  }
   resolveDocProps() {
     if (!this.docPropsFilePath) {
       return {};
@@ -2745,38 +2768,37 @@ var PluginState = class {
       }
     );
     if (!files.length) {
-      return;
+      return [];
     }
     const startTime = Date.now();
-    this.indexer.buildIndex(files, shouldLog);
+    const compiledMdxFiles = this.indexer.buildIndex(files, shouldLog);
     if (isDev && shouldLog) {
       console.debug(
         `${chalk4.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Compiled search index in: ${chalk4.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}${state.indexer.cachedFileCount ? chalk4.greenBright.bold(` (${state.indexer.cachedFileCount}/${state.indexer.mdxFileCount} files cached)`) : ""}`
       );
     }
+    return compiledMdxFiles;
   }
   /**
-   * When the user edits MDX content or modifies the plugin config, we re-index the
-   * site. This function handles module invalidation so that virtual file imports
-   * are refreshed as expected by the consumer's dev server.
+   * When the user adds or removes mdx files, we re-index the site. This function
+   * handles module invalidation so that virtual file imports are refreshed as
+   * expected by the consumer's dev server.
    */
   sendUpdate() {
     for (const server of this.servers) {
-      const virtualModule = server.moduleGraph.getModuleById(
-        this.resolvedVirtualModuleId
-      );
+      const virtualModule = server.moduleGraph.getModuleById(VIRTUAL_MODULE_ID2);
       if (virtualModule) {
         server.moduleGraph.invalidateModule(virtualModule);
         server.reloadModule(virtualModule);
       }
     }
   }
-  handleChange(callback) {
+  handleChange(opts = {}) {
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {
       this.buildIndex(true);
       this.sendUpdate();
-      callback?.();
+      opts?.onComplete?.();
     }, 300);
   }
   initWatchers(configFile) {
@@ -2799,7 +2821,13 @@ var PluginState = class {
       const resolvedConfig = this.configLoader.loadConfig();
       this.configFilePath = resolvedConfig.filePath;
       this.createIndexer(resolvedConfig);
-      this.handleChange();
+      this.handleChange({
+        onComplete: () => {
+          this.servers.forEach(
+            (server) => server.ws.send({ type: "full-reload" })
+          );
+        }
+      });
     });
   }
 };
@@ -2810,6 +2838,9 @@ function quiDocsPlugin(opts) {
   const config = configLoader.loadConfig();
   state.createIndexer(config);
   return {
+    apply(config2, env) {
+      return env.mode === "development" && env.command === "serve" || env.mode === "production" && env.command === "build";
+    },
     buildStart: async () => {
       state.buildIndex(state.buildCount > 0);
       state.buildCount++;
@@ -2821,41 +2852,70 @@ function quiDocsPlugin(opts) {
       state.initWatchers(opts?.configFile);
       server.watcher.on("add", (path) => {
         if (path.endsWith(".mdx")) {
-          state.handleChange(() => {
-            server.ws.send({ type: "full-reload" });
+          state.handleChange({
+            onComplete: () => {
+              server.ws.send({ type: "full-reload" });
+            }
           });
         }
       });
       server.watcher.on("unlink", (path) => {
         if (path.endsWith(".mdx")) {
-          state.handleChange(() => {
-            server.ws.send({ type: "full-reload" });
+          state.handleChange({
+            onComplete: () => {
+              server.ws.send({ type: "full-reload" });
+            }
           });
         }
       });
       state.servers.push(server);
     },
-    handleHotUpdate: async ({ file: updateFile }) => {
+    handleHotUpdate: async ({ file: updateFile, server }) => {
       const file = fixPath(updateFile);
       if ((!config.hotUpdateIgnore || !config.hotUpdateIgnore.test(file)) && // ignore watched files. We watch for these separately.
       file !== state.configFilePath) {
         if (state.docPropsDirectory && file.startsWith(state.docPropsFilePath)) {
           return [];
         }
-        state.handleChange();
+        if (updateFile.endsWith(".mdx")) {
+          const mods = [];
+          const files = state.buildIndex(true);
+          const moduleByFile = server.moduleGraph.getModulesByFile(updateFile);
+          if (!moduleByFile?.size) {
+            console.debug("no module found for file, returning", updateFile);
+            return [];
+          }
+          const virtualModule = server.moduleGraph.getModuleById(VIRTUAL_MODULE_ID2);
+          if (virtualModule) {
+            server.moduleGraph.invalidateModule(virtualModule);
+            server.ws.send({
+              data: state.siteData,
+              event: "qui-docs-plugin:refresh-site-data",
+              type: "custom"
+            });
+          }
+          if (files.some((file2) => file2.metadata.changed.frontmatter)) {
+            console.debug(
+              "Frontmatter changed, reloading plugin to reflect changes in the page configuration"
+            );
+            server.ws.send({ type: "full-reload" });
+            return [];
+          }
+          return mods;
+        }
       }
       return [];
     },
     load: (id) => {
-      if (id === state.resolvedVirtualModuleId) {
-        return `export const siteData = ${JSON.stringify({ navItems: state.indexer.navItems, pageDocProps: state.indexer.pageDocProps, pageMap: state.indexer.pageMap, searchIndex: state.indexer.searchIndex })}`;
+      if (id === VIRTUAL_MODULE_ID2) {
+        return `export const siteData = ${JSON.stringify(state.siteData)}`;
       }
       return void 0;
     },
     name: "qui-mdx-vite-plugin",
     resolveId: (id) => {
-      if (id === state.virtualModuleId) {
-        return state.resolvedVirtualModuleId;
+      if (id === "@qualcomm-ui/mdx-vite-plugin") {
+        return VIRTUAL_MODULE_ID2;
       }
       return void 0;
     }
@@ -2864,6 +2924,16 @@ function quiDocsPlugin(opts) {
 
 // src/docs-plugin/mdx-plugins.ts
 import rehypeShiki from "@shikijs/rehype";
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+  transformerRemoveNotationEscape,
+  transformerRenderIndentGuides as transformerRenderIndentGuides2
+} from "@shikijs/transformers";
+import { merge } from "lodash-es";
 import { quiCustomDarkTheme as quiCustomDarkTheme2 } from "@qualcomm-ui/mdx-common";
 
 // src/exports.ts
@@ -3214,12 +3284,43 @@ var remarkSpoilers = (options = {}) => {
   };
 };
 
+// src/docs-plugin/shiki/utils.ts
+function removeCodeAnnotations(code) {
+  const annotationRegex = /\/\/\s*\[!code\s*(?:\S.*)?\]/;
+  return code.split("\n").map((line) => {
+    return line.replace(/(?:\/\/\s*)?\[!code \+\+\]/, "");
+  }).filter((line) => !annotationRegex.test(line)).join("\n");
+}
+
+// src/docs-plugin/shiki/shiki-transformer-code-attribute.ts
+function transformerCodeAttribute(opts = {}) {
+  return {
+    enforce: "post",
+    name: "shiki-transformer-code-attribute",
+    pre(node) {
+      const strippedSource = removeCodeAnnotations(this.source);
+      node.properties[opts.attributeName ?? "data-code"] = opts.formatter?.(strippedSource) ?? strippedSource;
+    }
+  };
+}
+
 // src/docs-plugin/mdx-plugins.ts
 var quiRehypePlugins = [rehypeSectionize, rehypeSlug];
+function getShikiTransformers() {
+  return [
+    transformerNotationDiff(),
+    transformerNotationFocus(),
+    transformerNotationHighlight(),
+    transformerNotationWordHighlight(),
+    transformerNotationErrorLevel(),
+    transformerRenderIndentGuides2(),
+    transformerRemoveNotationEscape()
+  ];
+}
 function getRehypePlugins(options = {}) {
   const config = new ConfigLoader(options).loadConfig();
   return [
-    rehypeMdxCodeProps,
+    [rehypeMdxCodeProps, { enforce: "pre" }],
     [
       rehypeSlug,
       { allowedHeadings: config.headings }
@@ -3227,14 +3328,17 @@ function getRehypePlugins(options = {}) {
     rehypeSectionize,
     [
       rehypeShiki,
-      {
-        defaultColor: "light-dark()",
-        themes: {
-          dark: quiCustomDarkTheme2,
-          light: "github-light-high-contrast"
+      merge(
+        {
+          defaultColor: "light-dark()",
+          themes: {
+            dark: quiCustomDarkTheme2,
+            light: "github-light-high-contrast"
+          },
+          transformers: [...getShikiTransformers(), transformerCodeAttribute()]
         },
-        ...options.rehypeShikiOptions
-      }
+        options.rehypeShikiOptions
+      )
     ]
   ];
 }
@@ -3285,7 +3389,6 @@ var NODE_BUILTINS = [
 
 // src/react-demo-plugin/demo-plugin-utils.ts
 import chalk5 from "chalk";
-import { createHash as createHash2 } from "node:crypto";
 import { existsSync as existsSync2, readFileSync as readFileSync3 } from "node:fs";
 import { readFile as readFile2 } from "node:fs/promises";
 import { dirname as dirname2, join as join3, relative as relative2, resolve as resolve3, sep } from "node:path";
@@ -3314,21 +3417,6 @@ async function extractFileImports(filePath) {
     return null;
   }
 }
-function mergeImports(importMap, imports) {
-  for (const { source, specifiers } of imports) {
-    if (isNodeBuiltin(source)) {
-      continue;
-    }
-    let sourceSpecifiers = importMap.get(source);
-    if (!sourceSpecifiers) {
-      sourceSpecifiers = /* @__PURE__ */ new Set();
-      importMap.set(source, sourceSpecifiers);
-    }
-    for (const spec of specifiers) {
-      sourceSpecifiers.add(spec);
-    }
-  }
-}
 function extractImports(code, fileName) {
   const sourceFile = ts2.createSourceFile(
     fileName,
@@ -3442,18 +3530,6 @@ function resolveRelativeImport(source, fromFile) {
   }
   return resolved;
 }
-async function extractAllImports(files) {
-  const importMap = /* @__PURE__ */ new Map();
-  const relativeImports = [];
-  for (const filePath of files) {
-    const result = await extractFileImports(filePath);
-    if (result) {
-      mergeImports(importMap, result.thirdPartyImports);
-      relativeImports.push(...result.relativeImports);
-    }
-  }
-  return { importMap, relativeImports };
-}
 function isRelativeImport(source) {
   return source.startsWith("./") || source.startsWith("../");
 }
@@ -3588,90 +3664,6 @@ function resolvePathAlias2(source, pathAliases) {
   }
   return null;
 }
-function sanitizeSourceName(source) {
-  return source.replace(/@/g, "at_").replace(/\//g, "_").replace(/[^a-zA-Z0-9_]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-}
-function sanitizeIdentifier(str) {
-  return str.replace(/[^a-zA-Z0-9]/g, "_");
-}
-function createUniqueModuleName(source) {
-  const hash = createHash2("sha256").update(source).digest("hex").substring(0, 8);
-  const baseName = source.split("/").pop()?.replace(/[^a-zA-Z0-9]/g, "_")?.replace(/^_+|_+$/g, "")?.replace(/^(\d)/, "_$1") || "module";
-  return `mod_${baseName}_${hash}`;
-}
-function addReactImports(imports, scopeEntries) {
-  imports.push(`import React from "react"`);
-  imports.push(`import {
-    ${REACT_IMPORTS.join(", ")}
-  } from "react"`);
-  scopeEntries.push("React", ...REACT_IMPORTS);
-}
-function addThirdPartyImports(importMap, imports, scopeEntries) {
-  const sortedImports = Array.from(importMap.entries()).sort(
-    ([a], [b]) => a.localeCompare(b)
-  );
-  const usedNames = /* @__PURE__ */ new Set(["React", ...REACT_IMPORTS]);
-  for (const [source, specifiers] of sortedImports) {
-    const moduleName = createUniqueModuleName(source);
-    imports.push(`import * as ${moduleName} from "${source}"`);
-    addModuleToScope(source, specifiers, moduleName, scopeEntries, usedNames);
-  }
-}
-function addThirdPartyImportsNamespaced(importMap, imports, scopeEntries, demoName) {
-  const sortedImports = Array.from(importMap.entries()).sort(
-    ([a], [b]) => a.localeCompare(b)
-  );
-  const usedNames = /* @__PURE__ */ new Set(["React", ...REACT_IMPORTS]);
-  for (const [source, specifiers] of sortedImports) {
-    const moduleName = `${sanitizeIdentifier(demoName)}_${createUniqueModuleName(source)}`;
-    imports.push(`import * as ${moduleName} from "${source}"`);
-    addModuleToScope(source, specifiers, moduleName, scopeEntries, usedNames);
-  }
-}
-function addRelativeImportsNamespaced(relativeImports, imports, scopeEntries, demoName) {
-  const processedPaths = /* @__PURE__ */ new Set();
-  for (const { resolvedPath, specifiers } of relativeImports) {
-    if (processedPaths.has(resolvedPath)) {
-      continue;
-    }
-    processedPaths.add(resolvedPath);
-    const moduleName = `${sanitizeIdentifier(demoName)}_${createUniqueModuleName(resolvedPath)}`;
-    imports.push(`import * as ${moduleName} from "${resolvedPath}"`);
-    for (const { imported, local } of specifiers) {
-      if (imported === "default") {
-        scopeEntries.push(`${local}: ${moduleName}.default`);
-      } else if (imported === "*") {
-        scopeEntries.push(`...${moduleName}`);
-      } else {
-        scopeEntries.push(`${local}: ${moduleName}.${imported}`);
-      }
-    }
-  }
-}
-function addModuleToScope(source, specifiers, moduleName, scopeEntries, usedNames) {
-  const specArray = Array.from(specifiers);
-  const hasDefault = specArray.some((spec) => spec.imported === "default");
-  const hasNamespace = specArray.some((spec) => spec.imported === "*");
-  const namedImports = specArray.filter(
-    (spec) => spec.imported !== "default" && spec.imported !== "*"
-  );
-  if (hasNamespace) {
-    scopeEntries.push(`...${moduleName}`);
-    return;
-  }
-  const sanitizedSource = sanitizeSourceName(source);
-  if (hasDefault) {
-    scopeEntries.push(`"${sanitizedSource}__default": ${moduleName}.default`);
-  }
-  for (const { imported, local } of namedImports) {
-    const sanitizedKey = `${sanitizedSource}__${imported}`;
-    scopeEntries.push(`"${sanitizedKey}": ${moduleName}.${imported}`);
-    if (!usedNames.has(local)) {
-      scopeEntries.push(`${local}: ${moduleName}.${imported}`);
-      usedNames.add(local);
-    }
-  }
-}
 function extractPageId(filePath, routesDir) {
   const relativePath = relative2(routesDir, filePath);
   const pathParts = relativePath.split(sep);
@@ -3686,20 +3678,14 @@ function isCssAsset(filePath) {
 }
 function isDemoFile(filePath) {
   try {
-    return filePath.includes("/demos/") && filePath.endsWith(".tsx") && // could also be in a comment, probably need to use TS parser
-    readFileSync3(filePath, "utf-8").includes("export default");
+    return filePath.includes("/demos/") && filePath.endsWith(".tsx") && !readFileSync3(filePath).includes("export default");
   } catch (error) {
     return false;
   }
 }
-function createEmptyScopeModule() {
-  return "export const createDemoScope = () => ({})";
-}
 
 // src/react-demo-plugin/react-demo-plugin.ts
-import { transformerRenderIndentGuides as transformerRenderIndentGuides2 } from "@shikijs/transformers";
 import chalk6 from "chalk";
-import { watch as watch2 } from "chokidar";
 import { glob as glob3 } from "glob";
 import { readFile as readFile3 } from "node:fs/promises";
 import { basename as basename2, resolve as resolve4 } from "node:path";
@@ -3707,27 +3693,13 @@ import { createHighlighter as createHighlighter2 } from "shiki";
 import * as ts3 from "typescript";
 import { quiCustomDarkTheme as quiCustomDarkTheme3 } from "@qualcomm-ui/mdx-common";
 import { dedent } from "@qualcomm-ui/utils/dedent";
-import { debounce } from "@qualcomm-ui/utils/functions";
-var isDev2 = process.env.NODE_ENV === "development";
 var highlighter2 = null;
-var initCount2 = 0;
-var hmrState = {
-  windowScrollY: 0
-};
+var initializingHighlighter = false;
 var demoRegistry2 = /* @__PURE__ */ new Map();
-var pageScopes = /* @__PURE__ */ new Map();
 var pageFiles = /* @__PURE__ */ new Map();
 var relativeImportDependents = /* @__PURE__ */ new Map();
-var hasWatcherInitialized2 = false;
-function logDev2(...args) {
-  if (!hasWatcherInitialized2) {
-    return;
-  }
-  console.log(...args);
-}
 function reactDemoPlugin({
   demoPattern = "src/routes/**/demos/*.tsx",
-  lazyLoadDevModules = true,
   routesDir = "src/routes",
   theme = {
     dark: quiCustomDarkTheme3,
@@ -3736,25 +3708,19 @@ function reactDemoPlugin({
   transformers = [],
   transformLine
 } = {}) {
-  let watcher = null;
   return {
-    async buildEnd() {
-      if (watcher) {
-        await watcher.close();
-        watcher = null;
-        hasWatcherInitialized2 = false;
-      }
+    apply(config, env) {
+      return env.mode === "development" && env.command === "serve" || env.mode === "production" && env.command === "build";
     },
     async buildStart() {
-      if (initCount2 === 0) {
-        initCount2++;
-        return;
-      }
-      if (!highlighter2) {
+      if (!highlighter2 && !initializingHighlighter) {
+        initializingHighlighter = true;
         try {
           highlighter2 = await createHighlighter2({
             langs: ["tsx", "typescript"],
             themes: [theme.dark, theme.light]
+          }).finally(() => {
+            initializingHighlighter = false;
           });
           console.log(
             `${chalk6.magenta.bold(LOG_PREFIX2)} Shiki highlighter initialized`
@@ -3766,135 +3732,51 @@ function reactDemoPlugin({
           );
         }
       }
-      try {
-        await collectReactDemos();
-        if (isDev2 && !hasWatcherInitialized2) {
-          hasWatcherInitialized2 = true;
-          await setupFileWatcher();
-        } else if (isDev2) {
-          logDev2(
-            `${chalk6.magenta.bold(LOG_PREFIX2)} skipping watch: watcher already initialized by another instance`
-          );
-        }
-      } catch (error) {
-        if (watcher) {
-          await watcher.close();
-          watcher = null;
-          hasWatcherInitialized2 = false;
-        }
-        throw error;
-      }
+      await collectReactDemos();
     },
-    configureServer(server) {
-      const debouncedRestore = debounce((data) => {
-        hmrState.windowScrollY = data.scrollY;
-      }, 100);
-      server.ws.on("custom:store-scroll-position", debouncedRestore);
-      server.ws.on("custom:request-scroll-position", () => {
-        server.ws.send({
-          data: hmrState.windowScrollY,
-          event: "custom:restore-scroll-position",
-          type: "custom"
-        });
-      });
-    },
-    async handleHotUpdate({ file, server }) {
+    async handleHotUpdate({ file, modules, server }) {
       if (isCssAsset(file)) {
-        return server.moduleGraph.getModulesByFile(file)?.values()?.toArray();
+        return modules;
       }
-      if (!lazyLoadDevModules) {
-        let shouldUpdate = false;
-        if (isDemoFile(file)) {
-          await handleFileAdditionOrUpdate(file, false);
-          shouldUpdate = true;
-        }
-        const normalizedFile = resolve4(file);
-        const dependents = relativeImportDependents.get(normalizedFile);
-        if (dependents) {
-          shouldUpdate = true;
-        }
-        if (shouldUpdate) {
-          const autoModule = server.moduleGraph.getModuleById(
-            VIRTUAL_MODULE_IDS.AUTO
-          );
-          if (autoModule) {
-            server.moduleGraph.invalidateModule(autoModule);
-            await server.reloadModule(autoModule);
-          }
-          return [];
-        }
+      if (file.endsWith(".mdx")) {
+        return [];
       }
       if (isDemoFile(file)) {
-        logDev2(
-          `${chalk6.magenta.bold(LOG_PREFIX2)} Processing change: ${chalk6.blueBright.bold(file)}`
-        );
-        const pageId = extractPageId(file, routesDir);
-        const demoName = createDemoName(file);
-        const wasNew = !demoRegistry2.has(demoName);
-        await handleFileAdditionOrUpdate(file, false);
-        const pageModule = server.moduleGraph.getModuleById(
-          `${VIRTUAL_MODULE_IDS.PAGE_PREFIX}${pageId}`
-        );
-        if (pageModule) {
-          console.debug(
-            "invalidating:",
-            `virtual:qui-demo-scope/page:${pageId}`
-          );
-          server.moduleGraph.invalidateModule(pageModule);
-          await server.reloadModule(pageModule);
-        }
-        if (wasNew) {
-          const autoModule = server.moduleGraph.getModuleById(
-            VIRTUAL_MODULE_IDS.AUTO
-          );
-          if (autoModule) {
-            server.moduleGraph.invalidateModule(autoModule);
-            await server.reloadModule(autoModule);
-          }
-        }
-        server.ws.send({
-          data: demoRegistry2.get(createDemoName(file)),
-          event: "qui-demo-update",
-          type: "custom"
-        });
+        await handleDemoAdditionOrUpdate({ filePath: file });
       } else {
         const normalizedFile = resolve4(file);
-        const dependents = relativeImportDependents.get(normalizedFile);
-        if (dependents) {
-          for (const demoName of dependents) {
-            server.ws.send({
-              data: { demoName },
-              event: "react-demo-updating",
-              type: "custom"
+        const dependentDemos = relativeImportDependents.get(normalizedFile);
+        if (!dependentDemos?.size) {
+          return [];
+        }
+        for (const demoName of Array.from(dependentDemos)) {
+          const demo = demoRegistry2.get(demoName);
+          if (demo) {
+            await handleDemoAdditionOrUpdate({
+              filePath: demo.filePath
             });
           }
         }
       }
+      const autoModule = server.moduleGraph.getModuleById(
+        VIRTUAL_MODULE_IDS.AUTO
+      );
+      if (autoModule) {
+        server.moduleGraph.invalidateModule(autoModule);
+        await server.reloadModule(autoModule);
+      }
       return [];
     },
     async load(id) {
       if (id === VIRTUAL_MODULE_IDS.AUTO) {
         return generateAutoScopeModule();
       }
-      if (id.startsWith(VIRTUAL_MODULE_IDS.PAGE_PREFIX)) {
-        const pageId = id.replace(VIRTUAL_MODULE_IDS.PAGE_PREFIX, "");
-        return pageScopes.get(pageId) || createEmptyScopeModule();
-      }
-      if (id === VIRTUAL_MODULE_IDS.CONFIG) {
-        return generateConfigModule();
-      }
     },
     name: "auto-demo-scope",
     resolveId(id) {
       if (id === "virtual:qui-demo-scope/auto") {
         return VIRTUAL_MODULE_IDS.AUTO;
       }
-      if (id.startsWith("virtual:qui-demo-scope/page:")) {
-        return `\0${id}`;
-      }
-      if (id === "virtual:qui-demo-scope/config") {
-        return VIRTUAL_MODULE_IDS.CONFIG;
-      }
     },
     writeBundle() {
       console.log(
@@ -3902,43 +3784,9 @@ function reactDemoPlugin({
       );
     }
   };
-  async function setupFileWatcher() {
-    watcher = watch2(routesDir, {
-      ignoreInitial: true,
-      persistent: true
-    });
-    watcher.on("ready", () => {
-      logDev2(
-        `${chalk6.blue.bold(LOG_PREFIX2)} Registered ${chalk6.green(demoRegistry2.size)} demo files. Watching for file changes...`
-      );
-    });
-    watcher.on("addDir", (dirPath) => {
-      if (dirPath.endsWith("/demos")) {
-        logDev2(
-          `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.greenBright("New demo directory detected:")} ${chalk6.blueBright.bold(dirPath)}`
-        );
-      }
-    });
-    watcher.on("unlink", async (filePath) => {
-      if (isDemoFile(filePath)) {
-        logDev2(
-          `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.redBright("Demo file deleted:")} ${chalk6.blueBright.bold(filePath)}`
-        );
-        await handleFileDeletion(filePath);
-      }
-    });
-    watcher.on("add", async (filePath) => {
-      if (isDemoFile(filePath)) {
-        logDev2(
-          `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.greenBright("Demo file added:")} ${chalk6.blueBright.bold(filePath)}`
-        );
-        await handleFileAdditionOrUpdate(filePath, true).catch(() => {
-          console.debug("failed to add file", filePath);
-        });
-      }
-    });
-  }
-  async function handleFileAdditionOrUpdate(filePath, isAdd) {
+  async function handleDemoAdditionOrUpdate({
+    filePath
+  }) {
     const pageId = extractPageId(filePath, routesDir);
     const demoName = createDemoName(filePath);
     const existingFiles = pageFiles.get(pageId) ?? [];
@@ -3962,43 +3810,6 @@ function reactDemoPlugin({
         }
       }
     }
-    const previousScope = pageScopes.get(pageId);
-    const allPageFiles = pageFiles.get(pageId);
-    const scope = await generateScopeForPage(pageId, allPageFiles);
-    pageScopes.set(pageId, scope);
-    logDev2(
-      `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.greenBright(isAdd ? "Added demo:" : "Updated demo:")} ${chalk6.greenBright.bold(demoName)}`
-    );
-    return previousScope !== scope;
-  }
-  async function handleFileDeletion(deletedFile) {
-    const demoName = createDemoName(deletedFile);
-    const pageId = extractPageId(deletedFile, routesDir);
-    demoRegistry2.delete(demoName);
-    for (const [importPath, dependents] of relativeImportDependents.entries()) {
-      dependents.delete(demoName);
-      if (dependents.size === 0) {
-        relativeImportDependents.delete(importPath);
-      }
-    }
-    const files = pageFiles.get(pageId);
-    if (files) {
-      const updatedFiles = files.filter((f) => f !== deletedFile);
-      if (updatedFiles.length === 0) {
-        pageFiles.delete(pageId);
-        pageScopes.delete(pageId);
-        logDev2(
-          `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.redBright("Removed empty page:")} ${chalk6.blueBright.bold(pageId)}`
-        );
-      } else {
-        pageFiles.set(pageId, updatedFiles);
-        const scope = await generateScopeForPage(pageId, updatedFiles);
-        pageScopes.set(pageId, scope);
-      }
-    }
-    logDev2(
-      `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.redBright("Cleaned up deleted file:")} ${chalk6.blueBright.bold(deletedFile)}`
-    );
   }
   function isPreviewLine(trimmedLine) {
     return trimmedLine === "// preview" || /^\{\s*\/\*\s*preview\s*\*\/\s*\}$/.test(trimmedLine);
@@ -4048,7 +3859,17 @@ function reactDemoPlugin({
           dark: theme.dark,
           light: theme.light
         },
-        transformers: [transformerRenderIndentGuides2(), ...transformers]
+        transformers: [
+          ...getShikiTransformers(),
+          {
+            enforce: "post",
+            name: "shiki-transformer-trim",
+            preprocess(code2) {
+              return code2.trim();
+            }
+          },
+          ...transformers
+        ]
       });
     } catch (error) {
       console.warn(
@@ -4059,10 +3880,7 @@ function reactDemoPlugin({
     }
   }
   async function collectReactDemos() {
-    if (demoRegistry2.size && pageScopes.size && pageFiles.size) {
-      logDev2(
-        `${chalk6.magenta.bold(LOG_PREFIX2)} Using cached ${chalk6.cyanBright.bold(demoRegistry2.size)} demos`
-      );
+    if (demoRegistry2.size) {
       return;
     }
     const demoFiles = (await glob3(demoPattern)).filter(isDemoFile);
@@ -4089,243 +3907,15 @@ function reactDemoPlugin({
         }
       }
     }
-    for (const [pageId, files] of pageFiles.entries()) {
-      const scope = await generateScopeForPage(pageId, files);
-      pageScopes.set(pageId, scope);
-    }
   }
-  async function generateScopeForPage(pageId, files) {
-    const demosData = [];
-    const allThirdPartyImports = /* @__PURE__ */ new Map();
-    const allRelativeImports = [];
-    const demoImportData = /* @__PURE__ */ new Map();
-    for (const file of files) {
-      const demoName = createDemoName(file);
-      const demo = demoRegistry2.get(demoName);
-      if (!demo) {
-        continue;
-      }
-      demosData.push({
-        demoName,
-        fileName: demo.fileName,
-        imports: demo.imports,
-        pageId: demo.pageId,
-        sourceCode: demo.sourceCode
-      });
-      const { importMap, relativeImports } = await extractAllImports([file]);
-      demoImportData.set(demoName, {
-        relative: relativeImports.map((r) => ({
-          resolvedPath: r.resolvedPath,
-          specifiers: r.specifiers
-        })),
-        thirdParty: Array.from(importMap.entries()).map(([source, specs]) => ({
-          source,
-          specifiers: Array.from(specs)
-        }))
-      });
-      for (const [source, specifiers] of importMap) {
-        if (!allThirdPartyImports.has(source)) {
-          allThirdPartyImports.set(source, /* @__PURE__ */ new Set());
-        }
-        for (const spec of specifiers) {
-          allThirdPartyImports.get(source).add(spec);
-        }
-      }
-      for (const relImport of relativeImports) {
-        if (!allRelativeImports.some(
-          (r) => r.resolvedPath === relImport.resolvedPath
-        )) {
-          allRelativeImports.push(relImport);
-        }
-      }
-    }
-    const pageImports = [];
-    const reactScopeEntries = [];
-    addReactImports(pageImports, reactScopeEntries);
-    const moduleNames = /* @__PURE__ */ new Map();
-    const moduleRegistryEntries = [];
-    for (const [source] of Array.from(allThirdPartyImports.entries()).sort(
-      ([a], [b]) => a.localeCompare(b)
-    )) {
-      const moduleName = createUniqueModuleName(source);
-      moduleNames.set(source, moduleName);
-      pageImports.push(`import * as ${moduleName} from "${source}"`);
-      moduleRegistryEntries.push(`  "${source}": ${moduleName}`);
-    }
-    for (const { resolvedPath } of allRelativeImports) {
-      const moduleName = createUniqueModuleName(resolvedPath);
-      moduleNames.set(resolvedPath, moduleName);
-      pageImports.push(`import * as ${moduleName} from "${resolvedPath}"`);
-      moduleRegistryEntries.push(`  "${resolvedPath}": ${moduleName}`);
-    }
-    const demosJson = JSON.stringify(demosData);
-    const demoImportDataJson = JSON.stringify(
-      Array.from(demoImportData.entries())
-    );
-    const reactScopeEntriesCode = reactScopeEntries.map((e) => `  ${e}`).join(",\n");
-    return `// Auto-generated page scope for ${pageId}
-${pageImports.join("\n")}
-
-const modules = {
-${moduleRegistryEntries.join(",\n")}
-}
-
-const demosData = ${demosJson}
-const demoImportData = new Map(${demoImportDataJson})
-
-const reactScope = {
-${reactScopeEntriesCode}
-}
-
-const scopeCache = new Map()
-
-function createScope(demoName) {
-  if (scopeCache.has(demoName)) {
-    return scopeCache.get(demoName)
-  }
-  
-  const imports = demoImportData.get(demoName)
-  if (!imports) return {}
-  
-  const scope = {...reactScope}
-  
-  for (const {source, specifiers} of imports.thirdParty) {
-    const mod = modules[source]
-    if (!mod) continue
-    
-    for (const {imported, local} of specifiers) {
-      if (imported === 'default') {
-        scope[local] = mod.default
-      } else if (imported === '*') {
-        Object.assign(scope, mod)
-      } else {
-        scope[local] = mod[imported]
-      }
-    }
-  }
-  
-  for (const {resolvedPath, specifiers} of imports.relative) {
-    const mod = modules[resolvedPath]
-    if (!mod) continue
-    
-    for (const {imported, local} of specifiers) {
-      if (imported === 'default') {
-        scope[local] = mod.default
-      } else if (imported === '*') {
-        Object.assign(scope, mod)
-      } else {
-        scope[local] = mod[imported]
-      }
-    }
-  }
-  
-  scopeCache.set(demoName, scope)
-  return scope
-}
-
-export function getDemo(demoName) {
-  const demo = demosData.find(d => d.demoName === demoName)
-  if (!demo) return null
-  return {
-    ...demo,
-    scope: createScope(demoName)
-  }
-}
-
-export function getDemos() {
-  return demosData.map(demo => ({
-    ...demo,
-    scope: createScope(demo.demoName)
-  }))
-}
-`;
-  }
-  async function generateAutoScopeModule() {
-    if (isDev2 && lazyLoadDevModules) {
-      return [
-        "// Auto-generated demo scope resolver (DEV MODE - Lazy by Page)",
-        generateLazyPageLoaders(),
-        generateDemoToPageMap(),
-        generateDevGetDemo()
-      ].join("\n\n");
-    }
+  function generateAutoScopeModule() {
     const registryCode = generateDemoRegistry(demoRegistry2);
     return [
       "// Auto-generated demo scope resolver (PROD MODE)",
-      generatePageImports(),
-      generateScopeMap(),
       registryCode,
       generateExportedFunctions()
     ].join("\n\n");
   }
-  function generateConfigModule() {
-    return dedent`
-      export function getReactDemoConfig() {
-        return {lazyLoadDevModules: ${lazyLoadDevModules}}
-      }
-    `;
-  }
-  function generateLazyPageLoaders() {
-    const pageIds = Array.from(pageFiles.keys()).sort();
-    if (pageIds.length === 0) {
-      return "export const lazyDemoLoader = {}";
-    }
-    const entries = pageIds.map((pageId) => {
-      return `  "${pageId}": () => import("virtual:qui-demo-scope/page:${pageId}")`;
-    }).join(",\n");
-    return `export const lazyDemoLoader = {
-${entries}
-}`;
-  }
-  function generateDemoToPageMap() {
-    const entries = Array.from(demoRegistry2.entries()).map(([demoName, { pageId }]) => {
-      return `  "${demoName}": "${pageId}"`;
-    }).join(",\n");
-    return `const demoToPageMap = {
-${entries}
-}`;
-  }
-  function generateDevGetDemo() {
-    return dedent`
-    export async function getDemo(demoName) {
-      const pageId = demoToPageMap[demoName]
-      if (!pageId) {
-        return {
-          fileName: "",
-          imports: [],
-          errorMessage: \`Demo "\${demoName}" not found.\`,
-          scope: {},
-          pageId: "",
-          sourceCode: [],
-        }
-      }
-      
-      const loader = lazyDemoLoader[pageId]
-      if (!loader) {
-        return {
-          fileName: "",
-          imports: [],
-          errorMessage: \`Page "\${pageId}" not found.\`,
-          scope: {},
-          pageId: "",
-          sourceCode: [],
-        }
-      }
-      
-      const pageModule = await loader()
-      const demo = pageModule.getDemo(demoName)
-      
-      return demo || {
-        fileName: "",
-        imports: [],
-        errorMessage: \`Demo "\${demoName}" not found in page.\`,
-        scope: {},
-        pageId: "",
-        sourceCode: [],
-      }
-    }
-  `;
-  }
   function extractHighlightedVariants(highlightedHtml) {
     const preMatch = highlightedHtml.match(/^<pre[^>]*><code>/)?.[0] || "";
     const postMatch = highlightedHtml.match(/<\/code><\/pre>$/)?.[0] || "";
@@ -4454,23 +4044,18 @@ ${entries}
                 withoutImports: importedCodeWithoutImports
               }
             });
-          } catch (error) {
-            logDev2(
-              `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.yellowBright("Failed to process relative import:")} ${chalk6.blueBright.bold(relativeImport.resolvedPath)}`
-            );
+          } catch {
           }
         }
       }
       return {
         demoName: createDemoName(filePath),
         fileName,
+        filePath,
         imports,
         sourceCode
       };
-    } catch (e) {
-      logDev2(
-        `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.yellowBright("Failed to parse")} ${chalk6.blueBright.bold(filePath)}. ${chalk6.yellowBright("Removing from registry")}`
-      );
+    } catch {
       return null;
     }
   }
@@ -4517,36 +4102,12 @@ ${entries}
         strippedCode: strippedCode.replace(/^\n+/, "")
       };
     } catch (error) {
-      logDev2(
-        `${chalk6.magenta.bold(LOG_PREFIX2)} ${chalk6.redBright("Failed to strip imports from")} ${chalk6.blueBright.bold(fileName)}:`,
-        error
-      );
       return {
         imports: [],
         strippedCode: code
       };
     }
   }
-  function generatePageImports() {
-    const pageIds = Array.from(pageScopes.keys());
-    return pageIds.map((pageId) => {
-      const safeName = sanitizeIdentifier(pageId);
-      return `import * as page_${safeName} from "virtual:qui-demo-scope/page:${pageId}"`;
-    }).join("\n");
-  }
-  function generateScopeMap() {
-    const pageIds = Array.from(pageScopes.keys());
-    if (pageIds.length === 0) {
-      return "const pageModules = {}";
-    }
-    const entries = pageIds.map((pageId) => {
-      const safeName = sanitizeIdentifier(pageId);
-      return `  "${pageId}": page_${safeName}`;
-    }).join(",\n");
-    return `const pageModules = {
-${entries}
-}`;
-  }
   function generateDemoRegistry(registry) {
     const entries = Array.from(registry.entries()).map(([demoName, { fileName, imports, pageId, sourceCode }]) => {
       return `  ["${demoName}", { fileName: "${fileName}", imports: ${JSON.stringify(imports)}, pageId: "${pageId}", sourceCode: ${JSON.stringify(sourceCode)}, demoName: "${demoName}" }]`;
@@ -4564,31 +4125,11 @@ ${entries}
           fileName: "",
           imports: [],
           errorMessage: \`Demo "\${demoName}" not found.\`,
-          scope: {},
           pageId: "",
           sourceCode: [],
         }
       }
-      
-      const pageModule = pageModules[demo.pageId]
-      if (!pageModule) {
-        return {
-          fileName: "",
-          imports: [],
-          errorMessage: \`Page module not found.\`,
-          scope: {},
-          pageId: demo.pageId,
-          sourceCode: [],
-        }
-      }
-      
-      return pageModule.getDemo(demoName) || {
-        fileName: demo.fileName,
-        imports: demo.imports,
-        scope: {},
-        pageId: demo.pageId,
-        sourceCode: demo.sourceCode,
-      }
+      return demo
     }
   `;
   }
@@ -4598,21 +4139,15 @@ export {
   NODE_BUILTINS,
   REACT_IMPORTS,
   VIRTUAL_MODULE_IDS,
-  addReactImports,
-  addRelativeImportsNamespaced,
-  addThirdPartyImports,
-  addThirdPartyImportsNamespaced,
   angularDemoPlugin,
   createDemoName,
-  createEmptyScopeModule,
-  createUniqueModuleName,
-  extractAllImports,
   extractFileImports,
   extractPageId,
   getAlertIcon,
   getRehypePlugins,
   getRemarkPlugins,
   getScriptKind,
+  getShikiTransformers,
   isCssAsset,
   isDemoFile,
   quiDocsPlugin,
@@ -4628,8 +4163,6 @@ export {
   remarkGfm2 as remarkGfm,
   remarkMdxFrontmatter,
   remarkSelfLinkHeadings,
-  remarkSpoilers,
-  sanitizeIdentifier,
-  sanitizeSourceName
+  remarkSpoilers
 };
 //# sourceMappingURL=index.js.map