clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-05-01 02:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify solid reactivity across app and web (#20497)

Browse Source
This commit is contained in:
Shoubhit Dash
2026-04-02 14:44:05 +05:30
committed by GitHub
parent db93891373
commit d540d363a7
8 changed files with 70 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/src/components/Share.tsx
View File

@@ -366,21 +366,13 @@ export default function Share(props: {
<Suspense>
<For each={filteredParts()}>
{(part, partIndex) => {
const last = createMemo(
() =>
data().messages.length === msgIndex() + 1 &&
filteredParts().length === partIndex() + 1,
)
const last = () =>
data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1
onMount(() => {
const hash = window.location.hash.slice(1)
// Wait till all parts are loaded
if (
hash !== "" &&
!hasScrolledToAnchor &&
filteredParts().length === partIndex() + 1 &&
data().messages.length === msgIndex() + 1
) {
if (hash !== "" && !hasScrolledToAnchor && last()) {
hasScrolledToAnchor = true
scrollToAnchor(hash)
}

11
packages/web/src/components/share/common.tsx
View File

@@ -83,12 +83,15 @@ export function createOverflow() {
return overflow()
},
ref(el: HTMLElement) {
const sync = () => {
setOverflow(el.scrollHeight > el.clientHeight + 1)
}
const ro = new ResizeObserver(() => {
if (el.scrollHeight > el.clientHeight + 1) {
setOverflow(true)
}
return
sync()
})
sync()
ro.observe(el)
onCleanup(() => {

47
packages/web/src/components/share/content-diff.tsx
View File

@@ -1,5 +1,5 @@
import { parsePatch } from "diff"
import { createMemo } from "solid-js"
import { createMemo, For } from "solid-js"
import { ContentCode } from "./content-code"
import styles from "./content-diff.module.css"
@@ -160,28 +160,37 @@ export function ContentDiff(props: Props) {
return (
<div class={styles.root}>
<div data-component="desktop">
{rows().map((r) => (
<div data-component="diff-row" data-type={r.type}>
<div data-slot="before" data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}>
<ContentCode code={r.left} flush lang={props.lang} />
<For each={rows()}>
{(row) => (
<div data-component="diff-row" data-type={row.type}>
<div
data-slot="before"
data-diff-type={row.type === "removed" || row.type === "modified" ? "removed" : ""}
>
<ContentCode code={row.left} flush lang={props.lang} />
</div>
<div data-slot="after" data-diff-type={row.type === "added" || row.type === "modified" ? "added" : ""}>
<ContentCode code={row.right} lang={props.lang} flush />
</div>
</div>
<div data-slot="after" data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}>
<ContentCode code={r.right} lang={props.lang} flush />
</div>
</div>
))}
)}
</For>
</div>
<div data-component="mobile">
{mobileRows().map((block) => (
<div data-component="diff-block" data-type={block.type}>
{block.lines.map((line) => (
<div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
<ContentCode code={line} lang={props.lang} flush />
</div>
))}
</div>
))}
<For each={mobileRows()}>
{(block) => (
<div data-component="diff-block" data-type={block.type}>
<For each={block.lines}>
{(line) => (
<div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
<ContentCode code={line} lang={props.lang} flush />
</div>
)}
</For>
</div>
)}
</For>
</div>
</div>
)