[docs] POC: wire @mui/internal-docs-infra types pipeline into API pages

docs/next.config.ts

@@ -5,6 +5,7 @@ import * as semver from 'semver';
 import { createRequire } from 'module';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { withDeploymentConfig } from '@mui/internal-docs-infra/withDocsInfra';
+import type { LoaderOptions as PrecomputedTypesLoaderOptions } from '@mui/internal-docs-infra/pipeline/loadPrecomputedTypes';
 import { findPages } from './src/modules/utils/find';
 import { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config';
 import { SOURCE_CODE_REPO, SOURCE_GITHUB_BRANCH } from './constants';
@@ -78,6 +79,7 @@ export default withDeploymentConfig({
     // TODO, those shouldn't be needed in the first place
     '@mui/monorepo', // Migrate everything to @mui/internal-core-docs until the @mui/monorepo dependency becomes obsolete
     '@mui/internal-core-docs', // needed to fix slashes in the generated links (https://github.com/mui/mui-x/pull/13713#issuecomment-2205591461, )
+    '@mui/internal-docs-infra', // TEMP: local link points at ../mui-public/packages/docs-infra source tree
   ],
   // Avoid conflicts with the other Next.js apps hosted under https://mui.com/
   assetPrefix: process.env.DEPLOY_ENV === 'development' ? undefined : '/x',
@@ -132,6 +134,11 @@ export default withDeploymentConfig({
           ),
           docs: path.resolve(MONOREPO_PATH, './docs'),
           docsx: path.resolve(currentDirectory, '../docs'),
+          // TEMP: force React dedupe so linked @mui/internal-docs-infra doesn't
+          // load its own React copy (breaks hooks with "Cannot read properties
+          // of null (reading 'useMemo')").
+          react: path.resolve(currentDirectory, 'node_modules/react'),
+          'react-dom': path.resolve(currentDirectory, 'node_modules/react-dom'),
         },
       },
       module: {
@@ -166,6 +173,20 @@ export default withDeploymentConfig({
             include: [/(@mui[\\/]monorepo)$/, /(@mui[\\/]monorepo)[\\/](?!.*node_modules)/],
             use: options.defaultLoaders.babel,
           },
+          // New types pipeline (POC) — intercept `types.*.ts` next to API pages and
+          // precompute props metadata at build time via the docs-infra loader.
+          {
+            test: /[/\\]docs[/\\]pages[/\\]x[/\\]api[/\\].+[/\\]types\..*\.ts$/,
+            use: [
+              options.defaultLoaders.babel,
+              {
+                loader: '@mui/internal-docs-infra/pipeline/loadPrecomputedTypes',
+                options: {
+                  socketDir: '.next/docs-infra',
+                } satisfies PrecomputedTypesLoaderOptions,
+              },
+            ],
+          },
           {
             test: /\.(ts|tsx)$/,
             loader: 'string-replace-loader',

docs/package.json

@@ -9,6 +9,7 @@
     "dev": "cross-env-shell 'next dev --webpack --port ${PORT:-3001}'",
     "deploy": "git fetch upstream master && git push -f upstream FETCH_HEAD:docs-v9",
     "icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js",
+    "internal-validate": "docs-infra validate",
     "serve": "serve ./export -l 3010",
     "create-playground": "node ./scripts/createPlayground.js",
     "typescript": "tsc -p tsconfig.json",

docs/pages/x/api/charts/animated-area.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './animated-area.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAnimatedArea } from './types.animated-area';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['skipAnimation'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/animated-area',
-    false,
-    /\.\/animated-area.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AnimatedArea" allowedProps={allowedProps}>
+      <TypesAnimatedArea />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/animated-line.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './animated-line.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAnimatedLine } from './types.animated-line';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['skipAnimation'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/animated-line',
-    false,
-    /\.\/animated-line.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AnimatedLine" allowedProps={allowedProps}>
+      <TypesAnimatedLine />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/area-element.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './area-element.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAreaElement } from './types.area-element';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/area-element',
-    false,
-    /\.\/area-element.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AreaElement" allowedProps={allowedProps}>
+      <TypesAreaElement />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/area-plot.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './area-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAreaPlot } from './types.area-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['onItemClick', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/area-plot',
-    false,
-    /\.\/area-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AreaPlot" allowedProps={allowedProps}>
+      <TypesAreaPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/axis-config.js

@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './axis-config.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAxisConfig } from './types.axis-config';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/axis-config.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AxisConfig" allowedProps={allowedProps}>
+      <TypesAxisConfig />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/bar-chart-premium.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-chart-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarChartPremium } from './types.bar-chart-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'initialZoom', 'layout', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-chart-premium',
-    false,
-    /\.\/bar-chart-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarChartPremium" allowedProps={allowedProps}>
+      <TypesBarChartPremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/bar-chart-pro.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-chart-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarChartPro } from './types.bar-chart-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'initialZoom', 'layout', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-chart-pro',
-    false,
-    /\.\/bar-chart-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarChartPro" allowedProps={allowedProps}>
+      <TypesBarChartPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/bar-chart.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarChart } from './types.bar-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'layout', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-chart',
-    false,
-    /\.\/bar-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarChart" allowedProps={allowedProps}>
+      <TypesBarChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/bar-element.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-element.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarElement } from './types.bar-element';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-element',
-    false,
-    /\.\/bar-element.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarElement" allowedProps={allowedProps}>
+      <TypesBarElement />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/bar-label.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-label.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarLabel } from './types.bar-label';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['height', 'hidden', 'placement', 'width', 'x', 'xOrigin', 'y', 'yOrigin'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-label',
-    false,
-    /\.\/bar-label.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarLabel" allowedProps={allowedProps}>
+      <TypesBarLabel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }

docs/pages/x/api/charts/bar-plot.js

@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarPlot } from './types.bar-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['borderRadius', 'className', 'onItemClick', 'renderer', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-plot',
-    false,
-    /\.\/bar-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarPlot" allowedProps={allowedProps}>
+      <TypesBarPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }