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",

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/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?: {

packages/solid/.eslintrc.cjs

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

packages/solid/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@git-diff-view/solid",
+  "description": "@git-diff-view/solid",
+  "author": "MrWangJustToDo",
+  "license": "MIT",
+  "version": "0.0.25",
+  "main": "index.js",
+  "type": "module",
+  "types": "index.d.ts",
+  "files": [
+    "dist",
+    "index.cjs",
+    "index.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MrWangJustToDo/git-diff-view.git",
+    "directory": "packages/solid"
+  },
+  "scripts": {
+    "build": "vite build",
+    "gen:type": "dts-bundle-generator -o index.d.ts dist/index.d.ts",
+    "gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
+    "gen:css2": "postcss src/tailwind_pure.css -o dist/css/diff-view-pure.css",
+    "gen:css": "npm run gen:css1 && npm run gen:css2"
+  },
+  "homepage": "https://mrwangjusttodo.github.io/git-diff-view",
+  "exports": {
+    ".": {
+      "require": "./index.cjs",
+      "types": "./index.d.ts",
+      "import": "./dist/vue-git-diff-view.mjs"
+    },
+    "./styles/*": "./dist/css/*",
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "diff component",
+    "solid diff component"
+  ],
+  "dependencies": {
+    "@git-diff-view/core": "^0.0.29",
+    "@types/hast": "^3.0.0",
+    "highlight.js": "^11.11.0",
+    "lowlight": "^3.3.0",
+    "fast-diff": "^1.3.0",
+    "reactivity-store": "^0.3.11"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.0",
+    "vite-plugin-solid": "^2.11.0",
+    "autoprefixer": "^10.4.20",
+    "eslint-plugin-solid": "^0.14.5",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  }
+}

packages/solid/postcss.config.js

@@ -0,0 +1,32 @@
+export default {
+  plugins: {
+    tailwindcss: { config: "./tailwind.config.js" },
+    "postcss-prefix-selector": {
+      prefix: ".diff-tailwindcss-wrapper",
+      transform: function (prefix, selector, prefixedSelector, _filePath, rule) {
+        const filePath = rule.source?.input?.file;
+        // ignore base css
+        // TODO next release update
+        if (rule.source?.start?.line === 1 && rule.source?.start?.column === 1) {
+          return selector;
+        }
+        if (selector.includes("diff-line-extend-wrapper") || selector.includes("diff-line-widget-wrapper")) {
+          return selector;
+        }
+        if (selector.includes("[data-theme")) {
+          return prefix + selector;
+        }
+        if (filePath.includes("node_modules")) {
+          if (filePath.includes("dark.css")) {
+            return `${prefix}[data-theme="dark"] .diff-line-syntax-raw ${selector}`;
+          } else {
+            return `${prefix}[data-theme="light"] .diff-line-syntax-raw ${selector}`;
+          }
+        } else {
+          return prefixedSelector;
+        }
+      },
+    },
+    autoprefixer: {},
+  },
+};

packages/solid/src/_base.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/solid/src/_base_pure.css

@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;

packages/solid/src/_com.css

@@ -0,0 +1,172 @@
+* {
+  box-sizing: border-box;
+}
+
+[data-theme="light"] .diff-style-root {
+  --diff-border--: #dedede;
+  --diff-add-content--: #e6ffec;
+  --diff-del-content--: #ffebe9;
+  --diff-add-lineNumber--: #ccffd8;
+  --diff-del-lineNumber--: #ffd7d5;
+  --diff-plain-content--: #ffffff;
+  --diff-expand-content--: #fafafa;
+  --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
+  --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
+  --diff-hunk-content--: #ddf4ff;
+  --diff-hunk-lineNumber--: #c7ecff;
+  --diff-hunk-lineNumber-hover--: #0969da;
+  --diff-add-content-highlight--: #abf2bc;
+  --diff-del-content-highlight--: #ffb3ad;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #fafafa;
+  --diff-hunk-content-color--: #777777;
+
+  color: black;
+}
+
+.diff-style-root .diff-line-syntax-raw *,
+[data-theme="light"] .diff-line-syntax-raw * {
+  color: var(--diff-view-light, inherit);
+  font-weight: var(--diff-view-light-font-weight, inherit);
+}
+
+[data-theme="dark"] .diff-style-root {
+  --diff-border--: #3d444d;
+  --diff-add-content--: #14261f;
+  --diff-del-content--: #311b1f;
+  --diff-add-lineNumber--: #1f4429;
+  --diff-del-lineNumber--: #552527;
+  --diff-plain-content--: #0d1117;
+  --diff-expand-content--: #161b22;
+  --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
+  --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
+  --diff-hunk-content--: #131d2e;
+  --diff-hunk-lineNumber--: #204274;
+  --diff-hunk-lineNumber-hover--: #1f6feb;
+  --diff-add-content-highlight--: #1f572d;
+  --diff-del-content-highlight--: #80312f;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #161b22;
+  --diff-hunk-content-color--: #9298a0;
+
+  color: white;
+}
+
+[data-theme="dark"] .diff-line-syntax-raw * {
+  color: var(--diff-view-dark, inherit);
+  font-weight: var(--diff-view-dark-font-weight, inherit);
+}
+
+table,
+tr,
+td {
+  border-color: transparent;
+  border-width: 0px;
+  text-align: left;
+}
+
+.diff-line-old-num,
+.diff-line-new-num,
+.diff-line-num {
+  text-align: right;
+}
+
+.diff-style-root tr {
+  content-visibility: auto;
+}
+
+.diff-add-widget-wrapper {
+  transform-origin: center;
+  transform: translateX(-50%) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper,
+.diff-line-new-content .diff-add-widget-wrapper {
+  transform: translateX(50%) !important;
+}
+
+.diff-add-widget-wrapper:hover {
+  transform: translateX(-50%) scale(1.1) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper:hover,
+.diff-line-new-content .diff-add-widget-wrapper:hover {
+  transform: translateX(50%) scale(1.1) !important;
+}
+
+.diff-widget-tooltip {
+  position: relative;
+}
+
+.diff-add-widget,
+.diff-widget-tooltip {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  text-transform: none;
+  border-width: 0px;
+  background-color: transparent;
+  background-image: none;
+}
+
+.diff-widget-tooltip::after {
+  display: none;
+  box-sizing: border-box;
+  background-color: #555555;
+  position: absolute;
+  content: attr(data-title);
+  font-size: 11px;
+  padding: 1px 2px;
+  border-radius: 4px;
+  overflow: hidden;
+  top: 50%;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  left: calc(100% + 8px);
+  color: #ffffff;
+}
+
+.diff-widget-tooltip::before {
+  display: none;
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: calc(100% - 2px);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: #555555;
+}
+
+.diff-widget-tooltip:hover {
+  background-color: var(--diff-hunk-lineNumber-hover--);
+  color: white;
+}
+
+.diff-widget-tooltip:hover::before {
+  display: block;
+}
+
+.diff-widget-tooltip:hover::after {
+  display: block;
+}
+
+.diff-line-extend-wrapper * {
+  color: initial;
+}
+
+.diff-line-widget-wrapper * {
+  color: initial;
+}

packages/solid/src/_theme.css

@@ -0,0 +1,2 @@
+@import url(highlight.js/styles/github.css);
+@import url(highlight.js/styles/github-dark.css);