Class CodeBlock

packages/2d/src/lib/components/CodeBlock.ts:49–469

 */
@nodeName('CodeBlock')
export class CodeBlock extends Shape {
  private static initialized = createComputedAsync(
    () => ready().then(() => true),
    false,
  );

  @initial('tsx')
  @signal()
  public declare readonly language: SimpleSignal<string, this>;

  @initial('')
  @parser(function (this: CodeBlock, value: Code): CodeTree {
    return typeof value === 'string'
      ? {
          language: this.language(),
          spans: [value],
          nodes: [],
        }
      : value;
  })
  @signal()
  public declare readonly code: Signal<Code, CodeTree, this>;

  @initial(undefined)
  @signal()
  public declare readonly theme: Signal<CodeStyle | null, CodeStyle, this>;

  @initial(lines(0, Infinity))
  @signal()
  public declare readonly selection: SimpleSignal<CodeRange[], this>;

  protected *tweenSelection(
    value: CodeRange[],
    duration: number,
    timingFunction: TimingFunction,
  ): ThreadGenerator {
    this.oldSelection = this.selection();
    this.selection(value);
    this.selectionProgress(0);
    yield* this.selectionProgress(1, duration, timingFunction);
    this.selectionProgress(null);
    this.oldSelection = null;
  }

  @initial(0.32)
  @signal()
  public declare readonly unselectedOpacity: SimpleSignal<number, this>;

  private codeProgress = createSignal<number | null>(null);
  private selectionProgress = createSignal<number | null>(null);
  private oldSelection: CodeRange[] | null = null;
  private diffed: MorphToken[] | null = null;
  private currentLineCount = 0;
  private newLineCount = 0;

  protected getLineCountOfTokenArray(tokens: Token[]): number {
    let count = 0;