performance

Author: MrWangJustToDo

packages/core/index.d.ts

@@ -16,7 +16,7 @@ declare class File$1 {
 	rawFile: Record<number, string>;
 	hasDoRaw: boolean;
 	rawLength?: number;
-	syntaxFile: Record<number, SyntaxLine>;
+	syntaxFile: Record<number, SyntaxLineWithTemplate>;
 	hasDoSyntax: boolean;
 	syntaxLength?: number;
 	highlighterName?: DiffHighlighter["name"];
@@ -93,8 +93,8 @@ export declare class DiffFile {
 	onAllCollapse: (mode: "split" | "unified") => void;
 	getOldFileContent: () => string;
 	getNewFileContent: () => string;
-	getOldSyntaxLine: (lineNumber: number) => SyntaxLine;
-	getNewSyntaxLine: (lineNumber: number) => SyntaxLine;
+	getOldSyntaxLine: (lineNumber: number) => SyntaxLineWithTemplate;
+	getNewSyntaxLine: (lineNumber: number) => SyntaxLineWithTemplate;
 	subscribe: (listener: (() => void) & {
 		isSyncExternal?: boolean;
 	}) => () => void;
@@ -108,11 +108,11 @@ export declare class DiffFile {
 		hasBuildUnified: boolean;
 		oldFileLines: Record<number, string>;
 		oldFileDiffLines: Record<string, DiffLineItem>;
-		oldFileSyntaxLines: Record<number, SyntaxLine>;
+		oldFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		oldFilePlaceholderLines: Record<string, boolean>;
 		newFileLines: Record<number, string>;
 		newFileDiffLines: Record<string, DiffLineItem>;
-		newFileSyntaxLines: Record<number, SyntaxLine>;
+		newFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		newFilePlaceholderLines: Record<string, boolean>;
 		splitLineLength: number;
 		unifiedLineLength: number;
@@ -157,11 +157,11 @@ export declare class DiffFile {
 		hasBuildUnified: boolean;
 		oldFileLines: Record<number, string>;
 		oldFileDiffLines: Record<string, DiffLineItem>;
-		oldFileSyntaxLines: Record<number, SyntaxLine>;
+		oldFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		oldFilePlaceholderLines: Record<string, boolean>;
 		newFileLines: Record<number, string>;
 		newFileDiffLines: Record<string, DiffLineItem>;
-		newFileSyntaxLines: Record<number, SyntaxLine>;
+		newFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		newFilePlaceholderLines: Record<string, boolean>;
 		splitLineLength: number;
 		unifiedLineLength: number;
@@ -232,7 +232,9 @@ export declare class DiffLine {
 	readonly noTrailingNewLine: boolean;
 	changes?: IRange;
 	diffChanges?: DiffRange;
-	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange);
+	plainTemplate?: string;
+	syntaxTemplate?: string;
+	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, plainTemplate?: string, syntaxTemplate?: string);
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;
@@ -382,13 +384,25 @@ export declare const checkCurrentLineIsHidden: (diffFile: DiffFile, lineNumber:
 };
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
 export declare const disableCache: () => void;
-export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, }: {
+export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, getAdditionSyntax, getDeletionSyntax, }: {
 	getAdditionRaw: (lineNumber: number) => string;
 	getDeletionRaw: (lineNumber: number) => string;
+	getAdditionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
+	getDeletionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 }) => void;
 export declare const getLang: (fileName: string) => string;
+export declare const getPlainTemplate: ({ diffLine, rawLine, operator, }: {
+	diffLine: DiffLine;
+	rawLine: string;
+	operator: "add" | "del";
+}) => void;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
 export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
+export declare const getSyntaxTemplate: ({ diffLine, syntaxLine, operator, }: {
+	diffLine: DiffLine;
+	syntaxLine: SyntaxLineWithTemplate;
+	operator: "add" | "del";
+}) => void;
 export declare const getUnifiedContentLine: (diffFile: DiffFile) => DiffUnifiedContentLineItem[];
 export declare const getUnifiedLines: (diffFile: DiffFile) => DiffUnifiedLineItem[];
 export declare const highlighter: DiffHighlighter;
@@ -453,6 +467,7 @@ export declare function diffChanges(addition: DiffLine, deletion: DiffLine): {
 	addRange: DiffRange;
 	delRange: DiffRange;
 };
+export declare function escapeHtml(string: unknown): string;
 export declare function getFile(raw: string, lang: DiffHighlighterLang, theme: "light" | "dark", fileName?: string, uuid?: string): File$1;
 export declare function getFile(raw: string, lang: string, theme: "light" | "dark", fileName?: string, uuid?: string): File$1;
 /**
@@ -649,6 +664,9 @@ export type SyntaxLine = {
 		wrapper?: SyntaxNode;
 	}[];
 };
+export type SyntaxLineWithTemplate = SyntaxLine & {
+	template?: string;
+};
 // Generated by dts-bundle-generator v9.5.1
 export type SyntaxNode = {
 	type: string;

packages/core/src/diff-file.ts

@@ -451,6 +451,14 @@ export class DiffFile {
       return this.#getOldRawLine(lineNumber);
     };
 
+    const getAdditionSyntax = (lineNumber: number) => {
+      return this.#getNewSyntaxLine(lineNumber);
+    };
+
+    const getDeletionSyntax = (lineNumber: number) => {
+      return this.#getOldSyntaxLine(lineNumber);
+    };
+
     this.#diffLines = [];
 
     this.additionLength = 0;
@@ -472,13 +480,18 @@ export class DiffFile {
             deletions.push(line);
             this.deletionLength++;
           } else {
-            getDiffRange(additions, deletions, { getAdditionRaw, getDeletionRaw });
+            getDiffRange(additions, deletions, {
+              getAdditionRaw,
+              getDeletionRaw,
+              getAdditionSyntax,
+              getDeletionSyntax,
+            });
             additions = [];
             deletions = [];
           }
           tmp.push(line);
         });
-        getDiffRange(additions, deletions, { getAdditionRaw, getDeletionRaw });
+        getDiffRange(additions, deletions, { getAdditionRaw, getDeletionRaw, getAdditionSyntax, getDeletionSyntax });
       });
     });
 
@@ -585,6 +598,28 @@ export class DiffFile {
     this.#newFileSyntaxLines = this.#newFileResult?.syntaxFile;
   }
 
+  #doSyntax({ registerHighlighter }: { registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine"> } = {}) {
+    if (this.#highlighterType === "class") return;
+
+    if (this.#composeByMerge && !this.#composeByFullMerge) {
+      if (__DEV__) {
+        console.error(
+          `this instance can not do syntax because of the data missing, try to use '_getFullBundle' & '_mergeFullBundle' instead of 'getBundle' & 'mergeBundle'`
+        );
+      }
+
+      return;
+    }
+
+    this.#composeSyntax({ registerHighlighter });
+
+    this.#highlighterName =
+      this.#oldFileResult?.highlighterName || this.#newFileResult?.highlighterName || this.#highlighterName;
+
+    this.#highlighterType =
+      this.#oldFileResult?.highlighterType || this.#newFileResult?.highlighterType || this.#highlighterType;
+  }
+
   #getOldDiffLine(lineNumber: number | null) {
     if (!lineNumber) return;
     return this.#oldFileDiffLines?.[lineNumber];
@@ -603,6 +638,14 @@ export class DiffFile {
     return this.#newFileLines?.[lineNumber];
   }
 
+  #getOldSyntaxLine(lineNumber: number) {
+    return this.#oldFileSyntaxLines?.[lineNumber];
+  }
+
+  #getNewSyntaxLine(lineNumber: number) {
+    return this.#newFileSyntaxLines?.[lineNumber];
+  }
+
   initId() {
     let id = "--" + Math.random().toString().slice(2);
 
@@ -641,25 +684,12 @@ export class DiffFile {
   initSyntax({ registerHighlighter }: { registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine"> } = {}) {
     if (this.#hasInitSyntax && (!this.#_theme || this.#theme === this.#_theme)) return;
 
-    if (this.#highlighterType === "class") return;
+    this.#doSyntax({ registerHighlighter });
 
-    if (this.#composeByMerge && !this.#composeByFullMerge) {
-      if (__DEV__) {
-        console.error(
-          `this instance can not do syntax because of the data missing, try to use '_getFullBundle' & '_mergeFullBundle' instead of 'getBundle' & 'mergeBundle'`
-        );
-      }
+    // reset diff
+    this.#diffListResults = [];
 
-      return;
-    }
-
-    this.#composeSyntax({ registerHighlighter });
-
-    this.#highlighterName =
-      this.#oldFileResult?.highlighterName || this.#newFileResult?.highlighterName || this.#highlighterName;
-
-    this.#highlighterType =
-      this.#oldFileResult?.highlighterType || this.#newFileResult?.highlighterType || this.#highlighterType;
+    this.#composeDiff();
 
     this.#hasInitSyntax = true;
   }
@@ -1584,3 +1614,11 @@ export class DiffFile {
     this.#theme = undefined;
   };
 }
+
+if (__DEV__) {
+  Object.defineProperty(DiffFile.prototype, "__full_bundle__", {
+    get: function (this: DiffFile) {
+      return this._getFullBundle();
+    },
+  });
+}

packages/core/src/escape-html.ts

@@ -0,0 +1,47 @@
+// copy from https://github.com/vuejs/core/blob/main/packages/shared/src/escapeHtml.ts
+
+const escapeRE = /["'&<>]/;
+
+export function escapeHtml(string: unknown): string {
+  const str = "" + string;
+  const match = escapeRE.exec(str);
+
+  if (!match) {
+    return str;
+  }
+
+  let html = "";
+  let escaped: string;
+  let index: number;
+  let lastIndex = 0;
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escaped = "&quot;";
+        break;
+      case 38: // &
+        escaped = "&amp;";
+        break;
+      case 39: // '
+        escaped = "&#39;";
+        break;
+      case 60: // <
+        escaped = "&lt;";
+        break;
+      case 62: // >
+        escaped = "&gt;";
+        break;
+      default:
+        continue;
+    }
+
+    if (lastIndex !== index) {
+      html += str.slice(lastIndex, index);
+    }
+
+    lastIndex = index + 1;
+    html += escaped;
+  }
+
+  return lastIndex !== index ? html + str.slice(lastIndex, index) : html;
+}

packages/core/src/file.ts

@@ -1,6 +1,8 @@
 import { highlighter } from "@git-diff-view/lowlight";
 
 import { Cache } from "./cache";
+import { escapeHtml } from "./escape-html";
+
 
 import type { DiffAST, DiffHighlighter, DiffHighlighterLang, SyntaxLine } from "@git-diff-view/lowlight";
 
@@ -26,6 +28,22 @@ if (__DEV__ && typeof globalThis !== "undefined") {
   }
 }
 
+export type SyntaxLineWithTemplate = SyntaxLine & {
+  template?: string;
+};
+
+const getSyntaxLineTemplate = (line: SyntaxLine) => {
+  let template = "";
+
+  line?.nodeList?.forEach(({ node, wrapper }) => {
+    template += `<span data-start="${node.startIndex}" data-end="${node.endIndex}" class="${(
+      wrapper?.properties?.className || []
+    )?.join(" ")}" style="${wrapper?.properties?.style || ""}">${escapeHtml(node.value)}</span>`;
+  });
+
+  return template;
+};
+
 export class File {
   ast?: DiffAST;
 
@@ -35,7 +53,7 @@ export class File {
 
   rawLength?: number;
 
-  syntaxFile: Record<number, SyntaxLine> = {};
+  syntaxFile: Record<number, SyntaxLineWithTemplate> = {};
 
   hasDoSyntax: boolean = false;
 
@@ -126,6 +144,11 @@ export class File {
 
     const { syntaxFileObject, syntaxFileLineNumber } = supportEngin.processAST(this.ast);
 
+    // get syntax template
+    Object.values(syntaxFileObject).forEach((line: SyntaxLineWithTemplate) => {
+      line.template = getSyntaxLineTemplate(line);
+    });
+
     this.syntaxFile = syntaxFileObject;
 
     this.syntaxLength = syntaxFileLineNumber;

packages/core/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./parse";
 export * from "./file";
 export * from "./diff-file";
+export * from "./escape-html";
 export * from "./diff-file-utils";
 
 export * from "@git-diff-view/lowlight";

packages/core/src/parse/diff-line.ts

@@ -20,7 +20,9 @@ export class DiffLine {
     public readonly newLineNumber: number | null,
     public readonly noTrailingNewLine: boolean = false,
     public changes?: IRange,
-    public diffChanges?: DiffRange
+    public diffChanges?: DiffRange,
+    public plainTemplate?: string,
+    public syntaxTemplate?: string
   ) {}
 
   public withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine {