[docs-infra] Add Benchmarking Pages to Docs

docs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

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/)