Merge pull request #17 from MrWangJustToDo/feature/ssr

ssr impl

Author: MrWangJustToDo

.eslintrc.cjs

@@ -5,5 +5,5 @@ module.exports = {
   },
   // eslint will auto add `eslint-config` for a no scope package(which not start with '@' chart), so here use absolute file path
   extends: [require.resolve("project-tool/baseLint")],
-  ignorePatterns: ["dist", "dev", "scripts", "node_modules"],
+  ignorePatterns: ["dist", "dev", "scripts", "node_modules", "next-app-example", "next-page-example"],
 };

.prettierignore

@@ -1,4 +1,6 @@
 **/node_modules
+**/next-app-example
+**/next-page-example
 **/dist
 **/dev
 **/*.md

README.md

@@ -47,14 +47,16 @@ a React/Vue component to show the `git diff`/`file diff` result, just like Githu
 + [x] Show the `git diff` result 
 + [x] Support `Split View` and `Unified View`
 + [x] Support `Warp` / `UnWarp` the code line
-+ [x] Support `light` / `dark` theme by default
++ [x] Support `light` / `dark` theme by default (since v0.0.17)
 + [x] Support `Syntax Highlight` with <b>`full syntax context`</b> (base on `hast` AST)
 + [x] Support `Extend Data` component in the `Diff View`
 + [x] Support `Widget` component in the `Diff View`
 + [x] Support `Web Worker` / `Node Server` to improve performance
 + [x] Support `React` and `Vue` component
 + [x] Support compare by `@git-diff-view/core`(git diff) or `@git-diff-view/file`(file content)
 + [x] Support `Diff Match Patch` to improve line diff (experimental)
++ [x] Support `SSR` for `React` and `Vue` component (since v0.0.21)
++ [x] Support `RSC` for `React` component (since v0.0.21)
 + [ ] Support `Virtual Scroll` to improve performance
 
 

package.json

@@ -10,6 +10,9 @@
     "start:release": "ts-node ./scripts/release.ts",
     "dev:react": "cd ui/react-example && pnpm run dev",
     "dev:vue": "cd ui/vue-example && pnpm run dev",
+    "dev:vue-ssr": "cd ui/vue-ssr-example && pnpm run dev",
+    "dev:next-page": "cd ui/next-page-example && pnpm run dev",
+    "dev:next-app": "cd ui/next-app-example && pnpm run dev",
     "build:react": "cd ui/react-example && pnpm run build",
     "pre:release": "pnpm run lint && pnpm run prettier && pnpm run clean && pnpm run build:packages",
     "release": "pnpm run pre:release && pnpm run start:release",

packages/core/index.d.ts

@@ -408,7 +408,8 @@ export declare enum NewLineSymbol {
 	CR = 2,
 	LF = 3,
 	NEWLINE = 4,
-	NORMAL = 5
+	NORMAL = 5,
+	NULL = 6
 }
 export declare function _getAST(raw: string, fileName?: string, lang?: DiffHighlighterLang, theme?: "light" | "dark"): DiffAST;
 export declare function _getAST(raw: string, fileName?: string, lang?: string, theme?: "light" | "dark"): DiffAST;

packages/core/src/diff-file.ts

@@ -628,13 +628,19 @@ export class DiffFile {
     const maxOldFileLineNumber = this.#oldFileResult?.maxLineNumber || 0;
     const maxNewFileLineNumber = this.#newFileResult?.maxLineNumber || 0;
 
+    if (__DEV__ && !this.#oldFileResult && !this.#newFileResult) {
+      console.error(
+        "this instance can not `buildSplitDiffLines` because of the data missing, try to use '_getFullBundle' & '_mergeFullBundle' instead of 'getBundle' & 'mergeBundle'"
+      );
+    }
+
     while (oldFileLineNumber <= maxOldFileLineNumber || newFileLineNumber <= maxNewFileLineNumber) {
       const oldDiffLine = this.#getOldDiffLine(oldFileLineNumber);
       const newDiffLine = this.#getNewDiffLine(newFileLineNumber);
       const oldRawLine = this.#getOldRawLine(oldFileLineNumber);
       const newRawLine = this.#getNewRawLine(newFileLineNumber);
-      const oldLineHasChange = oldDiffLine?.isIncludeableLine();
-      const newLineHasChange = newDiffLine?.isIncludeableLine();
+      const oldLineHasChange = DiffLine.prototype.isIncludeableLine.call(oldDiffLine || {});
+      const newLineHasChange = DiffLine.prototype.isIncludeableLine.call(newDiffLine || {});
       const len = this.#splitRightLines.length;
       const isHidden = !oldDiffLine && !newDiffLine;
 
@@ -808,13 +814,19 @@ export class DiffFile {
     const maxOldFileLineNumber = this.#oldFileResult?.maxLineNumber || 0;
     const maxNewFileLineNumber = this.#newFileResult?.maxLineNumber || 0;
 
+    if (__DEV__ && !this.#oldFileResult && !this.#newFileResult) {
+      console.error(
+        "this instance can not `buildUnifiedDiffLines` because of the data missing, try to use '_getFullBundle' & '_mergeFullBundle' instead of 'getBundle' & 'mergeBundle'"
+      );
+    }
+
     while (oldFileLineNumber <= maxOldFileLineNumber || newFileLineNumber <= maxNewFileLineNumber) {
       const oldRawLine = this.#getOldRawLine(oldFileLineNumber);
       const oldDiffLine = this.#getOldDiffLine(oldFileLineNumber);
       const newRawLine = this.#getNewRawLine(newFileLineNumber);
       const newDiffLine = this.#getNewDiffLine(newFileLineNumber);
-      const oldLineHasChange = oldDiffLine?.isIncludeableLine();
-      const newLineHasChange = newDiffLine?.isIncludeableLine();
+      const oldLineHasChange = DiffLine.prototype.isIncludeableLine.call(oldDiffLine || {});
+      const newLineHasChange = DiffLine.prototype.isIncludeableLine.call(newDiffLine || {});
       const len = this.#unifiedLines.length;
       const isHidden = !oldDiffLine && !newDiffLine;
 
@@ -1424,9 +1436,9 @@ export class DiffFile {
   _mergeFullBundle = (data: ReturnType<DiffFile["_getFullBundle"]>, notifyUpdate = true) => {
     this.mergeBundle(data, notifyUpdate);
     try {
-      this.#oldFileResult = File.createInstance(data.oldFileResult);
+      this.#oldFileResult = data.oldFileResult ? File.createInstance(data.oldFileResult) : null;
 
-      this.#newFileResult = File.createInstance(data.newFileResult);
+      this.#newFileResult = data.newFileResult ? File.createInstance(data.newFileResult) : null;
 
       this.#diffLines = data.diffLines;
 

packages/core/src/parse/change-range.ts

@@ -8,6 +8,7 @@ export enum NewLineSymbol {
   LF = 3,
   NEWLINE = 4,
   NORMAL = 5,
+  NULL = 6,
 }
 
 export interface IRange {
@@ -81,10 +82,22 @@ function checkNewLineSymbolChange(
   const bEndStr = stringB.slice(-2);
 
   const aSymbol =
-    aEndStr === "\r\n" ? NewLineSymbol.CRLF : aEndStr.endsWith("\r") ? NewLineSymbol.CR : NewLineSymbol.LF;
+    aEndStr === "\r\n"
+      ? NewLineSymbol.CRLF
+      : aEndStr.endsWith("\r")
+        ? NewLineSymbol.CR
+        : aEndStr.endsWith("\n")
+          ? NewLineSymbol.LF
+          : NewLineSymbol.NULL;
 
   const bSymbol =
-    bEndStr === "\r\n" ? NewLineSymbol.CRLF : bEndStr.endsWith("\r") ? NewLineSymbol.CR : NewLineSymbol.LF;
+    bEndStr === "\r\n"
+      ? NewLineSymbol.CRLF
+      : bEndStr.endsWith("\r")
+        ? NewLineSymbol.CR
+        : bEndStr.endsWith("\n")
+          ? NewLineSymbol.LF
+          : NewLineSymbol.NULL;
 
   const hasNewLineChanged = addition.noTrailingNewLine !== deletion.noTrailingNewLine;
 
@@ -98,13 +111,23 @@ function checkNewLineSymbolChange(
         ? NewLineSymbol.NEWLINE
         : NewLineSymbol.NORMAL
       : aSymbol,
-    addString: aSymbol === NewLineSymbol.CRLF ? stringA.slice(0, -2) : stringA.slice(0, -1),
+    addString:
+      aSymbol === NewLineSymbol.CRLF
+        ? stringA.slice(0, -2)
+        : aSymbol === NewLineSymbol.CR || aSymbol === NewLineSymbol.LF
+          ? stringA.slice(0, -1)
+          : stringA,
     delSymbol: hasNewLineChanged
       ? deletion.noTrailingNewLine
         ? NewLineSymbol.NEWLINE
         : NewLineSymbol.NORMAL
       : bSymbol,
-    delString: bSymbol === NewLineSymbol.CRLF ? stringB.slice(0, -2) : stringB.slice(0, -1),
+    delString:
+      bSymbol === NewLineSymbol.CRLF
+        ? stringB.slice(0, -2)
+        : bSymbol === NewLineSymbol.CR || bSymbol === NewLineSymbol.LF
+          ? stringB.slice(0, -1)
+          : stringB,
   };
 }
 

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

@@ -50,7 +50,14 @@ export class DiffLine {
   }
 
   public clone(text: string) {
-    return new DiffLine(text, this.type, this.originalLineNumber, this.oldLineNumber, this.newLineNumber);
+    return new DiffLine(
+      text,
+      this.type,
+      this.originalLineNumber,
+      this.oldLineNumber,
+      this.newLineNumber,
+      this.noTrailingNewLine
+    );
   }
 }
 

packages/file/index.d.ts

@@ -407,7 +407,8 @@ export declare enum NewLineSymbol {
 	CR = 2,
 	LF = 3,
 	NEWLINE = 4,
-	NORMAL = 5
+	NORMAL = 5,
+	NULL = 6
 }
 export declare function _getAST(raw: string, fileName?: string, lang?: DiffHighlighterLang, theme?: "light" | "dark"): DiffAST;
 export declare function _getAST(raw: string, fileName?: string, lang?: string, theme?: "light" | "dark"): DiffAST;

packages/react/index.d.ts

@@ -407,7 +407,8 @@ export declare enum NewLineSymbol {
 	CR = 2,
 	LF = 3,
 	NEWLINE = 4,
-	NORMAL = 5
+	NORMAL = 5,
+	NULL = 6
 }
 export declare function _getAST(raw: string, fileName?: string, lang?: DiffHighlighterLang, theme?: "light" | "dark"): DiffAST;
 export declare function _getAST(raw: string, fileName?: string, lang?: string, theme?: "light" | "dark"): DiffAST;