@pierre/diffs 1.2.6 → 1.3.0-beta.1

package/dist/editor/textMeasure.js

@@ -0,0 +1,108 @@
+import { h, round } from "./utils.js";
+
+//#region src/editor/textMeasure.ts
+var Metrics = class {
+	#root;
+	#canvasCtx;
+	#font;
+	/** Width of the '0' character. */
+	ch = -1;
+	/** Size of a tab(\t) character. */
+	tabSize = 2;
+	/** Height of the code line. */
+	lineHeight = 20;
+	/** initialize the metrics */
+	init(root) {
+		if (this.#root === root && this.#canvasCtx !== void 0 && this.ch !== -1) return;
+		this.#root = root;
+		this.#canvasCtx ??= document.createElement("canvas").getContext("2d") ?? void 0;
+		if (this.#canvasCtx === void 0) throw new Error("Could not get canvas context");
+		const { fontSize, fontFamily, tabSize, lineHeight } = getComputedStyle(root);
+		if (lineHeight.endsWith("px")) this.lineHeight = Number(lineHeight.slice(0, -2));
+		else if (fontSize.endsWith("px")) this.lineHeight = round(Number(fontSize.slice(0, -2)) * Number(lineHeight));
+		const font = fontSize + " " + fontFamily;
+		if (this.#font !== font || this.ch === -1) {
+			this.#font = font;
+			this.#canvasCtx.font = font;
+			this.ch = this.canvasMeasureTextWidth("0");
+		}
+		this.tabSize = Number(tabSize);
+	}
+	/** measure the width of the text */
+	measureTextWidth(text) {
+		const textWithExpandedTabs = text.replaceAll("	", " ".repeat(this.tabSize));
+		if (needsDomTextMeasurement(textWithExpandedTabs)) return this.domMeasureTextWidth(textWithExpandedTabs);
+		return this.canvasMeasureTextWidth(textWithExpandedTabs);
+	}
+	/** measure the width of the text using the canvas measureText API */
+	canvasMeasureTextWidth(text) {
+		if (this.#canvasCtx === void 0) throw new Error("Metrics not initialized");
+		return round(this.#canvasCtx.measureText(text).width);
+	}
+	/**
+	* measure the width of the text using the DOM
+	* this is slow because it cause a reflow, use it for non-ascii text
+	*/
+	domMeasureTextWidth(text) {
+		if (this.#root === void 0) throw new Error("Metrics not initialized");
+		const measureEl = h("span", {
+			style: {
+				position: "absolute",
+				top: "0",
+				left: "0",
+				visibility: "hidden",
+				pointerEvents: "none",
+				whiteSpace: "pre",
+				font: "inherit"
+			},
+			textContent: text
+		}, this.#root);
+		try {
+			return measureEl.getBoundingClientRect().width;
+		} finally {
+			measureEl.remove();
+		}
+	}
+};
+/** Check if the text needs DOM text measurement. */
+function needsDomTextMeasurement(text) {
+	for (let i = 0; i < text.length; i++) {
+		const code = text.charCodeAt(i);
+		if (code >= 55296 && code <= 57343 || code === 8205 || code === 65038 || code === 65039) return true;
+	}
+	return false;
+}
+/** snap the text offset to the Unicode boundary */
+function snapTextOffsetToUnicodeBoundary(text, offset) {
+	const boundedOffset = Math.max(0, Math.min(offset, text.length));
+	if (boundedOffset === 0 || boundedOffset === text.length || !needsDomTextMeasurement(text)) return boundedOffset;
+	const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+	for (const segment of segmenter.segment(text)) {
+		const segmentStart = segment.index;
+		const segmentEnd = segmentStart + segment.segment.length;
+		if (boundedOffset > segmentStart && boundedOffset < segmentEnd) return segmentEnd;
+		if (boundedOffset <= segmentStart) break;
+	}
+	return boundedOffset;
+}
+/** get the offsets of the Unicode grapheme clusters in the text */
+function getUnicodeMeasurementOffsets(text) {
+	if (!needsDomTextMeasurement(text)) return;
+	const offsets = [0];
+	const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+	for (const segment of segmenter.segment(text)) offsets.push(segment.index + segment.segment.length);
+	return offsets;
+}
+/** get the number of columns of the ASCII text */
+function getExpandedAsciiTextColumns(text, tabSize) {
+	let columns = 0;
+	for (let i = 0; i < text.length; i++) {
+		if (text.charCodeAt(i) > 127) return -1;
+		columns += text.charCodeAt(i) === 9 ? tabSize : 1;
+	}
+	return columns;
+}
+
+//#endregion
+export { Metrics, getExpandedAsciiTextColumns, getUnicodeMeasurementOffsets, needsDomTextMeasurement, snapTextOffsetToUnicodeBoundary };
+//# sourceMappingURL=textMeasure.js.map

package/dist/editor/textMeasure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textMeasure.js","names":["#root","#canvasCtx","#font"],"sources":["../../src/editor/textMeasure.ts"],"sourcesContent":["import { h, round } from './utils';\n\nexport class Metrics {\n  #root?: HTMLElement;\n  #canvasCtx?: CanvasRenderingContext2D;\n  #font?: string;\n\n  /** Width of the '0' character. */\n  ch: number = -1;\n  /** Size of a tab(\\t) character. */\n  tabSize: number = 2;\n  /** Height of the code line. */\n  lineHeight: number = 20;\n\n  /** initialize the metrics */\n  init(root: HTMLElement): void {\n    if (\n      this.#root === root &&\n      this.#canvasCtx !== undefined &&\n      this.ch !== -1\n    ) {\n      // already initialized\n      return;\n    }\n\n    this.#root = root;\n    this.#canvasCtx ??=\n      document.createElement('canvas').getContext('2d') ?? undefined;\n    if (this.#canvasCtx === undefined) {\n      throw new Error('Could not get canvas context');\n    }\n\n    const { fontSize, fontFamily, tabSize, lineHeight } =\n      getComputedStyle(root);\n    if (lineHeight.endsWith('px')) {\n      this.lineHeight = Number(lineHeight.slice(0, -2));\n    } else if (fontSize.endsWith('px')) {\n      this.lineHeight = round(\n        Number(fontSize.slice(0, -2)) * Number(lineHeight)\n      );\n    }\n    const font = fontSize + ' ' + fontFamily;\n    if (this.#font !== font || this.ch === -1) {\n      this.#font = font;\n      this.#canvasCtx.font = font;\n      this.ch = this.canvasMeasureTextWidth('0');\n    }\n    this.tabSize = Number(tabSize);\n  }\n\n  /** measure the width of the text */\n  measureTextWidth(text: string): number {\n    const textWithExpandedTabs = text.replaceAll(\n      '\\t',\n      ' '.repeat(this.tabSize)\n    );\n    if (needsDomTextMeasurement(textWithExpandedTabs)) {\n      return this.domMeasureTextWidth(textWithExpandedTabs);\n    }\n    return this.canvasMeasureTextWidth(textWithExpandedTabs);\n  }\n\n  /** measure the width of the text using the canvas measureText API */\n  canvasMeasureTextWidth(text: string): number {\n    if (this.#canvasCtx === undefined) {\n      throw new Error('Metrics not initialized');\n    }\n    return round(this.#canvasCtx.measureText(text).width);\n  }\n\n  /**\n   * measure the width of the text using the DOM\n   * this is slow because it cause a reflow, use it for non-ascii text\n   */\n  domMeasureTextWidth(text: string): number {\n    if (this.#root === undefined) {\n      throw new Error('Metrics not initialized');\n    }\n    const measureEl = h(\n      'span',\n      {\n        style: {\n          position: 'absolute',\n          top: '0',\n          left: '0',\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          whiteSpace: 'pre',\n          font: 'inherit',\n        },\n        textContent: text,\n      },\n      this.#root\n    );\n    try {\n      return measureEl.getBoundingClientRect().width;\n    } finally {\n      measureEl.remove();\n    }\n  }\n}\n\n/** Check if the text needs DOM text measurement. */\nexport function needsDomTextMeasurement(text: string): boolean {\n  for (let i = 0; i < text.length; i++) {\n    const code = text.charCodeAt(i);\n    if (\n      (code >= 0xd800 && code <= 0xdfff) ||\n      code === 0x200d ||\n      code === 0xfe0e ||\n      code === 0xfe0f\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/** snap the text offset to the Unicode boundary */\nexport function snapTextOffsetToUnicodeBoundary(\n  text: string,\n  offset: number\n): number {\n  const boundedOffset = Math.max(0, Math.min(offset, text.length));\n  if (\n    boundedOffset === 0 ||\n    boundedOffset === text.length ||\n    !needsDomTextMeasurement(text)\n  ) {\n    return boundedOffset;\n  }\n  // Avoid measuring a caret position inside one visual emoji/grapheme.\n  // Browser caret movement can report offsets around UTF-16 surrogate\n  // pairs and emoji joiners; measuring a partial sequence gives a\n  // replacement-glyph width.\n  const segmenter = new Intl.Segmenter(undefined, {\n    granularity: 'grapheme',\n  });\n  for (const segment of segmenter.segment(text)) {\n    const segmentStart = segment.index;\n    const segmentEnd = segmentStart + segment.segment.length;\n    if (boundedOffset > segmentStart && boundedOffset < segmentEnd) {\n      return segmentEnd;\n    }\n    if (boundedOffset <= segmentStart) {\n      break;\n    }\n  }\n  return boundedOffset;\n}\n\n/** get the offsets of the Unicode grapheme clusters in the text */\nexport function getUnicodeMeasurementOffsets(\n  text: string\n): number[] | undefined {\n  if (!needsDomTextMeasurement(text)) {\n    return undefined;\n  }\n  const offsets = [0];\n  const segmenter = new Intl.Segmenter(undefined, {\n    granularity: 'grapheme',\n  });\n  for (const segment of segmenter.segment(text)) {\n    offsets.push(segment.index + segment.segment.length);\n  }\n  return offsets;\n}\n\n/** get the number of columns of the ASCII text */\nexport function getExpandedAsciiTextColumns(\n  text: string,\n  tabSize: number\n): number {\n  let columns = 0;\n  for (let i = 0; i < text.length; i++) {\n    if (text.charCodeAt(i) > 127) {\n      return -1;\n    }\n    columns += text.charCodeAt(i) === /* '\\t' */ 9 ? tabSize : 1;\n  }\n  return columns;\n}\n"],"mappings":"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"}

package/dist/editor/tokenzier.d.ts

@@ -0,0 +1,37 @@
+import { BaseCodeOptions, DiffsHighlighter, HighlightedToken, RenderRange } from "../types.js";
+import { TextDocument, TextDocumentChange } from "./textDocument.js";
+import { IGrammar, StateStack } from "shiki/textmate";
+
+//#region src/editor/tokenzier.d.ts
+interface EditorTokenizerProps {
+  highlighter: DiffsHighlighter;
+  textDocument: TextDocument<unknown>;
+  codeOptions: BaseCodeOptions;
+  setStyle: (style: string) => void;
+  onDeferTokenize: (lines: Map<number, Array<HighlightedToken>>, themeType: 'dark' | 'light') => void;
+}
+/** Stoppable code tokenizer for the editor */
+declare class EditorTokenizer {
+  #private;
+  static TOKENIZE_TIME_LIMIT: number;
+  get themeType(): 'light' | 'dark';
+  constructor({
+    codeOptions,
+    highlighter,
+    textDocument,
+    setStyle,
+    onDeferTokenize
+  }: EditorTokenizerProps);
+  cleanUp(): void;
+  tokenize(change: TextDocumentChange, renderRange?: RenderRange): Map<number, Array<HighlightedToken>>;
+  prebuildStateStackMap(renderRange?: RenderRange): void;
+  stopBackgroundTokenize(): void;
+}
+declare function tokenizeLine(grammar: IGrammar, colorMap: string[], lineText: string, stateStack: StateStack, timeLimit?: number): {
+  ruleStack: StateStack;
+  resolvedTokens: Array<HighlightedToken>;
+};
+declare function renderLineTokens(tokens: Array<HighlightedToken>, themeType: 'light' | 'dark'): (HTMLElement | string)[];
+//#endregion
+export { EditorTokenizer, EditorTokenizerProps, renderLineTokens, tokenizeLine };
+//# sourceMappingURL=tokenzier.d.ts.map

package/dist/editor/tokenzier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenzier.d.ts","names":["IGrammar","StateStack","BaseCodeOptions","DiffsHighlighter","HighlightedToken","RenderRange","TextDocument","TextDocumentChange","EditorTokenizerProps","Array","Map","EditorTokenizer","codeOptions","highlighter","textDocument","setStyle","onDeferTokenize","tokenizeLine","renderLineTokens","HTMLElement"],"sources":["../../src/editor/tokenzier.d.ts"],"sourcesContent":["import { type IGrammar, type StateStack } from 'shiki/textmate';\nimport type { BaseCodeOptions, DiffsHighlighter, HighlightedToken, RenderRange } from '../types';\nimport type { TextDocument, TextDocumentChange } from './textDocument';\nexport interface EditorTokenizerProps {\n    highlighter: DiffsHighlighter;\n    textDocument: TextDocument<unknown>;\n    codeOptions: BaseCodeOptions;\n    setStyle: (style: string) => void;\n    onDeferTokenize: (lines: Map<number, Array<HighlightedToken>>, themeType: 'dark' | 'light') => void;\n}\n/** Stoppable code tokenizer for the editor */\nexport declare class EditorTokenizer {\n    #private;\n    static TOKENIZE_TIME_LIMIT: number;\n    get themeType(): 'light' | 'dark';\n    constructor({ codeOptions, highlighter, textDocument, setStyle, onDeferTokenize }: EditorTokenizerProps);\n    cleanUp(): void;\n    tokenize(change: TextDocumentChange, renderRange?: RenderRange): Map<number, Array<HighlightedToken>>;\n    prebuildStateStackMap(renderRange?: RenderRange): void;\n    stopBackgroundTokenize(): void;\n}\nexport declare function tokenizeLine(grammar: IGrammar, colorMap: string[], lineText: string, stateStack: StateStack, timeLimit?: number): {\n    ruleStack: StateStack;\n    resolvedTokens: Array<HighlightedToken>;\n};\nexport declare function renderLineTokens(tokens: Array<HighlightedToken>, themeType: 'light' | 'dark'): (HTMLElement | string)[];\n//# sourceMappingURL=tokenzier.d.ts.map"],"mappings":";;;;;UAGiBQ,oBAAAA;eACAL;EADAK,YAAAA,EAECF,YAFmB,CAAA,OAAA,CAAA;EACpBH,WAAAA,EAEAD,eAFAC;EACCG,QAAAA,EAAAA,CAAAA,KAAAA,EAAAA,MAAAA,EAAAA,GAAAA,IAAAA;EACDJ,eAAAA,EAAAA,CAAAA,KAAAA,EAEYQ,GAFZR,CAAAA,MAAAA,EAEwBO,KAFxBP,CAE8BE,gBAF9BF,CAAAA,CAAAA,EAAAA,SAAAA,EAAAA,MAAAA,GAAAA,OAAAA,EAAAA,GAAAA,IAAAA;;;AAEYQ,cAGRC,eAAAA,CAHQD;EAAG,CAAA,OAAA;EAGXC,OAAAA,mBAAe,EAAA,MAAA;EAIlBC,IAAAA,SAAAA,CAAAA,CAAAA,EAAAA,OAAAA,GAAAA,MAAAA;EAAaC,WAAAA,CAAAA;IAAAA,WAAAA;IAAAA,WAAAA;IAAAA,YAAAA;IAAAA,QAAAA;IAAAA;EAAAA,CAAAA,EAAwDL,oBAAxDK;EAAaC,OAAAA,CAAAA,CAAAA,EAAAA,IAAAA;EAAcC,QAAAA,CAAAA,MAAAA,EAErCR,kBAFqCQ,EAAAA,WAAAA,CAAAA,EAEHV,WAFGU,CAAAA,EAEWL,GAFXK,CAAAA,MAAAA,EAEuBN,KAFvBM,CAE6BX,gBAF7BW,CAAAA,CAAAA;EAAUC,qBAAAA,CAAAA,WAAAA,CAAAA,EAG5BX,WAH4BW,CAAAA,EAAAA,IAAAA;EAAmBR,sBAAAA,CAAAA,CAAAA,EAAAA,IAAAA;;AAEhCH,iBAI/BY,YAAAA,CAJ+BZ,OAAAA,EAITL,QAJSK,EAAAA,QAAAA,EAAAA,MAAAA,EAAAA,EAAAA,QAAAA,EAAAA,MAAAA,EAAAA,UAAAA,EAImDJ,UAJnDI,EAAAA,SAAAA,CAAAA,EAAAA,MAAAA,CAAAA,EAAAA;EAAgCD,SAAAA,EAKxEH,UALwEG;EAANK,cAAAA,EAM7DA,KAN6DA,CAMvDL,gBANuDK,CAAAA;CAAZC;AAC7BL,iBAOhBa,gBAAAA,CAPgBb,MAAAA,EAOSI,KAPTJ,CAOeD,gBAPfC,CAAAA,EAAAA,SAAAA,EAAAA,OAAAA,GAAAA,MAAAA,CAAAA,EAAAA,CAOiEc,WAPjEd,GAAAA,MAAAA,CAAAA,EAAAA"}

package/dist/editor/tokenzier.js

@@ -0,0 +1,348 @@
+import { DEFAULT_THEMES } from "../constants.js";
+import { addEventListener, debounce, h } from "./utils.js";
+import { EncodedTokenMetadata, INITIAL } from "shiki/textmate";
+
+//#region src/editor/tokenzier.ts
+/** Stoppable code tokenizer for the editor */
+var EditorTokenizer = class EditorTokenizer {
+	static TOKENIZE_TIME_LIMIT = 500;
+	#highlighter;
+	#grammar;
+	#mediaQueryList;
+	#themeType;
+	#colorMap;
+	#textDocument;
+	#tokenizeMaxLineLength;
+	#setStyle;
+	#onDeferTokenize;
+	#editorEventDisposes;
+	#stateStackCache = [INITIAL];
+	#lastLine = -1;
+	#isStopped = true;
+	#backgroundJobId = 0;
+	#backgroundChangedLineRanges;
+	#backgroundChangedRangeIndex = 0;
+	#prebuildStateStackMap = debounce(async (renderRange) => {
+		const { startingLine = 0, totalLines = Infinity } = renderRange ?? {};
+		const endLine = Math.min(totalLines === Infinity ? Infinity : startingLine + totalLines, this.#textDocument.lineCount);
+		if (this.#grammar === void 0) {
+			await this.#highlighter.loadLanguage(this.#textDocument.languageId);
+			this.#grammar = this.#highlighter.getLanguage(this.#textDocument.languageId);
+		}
+		this.#buildStateStackMap(endLine);
+	}, 500);
+	#onMessage = ({ data }) => {
+		if (data.type === "tokenize" && data.jobId === this.#backgroundJobId) this.#backgroundTokenize(data.jobId);
+	};
+	#onThemeChange = (themeName, themeType) => {
+		this.#themeType = themeType;
+		this.#setTheme(themeName);
+		this.stopBackgroundTokenize();
+		this.#stateStackCache = [INITIAL];
+		if (this.#grammar !== void 0 && this.#textDocument.lineCount > 0) this.#scheduleBackgroundTokenize(0);
+	};
+	#setTheme = (themeName) => {
+		this.#colorMap = this.#highlighter.setTheme(themeName).colorMap;
+		const { colors = {} } = this.#highlighter.getTheme(themeName);
+		const selectionBackground = colors["editor.selectionBackground"];
+		const lineHighlightBackground = colors["editor.lineHighlightBackground"];
+		const gutterForeground = colors["editorLineNumber.foreground"];
+		const gutterActiveForeground = colors["editorLineNumber.activeForeground"];
+		this.#setStyle(`:host {
+      --diffs-editor-selection-bg: ${selectionBackground ?? "var(--diffs-line-bg)"};
+      --diffs-editor-line-highlight-bg: ${lineHighlightBackground ?? "var(--diffs-line-bg)"};
+      --diffs-editor-line-number-fg: ${gutterForeground ?? "var(--diffs-fg-number)"};
+      --diffs-editor-line-number-active-bg: ${lineHighlightBackground ?? "var(--diffs-line-bg, var(--diffs-bg))"};
+      --diffs-editor-line-number-active-fg: ${gutterActiveForeground ?? "var(--diffs-selection-number-fg)"};
+    }`);
+	};
+	#watchColorScheme = (theme) => {
+		const observer = new MutationObserver((mutations) => {
+			for (const { type, attributeName } of mutations) if (type === "attributes" && attributeName !== null && (attributeName === "class" || attributeName.startsWith("data-"))) {
+				const themeType = getComputedStyle(document.body).colorScheme === "dark" ? "dark" : "light";
+				this.#onThemeChange(theme[themeType], themeType);
+				break;
+			}
+		});
+		observer.observe(document.documentElement, { attributes: true });
+		observer.observe(document.body, { attributes: true });
+		this.#editorEventDisposes = [addEventListener(this.#mediaQueryList, "change", (e) => {
+			const themeType = e.matches ? "dark" : "light";
+			this.#onThemeChange(theme[themeType], themeType);
+		}), () => observer.disconnect()];
+	};
+	get themeType() {
+		return this.#themeType;
+	}
+	constructor({ codeOptions, highlighter, textDocument, setStyle, onDeferTokenize }) {
+		const { themeType = "system", theme = DEFAULT_THEMES, tokenizeMaxLineLength = 1e3 } = codeOptions;
+		this.#mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+		if (themeType === "system") this.#themeType = this.#mediaQueryList.matches ? "dark" : "light";
+		else this.#themeType = themeType;
+		if (typeof theme !== "string") this.#watchColorScheme(theme);
+		this.#highlighter = highlighter;
+		this.#textDocument = textDocument;
+		this.#tokenizeMaxLineLength = tokenizeMaxLineLength;
+		this.#setStyle = setStyle;
+		this.#onDeferTokenize = onDeferTokenize;
+		if (highlighter.getLoadedLanguages().includes(textDocument.languageId)) this.#grammar = highlighter.getLanguage(textDocument.languageId);
+		this.#colorMap = [];
+		this.#setTheme(typeof theme === "string" ? theme : theme[this.#themeType]);
+	}
+	cleanUp() {
+		this.stopBackgroundTokenize();
+		this.#editorEventDisposes?.forEach((dispose) => dispose());
+		this.#editorEventDisposes = void 0;
+	}
+	tokenize(change, renderRange) {
+		if (this.#grammar === void 0) throw new Error("Grammar not loaded");
+		const { lineCount } = this.#textDocument;
+		const { startingLine = 0, totalLines = Infinity } = renderRange ?? {};
+		const renderRangeEndLine = totalLines === Infinity ? lineCount : Math.min(startingLine + totalLines, lineCount);
+		const dirtyStart = change.startLine;
+		const viewStart = Math.max(startingLine, dirtyStart);
+		const crossesRenderRangeEnd = renderRange !== void 0 && totalLines !== Infinity && change.lineDelta > 0 && dirtyStart < renderRangeEndLine && change.endLine >= renderRangeEndLine;
+		const canReuseCachedStates = change.lineDelta === 0;
+		const canCacheTokenizedStates = canReuseCachedStates || renderRange === void 0 || dirtyStart >= viewStart;
+		const changedLineRanges = canReuseCachedStates ? change.changedLineRanges ?? [[dirtyStart, change.endLine]] : [[dirtyStart, change.endLine]];
+		let offscreenSyncEnd = -1;
+		if (dirtyStart < viewStart) {
+			for (const [rangeStart, rangeEnd] of changedLineRanges) if (rangeStart < viewStart) offscreenSyncEnd = Math.max(offscreenSyncEnd, Math.min(rangeEnd, viewStart - 1));
+		}
+		const shouldFlushOffscreenLines = offscreenSyncEnd >= dirtyStart && (canReuseCachedStates || change.lineDelta < 0);
+		if (canReuseCachedStates) this.#buildStateStackMap(dirtyStart);
+		else {
+			this.#stateStackCache.length = Math.min(this.#stateStackCache.length, dirtyStart + 1);
+			if (renderRange === void 0 || dirtyStart >= viewStart) this.#buildStateStackMap(viewStart);
+		}
+		let changedRangeIndex = 0;
+		let currentChangedRangeEnd = changedLineRanges[changedRangeIndex][1];
+		let backgroundStartLine;
+		let backgroundChangedRangeIndex = 0;
+		let line = canReuseCachedStates ? changedLineRanges[changedRangeIndex][0] : viewStart;
+		let state = this.#stateStackCache[line] ?? INITIAL;
+		let settled = false;
+		const dirtyLines = /* @__PURE__ */ new Map();
+		const offscreenDirtyLines = shouldFlushOffscreenLines ? /* @__PURE__ */ new Map() : void 0;
+		if (offscreenDirtyLines !== void 0 && !canReuseCachedStates) {
+			const offscreenEnd = Math.min(offscreenSyncEnd + 1, viewStart, renderRangeEndLine);
+			if (offscreenEnd > dirtyStart) {
+				this.#buildStateStackMap(offscreenEnd);
+				let offscreenLine = dirtyStart;
+				let offscreenState = this.#stateStackCache[offscreenLine] ?? INITIAL;
+				for (; offscreenLine < offscreenEnd; offscreenLine++) {
+					const resolved = this.#tokenizeLineAt(offscreenLine, offscreenState);
+					offscreenState = resolved.state;
+					offscreenDirtyLines.set(offscreenLine, resolved.resolvedTokens);
+				}
+				if (canCacheTokenizedStates) this.#stateStackCache[offscreenEnd] = offscreenState;
+			}
+		}
+		for (; line < renderRangeEndLine;) {
+			const previousNextState = canReuseCachedStates ? this.#stateStackCache[line + 1] : void 0;
+			if (canCacheTokenizedStates) this.#stateStackCache[line] = state;
+			const { resolvedTokens, state: nextState } = this.#tokenizeLineAt(line, state);
+			state = nextState;
+			if (line >= viewStart) dirtyLines.set(line, resolvedTokens);
+			else offscreenDirtyLines?.set(line, resolvedTokens);
+			if (canCacheTokenizedStates) this.#stateStackCache[line + 1] = state;
+			settled = line >= currentChangedRangeEnd && canReuseCachedStates && previousNextState !== void 0 && state.equals(previousNextState);
+			if (settled) {
+				changedRangeIndex++;
+				const nextRange = changedLineRanges[changedRangeIndex];
+				if (nextRange === void 0) break;
+				if (nextRange[0] >= renderRangeEndLine) {
+					backgroundStartLine = nextRange[0];
+					backgroundChangedRangeIndex = changedRangeIndex;
+					break;
+				}
+				if (this.#stateStackCache[nextRange[0]] === void 0) {
+					currentChangedRangeEnd = nextRange[1];
+					line++;
+				} else {
+					line = nextRange[0];
+					state = this.#stateStackCache[line] ?? state;
+					currentChangedRangeEnd = nextRange[1];
+				}
+				settled = false;
+				continue;
+			}
+			line++;
+		}
+		if (canCacheTokenizedStates) if (line < renderRangeEndLine) this.#stateStackCache[line + 1] = state;
+		else this.#stateStackCache[line] = state;
+		if (offscreenDirtyLines !== void 0 && offscreenDirtyLines.size > 0) this.#onDeferTokenize(offscreenDirtyLines, this.#themeType);
+		if (backgroundStartLine !== void 0) this.#scheduleBackgroundTokenize(backgroundStartLine, changedLineRanges, backgroundChangedRangeIndex);
+		else if (!settled && line < lineCount) {
+			const backgroundLine = crossesRenderRangeEnd && dirtyStart >= viewStart ? renderRangeEndLine : dirtyStart < viewStart && !canReuseCachedStates ? dirtyStart : line;
+			this.#scheduleBackgroundTokenize(backgroundLine, canReuseCachedStates ? changedLineRanges : void 0, changedRangeIndex);
+		}
+		return dirtyLines;
+	}
+	prebuildStateStackMap(renderRange) {
+		this.#prebuildStateStackMap(renderRange);
+	}
+	stopBackgroundTokenize() {
+		removeEventListener("message", this.#onMessage);
+		this.#isStopped = true;
+		this.#lastLine = -1;
+		this.#backgroundChangedLineRanges = void 0;
+		this.#backgroundChangedRangeIndex = 0;
+	}
+	#scheduleBackgroundTokenize(startLine, changedLineRanges, changedRangeIndex = 0) {
+		const jobId = ++this.#backgroundJobId;
+		this.#isStopped = false;
+		this.#lastLine = startLine;
+		this.#backgroundChangedLineRanges = changedLineRanges;
+		this.#backgroundChangedRangeIndex = changedRangeIndex;
+		globalThis.addEventListener("message", this.#onMessage);
+		this.#postBackgroundTokenizeMessage(jobId);
+	}
+	#postBackgroundTokenizeMessage(jobId) {
+		globalThis.postMessage({
+			type: "tokenize",
+			jobId
+		});
+	}
+	#tokenizeLineAt(line, state) {
+		if (this.#grammar === void 0) throw new Error("Grammar not loaded");
+		const lineText = this.#textDocument.getLineText(line);
+		if (lineText.length > this.#tokenizeMaxLineLength) {
+			console.warn(`[diffs] Line(${line}) too long to tokenize: ${lineText.length}`);
+			return {
+				resolvedTokens: [[
+					0,
+					"",
+					lineText
+				]],
+				state
+			};
+		}
+		if (lineText === "" || lineText.trim() === "") return {
+			resolvedTokens: [[
+				0,
+				"",
+				lineText
+			]],
+			state
+		};
+		const result = tokenizeLine(this.#grammar, this.#colorMap, lineText, state, EditorTokenizer.TOKENIZE_TIME_LIMIT);
+		return {
+			resolvedTokens: result.resolvedTokens,
+			state: result.ruleStack
+		};
+	}
+	#buildStateStackMap(endAt) {
+		const boundedEndAt = Math.min(Math.max(0, endAt), this.#textDocument.lineCount);
+		if (this.#stateStackCache.length > boundedEndAt || this.#grammar === void 0) return;
+		let line = this.#stateStackCache.length - 1;
+		let state = this.#stateStackCache[line] ?? INITIAL;
+		for (; line < boundedEndAt; line++) {
+			this.#stateStackCache[line] = state;
+			const lineText = this.#textDocument.getLineText(line);
+			if (lineText.length <= this.#tokenizeMaxLineLength && lineText !== "" && lineText.trim() !== "") state = this.#grammar.tokenizeLine2(lineText, state, EditorTokenizer.TOKENIZE_TIME_LIMIT).ruleStack;
+		}
+		this.#stateStackCache[line] = state;
+	}
+	#backgroundTokenize(jobId) {
+		if (this.#isStopped || this.#grammar === void 0 || jobId !== this.#backgroundJobId) return;
+		const t = performance.now();
+		const lines = /* @__PURE__ */ new Map();
+		const totalLines = this.#textDocument.lineCount;
+		const changedLineRanges = this.#backgroundChangedLineRanges;
+		let line = this.#lastLine;
+		let state = this.#stateStackCache[line] ?? INITIAL;
+		let settled = false;
+		let changedRangeIndex = this.#backgroundChangedRangeIndex;
+		let currentChangedRangeEnd = changedLineRanges?.[changedRangeIndex]?.[1];
+		for (; line < totalLines;) {
+			this.#stateStackCache[line] = state;
+			const previousNextState = currentChangedRangeEnd !== void 0 ? this.#stateStackCache[line + 1] : void 0;
+			const lineText = this.#textDocument.getLineText(line);
+			if (lineText.length > this.#tokenizeMaxLineLength) {
+				console.warn(`[diffs] Line(${line}) too long to tokenize: ${lineText.length}`);
+				lines.set(line, [[
+					0,
+					"",
+					lineText
+				]]);
+			} else if (lineText === "" || lineText.trim() === "") lines.set(line, [[
+				0,
+				"",
+				lineText
+			]]);
+			else {
+				const ret = tokenizeLine(this.#grammar, this.#colorMap, lineText, state, EditorTokenizer.TOKENIZE_TIME_LIMIT);
+				lines.set(line, ret.resolvedTokens);
+				state = ret.ruleStack;
+			}
+			this.#stateStackCache[line + 1] = state;
+			settled = currentChangedRangeEnd !== void 0 && line >= currentChangedRangeEnd && previousNextState !== void 0 && state.equals(previousNextState);
+			line++;
+			if (settled) {
+				changedRangeIndex++;
+				const nextRange = changedLineRanges?.[changedRangeIndex];
+				if (nextRange === void 0) break;
+				currentChangedRangeEnd = nextRange[1];
+				if (this.#stateStackCache[nextRange[0]] === void 0) settled = false;
+				else {
+					line = nextRange[0];
+					state = this.#stateStackCache[line] ?? state;
+					settled = false;
+					continue;
+				}
+			}
+			if (performance.now() - t > 2) break;
+		}
+		this.#onDeferTokenize(lines, this.#themeType);
+		if (this.#isStopped || jobId !== this.#backgroundJobId) return;
+		if (settled || line >= totalLines) {
+			this.stopBackgroundTokenize();
+			return;
+		}
+		this.#lastLine = line;
+		this.#backgroundChangedRangeIndex = changedRangeIndex;
+		this.#postBackgroundTokenizeMessage(jobId);
+	}
+};
+function tokenizeLine(grammar, colorMap, lineText, stateStack, timeLimit) {
+	const result = grammar.tokenizeLine2(lineText, stateStack, timeLimit);
+	if (result.stoppedEarly) console.warn(`[diffs] Time limit reached when tokenizing line: ${lineText.substring(0, 100)}`);
+	const rawTokens = result.tokens;
+	const tokensLength = rawTokens.length / 2;
+	const resolvedTokens = [];
+	for (let j = 0; j < tokensLength; j++) {
+		const offset = rawTokens[2 * j];
+		const nextOffset = j + 1 < tokensLength ? rawTokens[2 * j + 2] : lineText.length;
+		if (offset === nextOffset) continue;
+		const metadata = rawTokens[2 * j + 1];
+		const fg = colorMap[EncodedTokenMetadata.getForeground(metadata)];
+		const tokenText = lineText.slice(offset, nextOffset);
+		resolvedTokens.push([
+			offset,
+			fg,
+			tokenText
+		]);
+	}
+	return {
+		ruleStack: result.ruleStack,
+		resolvedTokens
+	};
+}
+function renderLineTokens(tokens, themeType) {
+	return tokens.map(([char, fg, textContent]) => {
+		if (char === 0 && fg === "") {
+			if (textContent === "") return h("br");
+			return textContent;
+		}
+		return h("span", {
+			dataset: { char: char.toString() },
+			style: `--diffs-token-${themeType}:${fg};`,
+			textContent
+		});
+	});
+}
+
+//#endregion
+export { EditorTokenizer, renderLineTokens, tokenizeLine };
+//# sourceMappingURL=tokenzier.js.map

package/dist/editor/tokenzier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenzier.js","names":["#textDocument","#grammar","#highlighter","#buildStateStackMap","#backgroundJobId","#backgroundTokenize","#themeType","#setTheme","#stateStackCache","#scheduleBackgroundTokenize","#colorMap","#setStyle","#onThemeChange","#editorEventDisposes","#mediaQueryList","#watchColorScheme","#tokenizeMaxLineLength","#onDeferTokenize","changedLineRanges: readonly [number, number][]","backgroundStartLine: number | undefined","dirtyLines: Map<number, Array<HighlightedToken>>","offscreenDirtyLines:\n      | Map<number, Array<HighlightedToken>>\n      | undefined","#tokenizeLineAt","#prebuildStateStackMap","#onMessage","#isStopped","#lastLine","#backgroundChangedLineRanges","#backgroundChangedRangeIndex","#postBackgroundTokenizeMessage","resolvedTokens: Array<HighlightedToken>"],"sources":["../../src/editor/tokenzier.ts"],"sourcesContent":["import {\n  EncodedTokenMetadata,\n  type IGrammar,\n  INITIAL,\n  type StateStack,\n} from 'shiki/textmate';\n\nimport { DEFAULT_THEMES } from '../constants';\nimport type {\n  BaseCodeOptions,\n  DiffsHighlighter,\n  HighlightedToken,\n  RenderRange,\n  ThemesType,\n} from '../types';\nimport type { TextDocument, TextDocumentChange } from './textDocument';\nimport { addEventListener, debounce, h } from './utils';\n\nexport interface EditorTokenizerProps {\n  highlighter: DiffsHighlighter;\n  textDocument: TextDocument<unknown>;\n  codeOptions: BaseCodeOptions;\n  setStyle: (style: string) => void;\n  onDeferTokenize: (\n    lines: Map<number, Array<HighlightedToken>>,\n    themeType: 'dark' | 'light'\n  ) => void;\n}\n\n/** Stoppable code tokenizer for the editor */\nexport class EditorTokenizer {\n  static TOKENIZE_TIME_LIMIT = 500;\n\n  #highlighter: DiffsHighlighter;\n  #grammar: IGrammar | undefined;\n  #mediaQueryList: MediaQueryList;\n  #themeType: 'light' | 'dark';\n  #colorMap: string[];\n  #textDocument: TextDocument<unknown>;\n  #tokenizeMaxLineLength: number;\n  #setStyle: EditorTokenizerProps['setStyle'];\n  #onDeferTokenize: EditorTokenizerProps['onDeferTokenize'];\n  #editorEventDisposes?: (() => void)[];\n\n  // state\n  #stateStackCache: StateStack[] = [INITIAL];\n  #lastLine: number = -1;\n  #isStopped: boolean = true;\n  #backgroundJobId: number = 0;\n  #backgroundChangedLineRanges: readonly [number, number][] | undefined;\n  #backgroundChangedRangeIndex: number = 0;\n\n  #prebuildStateStackMap = debounce(async (renderRange?: RenderRange) => {\n    const { startingLine = 0, totalLines = Infinity } = renderRange ?? {};\n    const endLine = Math.min(\n      totalLines === Infinity ? Infinity : startingLine + totalLines,\n      this.#textDocument.lineCount\n    );\n    if (this.#grammar === undefined) {\n      await this.#highlighter.loadLanguage(this.#textDocument.languageId);\n      this.#grammar = this.#highlighter.getLanguage(\n        this.#textDocument.languageId\n      );\n    }\n    this.#buildStateStackMap(endLine);\n  }, 500);\n\n  #onMessage = ({\n    data,\n  }: MessageEvent<{ type: 'tokenize'; jobId: number }>) => {\n    if (data.type === 'tokenize' && data.jobId === this.#backgroundJobId) {\n      this.#backgroundTokenize(data.jobId);\n    }\n  };\n\n  // By default, diffs components support dual themes, but the tokenizer only renders\n  // the preferred theme. When the theme type is changed, the tokenizer will re-tokenize the document.\n  #onThemeChange = (themeName: string, themeType: 'light' | 'dark') => {\n    this.#themeType = themeType;\n    this.#setTheme(themeName);\n    this.stopBackgroundTokenize();\n    this.#stateStackCache = [INITIAL];\n    if (this.#grammar !== undefined && this.#textDocument.lineCount > 0) {\n      this.#scheduleBackgroundTokenize(0);\n    }\n  };\n\n  #setTheme = (themeName: string): void => {\n    this.#colorMap = this.#highlighter.setTheme(themeName).colorMap;\n    const { colors = {} } = this.#highlighter.getTheme(themeName);\n    const selectionBackground = colors['editor.selectionBackground'];\n    const lineHighlightBackground = colors['editor.lineHighlightBackground'];\n    const gutterForeground = colors['editorLineNumber.foreground'];\n    const gutterActiveForeground = colors['editorLineNumber.activeForeground'];\n    this.#setStyle(`:host {\n      --diffs-editor-selection-bg: ${selectionBackground ?? 'var(--diffs-line-bg)'};\n      --diffs-editor-line-highlight-bg: ${lineHighlightBackground ?? 'var(--diffs-line-bg)'};\n      --diffs-editor-line-number-fg: ${gutterForeground ?? 'var(--diffs-fg-number)'};\n      --diffs-editor-line-number-active-bg: ${lineHighlightBackground ?? 'var(--diffs-line-bg, var(--diffs-bg))'};\n      --diffs-editor-line-number-active-fg: ${gutterActiveForeground ?? 'var(--diffs-selection-number-fg)'};\n    }`);\n  };\n\n  #watchColorScheme = (theme: ThemesType) => {\n    const observer = new MutationObserver((mutations) => {\n      for (const { type, attributeName } of mutations) {\n        if (\n          type === 'attributes' &&\n          attributeName !== null &&\n          (attributeName === 'class' || attributeName.startsWith('data-'))\n        ) {\n          const themeType =\n            getComputedStyle(document.body).colorScheme === 'dark'\n              ? 'dark'\n              : 'light';\n          this.#onThemeChange(theme[themeType], themeType);\n          break;\n        }\n      }\n    });\n    observer.observe(document.documentElement, { attributes: true });\n    observer.observe(document.body, { attributes: true });\n    this.#editorEventDisposes = [\n      addEventListener(this.#mediaQueryList, 'change', (e) => {\n        const themeType = e.matches ? 'dark' : 'light';\n        this.#onThemeChange(theme[themeType], themeType);\n      }),\n      () => observer.disconnect(),\n    ];\n  };\n\n  get themeType(): 'light' | 'dark' {\n    return this.#themeType;\n  }\n\n  constructor({\n    codeOptions,\n    highlighter,\n    textDocument,\n    setStyle,\n    onDeferTokenize,\n  }: EditorTokenizerProps) {\n    const {\n      themeType = 'system',\n      theme = DEFAULT_THEMES,\n      tokenizeMaxLineLength = 1000,\n    } = codeOptions;\n    this.#mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');\n    if (themeType === 'system') {\n      this.#themeType = this.#mediaQueryList.matches ? 'dark' : 'light';\n    } else {\n      this.#themeType = themeType;\n    }\n    if (typeof theme !== 'string') {\n      this.#watchColorScheme(theme);\n    }\n    this.#highlighter = highlighter;\n    this.#textDocument = textDocument;\n    this.#tokenizeMaxLineLength = tokenizeMaxLineLength;\n    this.#setStyle = setStyle;\n    this.#onDeferTokenize = onDeferTokenize;\n    if (highlighter.getLoadedLanguages().includes(textDocument.languageId)) {\n      this.#grammar = highlighter.getLanguage(textDocument.languageId);\n    }\n    this.#colorMap = [];\n    this.#setTheme(typeof theme === 'string' ? theme : theme[this.#themeType]);\n  }\n\n  cleanUp(): void {\n    this.stopBackgroundTokenize();\n    this.#editorEventDisposes?.forEach((dispose) => dispose());\n    this.#editorEventDisposes = undefined;\n  }\n\n  // to use `tokenize`, call `prebuildStateStackMap` first to prebuild\n  // the state stack map for the given render range.\n  tokenize(\n    change: TextDocumentChange,\n    renderRange?: RenderRange\n  ): Map<number, Array<HighlightedToken>> {\n    if (this.#grammar === undefined) {\n      throw new Error('Grammar not loaded');\n    }\n\n    const { lineCount } = this.#textDocument;\n    const { startingLine = 0, totalLines = Infinity } = renderRange ?? {};\n    const renderRangeEndLine =\n      totalLines === Infinity\n        ? lineCount\n        : Math.min(startingLine + totalLines, lineCount);\n\n    const dirtyStart = change.startLine;\n    const viewStart = Math.max(startingLine, dirtyStart);\n    const crossesRenderRangeEnd =\n      renderRange !== undefined &&\n      totalLines !== Infinity &&\n      change.lineDelta > 0 &&\n      dirtyStart < renderRangeEndLine &&\n      change.endLine >= renderRangeEndLine;\n    const canReuseCachedStates = change.lineDelta === 0;\n    const canCacheTokenizedStates =\n      canReuseCachedStates ||\n      renderRange === undefined ||\n      dirtyStart >= viewStart;\n    const changedLineRanges: readonly [number, number][] = canReuseCachedStates\n      ? (change.changedLineRanges ?? [[dirtyStart, change.endLine]])\n      : [[dirtyStart, change.endLine]];\n    let offscreenSyncEnd = -1;\n    if (dirtyStart < viewStart) {\n      for (const [rangeStart, rangeEnd] of changedLineRanges) {\n        if (rangeStart < viewStart) {\n          offscreenSyncEnd = Math.max(\n            offscreenSyncEnd,\n            Math.min(rangeEnd, viewStart - 1)\n          );\n        }\n      }\n    }\n    const shouldFlushOffscreenLines =\n      offscreenSyncEnd >= dirtyStart &&\n      (canReuseCachedStates || change.lineDelta < 0);\n    if (canReuseCachedStates) {\n      this.#buildStateStackMap(dirtyStart);\n    } else {\n      this.#stateStackCache.length = Math.min(\n        this.#stateStackCache.length,\n        dirtyStart + 1\n      );\n      if (renderRange === undefined || dirtyStart >= viewStart) {\n        this.#buildStateStackMap(viewStart);\n      }\n    }\n\n    let changedRangeIndex = 0;\n    let currentChangedRangeEnd = changedLineRanges[changedRangeIndex][1];\n    let backgroundStartLine: number | undefined;\n    let backgroundChangedRangeIndex = 0;\n    let line = canReuseCachedStates\n      ? changedLineRanges[changedRangeIndex][0]\n      : viewStart;\n    let state = this.#stateStackCache[line] ?? INITIAL;\n    let settled = false;\n    const dirtyLines: Map<number, Array<HighlightedToken>> = new Map();\n    const offscreenDirtyLines:\n      | Map<number, Array<HighlightedToken>>\n      | undefined = shouldFlushOffscreenLines ? new Map() : undefined;\n    if (offscreenDirtyLines !== undefined && !canReuseCachedStates) {\n      const offscreenEnd = Math.min(\n        offscreenSyncEnd + 1,\n        viewStart,\n        renderRangeEndLine\n      );\n      if (offscreenEnd > dirtyStart) {\n        this.#buildStateStackMap(offscreenEnd);\n        let offscreenLine = dirtyStart;\n        let offscreenState = this.#stateStackCache[offscreenLine] ?? INITIAL;\n        for (; offscreenLine < offscreenEnd; offscreenLine++) {\n          const resolved = this.#tokenizeLineAt(offscreenLine, offscreenState);\n          offscreenState = resolved.state;\n          offscreenDirtyLines.set(offscreenLine, resolved.resolvedTokens);\n        }\n        if (canCacheTokenizedStates) {\n          this.#stateStackCache[offscreenEnd] = offscreenState;\n        }\n      }\n    }\n    for (; line < renderRangeEndLine; ) {\n      const previousNextState = canReuseCachedStates\n        ? this.#stateStackCache[line + 1]\n        : undefined;\n      if (canCacheTokenizedStates) {\n        this.#stateStackCache[line] = state;\n      }\n\n      const { resolvedTokens, state: nextState } = this.#tokenizeLineAt(\n        line,\n        state\n      );\n      state = nextState;\n\n      if (line >= viewStart) {\n        dirtyLines.set(line, resolvedTokens);\n      } else {\n        offscreenDirtyLines?.set(line, resolvedTokens);\n      }\n\n      if (canCacheTokenizedStates) {\n        this.#stateStackCache[line + 1] = state;\n      }\n      settled =\n        line >= currentChangedRangeEnd &&\n        canReuseCachedStates &&\n        previousNextState !== undefined &&\n        state.equals(previousNextState);\n      if (settled) {\n        changedRangeIndex++;\n        const nextRange = changedLineRanges[changedRangeIndex];\n        if (nextRange === undefined) {\n          break;\n        }\n        if (nextRange[0] >= renderRangeEndLine) {\n          backgroundStartLine = nextRange[0];\n          backgroundChangedRangeIndex = changedRangeIndex;\n          break;\n        }\n        if (this.#stateStackCache[nextRange[0]] === undefined) {\n          currentChangedRangeEnd = nextRange[1];\n          line++;\n        } else {\n          line = nextRange[0];\n          state = this.#stateStackCache[line] ?? state;\n          currentChangedRangeEnd = nextRange[1];\n        }\n        settled = false;\n        continue;\n      }\n      line++;\n    }\n\n    if (canCacheTokenizedStates) {\n      if (line < renderRangeEndLine) {\n        this.#stateStackCache[line + 1] = state;\n      } else {\n        this.#stateStackCache[line] = state;\n      }\n    }\n\n    if (offscreenDirtyLines !== undefined && offscreenDirtyLines.size > 0) {\n      this.#onDeferTokenize(offscreenDirtyLines, this.#themeType);\n    }\n\n    if (backgroundStartLine !== undefined) {\n      this.#scheduleBackgroundTokenize(\n        backgroundStartLine,\n        changedLineRanges,\n        backgroundChangedRangeIndex\n      );\n    } else if (!settled && line < lineCount) {\n      const backgroundLine =\n        crossesRenderRangeEnd && dirtyStart >= viewStart\n          ? renderRangeEndLine\n          : dirtyStart < viewStart && !canReuseCachedStates\n            ? dirtyStart\n            : line;\n      this.#scheduleBackgroundTokenize(\n        backgroundLine,\n        canReuseCachedStates ? changedLineRanges : undefined,\n        changedRangeIndex\n      );\n    }\n\n    return dirtyLines;\n  }\n\n  prebuildStateStackMap(renderRange?: RenderRange): void {\n    this.#prebuildStateStackMap(renderRange);\n  }\n\n  stopBackgroundTokenize(): void {\n    removeEventListener('message', this.#onMessage);\n    this.#isStopped = true;\n    this.#lastLine = -1;\n    this.#backgroundChangedLineRanges = undefined;\n    this.#backgroundChangedRangeIndex = 0;\n  }\n\n  #scheduleBackgroundTokenize(\n    startLine: number,\n    changedLineRanges?: readonly [number, number][],\n    changedRangeIndex = 0\n  ): void {\n    const jobId = ++this.#backgroundJobId;\n\n    this.#isStopped = false;\n    this.#lastLine = startLine;\n    this.#backgroundChangedLineRanges = changedLineRanges;\n    this.#backgroundChangedRangeIndex = changedRangeIndex;\n\n    globalThis.addEventListener('message', this.#onMessage);\n    this.#postBackgroundTokenizeMessage(jobId);\n  }\n\n  #postBackgroundTokenizeMessage(jobId: number): void {\n    // use `postMessage` instead of `setTimeout(fn, 0)` to avoid 4ms delay\n    globalThis.postMessage({ type: 'tokenize', jobId });\n  }\n\n  #tokenizeLineAt(\n    line: number,\n    state: StateStack\n  ): { resolvedTokens: Array<HighlightedToken>; state: StateStack } {\n    if (this.#grammar === undefined) {\n      throw new Error('Grammar not loaded');\n    }\n    const lineText = this.#textDocument.getLineText(line);\n    if (lineText.length > this.#tokenizeMaxLineLength) {\n      console.warn(\n        `[diffs] Line(${line}) too long to tokenize: ${lineText.length}`\n      );\n      return { resolvedTokens: [[0, '', lineText]], state };\n    }\n    if (lineText === '' || lineText.trim() === '') {\n      return { resolvedTokens: [[0, '', lineText]], state };\n    }\n    const result = tokenizeLine(\n      this.#grammar,\n      this.#colorMap,\n      lineText,\n      state,\n      EditorTokenizer.TOKENIZE_TIME_LIMIT\n    );\n    return {\n      resolvedTokens: result.resolvedTokens,\n      state: result.ruleStack,\n    };\n  }\n\n  #buildStateStackMap(endAt: number) {\n    const boundedEndAt = Math.min(\n      Math.max(0, endAt),\n      this.#textDocument.lineCount\n    );\n    if (\n      this.#stateStackCache.length > boundedEndAt ||\n      this.#grammar === undefined\n    ) {\n      return;\n    }\n    let line = this.#stateStackCache.length - 1;\n    let state = this.#stateStackCache[line] ?? INITIAL;\n    for (; line < boundedEndAt; line++) {\n      this.#stateStackCache[line] = state;\n      const lineText = this.#textDocument.getLineText(line);\n      if (\n        lineText.length <= this.#tokenizeMaxLineLength &&\n        lineText !== '' &&\n        lineText.trim() !== ''\n      ) {\n        state = this.#grammar.tokenizeLine2(\n          lineText,\n          state,\n          EditorTokenizer.TOKENIZE_TIME_LIMIT\n        ).ruleStack;\n      }\n    }\n    this.#stateStackCache[line] = state;\n  }\n\n  #backgroundTokenize(jobId: number) {\n    if (\n      this.#isStopped ||\n      this.#grammar === undefined ||\n      jobId !== this.#backgroundJobId\n    ) {\n      return;\n    }\n\n    const t = performance.now();\n    const lines = new Map<number, Array<HighlightedToken>>();\n    const totalLines = this.#textDocument.lineCount;\n    const changedLineRanges = this.#backgroundChangedLineRanges;\n\n    let line = this.#lastLine;\n    let state = this.#stateStackCache[line] ?? INITIAL;\n    let settled = false;\n    let changedRangeIndex = this.#backgroundChangedRangeIndex;\n    let currentChangedRangeEnd = changedLineRanges?.[changedRangeIndex]?.[1];\n    for (; line < totalLines; ) {\n      this.#stateStackCache[line] = state;\n\n      const previousNextState =\n        currentChangedRangeEnd !== undefined\n          ? this.#stateStackCache[line + 1]\n          : undefined;\n      const lineText = this.#textDocument.getLineText(line);\n      if (lineText.length > this.#tokenizeMaxLineLength) {\n        console.warn(\n          `[diffs] Line(${line}) too long to tokenize: ${lineText.length}`\n        );\n        lines.set(line, [[0, '', lineText]]);\n      } else if (lineText === '' || lineText.trim() === '') {\n        lines.set(line, [[0, '', lineText]]);\n      } else {\n        const ret = tokenizeLine(\n          this.#grammar,\n          this.#colorMap,\n          lineText,\n          state,\n          EditorTokenizer.TOKENIZE_TIME_LIMIT\n        );\n        lines.set(line, ret.resolvedTokens);\n        state = ret.ruleStack;\n      }\n\n      this.#stateStackCache[line + 1] = state;\n      settled =\n        currentChangedRangeEnd !== undefined &&\n        line >= currentChangedRangeEnd &&\n        previousNextState !== undefined &&\n        state.equals(previousNextState);\n      line++;\n      if (settled) {\n        changedRangeIndex++;\n        const nextRange = changedLineRanges?.[changedRangeIndex];\n        if (nextRange === undefined) {\n          break;\n        }\n        currentChangedRangeEnd = nextRange[1];\n        if (this.#stateStackCache[nextRange[0]] === undefined) {\n          settled = false;\n        } else {\n          line = nextRange[0];\n          state = this.#stateStackCache[line] ?? state;\n          settled = false;\n          continue;\n        }\n      }\n\n      // limit the time of partial tokenize to 2ms\n      if (performance.now() - t > 2) {\n        break;\n      }\n    }\n\n    this.#onDeferTokenize(lines, this.#themeType);\n    if (this.#isStopped || jobId !== this.#backgroundJobId) {\n      return;\n    }\n\n    if (settled || line >= totalLines) {\n      this.stopBackgroundTokenize();\n      return;\n    }\n\n    this.#lastLine = line;\n    this.#backgroundChangedRangeIndex = changedRangeIndex;\n    this.#postBackgroundTokenizeMessage(jobId);\n  }\n}\n\nexport function tokenizeLine(\n  grammar: IGrammar,\n  colorMap: string[],\n  lineText: string,\n  stateStack: StateStack,\n  timeLimit?: number\n): {\n  ruleStack: StateStack;\n  resolvedTokens: Array<HighlightedToken>;\n} {\n  const result = grammar.tokenizeLine2(lineText, stateStack, timeLimit);\n  if (result.stoppedEarly) {\n    console.warn(\n      `[diffs] Time limit reached when tokenizing line: ${lineText.substring(0, 100)}`\n    );\n  }\n  const rawTokens = result.tokens;\n  const tokensLength = rawTokens.length / 2;\n  const resolvedTokens: Array<HighlightedToken> = [];\n  for (let j = 0; j < tokensLength; j++) {\n    const offset = rawTokens[2 * j];\n    const nextOffset =\n      j + 1 < tokensLength ? rawTokens[2 * j + 2] : lineText.length;\n    if (offset === nextOffset) {\n      // should never reach here, skip if happens anyway\n      continue;\n    }\n    const metadata = rawTokens[2 * j + 1];\n    const bg = EncodedTokenMetadata.getForeground(metadata);\n    const fg = colorMap[bg];\n    const tokenText = lineText.slice(offset, nextOffset);\n    resolvedTokens.push([offset, fg, tokenText]);\n  }\n  return {\n    ruleStack: result.ruleStack,\n    resolvedTokens,\n  };\n}\n\nexport function renderLineTokens(\n  tokens: Array<HighlightedToken>,\n  themeType: 'light' | 'dark'\n): (HTMLElement | string)[] {\n  return tokens.map(([char, fg, textContent]) => {\n    if (char === 0 && fg === '') {\n      if (textContent === '') {\n        return h('br');\n      }\n      return textContent;\n    }\n    return h('span', {\n      dataset: {\n        char: char.toString(),\n      },\n      style: `--diffs-token-${themeType}:${fg};`,\n      textContent: textContent,\n    });\n  });\n}\n"],"mappings":"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"}

package/dist/editor/utils.d.ts

@@ -0,0 +1,16 @@
+//#region src/editor/utils.d.ts
+declare function h<K extends keyof HTMLElementTagNameMap>(tagName: K, props?: {
+  style?: string | Partial<CSSStyleDeclaration>;
+  dataset?: DOMStringMap | string[] | string;
+  children?: (Node | string)[];
+} & Partial<Omit<HTMLElementTagNameMap[K], 'style' | 'dataset' | 'children'>>, parent?: Element | ShadowRoot | DocumentFragment): HTMLElementTagNameMap[K];
+declare function addEventListener<K extends keyof HTMLElementEventMap>(el: HTMLElement, event: K, listener: (this: HTMLElement, evt: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): () => void;
+declare function addEventListener<K extends keyof DocumentEventMap>(el: Document, event: K, listener: (this: Document, evt: DocumentEventMap[K]) => void, options?: AddEventListenerOptions): () => void;
+declare function addEventListener<K extends keyof WindowEventMap>(el: Window, event: K, listener: (this: Window, evt: WindowEventMap[K]) => void, options?: AddEventListenerOptions): () => void;
+declare function addEventListener<K extends keyof MediaQueryListEventMap>(el: MediaQueryList, event: K, listener: (this: MediaQueryList, evt: MediaQueryListEventMap[K]) => void, options?: AddEventListenerOptions): () => void;
+declare function extend<T extends object>(obj: T, attrs: Partial<T>): T;
+declare function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;
+declare function round(value: number, precision?: number): number;
+//#endregion
+export { addEventListener, debounce, extend, h, round };
+//# sourceMappingURL=utils.d.ts.map

package/dist/editor/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":["h","K","HTMLElementTagNameMap","CSSStyleDeclaration","Partial","DOMStringMap","Node","Omit","Element","ShadowRoot","DocumentFragment","addEventListener","HTMLElementEventMap","HTMLElement","AddEventListenerOptions","DocumentEventMap","Document","WindowEventMap","Window","MediaQueryListEventMap","MediaQueryList","extend","T","debounce","Parameters","round"],"sources":["../../src/editor/utils.d.ts"],"sourcesContent":["export declare function h<K extends keyof HTMLElementTagNameMap>(tagName: K, props?: {\n    style?: string | Partial<CSSStyleDeclaration>;\n    dataset?: DOMStringMap | string[] | string;\n    children?: (Node | string)[];\n} & Partial<Omit<HTMLElementTagNameMap[K], 'style' | 'dataset' | 'children'>>, parent?: Element | ShadowRoot | DocumentFragment): HTMLElementTagNameMap[K];\nexport declare function addEventListener<K extends keyof HTMLElementEventMap>(el: HTMLElement, event: K, listener: (this: HTMLElement, evt: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): () => void;\nexport declare function addEventListener<K extends keyof DocumentEventMap>(el: Document, event: K, listener: (this: Document, evt: DocumentEventMap[K]) => void, options?: AddEventListenerOptions): () => void;\nexport declare function addEventListener<K extends keyof WindowEventMap>(el: Window, event: K, listener: (this: Window, evt: WindowEventMap[K]) => void, options?: AddEventListenerOptions): () => void;\nexport declare function addEventListener<K extends keyof MediaQueryListEventMap>(el: MediaQueryList, event: K, listener: (this: MediaQueryList, evt: MediaQueryListEventMap[K]) => void, options?: AddEventListenerOptions): () => void;\nexport declare function extend<T extends object>(obj: T, attrs: Partial<T>): T;\nexport declare function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;\nexport declare function round(value: number, precision?: number): number;\n//# sourceMappingURL=utils.d.ts.map"],"mappings":"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"}

package/dist/editor/utils.js

@@ -0,0 +1,37 @@
+//#region src/editor/utils.ts
+function h(tagName, props, parent) {
+	const { style, dataset, children,...attrs } = props ?? {};
+	const el = document.createElement(tagName);
+	Object.assign(el, attrs);
+	if (style !== void 0) if (typeof style === "string") el.style.cssText = style;
+	else Object.assign(el.style, style);
+	if (dataset !== void 0) if (typeof dataset === "string") el.dataset[dataset] = "";
+	else if (Array.isArray(dataset)) dataset.forEach((key) => {
+		el.dataset[key] = "";
+	});
+	else Object.assign(el.dataset, dataset);
+	if (children !== void 0) el.replaceChildren(...children);
+	if (parent !== void 0) parent.appendChild(el);
+	return el;
+}
+function addEventListener(el, event, listener, options) {
+	el.addEventListener(event, listener, options);
+	return () => el.removeEventListener(event, listener);
+}
+function extend(obj, attrs) {
+	return Object.assign(obj, attrs);
+}
+function debounce(func, wait) {
+	let timeout;
+	return function(...args) {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => func.apply(this, args), wait);
+	};
+}
+function round(value, precision = 1e3) {
+	return Math.round(value * precision) / precision;
+}
+
+//#endregion
+export { addEventListener, debounce, extend, h, round };
+//# sourceMappingURL=utils.js.map