mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-12-23 10:11:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

chore: cleanup pierre stuff

Browse source
This commit is contained in:
Adam 2025-11-25 19:59:37 -06:00
parent 16a188c524
commit ef441d5cff
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
5 changed files with 67 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/enterprise/src/routes/share/[shareID].tsx
View file

@ -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<any>({
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,
}),
),

1
packages/ui/package.json
View file

@ -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",

19
packages/ui/src/components/code.tsx
View file

@ -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<T = {}> = FileOptions<T> & {
file: FileContents
@ -14,12 +15,7 @@ export function Code<T>(props: CodeProps<T>) {
createEffect(() => {
const instance = new File<T>({
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<T>("unified"),
...others,
})
@ -34,16 +30,7 @@ export function Code<T>(props: CodeProps<T>) {
return (
<div
data-component="code"
style={{
"--pjs-font-family": "var(--font-family-mono)",
"--pjs-font-size": "var(--font-size-small)",
"--pjs-line-height": "24px",
"--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,
"--pjs-min-number-column-width": "4ch",
}}
style={styleVariables}
classList={{
...(local.classList || {}),
[local.class ?? ""]: !!local.class,

76
packages/ui/src/components/diff.tsx
View file

@ -1,7 +1,8 @@
import { type FileContents, FileDiff, type DiffLineAnnotation, FileDiffOptions } from "@pierre/precision-diffs"
import { PreloadMultiFileDiffResult } from "@pierre/precision-diffs/ssr"
import { ComponentProps, createEffect, onCleanup, onMount, splitProps } from "solid-js"
import { ComponentProps, createEffect, onCleanup, onMount, Show, splitProps } from "solid-js"
import { isServer } from "solid-js/web"
import { createDefaultOptions, styleVariables } from "./pierre"
export type DiffProps<T = {}> = FileDiffOptions<T> & {
preloadedDiff?: PreloadMultiFileDiffResult<T>
@ -15,6 +16,8 @@ export type DiffProps<T = {}> = FileDiffOptions<T> & {
// interface ThreadMetadata {
// threadId: string
// }
//
//
export function Diff<T>(props: DiffProps<T>) {
let container!: HTMLDivElement
@ -24,27 +27,12 @@ export function Diff<T>(props: DiffProps<T>) {
let fileDiffInstance: FileDiff<T> | undefined
const cleanupFunctions: Array<() => void> = []
const defaultOptions: FileDiffOptions<T> = {
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<T>({
...defaultOptions,
...createDefaultOptions(props.diffStyle),
...others,
...(props.preloadedDiff ?? {}),
})
@ -60,22 +48,19 @@ export function Diff<T>(props: DiffProps<T>) {
onMount(() => {
if (isServer) return
fileDiffInstance = new FileDiff<T>({
...defaultOptions,
// You can optionally pass a render function for rendering out line
// annotations. Just return the dom node to render
// renderAnnotation(annotation: DiffLineAnnotation<T>): 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<T>(props: DiffProps<T>) {
})
return (
<div
data-component="diff"
style={{
"--pjs-font-family": "var(--font-family-mono)",
"--pjs-font-size": "var(--font-size-small)",
"--pjs-line-height": "24px",
"--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,
"--pjs-min-number-column-width": "4ch",
}}
ref={container}
>
<div data-component="diff" style={styleVariables} ref={container}>
<file-diff ref={fileDiffRef} id="ssr-diff">
{/* Only render on server - client hydrates the existing content */}
{isServer && props.preloadedDiff && (
<>
{/* Declarative Shadow DOM - browsers parse this and create a shadow root */}
<template shadowrootmode="open">
<div innerHTML={props.preloadedDiff!.prerenderedHTML} />
</template>
{/* Render static annotation slots on server.
Client will clear these and mount interactive components. */}
{/* <For each={props.annotations}> */}
{/* {(annotation) => { */}
{/* const slotName = `annotation-${annotation.side}-${annotation.lineNumber}` */}
{/* return <div slot={slotName}>{props.renderAnnotation?.(annotation)}</div> */}
{/* }} */}
{/* </For> */}
</>
)}
<Show when={isServer && props.preloadedDiff}>
{(preloadedDiff) => <template shadowrootmode="open" innerHTML={preloadedDiff().prerenderedHTML} />}
</Show>
</file-diff>
</div>
)

44
packages/ui/src/components/pierre.ts Normal file
View file

@ -0,0 +1,44 @@
import { FileDiffOptions } from "@pierre/precision-diffs"
export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
return {
theme: "OpenCode",
themeType: "system",
disableLineNumbers: false,
overflow: "wrap",
diffStyle: style,
diffIndicators: "bars",
disableBackground: false,
expansionLineCount: 20,
lineDiffType: style === "split" ? "word-alt" : "none",
maxLineDiffLength: 1000,
maxLineLengthForHighlighting: 1000,
disableFileHeader: true,
// hunkSeparators(hunkData: HunkData) {
// const fragment = document.createDocumentFragment()
// const numCol = document.createElement("div")
// numCol.innerHTML = `<svg data-slot="diff-hunk-separator-line-number-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.97978 14.0204L8.62623 13.6668L9.33334 12.9597L9.68689 13.3133L9.33333 13.6668L8.97978 14.0204ZM12 16.3335L12.3535 16.6871L12 17.0406L11.6464 16.687L12 16.3335ZM14.3131 13.3133L14.6667 12.9597L15.3738 13.6668L15.0202 14.0204L14.6667 13.6668L14.3131 13.3133ZM12.5 16.0002V16.5002H11.5V16.0002H12H12.5ZM9.33333 13.6668L9.68689 13.3133L12.3535 15.9799L12 16.3335L11.6464 16.687L8.97978 14.0204L9.33333 13.6668ZM12 16.3335L11.6464 15.9799L14.3131 13.3133L14.6667 13.6668L15.0202 14.0204L12.3535 16.6871L12 16.3335ZM6.5 8.00016V7.50016H8.5V8.00016V8.50016H6.5V8.00016ZM9.5 8.00016V7.50016H11.5V8.00016V8.50016H9.5V8.00016ZM12.5 8.00016V7.50016H14.5V8.00016V8.50016H12.5V8.00016ZM15.5 8.00016V7.50016H17.5V8.00016V8.50016H15.5V8.00016ZM12 10.5002H12.5V16.0002H12H11.5V10.5002H12Z" fill="currentColor"/></svg> `
// numCol.dataset["slot"] = "diff-hunk-separator-line-number"
// fragment.appendChild(numCol)
// const contentCol = document.createElement("div")
// 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
// },
} as const
}
export const styleVariables = {
"--pjs-font-family": "var(--font-family-mono)",
"--pjs-font-size": "var(--font-size-small)",
"--pjs-line-height": "24px",
"--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,
"--pjs-min-number-column-width": "4ch",
}