@qualcomm-ui/mdx-vite 2.0.0 → 2.1.1

package/dist/index.js

@@ -1252,6 +1252,38 @@ import { visit } from "unist-util-visit";
 import {
   UniqueIdService
 } from "@qualcomm-ui/mdx-common";
+
+// src/docs-plugin/internal/services/mdx-utils.ts
+function extractNamesFromAttribute(attr) {
+  if (!attr.value) {
+    return [];
+  }
+  if (typeof attr.value === "string") {
+    return [attr.value];
+  }
+  if (attr.value.type === "mdxJsxAttributeValueExpression") {
+    const estree = attr.value.data?.estree;
+    if (!estree?.body?.[0] || estree.body[0].type !== "ExpressionStatement") {
+      return [];
+    }
+    const expression = estree.body[0].expression;
+    if (expression.type === "ArrayExpression") {
+      const names = [];
+      for (const element of expression.elements) {
+        if (element?.type === "Literal" && typeof element.value === "string") {
+          names.push(element.value);
+        }
+      }
+      return names;
+    }
+    if (expression.type === "Literal" && typeof expression.value === "string") {
+      return [expression.value];
+    }
+  }
+  return [];
+}
+
+// src/docs-plugin/internal/services/doc-props/doc-props-indexer.ts
 function extractPickPropsRecord(node) {
   if (node.name !== "unionWithPick" || !node.value || typeof node.value === "string") {
     return null;
@@ -1300,34 +1332,6 @@ var DocPropsIndexer = class {
     this.idService.reset();
     this.docPropsEntries = [];
   }
-  extractNamesFromAttribute(attr) {
-    if (!attr.value) {
-      return [];
-    }
-    if (typeof attr.value === "string") {
-      return [attr.value];
-    }
-    if (attr.value.type === "mdxJsxAttributeValueExpression") {
-      const estree = attr.value.data?.estree;
-      if (!estree?.body?.[0] || estree.body[0].type !== "ExpressionStatement") {
-        return [];
-      }
-      const expression = estree.body[0].expression;
-      if (expression.type === "ArrayExpression") {
-        const names = [];
-        for (const element of expression.elements) {
-          if (element?.type === "Literal" && typeof element.value === "string") {
-            names.push(element.value);
-          }
-        }
-        return names;
-      }
-      if (expression.type === "Literal" && typeof expression.value === "string") {
-        return [expression.value];
-      }
-    }
-    return [];
-  }
   /**
    * Finds all JSX `<TypeDocProps />` nodes on the current page and adds their names
    * to an array. Once all nodes have been collected, we process them into
@@ -1343,9 +1347,9 @@ var DocPropsIndexer = class {
           const omitFromAttr = node.attributes?.find(
             (attr) => attr.name === "omitFrom"
           );
-          const omitFrom = omitFromAttr ? this.extractNamesFromAttribute(omitFromAttr) : void 0;
+          const omitFrom = omitFromAttr ? extractNamesFromAttribute(omitFromAttr) : void 0;
           if (nameAttr) {
-            const names = this.extractNamesFromAttribute(nameAttr);
+            const names = extractNamesFromAttribute(nameAttr);
             for (const name of names) {
               this.docPropsEntries.push({ name, omitFrom });
               if (name.endsWith("Props")) {
@@ -1486,12 +1490,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 +2019,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 +2306,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 +2577,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 +2610,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 +2627,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 +2647,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 +2692,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,6 +2702,7 @@ var SearchIndexer = class {
     ).map((file) => this.compileTsxFile(file));
     this._searchIndex.push(...mdxIndex.filter((entry) => !entry.hideFromSearch));
     this.navBuilder.build();
+    return compiledFiles;
   }
 };
 
@@ -2709,6 +2732,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 {};
@@ -2741,15 +2772,16 @@ 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 adds or removes mdx files, we re-index the site. This function
@@ -2793,7 +2825,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" })
+          );
+        }
+      });
     });
   }
 };
@@ -2804,6 +2842,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++;
@@ -2833,26 +2874,45 @@ function quiDocsPlugin(opts) {
       });
       state.servers.push(server);
     },
-    handleHotUpdate: async ({ file: updateFile, modules, server }) => {
+    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.buildIndex(true);
         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 modules;
+      return [];
     },
     load: (id) => {
       if (id === VIRTUAL_MODULE_ID2) {
-        return `export const siteData = ${JSON.stringify({ navItems: state.indexer.navItems, pageDocProps: state.indexer.pageDocProps, pageMap: state.indexer.pageMap, searchIndex: state.indexer.searchIndex })}`;
+        return `export const siteData = ${JSON.stringify(state.siteData)}`;
       }
       return void 0;
     },
@@ -2868,6 +2928,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
@@ -3218,12 +3288,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 }
@@ -3231,14 +3332,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
+      )
     ]
   ];
 }
@@ -3585,7 +3689,6 @@ function isDemoFile(filePath) {
 }
 
 // src/react-demo-plugin/react-demo-plugin.ts
-import { transformerRenderIndentGuides as transformerRenderIndentGuides2 } from "@shikijs/transformers";
 import chalk6 from "chalk";
 import { glob as glob3 } from "glob";
 import { readFile as readFile3 } from "node:fs/promises";
@@ -3595,6 +3698,7 @@ import * as ts3 from "typescript";
 import { quiCustomDarkTheme as quiCustomDarkTheme3 } from "@qualcomm-ui/mdx-common";
 import { dedent } from "@qualcomm-ui/utils/dedent";
 var highlighter2 = null;
+var initializingHighlighter = false;
 var demoRegistry2 = /* @__PURE__ */ new Map();
 var pageFiles = /* @__PURE__ */ new Map();
 var relativeImportDependents = /* @__PURE__ */ new Map();
@@ -3609,12 +3713,18 @@ function reactDemoPlugin({
   transformLine
 } = {}) {
   return {
+    apply(config, env) {
+      return env.mode === "development" && env.command === "serve" || env.mode === "production" && env.command === "build";
+    },
     async buildStart() {
-      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`
@@ -3628,18 +3738,20 @@ function reactDemoPlugin({
       }
       await collectReactDemos();
     },
-    enforce: "pre",
     async handleHotUpdate({ file, modules, server }) {
       if (isCssAsset(file)) {
         return modules;
       }
+      if (file.endsWith(".mdx")) {
+        return [];
+      }
       if (isDemoFile(file)) {
         await handleDemoAdditionOrUpdate({ filePath: file });
       } else {
         const normalizedFile = resolve4(file);
         const dependentDemos = relativeImportDependents.get(normalizedFile);
         if (!dependentDemos?.size) {
-          return modules;
+          return [];
         }
         for (const demoName of Array.from(dependentDemos)) {
           const demo = demoRegistry2.get(demoName);
@@ -3657,7 +3769,7 @@ function reactDemoPlugin({
         server.moduleGraph.invalidateModule(autoModule);
         await server.reloadModule(autoModule);
       }
-      return modules;
+      return [];
     },
     async load(id) {
       if (id === VIRTUAL_MODULE_IDS.AUTO) {
@@ -3751,7 +3863,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(
@@ -4029,6 +4151,7 @@ export {
   getRehypePlugins,
   getRemarkPlugins,
   getScriptKind,
+  getShikiTransformers,
   isCssAsset,
   isDemoFile,
   quiDocsPlugin,