[docs] Able to load doc components inside markdown files (mui#34243)

docs/packages/markdown/loader.js

@@ -123,7 +123,9 @@ module.exports = async function demoLoader() {
   const { docs } = prepareMarkdown({ pageFilename, translations, componentPackageMapping });
 
   const demos = {};
+  const components = {};
   const demoModuleIDs = new Set();
+  const componentModuleIDs = new Set();
   const demoNames = Array.from(
     new Set(
       docs.en.rendered
@@ -145,6 +147,7 @@ module.exports = async function demoLoader() {
         `pages/${pageFilename.replace(/^\/src\/pages\//, '')}/`,
         '',
       )}`;
+
       const moduleFilepath = path.join(
         path.dirname(this.resourcePath),
         moduleID.replace(/\//g, path.sep),
@@ -187,27 +190,51 @@ module.exports = async function demoLoader() {
     }),
   );
 
-  /**
-   * @param {string} moduleID
-   */
-  function getDemoIdentifier(moduleID) {
-    return moduleIDToJSIdentifier(moduleID);
-  }
+  const componentNames = Array.from(
+    new Set(
+      docs.en.rendered
+        .filter((markdownOrComponentConfig) => {
+          return (
+            typeof markdownOrComponentConfig !== 'string' && markdownOrComponentConfig.component
+          );
+        })
+        .map((componentConfig) => {
+          return componentConfig.component;
+        }),
+    ),
+  );
+
+  componentNames.forEach((componentName) => {
+    const moduleID = path.join(this.rootContext, 'src', componentName);
+
+    components[moduleID] = componentName;
+    componentModuleIDs.add(moduleID);
+  });
 
   const transformed = `
     ${Array.from(demoModuleIDs)
       .map((moduleID) => {
-        return `import ${getDemoIdentifier(moduleID)} from '${moduleID}';`;
+        return `import ${moduleIDToJSIdentifier(moduleID)} from '${moduleID}';`;
+      })
+      .join('\n')}
+    ${Array.from(componentModuleIDs)
+      .map((moduleID) => {
+        return `import ${moduleIDToJSIdentifier(moduleID)} from '${moduleID}';`;
       })
       .join('\n')}
 
     export const docs = ${JSON.stringify(docs, null, 2)};
     export const demos = ${JSON.stringify(demos, null, 2)};
     export const demoComponents = {${Array.from(demoModuleIDs)
       .map((moduleID) => {
-        return `${JSON.stringify(moduleID)}: ${getDemoIdentifier(moduleID)},`;
+        return `${JSON.stringify(moduleID)}: ${moduleIDToJSIdentifier(moduleID)},`;
       })
       .join('\n')}};
+        export const srcComponents = {${Array.from(componentModuleIDs)
+          .map((moduleID) => {
+            return `${JSON.stringify(components[moduleID])}: ${moduleIDToJSIdentifier(moduleID)},`;
+          })
+          .join('\n')}};
   `;
 
   return transformed;

docs/pages/base/getting-started/customization.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/getting-started/customization/customization.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/getting-started/installation.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/getting-started/installation/installation.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/installation/installation.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/getting-started/overview.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/getting-started/overview/overview.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/overview/overview.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/getting-started/usage.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/getting-started/usage/usage.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/usage/usage.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/guides/working-with-tailwind-css.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-badge.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/badge/badge.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/badge/badge.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-button.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/button/button.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/button/button.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-click-away-listener.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/click-away-listener/click-away-listener.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-focus-trap.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/focus-trap/focus-trap.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-form-control.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/form-control/form-control.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/form-control/form-control.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-input.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/input/input.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/input/input.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-menu.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { demos, docs, demoComponents } from 'docs/data/base/components/menu/menu.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/menu/menu.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-modal.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/modal/modal.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/modal/modal.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-no-ssr.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/no-ssr/no-ssr.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-popper.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/popper/popper.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/popper/popper.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-portal.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/portal/portal.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/portal/portal.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-select.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/select/select.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/select/select.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-slider.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/slider/slider.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/slider/slider.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-switch.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/switch/switch.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/switch/switch.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-table-pagination.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/table-pagination/table-pagination.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-tabs.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { demos, docs, demoComponents } from 'docs/data/base/components/tabs/tabs.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/tabs/tabs.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/base/react-textarea-autosize.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <MarkdownDocs {...pageProps} />;
 }

docs/pages/careers/fullstack-engineer.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import {
-  demos,
-  docs,
-  demoComponents,
-} from 'docs/src/pages/careers/full-stack-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/src/pages/careers/full-stack-engineer.md?@mui/markdown';
 
 export default function Page() {
-  return <TopLayoutCareers demos={demos} docs={docs} demoComponents={demoComponents} />;
+  return <TopLayoutCareers {...pageProps} />;
 }