MUI Docs Infra

Warning

This is an internal project, and is not intended for public use. No support or stability guarantees are provided.

Benchmarking Code Controller Context

This demo showcases the performance of the CodeControllerContext component when handling large code snippets. It uses RSC to highlight the initial code, and then highlights updates on the client side as the code is edited.

import * as React from 'react';
import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
import { CodeController } from './CodeController';
import { CodeEditorContent } from './CodeEditorContent';

import code from './snippet';

const sourceParser = createParseSource();

export default function Page() {
  return (
    <CodeProvider>
      <CodeController>
        <CodeHighlighter
          Content={CodeEditorContent}
          controlled
          sourceParser={sourceParser}
          fileName="large-file.js"
        >
          {code}
        </CodeHighlighter>
      </CodeController>
    </CodeProvider>
  );
}