@pierre/diffs 1.3.0-beta.4 → 1.3.0-beta.6

package/dist/components/FileDiff.js

@@ -1,4 +1,4 @@
-import { CUSTOM_HEADER_SLOT_ID, DEFAULT_THEMES, DEFAULT_TOKENIZE_MAX_LENGTH, DIFFS_TAG_NAME, EMPTY_RENDER_RANGE, HEADER_METADATA_SLOT_ID, HEADER_PREFIX_SLOT_ID, THEME_CSS_ATTRIBUTE, UNSAFE_CSS_ATTRIBUTE } from "../constants.js";
+import { CUSTOM_HEADER_SLOT_ID, DEFAULT_THEMES, EMPTY_RENDER_RANGE, HEADER_FILENAME_SUFFIX_SLOT_ID, HEADER_METADATA_SLOT_ID, HEADER_PREFIX_SLOT_ID } from "../constants.js";
 import { areThemesEqual } from "../utils/areThemesEqual.js";
 import { isStyleNode } from "../utils/isStyleNode.js";
 import { areFilesEqual } from "../utils/areFilesEqual.js";
@@ -17,7 +17,7 @@ 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";
+import "./web-components.js";
 import { parseDiffFromFile } from "../utils/parseDiffFromFile.js";
 import { ScrollSyncManager } from "../managers/ScrollSyncManager.js";
 import { isDiffPlainText } from "../utils/isDiffPlainText.js";
@@ -26,11 +26,13 @@ import { areDiffLineAnnotationsEqual } from "../utils/areDiffLineAnnotationsEqua
 import { areHunkDataEqual } from "../utils/areHunkDataEqual.js";
 import { getDiffHunksRendererOptions } from "../utils/getDiffHunksRendererOptions.js";
 import { toHtml } from "hast-util-to-html";
-
 //#region src/components/FileDiff.ts
 let instanceId = -1;
 var FileDiff = class {
-	static LoadedCustomComponent = DiffsContainerLoaded;
+	options;
+	workerManager;
+	isContainerManaged;
+	static LoadedCustomComponent = true;
 	__id = `file-diff:${++instanceId}`;
 	type = "file-diff";
 	fileContainer;
@@ -49,6 +51,7 @@ var FileDiff = class {
 	gutterUtilityContent;
 	headerElement;
 	headerPrefix;
+	headerFilenameSuffix;
 	headerMetadata;
 	headerCustom;
 	separatorCache = /* @__PURE__ */ new Map();
@@ -72,6 +75,7 @@ var FileDiff = class {
 	mounted = false;
 	enabled = true;
 	editor;
+	fastRefreshTimeout;
 	constructor(options = { theme: DEFAULT_THEMES }, workerManager, isContainerManaged = false) {
 		this.options = options;
 		this.workerManager = workerManager;
@@ -183,8 +187,7 @@ var FileDiff = class {
 	setLineAnnotations(lineAnnotations) {
 		this.lineAnnotations = lineAnnotations;
 	}
-	canPartiallyRender(forceRender, annotationsChanged, didContentChange, didEdit) {
-		if (didEdit) return true;
+	canPartiallyRender(forceRender, annotationsChanged, didContentChange) {
 		if (forceRender || annotationsChanged || didContentChange || typeof this.options.hunkSeparators === "function") return false;
 		return true;
 	}
@@ -214,18 +217,21 @@ var FileDiff = class {
 		if (!this.isContainerManaged) this.fileContainer?.remove();
 		this.fileContainer = void 0;
 		this.mounted = false;
-		this.lineAnnotations = [];
+		if (!recycle) this.lineAnnotations = [];
 		this.clearAuxiliaryNodes();
 		this.annotationCache.clear();
 		this.pre = void 0;
 		this.codeUnified = void 0;
 		this.codeDeletions = void 0;
 		this.codeAdditions = void 0;
+		this.bufferBefore?.remove();
 		this.bufferBefore = void 0;
+		this.bufferAfter?.remove();
 		this.bufferAfter = void 0;
 		this.appliedPreAttributes = void 0;
 		this.headerElement = void 0;
 		this.headerPrefix = void 0;
+		this.headerFilenameSuffix = void 0;
 		this.headerMetadata = void 0;
 		this.headerCustom = void 0;
 		this.placeHolder = void 0;
@@ -250,6 +256,10 @@ var FileDiff = class {
 		this.enabled = false;
 		this.editor?.cleanUp();
 		this.editor = void 0;
+		if (this.fastRefreshTimeout != null) {
+			clearTimeout(this.fastRefreshTimeout);
+			this.fastRefreshTimeout = void 0;
+		}
 	}
 	virtualizedSetup() {
 		this.enabled = true;
@@ -301,11 +311,11 @@ var FileDiff = class {
 				this.headerElement = element;
 				continue;
 			}
-			if (element instanceof HTMLStyleElement && element.hasAttribute(THEME_CSS_ATTRIBUTE)) {
+			if (element instanceof HTMLStyleElement && element.hasAttribute("data-theme-css")) {
 				this.themeCSSStyle = element;
 				continue;
 			}
-			if (element instanceof HTMLStyleElement && element.hasAttribute(UNSAFE_CSS_ATTRIBUTE)) {
+			if (element instanceof HTMLStyleElement && element.hasAttribute("data-unsafe-css")) {
 				this.unsafeCSSStyle = element;
 				this.appliedUnsafeCSS = element.textContent;
 				continue;
@@ -350,16 +360,16 @@ var FileDiff = class {
 		this.hunksRenderer.expandHunk(hunkIndex, direction, expansionLineCountOverride);
 		this.rerender();
 	};
-	render({ oldFile, newFile, fileDiff, deferManagers = false, didEdit = false, forceRender = false, preventEmit = false, lineAnnotations, fileContainer, containerWrapper, renderRange }) {
+	render({ oldFile, newFile, fileDiff, deferManagers = false, forceRender = false, preventEmit = false, lineAnnotations, fileContainer, containerWrapper, renderRange }) {
 		if (!this.enabled) throw new Error("FileDiff.render: attempting to call render after cleaned up");
-		this.editor?.postponeBackgroundTokenizeToNextFrame();
+		this.editor?.__postponeBackgroundTokenizeToNextFrame();
 		const { collapsed = false, themeType = "system" } = this.options;
 		const nextRenderRange = collapsed ? void 0 : renderRange;
 		const themeChanged = this.hasThemeChanged();
 		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 (!collapsed && areRenderRangesEqual(nextRenderRange, this.renderRange) && !didEdit && !forceRender && !annotationsChanged && !themeChanged && (fileDiff != null && fileDiff === this.fileDiff || fileDiff == null && !filesDidChange)) return this.applyCachedThemeState(themeType);
+		if (!collapsed && areRenderRangesEqual(nextRenderRange, this.renderRange) && !forceRender && !annotationsChanged && !themeChanged && (fileDiff != null && fileDiff === this.fileDiff || fileDiff == null && !filesDidChange)) return this.applyCachedThemeState(themeType);
 		const { renderRange: previousRenderRange } = this;
 		this.renderRange = nextRenderRange;
 		this.deletionFile = oldFile;
@@ -405,7 +415,7 @@ var FileDiff = class {
 		}
 		try {
 			const pre = this.getOrCreatePreNode(fileContainer);
-			if (!(this.canPartiallyRender(forceRender, annotationsChanged, filesDidChange || diffDidChange || themeChanged, didEdit) && this.applyPartialRender({
+			if (!(this.canPartiallyRender(forceRender, annotationsChanged, filesDidChange || diffDidChange || themeChanged) && this.applyPartialRender({
 				previousRenderRange,
 				renderRange: nextRenderRange
 			}))) {
@@ -422,18 +432,14 @@ var FileDiff = class {
 					this.pre = void 0;
 				}
 				this.renderSeparators(hunksResult.hunkData);
-			} else if (didEdit && nextRenderRange != null) this.updateLineType(nextRenderRange);
+			}
 			this.applyBuffers(pre, nextRenderRange);
 			this.injectUnsafeCSS();
 			this.renderAnnotations();
 			this.renderGutterUtility();
 			this.managersDirty = true;
 			if (!deferManagers) this.flushManagers();
-			const editor = this.editor;
-			const file = this.getAdditionFile();
-			if (editor != null && file != null) this.hunksRenderer.initializeHighlighter().then((highlighter) => {
-				editor.syncToRenderedView(highlighter, fileContainer, file, diffDidChange, this.lineAnnotations, this.renderRange);
-			});
+			if (this.editor != null) this.syncRenderViewToEditor();
 		} catch (error) {
 			if (disableErrorHandling) throw error;
 			console.error(error);
@@ -456,16 +462,22 @@ var FileDiff = class {
 		this.mounted = true;
 		onPostRender?.(fileContainer, this, phase);
 	}
-	attachEditor(editor) {
-		this.editor?.cleanUp();
+	syncRenderViewToEditor() {
+		const editor = this.editor;
 		const fileContainer = this.fileContainer;
-		const file = this.getAdditionFile();
-		if (fileContainer != null && file != null) this.hunksRenderer.initializeHighlighter().then((highlighter) => {
-			editor.syncToRenderedView(highlighter, fileContainer, file, false, this.lineAnnotations, this.renderRange);
+		const fileDiff = this.fileDiff;
+		if (editor != null && fileContainer != null && fileDiff != null && !fileDiff.isPartial) this.hunksRenderer.initializeHighlighter().then((highlighter) => {
+			editor.__syncRenderView(highlighter, fileContainer, fileDiff, this.lineAnnotations, this.renderRange);
 		});
+	}
+	attachEditor(editor) {
+		this.editor?.cleanUp();
 		this.editor = editor;
+		this.interactionManager.setEditorAttached(true);
+		this.syncRenderViewToEditor();
 		return () => {
 			this.editor = void 0;
+			this.interactionManager.setEditorAttached(false);
 		};
 	}
 	applyDocumentChange(textDocument, newLineAnnotations) {
@@ -480,29 +492,22 @@ var FileDiff = class {
 			this.renderAnnotations();
 		}
 	}
-	updateRenderCache(dirtyLines, themeType, shouldRerender) {
-		this.hunksRenderer.updateRenderCache(dirtyLines, themeType);
-		if (shouldRerender === true) this.render({
-			didEdit: true,
-			renderRange: this.renderRange
-		});
+	rerenderFromDocument(textDocument) {
+		this.hunksRenderer.applyDocumentChange(textDocument);
+		const renderDiff = this.hunksRenderer.getRenderDiff();
+		if (renderDiff != null) this.fileDiff = renderDiff;
+		this.hunksRenderer.clearRenderCache();
+		this.rerender();
 	}
-	getAdditionFile() {
-		if (this.additionFile != null) return this.additionFile;
-		const fileDiff = this.fileDiff;
-		if (fileDiff != null && !fileDiff.isPartial) {
-			const { name, lang, cacheKey } = fileDiff;
-			const file = {
-				name,
-				lang,
-				cacheKey
-			};
-			Object.defineProperty(file, "contents", {
-				enumerable: true,
-				get: () => fileDiff.additionLines.join("")
-			});
-			return file;
-		}
+	updateRenderCache(dirtyLines, themeType, shouldRefreshView, skipDiffRecompute) {
+		this.hunksRenderer.updateRenderCache(dirtyLines, themeType, skipDiffRecompute);
+		if (shouldRefreshView === true) if (this.options.diffStyle === "split") {
+			if (this.fastRefreshTimeout != null) clearTimeout(this.fastRefreshTimeout);
+			this.fastRefreshTimeout = setTimeout(() => {
+				this.fastRefreshTimeout = void 0;
+				this.fastRefreshDiffView();
+			}, 100);
+		} else this.refreshDiffView();
 	}
 	removeRenderedCode() {
 		this.resizeManager.cleanUp();
@@ -547,7 +552,7 @@ var FileDiff = class {
 	primeHighlightCache() {
 		const { fileDiff, workerManager } = this;
 		if (fileDiff == null || workerManager == null || isDiffPlainText(fileDiff)) return;
-		const tokenizeMaxLength = this.options.tokenizeMaxLength ?? DEFAULT_TOKENIZE_MAX_LENGTH;
+		const tokenizeMaxLength = this.options.tokenizeMaxLength ?? 1e5;
 		if (Math.max(fileDiff.additionLines.length, fileDiff.deletionLines.length) > tokenizeMaxLength) return;
 		workerManager.primeDiffHighlightCache(fileDiff);
 	}
@@ -564,6 +569,7 @@ var FileDiff = class {
 		this.errorWrapper?.remove();
 		this.headerElement?.remove();
 		this.headerPrefix?.remove();
+		this.headerFilenameSuffix?.remove();
 		this.headerMetadata?.remove();
 		this.headerCustom?.remove();
 		this.pre?.remove();
@@ -578,6 +584,7 @@ var FileDiff = class {
 		this.errorWrapper = void 0;
 		this.headerElement = void 0;
 		this.headerPrefix = void 0;
+		this.headerFilenameSuffix = void 0;
 		this.headerMetadata = void 0;
 		this.headerCustom = void 0;
 		this.pre = void 0;
@@ -674,7 +681,7 @@ var FileDiff = class {
 	}
 	getOrCreateFileContainer(fileContainer, parentNode) {
 		const { fileContainer: previousContainer } = this;
-		const nextContainer = fileContainer ?? previousContainer ?? document.createElement(DIFFS_TAG_NAME);
+		const nextContainer = fileContainer ?? previousContainer ?? document.createElement("diffs-container");
 		const containerChanged = previousContainer !== nextContainer;
 		if (containerChanged) this.emitPostRender(true);
 		this.fileContainer = nextContainer;
@@ -691,10 +698,10 @@ var FileDiff = class {
 		const { shadowRoot } = fileContainer;
 		if (shadowRoot == null) return;
 		for (const element of shadowRoot.children) if (element instanceof SVGElement) this.spriteSVG ??= element;
-		else if (isStyleNode(element) && element.hasAttribute(THEME_CSS_ATTRIBUTE)) {
+		else if (isStyleNode(element) && element.hasAttribute("data-theme-css")) {
 			this.themeCSSStyle ??= element;
 			this.hasAdoptedThemeCSS = true;
-		} else if (isStyleNode(element) && element.hasAttribute(UNSAFE_CSS_ATTRIBUTE)) {
+		} else if (isStyleNode(element) && element.hasAttribute("data-unsafe-css")) {
 			this.unsafeCSSStyle ??= element;
 			this.appliedUnsafeCSS ??= this.options.unsafeCSS ?? void 0;
 		}
@@ -755,28 +762,34 @@ var FileDiff = class {
 			this.lastRenderedHeaderHTML = headerHTML;
 		}
 		if (this.isContainerManaged || fileDiff == null) return;
-		const { renderCustomHeader, renderHeaderPrefix, renderHeaderMetadata } = this.options;
+		const { renderCustomHeader, renderHeaderPrefix, renderHeaderFilenameSuffix, 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);
+			const content = renderCustomHeader(fileDiff) ?? void 0;
+			this.headerCustom = this.upsertHeaderSlotElement(container, this.headerCustom, CUSTOM_HEADER_SLOT_ID, content);
 			this.headerPrefix?.remove();
+			this.headerFilenameSuffix?.remove();
 			this.headerMetadata?.remove();
 			this.headerPrefix = void 0;
+			this.headerFilenameSuffix = void 0;
 			this.headerMetadata = void 0;
 			return;
 		}
 		const prefix = renderHeaderPrefix?.(fileDiff) ?? void 0;
+		const suffix = renderHeaderFilenameSuffix?.(fileDiff) ?? void 0;
 		const content = renderHeaderMetadata?.(fileDiff) ?? void 0;
 		this.headerPrefix = this.upsertHeaderSlotElement(container, this.headerPrefix, HEADER_PREFIX_SLOT_ID, prefix);
+		this.headerFilenameSuffix = this.upsertHeaderSlotElement(container, this.headerFilenameSuffix, HEADER_FILENAME_SUFFIX_SLOT_ID, suffix);
 		this.headerMetadata = this.upsertHeaderSlotElement(container, this.headerMetadata, HEADER_METADATA_SLOT_ID, content);
 		this.headerCustom?.remove();
 		this.headerCustom = void 0;
 	}
 	clearHeaderSlots() {
 		this.headerPrefix?.remove();
+		this.headerFilenameSuffix?.remove();
 		this.headerMetadata?.remove();
 		this.headerCustom?.remove();
 		this.headerPrefix = void 0;
+		this.headerFilenameSuffix = void 0;
 		this.headerMetadata = void 0;
 		this.headerCustom = void 0;
 	}
@@ -993,12 +1006,12 @@ var FileDiff = class {
 			this.renderPartialColumn(columns[1], additionsAST, insertPosition);
 		} else throw new Error("FileDiff.insertPartialHTML: Invalid argument composition");
 	}
-	updateLineType(renderRange) {
-		if (this.options.diffStyle === "unified") return;
-		const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, renderRange);
+	fastRefreshDiffView() {
+		if (this.options.diffStyle !== "split") return;
+		const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, this.renderRange);
 		if (hunksResult == null) return;
 		const columns = this.getCodeColumns("split", this.codeUnified, this.codeDeletions, this.codeAdditions);
-		if (columns == null || !Array.isArray(columns)) return;
+		if (!Array.isArray(columns)) return;
 		const applyLineType = (type, column) => {
 			if (column == null) return;
 			const ast = this.hunksRenderer.renderCodeAST(type, hunksResult);
@@ -1013,6 +1026,24 @@ var FileDiff = class {
 		applyLineType("deletions", columns[0]);
 		applyLineType("additions", columns[1]);
 	}
+	refreshDiffView() {
+		const hunksResult = this.hunksRenderer.renderDiff(this.fileDiff, this.renderRange);
+		if (hunksResult == null) return;
+		const columns = this.getCodeColumns(this.options.diffStyle ?? "split", this.codeUnified, this.codeDeletions, this.codeAdditions);
+		if (columns == null) return;
+		const render = (type, column) => {
+			if (column == null) return;
+			const ast = this.hunksRenderer.renderCodeAST(type, hunksResult);
+			const gutterChildren = getElementChildren(ast?.[0]);
+			const contentChildren = getElementChildren(ast?.[1]);
+			for (const [el, astChildren] of [[column.gutter, gutterChildren], [column.content, contentChildren]]) if (astChildren != null) el.innerHTML = toHtml(astChildren);
+		};
+		if (Array.isArray(columns)) {
+			render("deletions", columns[0]);
+			render("additions", columns[1]);
+		} else render("unified", columns);
+		this.syncRenderViewToEditor();
+	}
 	renderPartialColumn(column, ast, insertPosition) {
 		if (column == null || ast == null) return;
 		const gutterChildren = getElementChildren(ast[0]);
@@ -1311,7 +1342,7 @@ function getElementChildren(node) {
 	if (node == null || node.type !== "element") return;
 	return node.children ?? [];
 }
-
 //#endregion
 export { FileDiff };
+
 //# sourceMappingURL=FileDiff.js.map