diff options
Diffstat (limited to 'packages/desktop/src/components/diff.tsx')
| -rw-r--r-- | packages/desktop/src/components/diff.tsx | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/packages/desktop/src/components/diff.tsx b/packages/desktop/src/components/diff.tsx new file mode 100644 index 000000000..4667bbb3a --- /dev/null +++ b/packages/desktop/src/components/diff.tsx @@ -0,0 +1,140 @@ +import { type FileContents, FileDiff, type DiffLineAnnotation } from "@pierre/precision-diffs" + +export interface DiffProps { + before: FileContents + after: FileContents +} + +export function Diff(props: DiffProps) { + let container!: HTMLDivElement + + console.log(props) + + interface ThreadMetadata { + threadId: string + } + + const lineAnnotations: DiffLineAnnotation<ThreadMetadata>[] = [ + { + side: "additions", + // The line number specified for an annotation is the visual line number + // you see in the number column of a diff + lineNumber: 16, + metadata: { threadId: "68b329da9893e34099c7d8ad5cb9c940" }, + }, + ] + + const instance = new FileDiff<ThreadMetadata>({ + // You can provide a 'theme' prop that maps to any + // built in shiki theme or you can register a custom + // theme. We also include 2 custom themes + // + // 'pierre-night' and 'pierre-light + // + // For the rest of the available shiki themes, check out: + // https://shiki.style/themes + theme: "none", + // 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' }, + // When using the 'themes' prop, 'themeType' allows you to force 'dark' + // or 'light' theme, or inherit from the OS ('system') theme. + themeType: "system", + // Disable the line numbers for your diffs, generally not recommended + disableLineNumbers: false, + // Whether code should 'wrap' with long lines or 'scroll'. + overflow: "scroll", + // Normally you shouldn't need this prop, but if you don't provide a + // valid filename or your file doesn't have an extension you may want to + // override the automatic detection. You can specify that language here: + // https://shiki.style/languages + // lang?: SupportedLanguages; + // 'diffStyle' controls whether the diff is presented side by side or + // in a unified (single column) view + diffStyle: "split", + // Line decorators to help highlight changes. + // 'bars' (default): + // Shows some red-ish or green-ish (theme dependent) bars on the left + // edge of relevant lines + // + // 'classic': + // shows '+' characters on additions and '-' characters on deletions + // + // 'none': + // No special diff indicators are shown + diffIndicators: "bars", + // By default green-ish or red-ish background are shown on added and + // deleted lines respectively. Disable that feature here + disableBackground: false, + // Diffs are split up into hunks, this setting customizes what to show + // between each hunk. + // + // 'line-info' (default): + // Shows a bar that tells you how many lines are collapsed. If you are + // using the oldFile/newFile API then you can click those bars to + // expand the content between them + // + // 'metadata': + // Shows the content you'd see in a normal patch file, usually in some + // format like '@@ -60,6 +60,22 @@'. You cannot use these to expand + // hidden content + // + // 'simple': + // Just a subtle bar separator between each hunk + hunkSeparators: "line-info", + // On lines that have both additions and deletions, we can run a + // separate diff check to mark parts of the lines that change. + // 'none': + // Do not show these secondary highlights + // + // 'char': + // Show changes at a per character granularity + // + // 'word': + // Show changes but rounded up to word boundaries + // + // 'word-alt' (default): + // Similar to 'word', however we attempt to minimize single character + // gaps between highlighted changes + lineDiffType: "word-alt", + // If lines exceed these character lengths then we won't perform the + // line lineDiffType check + maxLineDiffLength: 1000, + // If any line in the diff exceeds this value then we won't attempt to + // syntax highlight the diff + maxLineLengthForHighlighting: 1000, + // Enabling this property will hide the file header with file name and + // diff stats. + disableFileHeader: false, + // You can optionally pass a render function for rendering out line + // annotations. Just return the dom node to render + renderAnnotation(annotation: DiffLineAnnotation<ThreadMetadata>): 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 + }, + }) + + // If you ever want to update the options for an instance, simple call + // 'setOptions' with the new options. Bear in mind, this does NOT merge + // existing properties, it's a full replace + instance.setOptions({ + ...instance.options, + theme: "pierre-dark", + themes: undefined, + }) + + // When ready to render, simply call .render with old/new file, optional + // annotations and a container element to hold the diff + instance.render({ + oldFile: props.before, + newFile: props.after, + lineAnnotations, + containerWrapper: container, + }) + + return <div ref={container} /> +} |