@pierre/diffs 1.1.0-beta.9 → 1.1.0

package/dist/components/FileDiff.js

@@ -1,6 +1,5 @@
-import { DEFAULT_THEMES, DIFFS_TAG_NAME, HEADER_METADATA_SLOT_ID, UNSAFE_CSS_ATTRIBUTE } from "../constants.js";
-import { LineSelectionManager, pluckLineSelectionOptions } from "../managers/LineSelectionManager.js";
-import { MouseEventManager, pluckMouseEventOptions } from "../managers/MouseEventManager.js";
+import { DEFAULT_THEMES, DIFFS_TAG_NAME, EMPTY_RENDER_RANGE, HEADER_METADATA_SLOT_ID, HEADER_PREFIX_SLOT_ID, UNSAFE_CSS_ATTRIBUTE } from "../constants.js";
+import { InteractionManager, pluckInteractionOptions } from "../managers/InteractionManager.js";
 import { ResizeManager } from "../managers/ResizeManager.js";
 import { areRenderRangesEqual } from "../utils/areRenderRangesEqual.js";
 import { getLineAnnotationName } from "../utils/getLineAnnotationName.js";
@@ -8,7 +7,7 @@ import { SVGSpriteSheet } from "../sprite.js";
 import { areFilesEqual } from "../utils/areFilesEqual.js";
 import { arePrePropertiesEqual } from "../utils/arePrePropertiesEqual.js";
 import { createAnnotationWrapperNode } from "../utils/createAnnotationWrapperNode.js";
-import { createHoverContentNode } from "../utils/createHoverContentNode.js";
+import { createGutterUtilityContentNode } from "../utils/createGutterUtilityContentNode.js";
 import { createUnsafeCSSStyleNode } from "../utils/createUnsafeCSSStyleNode.js";
 import { wrapUnsafeCSS } from "../utils/cssWrappers.js";
 import { getOrCreateCodeNode } from "../utils/getOrCreateCodeNode.js";
@@ -36,8 +35,9 @@ var FileDiff = class {
 	bufferBefore;
 	bufferAfter;
 	unsafeCSSStyle;
-	hoverContent;
+	gutterUtilityContent;
 	headerElement;
+	headerPrefix;
 	headerMetadata;
 	separatorCache = /* @__PURE__ */ new Map();
 	errorWrapper;
@@ -45,8 +45,7 @@ var FileDiff = class {
 	hunksRenderer;
 	resizeManager;
 	scrollSyncManager;
-	mouseEventManager;
-	lineSelectionManager;
+	interactionManager;
 	annotationCache = /* @__PURE__ */ new Map();
 	lineAnnotations = [];
 	deletionFile;
@@ -61,20 +60,25 @@ var FileDiff = class {
 		this.options = options;
 		this.workerManager = workerManager;
 		this.isContainerManaged = isContainerManaged;
-		this.hunksRenderer = new DiffHunksRenderer({
-			...options,
-			hunkSeparators: typeof options.hunkSeparators === "function" ? "custom" : options.hunkSeparators
-		}, this.handleHighlightRender, this.workerManager);
+		this.hunksRenderer = this.createHunksRenderer(options);
 		this.resizeManager = new ResizeManager();
 		this.scrollSyncManager = new ScrollSyncManager();
-		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.getLineIndex));
+		this.interactionManager = new InteractionManager("diff", pluckInteractionOptions(options, typeof options.hunkSeparators === "function" || (options.hunkSeparators ?? "line-info") === "line-info" || options.hunkSeparators === "line-info-basic" ? this.handleExpandHunk : void 0, this.getLineIndex));
 		this.workerManager?.subscribeToThemeChanges(this);
 		this.enabled = true;
 	}
 	handleHighlightRender = () => {
 		this.rerender();
 	};
+	getHunksRendererOptions(options) {
+		return {
+			...options,
+			hunkSeparators: typeof options.hunkSeparators === "function" ? "custom" : options.hunkSeparators
+		};
+	}
+	createHunksRenderer(options) {
+		return new DiffHunksRenderer(this.getHunksRendererOptions(options), this.handleHighlightRender, this.workerManager);
+	}
 	getLineIndex = (lineNumber, side = "additions") => {
 		if (this.fileDiff == null) return;
 		const lastHunk = this.fileDiff.hunks.at(-1);
@@ -131,12 +135,8 @@ var FileDiff = class {
 	setOptions(options) {
 		if (options == null) return;
 		this.options = options;
-		this.hunksRenderer.setOptions({
-			...this.options,
-			hunkSeparators: typeof options.hunkSeparators === "function" ? "custom" : options.hunkSeparators
-		});
-		this.mouseEventManager.setOptions(pluckMouseEventOptions(options, typeof options.hunkSeparators === "function" || (options.hunkSeparators ?? "line-info") === "line-info" ? this.handleExpandHunk : void 0));
-		this.lineSelectionManager.setOptions(pluckLineSelectionOptions(options, this.getLineIndex));
+		this.hunksRenderer.setOptions(this.getHunksRendererOptions(options));
+		this.interactionManager.setOptions(pluckInteractionOptions(options, typeof options.hunkSeparators === "function" || (options.hunkSeparators ?? "line-info") === "line-info" || options.hunkSeparators === "line-info-basic" ? this.handleExpandHunk : void 0, this.getLineIndex));
 	}
 	mergeOptions(options) {
 		this.options = {
@@ -161,7 +161,7 @@ var FileDiff = class {
 		}
 	}
 	getHoveredLine = () => {
-		return this.mouseEventManager.getHoveredLine();
+		return this.interactionManager.getHoveredLine();
 	};
 	setLineAnnotations(lineAnnotations) {
 		this.lineAnnotations = lineAnnotations;
@@ -171,16 +171,15 @@ var FileDiff = class {
 		return true;
 	}
 	setSelectedLines(range) {
-		this.lineSelectionManager.setSelection(range);
+		this.interactionManager.setSelection(range);
 	}
 	cleanUp(recycle = false) {
 		this.resizeManager.cleanUp();
-		this.mouseEventManager.cleanUp();
+		this.interactionManager.cleanUp();
 		this.scrollSyncManager.cleanUp();
-		this.lineSelectionManager.cleanUp();
 		this.workerManager?.unsubscribeToThemeChanges(this);
 		this.renderRange = void 0;
-		if (!this.isContainerManaged) this.fileContainer?.parentNode?.removeChild(this.fileContainer);
+		if (!this.isContainerManaged) this.fileContainer?.remove();
 		if (this.fileContainer?.shadowRoot != null) this.fileContainer.shadowRoot.innerHTML = "";
 		this.fileContainer = void 0;
 		if (this.pre != null) {
@@ -194,6 +193,8 @@ var FileDiff = class {
 		this.bufferAfter = void 0;
 		this.appliedPreAttributes = void 0;
 		this.headerElement = void 0;
+		this.headerPrefix = void 0;
+		this.headerMetadata = void 0;
 		this.lastRenderedHeaderHTML = void 0;
 		this.errorWrapper = void 0;
 		this.spriteSVG = void 0;
@@ -253,10 +254,9 @@ var FileDiff = class {
 			this.fileDiff = fileDiff ?? (oldFile != null && newFile != null ? parseDiffFromFile(oldFile, newFile) : void 0);
 			this.hunksRenderer.hydrate(this.fileDiff);
 			this.renderAnnotations();
-			this.renderHoverUtility();
+			this.renderGutterUtility();
 			this.injectUnsafeCSS();
-			this.mouseEventManager.setup(this.pre);
-			this.lineSelectionManager.setup(this.pre);
+			this.interactionManager.setup(this.pre);
 			this.resizeManager.setup(this.pre, overflow === "wrap");
 			if (overflow === "scroll" && diffStyle === "split") this.scrollSyncManager.setup(this.pre, this.codeDeletions, this.codeAdditions);
 		}
@@ -264,28 +264,27 @@ var FileDiff = class {
 	rerender() {
 		if (!this.enabled || this.fileDiff == null && this.additionFile == null && this.deletionFile == null) return;
 		this.render({
-			oldFile: this.deletionFile,
-			newFile: this.additionFile,
-			fileDiff: this.fileDiff,
 			forceRender: true,
 			renderRange: this.renderRange
 		});
 	}
-	handleExpandHunk = (hunkIndex, direction) => {
-		this.expandHunk(hunkIndex, direction);
+	handleExpandHunk = (hunkIndex, direction, expansionLineCountOverride) => {
+		this.expandHunk(hunkIndex, direction, expansionLineCountOverride);
 	};
-	expandHunk(hunkIndex, direction) {
-		this.hunksRenderer.expandHunk(hunkIndex, direction);
+	expandHunk = (hunkIndex, direction, expansionLineCountOverride) => {
+		this.hunksRenderer.expandHunk(hunkIndex, direction, expansionLineCountOverride);
 		this.rerender();
-	}
+	};
 	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 { collapsed = false } = this.options;
+		const nextRenderRange = collapsed ? void 0 : renderRange;
 		const filesDidChange = oldFile != null && newFile != null && (!areFilesEqual(oldFile, this.deletionFile) || !areFilesEqual(newFile, this.additionFile));
 		let diffDidChange = fileDiff != null && fileDiff !== this.fileDiff;
 		const annotationsChanged = lineAnnotations != null && (lineAnnotations.length > 0 || this.lineAnnotations.length > 0) ? lineAnnotations !== this.lineAnnotations : false;
-		if (areRenderRangesEqual(renderRange, this.renderRange) && !forceRender && !annotationsChanged && (fileDiff != null && fileDiff === this.fileDiff || fileDiff == null && !filesDidChange)) return false;
+		if (!collapsed && areRenderRangesEqual(nextRenderRange, this.renderRange) && !forceRender && !annotationsChanged && (fileDiff != null && fileDiff === this.fileDiff || fileDiff == null && !filesDidChange)) return false;
 		const { renderRange: previousRenderRange } = this;
-		this.renderRange = renderRange;
+		this.renderRange = nextRenderRange;
 		this.deletionFile = oldFile;
 		this.additionFile = newFile;
 		if (fileDiff != null) this.fileDiff = fileDiff;
@@ -303,19 +302,42 @@ var FileDiff = class {
 		const { diffStyle = "split", disableErrorHandling = false, disableFileHeader = false, overflow = "scroll" } = this.options;
 		if (disableFileHeader) {
 			if (this.headerElement != null) {
-				this.headerElement.parentNode?.removeChild(this.headerElement);
+				this.headerElement.remove();
 				this.headerElement = void 0;
 				this.lastRenderedHeaderHTML = void 0;
 			}
+			if (this.headerPrefix != null) {
+				this.headerPrefix.remove();
+				this.headerPrefix = void 0;
+			}
+			if (this.headerMetadata != null) {
+				this.headerMetadata.remove();
+				this.headerMetadata = void 0;
+			}
 		}
 		fileContainer = this.getOrCreateFileContainer(fileContainer, containerWrapper);
+		if (collapsed) {
+			this.removeRenderedCode();
+			this.clearAuxiliaryNodes();
+			try {
+				const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, EMPTY_RENDER_RANGE);
+				if (hunksResult?.headerElement != null) this.applyHeaderToDOM(hunksResult.headerElement, fileContainer);
+				this.renderSeparators([]);
+				this.injectUnsafeCSS();
+			} catch (error) {
+				if (disableErrorHandling) throw error;
+				console.error(error);
+				if (error instanceof Error) this.applyErrorToDOM(error, fileContainer);
+			}
+			return true;
+		}
 		try {
 			const pre = this.getOrCreatePreNode(fileContainer);
 			if (!(this.canPartiallyRender(forceRender, annotationsChanged, filesDidChange || diffDidChange) && this.applyPartialRender({
 				previousRenderRange,
-				renderRange
+				renderRange: nextRenderRange
 			}))) {
-				const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, renderRange);
+				const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, nextRenderRange);
 				if (hunksResult == null) {
 					if (this.workerManager?.isInitialized() === false) this.workerManager.initialize().then(() => this.rerender());
 					return false;
@@ -323,17 +345,16 @@ var FileDiff = class {
 				if (hunksResult.headerElement != null) this.applyHeaderToDOM(hunksResult.headerElement, fileContainer);
 				if (hunksResult.additionsContentAST != null || hunksResult.deletionsContentAST != null || hunksResult.unifiedContentAST != null) this.applyHunksToDOM(pre, hunksResult);
 				else if (this.pre != null) {
-					this.pre.parentNode?.removeChild(this.pre);
+					this.pre.remove();
 					this.pre = void 0;
 				}
 				this.renderSeparators(hunksResult.hunkData);
 			}
-			this.applyBuffers(pre, renderRange);
+			this.applyBuffers(pre, nextRenderRange);
 			this.injectUnsafeCSS();
 			this.renderAnnotations();
-			this.renderHoverUtility();
-			this.mouseEventManager.setup(pre);
-			this.lineSelectionManager.setup(pre);
+			this.renderGutterUtility();
+			this.interactionManager.setup(pre);
 			this.resizeManager.setup(pre, overflow === "wrap");
 			if (overflow === "scroll" && diffStyle === "split") this.scrollSyncManager.setup(pre, this.codeDeletions, this.codeAdditions);
 			else this.scrollSyncManager.cleanUp();
@@ -344,6 +365,33 @@ var FileDiff = class {
 		}
 		return true;
 	}
+	removeRenderedCode() {
+		this.resizeManager.cleanUp();
+		this.scrollSyncManager.cleanUp();
+		this.interactionManager.cleanUp();
+		this.bufferBefore?.remove();
+		this.bufferBefore = void 0;
+		this.bufferAfter?.remove();
+		this.bufferAfter = void 0;
+		this.codeUnified?.remove();
+		this.codeUnified = void 0;
+		this.codeDeletions?.remove();
+		this.codeDeletions = void 0;
+		this.codeAdditions?.remove();
+		this.codeAdditions = void 0;
+		this.pre?.remove();
+		this.pre = void 0;
+		this.appliedPreAttributes = void 0;
+		this.lastRowCount = void 0;
+	}
+	clearAuxiliaryNodes() {
+		for (const { element } of this.separatorCache.values()) element.remove();
+		this.separatorCache.clear();
+		for (const { element } of this.annotationCache.values()) element.remove();
+		this.annotationCache.clear();
+		this.gutterUtilityContent?.remove();
+		this.gutterUtilityContent = void 0;
+	}
 	renderPlaceholder(height) {
 		if (this.fileContainer == null) return false;
 		this.cleanChildNodes();
@@ -359,8 +407,7 @@ var FileDiff = class {
 	cleanChildNodes() {
 		this.resizeManager.cleanUp();
 		this.scrollSyncManager.cleanUp();
-		this.mouseEventManager.cleanUp();
-		this.lineSelectionManager.cleanUp();
+		this.interactionManager.cleanUp();
 		this.bufferAfter?.remove();
 		this.bufferBefore?.remove();
 		this.codeAdditions?.remove();
@@ -368,7 +415,9 @@ var FileDiff = class {
 		this.codeUnified?.remove();
 		this.errorWrapper?.remove();
 		this.headerElement?.remove();
-		this.hoverContent?.remove();
+		this.gutterUtilityContent?.remove();
+		this.headerPrefix?.remove();
+		this.headerMetadata?.remove();
 		this.pre?.remove();
 		this.spriteSVG?.remove();
 		this.unsafeCSSStyle?.remove();
@@ -379,7 +428,9 @@ var FileDiff = class {
 		this.codeUnified = void 0;
 		this.errorWrapper = void 0;
 		this.headerElement = void 0;
-		this.hoverContent = void 0;
+		this.gutterUtilityContent = void 0;
+		this.headerPrefix = void 0;
+		this.headerMetadata = void 0;
 		this.pre = void 0;
 		this.spriteSVG = void 0;
 		this.unsafeCSSStyle = void 0;
@@ -389,7 +440,7 @@ var FileDiff = class {
 	renderSeparators(hunkData) {
 		const { hunkSeparators } = this.options;
 		if (this.isContainerManaged || this.fileContainer == null || typeof hunkSeparators !== "function") {
-			for (const { element } of this.separatorCache.values()) element.parentNode?.removeChild(element);
+			for (const { element } of this.separatorCache.values()) element.remove();
 			this.separatorCache.clear();
 			return;
 		}
@@ -398,11 +449,12 @@ var FileDiff = class {
 			const id = hunk.slotName;
 			let cache = this.separatorCache.get(id);
 			if (cache == null || !areHunkDataEqual(hunk, cache.hunkData)) {
-				cache?.element.parentNode?.removeChild(cache.element);
+				cache?.element.remove();
 				const element = document.createElement("div");
 				element.style.display = "contents";
 				element.slot = hunk.slotName;
-				element.appendChild(hunkSeparators(hunk, this));
+				const child = hunkSeparators(hunk, this);
+				if (child != null) element.appendChild(child);
 				this.fileContainer.appendChild(element);
 				cache = {
 					element,
@@ -414,12 +466,12 @@ var FileDiff = class {
 		}
 		for (const [id, { element }] of staleSeparators.entries()) {
 			this.separatorCache.delete(id);
-			element.parentNode?.removeChild(element);
+			element.remove();
 		}
 	}
 	renderAnnotations() {
 		if (this.isContainerManaged || this.fileContainer == null) {
-			for (const { element } of this.annotationCache.values()) element.parentNode?.removeChild(element);
+			for (const { element } of this.annotationCache.values()) element.remove();
 			this.annotationCache.clear();
 			return;
 		}
@@ -429,7 +481,7 @@ var FileDiff = class {
 			const id = `${index}-${getLineAnnotationName(annotation)}`;
 			let cache = this.annotationCache.get(id);
 			if (cache == null || !areDiffLineAnnotationsEqual(annotation, cache.annotation)) {
-				cache?.element.parentElement?.removeChild(cache.element);
+				cache?.element.remove();
 				const content = renderAnnotation(annotation);
 				if (content == null) continue;
 				cache = {
@@ -444,22 +496,27 @@ var FileDiff = class {
 		}
 		for (const [id, { element }] of staleAnnotations.entries()) {
 			this.annotationCache.delete(id);
-			element.parentNode?.removeChild(element);
+			element.remove();
 		}
 	}
-	renderHoverUtility() {
-		const { renderHoverUtility } = this.options;
-		if (this.fileContainer == null || renderHoverUtility == null) return;
-		const element = renderHoverUtility(this.mouseEventManager.getHoveredLine);
-		if (element != null && this.hoverContent != null) return;
+	renderGutterUtility() {
+		const renderGutterUtility = this.options.renderGutterUtility ?? this.options.renderHoverUtility;
+		if (this.fileContainer == null || renderGutterUtility == null) {
+			this.gutterUtilityContent?.remove();
+			this.gutterUtilityContent = void 0;
+			return;
+		}
+		const element = renderGutterUtility(this.interactionManager.getHoveredLine);
+		if (element != null && this.gutterUtilityContent != null) return;
 		else if (element == null) {
-			this.hoverContent?.parentNode?.removeChild(this.hoverContent);
-			this.hoverContent = void 0;
+			this.gutterUtilityContent?.remove();
+			this.gutterUtilityContent = void 0;
 			return;
 		}
-		this.hoverContent = createHoverContentNode();
-		this.hoverContent.appendChild(element);
-		this.fileContainer.appendChild(this.hoverContent);
+		const gutterUtilityContent = createGutterUtilityContentNode();
+		gutterUtilityContent.appendChild(element);
+		this.fileContainer.appendChild(gutterUtilityContent);
+		this.gutterUtilityContent = gutterUtilityContent;
 	}
 	getOrCreateFileContainer(fileContainer, parentNode) {
 		const previousContainer = this.fileContainer;
@@ -527,13 +584,26 @@ var FileDiff = class {
 			this.lastRenderedHeaderHTML = headerHTML;
 		}
 		if (this.isContainerManaged) return;
-		const { renderHeaderMetadata } = this.options;
-		if (this.headerMetadata != null) this.headerMetadata.parentNode?.removeChild(this.headerMetadata);
+		const { renderHeaderPrefix, renderHeaderMetadata } = this.options;
+		if (this.headerPrefix != null) this.headerPrefix.remove();
+		if (this.headerMetadata != null) this.headerMetadata.remove();
+		const prefix = renderHeaderPrefix?.({
+			deletionFile: this.deletionFile,
+			additionFile: this.additionFile,
+			fileDiff: this.fileDiff
+		}) ?? void 0;
 		const content = renderHeaderMetadata?.({
 			deletionFile: this.deletionFile,
 			additionFile: this.additionFile,
 			fileDiff: this.fileDiff
 		}) ?? void 0;
+		if (prefix != null) {
+			this.headerPrefix = document.createElement("div");
+			this.headerPrefix.slot = HEADER_PREFIX_SLOT_ID;
+			if (prefix instanceof Element) this.headerPrefix.appendChild(prefix);
+			else this.headerPrefix.innerText = `${prefix}`;
+			container.appendChild(this.headerPrefix);
+		}
 		if (content != null) {
 			this.headerMetadata = document.createElement("div");
 			this.headerMetadata.slot = HEADER_METADATA_SLOT_ID;
@@ -554,6 +624,7 @@ var FileDiff = class {
 	}
 	applyHunksToDOM(pre, result) {
 		const { overflow = "scroll" } = this.options;
+		const containerSize = (this.options.hunkSeparators ?? "line-info") === "line-info";
 		const rowSpan = overflow === "wrap" ? result.rowCount : void 0;
 		this.cleanupErrorWrapper();
 		this.applyPreNodeAttributes(pre, result);
@@ -571,7 +642,8 @@ var FileDiff = class {
 			this.codeUnified = getOrCreateCodeNode({
 				code: this.codeUnified,
 				columnType: "unified",
-				rowSpan
+				rowSpan,
+				containerSize
 			});
 			this.codeUnified.innerHTML = this.hunksRenderer.renderPartialHTML(unifiedAST);
 			codeElements.push(this.codeUnified);
@@ -583,7 +655,8 @@ var FileDiff = class {
 				this.codeDeletions = getOrCreateCodeNode({
 					code: this.codeDeletions,
 					columnType: "deletions",
-					rowSpan
+					rowSpan,
+					containerSize
 				});
 				this.codeDeletions.innerHTML = this.hunksRenderer.renderPartialHTML(deletionsAST);
 				codeElements.push(this.codeDeletions);
@@ -598,7 +671,8 @@ var FileDiff = class {
 				this.codeAdditions = getOrCreateCodeNode({
 					code: this.codeAdditions,
 					columnType: "additions",
-					rowSpan
+					rowSpan,
+					containerSize
 				});
 				this.codeAdditions.innerHTML = this.hunksRenderer.renderPartialHTML(additionsAST);
 				codeElements.push(this.codeAdditions);
@@ -661,7 +735,7 @@ var FileDiff = class {
 			if (result == null) return;
 			if (diffStyle === "unified" && !Array.isArray(codeElements)) this.insertPartialHTML(diffStyle, codeElements, result, insertPosition);
 			else if (diffStyle === "split" && Array.isArray(codeElements)) this.insertPartialHTML(diffStyle, codeElements, result, insertPosition);
-			else throw new Error("u done fuked up, again");
+			else throw new Error("FileDiff.applyPartialRender.applyChunk: invalid chunk application");
 			rowCount += result.rowCount;
 		};
 		this.cleanupErrorWrapper();
@@ -792,7 +866,7 @@ var FileDiff = class {
 			}
 			if (gutterElement.dataset.gutterBuffer === "buffer" && "contentBuffer" in contentElement.dataset) {
 				const totalRows = this.getBufferSize(contentElement.dataset);
-				if (totalRows == null) throw new Error("u fuked up");
+				if (totalRows == null) throw new Error("FileDiff.trimColumnRows: invalid element");
 				if (preTrimCount > 0) {
 					const rowsToRemove = Math.min(preTrimCount, totalRows);
 					const newSize = totalRows - rowsToRemove;
@@ -886,11 +960,11 @@ var FileDiff = class {
 		const { disableVirtualizationBuffers = false } = this.options;
 		if (disableVirtualizationBuffers || renderRange == null) {
 			if (this.bufferBefore != null) {
-				this.bufferBefore.parentNode?.removeChild(this.bufferBefore);
+				this.bufferBefore.remove();
 				this.bufferBefore = void 0;
 			}
 			if (this.bufferAfter != null) {
-				this.bufferAfter.parentNode?.removeChild(this.bufferAfter);
+				this.bufferAfter.remove();
 				this.bufferAfter = void 0;
 			}
 			return;
@@ -904,7 +978,7 @@ var FileDiff = class {
 			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.remove();
 			this.bufferBefore = void 0;
 		}
 		if (renderRange.bufferAfter > 0) {
@@ -916,11 +990,11 @@ var FileDiff = class {
 			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.remove();
 			this.bufferAfter = void 0;
 		}
 	}
-	applyPreNodeAttributes(pre, { themeStyles, baseThemeType, additionsContentAST, deletionsContentAST, totalLines }) {
+	applyPreNodeAttributes(pre, { themeStyles, baseThemeType, additionsContentAST, deletionsContentAST, totalLines }, customProperties) {
 		const { diffIndicators = "bars", disableBackground = false, disableLineNumbers = false, overflow = "scroll", themeType = "system", diffStyle = "split" } = this.options;
 		const preProperties = {
 			type: "diff",
@@ -931,7 +1005,8 @@ var FileDiff = class {
 			split: diffStyle === "unified" ? false : additionsContentAST != null && deletionsContentAST != null,
 			themeStyles,
 			themeType: baseThemeType ?? themeType,
-			totalLines
+			totalLines,
+			customProperties
 		};
 		if (arePrePropertiesEqual(preProperties, this.appliedPreAttributes)) return;
 		setPreNodeProperties(pre, preProperties);
@@ -941,7 +1016,7 @@ var FileDiff = class {
 		this.cleanupErrorWrapper();
 		const pre = this.getOrCreatePreNode(container);
 		pre.innerHTML = "";
-		pre.parentNode?.removeChild(pre);
+		pre.remove();
 		this.pre = void 0;
 		this.appliedPreAttributes = void 0;
 		const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: "open" });
@@ -959,7 +1034,7 @@ var FileDiff = class {
 		this.errorWrapper.appendChild(errorStack);
 	}
 	cleanupErrorWrapper() {
-		this.errorWrapper?.parentNode?.removeChild(this.errorWrapper);
+		this.errorWrapper?.remove();
 		this.errorWrapper = void 0;
 	}
 };