@mui/internal-markdown 1.0.18 → 1.0.20

package/loader.js

@@ -148,11 +148,12 @@ module.exports = async function demoLoader() {
    * @param {*} moduleFilepath
    * @param {*} variant
    * @param {*} importModuleID
+   * @returns {string} The name of the imported module along with a resolved extension if not provided
    * @example detectRelativeImports('ComboBox.js', '', JS', './top100Films') => relativeModules.set('ComboBox.js', new Map([['./top100Films.js', ['JS']]]))
    */
   function detectRelativeImports(demoName, moduleFilepath, variant, importModuleID) {
+    let relativeModuleFilename = importModuleID;
     if (importModuleID.startsWith('.')) {
-      let relativeModuleFilename = importModuleID;
       const demoMap = relativeModules.get(demoName);
       // If the moduleID does not end with an extension, or ends with an unsupported extension (e.g. ".styling") we need to resolve it
       // Fastest way to get a file extension, see: https://stackoverflow.com/a/12900504/
@@ -198,6 +199,27 @@ module.exports = async function demoLoader() {
         }
       }
     }
+    return relativeModuleFilename;
+  }
+
+  /**
+   * Inserts the moduleData into the relativeModules object
+   * @param string demoName
+   * @param {*} moduleData
+   * @param string variant
+   * @example updateRelativeModules(demoName, {module: 'constants.js', raw: ... }, 'JS') => demos[demoName].relativeModules[variant].push(moduleData)
+   */
+  function updateRelativeModules(demoName, moduleData, variant) {
+    if (demos[demoName].relativeModules[variant]) {
+      // Avoid duplicates
+      if (
+        !demos[demoName].relativeModules[variant].some((elem) => elem.module === moduleData.module)
+      ) {
+        demos[demoName].relativeModules[variant].push(moduleData);
+      }
+    } else {
+      demos[demoName].relativeModules[variant] = [moduleData];
+    }
   }
 
   await Promise.all(
@@ -438,32 +460,105 @@ module.exports = async function demoLoader() {
           demos[demoName].relativeModules = {};
         }
 
+        const addedModulesRelativeToModulePath = new Set();
         await Promise.all(
           Array.from(relativeModules.get(demoName)).map(async ([relativeModuleID, variants]) => {
-            let raw = '';
-            try {
-              raw = await fs.readFile(path.join(path.dirname(moduleFilepath), relativeModuleID), {
-                encoding: 'utf8',
-              });
-            } catch {
-              throw new Error(
-                `Could not find a module for the relative import "${relativeModuleID}" in the demo "${demoName}"`,
+            for (const variant of variants) {
+              let raw = '';
+              const relativeModuleFilePath = path.join(
+                path.dirname(moduleFilepath),
+                relativeModuleID,
               );
-            }
 
-            const moduleData = { module: relativeModuleID, raw };
-            const modules = demos[demoName].relativeModules;
+              // the file has already been processed
+              if (addedModulesRelativeToModulePath.has(relativeModuleFilePath)) {
+                continue;
+              }
 
-            variants.forEach((variant) => {
-              if (modules[variant]) {
-                // Avoid duplicates
-                if (!modules[variant].some((elem) => elem.module === relativeModuleID)) {
-                  modules[variant].push(moduleData);
+              try {
+                // We are only iterating trough an array that looks
+                // like this: ['JS', 'TS'], so  it is safe to await
+                // eslint-disable-next-line no-await-in-loop
+                raw = await fs.readFile(relativeModuleFilePath, {
+                  encoding: 'utf8',
+                });
+
+                const importedProcessedModuleIDs = new Set();
+                const importedProcessedModulesIDsParents = new Map();
+                // Find the relative paths in the relative module
+                extractImports(raw).forEach((importModuleID) => {
+                  // detect relative import
+                  const importModuleIdWithExtension = detectRelativeImports(
+                    relativeModuleID,
+                    relativeModuleFilePath,
+                    variant,
+                    importModuleID,
+                  );
+                  if (importModuleID.startsWith('.')) {
+                    importedProcessedModuleIDs.add(importModuleIdWithExtension);
+                    importedProcessedModulesIDsParents.set(
+                      importModuleIdWithExtension,
+                      relativeModuleFilePath,
+                    );
+                  }
+                });
+
+                updateRelativeModules(demoName, { module: relativeModuleID, raw }, variant);
+                addedModulesRelativeToModulePath.add(relativeModuleFilePath);
+
+                // iterate recursively over the relative imports
+                while (importedProcessedModuleIDs.size > 0) {
+                  for (const entry of importedProcessedModuleIDs) {
+                    if (entry.startsWith('.')) {
+                      const entryModuleFilePath = path.join(
+                        path.dirname(importedProcessedModulesIDsParents.get(entry)),
+                        entry,
+                      );
+
+                      // We are only iterating trough an array that looks
+                      // like this: ['JS', 'TS'], so  it is safe to await
+                      // eslint-disable-next-line no-await-in-loop
+                      const rawEntry = await fs.readFile(entryModuleFilePath, { encoding: 'utf8' });
+
+                      extractImports(rawEntry).forEach((importModuleID) => {
+                        // detect relative import
+                        const importModuleIdWithExtension = detectRelativeImports(
+                          relativeModuleID,
+                          entryModuleFilePath,
+                          variant,
+                          importModuleID,
+                        );
+                        if (importModuleID.startsWith('.')) {
+                          importedProcessedModuleIDs.add(importModuleIdWithExtension);
+                          importedProcessedModulesIDsParents.set(
+                            importModuleIdWithExtension,
+                            entryModuleFilePath,
+                          );
+                        }
+                      });
+
+                      if (!addedModulesRelativeToModulePath.has(entryModuleFilePath)) {
+                        const modulePathDirectory = moduleFilepath
+                          .split('/')
+                          .slice(0, -1)
+                          .join('/');
+                        const moduleData = {
+                          module: `.${entryModuleFilePath.replace(modulePathDirectory, '')}`,
+                          raw: rawEntry,
+                        };
+                        updateRelativeModules(demoName, moduleData, variant);
+                        addedModulesRelativeToModulePath.add(entryModuleFilePath);
+                      }
+                    }
+                    importedProcessedModuleIDs.delete(entry);
+                  }
                 }
-              } else {
-                modules[variant] = [moduleData];
+              } catch {
+                throw new Error(
+                  `Could not find a module for the relative import "${relativeModuleID}" in the demo "${demoName}"`,
+                );
               }
-            });
+            }
           }),
         );
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-markdown",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "author": "MUI Team",
   "description": "MUI markdown parser. This is an internal package not meant for general use.",
   "main": "./index.js",
@@ -16,9 +16,9 @@
     "directory": "packages/markdown"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "lodash": "^4.17.21",
-    "marked": "^14.1.3",
+    "marked": "^14.1.4",
     "prismjs": "^1.29.0"
   },
   "devDependencies": {

package/parseMarkdown.js

@@ -7,15 +7,8 @@ const prism = require('./prism');
  */
 const markedOptions = {
   gfm: true,
-  tables: true,
   breaks: false,
   pedantic: false,
-  sanitize: false,
-  smartLists: true,
-  smartypants: false,
-  headerPrefix: false,
-  headerIds: false,
-  mangle: false,
 };
 
 const headerRegExp = /---[\r\n]([\s\S]*)[\r\n]---/;

package/prepareMarkdown.js

@@ -102,6 +102,12 @@ function prepareMarkdown(config) {
         );
       }
 
+      if (description.slice(-1) !== '.' && description.slice(-1) !== '!') {
+        throw new Error(
+          `docs-infra: The description "${description}" should end with a "." or "!", those are sentences.`,
+        );
+      }
+
       const contents = getContents(markdown);
 
       if (headers.unstyled) {

package/prepareMarkdown.test.js

@@ -13,7 +13,7 @@ describe('prepareMarkdown', () => {
     const markdown = `
 # Support
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 ## Community help (free)
 ### GitHub <img src="/static/images/logos/github.svg" width="24" height="24" alt="GitHub logo" loading="lazy" />
@@ -64,7 +64,7 @@ describe('prepareMarkdown', () => {
     const markdown = `
 # Theming
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 ## API
 ### responsiveFontSizes(theme, options) => theme
@@ -105,7 +105,7 @@ describe('prepareMarkdown', () => {
     const markdownEn = `
 # Localization
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 ## Locales
 ### Example
@@ -115,7 +115,7 @@ describe('prepareMarkdown', () => {
     const markdownPt = `
 # Localização
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 ## Idiomas
 ### Exemplo
@@ -125,7 +125,7 @@ describe('prepareMarkdown', () => {
     const markdownZh = `
 # 所在位置
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 ## 语言环境
 ### 例
@@ -211,7 +211,7 @@ describe('prepareMarkdown', () => {
     const markdownEn = `
 # Localization
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 ## Locales
 ### Example
@@ -221,7 +221,7 @@ describe('prepareMarkdown', () => {
     const markdownPt = `
 # Localização
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 ## Idiomas
 ### Exemplo
@@ -292,7 +292,7 @@ describe('prepareMarkdown', () => {
     const markdown = `
 # Localization
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 [bar](/bar/)
 [foo](/foo)
@@ -314,7 +314,7 @@ See https://ahrefs.com/blog/trailing-slash/ for more details.
     const markdown = `
 # Localization
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 [bar](/bar/)
 [foo](foo/)
@@ -334,7 +334,7 @@ See https://ahrefs.com/blog/trailing-slash/ for more details.
     const markdown = `
 # Foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 `;
 
@@ -354,7 +354,7 @@ https://developers.google.com/search/docs/advanced/appearance/title-link
     const markdown = `
 # Foo
 
-<p class="description">Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
+<p class="description">Foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.</p>
 
 `;
 
@@ -364,7 +364,7 @@ https://developers.google.com/search/docs/advanced/appearance/title-link
         translations: [{ filename: 'index.md', markdown, userLanguage: 'en' }],
       });
     }).to
-      .throw(`docs-infra: The description "Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo" is too long (188 characters).
+      .throw(`docs-infra: The description "Foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo." is too long (188 characters).
 It needs to have fewer than 170 characters—ideally less than 160. For more details, see:
 https://ahrefs.com/blog/meta-description/#4-be-concise
 `);
@@ -374,7 +374,7 @@ https://ahrefs.com/blog/meta-description/#4-be-concise
     const markdown = `
 # Foo
 
-<p class="description">Fo</p>
+<p class="description">Fo.</p>
 
 \`\`\`sh
 npm install @mui/material
@@ -401,7 +401,7 @@ Use "bash" instead.
     const markdown = `
 # Localization
 
-<p class="description">Foo</p>
+<p class="description">Foo.</p>
 
 [foo](/foo/)
 [bar](/bar//#foo)