@qualcomm-ui/mdx-vite 2.1.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")) {
@@ -5301,10 +5305,12 @@ 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
@@ -5681,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(
@@ -5847,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 = [];
@@ -5948,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(
@@ -5958,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/,
       ""
     );