update style

MrWangJustToDo · Jan 19, 2024 · b0de118 · b0de118
1 parent fa9bf8e
commit b0de118
Show file tree

Hide file tree

Showing 12 changed files with 246 additions and 110 deletions.
diff --git a/packages/core/src/file.ts b/packages/core/src/file.ts
@@ -5,6 +5,8 @@ import type { ATS } from "./highlighter";
 // TODO LRU Cache
 const map = {} as Record<string, File>;
 
+const maxLengthToIgnoreSyntax = 5000;
+
 export type SyntaxNode = {
   type: string;
   value: string;
@@ -62,13 +64,20 @@ export class File {
       return;
     }
 
+    if (this.rawLength > maxLengthToIgnoreSyntax) {
+      console.warn(`ignore syntax for current file, because the rawLength is too long: ${this.rawLength}`);
+      return;
+    }
+
     const ast = highlighter.highlight(this.lang, this.raw);
 
     this.ast = ast;
 
     this.#doAST();
 
-    this.#doCheck();
+    if (__DEV__) {
+      this.#doCheck();
+    }
 
     this.hasDoSyntax = true;
   }

diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  extends: [require.resolve("project-tool/baseLint"), require.resolve("project-tool/reactLint")],
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    sourceType: "module",
+    tsconfigRootDir: __dirname,
+    project: "./tsconfig.json",
+  },
+  rules: {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        varsIgnorePattern: "React",
+      },
+    ],
+  },
+};
diff --git a/packages/react/src/components/DiffSplitExtendLine.tsx b/packages/react/src/components/DiffSplitExtendLine.tsx
@@ -1,37 +1,24 @@
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
+import { useDomWidth } from "../hooks/useDomWidth";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { emptyBGName } from "./color";
 
 import type { DiffFileExtends } from "../utils";
 
-export const DiffSplitExtendLine = ({
-  index,
-  diffFile,
-  side,
-  lineNumber,
-}: {
-  index: number;
-  side: SplitSide;
-  diffFile: DiffFileExtends;
-  lineNumber: number;
-}) => {
-  const { enableWrap, extendData, renderExtendLine } = useDiffViewContext();
+const _DiffSplitExtendLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFileExtends; lineNumber: number }) => {
+  const { extendData, renderExtendLine } = useDiffViewContext();
 
   const oldItem = diffFile.getSplitLeftLine(index);
 
   const newItem = diffFile.getSplitRightLine(index);
 
-  const currentItem = side === SplitSide.old ? oldItem : newItem;
-
   const oldExtend = extendData?.oldFile?.[oldItem?.lineNumber];
 
   const newExtend = extendData?.newFile?.[newItem.lineNumber];
 
-  const currentIsShow = (oldExtend || newExtend) && currentItem && !currentItem.isHidden && currentItem.diff;
-
   const currentExtend = side === SplitSide.old ? oldExtend : newExtend;
 
   useSyncHeight({
@@ -40,7 +27,10 @@ export const DiffSplitExtendLine = ({
     enable: !!currentExtend,
   });
 
-  if (!currentIsShow) return null;
+  const width = useDomWidth({
+    selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
+    enable: !!currentExtend,
+  });
 
   return (
     <tr
@@ -52,9 +42,41 @@ export const DiffSplitExtendLine = ({
         backgroundColor: !currentExtend ? `var(${emptyBGName})` : undefined,
       }}
     >
-      <td className="diff-line-extend-content align-top" style={{ position: enableWrap ? "relative" : "sticky" }} colSpan={2}>
-        {currentExtend && renderExtendLine({ diffFile, side, lineNumber: currentExtend.lineNumber, data: currentExtend.data, onUpdate: diffFile.notifyAll })}
+      <td className="diff-line-extend-content align-top p-[0]" colSpan={2}>
+        <div className="diff-line-extend-wrapper sticky left-0" style={{ width }}>
+          {currentExtend && renderExtendLine({ diffFile, side, lineNumber: currentExtend.lineNumber, data: currentExtend.data, onUpdate: diffFile.notifyAll })}
+        </div>
       </td>
     </tr>
   );
 };
+
+export const DiffSplitExtendLine = ({
+  index,
+  diffFile,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFileExtends;
+  lineNumber: number;
+}) => {
+  const { extendData } = useDiffViewContext();
+
+  const oldItem = diffFile.getSplitLeftLine(index);
+
+  const newItem = diffFile.getSplitRightLine(index);
+
+  const currentItem = side === SplitSide.old ? oldItem : newItem;
+
+  const oldExtend = extendData?.oldFile?.[oldItem?.lineNumber];
+
+  const newExtend = extendData?.newFile?.[newItem.lineNumber];
+
+  const currentIsShow = (oldExtend || newExtend) && currentItem && !currentItem.isHidden && currentItem.diff;
+
+  if (!currentIsShow) return null;
+
+  return <_DiffSplitExtendLine index={index} diffFile={diffFile} side={side} lineNumber={lineNumber} />;
+};
diff --git a/packages/react/src/components/DiffSplitHunkLine.tsx b/packages/react/src/components/DiffSplitHunkLine.tsx
@@ -40,29 +40,29 @@ const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index: numb
       >
         {showExpand &&
           (isExpandAll ? (
-            <div
+            <button
               className="w-full hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]"
               title="Expand All"
               onClick={() => diffFile.onSplitHunkExpand("all", index)}
             >
               <ExpandAll className="fill-current" />
-            </div>
+            </button>
           ) : (
             <>
-              <div
+              <button
                 className="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
                 title="Expand Down"
                 onClick={() => diffFile.onSplitHunkExpand("down", index)}
               >
                 <ExpandDown className="fill-current" />
-              </div>
-              <div
+              </button>
+              <button
                 className="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
                 title="Expand Up"
                 onClick={() => diffFile.onSplitHunkExpand("up", index)}
               >
                 <ExpandUp className="fill-current" />
-              </div>
+              </button>
             </>
           ))}
       </td>
@@ -93,48 +93,50 @@ export const DiffSplitHunkLine = ({ index, diffFile, side, lineNumber }: { index
   return <_DiffSplitHunkLine index={index} diffFile={diffFile} side={side} lineNumber={lineNumber} />;
 };
 
-export const DiffSplitExpandLastLine = ({ diffFile, side }: { side: SplitSide; diffFile: DiffFile }) => {
-  const currentIsShow = diffFile.getNeedShowExpandAll("split");
-
+const _DiffSplitExpandLastLine = ({ diffFile, side }: { side: SplitSide; diffFile: DiffFile }) => {
   useSyncHeight({
     selector: `tr[data-line="last-hunk"]`,
     side: side === SplitSide.old ? "left" : "right",
-    enable: currentIsShow,
+    enable: true,
   });
 
   const { enableWrap } = useDiffViewContext();
 
-  if (currentIsShow) {
-    return (
-      <tr
-        data-line="last-hunk"
-        data-state="hunk"
-        data-side={side === SplitSide.old ? "left" : "right"}
-        style={{ backgroundColor: `var(${hunkContentBGName})` }}
-        className="diff-line diff-line-hunk select-none"
+  return (
+    <tr
+      data-line="last-hunk"
+      data-state="hunk"
+      data-side={side === SplitSide.old ? "left" : "right"}
+      style={{ backgroundColor: `var(${hunkContentBGName})` }}
+      className="diff-line diff-line-hunk select-none"
+    >
+      <td
+        className="diff-line-num diff-line-num-hunk left-[0] z-[1] p-[1px]"
+        style={{
+          position: enableWrap ? "relative" : "sticky",
+          backgroundColor: side === SplitSide.old ? `var(${hunkLineNumberBGName})` : undefined,
+          color: `var(${plainLineNumberColorName})`,
+        }}
       >
-        <td
-          className="diff-line-num diff-line-num-hunk left-[0] z-[1] p-[1px]"
-          style={{
-            position: enableWrap ? "relative" : "sticky",
-            backgroundColor: side === SplitSide.old ? `var(${hunkLineNumberBGName})` : undefined,
-            color: `var(${plainLineNumberColorName})`,
-          }}
-        >
-          {side === SplitSide.old && (
-            <div
-              className="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
-              title="Expand Down"
-              onClick={() => diffFile.onSplitLastExpand()}
-            >
-              <ExpandDown className="fill-current" />
-            </div>
-          )}
-        </td>
-        <td className="diff-line-content diff-line-content-hunk pr-[10px] align-middle"></td>
-      </tr>
-    );
-  }
-
-  return null;
+        {side === SplitSide.old && (
+          <button
+            className="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
+            title="Expand Down"
+            onClick={() => diffFile.onSplitLastExpand()}
+          >
+            <ExpandDown className="fill-current" />
+          </button>
+        )}
+      </td>
+      <td className="diff-line-content diff-line-content-hunk pr-[10px] align-middle"></td>
+    </tr>
+  );
+};
+
+export const DiffSplitExpandLastLine = ({ diffFile, side }: { side: SplitSide; diffFile: DiffFile }) => {
+  const currentIsShow = diffFile.getNeedShowExpandAll("split");
+
+  if (!currentIsShow) return null;
+
+  return <_DiffSplitExpandLastLine diffFile={diffFile} side={side} />;
 };
diff --git a/packages/react/src/components/DiffSplitWidgetLine.tsx b/packages/react/src/components/DiffSplitWidgetLine.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
+import { useDomWidth } from "../hooks/useDomWidth";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { emptyBGName } from "./color";
@@ -20,14 +21,19 @@ const _DiffSplitWidgetLine = ({ index, diffFile, side, lineNumber }: { index: nu
 
   const currentWidget = side === SplitSide.old ? leftWidget : rightWidget;
 
-  const { enableWrap, renderAddWidget } = useDiffViewContext();
+  const { renderAddWidget } = useDiffViewContext();
 
   useSyncHeight({
     selector: `tr[data-line="${lineNumber}-widget"]`,
     side: side === SplitSide.old ? "left" : "right",
     enable: !!currentWidget,
   });
 
+  const width = useDomWidth({
+    selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
+    enable: !!currentWidget,
+  });
+
   return (
     <tr
       data-line={`${lineNumber}-widget`}
@@ -38,8 +44,10 @@ const _DiffSplitWidgetLine = ({ index, diffFile, side, lineNumber }: { index: nu
         backgroundColor: !currentWidget ? `var(${emptyBGName})` : undefined,
       }}
     >
-      <td className="diff-line-widget-content" style={{ position: enableWrap ? "relative" : "sticky" }} colSpan={2}>
-        {currentWidget && renderAddWidget?.({ diffFile, side, lineNumber: currentItem.lineNumber, onClose: diffFile.onCloseAddWidget })}
+      <td className="diff-line-widget-content p-0" colSpan={2}>
+        <div className="diff-line-widget-wrapper sticky left-0" style={{ width }}>
+          {currentWidget && renderAddWidget?.({ diffFile, side, lineNumber: currentItem.lineNumber, onClose: diffFile.onCloseAddWidget })}
+        </div>
       </td>
     </tr>
   );

diff --git a/packages/react/src/components/DiffUnifiedExtendLine.tsx b/packages/react/src/components/DiffUnifiedExtendLine.tsx
@@ -1,26 +1,48 @@
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
+import { useDomWidth } from "../hooks/useDomWidth";
 
 import type { DiffFileExtends } from "../utils";
 
-export const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFileExtends; lineNumber: number }) => {
-  const { enableWrap, extendData, renderExtendLine } = useDiffViewContext();
+const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFileExtends; lineNumber: number }) => {
+  const { extendData, renderExtendLine } = useDiffViewContext();
 
   const unifiedItem = diffFile.getUnifiedLine(index);
 
   const oldExtend = extendData?.oldFile?.[unifiedItem.oldLineNumber];
 
   const newExtend = extendData?.newFile?.[unifiedItem.newLineNumber];
 
-  if ((!oldExtend && !newExtend) || !unifiedItem || unifiedItem.isHidden || !unifiedItem.diff) return null;
+  const width = useDomWidth({
+    selector: ".unified-diff-table-wrapper",
+    enable: true,
+  });
 
   return (
     <tr data-line={`${lineNumber}-extend`} data-state="extend" className="diff-line diff-line-extend">
-      <td className="diff-line-extend-content align-top" style={{ position: enableWrap ? "relative" : "sticky" }} colSpan={4}>
-        {oldExtend && renderExtendLine({ diffFile, side: SplitSide.old, lineNumber: oldExtend.lineNumber, data: oldExtend.data, onUpdate: diffFile.notifyAll })}
-        {newExtend && renderExtendLine({ diffFile, side: SplitSide.new, lineNumber: newExtend.lineNumber, data: newExtend.data, onUpdate: diffFile.notifyAll })}
+      <td className="diff-line-extend-content align-top p-[0]" colSpan={4}>
+        <div className="diff-line-extend-wrapper sticky left-0" style={{ width }}>
+          {oldExtend &&
+            renderExtendLine({ diffFile, side: SplitSide.old, lineNumber: oldExtend.lineNumber, data: oldExtend.data, onUpdate: diffFile.notifyAll })}
+          {newExtend &&
+            renderExtendLine({ diffFile, side: SplitSide.new, lineNumber: newExtend.lineNumber, data: newExtend.data, onUpdate: diffFile.notifyAll })}
+        </div>
       </td>
     </tr>
   );
 };
+
+export const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFileExtends; lineNumber: number }) => {
+  const { extendData } = useDiffViewContext();
+
+  const unifiedItem = diffFile.getUnifiedLine(index);
+
+  const oldExtend = extendData?.oldFile?.[unifiedItem.oldLineNumber];
+
+  const newExtend = extendData?.newFile?.[unifiedItem.newLineNumber];
+
+  if ((!oldExtend && !newExtend) || !unifiedItem || unifiedItem.isHidden || !unifiedItem.diff) return null;
+
+  return <_DiffUnifiedExtendLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+};