@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/renderables/Code.ts

@@ -0,0 +1,357 @@
+import { type RenderContext } from "../types.js"
+import { StyledText } from "../lib/styled-text.js"
+import { SyntaxStyle } from "../syntax-style.js"
+import { getTreeSitterClient, treeSitterToStyledText, TreeSitterClient } from "../lib/tree-sitter/index.js"
+import { TextBufferRenderable, type TextBufferOptions } from "./TextBufferRenderable.js"
+import type { OptimizedBuffer } from "../buffer.js"
+import type { SimpleHighlight } from "../lib/tree-sitter/types.js"
+import type { TextChunk } from "../text-buffer.js"
+import { treeSitterToTextChunks } from "../lib/tree-sitter-styled-text.js"
+
+export interface HighlightContext {
+  content: string
+  filetype: string
+  syntaxStyle: SyntaxStyle
+}
+
+export type OnHighlightCallback = (
+  highlights: SimpleHighlight[],
+  context: HighlightContext,
+) => SimpleHighlight[] | undefined | Promise<SimpleHighlight[] | undefined>
+
+export interface ChunkRenderContext extends HighlightContext {
+  highlights: SimpleHighlight[]
+}
+
+export type OnChunksCallback = (
+  chunks: TextChunk[],
+  context: ChunkRenderContext,
+) => TextChunk[] | undefined | Promise<TextChunk[] | undefined>
+
+export interface CodeOptions extends TextBufferOptions {
+  content?: string
+  filetype?: string
+  syntaxStyle: SyntaxStyle
+  treeSitterClient?: TreeSitterClient
+  conceal?: boolean
+  drawUnstyledText?: boolean
+  streaming?: boolean
+  onHighlight?: OnHighlightCallback
+  onChunks?: OnChunksCallback
+}
+
+export class CodeRenderable extends TextBufferRenderable {
+  private _content: string
+  private _filetype?: string
+  private _syntaxStyle: SyntaxStyle
+  private _isHighlighting: boolean = false
+  private _treeSitterClient: TreeSitterClient
+  private _highlightsDirty: boolean = false
+  private _highlightSnapshotId: number = 0
+  private _conceal: boolean
+  private _drawUnstyledText: boolean
+  private _shouldRenderTextBuffer: boolean = true
+  private _streaming: boolean
+  private _hadInitialContent: boolean = false
+  private _lastHighlights: SimpleHighlight[] = []
+  private _onHighlight?: OnHighlightCallback
+  private _onChunks?: OnChunksCallback
+  private _highlightingPromise: Promise<void> = Promise.resolve()
+
+  protected _contentDefaultOptions = {
+    content: "",
+    conceal: true,
+    drawUnstyledText: true,
+    streaming: false,
+  } satisfies Partial<CodeOptions>
+
+  constructor(ctx: RenderContext, options: CodeOptions) {
+    super(ctx, options)
+
+    this._content = options.content ?? this._contentDefaultOptions.content
+    this._filetype = options.filetype
+    this._syntaxStyle = options.syntaxStyle
+    this._treeSitterClient = options.treeSitterClient ?? getTreeSitterClient()
+    this._conceal = options.conceal ?? this._contentDefaultOptions.conceal
+    this._drawUnstyledText = options.drawUnstyledText ?? this._contentDefaultOptions.drawUnstyledText
+    this._streaming = options.streaming ?? this._contentDefaultOptions.streaming
+    this._onHighlight = options.onHighlight
+    this._onChunks = options.onChunks
+
+    if (this._content.length > 0) {
+      this.textBuffer.setText(this._content)
+      this.updateTextInfo()
+      this._shouldRenderTextBuffer = this._drawUnstyledText || !this._filetype
+    }
+
+    this._highlightsDirty = this._content.length > 0
+  }
+
+  get content(): string {
+    return this._content
+  }
+
+  set content(value: string) {
+    if (this._content !== value) {
+      this._content = value
+      this._highlightsDirty = true
+      this._highlightSnapshotId++
+
+      if (this._streaming && !this._drawUnstyledText && this._filetype) {
+        return
+      }
+
+      this.textBuffer.setText(value)
+      this.updateTextInfo()
+    }
+  }
+
+  get filetype(): string | undefined {
+    return this._filetype
+  }
+
+  set filetype(value: string | undefined) {
+    if (this._filetype !== value) {
+      this._filetype = value
+      this._highlightsDirty = true
+    }
+  }
+
+  get syntaxStyle(): SyntaxStyle {
+    return this._syntaxStyle
+  }
+
+  set syntaxStyle(value: SyntaxStyle) {
+    if (this._syntaxStyle !== value) {
+      this._syntaxStyle = value
+      this._highlightsDirty = true
+    }
+  }
+
+  get conceal(): boolean {
+    return this._conceal
+  }
+
+  set conceal(value: boolean) {
+    if (this._conceal !== value) {
+      this._conceal = value
+      this._highlightsDirty = true
+    }
+  }
+
+  get drawUnstyledText(): boolean {
+    return this._drawUnstyledText
+  }
+
+  set drawUnstyledText(value: boolean) {
+    if (this._drawUnstyledText !== value) {
+      this._drawUnstyledText = value
+      this._highlightsDirty = true
+    }
+  }
+
+  get streaming(): boolean {
+    return this._streaming
+  }
+
+  set streaming(value: boolean) {
+    if (this._streaming !== value) {
+      this._streaming = value
+      this._hadInitialContent = false
+      this._lastHighlights = []
+      this._highlightsDirty = true
+    }
+  }
+
+  get treeSitterClient(): TreeSitterClient {
+    return this._treeSitterClient
+  }
+
+  set treeSitterClient(value: TreeSitterClient) {
+    if (this._treeSitterClient !== value) {
+      this._treeSitterClient = value
+      this._highlightsDirty = true
+    }
+  }
+
+  get onHighlight(): OnHighlightCallback | undefined {
+    return this._onHighlight
+  }
+
+  set onHighlight(value: OnHighlightCallback | undefined) {
+    if (this._onHighlight !== value) {
+      this._onHighlight = value
+      this._highlightsDirty = true
+    }
+  }
+
+  get onChunks(): OnChunksCallback | undefined {
+    return this._onChunks
+  }
+
+  set onChunks(value: OnChunksCallback | undefined) {
+    if (this._onChunks !== value) {
+      this._onChunks = value
+      this._highlightsDirty = true
+    }
+  }
+
+  get isHighlighting(): boolean {
+    return this._isHighlighting
+  }
+
+  get highlightingDone(): Promise<void> {
+    return this._highlightingPromise
+  }
+
+  protected async transformChunks(chunks: TextChunk[], context: ChunkRenderContext): Promise<TextChunk[]> {
+    if (!this._onChunks) return chunks
+
+    const modified = await this._onChunks(chunks, context)
+    return modified ?? chunks
+  }
+
+  private ensureVisibleTextBeforeHighlight(): void {
+    if (this.isDestroyed) return
+
+    const content = this._content
+
+    if (!this._filetype) {
+      this._shouldRenderTextBuffer = true
+      return
+    }
+
+    const isInitialContent = this._streaming && !this._hadInitialContent
+    const shouldDrawUnstyledNow = this._streaming ? isInitialContent && this._drawUnstyledText : this._drawUnstyledText
+
+    if (this._streaming && !isInitialContent) {
+      this._shouldRenderTextBuffer = true
+    } else if (shouldDrawUnstyledNow) {
+      this.textBuffer.setText(content)
+      this._shouldRenderTextBuffer = true
+    } else {
+      this._shouldRenderTextBuffer = false
+    }
+  }
+
+  private async startHighlight(): Promise<void> {
+    const content = this._content
+    const filetype = this._filetype
+    const snapshotId = ++this._highlightSnapshotId
+
+    if (!filetype) return
+
+    const isInitialContent = this._streaming && !this._hadInitialContent
+    if (isInitialContent) {
+      this._hadInitialContent = true
+    }
+
+    this._isHighlighting = true
+
+    try {
+      const result = await this._treeSitterClient.highlightOnce(content, filetype)
+
+      if (snapshotId !== this._highlightSnapshotId) {
+        return
+      }
+
+      if (this.isDestroyed) return
+
+      let highlights = result.highlights ?? []
+
+      if (this._onHighlight && highlights.length >= 0) {
+        const context: HighlightContext = {
+          content,
+          filetype,
+          syntaxStyle: this._syntaxStyle,
+        }
+        const modified = await this._onHighlight(highlights, context)
+        if (modified !== undefined) {
+          highlights = modified
+        }
+      }
+
+      if (snapshotId !== this._highlightSnapshotId) {
+        return
+      }
+
+      if (this.isDestroyed) return
+
+      if (highlights.length > 0) {
+        if (this._streaming) {
+          this._lastHighlights = highlights
+        }
+      }
+
+      if (highlights.length > 0 || this._onChunks) {
+        const context: ChunkRenderContext = {
+          content,
+          filetype,
+          syntaxStyle: this._syntaxStyle,
+          highlights,
+        }
+
+        let chunks = treeSitterToTextChunks(content, highlights, this._syntaxStyle, {
+          enabled: this._conceal,
+        })
+
+        chunks = await this.transformChunks(chunks, context)
+
+        if (snapshotId !== this._highlightSnapshotId) {
+          return
+        }
+
+        if (this.isDestroyed) return
+
+        const styledText = new StyledText(chunks)
+        this.textBuffer.setStyledText(styledText)
+      } else {
+        this.textBuffer.setText(content)
+      }
+
+      this._shouldRenderTextBuffer = true
+      this._isHighlighting = false
+      this._highlightsDirty = false
+      this.updateTextInfo()
+      this.requestRender()
+    } catch (error) {
+      if (snapshotId !== this._highlightSnapshotId) {
+        return
+      }
+
+      console.warn("Code highlighting failed, falling back to plain text:", error)
+      if (this.isDestroyed) return
+      this.textBuffer.setText(content)
+      this._shouldRenderTextBuffer = true
+      this._isHighlighting = false
+      this._highlightsDirty = false
+      this.updateTextInfo()
+      this.requestRender()
+    }
+  }
+
+  public getLineHighlights(lineIdx: number) {
+    return this.textBuffer.getLineHighlights(lineIdx)
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer): void {
+    if (this._highlightsDirty) {
+      if (this.isDestroyed) return
+
+      if (this._content.length === 0) {
+        this._shouldRenderTextBuffer = false
+        this._highlightsDirty = false
+      } else if (!this._filetype) {
+        this._shouldRenderTextBuffer = true
+        this._highlightsDirty = false
+      } else {
+        this.ensureVisibleTextBeforeHighlight()
+        this._highlightsDirty = false
+        this._highlightingPromise = this.startHighlight()
+      }
+    }
+
+    if (!this._shouldRenderTextBuffer) return
+    super.renderSelf(buffer)
+  }
+}

package/src/renderables/Diff.regression.test.ts

@@ -0,0 +1,226 @@
+import { test, expect, beforeEach, afterEach } from "bun:test"
+import { DiffRenderable } from "./Diff.js"
+import { SyntaxStyle } from "../syntax-style.js"
+import { RGBA } from "../lib/RGBA.js"
+import { createTestRenderer, type TestRenderer } from "../testing.js"
+import { ManualClock } from "../testing/manual-clock.js"
+import { MockTreeSitterClient } from "../testing/mock-tree-sitter-client.js"
+import type { SimpleHighlight } from "../lib/tree-sitter/types.js"
+import { BoxRenderable } from "./Box.js"
+import { settleDiffHighlighting } from "./__tests__/renderable-test-utils.js"
+
+let currentRenderer: TestRenderer
+let renderOnce: () => Promise<void>
+let captureFrame: () => string
+let mockClient: MockTreeSitterClient
+let clock: ManualClock
+
+beforeEach(async () => {
+  mockClient = new MockTreeSitterClient()
+  clock = new ManualClock()
+
+  const testRenderer = await createTestRenderer({
+    width: 32,
+    height: 10,
+    gatherStats: true,
+    clock,
+  })
+  currentRenderer = testRenderer.renderer
+  renderOnce = testRenderer.renderOnce
+  captureFrame = testRenderer.captureCharFrame
+})
+
+afterEach(async () => {
+  if (currentRenderer) {
+    currentRenderer.destroy()
+  }
+})
+
+// When highlights conceal formatting characters (like **), line lengths change,
+// potentially triggering wrapping changes, height changes, and onResize.
+// This test ensures onResize doesn't cause content resets that create endless loops.
+test("DiffRenderable - no endless loop when concealing markdown formatting", async () => {
+  const syntaxStyle = SyntaxStyle.fromStyles({
+    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
+  })
+
+  const markdownDiff = `--- a/test.md
++++ b/test.md
+@@ -1,2 +1,2 @@
+-Some text **boldtext**
+-Short
++Some text **boldtext**
++More text **formats**`
+
+  const mockHighlights: SimpleHighlight[] = [
+    [10, 11, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [11, 12, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [20, 21, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [21, 22, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [33, 34, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [34, 35, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [42, 43, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [43, 44, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+  ]
+
+  mockClient.setMockResult({ highlights: mockHighlights })
+
+  const box = new BoxRenderable(currentRenderer, {
+    id: "background-box",
+    border: true,
+  })
+
+  const diffRenderable = new DiffRenderable(currentRenderer, {
+    id: "test-diff",
+    diff: markdownDiff,
+    syntaxStyle,
+    filetype: "markdown",
+    conceal: true,
+    treeSitterClient: mockClient,
+  })
+
+  box.add(diffRenderable)
+  currentRenderer.root.add(box)
+
+  await renderOnce()
+  diffRenderable.view = "split"
+
+  await renderOnce()
+  diffRenderable.wrapMode = "word"
+
+  await settleDiffHighlighting(diffRenderable, mockClient, renderOnce)
+
+  const stats = currentRenderer.getStats()
+  expect(stats.frameCount).toBeLessThan(25)
+})
+
+// Tests that line numbers align correctly and gutter heights are properly sized
+// when switching between view modes and wrap modes in split view
+test("DiffRenderable - line number alignment and gutter heights in split view with wrapping", async () => {
+  const syntaxStyle = SyntaxStyle.fromStyles({
+    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
+  })
+
+  const markdownDiff = `--- a/test.md
++++ b/test.md
+@@ -1,2 +1,2 @@
+-Some text **boldtext**
+-Short
++Some text **boldtext**
++More text **formats**`
+
+  const mockHighlights: SimpleHighlight[] = [
+    [10, 11, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [11, 12, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [20, 21, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [21, 22, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [33, 34, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [34, 35, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [42, 43, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+    [43, 44, "conceal", { isInjection: true, injectionLang: "markdown_inline", conceal: "" }],
+  ]
+
+  mockClient.setMockResult({ highlights: mockHighlights })
+
+  const box = new BoxRenderable(currentRenderer, {
+    id: "background-box",
+    border: true,
+  })
+
+  const diffRenderable = new DiffRenderable(currentRenderer, {
+    id: "test-diff",
+    diff: markdownDiff,
+    syntaxStyle,
+    filetype: "markdown",
+    conceal: true,
+    treeSitterClient: mockClient,
+  })
+
+  box.add(diffRenderable)
+  currentRenderer.root.add(box)
+
+  await renderOnce()
+  const unifiedFrame = captureFrame()
+
+  expect(unifiedFrame).toContain("1 - Some text")
+  expect(unifiedFrame).toContain("2 - Short")
+  expect(unifiedFrame).toContain("1 + Some text")
+  expect(unifiedFrame).toContain("2 + More text")
+
+  diffRenderable.view = "split"
+  await renderOnce()
+  const splitFrame = captureFrame()
+
+  expect(splitFrame).toContain("1 - Some text")
+  expect(splitFrame).toContain("1 + Some text")
+  expect(splitFrame).toContain("2 - Short")
+  expect(splitFrame).toContain("2 + More text")
+
+  // First wrapMode toggle: none → word
+  diffRenderable.wrapMode = "word"
+  await settleDiffHighlighting(diffRenderable, mockClient, renderOnce)
+  const splitWrapFrame = captureFrame()
+
+  const diffChildren = diffRenderable.getChildren()
+  const lines = splitWrapFrame.split("\n")
+
+  let leftLine2Row = -1
+  let rightLine2Row = -1
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (line.includes("2 - Short")) {
+      leftLine2Row = i
+    }
+    if (line.includes("2 + More")) {
+      rightLine2Row = i
+    }
+  }
+
+  expect(leftLine2Row).toBeGreaterThan(-1)
+  expect(rightLine2Row).toBeGreaterThan(-1)
+  expect(leftLine2Row).toBe(rightLine2Row)
+  const leftSide = diffChildren[0]
+  const rightSide = diffChildren[1]
+  const leftGutter = leftSide.getChildren()[0]
+  const rightGutter = rightSide.getChildren()[0]
+  const leftCode = leftSide.getChildren()[1]
+  const rightCode = rightSide.getChildren()[1]
+
+  const leftVisualLines = (leftCode as any).lineInfo?.lineSources?.length || 0
+  const rightVisualLines = (rightCode as any).lineInfo?.lineSources?.length || 0
+
+  expect(leftVisualLines).toBe(rightVisualLines)
+  expect(leftGutter.height).toBe(leftVisualLines)
+  expect(rightGutter.height).toBe(rightVisualLines)
+
+  // Second wrapMode toggle: word → none → word
+  diffRenderable.wrapMode = "none"
+  await renderOnce()
+  diffRenderable.wrapMode = "word"
+  await settleDiffHighlighting(diffRenderable, mockClient, renderOnce)
+  const splitWrapFrame2 = captureFrame()
+  const lines2 = splitWrapFrame2.split("\n")
+  let leftLine2Row2 = -1
+  let rightLine2Row2 = -1
+
+  for (let i = 0; i < lines2.length; i++) {
+    const line = lines2[i]
+    if (line.includes("2 - Short")) {
+      leftLine2Row2 = i
+    }
+    if (line.includes("2 + More")) {
+      rightLine2Row2 = i
+    }
+  }
+
+  expect(leftLine2Row2).toBeGreaterThan(-1)
+  expect(rightLine2Row2).toBeGreaterThan(-1)
+  expect(leftLine2Row2).toBe(rightLine2Row2)
+
+  expect(splitWrapFrame2).toContain("1 - Some text")
+  expect(splitWrapFrame2).toContain("boldtext")
+  expect(splitWrapFrame2).toContain("2 - Short")
+  expect(splitWrapFrame2).toContain("2 + More text")
+  expect(splitWrapFrame2).toContain("formats")
+})