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
|
// @ts-nocheck
import { preloadMultiFileDiff } from "@pierre/diffs/ssr"
import { createResource, Show } from "solid-js"
import * as mod from "./diff-ssr"
import { createDefaultOptions } from "../pierre"
import { WorkerPoolProvider } from "../context/worker-pool"
import { getWorkerPools } from "../pierre/worker"
import { diff } from "../storybook/fixtures"
const docs = `### Overview
Server-rendered diff hydration component for preloaded Pierre diff output.
Use alongside server routes that preload diffs.
Pair with \`DiffChanges\` for summaries.
### API
- Required: \`before\`, \`after\`, and \`preloadedDiff\` from \`preloadMultiFileDiff\`.
- Optional: \`diffStyle\`, \`annotations\`, \`selectedLines\`, \`commentedLines\`.
### Variants and states
- Unified/split styles (preloaded must match the style used during preload).
### Behavior
- Hydrates pre-rendered diff HTML into a live diff instance.
- Requires a worker pool provider for syntax highlighting.
### Accessibility
- TODO: confirm keyboard behavior from the Pierre diff engine.
### Theming/tokens
- Uses \`data-component="diff"\` with Pierre CSS variables and theme tokens.
`
const load = async () => {
return preloadMultiFileDiff({
oldFile: diff.before,
newFile: diff.after,
options: createDefaultOptions("unified"),
})
}
const loadSplit = async () => {
return preloadMultiFileDiff({
oldFile: diff.before,
newFile: diff.after,
options: createDefaultOptions("split"),
})
}
export default {
title: "UI/DiffSSR",
id: "components-diff-ssr",
component: mod.Diff,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
}
export const Basic = {
render: () => {
const [data] = createResource(load)
return (
<WorkerPoolProvider pools={getWorkerPools()}>
<Show when={data()} fallback={<div>Loading pre-rendered diff...</div>}>
{(preloaded) => (
<div style={{ "max-width": "960px" }}>
<mod.Diff before={diff.before} after={diff.after} diffStyle="unified" preloadedDiff={preloaded()} />
</div>
)}
</Show>
</WorkerPoolProvider>
)
},
}
export const Split = {
render: () => {
const [data] = createResource(loadSplit)
return (
<WorkerPoolProvider pools={getWorkerPools()}>
<Show when={data()} fallback={<div>Loading pre-rendered diff...</div>}>
{(preloaded) => (
<div style={{ "max-width": "960px" }}>
<mod.Diff before={diff.before} after={diff.after} diffStyle="split" preloadedDiff={preloaded()} />
</div>
)}
</Show>
</WorkerPoolProvider>
)
},
}
|
