highlighter optimize

MrWangJustToDo · MrWangJustToDo · commit 9b79a72945a8 · 2024-10-14T19:30:02.000+08:00
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -18,7 +18,8 @@ declare class File$1 {
 	syntaxFile: Record<number, SyntaxLine>;
 	hasDoSyntax: boolean;
 	syntaxLength?: number;
-	highlighterName?: string;
+	highlighterName?: DiffHighlighter["name"];
+	highlighterType?: DiffHighlighter["type"];
 	maxLineNumber: number;
 	static createInstance(data: File$1): File$1;
 	constructor(raw: string, lang: string, fileName?: string);
@@ -522,6 +523,7 @@ export interface UnifiedLineItem {
 export type DiffAST = ReturnType<typeof lowlight.highlight>;
 export type DiffHighlighter = {
 	name: string;
+	type: "class" | "style" | string;
 	maxLineToIgnoreSyntax: number;
 	setMaxLineToIgnoreSyntax: (v: number) => void;
 	ignoreSyntaxHighlightList: (string | RegExp)[];
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -3,7 +3,7 @@
   "description": "@git-diff-view/core",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -52,7 +52,7 @@
     "diff parse"
   ],
   "dependencies": {
-    "@git-diff-view/lowlight": "^0.0.17",
+    "@git-diff-view/lowlight": "^0.0.18",
     "highlight.js": "^11.9.0",
     "lowlight": "^3.1.0",
     "fast-diff": "^1.3.0"
diff --git a/packages/core/src/file.ts b/packages/core/src/file.ts
@@ -41,7 +41,9 @@ export class File {
 
   syntaxLength?: number;
 
-  highlighterName?: string;
+  highlighterName?: DiffHighlighter["name"];
+
+  highlighterType?: DiffHighlighter["type"];
 
   maxLineNumber: number = 0;
 
@@ -64,6 +66,8 @@ export class File {
 
     file.highlighterName = data?.highlighterName;
 
+    file.highlighterType = data?.highlighterType;
+
     file.maxLineNumber = data?.maxLineNumber;
 
     return file;
@@ -110,6 +114,8 @@ export class File {
 
     this.highlighterName = finalHighlighter.name;
 
+    this.highlighterType = finalHighlighter.type;
+
     if (__DEV__) {
       this.#doCheck();
     }
@@ -181,7 +187,7 @@ export const getFile = (raw: string, lang: string, theme: "light" | "dark", file
   if (map.has(otherThemeKey)) {
     const cacheFile = map.get(otherThemeKey);
     // 基于className的ast不需要重新生成
-    if (cacheFile.highlighterName === highlighter.name) {
+    if (cacheFile.highlighterType === 'class') {
       return cacheFile;
     }
   }
diff --git a/packages/file/index.d.ts b/packages/file/index.d.ts
@@ -18,7 +18,8 @@ declare class File$1 {
 	syntaxFile: Record<number, SyntaxLine>;
 	hasDoSyntax: boolean;
 	syntaxLength?: number;
-	highlighterName?: string;
+	highlighterName?: DiffHighlighter["name"];
+	highlighterType?: DiffHighlighter["type"];
 	maxLineNumber: number;
 	static createInstance(data: File$1): File$1;
 	constructor(raw: string, lang: string, fileName?: string);
@@ -521,6 +522,7 @@ export interface UnifiedLineItem {
 export type DiffAST = ReturnType<typeof lowlight.highlight>;
 export type DiffHighlighter = {
 	name: string;
+	type: "class" | "style" | string;
 	maxLineToIgnoreSyntax: number;
 	setMaxLineToIgnoreSyntax: (v: number) => void;
 	ignoreSyntaxHighlightList: (string | RegExp)[];
diff --git a/packages/file/package.json b/packages/file/package.json
@@ -3,7 +3,7 @@
   "description": "@git-diff-view/file",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -52,7 +52,7 @@
     "diff parse"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.17",
+    "@git-diff-view/core": "^0.0.18",
     "diff": "^5.2.0",
     "highlight.js": "^11.9.0",
     "lowlight": "^3.1.0",
diff --git a/packages/lowlight/index.d.ts b/packages/lowlight/index.d.ts
@@ -42,6 +42,7 @@ declare const lowlight: {
 export type DiffAST = ReturnType<typeof lowlight.highlight>;
 export type DiffHighlighter = {
 	name: string;
+	type: "class" | "style" | string;
 	maxLineToIgnoreSyntax: number;
 	setMaxLineToIgnoreSyntax: (v: number) => void;
 	ignoreSyntaxHighlightList: (string | RegExp)[];
diff --git a/packages/lowlight/package.json b/packages/lowlight/package.json
@@ -3,7 +3,7 @@
   "description": "@git-diff-view/lowlight",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
diff --git a/packages/lowlight/src/index.ts b/packages/lowlight/src/index.ts
@@ -56,6 +56,7 @@ export type DiffAST = ReturnType<typeof lowlight.highlight>;
 
 export type DiffHighlighter = {
   name: string;
+  type: "class" | "style" | string;
   maxLineToIgnoreSyntax: number;
   setMaxLineToIgnoreSyntax: (v: number) => void;
   ignoreSyntaxHighlightList: (string | RegExp)[];
@@ -135,6 +136,8 @@ Object.defineProperty(instance, "hasRegisteredCurrentLang", {
   },
 });
 
+Object.defineProperty(instance, "type", { value: "class" });
+
 export { processAST } from "./processAST";
 
 export const versions = __VERSION__;
diff --git a/packages/react/index.d.ts b/packages/react/index.d.ts
@@ -18,7 +18,8 @@ declare class File$1 {
 	syntaxFile: Record<number, SyntaxLine>;
 	hasDoSyntax: boolean;
 	syntaxLength?: number;
-	highlighterName?: string;
+	highlighterName?: DiffHighlighter["name"];
+	highlighterType?: DiffHighlighter["type"];
 	maxLineNumber: number;
 	static createInstance(data: File$1): File$1;
 	constructor(raw: string, lang: string, fileName?: string);
@@ -521,6 +522,7 @@ export interface UnifiedLineItem {
 export type DiffAST = ReturnType<typeof lowlight.highlight>;
 export type DiffHighlighter = {
 	name: string;
+	type: "class" | "style" | string;
 	maxLineToIgnoreSyntax: number;
 	setMaxLineToIgnoreSyntax: (v: number) => void;
 	ignoreSyntaxHighlightList: (string | RegExp)[];
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,7 +61,7 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.17",
+    "@git-diff-view/core": "^0.0.18",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.9.0",
diff --git a/packages/react/postcss.config.js b/packages/react/postcss.config.js
@@ -13,9 +13,9 @@ module.exports = {
         }
         if (filePath.includes("node_modules")) {
           if (filePath.includes("dark.css")) {
-            return `${prefix}[data-theme="dark"] ${selector}`;
+            return `${prefix}[data-theme="dark"] .diff-line-syntax-raw ${selector}`;
           } else {
-            return `${prefix}[data-theme="light"] ${selector}`;
+            return `${prefix}[data-theme="light"] .diff-line-syntax-raw ${selector}`;
           }
         } else {
           return prefixedSelector;
diff --git a/packages/react/src/components/DiffContent.tsx b/packages/react/src/components/DiffContent.tsx
@@ -8,6 +8,7 @@ import { diffFontSizeName, memoFunc } from "./tools";
 const temp = {};
 
 const formatStringToCamelCase = (str: string) => {
+  if (str.startsWith('--')) return str;
   const splitted = str.split("-");
   if (splitted.length === 1) return splitted[0];
   return (
diff --git a/packages/react/src/tailwind.css b/packages/react/src/tailwind.css
@@ -25,6 +25,11 @@
   color: black;
 }
 
+.diff-style-root .diff-line-syntax-raw *,
+[data-theme="light"] .diff-line-syntax-raw * {
+  color: var(--diff-view-light, inherit);
+}
+
 [data-theme="dark"] .diff-style-root {
   --diff-border--: #3d444d;
   --diff-add-content--: #14261f;
@@ -48,6 +53,10 @@
   color: white;
 }
 
+[data-theme="dark"] .diff-line-syntax-raw * {
+  color: var(--diff-view-dark, inherit);
+}
+
 table,
 tr,
 td {
diff --git a/packages/shiki/index.d.ts b/packages/shiki/index.d.ts
@@ -1,6 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
-import { codeToHast, getHighlighter } from 'shiki';
+import { codeToHast, createHighlighter } from 'shiki';
 
 export type SyntaxNode = {
 	type: string;
@@ -31,6 +31,7 @@ export type DePromise<T> = T extends Promise<infer U> ? DePromise<U> : T;
 export type DiffAST = DePromise<ReturnType<typeof codeToHast>>;
 export type DiffHighlighter = {
 	name: string;
+	type: "class" | "style" | string;
 	maxLineToIgnoreSyntax: number;
 	setMaxLineToIgnoreSyntax: (v: number) => void;
 	ignoreSyntaxHighlightList: (string | RegExp)[];
@@ -41,15 +42,15 @@ export type DiffHighlighter = {
 		syntaxFileLineNumber: number;
 	};
 	hasRegisteredCurrentLang: (lang: string) => boolean;
-	getHighlighterEngine: () => DePromise<ReturnType<typeof getHighlighter>> | null;
+	getHighlighterEngine: () => DePromise<ReturnType<typeof createHighlighter>> | null;
 };
 export declare const highlighterReady: Promise<DiffHighlighter>;
 export declare const versions: string;
 export * from "shiki";
 
 export {
 	codeToHast,
-	getHighlighter,
+	createHighlighter,
 };
 
 export {};
diff --git a/packages/shiki/package.json b/packages/shiki/package.json
@@ -3,7 +3,7 @@
   "description": "@git-diff-view/shiki",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "types": "index.d.ts",
   "type": "module",
   "files": [
@@ -44,6 +44,6 @@
     "virtual dom highlight"
   ],
   "dependencies": {
-    "shiki": "^1.7.0"
+    "shiki": "^1.22.0"
   }
 }
diff --git a/packages/shiki/src/index.ts b/packages/shiki/src/index.ts
@@ -1,4 +1,4 @@
-import { getHighlighter } from "shiki";
+import { createHighlighter } from "shiki";
 
 import { processAST, type SyntaxLine } from "./processAST";
 
@@ -10,20 +10,21 @@ export type DiffAST = DePromise<ReturnType<typeof codeToHast>>;
 
 export type DiffHighlighter = {
   name: string;
+  type: "class" | "style" | string;
   maxLineToIgnoreSyntax: number;
   setMaxLineToIgnoreSyntax: (v: number) => void;
   ignoreSyntaxHighlightList: (string | RegExp)[];
   setIgnoreSyntaxHighlightList: (v: (string | RegExp)[]) => void;
   getAST: (raw: string, fileName?: string, lang?: string, theme?: "light" | "dark") => DiffAST;
   processAST: (ast: DiffAST) => { syntaxFileObject: Record<number, SyntaxLine>; syntaxFileLineNumber: number };
   hasRegisteredCurrentLang: (lang: string) => boolean;
-  getHighlighterEngine: () => DePromise<ReturnType<typeof getHighlighter>> | null;
+  getHighlighterEngine: () => DePromise<ReturnType<typeof createHighlighter>> | null;
 };
 
-let internal: DePromise<ReturnType<typeof getHighlighter>> | null = null;
+let internal: DePromise<ReturnType<typeof createHighlighter>> | null = null;
 
 const getDefaultHighlighter = async () =>
-  await getHighlighter({
+  await createHighlighter({
     themes: ["github-light", "github-dark"],
     langs: [
       "cpp",
@@ -92,7 +93,7 @@ Object.defineProperty(instance, "setIgnoreSyntaxHighlightList", {
 });
 
 Object.defineProperty(instance, "getAST", {
-  value: (raw: string, fileName?: string, lang?: string, theme?: "light" | "dark") => {
+  value: (raw: string, fileName?: string, lang?: string) => {
     if (
       fileName &&
       highlighter.ignoreSyntaxHighlightList.some((item) =>
@@ -109,7 +110,12 @@ Object.defineProperty(instance, "getAST", {
     try {
       return internal?.codeToHast(raw, {
         lang: lang,
-        theme: theme === "dark" ? "github-dark" : "github-light",
+        themes: {
+          dark: "github-dark",
+          light: "github-light",
+        },
+        cssVariablePrefix: "--diff-view-",
+        defaultColor: false,
         mergeWhitespaces: false,
       });
     } catch (e) {
@@ -141,6 +147,8 @@ Object.defineProperty(instance, "getHighlighterEngine", {
   },
 });
 
+Object.defineProperty(instance, "type", { value: "class" });
+
 const highlighter: DiffHighlighter = instance as DiffHighlighter;
 
 export const highlighterReady = new Promise<DiffHighlighter>((r) => {
diff --git a/packages/vue/index.d.ts b/packages/vue/index.d.ts
@@ -18,7 +18,8 @@ declare class File$1 {
 	syntaxFile: Record<number, SyntaxLine>;
 	hasDoSyntax: boolean;
 	syntaxLength?: number;
-	highlighterName?: string;
+	highlighterName?: DiffHighlighter["name"];
+	highlighterType?: DiffHighlighter["type"];
 	maxLineNumber: number;
 	static createInstance(data: File$1): File$1;
 	constructor(raw: string, lang: string, fileName?: string);
@@ -521,6 +522,7 @@ export interface UnifiedLineItem {
 export type DiffAST = ReturnType<typeof lowlight.highlight>;
 export type DiffHighlighter = {
 	name: string;
+	type: "class" | "style" | string;
 	maxLineToIgnoreSyntax: number;
 	setMaxLineToIgnoreSyntax: (v: number) => void;
 	ignoreSyntaxHighlightList: (string | RegExp)[];
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -3,7 +3,7 @@
   "description": "@git-diff-view/vue",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
   "type": "module",
   "types": "index.d.ts",
@@ -49,7 +49,7 @@
     "vue diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.17",
+    "@git-diff-view/core": "^0.0.18",
     "@types/hast": "^3.0.0",
     "highlight.js": "^11.9.0",
     "lowlight": "^3.1.0",
diff --git a/packages/vue/postcss.config.js b/packages/vue/postcss.config.js
@@ -9,9 +9,9 @@ export default {
         }
         if (filePath.includes("node_modules")) {
           if (filePath.includes("github.css")) {
-            return `${prefix}[data-theme="light"] ${selector}`;
+            return `${prefix}[data-theme="light"] .diff-line-syntax-raw ${selector}`;
           } else if (filePath.includes("github-dark.css")) {
-            return `${prefix}[data-theme="dark"] ${selector}`;
+            return `${prefix}[data-theme="dark"] .diff-line-syntax-raw ${selector}`;
           }
         } else {
           return prefixedSelector;
diff --git a/packages/vue/src/tailwind.css b/packages/vue/src/tailwind.css
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/react-example/src/Example.tsx b/ui/react-example/src/Example.tsx
