wip vue

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "build:packages": "ts-node ./scripts/build.ts",
     "dev:react": "cd ui/react-example && pnpm run dev",
+    "dev:vue": "cd ui/vue-example && pnpm run dev",
     "build:react": "cd ui/react-example && pnpm run build",
     "lint": "eslint --cache --ext ts,tsx .",
     "lint:fix": "pnpm run lint --fix",

packages/core/src/diff-file.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable max-lines */
 import { relativeChanges } from "./change-range";
 import { DiffLineType } from "./diff-line";
@@ -6,11 +7,13 @@ import { getFile } from "./file";
 import { numIterator } from "./tool";
 
 import type { DiffLine } from "./diff-line";
-import type { File} from "./file";
+import type { File } from "./file";
 import type { IRawDiff } from "./raw-diff";
 
 export const composeLen = 20;
 
+const idSet = new Set<string>();
+
 interface DiffLineItem extends DiffLine {
   index: number;
 }
@@ -124,6 +127,8 @@ export class DiffFile {
 
   unifiedLineLength: number = 0;
 
+  #id: string = "";
+
   constructor(
     readonly _oldFileName: string,
     _oldFileContent: string,
@@ -156,6 +161,16 @@ export class DiffFile {
     if (!oldContent && !newContent) {
       console.error('should pass "oldFileContent" or "newFileContent" to make the diff work!');
     }
+
+    let id = "--" + Math.random().toString().slice(2);
+
+    while (idSet.has(id)) {
+      id = "--" + Math.random().toString().slice(2);
+    }
+
+    idSet.add(id);
+
+    this.#id = id;
   }
 
   #doDiff() {
@@ -332,6 +347,14 @@ export class DiffFile {
     return this.#newFileLines?.[lineNumber];
   }
 
+  getId() {
+    return this.#id;
+  }
+
+  clearId() {
+    idSet.delete(this.#id);
+  }
+
   initRaw() {
     if (this.#_hasInitRaw) return;
     this.#doDiff();

packages/core/src/diff-line.ts

@@ -1,4 +1,4 @@
-import type { IRange } from "./change-range"
+import type { IRange } from "./change-range";
 
 /** indicate what a line in the diff represents */
 export enum DiffLineType {
@@ -20,27 +20,20 @@ export class DiffLine {
     public readonly newLineNumber: number | null,
     public readonly noTrailingNewLine: boolean = false,
     public needRematch: boolean = false,
-    public range?: IRange,
+    public range?: IRange
   ) {}
 
   public withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine {
-    return new DiffLine(
-      this.text,
-      this.type,
-      this.originalLineNumber,
-      this.oldLineNumber,
-      this.newLineNumber,
-      noTrailingNewLine
-    )
+    return new DiffLine(this.text, this.type, this.originalLineNumber, this.oldLineNumber, this.newLineNumber, noTrailingNewLine);
   }
 
   public isIncludeableLine() {
-    return this.type === DiffLineType.Add || this.type === DiffLineType.Delete
+    return this.type === DiffLineType.Add || this.type === DiffLineType.Delete;
   }
 
   /** The content of the line, i.e., without the line type marker. */
   public get content(): string {
-    return this.text.substring(1)
+    return this.text.substring(1);
   }
 
   public equals(other: DiffLine) {
@@ -51,6 +44,6 @@ export class DiffLine {
       this.oldLineNumber === other.oldLineNumber &&
       this.newLineNumber === other.newLineNumber &&
       this.noTrailingNewLine === other.noTrailingNewLine
-    )
+    );
   }
-}
+}

packages/core/src/diff-parse.ts

@@ -82,6 +82,7 @@ export class DiffParser {
   private text!: string
 
   public constructor() {
+    Object.defineProperty(this, "__v_skip", { value: true });
     this.reset()
   }
 

packages/core/src/file.ts

@@ -44,7 +44,9 @@ export class File {
   constructor(
     readonly raw: string,
     readonly lang: string
-  ) {}
+  ) {
+    Object.defineProperty(this, "__v_skip", { value: true });
+  }
 
   doSyntax() {
     if (!this.raw || this.hasDoSyntax) return;
@@ -119,12 +121,13 @@ export class File {
             if (!syntaxObj[lineNumber]) {
               node.startIndex = 0;
               node.endIndex = valueLength - 1;
-              syntaxObj[lineNumber] = {
+              const item = {
                 value: node.value,
                 lineNumber,
                 valueLength,
                 nodeList: [{ node, wrapper }],
               };
+              syntaxObj[lineNumber] = item;
             } else {
               node.startIndex = syntaxObj[lineNumber].valueLength;
               node.endIndex = node.startIndex + valueLength - 1;
@@ -152,12 +155,13 @@ export class File {
             if (!syntaxObj[_lineNumber]) {
               _node.startIndex = 0;
               _node.endIndex = _valueLength - 1;
-              syntaxObj[_lineNumber] = {
+              const item = {
                 value: _value,
                 lineNumber: _lineNumber,
                 valueLength: _valueLength,
                 nodeList: [{ node: _node, wrapper }],
               };
+              syntaxObj[_lineNumber] = item;
             } else {
               _node.startIndex = syntaxObj[_lineNumber].valueLength;
               _node.endIndex = _node.startIndex + _valueLength - 1;

packages/core/src/raw-diff.ts

@@ -1,29 +1,29 @@
-import type { DiffLine } from './diff-line'
+import type { DiffLine } from "./diff-line";
 
 export enum DiffHunkExpansionType {
   /** The hunk header cannot be expanded at all. */
-  None = 'None',
+  None = "None",
 
   /**
    * The hunk header can be expanded up exclusively. Only the first hunk can be
    * expanded up exclusively.
    */
-  Up = 'Up',
+  Up = "Up",
 
   /**
    * The hunk header can be expanded down exclusively. Only the last hunk (if
    * it's the dummy hunk with only one line) can be expanded down exclusively.
    */
-  Down = 'Down',
+  Down = "Down",
 
   /** The hunk header can be expanded both up and down. */
-  Both = 'Both',
+  Both = "Both",
 
   /**
    * The hunk header represents a short gap that, when expanded, will
    * result in merging this hunk and the hunk above.
    */
-  Short = 'Short',
+  Short = "Short",
 }
 
 /** each diff is made up of a number of hunks */
@@ -44,7 +44,7 @@ export class DiffHunk {
 
   public equals(other: DiffHunk) {
     if (this === other) {
-      return true
+      return true;
     }
 
     return (
@@ -54,7 +54,7 @@ export class DiffHunk {
       this.expansionType === other.expansionType &&
       this.lines.length === other.lines.length &&
       this.lines.every((xLine, ix) => xLine.equals(other.lines[ix]))
-    )
+    );
   }
 }
 
@@ -74,7 +74,7 @@ export class DiffHunkHeader {
   ) {}
 
   public toDiffLineRepresentation() {
-    return `@@ -${this.oldStartLine},${this.oldLineCount} +${this.newStartLine},${this.newLineCount} @@`
+    return `@@ -${this.oldStartLine},${this.oldLineCount} +${this.newStartLine},${this.newLineCount} @@`;
   }
 
   public equals(other: DiffHunkHeader) {
@@ -83,7 +83,7 @@ export class DiffHunkHeader {
       this.oldLineCount === other.oldLineCount &&
       this.newStartLine === other.newStartLine &&
       this.oldStartLine === other.oldStartLine
-    )
+    );
   }
 }
 
@@ -95,7 +95,7 @@ export interface IRawDiff {
    * hunk header starts. Note that this does not include a trailing
    * newline.
    */
-  readonly header: string
+  readonly header: string;
 
   /**
    * The plain text contents of the diff. This contains everything
@@ -106,23 +106,23 @@ export interface IRawDiff {
    * no-newline information, consult the DiffLine noTrailingNewLine
    * property.
    */
-  readonly contents: string
+  readonly contents: string;
 
   /**
    * Each hunk in the diff with information about start, and end
    * positions, lines and line statuses.
    */
-  readonly hunks: ReadonlyArray<DiffHunk>
+  readonly hunks: ReadonlyArray<DiffHunk>;
 
   /**
    * Whether or not the unified diff indicates that the contents
    * could not be diffed due to one of the versions being binary.
    */
-  readonly isBinary: boolean
+  readonly isBinary: boolean;
 
   /** The largest line number in the diff */
-  readonly maxLineNumber: number
+  readonly maxLineNumber: number;
 
   /** Whether or not the diff has invisible bidi characters */
-  readonly hasHiddenBidiChars: boolean
-}
+  readonly hasHiddenBidiChars: boolean;
+}

packages/react/src/components/DiffSplitHunkLine.tsx

@@ -5,7 +5,7 @@ import { useDiffViewContext, SplitSide } from "..";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { hunkContentBGName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
-import { ExpandAll, ExpandDown, ExpandUp } from "./Expand";
+import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
 
 const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
   const currentHunk = diffFile.getSplitHunkLine(index);

packages/react/src/components/DiffUnifiedHunkLine.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useDiffViewContext } from "..";
 
 import { hunkContentBGName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
-import { ExpandAll, ExpandDown, ExpandUp } from "./Expand";
+import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
 
 import type { DiffFile } from "@git-diff-view/core";
 

packages/react/src/components/DiffView.tsx

@@ -17,8 +17,6 @@ import type { CSSProperties } from "react";
 
 const diffFontSizeName = "--diff-font-size--";
 
-const idSet = new Set<string>();
-
 export enum SplitSide {
   old = 1,
   new = 2,
@@ -63,14 +61,7 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
 
   const memoOnAddWidgetClick = useCallbackRef(onAddWidgetClick);
 
-  const id = useMemo(() => {
-    let id = "--" + Math.random().toString().slice(2);
-    while (idSet.has(id)) {
-      id = "--" + Math.random().toString().slice(2);
-    }
-    idSet.add(id);
-    return id;
-  }, [diffFile]);
+  const id = useMemo(() => diffFile.getId(), [diffFile]);
 
   const value = useMemo(
     () =>
@@ -102,7 +93,7 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
 
   useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
 
-  useUnmount(() => idSet.delete(id), [id]);
+  useUnmount(() => diffFile.clearId(), [diffFile]);
 
   return (
     <DiffViewContext.Provider value={value}>
@@ -147,6 +138,7 @@ export const DiffView = <T extends unknown>(props: DiffViewProps<T>) => {
   useEffect(() => {
     if (props.diffViewHighlight) {
       diffFile.initSyntax();
+      diffFile.notifyAll();
     }
   }, [diffFile, props.diffViewHighlight]);