(props: SSRDiffProps<T>)
| 9 | } |
| 10 | |
| 11 | export function Diff<T>(props: SSRDiffProps<T>) { |
| 12 | let container!: HTMLDivElement |
| 13 | let fileDiffRef!: HTMLElement |
| 14 | const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"]) |
| 15 | |
| 16 | let fileDiffInstance: FileDiff<T> | undefined |
| 17 | const cleanupFunctions: Array<() => void> = [] |
| 18 | |
| 19 | onMount(() => { |
| 20 | if (isServer || !props.preloadedDiff) return |
| 21 | fileDiffInstance = new FileDiff<T>({ |
| 22 | ...createDefaultOptions(props.diffStyle), |
| 23 | ...others, |
| 24 | ...props.preloadedDiff, |
| 25 | }) |
| 26 | // @ts-expect-error - fileContainer is private but needed for SSR hydration |
| 27 | fileDiffInstance.fileContainer = fileDiffRef |
| 28 | fileDiffInstance.hydrate({ |
| 29 | oldFile: local.before, |
| 30 | newFile: local.after, |
| 31 | lineAnnotations: local.annotations, |
| 32 | fileContainer: fileDiffRef, |
| 33 | containerWrapper: container, |
| 34 | }) |
| 35 | |
| 36 | // Hydrate annotation slots with interactive SolidJS components |
| 37 | // if (props.annotations.length > 0 && props.renderAnnotation != null) { |
| 38 | // for (const annotation of props.annotations) { |
| 39 | // const slotName = `annotation-${annotation.side}-${annotation.lineNumber}`; |
| 40 | // const slotElement = fileDiffRef.querySelector( |
| 41 | // `[slot="${slotName}"]` |
| 42 | // ) as HTMLElement; |
| 43 | // |
| 44 | // if (slotElement != null) { |
| 45 | // // Clear the static server-rendered content from the slot |
| 46 | // slotElement.innerHTML = ''; |
| 47 | // |
| 48 | // // Mount a fresh SolidJS component into this slot using render(). |
| 49 | // // This enables full SolidJS reactivity (signals, effects, etc.) |
| 50 | // const dispose = render( |
| 51 | // () => props.renderAnnotation!(annotation), |
| 52 | // slotElement |
| 53 | // ); |
| 54 | // cleanupFunctions.push(dispose); |
| 55 | // } |
| 56 | // } |
| 57 | // } |
| 58 | }) |
| 59 | |
| 60 | onCleanup(() => { |
| 61 | // Clean up FileDiff event handlers and dispose SolidJS components |
| 62 | fileDiffInstance?.cleanUp() |
| 63 | cleanupFunctions.forEach((dispose) => dispose()) |
| 64 | }) |
| 65 | |
| 66 | return ( |
| 67 | <div data-component="diff" style={styleVariables} ref={container}> |
| 68 | <file-diff ref={fileDiffRef} id="ssr-diff"> |
nothing calls this directly
no test coverage detected