support for dolt diff

liuliu-dev · liuliu-dev · commit 6efaeec67bef · 2024-10-29T16:11:28.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -184,3 +184,7 @@ If you are upgrading from a version prior to 2.0.0, please note the changes to p
 ## [2.3.0]
 
 -- Added diff stats on commit click via the `getDiff` function.
+
+## [2.3.1]
+
+-- Add support for Dolt diff.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "commit-graph",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "homepage": "https://liuliu-dev.github.io/CommitGraph/",
   "author": "Liu Liu <liuliu.developer@gmail.com>",
   "description": "A React component to visualize a commit graph.",
@@ -48,6 +48,7 @@
   "dependencies": {
     "@dolthub/react-hooks": "^0.1.7",
     "@dolthub/web-utils": "^0.1.5",
+    "@rollup/plugin-typescript": "11.1.6",
     "classnames": "^2.3.2",
     "react": ">=18.0.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -61,7 +62,6 @@
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.0",
     "@storybook/nextjs": "^8.0.0",
     "@storybook/react": "^8.0.0",
     "@types/react": "^18.2.57",
diff --git a/rollup.config.js b/rollup.config.js
@@ -6,8 +6,6 @@ import terser from "@rollup/plugin-terser";
 import postcss from "rollup-plugin-postcss";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 
-const isProduction = process.env.NODE_ENV === "production";
-
 const packageJson = require("./package.json");
 
 export default [
diff --git a/src/components/BranchLabel/index.tsx b/src/components/BranchLabel/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactPopup from "reactjs-popup";
 import css from "./index.module.css";
-import { Branch } from "../../helpers/types";
+import { Branch } from "../../types";
 import cx from "classnames";
 
 type ItemProps = {
diff --git a/src/components/Branches/index.tsx b/src/components/Branches/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { BranchPathType, CommitNode } from "../../helpers/types";
+import { BranchPathType, CommitNode } from "../../types";
 import BranchPath from "./BranchPath";
 
 type Props = {
diff --git a/src/components/CommitDetails/index.tsx b/src/components/CommitDetails/index.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { Branch, CommitNode, Diff } from "../../helpers/types";
+import { Branch, CommitNode, Diff } from "../../types";
 import BranchLabel from "../BranchLabel";
 import { excerpt } from "@dolthub/web-utils";
 import css from "./index.module.css";
@@ -18,6 +18,7 @@ type Props = {
   fullSha?: boolean;
   clicked?: boolean;
   getDiff?: (base: string, head: string) => Promise<Diff | undefined>;
+  forDolt?: boolean;
 };
 
 export default function CommitDetails({
@@ -31,6 +32,7 @@ export default function CommitDetails({
   fullSha,
   clicked,
   getDiff,
+  forDolt
 }: Props) {
   const date = dateFormatFn
     ? dateFormatFn(commit.commitDate)
@@ -98,7 +100,7 @@ export default function CommitDetails({
       </div>
       {showDiff && clicked && !!getDiff && (
         <div className={css.diffSection} ref={diffRef}>
-          <DiffSection commit={commit} getDiff={getDiff} />
+          <DiffSection commit={commit} getDiff={getDiff} forDolt={forDolt}/>
         </div>
       )}
     </>
diff --git a/src/components/CommitDot/index.tsx b/src/components/CommitDot/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CommitNode } from "../../helpers/types";
+import { CommitNode } from "../../types";
 import { convertColorToMatrixVariant } from "../../helpers/utils";
 import { getCommitDotPosition } from "./utils";
 
diff --git a/src/components/CommitDot/utils.ts b/src/components/CommitDot/utils.ts
@@ -1,4 +1,4 @@
-import { CommitNode } from "../../helpers/types";
+import { CommitNode } from "../../types";
 
 export function getCommitDotPosition(
   branchSpacing: number,
diff --git a/src/components/CommitGraph/WithInfiniteScroll.tsx b/src/components/CommitGraph/WithInfiniteScroll.tsx
@@ -6,7 +6,7 @@ import {
   CommitNode,
   Diff,
   GraphStyle,
-} from "../../helpers/types";
+} from "../../types";
 import InfiniteScroll from "react-infinite-scroller";
 import css from "./index.module.css";
 
diff --git a/src/components/CommitGraph/computePosition.ts b/src/components/CommitGraph/computePosition.ts
@@ -1,4 +1,4 @@
-import { BranchPathType, CommitNode } from "../../helpers/types";
+import { BranchPathType, CommitNode } from "../../types";
 
 function topologicalOrderCommits(
   commits: CommitNode[],
diff --git a/src/components/CommitGraph/index.tsx b/src/components/CommitGraph/index.tsx
@@ -5,7 +5,7 @@ import {
   CommitNode,
   Diff,
   GraphStyle,
-} from "../../helpers/types";
+} from "../../types";
 import {
   defaultStyle,
   formatCommits,
@@ -30,6 +30,7 @@ export type Props = {
   fullSha?: boolean;
   onCommitClick?: (commit: CommitNode) => void;
   getDiff?: (base: string, head: string) => Promise<Diff | undefined>;
+  forDolt?: boolean;
 };
 
 export default function CommitGraph({
@@ -41,6 +42,7 @@ export default function CommitGraph({
   fullSha,
   onCommitClick,
   getDiff,
+  forDolt
 }: Props) {
   const [hovered, setHovered] = useState(false);
   const [clicked, setClicked] = useState(false);
@@ -147,6 +149,7 @@ export default function CommitGraph({
                 fullSha={fullSha}
                 getDiff={getDiff}
                 clicked={clicked}
+                forDolt={forDolt}
               />
             </div>
           );
diff --git a/src/components/Curves/CurvePath.tsx b/src/components/Curves/CurvePath.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CommitNode } from "../../helpers/types";
+import { CommitNode } from "../../types";
 import { convertColorToMatrixVariant } from "../../helpers/utils";
 import { CurveReturnType } from "./utils";
 
diff --git a/src/components/Curves/index.tsx b/src/components/Curves/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CommitNode } from "../../helpers/types";
+import { CommitNode } from "../../types";
 import CurvePath from "./CurvePath";
 import {
   CurveReturnType,
diff --git a/src/components/Curves/utils.ts b/src/components/Curves/utils.ts
@@ -1,4 +1,4 @@
-import { CommitNode } from "../../helpers/types";
+import { CommitNode } from "../../types";
 
 export type CurveReturnType = {
   path: string;
diff --git a/src/components/DiffSection/ChangedFileDetails.tsx b/src/components/DiffSection/ChangedFileDetails.tsx
@@ -1,5 +1,5 @@
 import { FiPlus } from "react-icons/fi";
-import { ChangedFile } from "../../helpers/types";
+import { ChangedFile } from "../../types";
 import css from "./index.module.css";
 import React from "react";
 import { RiPencilFill } from "react-icons/ri";
diff --git a/src/components/DiffSection/index.tsx b/src/components/DiffSection/index.tsx
@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from "react";
-import { ChangedFile, CommitNode, Diff } from "../../helpers/types";
+import { ChangedFile, CommitNode, Diff } from "../../types";
 import css from "./index.module.css";
 import ChangedFileDetails from "./ChangedFileDetails";
 import { pluralize } from "@dolthub/web-utils";
 
 type Props = {
   commit: CommitNode;
   getDiff: (base: string, head: string) => Promise<Diff | undefined>;
+  forDolt?: boolean;
 };
 
 const diffCache: { [key: string]: Diff | undefined } = {};
 
-export default function DiffSection({ commit, getDiff }: Props) {
+export default function DiffSection({ commit, getDiff, forDolt }: Props) {
   const [diff, setDiff] = useState<Diff | undefined>(undefined);
 
   useEffect(() => {
@@ -31,7 +32,7 @@ export default function DiffSection({ commit, getDiff }: Props) {
 
   const { added, modified, deleted } = getChanged(diff?.files || []);
   const parents = commit.parents.map(parent => parent.slice(0, 7)).join(", ");
-
+  const file=forDolt ? "table" : "file";
   return (
     <div>
       <div className={css.top}>
@@ -53,19 +54,19 @@ export default function DiffSection({ commit, getDiff }: Props) {
             {!!modified && (
               <div>
                 <span className={css.modified}>{modified}</span>
-                <span>{pluralize(modified, "file")} modified</span>
+                <span>{pluralize(modified, file)} modified</span>
               </div>
             )}
             {!!added && (
               <div>
                 <span className={css.added}> {added}</span>{" "}
-                <span>{pluralize(added, "file")} added</span>
+                <span>{pluralize(added, file)} added</span>
               </div>
             )}
             {!!deleted && (
               <div>
                 <span className={css.deleted}>{deleted}</span>{" "}
-                <span>{pluralize(deleted, "file")} deleted</span>
+                <span>{pluralize(deleted, file)} deleted</span>
               </div>
             )}
           </div>
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
@@ -1,4 +1,4 @@
-import { CommitNode, BranchPathType, Commit } from "./types";
+import { CommitNode, BranchPathType, Commit } from "../types";
 
 export const defaultStyle = {
   commitSpacing: 90,
diff --git a/src/stories/GitHubCommitStory.tsx b/src/stories/GitHubCommitStory.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import css from "./index.module.css";
 import Graph from "./Graph";
-import { Diff, GraphStyle } from "../helpers/types";
+import { Diff, GraphStyle } from "../types";
 
 type Props = {
   ownerName?: string;
diff --git a/src/stories/Graph.tsx b/src/stories/Graph.tsx
@@ -1,5 +1,5 @@
 import CommitGraph from "../components/CommitGraph";
-import { Diff, GraphStyle } from "../helpers/types";
+import { Diff, GraphStyle } from "../types";
 import { useGitHubBranchList } from "./useGitHubBranchList";
 import { useGitHubCommitList } from "./useGitHubCommitList";
 import React from "react";
diff --git a/src/stories/useGitHubBranchList.ts b/src/stories/useGitHubBranchList.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Branch } from "../helpers/types";
+import { Branch } from "../types";
 
 type ReturnType = {
   branches: Branch[];
diff --git a/src/stories/useGitHubCommitCompare.ts b/src/stories/useGitHubCommitCompare.ts
diff --git a/src/stories/useGitHubCommitList.ts b/src/stories/useGitHubCommitList.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Commit } from "../helpers/types";
+import { Commit } from "../types";
 
 type ReturnType = {
   commits: Commit[];
diff --git a/src/types.ts b/src/types.ts
@@ -58,8 +58,8 @@ export type GraphStyle = {
 export type ChangedFile = {
   filename: string;
   status: string;
-  additions: number;
-  deletions: number;
+  additions?: number;
+  deletions?: number;
   patch?: string;
   blob_url?: string;
 };
diff --git a/yarn.lock b/yarn.lock
@@ -1708,15 +1708,15 @@
     smob "^1.0.0"
     terser "^5.17.4"
 
-"@rollup/plugin-typescript@^12.1.0":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-12.1.1.tgz#008d16b8283a422650c463f99ae0c610cf6c9727"
-  integrity sha512-t7O653DpfB5MbFrqPe/VcKFFkvRuFNp9qId3xq4Eth5xlyymzxNpye2z8Hrl0RIMuXTSr5GGcFpkdlMeacUiFQ==
+"@rollup/plugin-typescript@11.1.6":
+  version "11.1.6"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz#724237d5ec12609ec01429f619d2a3e7d4d1b22b"
+  integrity sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==
   dependencies:
     "@rollup/pluginutils" "^5.1.0"
     resolve "^1.22.1"
 
-"@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.1.0":
+"@rollup/pluginutils@^5.0.1":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
@@ -1725,6 +1725,15 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@rollup/pluginutils@^5.1.0":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
+  integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^4.0.2"
+
 "@rollup/rollup-android-arm-eabi@4.24.0":
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz#1661ff5ea9beb362795304cb916049aba7ac9c54"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { CommitNode } from "../../helpers/types";`
	`1`	`+import { CommitNode } from "../../types";`
`2`	`2`
`3`	`3`	`export function getCommitDotPosition(`
`4`	`4`	`branchSpacing: number,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { BranchPathType, CommitNode } from "../../helpers/types";`
	`1`	`+import { BranchPathType, CommitNode } from "../../types";`
`2`	`2`
`3`	`3`	`function topologicalOrderCommits(`
`4`	`4`	`commits: CommitNode[],`