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/dom/package.json

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

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,59 @@
+{
+  "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"
+  },
+  "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.25",
+    "@types/hast": "^3.0.0",
+    "highlight.js": "^11.11.0",
+    "lowlight": "^3.3.0",
+    "fast-diff": "^1.3.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "solid-js": "^1.9.0",
+    "vite-plugin-solid": "^2.11.0",
+    "autoprefixer": "^10.4.20",
+    "eslint-plugin-solid": "^0.14.5",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "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/components/DiffAddWidget.tsx

@@ -0,0 +1,74 @@
+import { diffFontSizeName, addWidgetColorName, addWidgetBGName } from "@git-diff-view/utils";
+
+import type { SplitSide } from "./DiffView";
+import type { DiffFile } from "@git-diff-view/core";
+
+export const DiffSplitAddWidget = (props: {
+  index: number;
+  className?: string;
+  lineNumber: number;
+  diffFile: DiffFile;
+  side: SplitSide;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
+  onWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <div
+      class={
+        "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
+        (props.className ? " " + props.className : "")
+      }
+      style={{
+        width: `calc(var(${diffFontSizeName}) * 1.4)`,
+        height: `calc(var(${diffFontSizeName}) * 1.4)`,
+      }}
+    >
+      <button
+        class="diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]"
+        style={{
+          color: `var(${addWidgetColorName})`,
+          "background-color": `var(${addWidgetBGName})`,
+        }}
+        onClick={() => {
+          props.onOpenAddWidget(props.lineNumber, props.side);
+          props.onWidgetClick?.("onAddWidgetClick", props.lineNumber, props.side);
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};
+
+export const DiffUnifiedAddWidget = (props: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  side: SplitSide;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
+  onWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <div
+      class="diff-add-widget-wrapper invisible absolute left-[100%] top-[1px] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
+      style={{
+        width: `calc(var(${diffFontSizeName}) * 1.4)`,
+        height: `calc(var(${diffFontSizeName}) * 1.4)`,
+      }}
+    >
+      <button
+        class="diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]"
+        style={{
+          color: `var(${addWidgetColorName})`,
+          "background-color": `var(${addWidgetBGName})`,
+        }}
+        onClick={() => {
+          props.onOpenAddWidget(props.lineNumber, props.side);
+          props.onWidgetClick?.("onAddWidgetClick", props.lineNumber, props.side);
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};