@pierre/diffs 1.1.5 → 1.1.7

package/dist/components/FileDiff.js

@@ -1,4 +1,4 @@
-import { DEFAULT_THEMES, DIFFS_TAG_NAME, EMPTY_RENDER_RANGE, HEADER_METADATA_SLOT_ID, HEADER_PREFIX_SLOT_ID, UNSAFE_CSS_ATTRIBUTE } from "../constants.js";
+import { CUSTOM_HEADER_SLOT_ID, DEFAULT_THEMES, DIFFS_TAG_NAME, EMPTY_RENDER_RANGE, HEADER_METADATA_SLOT_ID, HEADER_PREFIX_SLOT_ID, THEME_CSS_ATTRIBUTE, 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";
@@ -9,8 +9,9 @@ import { arePrePropertiesEqual } from "../utils/arePrePropertiesEqual.js";
 import { createAnnotationWrapperNode } from "../utils/createAnnotationWrapperNode.js";
 import { createGutterUtilityContentNode } from "../utils/createGutterUtilityContentNode.js";
 import { createUnsafeCSSStyleNode } from "../utils/createUnsafeCSSStyleNode.js";
-import { wrapUnsafeCSS } from "../utils/cssWrappers.js";
+import { wrapThemeCSS, wrapUnsafeCSS } from "../utils/cssWrappers.js";
 import { getOrCreateCodeNode } from "../utils/getOrCreateCodeNode.js";
+import { upsertHostThemeStyle } from "../utils/hostTheme.js";
 import { prerenderHTMLIfNecessary } from "../utils/prerenderHTMLIfNecessary.js";
 import { setPreNodeProperties } from "../utils/setWrapperNodeProps.js";
 import { DiffsContainerLoaded } from "./web-components.js";
@@ -34,11 +35,15 @@ var FileDiff = class {
 	codeAdditions;
 	bufferBefore;
 	bufferAfter;
+	themeCSSStyle;
+	appliedThemeCSS;
 	unsafeCSSStyle;
+	appliedUnsafeCSS;
 	gutterUtilityContent;
 	headerElement;
 	headerPrefix;
 	headerMetadata;
+	headerCustom;
 	separatorCache = /* @__PURE__ */ new Map();
 	errorWrapper;
 	placeHolder;
@@ -73,6 +78,7 @@ var FileDiff = class {
 	getHunksRendererOptions(options) {
 		return {
 			...options,
+			headerRenderMode: options.renderCustomHeader != null ? "custom" : "default",
 			hunkSeparators: typeof options.hunkSeparators === "function" ? "custom" : options.hunkSeparators
 		};
 	}
@@ -147,18 +153,8 @@ var FileDiff = class {
 	setThemeType(themeType) {
 		if ((this.options.themeType ?? "system") === themeType) return;
 		this.mergeOptions({ themeType });
-		this.hunksRenderer.setThemeType(themeType);
-		if (this.headerElement != null) if (themeType === "system") delete this.headerElement.dataset.themeType;
-		else this.headerElement.dataset.themeType = themeType;
-		if (this.pre != null) switch (themeType) {
-			case "system":
-				delete this.pre.dataset.themeType;
-				break;
-			case "light":
-			case "dark":
-				this.pre.dataset.themeType = themeType;
-				break;
-		}
+		if (typeof this.options.theme === "string" || this.fileContainer == null || this.appliedThemeCSS == null) return;
+		this.applyThemeState(this.fileContainer, this.appliedThemeCSS.themeStyles, themeType, this.appliedThemeCSS.baseThemeType);
 	}
 	getHoveredLine = () => {
 		return this.interactionManager.getHoveredLine();
@@ -195,10 +191,15 @@ var FileDiff = class {
 		this.headerElement = void 0;
 		this.headerPrefix = void 0;
 		this.headerMetadata = void 0;
+		this.headerCustom = void 0;
 		this.lastRenderedHeaderHTML = void 0;
 		this.errorWrapper = void 0;
 		this.spriteSVG = void 0;
 		this.lastRowCount = void 0;
+		this.themeCSSStyle = void 0;
+		this.appliedThemeCSS = void 0;
+		this.unsafeCSSStyle = void 0;
+		this.appliedUnsafeCSS = void 0;
 		if (recycle) this.hunksRenderer.recycle();
 		else {
 			this.hunksRenderer.cleanUp();
@@ -214,8 +215,21 @@ var FileDiff = class {
 		this.workerManager?.subscribeToThemeChanges(this);
 	}
 	hydrate(props) {
-		const { overflow = "scroll", diffStyle = "split" } = this.options;
-		const { fileContainer, prerenderedHTML, preventEmit = false } = props;
+		const { fileContainer, prerenderedHTML, preventEmit = false, lineAnnotations, oldFile, newFile, fileDiff } = props;
+		this.hydrateElements(fileContainer, prerenderedHTML);
+		if (this.pre == null && this.headerElement == null) this.render({
+			...props,
+			preventEmit: true
+		});
+		else this.hydrationSetup({
+			fileDiff,
+			oldFile,
+			newFile,
+			lineAnnotations
+		});
+		if (!preventEmit) this.emitPostRender();
+	}
+	hydrateElements(fileContainer, prerenderedHTML) {
 		prerenderHTMLIfNecessary(fileContainer, prerenderedHTML);
 		for (const element of fileContainer.shadowRoot?.children ?? []) {
 			if (element instanceof SVGElement) {
@@ -237,33 +251,36 @@ var FileDiff = class {
 				this.headerElement = element;
 				continue;
 			}
+			if (element instanceof HTMLStyleElement && element.hasAttribute(THEME_CSS_ATTRIBUTE)) {
+				this.themeCSSStyle = element;
+				continue;
+			}
 			if (element instanceof HTMLStyleElement && element.hasAttribute(UNSAFE_CSS_ATTRIBUTE)) {
 				this.unsafeCSSStyle = element;
+				this.appliedUnsafeCSS = element.textContent;
 				continue;
 			}
 		}
-		if (this.pre != null) this.syncCodeNodesFromPre(this.pre);
-		if (this.pre == null) this.render({
-			...props,
-			preventEmit: true
-		});
-		else {
-			const { lineAnnotations, oldFile, newFile, fileDiff } = props;
-			this.fileContainer = fileContainer;
-			delete this.pre.dataset.dehydrated;
-			this.lineAnnotations = lineAnnotations ?? this.lineAnnotations;
-			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();
-			this.renderGutterUtility();
-			this.injectUnsafeCSS();
-			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);
+		if (this.pre != null) {
+			this.syncCodeNodesFromPre(this.pre);
+			this.pre.removeAttribute("data-dehydrated");
 		}
-		if (!preventEmit) this.emitPostRender();
+		this.fileContainer = fileContainer;
+	}
+	hydrationSetup({ fileDiff, oldFile, newFile, lineAnnotations }) {
+		const { diffStyle = "split", overflow = "scroll" } = this.options;
+		this.lineAnnotations = lineAnnotations ?? this.lineAnnotations;
+		this.additionFile = newFile;
+		this.deletionFile = oldFile;
+		this.fileDiff = fileDiff ?? (oldFile != null && newFile != null ? parseDiffFromFile(oldFile, newFile) : void 0);
+		if (this.pre == null) return;
+		this.hunksRenderer.hydrate(this.fileDiff);
+		this.renderAnnotations();
+		this.renderGutterUtility();
+		this.injectUnsafeCSS();
+		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);
 	}
 	rerender() {
 		if (!this.enabled || this.fileDiff == null && this.additionFile == null && this.deletionFile == null) return;
@@ -298,26 +315,16 @@ var FileDiff = class {
 		}
 		if (lineAnnotations != null) this.setLineAnnotations(lineAnnotations);
 		if (this.fileDiff == null) return false;
-		this.hunksRenderer.setOptions({
-			...this.options,
-			hunkSeparators: typeof this.options.hunkSeparators === "function" ? "custom" : this.options.hunkSeparators
-		});
+		this.hunksRenderer.setOptions(this.getHunksRendererOptions(this.options));
 		this.hunksRenderer.setLineAnnotations(this.lineAnnotations);
-		const { diffStyle = "split", disableErrorHandling = false, disableFileHeader = false, overflow = "scroll" } = this.options;
+		const { diffStyle = "split", disableErrorHandling = false, disableFileHeader = false, overflow = "scroll", themeType = "system" } = this.options;
 		if (disableFileHeader) {
 			if (this.headerElement != null) {
 				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;
-			}
+			this.clearHeaderSlots();
 		}
 		fileContainer = this.getOrCreateFileContainer(fileContainer, containerWrapper);
 		if (collapsed) {
@@ -325,6 +332,7 @@ var FileDiff = class {
 			this.clearAuxiliaryNodes();
 			try {
 				const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, EMPTY_RENDER_RANGE);
+				if (hunksResult != null) this.applyThemeState(fileContainer, hunksResult.themeStyles, themeType, hunksResult.baseThemeType);
 				if (hunksResult?.headerElement != null) this.applyHeaderToDOM(hunksResult.headerElement, fileContainer);
 				this.renderSeparators([]);
 				this.injectUnsafeCSS();
@@ -347,6 +355,7 @@ var FileDiff = class {
 					if (this.workerManager?.isInitialized() === false) this.workerManager.initialize().then(() => this.rerender());
 					return false;
 				}
+				this.applyThemeState(fileContainer, hunksResult.themeStyles, themeType, hunksResult.baseThemeType);
 				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) {
@@ -427,8 +436,10 @@ var FileDiff = class {
 		this.gutterUtilityContent?.remove();
 		this.headerPrefix?.remove();
 		this.headerMetadata?.remove();
+		this.headerCustom?.remove();
 		this.pre?.remove();
 		this.spriteSVG?.remove();
+		this.themeCSSStyle?.remove();
 		this.unsafeCSSStyle?.remove();
 		this.bufferAfter = void 0;
 		this.bufferBefore = void 0;
@@ -440,9 +451,13 @@ var FileDiff = class {
 		this.gutterUtilityContent = void 0;
 		this.headerPrefix = void 0;
 		this.headerMetadata = void 0;
+		this.headerCustom = void 0;
 		this.pre = void 0;
 		this.spriteSVG = void 0;
+		this.themeCSSStyle = void 0;
+		this.appliedThemeCSS = void 0;
 		this.unsafeCSSStyle = void 0;
+		this.appliedUnsafeCSS = void 0;
 		this.lastRenderedHeaderHTML = void 0;
 		this.lastRowCount = void 0;
 	}
@@ -572,15 +587,16 @@ var FileDiff = class {
 		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;
+			if (child.hasAttribute("data-unified")) this.codeUnified = child;
+			else if (child.hasAttribute("data-deletions")) this.codeDeletions = child;
+			else if (child.hasAttribute("data-additions")) this.codeAdditions = child;
 		}
 	}
 	applyHeaderToDOM(headerAST, container) {
 		this.cleanupErrorWrapper();
 		this.placeHolder?.remove();
 		this.placeHolder = void 0;
+		const { fileDiff } = this;
 		const headerHTML = toHtml(headerAST);
 		if (headerHTML !== this.lastRenderedHeaderHTML) {
 			const tempDiv = document.createElement("div");
@@ -592,44 +608,84 @@ var FileDiff = class {
 			this.headerElement = newHeader;
 			this.lastRenderedHeaderHTML = headerHTML;
 		}
-		if (this.isContainerManaged) return;
-		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 (this.isContainerManaged || fileDiff == null) return;
+		const { renderCustomHeader, renderHeaderPrefix, renderHeaderMetadata } = this.options;
+		if (renderCustomHeader != null) {
+			const content$1 = renderCustomHeader(fileDiff) ?? void 0;
+			this.headerCustom = this.upsertHeaderSlotElement(container, this.headerCustom, CUSTOM_HEADER_SLOT_ID, content$1);
+			this.headerPrefix?.remove();
+			this.headerMetadata?.remove();
+			this.headerPrefix = void 0;
+			this.headerMetadata = void 0;
+			return;
 		}
-		if (content != null) {
-			this.headerMetadata = document.createElement("div");
-			this.headerMetadata.slot = HEADER_METADATA_SLOT_ID;
-			if (content instanceof Element) this.headerMetadata.appendChild(content);
-			else this.headerMetadata.innerText = `${content}`;
-			container.appendChild(this.headerMetadata);
+		const prefix = renderHeaderPrefix?.(fileDiff) ?? void 0;
+		const content = renderHeaderMetadata?.(fileDiff) ?? void 0;
+		this.headerPrefix = this.upsertHeaderSlotElement(container, this.headerPrefix, HEADER_PREFIX_SLOT_ID, prefix);
+		this.headerMetadata = this.upsertHeaderSlotElement(container, this.headerMetadata, HEADER_METADATA_SLOT_ID, content);
+		this.headerCustom?.remove();
+		this.headerCustom = void 0;
+	}
+	clearHeaderSlots() {
+		this.headerPrefix?.remove();
+		this.headerMetadata?.remove();
+		this.headerCustom?.remove();
+		this.headerPrefix = void 0;
+		this.headerMetadata = void 0;
+		this.headerCustom = void 0;
+	}
+	upsertHeaderSlotElement(container, current, slot, content) {
+		if (content == null) {
+			current?.remove();
+			return;
 		}
+		const element = current ?? this.createHeaderSlotElement(slot);
+		if (current == null) container.appendChild(element);
+		this.replaceHeaderSlotContent(element, content);
+		return element;
+	}
+	replaceHeaderSlotContent(element, content) {
+		element.replaceChildren();
+		if (content instanceof Element) element.appendChild(content);
+		else element.innerText = `${content}`;
+	}
+	createHeaderSlotElement(slot) {
+		const element = document.createElement("div");
+		element.slot = slot;
+		return element;
 	}
 	injectUnsafeCSS() {
-		if (this.fileContainer?.shadowRoot == null) return;
 		const { unsafeCSS } = this.options;
-		if (unsafeCSS == null || unsafeCSS === "") return;
-		if (this.unsafeCSSStyle == null) {
-			this.unsafeCSSStyle = createUnsafeCSSStyleNode();
-			this.fileContainer.shadowRoot.appendChild(this.unsafeCSSStyle);
+		const shadowRoot = this.fileContainer?.shadowRoot;
+		if (shadowRoot == null) return;
+		if (unsafeCSS == null || unsafeCSS === "") {
+			if (this.unsafeCSSStyle != null) {
+				this.unsafeCSSStyle.remove();
+				this.unsafeCSSStyle = void 0;
+			}
+			this.appliedUnsafeCSS = void 0;
+			return;
 		}
-		this.unsafeCSSStyle.innerText = wrapUnsafeCSS(unsafeCSS);
+		if (this.unsafeCSSStyle?.parentNode === shadowRoot && this.appliedUnsafeCSS === unsafeCSS) return;
+		this.unsafeCSSStyle ??= createUnsafeCSSStyleNode();
+		if (this.unsafeCSSStyle.parentNode !== shadowRoot) shadowRoot.appendChild(this.unsafeCSSStyle);
+		this.unsafeCSSStyle.textContent = wrapUnsafeCSS(unsafeCSS);
+		this.appliedUnsafeCSS = unsafeCSS;
+	}
+	applyThemeState(container, themeStyles, themeType, baseThemeType) {
+		const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: "open" });
+		const effectiveThemeType = baseThemeType ?? themeType;
+		if (this.themeCSSStyle?.parentNode === shadowRoot && this.appliedThemeCSS?.themeStyles === themeStyles && this.appliedThemeCSS.themeType === effectiveThemeType) return;
+		this.themeCSSStyle = upsertHostThemeStyle({
+			shadowRoot,
+			currentNode: this.themeCSSStyle,
+			themeCSS: wrapThemeCSS(themeStyles, effectiveThemeType)
+		});
+		this.appliedThemeCSS = this.themeCSSStyle != null ? {
+			themeStyles,
+			themeType: effectiveThemeType,
+			baseThemeType
+		} : void 0;
 	}
 	applyHunksToDOM(pre, result) {
 		const { overflow = "scroll" } = this.options;
@@ -1003,8 +1059,8 @@ var FileDiff = class {
 			this.bufferAfter = void 0;
 		}
 	}
-	applyPreNodeAttributes(pre, { themeStyles, baseThemeType, additionsContentAST, deletionsContentAST, totalLines }, customProperties) {
-		const { diffIndicators = "bars", disableBackground = false, disableLineNumbers = false, overflow = "scroll", themeType = "system", diffStyle = "split" } = this.options;
+	applyPreNodeAttributes(pre, { additionsContentAST, deletionsContentAST, totalLines }, customProperties) {
+		const { diffIndicators = "bars", disableBackground = false, disableLineNumbers = false, overflow = "scroll", diffStyle = "split" } = this.options;
 		const preProperties = {
 			type: "diff",
 			diffIndicators,
@@ -1012,8 +1068,6 @@ var FileDiff = class {
 			disableLineNumbers,
 			overflow,
 			split: diffStyle === "unified" ? false : additionsContentAST != null && deletionsContentAST != null,
-			themeStyles,
-			themeType: baseThemeType ?? themeType,
 			totalLines,
 			customProperties
 		};