189 lines
6.3 KiB
TypeScript
189 lines
6.3 KiB
TypeScript
import { DiffLineAnnotation, FileContents, FileDiffOptions, type SelectedLineRange } from "@pierre/diffs"
|
|
import { ComponentProps } from "solid-js"
|
|
import { lineCommentStyles } from "../components/line-comment-styles"
|
|
|
|
export type DiffProps<T = {}> = FileDiffOptions<T> & {
|
|
before: FileContents
|
|
after: FileContents
|
|
annotations?: DiffLineAnnotation<T>[]
|
|
selectedLines?: SelectedLineRange | null
|
|
commentedLines?: SelectedLineRange[]
|
|
onLineNumberSelectionEnd?: (selection: SelectedLineRange | null) => void
|
|
onRendered?: () => void
|
|
class?: string
|
|
classList?: ComponentProps<"div">["classList"]
|
|
}
|
|
|
|
const unsafeCSS = `
|
|
:host {
|
|
--diffs-bg: var(
|
|
--opencode-diffs-bg,
|
|
light-dark(var(--diffs-light-bg, #fff), var(--diffs-dark-bg, #000))
|
|
);
|
|
}
|
|
|
|
[data-diff],
|
|
[data-file] {
|
|
/* Pierre 1.2 mixes these override targets at 12% in light mode and 20% in dark mode. */
|
|
--diffs-bg-deletion-override: light-dark(
|
|
color-mix(in lab, var(--diffs-bg) 33.333%, var(--diffs-deletion-base)),
|
|
color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-deletion-base))
|
|
);
|
|
--diffs-bg-addition-override: light-dark(
|
|
color-mix(in lab, var(--diffs-bg) 33.333%, var(--diffs-addition-base)),
|
|
color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-addition-base))
|
|
);
|
|
--diffs-selection-base: var(--surface-warning-strong);
|
|
--diffs-selection-border: var(--border-warning-base);
|
|
--diffs-selection-number-fg: #1c1917;
|
|
/* Use explicit alpha instead of color-mix(..., transparent) to avoid Safari's non-premultiplied interpolation bugs. */
|
|
--diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--surface-warning-base) r g b / 0.65));
|
|
--diffs-bg-selection-number: var(
|
|
--diffs-bg-selection-number-override,
|
|
rgb(from var(--surface-warning-base) r g b / 0.85)
|
|
);
|
|
--diffs-bg-selection-text: rgb(from var(--surface-warning-strong) r g b / 0.2);
|
|
}
|
|
|
|
:host([data-color-scheme='dark']) [data-diff],
|
|
:host([data-color-scheme='dark']) [data-file] {
|
|
--diffs-selection-number-fg: #fdfbfb;
|
|
--diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--solaris-dark-6) r g b / 0.65));
|
|
--diffs-bg-selection-number: var(
|
|
--diffs-bg-selection-number-override,
|
|
rgb(from var(--solaris-dark-6) r g b / 0.85)
|
|
);
|
|
}
|
|
|
|
[data-diff] ::selection,
|
|
[data-file] ::selection {
|
|
background-color: var(--diffs-bg-selection-text);
|
|
}
|
|
|
|
::highlight(opencode-find) {
|
|
background-color: rgb(from var(--surface-warning-base) r g b / 0.35);
|
|
}
|
|
|
|
::highlight(opencode-find-current) {
|
|
background-color: rgb(from var(--surface-warning-strong) r g b / 0.55);
|
|
}
|
|
|
|
[data-diff] [data-line][data-comment-selected]:not([data-selected-line]) {
|
|
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
|
|
}
|
|
|
|
[data-file] [data-line][data-comment-selected]:not([data-selected-line]) {
|
|
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
|
|
}
|
|
|
|
[data-diff] [data-column-number][data-comment-selected]:not([data-selected-line]) {
|
|
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection-number);
|
|
color: var(--diffs-selection-number-fg);
|
|
}
|
|
|
|
[data-file] [data-column-number][data-comment-selected]:not([data-selected-line]) {
|
|
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection-number);
|
|
color: var(--diffs-selection-number-fg);
|
|
}
|
|
|
|
[data-diff] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] {
|
|
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
|
|
}
|
|
|
|
[data-file] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] {
|
|
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
|
|
}
|
|
|
|
[data-diff] [data-line][data-selected-line] {
|
|
background-color: var(--diffs-bg-selection);
|
|
box-shadow: inset 2px 0 0 var(--diffs-selection-border);
|
|
}
|
|
|
|
[data-file] [data-line][data-selected-line] {
|
|
background-color: var(--diffs-bg-selection);
|
|
box-shadow: inset 2px 0 0 var(--diffs-selection-border);
|
|
}
|
|
|
|
[data-diff] [data-column-number][data-selected-line] {
|
|
background-color: var(--diffs-bg-selection-number);
|
|
color: var(--diffs-selection-number-fg);
|
|
}
|
|
|
|
[data-file] [data-column-number][data-selected-line] {
|
|
background-color: var(--diffs-bg-selection-number);
|
|
color: var(--diffs-selection-number-fg);
|
|
}
|
|
|
|
[data-diff] [data-column-number][data-line-type='context'][data-selected-line],
|
|
[data-diff] [data-column-number][data-line-type='context-expanded'][data-selected-line],
|
|
[data-diff] [data-column-number][data-line-type='change-addition'][data-selected-line],
|
|
[data-diff] [data-column-number][data-line-type='change-deletion'][data-selected-line] {
|
|
color: var(--diffs-selection-number-fg);
|
|
}
|
|
|
|
/* The deletion word-diff emphasis is stronger than additions; soften it while selected so the selection highlight reads consistently. */
|
|
[data-diff] [data-line][data-line-type='change-deletion'][data-selected-line] {
|
|
--diffs-bg-deletion-emphasis: light-dark(
|
|
rgb(from var(--diffs-deletion-base) r g b / 0.07),
|
|
rgb(from var(--diffs-deletion-base) r g b / 0.1)
|
|
);
|
|
}
|
|
|
|
[data-diff-header],
|
|
[data-diff],
|
|
[data-file] {
|
|
[data-separator] {
|
|
height: 24px;
|
|
}
|
|
[data-column-number] {
|
|
background-color: var(--diffs-bg);
|
|
cursor: default !important;
|
|
}
|
|
|
|
&[data-interactive-line-numbers] [data-column-number] {
|
|
cursor: default !important;
|
|
}
|
|
|
|
&[data-interactive-lines] [data-line] {
|
|
cursor: auto !important;
|
|
}
|
|
[data-code] {
|
|
overflow-x: auto !important;
|
|
overflow-y: clip !important;
|
|
}
|
|
}
|
|
|
|
${lineCommentStyles}
|
|
|
|
`
|
|
|
|
export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
|
|
return {
|
|
theme: "OpenCode",
|
|
themeType: "system",
|
|
disableLineNumbers: false,
|
|
overflow: "wrap",
|
|
diffStyle: style ?? "unified",
|
|
diffIndicators: "bars",
|
|
lineHoverHighlight: "both",
|
|
disableBackground: false,
|
|
expansionLineCount: 20,
|
|
hunkSeparators: "line-info-basic",
|
|
lineDiffType: style === "split" ? "word-alt" : "none",
|
|
maxLineDiffLength: 1000,
|
|
maxLineLengthForHighlighting: 1000,
|
|
disableFileHeader: true,
|
|
unsafeCSS,
|
|
} as const
|
|
}
|
|
|
|
export const styleVariables = {
|
|
"--diffs-font-family": "var(--font-family-mono)",
|
|
"--diffs-font-size": "var(--font-size-small)",
|
|
"--diffs-line-height": "24px",
|
|
"--diffs-tab-size": 2,
|
|
"--diffs-font-features": "var(--font-family-mono--font-feature-settings)",
|
|
"--diffs-header-font-family": "var(--font-family-sans)",
|
|
"--diffs-gap-block": 0,
|
|
"--diffs-min-number-column-width": "4ch",
|
|
}
|