@pierre/diffs 1.0.10 → 1.1.0-beta.10

package/dist/components/File.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"File.d.ts","names":["options: FileOptions<LAnnotation>","workerManager?: WorkerPoolManager | undefined"],"sources":["../../src/components/File.ts"],"sourcesContent":[],"mappings":";;;;;;;UA2CiB;QACT;kBACU;EAFlB,gBAAiB,CAAA,EAGI,WAHJ;EACT,WAAA,CAAA,EAAA,OAAA;EACU,eAAA,CAAA,EAGE,cAHF,CAGiB,WAHjB,CAAA,EAAA;;AAGiB,UAGlB,gBAHkB,CAAA,WAAA,CAAA,SAIzB,IAJyB,CAIpB,eAJoB,CAIJ,WAJI,CAAA,EAAA,eAAA,CAAA,CAAA;EAAf,aAAA,EAKH,WALG;EAAA,eAAA,CAAA,EAAA,MAAA;AAGpB;AAC+B,UAKd,WALc,CAAA,WAAA,CAAA,SAMrB,eANqB,EAO3B,4BAP2B,CAAA,MAAA,CAAA,EAQ3B,oBAR2B,CAAA;EAAhB,iBAAA,CAAA,EAAA,OAAA;EACE,oBAAA,CAAA,EASQ,kBATR;EADP;;AAKV;;;EAagB,oBAAA,CAAA,EAAA,OAAA;EACX,gBAAA,EAAA,UAAA,EADW,cACX,CAD0B,WAC1B,CAAA,CAAA,EAAA,WAAA,GAAA,SAAA;EAEoB,kBAAA,EAAA,aAAA,EAAA,GAAA,GAAA,oBAAA,CAAA,MAAA,CAAA,GAAA,SAAA,CAAA,EACpB,WADoB,GAAA,IAAA;;AAff,cAqBG,IArBH,CAAA,cAAA,SAAA,CAAA,CAAA;EACN,OAAA,EA8CgB,WA9ChB,CA8C4B,WA9C5B,CAAA;EACA,QAAA,aAAA;EAAA,QAAA,kBAAA;EAmBJ,OAAa,qBAAA,EAAA,OAAA;EA0BmB,SAAA,IAAA,EAAA,MAAA;EAAZ,QAAA,aAAA;EAAY,QAAA,SAAA;EAAZ,QAAA,GAAA;EACQ,QAAA,IAAA;EA4BM,QAAA,cAAA;EAAZ,QAAA,YAAA;EAWI,QAAA,YAAA;EA8BH,QAAA,aAAA;EAI8B,QAAA,cAAA;EAAf,QAAA,YAAA;EAIZ,QAAA,aAAA;EA6BQ,QAAA,iBAAA;EAAjB,QAAA,oBAAA;EAsDb,QAAA,kBAAA;EACA,QAAA,eAAA;EACA,QAAA,IAAA;EACA,WAAA,CAAA,OAAA,CAAA,EApKgB,WAoKhB,CApK4B,WAoK5B,CAAA,EAAA,aAAA,CAAA,EAnKwB,iBAmKxB,GAAA,SAAA,EAAA,kBAAA,CAAA,EAAA,OAAA;EACA,QAAA,qBAAA;EACiB,QAAA,CAAA,CAAA,EAAA,IAAA;EAAhB,UAAA,CAAA,OAAA,EAzIiB,WAyIjB,CAzI6B,WAyI7B,CAAA,GAAA,SAAA,CAAA,EAAA,IAAA;EAAA,QAAA,YAAA;0BA9HqB;wBA8BH;sCAIe,eAAe;0BAI3B;;iBA6BT,iBAAiB;;;;;;;KA2D7B,gBAAgB"}
+{"version":3,"file":"File.d.ts","names":["LineSelectionManager","LineSelectionOptions","SelectedLineRange","GetHoveredLineResult","MouseEventManager","MouseEventManagerBaseOptions","ResizeManager","FileRenderer","BaseCodeOptions","FileContents","LineAnnotation","PrePropertiesConfig","RenderFileMetadata","RenderRange","ThemeTypes","WorkerPoolManager","FileRenderProps","LAnnotation","HTMLElement","FileHyrdateProps","Omit","FileOptions","AnnotationElementCache","File","SVGElement","HTMLPreElement","HTMLStyleElement","Map","file","fileContainer","forceRender","containerWrapper","lineAnnotations","renderRange"],"sources":["../../src/components/File.d.ts"],"sourcesContent":["import { LineSelectionManager, type LineSelectionOptions, type SelectedLineRange } from '../managers/LineSelectionManager';\nimport { type GetHoveredLineResult, MouseEventManager, type MouseEventManagerBaseOptions } from '../managers/MouseEventManager';\nimport { ResizeManager } from '../managers/ResizeManager';\nimport { FileRenderer } from '../renderers/FileRenderer';\nimport type { BaseCodeOptions, FileContents, LineAnnotation, PrePropertiesConfig, RenderFileMetadata, RenderRange, ThemeTypes } from '../types';\nimport type { WorkerPoolManager } from '../worker';\nexport interface FileRenderProps<LAnnotation> {\n    file: FileContents;\n    fileContainer?: HTMLElement;\n    containerWrapper?: HTMLElement;\n    forceRender?: boolean;\n    lineAnnotations?: LineAnnotation<LAnnotation>[];\n    renderRange?: RenderRange;\n}\nexport interface FileHyrdateProps<LAnnotation> extends Omit<FileRenderProps<LAnnotation>, 'fileContainer'> {\n    fileContainer: HTMLElement;\n    prerenderedHTML?: string;\n}\nexport interface FileOptions<LAnnotation> extends BaseCodeOptions, MouseEventManagerBaseOptions<'file'>, LineSelectionOptions {\n    disableFileHeader?: boolean;\n    renderCustomMetadata?: RenderFileMetadata;\n    /**\n     * When true, errors during rendering are rethrown instead of being caught\n     * and displayed in the DOM. Useful for testing or when you want to handle\n     * errors yourself.\n     */\n    disableErrorHandling?: boolean;\n    renderAnnotation?(annotation: LineAnnotation<LAnnotation>): HTMLElement | undefined;\n    renderHoverUtility?(getHoveredRow: () => GetHoveredLineResult<'file'> | undefined): HTMLElement | null;\n}\ninterface AnnotationElementCache<LAnnotation> {\n    element: HTMLElement;\n    annotation: LineAnnotation<LAnnotation>;\n}\nexport declare class File<LAnnotation = undefined> {\n    options: FileOptions<LAnnotation>;\n    private workerManager?;\n    private isContainerManaged;\n    static LoadedCustomComponent: boolean;\n    readonly __id: string;\n    protected fileContainer: HTMLElement | undefined;\n    protected spriteSVG: SVGElement | undefined;\n    protected pre: HTMLPreElement | undefined;\n    protected code: HTMLElement | undefined;\n    protected bufferBefore: HTMLElement | undefined;\n    protected bufferAfter: HTMLElement | undefined;\n    protected unsafeCSSStyle: HTMLStyleElement | undefined;\n    protected hoverContent: HTMLElement | undefined;\n    protected errorWrapper: HTMLElement | undefined;\n    protected placeHolder: HTMLElement | undefined;\n    protected lastRenderedHeaderHTML: string | undefined;\n    protected appliedPreAttributes: PrePropertiesConfig | undefined;\n    protected lastRowCount: number | undefined;\n    protected headerElement: HTMLElement | undefined;\n    protected headerMetadata: HTMLElement | undefined;\n    protected fileRenderer: FileRenderer<LAnnotation>;\n    protected resizeManager: ResizeManager;\n    protected mouseEventManager: MouseEventManager<'file'>;\n    protected lineSelectionManager: LineSelectionManager;\n    protected annotationCache: Map<string, AnnotationElementCache<LAnnotation>>;\n    protected lineAnnotations: LineAnnotation<LAnnotation>[];\n    protected file: FileContents | undefined;\n    protected renderRange: RenderRange | undefined;\n    constructor(options?: FileOptions<LAnnotation>, workerManager?: WorkerPoolManager | undefined, isContainerManaged?: boolean);\n    private handleHighlightRender;\n    rerender(): void;\n    setOptions(options: FileOptions<LAnnotation> | undefined): void;\n    private mergeOptions;\n    setThemeType(themeType: ThemeTypes): void;\n    getHoveredLine: () => {\n        lineNumber: number;\n    } | undefined;\n    setLineAnnotations(lineAnnotations: LineAnnotation<LAnnotation>[]): void;\n    setSelectedLines(range: SelectedLineRange | null): void;\n    cleanUp(): void;\n    hydrate(props: FileHyrdateProps<LAnnotation>): void;\n    getOrCreateLineCache(file?: FileContents | undefined): string[];\n    render({ file, fileContainer, forceRender, containerWrapper, lineAnnotations, renderRange }: FileRenderProps<LAnnotation>): boolean;\n    private canPartiallyRender;\n    renderPlaceholder(height: number): boolean;\n    private cleanChildNodes;\n    private renderAnnotations;\n    private renderHoverUtility;\n    private injectUnsafeCSS;\n    private applyFullRender;\n    private applyPartialRender;\n    private getColumns;\n    private trimDOMToOverlap;\n    private getDOMBoundaryIndices;\n    private getLineIndexFromDOMNode;\n    private applyBuffers;\n    private applyHeaderToDOM;\n    protected getOrCreateFileContainerNode(fileContainer?: HTMLElement, parentNode?: HTMLElement): HTMLElement;\n    private getOrCreatePreNode;\n    private applyPreNodeAttributes;\n    private applyErrorToDOM;\n    private cleanupErrorWrapper;\n}\nexport {};\n//# sourceMappingURL=File.d.ts.map"],"mappings":"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"}

package/dist/components/File.js

@@ -2,41 +2,52 @@ import { DEFAULT_THEMES, DIFFS_TAG_NAME, HEADER_METADATA_SLOT_ID, UNSAFE_CSS_ATT
 import { LineSelectionManager, pluckLineSelectionOptions } from "../managers/LineSelectionManager.js";
 import { MouseEventManager, pluckMouseEventOptions } from "../managers/MouseEventManager.js";
 import { ResizeManager } from "../managers/ResizeManager.js";
+import { areRenderRangesEqual } from "../utils/areRenderRangesEqual.js";
 import { getLineAnnotationName } from "../utils/getLineAnnotationName.js";
 import { FileRenderer } from "../renderers/FileRenderer.js";
 import { SVGSpriteSheet } from "../sprite.js";
 import { areFilesEqual } from "../utils/areFilesEqual.js";
+import { areLineAnnotationsEqual } from "../utils/areLineAnnotationsEqual.js";
+import { arePrePropertiesEqual } from "../utils/arePrePropertiesEqual.js";
 import { createAnnotationWrapperNode } from "../utils/createAnnotationWrapperNode.js";
-import { createCodeNode } from "../utils/createCodeNode.js";
 import { createHoverContentNode } from "../utils/createHoverContentNode.js";
 import { createUnsafeCSSStyleNode } from "../utils/createUnsafeCSSStyleNode.js";
 import { wrapUnsafeCSS } from "../utils/cssWrappers.js";
+import { getOrCreateCodeNode } from "../utils/getOrCreateCodeNode.js";
 import { prerenderHTMLIfNecessary } from "../utils/prerenderHTMLIfNecessary.js";
 import { setPreNodeProperties } from "../utils/setWrapperNodeProps.js";
 import { DiffsContainerLoaded } from "./web-components.js";
 import { toHtml } from "hast-util-to-html";
 
 //#region src/components/File.ts
+const EMPTY_STRINGS = [];
 let instanceId = -1;
 var File = class {
 	static LoadedCustomComponent = DiffsContainerLoaded;
-	__id = ++instanceId;
+	__id = `file:${++instanceId}`;
 	fileContainer;
 	spriteSVG;
 	pre;
 	code;
+	bufferBefore;
+	bufferAfter;
 	unsafeCSSStyle;
 	hoverContent;
 	errorWrapper;
+	placeHolder;
+	lastRenderedHeaderHTML;
+	appliedPreAttributes;
+	lastRowCount;
 	headerElement;
 	headerMetadata;
 	fileRenderer;
 	resizeManager;
 	mouseEventManager;
 	lineSelectionManager;
-	annotationElements = [];
+	annotationCache = /* @__PURE__ */ new Map();
 	lineAnnotations = [];
 	file;
+	renderRange;
 	constructor(options = { theme: DEFAULT_THEMES }, workerManager, isContainerManaged = false) {
 		this.options = options;
 		this.workerManager = workerManager;
@@ -54,7 +65,8 @@ var File = class {
 		if (this.file == null) return;
 		this.render({
 			file: this.file,
-			forceRender: true
+			forceRender: true,
+			renderRange: this.renderRange
 		});
 	}
 	setOptions(options) {
@@ -101,14 +113,21 @@ var File = class {
 		this.lineSelectionManager.cleanUp();
 		this.workerManager?.unsubscribeToThemeChanges(this);
 		this.workerManager = void 0;
+		this.renderRange = void 0;
 		this.file = void 0;
 		if (!this.isContainerManaged) this.fileContainer?.parentNode?.removeChild(this.fileContainer);
 		if (this.fileContainer?.shadowRoot != null) this.fileContainer.shadowRoot.innerHTML = "";
 		this.fileContainer = void 0;
 		this.pre = void 0;
+		this.bufferBefore = void 0;
+		this.bufferAfter = void 0;
+		this.appliedPreAttributes = void 0;
+		this.lastRowCount = void 0;
 		this.headerElement = void 0;
+		this.lastRenderedHeaderHTML = void 0;
 		this.errorWrapper = void 0;
 		this.unsafeCSSStyle = void 0;
+		this.placeHolder = void 0;
 	}
 	hydrate(props) {
 		const { fileContainer, prerenderedHTML } = props;
@@ -121,6 +140,7 @@ var File = class {
 			if (!(element instanceof HTMLElement)) continue;
 			if (element instanceof HTMLPreElement) {
 				this.pre = element;
+				this.appliedPreAttributes = void 0;
 				continue;
 			}
 			if (element instanceof HTMLStyleElement && element.hasAttribute(UNSAFE_CSS_ATTRIBUTE)) {
@@ -129,12 +149,14 @@ var File = class {
 			}
 			if ("diffsHeader" in element.dataset) {
 				this.headerElement = element;
+				this.lastRenderedHeaderHTML = void 0;
 				continue;
 			}
 		}
 		if (this.pre == null) this.render(props);
 		else {
 			const { file, lineAnnotations } = props;
+			const { overflow = "scroll" } = this.options;
 			this.fileContainer = fileContainer;
 			delete this.pre.dataset.dehydrated;
 			this.lineAnnotations = lineAnnotations ?? this.lineAnnotations;
@@ -145,33 +167,47 @@ var File = class {
 			this.injectUnsafeCSS();
 			this.mouseEventManager.setup(this.pre);
 			this.lineSelectionManager.setup(this.pre);
-			if ((this.options.overflow ?? "scroll") === "scroll") this.resizeManager.setup(this.pre);
+			this.resizeManager.setup(this.pre, overflow === "wrap");
 		}
 	}
-	render({ file, fileContainer, forceRender = false, containerWrapper, lineAnnotations }) {
+	getOrCreateLineCache(file = this.file) {
+		return file != null ? this.fileRenderer.getOrCreateLineCache(file) : EMPTY_STRINGS;
+	}
+	render({ file, fileContainer, forceRender = false, containerWrapper, lineAnnotations, renderRange }) {
+		const previousRenderRange = this.renderRange;
 		const annotationsChanged = lineAnnotations != null && (lineAnnotations.length > 0 || this.lineAnnotations.length > 0) ? lineAnnotations !== this.lineAnnotations : false;
-		if (!forceRender && areFilesEqual(this.file, file) && !annotationsChanged) return;
+		const didFileChange = !areFilesEqual(this.file, file);
+		if (!forceRender && areRenderRangesEqual(renderRange, this.renderRange) && !didFileChange && !annotationsChanged) return false;
+		this.renderRange = renderRange;
 		this.file = file;
 		this.fileRenderer.setOptions(this.options);
 		if (lineAnnotations != null) this.setLineAnnotations(lineAnnotations);
 		this.fileRenderer.setLineAnnotations(this.lineAnnotations);
-		const { disableFileHeader = false, disableErrorHandling = false } = this.options;
+		const { disableErrorHandling = false, disableFileHeader = false, overflow = "scroll" } = this.options;
 		if (disableFileHeader) {
 			if (this.headerElement != null) {
 				this.headerElement.parentNode?.removeChild(this.headerElement);
 				this.headerElement = void 0;
+				this.lastRenderedHeaderHTML = void 0;
 			}
 		}
 		fileContainer = this.getOrCreateFileContainerNode(fileContainer, containerWrapper);
 		try {
-			const fileResult = this.fileRenderer.renderFile(file);
-			if (fileResult == null) {
-				if (this.workerManager != null && !this.workerManager.isInitialized()) this.workerManager.initialize().then(() => this.rerender());
-				return;
-			}
-			if (fileResult.headerAST != null) this.applyHeaderToDOM(fileResult.headerAST, fileContainer);
 			const pre = this.getOrCreatePreNode(fileContainer);
-			this.applyHunksToDOM(fileResult, pre);
+			if (!this.canPartiallyRender(forceRender, annotationsChanged, didFileChange) || !this.applyPartialRender(previousRenderRange, renderRange)) {
+				const fileResult = this.fileRenderer.renderFile(file, renderRange);
+				if (fileResult == null) {
+					if (this.workerManager?.isInitialized() === false) this.workerManager.initialize().then(() => this.rerender());
+					return false;
+				}
+				if (fileResult.headerAST != null) this.applyHeaderToDOM(fileResult.headerAST, fileContainer);
+				this.applyFullRender(fileResult, pre);
+			}
+			this.applyBuffers(pre, renderRange);
+			this.injectUnsafeCSS();
+			this.mouseEventManager.setup(pre);
+			this.lineSelectionManager.setup(pre);
+			this.resizeManager.setup(pre, overflow === "wrap");
 			this.renderAnnotations();
 			this.renderHoverUtility();
 		} catch (error) {
@@ -179,31 +215,92 @@ var File = class {
 			console.error(error);
 			if (error instanceof Error) this.applyErrorToDOM(error, fileContainer);
 		}
+		return true;
+	}
+	canPartiallyRender(forceRender, annotationsChanged, didContentChange) {
+		if (forceRender || annotationsChanged || didContentChange) return false;
+		return true;
+	}
+	renderPlaceholder(height) {
+		if (this.fileContainer == null) return false;
+		this.cleanChildNodes();
+		if (this.placeHolder == null) {
+			const shadowRoot = this.fileContainer.shadowRoot ?? this.fileContainer.attachShadow({ mode: "open" });
+			this.placeHolder = document.createElement("div");
+			this.placeHolder.dataset.placeholder = "";
+			shadowRoot.appendChild(this.placeHolder);
+		}
+		this.placeHolder.style.setProperty("height", `${height}px`);
+		return true;
+	}
+	cleanChildNodes() {
+		this.resizeManager.cleanUp();
+		this.mouseEventManager.cleanUp();
+		this.lineSelectionManager.cleanUp();
+		this.bufferAfter?.remove();
+		this.bufferBefore?.remove();
+		this.code?.remove();
+		this.errorWrapper?.remove();
+		this.headerElement?.remove();
+		this.hoverContent?.remove();
+		this.pre?.remove();
+		this.spriteSVG?.remove();
+		this.unsafeCSSStyle?.remove();
+		this.bufferAfter = void 0;
+		this.bufferBefore = void 0;
+		this.code = void 0;
+		this.errorWrapper = void 0;
+		this.headerElement = void 0;
+		this.hoverContent = void 0;
+		this.pre = void 0;
+		this.spriteSVG = void 0;
+		this.unsafeCSSStyle = void 0;
+		this.lastRenderedHeaderHTML = void 0;
+		this.lastRowCount = void 0;
 	}
 	renderAnnotations() {
-		if (this.isContainerManaged || this.fileContainer == null) return;
-		for (const element of this.annotationElements) element.parentNode?.removeChild(element);
-		this.annotationElements.length = 0;
+		if (this.isContainerManaged || this.fileContainer == null) {
+			for (const { element } of this.annotationCache.values()) element.parentNode?.removeChild(element);
+			this.annotationCache.clear();
+			return;
+		}
+		const staleAnnotations = new Map(this.annotationCache);
 		const { renderAnnotation } = this.options;
-		if (renderAnnotation != null && this.lineAnnotations.length > 0) for (const annotation of this.lineAnnotations) {
-			const content = renderAnnotation(annotation);
-			if (content == null) continue;
-			const el = createAnnotationWrapperNode(getLineAnnotationName(annotation));
-			el.appendChild(content);
-			this.annotationElements.push(el);
-			this.fileContainer.appendChild(el);
+		if (renderAnnotation != null && this.lineAnnotations.length > 0) for (const [index, annotation] of this.lineAnnotations.entries()) {
+			const id = `${index}-${getLineAnnotationName(annotation)}`;
+			let cache = this.annotationCache.get(id);
+			if (cache == null || !areLineAnnotationsEqual(annotation, cache.annotation)) {
+				cache?.element.parentElement?.removeChild(cache.element);
+				const content = renderAnnotation(annotation);
+				if (content == null) continue;
+				cache = {
+					element: createAnnotationWrapperNode(getLineAnnotationName(annotation)),
+					annotation
+				};
+				cache.element.appendChild(content);
+				this.fileContainer.appendChild(cache.element);
+				this.annotationCache.set(id, cache);
+			}
+			staleAnnotations.delete(id);
+		}
+		for (const [id, { element }] of staleAnnotations.entries()) {
+			this.annotationCache.delete(id);
+			element.parentNode?.removeChild(element);
 		}
 	}
 	renderHoverUtility() {
 		const { renderHoverUtility } = this.options;
 		if (this.fileContainer == null || renderHoverUtility == null) return;
-		if (this.hoverContent == null) {
-			this.hoverContent = createHoverContentNode();
-			this.fileContainer.appendChild(this.hoverContent);
-		}
 		const element = renderHoverUtility(this.mouseEventManager.getHoveredLine);
-		this.hoverContent.innerHTML = "";
-		if (element != null) this.hoverContent.appendChild(element);
+		if (element != null && this.hoverContent != null) return;
+		else if (element == null) {
+			this.hoverContent?.parentNode?.removeChild(this.hoverContent);
+			this.hoverContent = void 0;
+			return;
+		}
+		this.hoverContent = createHoverContentNode();
+		this.hoverContent.appendChild(element);
+		this.fileContainer.appendChild(this.hoverContent);
 	}
 	injectUnsafeCSS() {
 		if (this.fileContainer?.shadowRoot == null) return;
@@ -221,31 +318,161 @@ var File = class {
 		}
 		this.unsafeCSSStyle.innerText = wrapUnsafeCSS(unsafeCSS);
 	}
-	applyHunksToDOM(result, pre) {
+	applyFullRender(result, pre) {
 		this.cleanupErrorWrapper();
 		this.applyPreNodeAttributes(pre, result);
-		pre.innerHTML = "";
-		this.code = createCodeNode();
-		this.code.innerHTML = this.fileRenderer.renderPartialHTML(result.codeAST);
-		pre.appendChild(this.code);
-		this.injectUnsafeCSS();
-		this.mouseEventManager.setup(pre);
-		this.lineSelectionManager.setup(pre);
-		this.lineSelectionManager.setDirty();
-		if ((this.options.overflow ?? "scroll") === "scroll") this.resizeManager.setup(pre);
-		else this.resizeManager.cleanUp();
+		this.code = getOrCreateCodeNode({ code: this.code });
+		this.code.innerHTML = this.fileRenderer.renderPartialHTML(this.fileRenderer.renderCodeAST(result));
+		pre.replaceChildren(this.code);
+		this.lastRowCount = result.rowCount;
+	}
+	applyPartialRender(previousRenderRange, renderRange) {
+		if (previousRenderRange == null || renderRange == null) return false;
+		const { file, code } = this;
+		const columns = code != null ? this.getColumns(code) : void 0;
+		if (file == null || code == null || columns == null) return false;
+		const previousStart = previousRenderRange.startingLine;
+		const nextStart = renderRange.startingLine;
+		const previousEnd = previousRenderRange.totalLines === Infinity ? Number.POSITIVE_INFINITY : previousStart + previousRenderRange.totalLines;
+		const nextEnd = renderRange.totalLines === Infinity ? Number.POSITIVE_INFINITY : nextStart + renderRange.totalLines;
+		const overlapStart = Math.max(previousStart, nextStart);
+		const overlapEnd = Math.min(previousEnd, nextEnd);
+		if (overlapEnd <= overlapStart) return false;
+		if (!this.trimDOMToOverlap(columns.gutter, overlapStart, overlapEnd) || !this.trimDOMToOverlap(columns.content, overlapStart, overlapEnd)) return false;
+		let { length: rowCount } = columns.content.children;
+		const renderChunk = (startingLine, totalLines) => {
+			if (totalLines <= 0) return;
+			return this.fileRenderer.renderFile(file, {
+				startingLine,
+				totalLines,
+				bufferBefore: 0,
+				bufferAfter: 0
+			});
+		};
+		const prependResult = nextStart < overlapStart ? renderChunk(nextStart, overlapStart - nextStart) : void 0;
+		if (prependResult === void 0 && nextStart < overlapStart) return false;
+		const appendTotalLines = nextEnd === Number.POSITIVE_INFINITY ? Number.POSITIVE_INFINITY : Math.max(0, nextEnd - overlapEnd);
+		const appendResult = nextEnd > overlapEnd ? renderChunk(overlapEnd, appendTotalLines) : void 0;
+		if (appendResult === void 0 && nextEnd > overlapEnd) return false;
+		this.cleanupErrorWrapper();
+		if (prependResult != null) {
+			columns.gutter.insertAdjacentHTML("afterbegin", this.fileRenderer.renderPartialHTML(prependResult.gutterAST));
+			columns.content.insertAdjacentHTML("afterbegin", this.fileRenderer.renderPartialHTML(prependResult.contentAST));
+			rowCount += prependResult.rowCount;
+		}
+		if (appendResult != null) {
+			columns.gutter.insertAdjacentHTML("beforeend", this.fileRenderer.renderPartialHTML(appendResult.gutterAST));
+			columns.content.insertAdjacentHTML("beforeend", this.fileRenderer.renderPartialHTML(appendResult.contentAST));
+			rowCount += appendResult.rowCount;
+		}
+		if (this.lastRowCount !== rowCount) {
+			columns.gutter.style.setProperty("grid-row", `span ${rowCount}`);
+			columns.content.style.setProperty("grid-row", `span ${rowCount}`);
+			this.lastRowCount = rowCount;
+		}
+		return true;
+	}
+	getColumns(code) {
+		const gutter = code.children[0];
+		const content = code.children[1];
+		if (!(gutter instanceof HTMLElement) || !(content instanceof HTMLElement) || gutter.dataset.gutter == null || content.dataset.content == null) return;
+		return {
+			gutter,
+			content
+		};
+	}
+	trimDOMToOverlap(container, overlapStart, overlapEnd) {
+		const boundaryIndices = this.getDOMBoundaryIndices(container, [overlapStart, overlapEnd]);
+		const startIndex = boundaryIndices.get(overlapStart) ?? container.children.length;
+		const endIndex = boundaryIndices.get(overlapEnd) ?? container.children.length;
+		if (startIndex > endIndex) return false;
+		for (let i = container.children.length - 1; i >= endIndex; i -= 1) container.children[i]?.remove();
+		for (let i = startIndex - 1; i >= 0; i -= 1) container.children[i]?.remove();
+		return true;
+	}
+	getDOMBoundaryIndices(container, boundaries) {
+		const sortedBoundaries = [...new Set(boundaries)].sort((a, b) => a - b);
+		const boundaryIndices = /* @__PURE__ */ new Map();
+		if (sortedBoundaries.length === 0) return boundaryIndices;
+		let boundaryIndex = 0;
+		let nextBoundary = sortedBoundaries[boundaryIndex];
+		const { children } = container;
+		for (let i = 0; i < children.length; i += 1) {
+			const child = children[i];
+			if (!(child instanceof HTMLElement)) continue;
+			const lineIndex = this.getLineIndexFromDOMNode(child);
+			if (lineIndex == null) continue;
+			while (nextBoundary != null && lineIndex >= nextBoundary) {
+				boundaryIndices.set(nextBoundary, i);
+				boundaryIndex += 1;
+				nextBoundary = sortedBoundaries[boundaryIndex];
+			}
+			if (boundaryIndex >= sortedBoundaries.length) break;
+		}
+		for (const boundary of sortedBoundaries) if (!boundaryIndices.has(boundary)) boundaryIndices.set(boundary, children.length);
+		return boundaryIndices;
+	}
+	getLineIndexFromDOMNode(node) {
+		const lineIndexAttr = node.dataset.lineIndex;
+		if (lineIndexAttr == null) return;
+		const parsed = Number(lineIndexAttr);
+		return Number.isNaN(parsed) ? void 0 : parsed;
+	}
+	applyBuffers(pre, renderRange) {
+		const { disableVirtualizationBuffers = false } = this.options;
+		if (disableVirtualizationBuffers || renderRange == null) {
+			if (this.bufferBefore != null) {
+				this.bufferBefore.parentNode?.removeChild(this.bufferBefore);
+				this.bufferBefore = void 0;
+			}
+			if (this.bufferAfter != null) {
+				this.bufferAfter.parentNode?.removeChild(this.bufferAfter);
+				this.bufferAfter = void 0;
+			}
+			return;
+		}
+		if (renderRange.bufferBefore > 0) {
+			if (this.bufferBefore == null) {
+				this.bufferBefore = document.createElement("div");
+				this.bufferBefore.dataset.virtualizerBuffer = "before";
+				pre.before(this.bufferBefore);
+			}
+			this.bufferBefore.style.setProperty("height", `${renderRange.bufferBefore}px`);
+			this.bufferBefore.style.setProperty("contain", "strict");
+		} else if (this.bufferBefore != null) {
+			this.bufferBefore.parentNode?.removeChild(this.bufferBefore);
+			this.bufferBefore = void 0;
+		}
+		if (renderRange.bufferAfter > 0) {
+			if (this.bufferAfter == null) {
+				this.bufferAfter = document.createElement("div");
+				this.bufferAfter.dataset.virtualizerBuffer = "after";
+				pre.after(this.bufferAfter);
+			}
+			this.bufferAfter.style.setProperty("height", `${renderRange.bufferAfter}px`);
+			this.bufferAfter.style.setProperty("contain", "strict");
+		} else if (this.bufferAfter != null) {
+			this.bufferAfter.parentNode?.removeChild(this.bufferAfter);
+			this.bufferAfter = void 0;
+		}
 	}
 	applyHeaderToDOM(headerAST, container) {
 		const { file } = this;
 		if (file == null) return;
 		this.cleanupErrorWrapper();
-		const tempDiv = document.createElement("div");
-		tempDiv.innerHTML = toHtml(headerAST);
-		const newHeader = tempDiv.firstElementChild;
-		if (!(newHeader instanceof HTMLElement)) return;
-		if (this.headerElement != null) container.shadowRoot?.replaceChild(newHeader, this.headerElement);
-		else container.shadowRoot?.prepend(newHeader);
-		this.headerElement = newHeader;
+		this.placeHolder?.remove();
+		this.placeHolder = void 0;
+		const headerHTML = toHtml(headerAST);
+		if (headerHTML !== this.lastRenderedHeaderHTML) {
+			const tempDiv = document.createElement("div");
+			tempDiv.innerHTML = headerHTML;
+			const newHeader = tempDiv.firstElementChild;
+			if (!(newHeader instanceof HTMLElement)) return;
+			if (this.headerElement != null) container.shadowRoot?.replaceChild(newHeader, this.headerElement);
+			else container.shadowRoot?.prepend(newHeader);
+			this.headerElement = newHeader;
+			this.lastRenderedHeaderHTML = headerHTML;
+		}
 		if (this.isContainerManaged) return;
 		const { renderCustomMetadata } = this.options;
 		if (this.headerMetadata != null) this.headerMetadata.parentNode?.removeChild(this.headerMetadata);
@@ -259,7 +486,12 @@ var File = class {
 		}
 	}
 	getOrCreateFileContainerNode(fileContainer, parentNode) {
+		const previousContainer = this.fileContainer;
 		this.fileContainer = fileContainer ?? this.fileContainer ?? document.createElement(DIFFS_TAG_NAME);
+		if (previousContainer != null && previousContainer !== this.fileContainer) {
+			this.lastRenderedHeaderHTML = void 0;
+			this.headerElement = void 0;
+		}
 		if (parentNode != null && this.fileContainer.parentNode !== parentNode) parentNode.appendChild(this.fileContainer);
 		if (this.spriteSVG == null) {
 			const fragment = document.createElement("div");
@@ -273,16 +505,24 @@ var File = class {
 		return this.fileContainer;
 	}
 	getOrCreatePreNode(container) {
+		const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: "open" });
 		if (this.pre == null) {
 			this.pre = document.createElement("pre");
+			this.appliedPreAttributes = void 0;
+			this.code = void 0;
+			shadowRoot.appendChild(this.pre);
+		} else if (this.pre.parentNode !== shadowRoot) {
 			container.shadowRoot?.appendChild(this.pre);
-		} else if (this.pre.parentNode !== container) container.shadowRoot?.appendChild(this.pre);
+			this.appliedPreAttributes = void 0;
+		}
+		this.placeHolder?.remove();
+		this.placeHolder = void 0;
 		return this.pre;
 	}
 	applyPreNodeAttributes(pre, { totalLines, themeStyles, baseThemeType }) {
 		const { overflow = "scroll", themeType = "system", disableLineNumbers = false } = this.options;
-		setPreNodeProperties({
-			pre,
+		const preProperties = {
+			type: "file",
 			split: false,
 			themeStyles,
 			overflow,
@@ -291,7 +531,10 @@ var File = class {
 			diffIndicators: "none",
 			disableBackground: true,
 			totalLines
-		});
+		};
+		if (arePrePropertiesEqual(preProperties, this.appliedPreAttributes)) return;
+		setPreNodeProperties(pre, preProperties);
+		this.appliedPreAttributes = preProperties;
 	}
 	applyErrorToDOM(error, container) {
 		this.cleanupErrorWrapper();
@@ -299,6 +542,7 @@ var File = class {
 		pre.innerHTML = "";
 		pre.parentNode?.removeChild(pre);
 		this.pre = void 0;
+		this.appliedPreAttributes = void 0;
 		const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: "open" });
 		this.errorWrapper ??= document.createElement("div");
 		this.errorWrapper.dataset.errorWrapper = "";