@qualcomm-ui/mdx-vite 2.1.2 → 2.2.0

package/dist/angular-demo-plugin/angular-demo-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angular-demo-plugin.d.ts","sourceRoot":"","sources":["../../src/angular-demo-plugin/angular-demo-plugin.ts"],"names":[],"mappings":"AAUA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC/B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,MAAM,EAAgB,MAAM,MAAM,CAAA;AAU/C,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE;QACN,IAAI,EACA,oBAAoB,GACpB,iBAAiB,GACjB,yBAAyB,GACzB,MAAM,CAAA;QACV,KAAK,EACD,oBAAoB,GACpB,iBAAiB,GACjB,yBAAyB,GACzB,MAAM,CAAA;KACX,CAAA;CACF;AAqCD,wBAAgB,iBAAiB,CAAC,EAChC,WAAwC,EACxC,WAAW,EACX,SAAwB,EACxB,KAGC,GACF,GAAE,wBAA6B,GAAG,MAAM,CA2qCxC"}
+{"version":3,"file":"angular-demo-plugin.d.ts","sourceRoot":"","sources":["../../src/angular-demo-plugin/angular-demo-plugin.ts"],"names":[],"mappings":"AAQA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC/B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,MAAM,EAAgB,MAAM,MAAM,CAAA;AAe/C,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE;QACN,IAAI,EACA,oBAAoB,GACpB,iBAAiB,GACjB,yBAAyB,GACzB,MAAM,CAAA;QACV,KAAK,EACD,oBAAoB,GACpB,iBAAiB,GACjB,yBAAyB,GACzB,MAAM,CAAA;KACX,CAAA;CACF;AA8BD,wBAAgB,iBAAiB,CAAC,EAChC,WAAwC,EACxC,WAAW,EACX,SAAwB,EACxB,KAGC,GACF,GAAE,wBAA6B,GAAG,MAAM,CAo6BxC"}

package/dist/cli.js

@@ -5526,6 +5526,9 @@ function remarkSelfLinkHeadings(baseUrl = "", options) {
 // src/docs-plugin/remark/remark-spoilers.ts
 import { visit as visit6 } from "unist-util-visit";
 
+// src/docs-plugin/shiki/shiki-transformer-preview-block.ts
+import { dedent } from "@qualcomm-ui/utils/dedent";
+
 // src/open-web-ui-knowledge/load-config-from-env.ts
 import { existsSync } from "node:fs";
 import { join as join2, resolve as resolve4 } from "node:path";
@@ -5698,6 +5701,7 @@ async function scanPages(routesFolder, verbose, excludePatterns = [], baseUrl) {
       const url = getPathnameFromPathSegments(segments);
       components.push({
         demosFolder: demosFolderPath,
+        id: segments.join("-"),
         mdxFile: join3(dirPath, mdxFile.name),
         name: segments.at(-1),
         path: dirPath,
@@ -5871,98 +5875,168 @@ var replaceNpmInstallTabs = () => {
     done();
   };
 };
-async function processMdxContent(mdxContent, pageUrl, demosFolder, docProps, verbose) {
-  let processedContent = mdxContent;
-  const demoFiles = [];
-  const lines = processedContent.split("\n");
-  const titleLine = lines.findIndex((line) => line.startsWith("# "));
-  processedContent = titleLine >= 0 ? lines.slice(titleLine + 1).join("\n") : processedContent;
-  if (pageUrl) {
-    processedContent = processedContent.replace(
-      /\[([^\]]+)\]\(\.\/#([^)]+)\)/g,
-      (_, text, anchor) => `[${text}](${pageUrl}#${anchor})`
-    );
-  }
-  if (docProps) {
-    const typeDocRegex = /<TypeDocProps\s+name=["']([^"']+)["'](?:\s+partial)?[^>]*\/>/g;
-    processedContent = processedContent.replace(
-      typeDocRegex,
-      (match, propsName) => {
-        const isPartial = /\spartial(?:\s|\/|>)/.test(match);
+function replaceTypeDocProps(docProps, verbose) {
+  return () => (tree, _file, done) => {
+    visit7(
+      tree,
+      "mdxJsxFlowElement",
+      (node, index, parent) => {
+        if (node?.name !== "TypeDocProps") {
+          return;
+        }
+        const nameAttr = node.attributes?.find(
+          (attr) => attr.type === "mdxJsxAttribute" && attr.name === "name"
+        );
+        const isPartial = node.attributes?.some(
+          (attr) => attr.type === "mdxJsxAttribute" && attr.name === "partial"
+        );
+        if (!docProps || !nameAttr) {
+          if (parent && index !== void 0) {
+            parent.children.splice(index, 1);
+          }
+          return;
+        }
+        const propsNames = extractNamesFromAttribute(nameAttr);
+        if (propsNames.length === 0) {
+          if (parent && index !== void 0) {
+            parent.children.splice(index, 1);
+          }
+          return;
+        }
+        const propsName = propsNames[0];
         const componentProps = docProps.props[propsName];
         if (!componentProps) {
           if (verbose) {
             console.log(`  TypeDocProps not found: ${propsName}`);
           }
-          return "";
+          if (parent && index !== void 0) {
+            parent.children.splice(index, 1);
+          }
+          return;
         }
-        const propsDoc = extractProps(componentProps, isPartial);
+        const propsDoc = extractProps(componentProps, Boolean(isPartial));
         if (verbose) {
           console.log(
             `  Replaced TypeDocProps ${propsName} with API documentation`
           );
         }
-        return `**Component Props:**
-\`\`\`json
-${JSON.stringify(propsDoc, null, 2)}
-\`\`\`
-`;
+        Object.assign(node, {
+          lang: "json",
+          meta: null,
+          type: "code",
+          value: JSON.stringify(propsDoc, null, 2)
+        });
       }
     );
-  } else {
-    processedContent = processedContent.replace(/<TypeDocProps\s+[^>]*\/>/g, "");
-  }
-  let demoRegex = /<(?:QdsDemo|CodeDemo|Demo)\s+[^>]*name="(\w+)"[^>]*\/>/g;
-  let demoMatches = Array.from(processedContent.matchAll(demoRegex));
-  if (!demoMatches.length) {
-    demoRegex = /<(?:QdsDemo|CodeDemo|Demo)\s+[^>]*node=\{Demo\.(\w+)\}[^>]*\/>/g;
-    demoMatches = Array.from(processedContent.matchAll(demoRegex));
-  }
-  const replacements = await Promise.all(
-    demoMatches.map(async (match) => {
-      const [fullMatch, demoName] = match;
-      const kebabName = kebabCase(demoName);
-      let filePath = `${kebabName}.tsx`;
-      if (!demosFolder) {
-        if (verbose) {
-          console.log(`  No demos folder for ${demoName}`);
-        }
-        return { match: fullMatch, replacement: "" };
-      }
-      let demoFilePath = join3(demosFolder, filePath);
-      let isAngularDemo = false;
-      if (!await exists(demoFilePath)) {
-        demoFilePath = join3(demosFolder, `${kebabName}.ts`);
-        if (await exists(demoFilePath)) {
-          isAngularDemo = true;
-          filePath = `${kebabCase(demoName).replace("-component", ".component")}.ts`;
-          demoFilePath = join3(demosFolder, filePath);
-        } else {
-          console.log(`  Demo not found ${demoName}`);
-          return { match: fullMatch, replacement: "" };
+    done();
+  };
+}
+function replaceDemos(demosFolder, verbose, demoFiles) {
+  return () => async (tree) => {
+    const promises = [];
+    visit7(
+      tree,
+      "mdxJsxFlowElement",
+      (node, index, parent) => {
+        if (!node?.name || !["QdsDemo", "CodeDemo", "Demo"].includes(node.name)) {
+          return;
         }
-      }
-      try {
-        const demoCode = await readFile(demoFilePath, "utf-8");
-        const cleanedCode = removePreviewLines(demoCode);
-        const codeBlock = `\`\`\`${isAngularDemo ? "angular-ts" : "tsx"}
-${cleanedCode}\`\`\``;
-        if (verbose) {
-          console.log(`  Replaced demo ${demoName} with source code`);
+        const nameAttr = node.attributes?.find(
+          (attr) => attr.type === "mdxJsxAttribute" && attr.name === "name"
+        );
+        const nodeAttr = node.attributes?.find(
+          (attr) => attr.type === "mdxJsxAttribute" && attr.name === "node"
+        );
+        let demoName;
+        if (nameAttr && typeof nameAttr.value === "string") {
+          demoName = nameAttr.value;
+        } else if (nodeAttr?.value && typeof nodeAttr.value !== "string") {
+          const estree = nodeAttr.value.data?.estree;
+          if (estree?.body?.[0]?.type === "ExpressionStatement") {
+            const expression = estree.body[0].expression;
+            if (expression.type === "MemberExpression" && expression.object.type === "Identifier" && expression.object.name === "Demo" && expression.property.type === "Identifier") {
+              demoName = expression.property.name;
+            }
+          }
         }
-        demoFiles.push(demoFilePath);
-        return { match: fullMatch, replacement: codeBlock };
-      } catch (error) {
-        if (verbose) {
-          console.log(`  Error reading demo ${demoName}: ${error}`);
+        if (!demoName) {
+          if (parent && index !== void 0) {
+            parent.children.splice(index, 1);
+          }
+          return;
         }
-        return { match: fullMatch, replacement: "" };
+        promises.push(
+          (async () => {
+            const kebabName = kebabCase(demoName);
+            let filePath = `${kebabName}.tsx`;
+            if (!demosFolder) {
+              if (verbose) {
+                console.log(`  No demos folder for ${demoName}`);
+              }
+              if (parent && index !== void 0) {
+                parent.children.splice(index, 1);
+              }
+              return;
+            }
+            let demoFilePath = join3(demosFolder, filePath);
+            let isAngularDemo = false;
+            if (!await exists(demoFilePath)) {
+              demoFilePath = join3(demosFolder, `${kebabName}.ts`);
+              if (await exists(demoFilePath)) {
+                isAngularDemo = true;
+                filePath = `${kebabCase(demoName).replace("-component", ".component")}.ts`;
+                demoFilePath = join3(demosFolder, filePath);
+              } else {
+                console.log(`  Demo not found ${demoName}`);
+                if (parent && index !== void 0) {
+                  parent.children.splice(index, 1);
+                }
+                return;
+              }
+            }
+            try {
+              const demoCode = await readFile(demoFilePath, "utf-8");
+              const cleanedCode = removePreviewLines(demoCode);
+              if (verbose) {
+                console.log(`  Replaced demo ${demoName} with source code`);
+              }
+              demoFiles.push(demoFilePath);
+              Object.assign(node, {
+                lang: isAngularDemo ? "angular-ts" : "tsx",
+                meta: null,
+                type: "code",
+                value: cleanedCode
+              });
+            } catch (error) {
+              if (verbose) {
+                console.log(`  Error reading demo ${demoName}: ${error}`);
+              }
+              if (parent && index !== void 0) {
+                parent.children.splice(index, 1);
+              }
+            }
+          })()
+        );
       }
-    })
-  );
-  for (const { match, replacement } of replacements) {
-    processedContent = processedContent.replace(match, replacement);
+    );
+    await Promise.all(promises);
+  };
+}
+async function processMdxContent(mdxContent, pageUrl, demosFolder, docProps, verbose) {
+  const demoFiles = [];
+  let processedContent = mdxContent;
+  const lines = processedContent.split("\n");
+  const titleLine = lines.findIndex((line) => line.startsWith("# "));
+  processedContent = titleLine >= 0 ? lines.slice(titleLine + 1).join("\n") : processedContent;
+  if (pageUrl) {
+    processedContent = processedContent.replace(
+      /\[([^\]]+)\]\(\.\/#([^)]+)\)/g,
+      (_, text, anchor) => `[${text}](${pageUrl}#${anchor})`
+    );
   }
+  const processor = unified4().use(remarkParse4).use(remarkMdx3).use(replaceTypeDocProps(docProps, verbose)).use(replaceDemos(demosFolder, verbose, demoFiles)).use(remarkStringify3);
+  const processed = await processor.process(processedContent);
+  processedContent = String(processed);
   processedContent = processedContent.replace(/\n\s*\n\s*\n/g, "\n\n");
   return { content: processedContent, demoFiles };
 }
@@ -6083,7 +6157,7 @@ async function generatePerPageExports({
           }
         }
       }
-      const outfile = `${resolve5(outputPath)}/${kebabCase(page.name)}.md`;
+      const outfile = `${resolve5(outputPath)}/${kebabCase(page.id)}.md`;
       await writeFile3(outfile, lines.join("\n"), "utf-8");
       const stats = await stat(outfile);
       totalSize += stats.size / 1024;
@@ -6365,7 +6439,7 @@ import { glob as glob3 } from "glob";
 import { uniqBy } from "lodash-es";
 import { writeFile as writeFile5 } from "node:fs/promises";
 import { resolve as resolve8 } from "node:path";
-import { dedent } from "@qualcomm-ui/utils/dedent";
+import { dedent as dedent2 } from "@qualcomm-ui/utils/dedent";
 
 // src/react-demo-plugin/demo-plugin-utils.ts
 import chalk4 from "chalk";
@@ -6409,7 +6483,7 @@ function generateLazyDemoLoader(demoPages) {
     return `  "${routePath}": () =>
     import("virtual:qui-demo-scope/page:${pageId}")`;
   }).sort().join(",\n");
-  return dedent`
+  return dedent2`
     /* eslint-disable */
 
     // This file is generated automatically. Don't edit it directly.