|
|
@@ -2,8 +2,9 @@ import {
|
|
|
type FileContents,
|
|
|
FileDiff,
|
|
|
type DiffLineAnnotation,
|
|
|
+ type HunkData,
|
|
|
DiffFileRendererOptions,
|
|
|
- registerCustomTheme,
|
|
|
+ // registerCustomTheme,
|
|
|
} from "@pierre/precision-diffs"
|
|
|
import { ComponentProps, createEffect, splitProps } from "solid-js"
|
|
|
|
|
|
@@ -15,8 +16,7 @@ export type DiffProps<T = {}> = Omit<DiffFileRendererOptions<T>, "themes"> & {
|
|
|
classList?: ComponentProps<"div">["classList"]
|
|
|
}
|
|
|
|
|
|
-// @ts-expect-error
|
|
|
-registerCustomTheme("opencode", () => import("./theme.json"))
|
|
|
+// registerCustomTheme("opencode", () => import("./theme.json"))
|
|
|
|
|
|
// interface ThreadMetadata {
|
|
|
// threadId: string
|
|
|
@@ -49,7 +49,7 @@ export function Diff<T>(props: DiffProps<T>) {
|
|
|
// annotations and a container element to hold the diff
|
|
|
createEffect(() => {
|
|
|
const instance = new FileDiff<T>({
|
|
|
- theme: "opencode",
|
|
|
+ theme: "pierre-light",
|
|
|
// Or can also provide a 'themes' prop, which allows the code to adapt
|
|
|
// to your OS light or dark theme
|
|
|
// themes: { dark: 'pierre-night', light: 'pierre-light' },
|
|
|
@@ -97,7 +97,24 @@ export function Diff<T>(props: DiffProps<T>) {
|
|
|
//
|
|
|
// 'simple':
|
|
|
// Just a subtle bar separator between each hunk
|
|
|
- hunkSeparators: "line-info",
|
|
|
+ // hunkSeparators: "line-info",
|
|
|
+ hunkSeparators(hunkData: HunkData) {
|
|
|
+ const fragment = document.createDocumentFragment()
|
|
|
+ const numCol = document.createElement("div")
|
|
|
+ numCol.textContent = `${hunkData.lines}`
|
|
|
+ numCol.style.position = "sticky"
|
|
|
+ numCol.style.left = "0"
|
|
|
+ numCol.style.backgroundColor = "var(--pjs-bg)"
|
|
|
+ numCol.style.zIndex = "2"
|
|
|
+ fragment.appendChild(numCol)
|
|
|
+ const contentCol = document.createElement("div")
|
|
|
+ contentCol.textContent = "unmodified lines"
|
|
|
+ contentCol.style.position = "sticky"
|
|
|
+ contentCol.style.width = "var(--pjs-column-content-width)"
|
|
|
+ contentCol.style.left = "var(--pjs-column-number-width)"
|
|
|
+ fragment.appendChild(contentCol)
|
|
|
+ return fragment
|
|
|
+ },
|
|
|
// On lines that have both additions and deletions, we can run a
|
|
|
// separate diff check to mark parts of the lines that change.
|
|
|
// 'none':
|
Adam