wip

Author: MrWangJustToDo

packages/solid/src/components/DiffSplitViewWrap.tsx

@@ -1,12 +1,20 @@
-import { getSplitContentLines, type DiffFile } from "@git-diff-view/core";
-import { createSignal } from "solid-js";
+import { getSplitContentLines } from "@git-diff-view/core";
+import { createMemo, createSignal } from "solid-js";
+
+import { useFontSize } from "../hooks";
+
+import type { DiffFile, SplitSide } from "@git-diff-view/core";
 
 export const DiffSplitViewWrap = (props: { diffFile: DiffFile }) => {
-  const [] = createSignal(getSplitContentLines(props.diffFile));
+  const [lines, setLines] = createSignal(getSplitContentLines(props.diffFile));
+
+  const [maxText, setMaxText] = createSignal(props.diffFile.splitLineLength.toString());
+
+  const [splitSideInfo, setSplitInfo] = createSignal<{ side?: SplitSide }>({ side: undefined });
 
-  const [] = createSignal(props.diffFile.splitLineLength.toString());
+  const fontSize = useFontSize();
 
-  
+  const font = createMemo(() => ({ fontSize: `${fontSize() || 14}px`, fontFamily: "Menlo, Consolas, monospace" }));
 
   return <div>12</div>;
 };

packages/solid/src/hooks/generate.ts

@@ -0,0 +1,32 @@
+import { createEffect, createSignal, onCleanup, useContext } from "solid-js";
+
+import { DiffViewContext } from "../components/DiffViewContext";
+
+import type { createDiffConfigStore } from "../components/tools";
+
+type AllKey = keyof ReturnType<ReturnType<typeof createDiffConfigStore>["getReadonlyState"]>;
+
+type Data = ReturnType<ReturnType<typeof createDiffConfigStore>["getReadonlyState"]>;
+
+export const generateHook = <T extends AllKey, K extends Data[T] = Data[T]>(key: T) => {
+  return () => {
+    const reactiveHook = useContext(DiffViewContext);
+
+    const [state, setState] = createSignal<K>(reactiveHook?.getReadonlyState()[key] as K);
+
+    createEffect(() => {
+      const unsubscribe = reactiveHook?.subscribe(
+        (s) => s[key],
+        () => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          setState(reactiveHook?.getReadonlyState()[key]);
+        }
+      );
+
+      onCleanup(() => unsubscribe?.());
+    });
+
+    return state;
+  };
+};

packages/solid/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useEnableWrap";
+export * from "./useFontSize";

packages/solid/src/hooks/useEnableWrap.ts

@@ -1,22 +1,3 @@
-import { createEffect, createSignal, onCleanup, useContext } from "solid-js";
+import { generateHook } from "./generate";
 
-import { DiffViewContext } from "../components/DiffViewContext";
-
-export const useEnableWrap = () => {
-  const reactiveHook = useContext(DiffViewContext);
-
-  const [enableWrap, setEnableWrap] = createSignal(reactiveHook?.getReadonlyState().enableWrap);
-
-  createEffect(() => {
-    const unsubscribe = reactiveHook?.subscribe(
-      (s) => s.enableWrap,
-      () => {
-        setEnableWrap(reactiveHook.getReadonlyState().enableWrap);
-      }
-    );
-
-    onCleanup(() => unsubscribe?.());
-  });
-
-  return enableWrap;
-};
+export const useEnableWrap = generateHook("enableWrap");

packages/solid/src/hooks/useFontSize.ts

@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useFontSize = generateHook("fontSize");