@pierre/diffs 1.0.7 → 1.1.0-beta.1

package/dist/components/FileDiff.js

@@ -5,16 +5,20 @@ import { ResizeManager } from "../managers/ResizeManager.js";
 import { getLineAnnotationName } from "../utils/getLineAnnotationName.js";
 import { SVGSpriteSheet } from "../sprite.js";
 import { areFilesEqual } from "../utils/areFilesEqual.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 { ScrollSyncManager } from "../managers/ScrollSyncManager.js";
+import { areRenderRangesEqual } from "../utils/areRenderRangesEqual.js";
 import { DiffHunksRenderer } from "../renderers/DiffHunksRenderer.js";
+import { areDiffLineAnnotationsEqual } from "../utils/areDiffLineAnnotationsEqual.js";
+import { areHunkDataEqual } from "../utils/areHunkDataEqual.js";
 import { parseDiffFromFile } from "../utils/parseDiffFromFile.js";
 import { toHtml } from "hast-util-to-html";
 
@@ -22,26 +26,33 @@ import { toHtml } from "hast-util-to-html";
 let instanceId = -1;
 var FileDiff = class {
 	static LoadedCustomComponent = DiffsContainerLoaded;
-	__id = ++instanceId;
+	__id = `file-diff:${++instanceId}`;
 	fileContainer;
 	spriteSVG;
 	pre;
+	codeUnified;
+	codeDeletions;
+	codeAdditions;
 	unsafeCSSStyle;
 	hoverContent;
 	headerElement;
 	headerMetadata;
-	customHunkElements = [];
+	separatorCache = /* @__PURE__ */ new Map();
 	errorWrapper;
 	hunksRenderer;
 	resizeManager;
 	scrollSyncManager;
 	mouseEventManager;
 	lineSelectionManager;
-	annotationElements = [];
+	annotationCache = /* @__PURE__ */ new Map();
 	lineAnnotations = [];
-	oldFile;
-	newFile;
+	deletionFile;
+	additionFile;
 	fileDiff;
+	renderRange;
+	appliedPreAttributes;
+	lastRenderedHeaderHTML;
+	enabled = true;
 	constructor(options = { theme: DEFAULT_THEMES }, workerManager, isContainerManaged = false) {
 		this.options = options;
 		this.workerManager = workerManager;
@@ -55,6 +66,7 @@ var FileDiff = class {
 		this.mouseEventManager = new MouseEventManager("diff", pluckMouseEventOptions(options, typeof options.hunkSeparators === "function" || (options.hunkSeparators ?? "line-info") === "line-info" ? this.handleExpandHunk : void 0));
 		this.lineSelectionManager = new LineSelectionManager(pluckLineSelectionOptions(options));
 		this.workerManager?.subscribeToThemeChanges(this);
+		this.enabled = true;
 	}
 	handleHighlightRender = () => {
 		this.rerender();
@@ -100,28 +112,46 @@ var FileDiff = class {
 	setSelectedLines(range) {
 		this.lineSelectionManager.setSelection(range);
 	}
-	cleanUp() {
-		this.hunksRenderer.cleanUp();
+	cleanUp(recycle = false) {
 		this.resizeManager.cleanUp();
 		this.mouseEventManager.cleanUp();
 		this.scrollSyncManager.cleanUp();
 		this.lineSelectionManager.cleanUp();
 		this.workerManager?.unsubscribeToThemeChanges(this);
-		this.workerManager = void 0;
-		this.fileDiff = void 0;
-		this.oldFile = void 0;
-		this.newFile = void 0;
+		this.renderRange = 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;
+		if (this.pre != null) {
+			this.pre.innerHTML = "";
+			this.pre = void 0;
+		}
+		this.codeUnified = void 0;
+		this.codeDeletions = void 0;
+		this.codeAdditions = void 0;
+		this.appliedPreAttributes = void 0;
 		this.headerElement = void 0;
+		this.lastRenderedHeaderHTML = void 0;
 		this.errorWrapper = void 0;
+		this.spriteSVG = void 0;
+		if (recycle) this.hunksRenderer.recycle();
+		else {
+			this.hunksRenderer.cleanUp();
+			this.workerManager = void 0;
+			this.fileDiff = void 0;
+			this.deletionFile = void 0;
+			this.additionFile = void 0;
+		}
+		this.enabled = false;
+	}
+	virtualizedSetup() {
+		this.enabled = true;
+		this.workerManager?.subscribeToThemeChanges(this);
 	}
 	hydrate(props) {
 		const { fileContainer, prerenderedHTML } = props;
 		prerenderHTMLIfNecessary(fileContainer, prerenderedHTML);
-		for (const element of Array.from(fileContainer.shadowRoot?.children ?? [])) {
+		for (const element of fileContainer.shadowRoot?.children ?? []) {
 			if (element instanceof SVGElement) {
 				this.spriteSVG = element;
 				continue;
@@ -129,6 +159,12 @@ var FileDiff = class {
 			if (!(element instanceof HTMLElement)) continue;
 			if (element instanceof HTMLPreElement) {
 				this.pre = element;
+				for (const code of element.children) {
+					if (!(code instanceof HTMLElement) || code.tagName.toLowerCase() !== "code") continue;
+					if ("deletions" in code.dataset) this.codeDeletions = code;
+					if ("additions" in code.dataset) this.codeAdditions = code;
+					if ("unified" in code.dataset) this.codeUnified = code;
+				}
 				continue;
 			}
 			if ("diffsHeader" in element.dataset) {
@@ -140,14 +176,15 @@ var FileDiff = class {
 				continue;
 			}
 		}
+		if (this.pre != null) this.syncCodeNodesFromPre(this.pre);
 		if (this.pre == null) this.render(props);
 		else {
 			const { lineAnnotations, oldFile, newFile, fileDiff } = props;
 			this.fileContainer = fileContainer;
 			delete this.pre.dataset.dehydrated;
 			this.lineAnnotations = lineAnnotations ?? this.lineAnnotations;
-			this.newFile = newFile;
-			this.oldFile = oldFile;
+			this.additionFile = newFile;
+			this.deletionFile = oldFile;
 			this.fileDiff = fileDiff ?? (oldFile != null && newFile != null ? parseDiffFromFile(oldFile, newFile) : void 0);
 			this.hunksRenderer.hydrate(this.fileDiff);
 			this.renderAnnotations();
@@ -157,17 +194,18 @@ var FileDiff = class {
 			this.lineSelectionManager.setup(this.pre);
 			if ((this.options.overflow ?? "scroll") === "scroll") {
 				this.resizeManager.setup(this.pre);
-				if ((this.options.diffStyle ?? "split") === "split") this.scrollSyncManager.setup(this.pre);
+				if ((this.options.diffStyle ?? "split") === "split") this.scrollSyncManager.setup(this.pre, this.codeDeletions, this.codeAdditions);
 			}
 		}
 	}
 	rerender() {
-		if (this.fileDiff == null && this.newFile == null && this.oldFile == null) return;
+		if (!this.enabled || this.fileDiff == null && this.additionFile == null && this.deletionFile == null) return;
 		this.render({
-			oldFile: this.oldFile,
-			newFile: this.newFile,
+			oldFile: this.deletionFile,
+			newFile: this.additionFile,
 			fileDiff: this.fileDiff,
-			forceRender: true
+			forceRender: true,
+			renderRange: this.renderRange
 		});
 	}
 	handleExpandHunk = (hunkIndex, direction) => {
@@ -177,12 +215,14 @@ var FileDiff = class {
 		this.hunksRenderer.expandHunk(hunkIndex, direction);
 		this.rerender();
 	}
-	render({ oldFile, newFile, fileDiff, forceRender = false, lineAnnotations, fileContainer, containerWrapper }) {
-		const filesDidChange = oldFile != null && newFile != null && (!areFilesEqual(oldFile, this.oldFile) || !areFilesEqual(newFile, this.newFile));
+	render({ oldFile, newFile, fileDiff, forceRender = false, lineAnnotations, fileContainer, containerWrapper, renderRange }) {
+		if (!this.enabled) throw new Error("FileDiff.render: attempting to call render after cleaned up");
+		const filesDidChange = oldFile != null && newFile != null && (!areFilesEqual(oldFile, this.deletionFile) || !areFilesEqual(newFile, this.additionFile));
 		const annotationsChanged = lineAnnotations != null && (lineAnnotations.length > 0 || this.lineAnnotations.length > 0) ? lineAnnotations !== this.lineAnnotations : false;
-		if (!forceRender && !annotationsChanged && (fileDiff != null && fileDiff === this.fileDiff || fileDiff == null && !filesDidChange)) return;
-		this.oldFile = oldFile;
-		this.newFile = newFile;
+		if (areRenderRangesEqual(renderRange, this.renderRange) && !forceRender && !annotationsChanged && (fileDiff != null && fileDiff === this.fileDiff || fileDiff == null && !filesDidChange)) return;
+		this.renderRange = renderRange;
+		this.deletionFile = oldFile;
+		this.additionFile = newFile;
 		if (fileDiff != null) this.fileDiff = fileDiff;
 		else if (oldFile != null && newFile != null && filesDidChange) this.fileDiff = parseDiffFromFile(oldFile, newFile);
 		if (lineAnnotations != null) this.setLineAnnotations(lineAnnotations);
@@ -197,66 +237,116 @@ var FileDiff = class {
 			if (this.headerElement != null) {
 				this.headerElement.parentNode?.removeChild(this.headerElement);
 				this.headerElement = void 0;
+				this.lastRenderedHeaderHTML = void 0;
 			}
 		}
 		fileContainer = this.getOrCreateFileContainer(fileContainer, containerWrapper);
 		try {
-			const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff);
+			const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, renderRange);
 			if (hunksResult == null) {
 				if (this.workerManager != null && !this.workerManager.isInitialized()) this.workerManager.initialize().then(() => this.rerender());
 				return;
 			}
 			if (hunksResult.headerElement != null) this.applyHeaderToDOM(hunksResult.headerElement, fileContainer);
-			const pre = this.getOrCreatePreNode(fileContainer);
-			this.applyHunksToDOM(pre, hunksResult);
+			if (hunksResult.additionsAST != null || hunksResult.deletionsAST != null || hunksResult.unifiedAST != null) {
+				const pre = this.getOrCreatePreNode(fileContainer);
+				this.applyHunksToDOM(pre, hunksResult);
+			} else if (this.pre != null) {
+				this.pre.parentNode?.removeChild(this.pre);
+				this.pre = void 0;
+			}
 			this.renderSeparators(hunksResult.hunkData);
 			this.renderAnnotations();
 			this.renderHoverUtility();
 		} catch (error) {
-			if (error instanceof Error) this.applyErrorToDOM(error, fileContainer);
+			if (error instanceof Error) {
+				console.error(error);
+				this.applyErrorToDOM(error, fileContainer);
+			}
 		}
 	}
 	renderSeparators(hunkData) {
 		const { hunkSeparators } = this.options;
-		if (this.isContainerManaged || this.fileContainer == null || typeof hunkSeparators !== "function") return;
-		for (const element of this.customHunkElements) element.parentNode?.removeChild(element);
-		this.customHunkElements.length = 0;
+		if (this.isContainerManaged || this.fileContainer == null || typeof hunkSeparators !== "function") {
+			for (const { element } of this.separatorCache.values()) element.parentNode?.removeChild(element);
+			this.separatorCache.clear();
+			return;
+		}
+		const staleSeparators = new Map(this.separatorCache);
 		for (const hunk of hunkData) {
-			const element = document.createElement("div");
-			element.style.display = "contents";
-			element.slot = hunk.slotName;
-			element.appendChild(hunkSeparators(hunk, this));
-			this.fileContainer.appendChild(element);
-			this.customHunkElements.push(element);
+			const id = hunk.slotName;
+			let cache = this.separatorCache.get(id);
+			if (cache == null || !areHunkDataEqual(hunk, cache.hunkData)) {
+				cache?.element.parentNode?.removeChild(cache.element);
+				const element = document.createElement("div");
+				element.style.display = "contents";
+				element.slot = hunk.slotName;
+				element.appendChild(hunkSeparators(hunk, this));
+				this.fileContainer.appendChild(element);
+				cache = {
+					element,
+					hunkData: hunk
+				};
+				this.separatorCache.set(id, cache);
+			}
+			staleSeparators.delete(id);
+		}
+		for (const [id, { element }] of staleSeparators.entries()) {
+			this.separatorCache.delete(id);
+			element.parentNode?.removeChild(element);
 		}
 	}
 	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 || !areDiffLineAnnotationsEqual(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);
 	}
 	getOrCreateFileContainer(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,27 +363,50 @@ var FileDiff = class {
 		return this.fileContainer;
 	}
 	getOrCreatePreNode(container) {
+		const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: "open" });
 		if (this.pre == null) {
 			this.pre = document.createElement("pre");
-			container.shadowRoot?.appendChild(this.pre);
-		} else if (this.pre.parentNode !== container) container.shadowRoot?.appendChild(this.pre);
+			this.appliedPreAttributes = void 0;
+			this.codeUnified = void 0;
+			this.codeDeletions = void 0;
+			this.codeAdditions = void 0;
+			shadowRoot.appendChild(this.pre);
+		} else if (this.pre.parentNode !== shadowRoot) {
+			shadowRoot.appendChild(this.pre);
+			this.appliedPreAttributes = void 0;
+		}
 		return this.pre;
 	}
+	syncCodeNodesFromPre(pre) {
+		this.codeUnified = void 0;
+		this.codeDeletions = void 0;
+		this.codeAdditions = void 0;
+		for (const child of Array.from(pre.children)) {
+			if (!(child instanceof HTMLElement)) continue;
+			if ("unified" in child.dataset) this.codeUnified = child;
+			else if ("deletions" in child.dataset) this.codeDeletions = child;
+			else if ("additions" in child.dataset) this.codeAdditions = child;
+		}
+	}
 	applyHeaderToDOM(headerAST, container) {
 		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;
+		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 { renderHeaderMetadata } = this.options;
 		if (this.headerMetadata != null) this.headerMetadata.parentNode?.removeChild(this.headerMetadata);
 		const content = renderHeaderMetadata?.({
-			oldFile: this.oldFile,
-			newFile: this.newFile,
+			deletionFile: this.deletionFile,
+			additionFile: this.additionFile,
 			fileDiff: this.fileDiff
 		}) ?? void 0;
 		if (content != null) {
@@ -317,25 +430,50 @@ var FileDiff = class {
 	applyHunksToDOM(pre, result) {
 		this.cleanupErrorWrapper();
 		this.applyPreNodeAttributes(pre, result);
-		pre.innerHTML = "";
+		let shouldReplace = false;
 		let codeDeletions;
 		let codeAdditions;
+		const codeElements = [];
 		if (result.unifiedAST != null) {
-			const codeUnified = createCodeNode({ columnType: "unified" });
-			codeUnified.innerHTML = this.hunksRenderer.renderPartialHTML(result.unifiedAST);
-			pre.appendChild(codeUnified);
+			shouldReplace = this.codeUnified == null || this.codeAdditions != null || this.codeDeletions != null;
+			this.codeDeletions = void 0;
+			this.codeAdditions = void 0;
+			if (result.unifiedAST.length > 0) {
+				this.codeUnified = getOrCreateCodeNode({
+					code: this.codeUnified,
+					columnType: "unified"
+				});
+				this.codeUnified.innerHTML = this.hunksRenderer.renderPartialHTML(result.unifiedAST);
+				codeElements.push(this.codeUnified);
+			} else this.codeUnified = void 0;
 		} else {
 			if (result.deletionsAST != null) {
-				codeDeletions = createCodeNode({ columnType: "deletions" });
-				codeDeletions.innerHTML = this.hunksRenderer.renderPartialHTML(result.deletionsAST);
-				pre.appendChild(codeDeletions);
+				shouldReplace = this.codeDeletions == null || this.codeUnified != null;
+				this.codeUnified = void 0;
+				if (result.deletionsAST.length > 0) {
+					this.codeDeletions = getOrCreateCodeNode({
+						code: this.codeDeletions,
+						columnType: "deletions"
+					});
+					this.codeDeletions.innerHTML = this.hunksRenderer.renderPartialHTML(result.deletionsAST);
+					codeElements.push(this.codeDeletions);
+				} else this.codeDeletions = void 0;
 			}
 			if (result.additionsAST != null) {
-				codeAdditions = createCodeNode({ columnType: "additions" });
-				codeAdditions.innerHTML = this.hunksRenderer.renderPartialHTML(result.additionsAST);
-				pre.appendChild(codeAdditions);
+				shouldReplace = shouldReplace || this.codeAdditions == null || this.codeUnified != null;
+				this.codeUnified = void 0;
+				if (result.additionsAST.length > 0) {
+					this.codeAdditions = getOrCreateCodeNode({
+						code: this.codeAdditions,
+						columnType: "additions"
+					});
+					this.codeAdditions.innerHTML = this.hunksRenderer.renderPartialHTML(result.additionsAST);
+					codeElements.push(this.codeAdditions);
+				} else this.codeAdditions = void 0;
 			}
 		}
+		if (codeElements.length === 0) pre.textContent = "";
+		else if (shouldReplace) pre.replaceChildren(...codeElements);
 		this.injectUnsafeCSS();
 		this.mouseEventManager.setup(pre);
 		this.lineSelectionManager.setup(pre);
@@ -350,8 +488,7 @@ var FileDiff = class {
 	}
 	applyPreNodeAttributes(pre, { themeStyles, baseThemeType, additionsAST, deletionsAST, totalLines }) {
 		const { diffIndicators = "bars", disableBackground = false, disableLineNumbers = false, overflow = "scroll", themeType = "system", diffStyle = "split" } = this.options;
-		setPreNodeProperties({
-			pre,
+		const preProperties = {
 			diffIndicators,
 			disableBackground,
 			disableLineNumbers,
@@ -360,7 +497,10 @@ var FileDiff = class {
 			themeStyles,
 			themeType: baseThemeType ?? themeType,
 			totalLines
-		});
+		};
+		if (arePrePropertiesEqual(preProperties, this.appliedPreAttributes)) return;
+		setPreNodeProperties(pre, preProperties);
+		this.appliedPreAttributes = preProperties;
 	}
 	applyErrorToDOM(error, container) {
 		this.cleanupErrorWrapper();
@@ -368,6 +508,7 @@ var FileDiff = 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 = "";