Skip to content

Commit

Permalink
theme for react component
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrWangJustToDo
MrWangJustToDo committed Sep 29, 2024
1 parent 6523b6a commit 0353b68
Show file tree
Hide file tree
Showing 25 changed files with 175 additions and 110 deletions.
8 changes: 5 additions & 3 deletions packages/core/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ declare class File$1 {
maxLineNumber: number;
static createInstance(data: File$1): File$1;
constructor(raw: string, lang: string, fileName?: string);
doSyntax({ registerHighlighter }: {
doSyntax({ registerHighlighter, theme, }: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}): void;
doRaw(): void;
}
Expand Down Expand Up @@ -78,8 +79,9 @@ export declare class DiffFile {
getId(): string;
clearId(): void;
initRaw(): void;
initSyntax({ registerHighlighter }?: {
initSyntax({ registerHighlighter, theme, }?: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}): void;
init(): void;
buildSplitDiffLines(): void;
Expand Down Expand Up @@ -522,7 +524,7 @@ export type DiffHighlighter = {
setMaxLineToIgnoreSyntax: (v: number) => void;
ignoreSyntaxHighlightList: (string | RegExp)[];
setIgnoreSyntaxHighlightList: (v: (string | RegExp)[]) => void;
getAST: (raw: string, fileName?: string, lang?: string) => DiffAST;
getAST: (raw: string, fileName?: string, lang?: string, theme?: "light" | "dark") => DiffAST;
processAST: (ast: DiffAST) => {
syntaxFileObject: Record<number, SyntaxLine>;
syntaxFileLineNumber: number;
Expand Down
25 changes: 19 additions & 6 deletions packages/core/src/diff-file.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ export class DiffFile {

#highlighterName?: string;

#theme?: "light" | "dark";

_version_ = __VERSION__;

_oldFileContent: string = "";
Expand Down Expand Up @@ -471,12 +473,18 @@ export class DiffFile {
});
}

#composeSyntax({ registerHighlighter }: { registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine"> }) {
this.#oldFileResult?.doSyntax({ registerHighlighter });
#composeSyntax({
registerHighlighter,
theme,
}: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}) {
this.#oldFileResult?.doSyntax({ registerHighlighter, theme });

this.#oldFileSyntaxLines = this.#oldFileResult?.syntaxFile;

this.#newFileResult?.doSyntax({ registerHighlighter });
this.#newFileResult?.doSyntax({ registerHighlighter, theme });

this.#newFileSyntaxLines = this.#newFileResult?.syntaxFile;
}
Expand Down Expand Up @@ -529,8 +537,11 @@ export class DiffFile {
this.#hasInitRaw = true;
}

initSyntax({ registerHighlighter }: { registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine"> } = {}) {
if (this.#hasInitSyntax) return;
initSyntax({
registerHighlighter,
theme = "light",
}: { registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">; theme?: "light" | "dark" } = {}) {
if (this.#hasInitSyntax && this.#theme === theme) return;

if (this.#composeByMerge && !this.#composeByFullMerge) {
__DEV__ &&
Expand All @@ -540,12 +551,14 @@ export class DiffFile {
return;
}

this.#composeSyntax({ registerHighlighter });
this.#composeSyntax({ registerHighlighter, theme });

this.#highlighterName =
this.#oldFileResult?.highlighterName || this.#newFileResult?.highlighterName || this.#highlighterName;

this.#hasInitSyntax = true;

this.#theme = theme;
}

init() {
Expand Down
10 changes: 8 additions & 2 deletions packages/core/src/file.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,13 @@ export class File {
Object.defineProperty(this, "__v_skip", { value: true });
}

doSyntax({ registerHighlighter }: { registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine"> }) {
doSyntax({
registerHighlighter,
theme,
}: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}) {
if (!this.raw || this.hasDoSyntax) return;

const _highlighter = registerHighlighter || highlighter;
Expand All @@ -92,7 +98,7 @@ export class File {
return;
}

this.ast = _highlighter.getAST(this.raw, this.fileName, this.lang);
this.ast = _highlighter.getAST(this.raw, this.fileName, this.lang, theme);

if (!this.ast) return;

Expand Down
8 changes: 5 additions & 3 deletions packages/file/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ declare class File$1 {
maxLineNumber: number;
static createInstance(data: File$1): File$1;
constructor(raw: string, lang: string, fileName?: string);
doSyntax({ registerHighlighter }: {
doSyntax({ registerHighlighter, theme, }: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}): void;
doRaw(): void;
}
Expand Down Expand Up @@ -77,8 +78,9 @@ export declare class DiffFile {
getId(): string;
clearId(): void;
initRaw(): void;
initSyntax({ registerHighlighter }?: {
initSyntax({ registerHighlighter, theme, }?: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}): void;
init(): void;
buildSplitDiffLines(): void;
Expand Down Expand Up @@ -521,7 +523,7 @@ export type DiffHighlighter = {
setMaxLineToIgnoreSyntax: (v: number) => void;
ignoreSyntaxHighlightList: (string | RegExp)[];
setIgnoreSyntaxHighlightList: (v: (string | RegExp)[]) => void;
getAST: (raw: string, fileName?: string, lang?: string) => DiffAST;
getAST: (raw: string, fileName?: string, lang?: string, theme?: "light" | "dark") => DiffAST;
processAST: (ast: DiffAST) => {
syntaxFileObject: Record<number, SyntaxLine>;
syntaxFileLineNumber: number;
Expand Down
2 changes: 1 addition & 1 deletion packages/lowlight/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export type DiffHighlighter = {
setMaxLineToIgnoreSyntax: (v: number) => void;
ignoreSyntaxHighlightList: (string | RegExp)[];
setIgnoreSyntaxHighlightList: (v: (string | RegExp)[]) => void;
getAST: (raw: string, fileName?: string, lang?: string) => DiffAST;
getAST: (raw: string, fileName?: string, lang?: string, theme?: "light" | "dark") => DiffAST;
processAST: (ast: DiffAST) => {
syntaxFileObject: Record<number, SyntaxLine>;
syntaxFileLineNumber: number;
Expand Down
2 changes: 1 addition & 1 deletion packages/lowlight/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export type DiffHighlighter = {
setMaxLineToIgnoreSyntax: (v: number) => void;
ignoreSyntaxHighlightList: (string | RegExp)[];
setIgnoreSyntaxHighlightList: (v: (string | RegExp)[]) => void;
getAST: (raw: string, fileName?: string, lang?: string) => DiffAST;
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: () => typeof lowlight;
Expand Down
8 changes: 5 additions & 3 deletions packages/react/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ declare class File$1 {
maxLineNumber: number;
static createInstance(data: File$1): File$1;
constructor(raw: string, lang: string, fileName?: string);
doSyntax({ registerHighlighter }: {
doSyntax({ registerHighlighter, theme, }: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}): void;
doRaw(): void;
}
Expand Down Expand Up @@ -77,8 +78,9 @@ export declare class DiffFile {
getId(): string;
clearId(): void;
initRaw(): void;
initSyntax({ registerHighlighter }?: {
initSyntax({ registerHighlighter, theme, }?: {
registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
theme?: "light" | "dark";
}): void;
init(): void;
buildSplitDiffLines(): void;
Expand Down Expand Up @@ -521,7 +523,7 @@ export type DiffHighlighter = {
setMaxLineToIgnoreSyntax: (v: number) => void;
ignoreSyntaxHighlightList: (string | RegExp)[];
setIgnoreSyntaxHighlightList: (v: (string | RegExp)[]) => void;
getAST: (raw: string, fileName?: string, lang?: string) => DiffAST;
getAST: (raw: string, fileName?: string, lang?: string, theme?: "light" | "dark") => DiffAST;
processAST: (ast: DiffAST) => {
syntaxFileObject: Record<number, SyntaxLine>;
syntaxFileLineNumber: number;
Expand Down
20 changes: 10 additions & 10 deletions packages/react/src/components/DiffSplitHunkLineNormal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const _DiffSplitHunkLineGitHub = ({
{couldExpand ? (
isFirstLine ? (
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
title="Expand Up"
data-title="Expand Up"
onClick={() => diffFile.onSplitHunkExpand("up", index)}
Expand All @@ -73,7 +73,7 @@ const _DiffSplitHunkLineGitHub = ({
</button>
) : isLastLine ? (
<button
className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
title="Expand Down"
data-title="Expand Down"
onClick={() => {
Expand All @@ -84,7 +84,7 @@ const _DiffSplitHunkLineGitHub = ({
</button>
) : isExpandAll ? (
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
title="Expand All"
data-title="Expand All"
onClick={() => diffFile.onSplitHunkExpand("all", index)}
Expand All @@ -94,15 +94,15 @@ const _DiffSplitHunkLineGitHub = ({
) : (
<>
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
title="Expand Down"
data-title="Expand Down"
onClick={() => diffFile.onSplitHunkExpand("down", index)}
>
<ExpandDown className="fill-current" />
</button>
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
title="Expand Up"
data-title="Expand Up"
onClick={() => diffFile.onSplitHunkExpand("up", index)}
Expand Down Expand Up @@ -194,7 +194,7 @@ const _DiffSplitHunkLineGitLab = ({
{couldExpand ? (
isFirstLine ? (
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
title="Expand Up"
data-title="Expand Up"
onClick={() => diffFile.onSplitHunkExpand("up", index)}
Expand All @@ -203,7 +203,7 @@ const _DiffSplitHunkLineGitLab = ({
</button>
) : isLastLine ? (
<button
className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
title="Expand Down"
data-title="Expand Down"
onClick={() => {
Expand All @@ -214,7 +214,7 @@ const _DiffSplitHunkLineGitLab = ({
</button>
) : isExpandAll ? (
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
title="Expand All"
data-title="Expand All"
onClick={() => diffFile.onSplitHunkExpand("all", index)}
Expand All @@ -224,15 +224,15 @@ const _DiffSplitHunkLineGitLab = ({
) : (
<>
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
title="Expand Down"
data-title="Expand Down"
onClick={() => diffFile.onSplitHunkExpand("down", index)}
>
<ExpandDown className="fill-current" />
</button>
<button
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
title="Expand Up"
data-title="Expand Up"
onClick={() => diffFile.onSplitHunkExpand("up", index)}
Expand Down
Loading

2 comments on commit 0353b68

@danenania
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to use the diffViewTheme property... any chance you could push a new release that includes this commit?

@MrWangJustToDo
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to use the diffViewTheme property... any chance you could push a new release that includes this commit?我想使用 diffViewTheme 属性......你们有没有可能推出一个包含此提交的新版本？

#3

Please sign in to comment.