fix bug & add style namespace

MrWangJustToDo · Jan 24, 2024 · 311f884 · 311f884
1 parent ca823ea
commit 311f884
Show file tree

Hide file tree

Showing 25 changed files with 179 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "eslint": "^8.55.0",
     "husky": "^8.0.2",
     "postcss": "^8.4.33",
+    "postcss-prefix-selector": "^1.16.0",
     "prettier": "^3.2.4",
     "project-tool": "https://github.com/MrWangJustToDo/project-tool.git",
     "rollup-plugin-postcss": "^4.0.2",

diff --git a/packages/core/src/diff-file.ts b/packages/core/src/diff-file.ts
@@ -26,7 +26,7 @@ interface DiffHunkItem extends DiffLineItem {
     oldLength: number;
     newLength: number;
   };
-  splitInfo: {
+  splitInfo?: {
     startHiddenIndex: number;
     endHiddenIndex: number;
     plainText: string;
@@ -35,7 +35,7 @@ interface DiffHunkItem extends DiffLineItem {
     oldLength: number;
     newLength: number;
   };
-  unifiedInfo: {
+  unifiedInfo?: {
     startHiddenIndex: number;
     endHiddenIndex: number;
     plainText: string;
@@ -226,7 +226,7 @@ export class DiffFile {
       let newLineNumber = 1;
       let oldLineNumber = 1;
       let newFileContent = "";
-      while (oldLineNumber < this.#oldFileResult.maxLineNumber) {
+      while (oldLineNumber <= this.#oldFileResult.maxLineNumber) {
         const newDiffLine = this.#getNewDiffLine(newLineNumber++);
         if (newDiffLine) {
           newFileContent += newDiffLine.text;
@@ -246,7 +246,7 @@ export class DiffFile {
       let oldLineNumber = 1;
       let newLineNumber = 1;
       let oldFileContent = "";
-      while (newLineNumber < this.#newFileResult.maxLineNumber) {
+      while (newLineNumber <= this.#newFileResult.maxLineNumber) {
         const oldDiffLine = this.#getOldDiffLine(oldLineNumber++);
         if (oldDiffLine) {
           oldFileContent += oldDiffLine.text;
@@ -412,6 +412,7 @@ export class DiffFile {
     let newFileLineNumber = 1;
     let prevIsHidden = false;
     let hideStart = Infinity;
+    let length = 0;
     numIterator(this.lineLength, () => {
       const oldRawLine = this.#getOldRawLine(oldFileLineNumber);
       const oldDiffLine = this.#getOldDiffLine(oldFileLineNumber);
@@ -435,20 +436,23 @@ export class DiffFile {
           diff: newDiffLine,
           isHidden,
         });
+        length++;
       } else if (oldLineHasChange) {
         this.#splitLeftLines.push({
           lineNumber: oldFileLineNumber++,
           value: oldRawLine,
           diff: oldDiffLine,
         });
         this.#splitRightLines.push({});
+        length++;
       } else if (newLineHasChange) {
         this.#splitLeftLines.push({});
         this.#splitRightLines.push({
           lineNumber: newFileLineNumber++,
           value: newRawLine,
           diff: newDiffLine,
         });
+        length++;
       }
 
       if (!prevIsHidden && isHidden) {
@@ -479,6 +483,8 @@ export class DiffFile {
       }
     });
 
+    this.lineLength = length;
+
     this.#splitLastStartIndex = hideStart;
 
     this.#_hasBuildSplit = true;
@@ -494,7 +500,7 @@ export class DiffFile {
     let hideStart = Infinity;
     const maxOldFileLineNumber = this.#oldFileResult?.maxLineNumber || 0;
     const maxNewFileLineNumber = this.#newFileResult?.maxLineNumber || 0;
-    while (oldFileLineNumber < maxOldFileLineNumber || newFileLineNumber < maxNewFileLineNumber) {
+    while (oldFileLineNumber <= maxOldFileLineNumber || newFileLineNumber <= maxNewFileLineNumber) {
       const oldRawLine = this.#getOldRawLine(oldFileLineNumber);
       const oldDiffLine = this.#getOldDiffLine(oldFileLineNumber);
       const newRawLine = this.#getNewRawLine(newFileLineNumber);

diff --git a/packages/core/src/file.ts b/packages/core/src/file.ts
@@ -51,11 +51,6 @@ export class File {
   doSyntax() {
     if (!this.raw || this.hasDoSyntax) return;
 
-    if (!this.rawLength) {
-      console.error("current file is empty" + this.raw);
-      return;
-    }
-
     if (this.syntaxLength) {
       console.error("current file already doSyntax before!");
       return;
@@ -91,9 +86,9 @@ export class File {
 
     const rawArray = rawString.split("\n");
 
-    this.rawLength = rawArray.length - 1;
+    this.rawLength = rawArray.length;
 
-    this.maxLineNumber = rawArray.length + 1;
+    this.maxLineNumber = rawArray.length;
 
     this.rawFile = rawArray.reduce(
       (p, item, index) => ({
@@ -186,7 +181,7 @@ export class File {
 
     loopAST(ast.children as SyntaxNode[]);
 
-    this.syntaxLength = lineNumber - 1;
+    this.syntaxLength = lineNumber;
   }
 
   #doCheck() {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -59,9 +59,11 @@
   "dependencies": {
     "@git-diff-view/core": "^0.0.1",
     "highlight.js": "^11.9.0",
-    "lowlight": "^3.1.0"
+    "lowlight": "^3.1.0",
+    "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
+    "@types/use-sync-external-store": "^0.0.3",
     "autoprefixer": "^10.4.16",
     "react": "^18.0.0",
     "postcss": "^8.4.33",

diff --git a/packages/react/postcss.config.js b/packages/react/postcss.config.js
@@ -1,6 +1,11 @@
-export default {
+const { resolve } = require("path");
+
+module.exports = {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: { config: resolve(__dirname) + "/tailwind.config.js" },
+    "postcss-prefix-selector": {
+      prefix: ".diff-tailwindcss-wrapper",
+    },
     autoprefixer: {},
   },
-}
+};
diff --git a/packages/react/src/components/DiffSplitHunkLine.tsx b/packages/react/src/components/DiffSplitHunkLine.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { useDiffViewContext, SplitSide } from "..";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
-import { hunkContentBGName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
+import { hunkContentBGName, hunkContentColorName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
 import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
 
 const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
@@ -20,7 +20,7 @@ const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: numb
 
   const showExpand = side === SplitSide.old;
 
-  const isExpandAll = currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+  const isExpandAll = currentHunk.splitInfo && currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
 
   return (
     <tr
@@ -31,7 +31,7 @@ const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: numb
       className="diff-line diff-line-hunk select-none"
     >
       <td
-        className="diff-line-num diff-line-num-hunk left-0 z-[1] p-[1px]"
+        className="diff-line-num diff-line-num-hunk left-0 p-[1px] w-[1%] min-w-[50px]"
         style={{
           position: enableWrap ? "relative" : "sticky",
           backgroundColor: side === SplitSide.old ? `var(${hunkLineNumberBGName})` : undefined,
@@ -69,10 +69,11 @@ const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: numb
       <td className="diff-line-content diff-line-content-hunk pr-[10px] align-middle">
         {showExpand && (
           <div
-            className="opacity-[0.5] pl-[1.5em]"
+            className="pl-[1.5em]"
             style={{
               whiteSpace: enableWrap ? "pre-wrap" : "pre",
               wordBreak: enableWrap ? "break-all" : "initial",
+              color: `var(${hunkContentColorName})`,
             }}
           >
             {currentHunk.splitInfo.plainText}
@@ -86,7 +87,7 @@ const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: numb
 export const DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
   const currentHunk = diffFile.getSplitHunkLine(index);
 
-  const currentIsShow = currentHunk && currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
+  const currentIsShow = currentHunk && currentHunk.splitInfo && currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
 
   if (!currentIsShow) return null;
 
@@ -111,7 +112,7 @@ const _DiffSplitExpandLastLine = ({ diffFile, side }: { side: SplitSide; diffFil
       className="diff-line diff-line-hunk select-none"
     >
       <td
-        className="diff-line-num diff-line-num-hunk left-0 z-[1] p-[1px]"
+        className="diff-line-num diff-line-num-hunk left-0 p-[1px] w-[1%] min-w-[50px]"
         style={{
           position: enableWrap ? "relative" : "sticky",
           backgroundColor: side === SplitSide.old ? `var(${hunkLineNumberBGName})` : undefined,

diff --git a/packages/react/src/components/DiffSplitLine.tsx b/packages/react/src/components/DiffSplitLine.tsx
@@ -53,7 +53,7 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber, side }: { index: number;
         }}
       >
         <td
-          className="diff-line-num left-0 pl-[10px] pr-[10px] text-right align-top select-none z-[1]"
+          className="diff-line-num left-0 pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[50px]"
           style={{
             position: enableWrap ? "relative" : "sticky",
             backgroundColor: lineNumberBG,
@@ -74,7 +74,7 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber, side }: { index: number;
             {currentItem.lineNumber}
           </span>
         </td>
-        <td className="diff-line-content pr-[10px] align-top relative">
+        <td className="diff-line-content pr-[10px] align-top">
           <DiffContent
             enableWrap={enableWrap}
             diffFile={diffFile}
@@ -96,7 +96,7 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber, side }: { index: number;
         className="diff-line diff-line-empty select-none"
       >
         <td
-          className="diff-line-num diff-line-num-placeholder pl-[10px] pr-[10px] left-0 z-[1]"
+          className="diff-line-num diff-line-num-placeholder pl-[10px] pr-[10px] left-0 w-[1%] min-w-[50px]"
           style={{
             position: enableWrap ? "relative" : "sticky",
           }}

diff --git a/packages/react/src/components/DiffUnifiedHunkLine.tsx b/packages/react/src/components/DiffUnifiedHunkLine.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 
 import { useDiffViewContext } from "..";
 
-import { hunkContentBGName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
+import { hunkContentBGName, hunkContentColorName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
 import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
 
 import type { DiffFile } from "@git-diff-view/core";
@@ -13,7 +13,7 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber }: { index: number;
 
   const { enableWrap } = useDiffViewContext();
 
-  const isExpandAll = currentHunk.unifiedInfo.endHiddenIndex - currentHunk.unifiedInfo.startHiddenIndex < composeLen;
+  const isExpandAll = currentHunk.unifiedInfo && currentHunk.unifiedInfo.endHiddenIndex - currentHunk.unifiedInfo.startHiddenIndex < composeLen;
 
   return (
     <tr
@@ -23,7 +23,7 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber }: { index: number;
       style={{ backgroundColor: `var(${hunkContentBGName})` }}
     >
       <td
-        className="diff-line-num diff-line-num-hunk left-0 text-left select-none w-[1%] min-w-[60px] whitespace-nowrap z-[1]"
+        className="diff-line-num diff-line-num-hunk left-0 w-[1%] min-w-[100px]"
         style={{
           position: enableWrap ? "relative" : "sticky",
           backgroundColor: `var(${hunkLineNumberBGName})`,
@@ -59,10 +59,11 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber }: { index: number;
       </td>
       <td className="diff-line-content diff-line-content-hunk pr-[10px] align-middle">
         <div
-          className="opacity-[0.5] pl-[1.5em]"
+          className="pl-[1.5em]"
           style={{
             whiteSpace: enableWrap ? "pre-wrap" : "pre",
             wordBreak: enableWrap ? "break-all" : "initial",
+            color: `var(${hunkContentColorName})`,
           }}
         >
           {currentHunk.unifiedInfo.plainText}
@@ -75,7 +76,7 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber }: { index: number;
 export const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFile; lineNumber: number }) => {
   const currentHunk = diffFile.getUnifiedHunkLine(index);
 
-  const currentIsShow = currentHunk && currentHunk.unifiedInfo.startHiddenIndex < currentHunk.unifiedInfo.endHiddenIndex;
+  const currentIsShow = currentHunk && currentHunk.unifiedInfo && currentHunk.unifiedInfo.startHiddenIndex < currentHunk.unifiedInfo.endHiddenIndex;
 
   if (!currentIsShow) return null;
 
@@ -88,7 +89,7 @@ const _DiffUnifiedExpandLastLine = ({ diffFile }: { diffFile: DiffFile }) => {
   return (
     <tr data-line="last-hunk" data-state="hunk" className="diff-line diff-line-hunk select-none" style={{ backgroundColor: `var(${hunkContentBGName})` }}>
       <td
-        className="diff-line-num diff-line-num-hunk left-0 text-left select-none w-[1%] min-w-[60px] whitespace-nowrap"
+        className="diff-line-num diff-line-num-hunk left-0 w-[1%] min-w-[100px]"
         style={{
           position: enableWrap ? "relative" : "sticky",
           backgroundColor: `var(${hunkLineNumberBGName})`,

diff --git a/packages/react/src/components/DiffUnifiedLine.tsx b/packages/react/src/components/DiffUnifiedLine.tsx
@@ -47,7 +47,7 @@ const DiffUnifiedOldLine = ({
   return (
     <tr data-line={index} data-state="diff" data-mode="del" className="diff-line group" style={{ backgroundColor: `var(${delContentBGName})` }}>
       <td
-        className="diff-line-num left-0 pl-[10px] pr-[10px] text-left select-none w-[1%] min-w-[60px] whitespace-nowrap align-top"
+        className="diff-line-num left-0 pl-[10px] pr-[10px] text-left select-none w-[1%] min-w-[100px] whitespace-nowrap align-top"
         style={{
           position: enableWrap ? "relative" : "sticky",
           color: `var(${plainLineNumberColorName})`,
@@ -110,7 +110,7 @@ const DiffUnifiedNewLine = ({
   return (
     <tr data-line={index} data-state="diff" data-mode="add" className="diff-line group" style={{ backgroundColor: `var(${addContentBGName})` }}>
       <td
-        className="diff-line-num left-0 pl-[10px] pr-[10px] text-left select-none w-[1%] min-w-[60px] whitespace-nowrap align-top"
+        className="diff-line-num left-0 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top"
         style={{
           position: enableWrap ? "relative" : "sticky",
           color: `var(${plainLineNumberColorName})`,
@@ -211,7 +211,7 @@ const _DiffUnifiedLine = ({ index, diffFile, lineNumber }: { index: number; diff
         }}
       >
         <td
-          className="diff-line-num left-0 pl-[10px] pr-[10px] text-left select-none w-[1%] min-w-[60px] whitespace-nowrap align-top"
+          className="diff-line-num left-0 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top"
           style={{
             position: enableWrap ? "relative" : "sticky",
             color: `var(${plainLineNumberColorName})`,

diff --git a/packages/react/src/components/DiffView.tsx b/packages/react/src/components/DiffView.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { DiffFile } from "@git-diff-view/core";
-import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { useEffect, useMemo } from "react";
 import * as React from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
 
 import { useCallbackRef } from "../hooks/useCallbackRef";
 import { useUnmount } from "../hooks/useUnmount";
@@ -97,15 +98,17 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
 
   return (
     <DiffViewContext.Provider value={value}>
-      <div
-        className="diff-style-root"
-        style={{
-          // @ts-ignore
-          [diffFontSizeName]: diffViewFontSize + "px",
-        }}
-      >
-        <div id={`diff-root${id}`} className={"diff-view-wrapper" + (className ? ` ${className}` : "")} style={style}>
-          {diffViewMode === DiffModeEnum.Split ? <DiffSplitView diffFile={diffFile} /> : <DiffUnifiedView diffFile={diffFile} />}
+      <div className="diff-tailwindcss-wrapper">
+        <div
+          className="diff-style-root"
+          style={{
+            // @ts-ignore
+            [diffFontSizeName]: diffViewFontSize + "px",
+          }}
+        >
+          <div id={`diff-root${id}`} className={"diff-view-wrapper" + (className ? ` ${className}` : "")} style={style}>
+            {diffViewMode === DiffModeEnum.Split ? <DiffSplitView diffFile={diffFile} /> : <DiffUnifiedView diffFile={diffFile} />}
+          </div>
         </div>
       </div>
     </DiffViewContext.Provider>

diff --git a/packages/react/src/components/color.ts b/packages/react/src/components/color.ts
@@ -34,6 +34,10 @@ export const hunkContentBG = "#ddf4ff";
 
 export const hunkContentBGName = "--diff-hunk-content--";
 
+export const hunkContentColor = "#777777";
+
+export const hunkContentColorName = "--diff-hunk-content-color--";
+
 export const hunkLineNumberBG = "#c7ecff";
 
 export const hunkLineNumberBGName = "--diff-hunk-lineNumber--";

diff --git a/packages/react/src/tailwind.css b/packages/react/src/tailwind.css
@@ -18,4 +18,5 @@
   --diff-add-widget--: #0969d2;
   --diff-add-widget-color--: white;
   --diff-empty-content--: #f0f0f0;
+  --diff-hunk-content-color--: #777777;
 }
diff --git a/packages/react/tailwind.config.js b/packages/react/tailwind.config.js
@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",