[docs-infra] Add Benchmarking Pages to Docs

docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContent.module.css

@@ -0,0 +1,14 @@
+.code {
+  margin: 1rem 0;
+  background: #fdfcfe;
+  border: 1px solid #d0cdd7;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+.codeBlock {
+  margin: 0;
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}

docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContent.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+
+import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { useCode } from '@mui/internal-docs-infra/useCode';
+
+import styles from './CodeContent.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+export function CodeContent(props: ContentProps<{}>) {
+  const code = useCode(props, { preClassName: styles.codeBlock });
+
+  return <div className={styles.code}>{code.selectedFile}</div>;
+}

docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContentLoading.tsx

@@ -0,0 +1,17 @@
+import 'server-only';
+
+import * as React from 'react';
+import type { ContentLoadingProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import styles from './CodeContent.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+export function CodeContentLoading(props: ContentLoadingProps<{}>) {
+  return (
+    <div>
+      <div className={styles.code}>
+        <pre className={styles.codeBlock}>{props.source}</pre>
+      </div>
+    </div>
+  );
+}

docs/app/bench/docs-infra/components/code-highlighter/demos/code/index.ts

@@ -0,0 +1,4 @@
+import { createDemoPerformance } from '@/functions/createDemoPerformance';
+import Page from './page';
+
+export const DemoCodeHighlighterPerformance = createDemoPerformance(import.meta.url, Page);

docs/app/bench/docs-infra/components/code-highlighter/demos/code/page.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+
+import { CodeContent } from '../CodeContent';
+import { CodeContentLoading } from '../CodeContentLoading';
+
+import code from '../../snippets/large/snippet';
+
+const sourceParser = createParseSource();
+
+export default function Page() {
+  return (
+    <CodeHighlighter
+      Content={CodeContent}
+      ContentLoading={CodeContentLoading}
+      sourceParser={sourceParser}
+      fileName="large-file.js"
+    >
+      {code}
+    </CodeHighlighter>
+  );
+}

docs/app/bench/docs-infra/components/code-highlighter/page.mdx

@@ -0,0 +1,9 @@
+# Benchmarking Code Highlighter
+
+This demo showcases the performance of the [`CodeHighlighter`](../../../../docs-infra/components/code-highlighter/page.mdx) component when handling large code snippets. It uses RSC to highlight the code.
+
+import { DemoCodeHighlighterPerformance } from './demos/code';
+
+<DemoCodeHighlighterPerformance />
+
+[See Setup](./demos/code/)