diff options
| author | David Hill <[email protected]> | 2025-10-30 22:53:00 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2025-10-30 22:53:00 +0000 |
| commit | 2f9f189f390401b3314c74bd9f83e64b2420cd65 (patch) | |
| tree | b275ca785719a54115752a79d4b66984ba125670 /packages/ui/src/components/diff.tsx | |
| parent | f3c70f4ea8818bde5b1228482f72af9b10c71796 (diff) | |
| parent | a3ba740de41eb1e4825a99dc8f519e1225357e55 (diff) | |
| download | opencode-2f9f189f390401b3314c74bd9f83e64b2420cd65.tar.gz opencode-2f9f189f390401b3314c74bd9f83e64b2420cd65.zip | |
Merge branch 'dev' of https://github.com/sst/opencode into dev
Diffstat (limited to 'packages/ui/src/components/diff.tsx')
| -rw-r--r-- | packages/ui/src/components/diff.tsx | 17 |
1 files changed, 8 insertions, 9 deletions
diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx index 731b1bfe0..e9e46d6b0 100644 --- a/packages/ui/src/components/diff.tsx +++ b/packages/ui/src/components/diff.tsx @@ -3,12 +3,12 @@ import { FileDiff, type DiffLineAnnotation, type HunkData, - DiffFileRendererOptions, + FileDiffOptions, // registerCustomTheme, } from "@pierre/precision-diffs" import { ComponentProps, createEffect, splitProps } from "solid-js" -export type DiffProps<T = {}> = Omit<DiffFileRendererOptions<T>, "themes"> & { +export type DiffProps<T = {}> = FileDiffOptions<T> & { before: FileContents after: FileContents annotations?: DiffLineAnnotation<T>[] @@ -54,13 +54,9 @@ export function Diff<T>(props: DiffProps<T>) { // When ready to render, simply call .render with old/new file, optional // annotations and a container element to hold the diff createEffect(() => { - // @ts-expect-error const instance = new FileDiff<T>({ // theme: "pierre-light", - // 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-dark", light: "pierre-light" }, + theme: { dark: "pierre-dark", 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", @@ -113,8 +109,11 @@ export function Diff<T>(props: DiffProps<T>) { numCol.dataset["slot"] = "diff-hunk-separator-line-number" fragment.appendChild(numCol) const contentCol = document.createElement("div") - contentCol.textContent = `${hunkData.lines} unmodified lines` contentCol.dataset["slot"] = "diff-hunk-separator-content" + const span = document.createElement("span") + span.dataset["slot"] = "diff-hunk-separator-content-span" + span.textContent = `${hunkData.lines} unmodified lines` + contentCol.appendChild(span) fragment.appendChild(contentCol) return fragment }, @@ -170,7 +169,7 @@ export function Diff<T>(props: DiffProps<T>) { "--pjs-font-family": "var(--font-family-mono)", "--pjs-font-size": "var(--font-size-small)", "--pjs-line-height": "24px", - "--pjs-tab-size": 4, + "--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, |