init

.eslintrc.cjs

@@ -5,5 +5,5 @@ module.exports = {
   },
   // eslint will auto add `eslint-config` for a no scope package(which not start with '@' chart), so here use absolute file path
   extends: [require.resolve("project-tool/baseLint")],
-  ignorePatterns: ["dist", "dev", "scripts", "node_modules", "next-app-example", "next-page-example"],
+  ignorePatterns: ["dist", "dev", "scripts", "node_modules", "next-app-example", "next-page-example", "packages/solid"],
 };

package.json

@@ -13,6 +13,7 @@
     "dev:vue-ssr": "cd ui/vue-ssr-example && pnpm run dev",
     "dev:next-page": "cd ui/next-page-example && pnpm run dev",
     "dev:next-app": "cd ui/next-app-example && pnpm run dev",
+    "dev:solid": "cd ui/solid-example && pnpm run dev",
     "build:react": "cd ui/react-example && pnpm run build",
     "pre:release": "pnpm run lint && pnpm run prettier && pnpm run clean && pnpm run build:packages",
     "release": "pnpm run pre:release && pnpm run start:release",
@@ -26,6 +27,7 @@
   "devDependencies": {
     "@git-diff-view/core": "workspace:*",
     "@git-diff-view/react": "workspace:*",
+    "@git-diff-view/solid": "workspace:*",
     "@git-diff-view/vue": "workspace:*",
     "@git-diff-view/utils": "workspace:*",
     "@swc/core": "^1.10.15",

packages/angular/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@git-diff-view/angular"
+}

packages/core/src/diff-file.ts

@@ -1411,6 +1411,7 @@ export class DiffFile {
     return this.#newFileSyntaxLines?.[lineNumber];
   };
 
+  // TODO improve
   subscribe = (listener: (() => void) & { isSyncExternal?: boolean }) => {
     this.#listeners.push(listener);
 
@@ -1578,7 +1579,7 @@ export class DiffFile {
     }
   };
 
-  _getHighlighterName = () => this.#highlighterName;
+  _getHighlighterName = () => this.#highlighterName || '';
 
   _getIsPureDiffRender = () => this.#composeByDiff;
 

packages/dom/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@git-diff-view/dom"
+}

packages/react/index.d.ts

@@ -793,6 +793,12 @@ export type SyntaxNode = {
 	};
 	children?: SyntaxNode[];
 };
+export declare enum DiffModeEnum {
+	SplitGitHub = 1,
+	SplitGitLab = 2,
+	Split = 3,
+	Unified = 4
+}
 declare const createDiffConfigStore: (props: DiffViewProps<any> & {
 	isMounted: boolean;
 }, diffFileId: string) => import("reactivity-store").UseSelectorWithStore<{
@@ -938,12 +944,6 @@ declare const createDiffWidgetStore: (useDiffContextRef: RefObject<ReturnType<ty
 		lineNumber?: number;
 	}) => void;
 }>;
-export declare enum DiffModeEnum {
-	SplitGitHub = 1,
-	SplitGitLab = 2,
-	Split = 3,
-	Unified = 4
-}
 export type DiffViewProps<T> = {
 	data?: {
 		oldFile?: {

packages/react/src/components/DiffSplitContentLineNormal.tsx

@@ -44,7 +44,7 @@ const InternalDiffSplitLine = ({
 
   const hasDiff = !!currentLine?.diff;
 
-  const hasContent = !!currentLine.lineNumber;
+  const hasContent = !!currentLine?.lineNumber;
 
   const hasChange = checkDiffLineIncludeChange(currentLine?.diff);
 
@@ -109,8 +109,8 @@ const InternalDiffSplitLine = ({
             <DiffContent
               enableWrap={false}
               diffFile={diffFile}
-              rawLine={currentLine.value!}
-              diffLine={currentLine.diff}
+              rawLine={currentLine?.value || ''}
+              diffLine={currentLine?.diff}
               plainLine={plainLine}
               syntaxLine={syntaxLine}
               enableHighlight={enableHighlight}

packages/react/src/components/DiffView.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { DiffFile, _cacheMap, SplitSide } from "@git-diff-view/core";
-import { diffFontSizeName } from "@git-diff-view/utils";
+import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
 import { memo, useEffect, useMemo, forwardRef, useImperativeHandle, useRef } from "react";
 import * as React from "react";
 
@@ -20,16 +20,7 @@ import type { CSSProperties, ForwardedRef, ReactNode } from "react";
 
 _cacheMap.name = "@git-diff-view/react";
 
-export { SplitSide };
-
-export enum DiffModeEnum {
-  // github like
-  SplitGitHub = 1,
-  // gitlab like
-  SplitGitLab = 2,
-  Split = 1 | 2,
-  Unified = 4,
-}
+export { SplitSide, DiffModeEnum };
 
 export type DiffViewProps<T> = {
   data?: {
@@ -105,6 +96,7 @@ const InternalDiffView = <T extends unknown>(
     style,
     diffViewMode,
     diffViewWrap,
+    diffViewTheme,
     diffViewFontSize,
     diffViewHighlight,
     renderWidgetLine,
@@ -218,13 +210,17 @@ const InternalDiffView = <T extends unknown>(
   ]);
 
   useEffect(() => {
-    const cb = diffFile.subscribe(() => {
+    const init = () => {
       wrapperRef.current?.setAttribute("data-theme", diffFile._getTheme() || "light");
       wrapperRef.current?.setAttribute("data-highlighter", diffFile._getHighlighterName());
-    });
+    }
+
+    init();
+
+    const cb = diffFile.subscribe(init);
 
     return cb;
-  }, [diffFile]);
+  }, [diffFile, diffViewTheme]);
 
   const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
 
@@ -324,7 +320,7 @@ const DiffViewWithRef = <T extends unknown>(
       diffFile.initSyntax({ registerHighlighter });
       diffFile.notifyAll();
     }
-  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
+  }, [diffFile, props.diffViewHighlight, registerHighlighter]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);
@@ -339,6 +335,7 @@ const DiffViewWithRef = <T extends unknown>(
       {...restProps}
       diffFile={diffFile}
       isMounted={isMounted}
+      diffViewTheme={diffViewTheme}
       diffViewMode={restProps.diffViewMode || DiffModeEnum.SplitGitHub}
       diffViewFontSize={restProps.diffViewFontSize || 14}
     />

packages/solid/.eslintrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: ["solid"],
+  extends: ["../../.eslintrc.cjs", "plugin:solid/typescript"],
+  ignorePatterns: ["dist", "dev", "node_modules"],
+};