1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
import { type FileContents, FileDiff, type DiffLineAnnotation, FileDiffOptions } from "@pierre/precision-diffs"
import { PreloadMultiFileDiffResult } from "@pierre/precision-diffs/ssr"
import { ComponentProps, createEffect, onCleanup, onMount, splitProps } from "solid-js"
import { isServer } from "solid-js/web"
export type DiffProps<T = {}> = FileDiffOptions<T> & {
preloadedDiff?: PreloadMultiFileDiffResult<T>
before: FileContents
after: FileContents
annotations?: DiffLineAnnotation<T>[]
class?: string
classList?: ComponentProps<"div">["classList"]
}
// interface ThreadMetadata {
// threadId: string
// }
export function Diff<T>(props: DiffProps<T>) {
let container!: HTMLDivElement
let fileDiffRef!: HTMLElement
const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
let fileDiffInstance: FileDiff<T> | undefined
const cleanupFunctions: Array<() => void> = []
const defaultOptions: FileDiffOptions<T> = {
theme: "OpenCode",
themeType: "system",
disableLineNumbers: false,
overflow: "wrap",
diffStyle: "unified",
diffIndicators: "bars",
disableBackground: false,
expansionLineCount: 20,
lineDiffType: "word-alt",
maxLineDiffLength: 1000,
maxLineLengthForHighlighting: 1000,
disableFileHeader: true,
}
createEffect(() => {
if (props.preloadedDiff) return
container.innerHTML = ""
if (!fileDiffInstance) {
fileDiffInstance = new FileDiff<T>({
...defaultOptions,
...others,
...(props.preloadedDiff ?? {}),
})
}
fileDiffInstance.render({
oldFile: local.before,
newFile: local.after,
lineAnnotations: local.annotations,
containerWrapper: container,
})
})
onMount(() => {
if (isServer) return
fileDiffInstance = new FileDiff<T>({
...defaultOptions,
// You can optionally pass a render function for rendering out line
// annotations. Just return the dom node to render
// renderAnnotation(annotation: DiffLineAnnotation<T>): HTMLElement {
// // Despite the diff itself being rendered in the shadow dom,
// // annotations are inserted via the web components 'slots' api and you
// // can use all your normal normal css and styling for them
// const element = document.createElement("div")
// element.innerText = annotation.metadata.threadId
// return element
// },
...others,
...(props.preloadedDiff ?? {}),
})
// @ts-expect-error - fileContainer is private but needed for SSR hydration
fileDiffInstance.fileContainer = fileDiffRef
// Hydrate annotation slots with interactive SolidJS components
// if (props.annotations.length > 0 && props.renderAnnotation != null) {
// for (const annotation of props.annotations) {
// const slotName = `annotation-${annotation.side}-${annotation.lineNumber}`;
// const slotElement = fileDiffRef.querySelector(
// `[slot="${slotName}"]`
// ) as HTMLElement;
//
// if (slotElement != null) {
// // Clear the static server-rendered content from the slot
// slotElement.innerHTML = '';
//
// // Mount a fresh SolidJS component into this slot using render().
// // This enables full SolidJS reactivity (signals, effects, etc.)
// const dispose = render(
// () => props.renderAnnotation!(annotation),
// slotElement
// );
// cleanupFunctions.push(dispose);
// }
// }
// }
})
onCleanup(() => {
// Clean up FileDiff event handlers and dispose SolidJS components
fileDiffInstance?.cleanUp()
cleanupFunctions.forEach((dispose) => dispose())
})
return (
<div
data-component="diff"
style={{
"--pjs-font-family": "var(--font-family-mono)",
"--pjs-font-size": "var(--font-size-small)",
"--pjs-line-height": "24px",
"--pjs-tab-size": 2,
"--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
"--pjs-header-font-family": "var(--font-family-sans)",
"--pjs-gap-block": 0,
"--pjs-min-number-column-width": "4ch",
}}
ref={container}
>
<file-diff ref={fileDiffRef} id="ssr-diff">
{/* Only render on server - client hydrates the existing content */}
{isServer && props.preloadedDiff && (
<>
{/* Declarative Shadow DOM - browsers parse this and create a shadow root */}
<template shadowrootmode="open">
<div innerHTML={props.preloadedDiff!.prerenderedHTML} />
</template>
{/* Render static annotation slots on server.
Client will clear these and mount interactive components. */}
{/* <For each={props.annotations}> */}
{/* {(annotation) => { */}
{/* const slotName = `annotation-${annotation.side}-${annotation.lineNumber}` */}
{/* return <div slot={slotName}>{props.renderAnnotation?.(annotation)}</div> */}
{/* }} */}
{/* </For> */}
</>
)}
</file-diff>
</div>
)
}
|
