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 '@fairgarden/docs/pipeline/parseSource';
import { CodeHighlighter } from '@fairgarden/docs/CodeHighlighter';
import { CodeProvider } from '@fairgarden/docs/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>
  );
}