vue component slot

MrWangJustToDo · Jan 23, 2024 · 974da75 · 974da75
1 parent d2be8a9
commit 974da75
Show file tree

Hide file tree

Showing 22 changed files with 168 additions and 261 deletions.
diff --git a/packages/react/src/tailwind.css b/packages/react/src/tailwind.css
@@ -16,7 +16,7 @@
   --diff-hunk-content--: #ddf4ff;
   --diff-hunk-lineNumber--: #c7ecff;
   --diff-add-content-highlight--: #abf2bc;
-  --diff-del-content-hilight--: #ffb3ad;
+  --diff-del-content-highlight--: #ffb3ad;
   --diff-add-widget--: #0969d2;
   --diff-add-widget-color--: white;
   --diff-empty-content--: #f0f0f0;

diff --git a/packages/vue/src/components/DiffAddWidget.tsx b/packages/vue/src/components/DiffAddWidget.tsx
@@ -1,6 +1,6 @@
 import { addWidgetBGName, addWidgetColorName } from "./color";
 
-import type { SplitSide } from "../context";
+import type { SplitSide } from "./DiffView";
 import type { DiffFileExtends } from "../utils/diff-file-extend";
 
 export const DiffSplitAddWidget = ({
@@ -13,7 +13,7 @@ export const DiffSplitAddWidget = ({
   lineNumber: number;
   diffFile: DiffFileExtends;
   side: SplitSide;
-  onWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+  onWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
 }) => {
   return (
     <div
@@ -33,7 +33,7 @@ export const DiffSplitAddWidget = ({
         }}
         onClick={() => {
           diffFile.onOpenAddWidget(lineNumber, side);
-          onWidgetClick?.(lineNumber, side);
+          onWidgetClick?.("onAddWidgetClick", lineNumber, side);
         }}
       >
         +

diff --git a/packages/vue/src/components/DiffSplitExtendLine.tsx b/packages/vue/src/components/DiffSplitExtendLine.tsx
@@ -1,69 +1,54 @@
-import { defineComponent, ref, watchEffect } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
-import { SplitSide, useExtendData, useRenderExtendLine } from "../context";
+import { useExtendData, useSlots } from "../context";
 import { useDomWidth } from "../hooks/useDomWidth";
-import { useForceUpdate } from "../hooks/useForceUpdate";
+import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { emptyBGName } from "./color";
+import { SplitSide } from "./DiffView";
 
 import type { DiffFileExtends } from "../utils";
 
 export const DiffSplitExtendLine = defineComponent(
   (props: { index: number; side: SplitSide; diffFile: DiffFileExtends; lineNumber: number }) => {
     const extendData = useExtendData();
 
-    const renderExtendLine = useRenderExtendLine();
+    const slots = useSlots();
 
-    const side = ref<"left" | "right">(props.side === SplitSide.old ? "left" : "right");
+    const side = computed(() => (props.side === SplitSide.old ? "left" : "right"));
 
-    const lineSelector = ref(`tr[data-line="${props.lineNumber}-extend"]`);
+    const lineSelector = computed(() => `tr[data-line="${props.lineNumber}-extend"]`);
+
+    const wrapperSelector = computed(() => (props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper"));
 
     const oldItem = ref(props.diffFile.getSplitLeftLine(props.index));
 
     const newItem = ref(props.diffFile.getSplitRightLine(props.index));
 
-    const currentItem = ref(props.side === SplitSide.old ? oldItem.value : newItem.value);
+    const currentItem = computed(() => (props.side === SplitSide.old ? oldItem.value : newItem.value));
 
     const oldExtend = ref(extendData.value?.oldFile?.[oldItem.value?.lineNumber]);
 
     const newExtend = ref(extendData.value?.newFile?.[newItem.value.lineNumber]);
 
-    const currentExtend = ref(props.side === SplitSide.old ? oldExtend.value : newExtend.value);
-
-    const currentEnable = ref(props.side === SplitSide.old ? !!oldExtend.value : !!newExtend.value);
-
-    const wrapperSelector = ref(props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper");
-
-    const currentLineNumber = ref(props.side === SplitSide.old ? oldItem.value.lineNumber : newItem.value.lineNumber);
-
-    const currentIsShow = ref(Boolean((oldExtend.value || newExtend.value) && currentItem.value && !currentItem.value.isHidden && currentItem.value.diff));
-
-    const count = useForceUpdate(props);
+    useSubscribeDiffFile(props, (diffFile) => (oldItem.value = diffFile.getSplitLeftLine(props.index)));
 
-    watchEffect(() => {
-      side.value = props.side === SplitSide.old ? "left" : "right";
+    useSubscribeDiffFile(props, (diffFile) => (newItem.value = diffFile.getSplitRightLine(props.index)));
 
-      oldItem.value = props.diffFile.getSplitLeftLine(props.index);
+    useSubscribeDiffFile(props, () => (oldExtend.value = extendData.value?.oldFile?.[oldItem.value?.lineNumber]));
 
-      newItem.value = props.diffFile.getSplitRightLine(props.index);
+    useSubscribeDiffFile(props, () => (newExtend.value = extendData.value?.newFile?.[newItem.value?.lineNumber]));
 
-      lineSelector.value = `tr[data-line="${props.lineNumber}-extend"]`;
+    const currentExtend = computed(() => (props.side === SplitSide.old ? oldExtend.value : newExtend.value));
 
-      currentItem.value = props.side === SplitSide.old ? oldItem.value : newItem.value;
+    const currentEnable = computed(() => (props.side === SplitSide.old ? !!oldExtend.value : !!newExtend.value));
 
-      oldExtend.value = extendData.value?.oldFile?.[oldItem.value?.lineNumber];
+    const currentLineNumber = computed(() => (props.side === SplitSide.old ? oldItem.value.lineNumber : newItem.value.lineNumber));
 
-      newExtend.value = extendData.value?.newFile?.[newItem.value.lineNumber];
-
-      currentExtend.value = props.side === SplitSide.old ? oldExtend.value : newExtend.value;
-
-      wrapperSelector.value = props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper";
-
-      currentLineNumber.value = props.side === SplitSide.old ? oldItem.value.lineNumber : newItem.value.lineNumber;
-
-      currentIsShow.value = Boolean((oldExtend.value || newExtend.value) && currentItem.value && !currentItem.value.isHidden && currentItem.value.diff);
-    });
+    const currentIsShow = computed(() =>
+      Boolean((oldExtend.value || newExtend.value) && currentItem.value && !currentItem.value.isHidden && currentItem.value.diff)
+    );
 
     useSyncHeight({
       selector: lineSelector,
@@ -77,25 +62,23 @@ export const DiffSplitExtendLine = defineComponent(
     });
 
     return () => {
-      count.value;
-
       if (!currentIsShow.value) return null;
 
       return (
         <tr
           data-line={`${props.lineNumber}-extend`}
           data-state="extend"
           data-side={props.side === SplitSide.old ? "left" : "right"}
-          class={"diff-line diff-line-extend" + !currentExtend ? " diff-line-extend-empty" : ""}
+          class={"diff-line diff-line-extend" + !currentExtend.value ? " diff-line-extend-empty" : ""}
           style={{
-            backgroundColor: !currentExtend ? `var(${emptyBGName})` : undefined,
+            backgroundColor: !currentExtend.value ? `var(${emptyBGName})` : undefined,
           }}
         >
           <td class="diff-line-extend-content align-top p-0" colspan={2}>
             <div class="diff-line-extend-wrapper sticky left-0" style={{ width: width.value + "px" }}>
               {width.value > 0 &&
                 currentExtend.value &&
-                renderExtendLine.value?.({
+                slots.extend?.({
                   diffFile: props.diffFile,
                   side: props.side,
                   lineNumber: currentLineNumber.value,

diff --git a/packages/vue/src/components/DiffSplitHunkLine.tsx b/packages/vue/src/components/DiffSplitHunkLine.tsx
@@ -1,13 +1,13 @@
 import { composeLen, type DiffFile } from "@git-diff-view/core";
 import { computed, defineComponent, ref } from "vue";
 
-import { SplitSide, useEnableWrap } from "../context";
-import { useForceUpdate } from "../hooks/useForceUpdate";
+import { useEnableWrap } from "../context";
 import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { hunkContentBGName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
 import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
+import { SplitSide } from "./DiffView";
 
 export const DiffSplitHunkLine = defineComponent(
   (props: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
@@ -27,8 +27,6 @@ export const DiffSplitHunkLine = defineComponent(
 
     const currentIsShow = ref(currentHunk.value && currentHunk.value.splitInfo.startHiddenIndex < currentHunk.value.splitInfo.endHiddenIndex);
 
-    const count = useForceUpdate(props);
-
     useSubscribeDiffFile(props, (diffFile) => (currentHunk.value = diffFile.getSplitHunkLine(props.index)));
 
     useSubscribeDiffFile(
@@ -50,8 +48,6 @@ export const DiffSplitHunkLine = defineComponent(
     });
 
     return () => {
-      count.value;
-
       if (!currentIsShow.value) return null;
 
       return (
@@ -126,8 +122,6 @@ export const DiffSplitExpandLastLine = defineComponent(
 
     const currentIsShow = ref(props.diffFile.getNeedShowExpandAll("split"));
 
-    const count = useForceUpdate(props);
-
     useSubscribeDiffFile(props, (diffFile) => (currentIsShow.value = diffFile.getNeedShowExpandAll("split")));
 
     useSyncHeight({
@@ -137,8 +131,6 @@ export const DiffSplitExpandLastLine = defineComponent(
     });
 
     return () => {
-      count.value;
-
       if (!currentIsShow.value) return null;
 
       return (

diff --git a/packages/vue/src/components/DiffSplitLine.tsx b/packages/vue/src/components/DiffSplitLine.tsx
@@ -1,14 +1,15 @@
 import { DiffLineType, type DiffFile } from "@git-diff-view/core";
 import { computed, defineComponent, ref } from "vue";
 
-import { SplitSide, useEnableAddWidget, useEnableHighlight, useEnableWrap, useOnAddWidgetClick } from "../context";
+import { useEnableAddWidget, useEnableHighlight, useEnableWrap, useOnAddWidgetClick } from "../context";
 import { useForceUpdate } from "../hooks/useForceUpdate";
 import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { emptyBGName, getContentBG, getLineNumberBG, plainLineNumberColorName } from "./color";
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
+import { SplitSide } from "./DiffView";
 
 import type { DiffFileExtends } from "../utils";
 
@@ -95,7 +96,7 @@ export const DiffSplitLine = defineComponent(
                   lineNumber={currentItem.value.lineNumber}
                   side={props.side}
                   diffFile={props.diffFile as DiffFileExtends}
-                  onWidgetClick={onAddWidgetClick.value}
+                  onWidgetClick={onAddWidgetClick}
                 />
               )}
               <span data-line-num={currentItem.value.lineNumber} style={{ opacity: currentItemHasChange.value ? undefined : 0.5 }}>
@@ -126,7 +127,7 @@ export const DiffSplitLine = defineComponent(
             <td
               class="diff-line-num diff-line-num-placeholder pl-[10px] pr-[10px] left-0 z-[1]"
               style={{
-                position: enableWrap ? "relative" : "sticky",
+                position: enableWrap.value ? "relative" : "sticky",
               }}
             />
             <td class="diff-line-content diff-line-content-placeholder pr-[10px] align-top" />

diff --git a/packages/vue/src/components/DiffSplitView.tsx b/packages/vue/src/components/DiffSplitView.tsx
@@ -1,14 +1,15 @@
 import { numIterator } from "@git-diff-view/core";
-import { Fragment, computed, defineComponent, ref, watchEffect } from "vue";
+import { Fragment, computed, defineComponent, ref, watchPostEffect } from "vue";
 
-import { SplitSide, useEnableWrap } from "../context";
+import { useEnableWrap } from "../context";
 import { useIsMounted } from "../hooks/useIsMounted";
 import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 
 import { DiffSplitExtendLine } from "./DiffSplitExtendLine";
 import { DiffSplitExpandLastLine, DiffSplitHunkLine } from "./DiffSplitHunkLine";
 import { DiffSplitLine } from "./DiffSplitLine";
 import { DiffSplitWidgetLine } from "./DiffSplitWidgetLine";
+import { SplitSide } from "./DiffView";
 
 import type { DiffFileExtends } from "../utils";
 import type { DiffFile } from "@git-diff-view/core";
@@ -103,7 +104,7 @@ export const DiffSplitView = defineComponent(
       onClean(clean);
     };
 
-    watchEffect(initSyncScroll);
+    watchPostEffect(initSyncScroll);
 
     return () => {
       return (

diff --git a/packages/vue/src/components/DiffSplitWidgetLine.tsx b/packages/vue/src/components/DiffSplitWidgetLine.tsx
@@ -1,17 +1,18 @@
 import { computed, defineComponent, ref } from "vue";
 
-import { SplitSide, useRenderWidgetLine } from "../context";
+import { useSlots } from "../context";
 import { useDomWidth } from "../hooks/useDomWidth";
 import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { emptyBGName } from "./color";
+import { SplitSide } from "./DiffView";
 
 import type { DiffFileExtends } from "../utils";
 
 export const DiffSplitWidgetLine = defineComponent(
   (props: { index: number; side: SplitSide; diffFile: DiffFileExtends; lineNumber: number }) => {
-    const renderWidgetLine = useRenderWidgetLine();
+    const slots = useSlots();
 
     const leftItem = ref(props.diffFile.getSplitLeftLine(props.index));
 
@@ -68,16 +69,16 @@ export const DiffSplitWidgetLine = defineComponent(
           data-line={`${props.lineNumber}-widget`}
           data-state="widget"
           data-side={props.side === SplitSide.old ? "left" : "right"}
-          class={"diff-line diff-line-widget" + !currentWidget ? " diff-line-widget-empty" : ""}
+          class={"diff-line diff-line-widget" + !currentWidget.value ? " diff-line-widget-empty" : ""}
           style={{
-            backgroundColor: !currentWidget ? `var(${emptyBGName})` : undefined,
+            backgroundColor: !currentWidget.value ? `var(${emptyBGName})` : undefined,
           }}
         >
           <td class="diff-line-widget-content p-0" colspan={2}>
             <div class="diff-line-widget-wrapper sticky left-0" style={{ width: width.value + "px" }}>
               {width.value > 0 &&
                 currentWidget.value &&
-                renderWidgetLine.value?.({
+                slots.widget?.({
                   diffFile: props.diffFile,
                   side: props.side,
                   lineNumber: currentItem.value.lineNumber,