@qualcomm-ui/mdx-vite 2.0.0 → 2.1.1

package/dist/cli.js

@@ -3648,6 +3648,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;
@@ -3696,34 +3728,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
@@ -3739,9 +3743,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")) {
@@ -3882,12 +3886,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;
     }
@@ -4408,9 +4415,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 = [];
@@ -4695,8 +4702,8 @@ var NavBuilder = class {
 };
 
 // src/docs-plugin/internal/services/nav-builder/page-map.ts
-import { capitalCase as capitalCase2 } from "change-case";
 import { join } from "node:path";
+import { capitalCase as capitalCase2 } from "@qualcomm-ui/utils/change-case";
 function getPathnameFromPathSegments(segments) {
   return `/${segments.join("/")}`;
 }
@@ -4966,11 +4973,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];
     }
@@ -4985,9 +5006,9 @@ var SearchIndexer = class {
       console.debug(
         `${chalk2.yellowBright.bold(
           "Failed to parse mdx page content."
-        )} ${chalk2.blueBright.bold(filepath)}`
+        )} ${chalk2.blueBright.bold(filePath)}`
       );
-      return [defaultSection];
+      return { metadata, pageSections: [defaultSection] };
     }
     const { sections, toc } = indexedPage;
     if (toc.length) {
@@ -5002,17 +5023,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)
@@ -5022,7 +5043,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) => {
@@ -5067,7 +5088,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",
@@ -5076,6 +5098,7 @@ var SearchIndexer = class {
     ).map((file) => this.compileTsxFile(file));
     this._searchIndex.push(...mdxIndex.filter((entry) => !entry.hideFromSearch));
     this.navBuilder.build();
+    return compiledFiles;
   }
 };
 
@@ -5271,7 +5294,6 @@ function addDownloadKnowledgeCommand() {
 }
 
 // src/open-web-ui-knowledge/generate-knowledge.ts
-import { kebabCase } from "change-case";
 import {
   access,
   mkdir as mkdir2,
@@ -5283,10 +5305,13 @@ import {
 } from "node:fs/promises";
 import { basename, dirname, extname, join as join3, resolve as resolve5 } from "node:path";
 import remarkFrontmatter3 from "remark-frontmatter";
+import remarkMdx3 from "remark-mdx";
 import remarkParse4 from "remark-parse";
 import remarkParseFrontmatter2 from "remark-parse-frontmatter";
 import remarkStringify3 from "remark-stringify";
 import { unified as unified4 } from "unified";
+import { visit as visit7 } from "unist-util-visit";
+import { kebabCase } from "@qualcomm-ui/utils/change-case";
 
 // src/docs-plugin/docs-plugin.ts
 import chalk3 from "chalk";
@@ -5320,6 +5345,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 {};
@@ -5352,15 +5385,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(
         `${chalk3.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Compiled search index in: ${chalk3.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}${state.indexer.cachedFileCount ? chalk3.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
@@ -5404,7 +5438,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" })
+          );
+        }
+      });
     });
   }
 };
@@ -5412,6 +5452,16 @@ var state = new PluginState();
 
 // src/docs-plugin/mdx-plugins.ts
 import rehypeShiki from "@shikijs/rehype";
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+  transformerRemoveNotationEscape,
+  transformerRenderIndentGuides
+} from "@shikijs/transformers";
+import { merge } from "lodash-es";
 import { quiCustomDarkTheme } from "@qualcomm-ui/mdx-common";
 
 // src/exports.ts
@@ -5637,9 +5687,8 @@ async function scanPages(routesFolder, verbose, excludePatterns = [], baseUrl) {
       return;
     }
     const entries = await readdir(dirPath, { withFileTypes: true });
-    const mdxFiles = entries.filter((f) => f.name.endsWith(".mdx"));
-    if (mdxFiles.length > 0) {
-      const mdxFile = mdxFiles[0];
+    const mdxFiles = entries.filter((f) => f.name.endsWith(".mdx")) ?? [];
+    for (const mdxFile of mdxFiles) {
       const demosFolder = entries.find((f) => f.name === "demos");
       const demosFolderPath = demosFolder ? join3(dirPath, demosFolder.name) : void 0;
       const segments = getPathSegmentsFromFileName(
@@ -5803,6 +5852,25 @@ async function collectRelativeImports(filePath, visited = /* @__PURE__ */ new Se
   }
   return modules;
 }
+var replaceNpmInstallTabs = () => {
+  return (tree, _file, done) => {
+    visit7(tree, "mdxJsxFlowElement", (node) => {
+      if (node?.name === "NpmInstallTabs") {
+        const packages = node.attributes?.find(
+          (attr) => attr.type === "mdxJsxAttribute" && attr.name === "packages"
+        );
+        const packageNames = packages ? extractNamesFromAttribute(packages) : [];
+        Object.assign(node, {
+          lang: "shell",
+          meta: null,
+          type: "code",
+          value: `npm install ${packageNames.join(" ")}`
+        });
+      }
+    });
+    done();
+  };
+};
 async function processMdxContent(mdxContent, pageUrl, demosFolder, docProps, verbose) {
   let processedContent = mdxContent;
   const demoFiles = [];
@@ -5844,10 +5912,10 @@ ${JSON.stringify(propsDoc, null, 2)}
   } else {
     processedContent = processedContent.replace(/<TypeDocProps\s+[^>]*\/>/g, "");
   }
-  let demoRegex = /<(?:QdsDemo|CodeDemo)\s+[^>]*name="(\w+)"[^>]*\/>/g;
+  let demoRegex = /<(?:QdsDemo|CodeDemo|Demo)\s+[^>]*name="(\w+)"[^>]*\/>/g;
   let demoMatches = Array.from(processedContent.matchAll(demoRegex));
   if (!demoMatches.length) {
-    demoRegex = /<(?:QdsDemo|CodeDemo)\s+[^>]*node=\{Demo\.(\w+)\}[^>]*\/>/g;
+    demoRegex = /<(?:QdsDemo|CodeDemo|Demo)\s+[^>]*node=\{Demo\.(\w+)\}[^>]*\/>/g;
     demoMatches = Array.from(processedContent.matchAll(demoRegex));
   }
   const replacements = await Promise.all(
@@ -5904,7 +5972,7 @@ async function processComponent(component, docProps, verbose) {
     if (verbose) {
       console.log(`Processing page: ${component.name}`);
     }
-    const processor = unified4().use(remarkParse4).use(remarkFrontmatter3, ["yaml"]).use(remarkParseFrontmatter2).use(remarkSelfLinkHeadings(component.url)).use(remarkStringify3);
+    const processor = unified4().use(remarkParse4).use(remarkMdx3).use(replaceNpmInstallTabs).use(remarkFrontmatter3, ["yaml"]).use(remarkParseFrontmatter2).use(remarkSelfLinkHeadings(component.url)).use(remarkStringify3);
     const parsed = await processor.process(mdxContent);
     const frontmatter = parsed.data?.frontmatter || {};
     const { content: processedContent, demoFiles } = await processMdxContent(
@@ -5914,7 +5982,11 @@ async function processComponent(component, docProps, verbose) {
       docProps,
       verbose
     );
-    const contentWithoutFrontmatter = processedContent.replace(
+    const removeJsxProcessor = unified4().use(remarkParse4).use(remarkMdx3).use(remarkRemoveJsx).use(remarkStringify3);
+    const removedJsx = String(
+      await removeJsxProcessor.process(processedContent)
+    );
+    const contentWithoutFrontmatter = removedJsx.replace(
       /^---[\s\S]*?---\n/,
       ""
     );