From ef441d5cffb279727d9dfa17693f0effe30c22f2 Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Tue, 25 Nov 2025 19:59:37 -0600 Subject: [PATCH] chore: cleanup pierre stuff --- .../enterprise/src/routes/share/[shareID].tsx | 16 +--- packages/ui/package.json | 1 + packages/ui/src/components/code.tsx | 19 +---- packages/ui/src/components/diff.tsx | 76 +++++-------------- packages/ui/src/components/pierre.ts | 44 +++++++++++ 5 files changed, 67 insertions(+), 89 deletions(-) create mode 100644 packages/ui/src/components/pierre.ts diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx index 42dd7e957..fd6638a5f 100644 --- a/packages/enterprise/src/routes/share/[shareID].tsx +++ b/packages/enterprise/src/routes/share/[shareID].tsx @@ -7,6 +7,7 @@ import { createEffect, createMemo, ErrorBoundary, For, Match, Show, Switch } fro import { Share } from "~/core/share" import { Logo, Mark } from "@opencode-ai/ui/logo" import { IconButton } from "@opencode-ai/ui/icon-button" +import { createDefaultOptions } from "@opencode-ai/ui/pierre" import { iife } from "@opencode-ai/util/iife" import { Binary } from "@opencode-ai/util/binary" import { NamedError } from "@opencode-ai/util/error" @@ -82,20 +83,7 @@ const getData = query(async (shareID) => { preloadMultiFileDiff({ oldFile: { name: diff.file, contents: diff.before }, newFile: { name: diff.file, contents: diff.after }, - options: { - theme: "OpenCode", - themeType: "system", - disableLineNumbers: false, - overflow: "wrap", - diffStyle: "unified", - diffIndicators: "bars", - disableBackground: false, - expansionLineCount: 20, - lineDiffType: "none", - maxLineDiffLength: 1000, - maxLineLengthForHighlighting: 1000, - disableFileHeader: true, - }, + options: createDefaultOptions("unified"), // annotations, }), ), diff --git a/packages/ui/package.json b/packages/ui/package.json index 2c06c6da0..eb126a6fa 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -4,6 +4,7 @@ "type": "module", "exports": { "./*": "./src/components/*.tsx", + "./pierre": "./src/components/pierre.ts", "./hooks": "./src/hooks/index.ts", "./context": "./src/context/index.ts", "./context/*": "./src/context/*.tsx", diff --git a/packages/ui/src/components/code.tsx b/packages/ui/src/components/code.tsx index a301e34c7..788baf549 100644 --- a/packages/ui/src/components/code.tsx +++ b/packages/ui/src/components/code.tsx @@ -1,5 +1,6 @@ import { type FileContents, File, FileOptions, LineAnnotation } from "@pierre/precision-diffs" import { ComponentProps, createEffect, splitProps } from "solid-js" +import { createDefaultOptions, styleVariables } from "./pierre" export type CodeProps = FileOptions & { file: FileContents @@ -14,12 +15,7 @@ export function Code(props: CodeProps) { createEffect(() => { const instance = new File({ - theme: "OpenCode", - overflow: "wrap", // or 'scroll' - themeType: "system", // 'system', 'light', or 'dark' - disableFileHeader: true, - disableLineNumbers: false, // optional - // lang: 'typescript', // optional - auto-detected from filename if not provided + ...createDefaultOptions("unified"), ...others, }) @@ -34,16 +30,7 @@ export function Code(props: CodeProps) { return (
= FileDiffOptions & { preloadedDiff?: PreloadMultiFileDiffResult @@ -15,6 +16,8 @@ export type DiffProps = FileDiffOptions & { // interface ThreadMetadata { // threadId: string // } +// +// export function Diff(props: DiffProps) { let container!: HTMLDivElement @@ -24,27 +27,12 @@ export function Diff(props: DiffProps) { let fileDiffInstance: FileDiff | undefined const cleanupFunctions: Array<() => void> = [] - const defaultOptions: FileDiffOptions = { - theme: "OpenCode", - themeType: "system", - disableLineNumbers: false, - overflow: "wrap", - diffStyle: "unified", - diffIndicators: "bars", - disableBackground: false, - expansionLineCount: 20, - lineDiffType: props.diffStyle === "split" ? "word-alt" : "none", - maxLineDiffLength: 1000, - maxLineLengthForHighlighting: 1000, - disableFileHeader: true, - } - createEffect(() => { if (props.preloadedDiff) return container.innerHTML = "" if (!fileDiffInstance) { fileDiffInstance = new FileDiff({ - ...defaultOptions, + ...createDefaultOptions(props.diffStyle), ...others, ...(props.preloadedDiff ?? {}), }) @@ -60,22 +48,19 @@ export function Diff(props: DiffProps) { onMount(() => { if (isServer) return fileDiffInstance = new FileDiff({ - ...defaultOptions, - // You can optionally pass a render function for rendering out line - // annotations. Just return the dom node to render - // renderAnnotation(annotation: DiffLineAnnotation): 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 - // }, + ...createDefaultOptions(props.diffStyle), ...others, ...(props.preloadedDiff ?? {}), }) // @ts-expect-error - fileContainer is private but needed for SSR hydration fileDiffInstance.fileContainer = fileDiffRef + fileDiffInstance.hydrate({ + oldFile: local.before, + newFile: local.after, + lineAnnotations: local.annotations, + fileContainer: fileDiffRef, + containerWrapper: container, + }) // Hydrate annotation slots with interactive SolidJS components // if (props.annotations.length > 0 && props.renderAnnotation != null) { @@ -108,38 +93,11 @@ export function Diff(props: DiffProps) { }) return ( -
+
- {/* Only render on server - client hydrates the existing content */} - {isServer && props.preloadedDiff && ( - <> - {/* Declarative Shadow DOM - browsers parse this and create a shadow root */} - - {/* Render static annotation slots on server. - Client will clear these and mount interactive components. */} - {/* */} - {/* {(annotation) => { */} - {/* const slotName = `annotation-${annotation.side}-${annotation.lineNumber}` */} - {/* return
{props.renderAnnotation?.(annotation)}
*/} - {/* }} */} - {/* */} - - )} + + {(preloadedDiff) =>