summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--bun.lock12
-rw-r--r--packages/app/package.json3
-rw-r--r--packages/app/src/components/server/server-row.tsx9
-rw-r--r--packages/app/src/pages/session/composer/session-composer-region.tsx9
-rw-r--r--packages/app/src/pages/session/composer/session-question-dock.tsx11
-rw-r--r--packages/app/src/pages/session/composer/session-todo-dock.tsx5
-rw-r--r--packages/ui/src/components/scroll-view.tsx17
-rw-r--r--packages/ui/src/components/text-strikethrough.stories.tsx11
-rw-r--r--packages/ui/src/components/text-strikethrough.tsx12
-rw-r--r--packages/ui/src/pierre/file-find.ts5
-rw-r--r--packages/web/package.json1
-rw-r--r--packages/web/src/components/share/common.tsx13
12 files changed, 41 insertions, 67 deletions
diff --git a/bun.lock b/bun.lock
index 40099dddd..b4bff1e21 100644
--- a/bun.lock
+++ b/bun.lock
@@ -36,9 +36,10 @@
"@solid-primitives/active-element": "2.1.3",
"@solid-primitives/audio": "1.4.2",
"@solid-primitives/event-bus": "1.1.2",
+ "@solid-primitives/event-listener": "2.4.5",
"@solid-primitives/i18n": "2.2.1",
"@solid-primitives/media": "2.3.3",
- "@solid-primitives/resize-observer": "2.1.3",
+ "@solid-primitives/resize-observer": "2.1.5",
"@solid-primitives/scroll": "2.1.3",
"@solid-primitives/storage": "catalog:",
"@solid-primitives/timer": "1.4.4",
@@ -572,6 +573,7 @@
"@astrojs/starlight": "0.34.3",
"@fontsource/ibm-plex-mono": "5.2.5",
"@shikijs/transformers": "3.20.0",
+ "@solid-primitives/resize-observer": "2.1.5",
"@types/luxon": "catalog:",
"ai": "catalog:",
"astro": "5.7.13",
@@ -1934,7 +1936,7 @@
"@solid-primitives/refs": ["@solid-primitives/[email protected]", "", { "dependencies": { "@solid-primitives/utils": "^6.4.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-aam02fjNKpBteewF/UliPSQCVJsIIGOLEWQOh+ll6R/QePzBOOBMcC4G+5jTaO75JuUS1d/14Q1YXT3X0Ow6iA=="],
- "@solid-primitives/resize-observer": ["@solid-primitives/[email protected]", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/static-store": "^0.1.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-zBLje5E06TgOg93S7rGPldmhDnouNGhvfZVKOp+oG2XU8snA+GoCSSCz1M+jpNAg5Ek2EakU5UVQqL152WmdXQ=="],
+ "@solid-primitives/resize-observer": ["@solid-primitives/[email protected]", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.5", "@solid-primitives/rootless": "^1.5.3", "@solid-primitives/static-store": "^0.1.3", "@solid-primitives/utils": "^6.4.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-AiyTknKcNBaKHbcSMuxtSNM8FjIuiSuFyFghdD0TcCMU9hKi9EmsC5pjfjDwxE+5EueB1a+T/34PLRI5vbBbKw=="],
"@solid-primitives/rootless": ["@solid-primitives/[email protected]", "", { "dependencies": { "@solid-primitives/utils": "^6.4.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-N8cIDAHbWcLahNRLr0knAAQvXyEdEMoAZvIMZKmhNb1mlx9e2UOv9BRD5YNwQUJwbNoYVhhLwFOEOcVXFx0HqA=="],
@@ -5212,6 +5214,8 @@
"@jsx-email/doiuse-email/htmlparser2": ["[email protected]", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.1.0", "entities": "^4.5.0" } }, "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ=="],
+ "@kobalte/core/@solid-primitives/resize-observer": ["@solid-primitives/[email protected]", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/static-store": "^0.1.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-zBLje5E06TgOg93S7rGPldmhDnouNGhvfZVKOp+oG2XU8snA+GoCSSCz1M+jpNAg5Ek2EakU5UVQqL152WmdXQ=="],
+
"@malept/flatpak-bundler/fs-extra": ["[email protected]", "", { "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ=="],
"@mdx-js/mdx/source-map": ["[email protected]", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
@@ -5304,6 +5308,8 @@
"@opencode-ai/desktop-electron/typescript": ["[email protected]", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw=="],
+ "@opencode-ai/ui/@solid-primitives/resize-observer": ["@solid-primitives/[email protected]", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/static-store": "^0.1.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-zBLje5E06TgOg93S7rGPldmhDnouNGhvfZVKOp+oG2XU8snA+GoCSSCz1M+jpNAg5Ek2EakU5UVQqL152WmdXQ=="],
+
"@opencode-ai/web/@shikijs/transformers": ["@shikijs/[email protected]", "", { "dependencies": { "@shikijs/core": "3.20.0", "@shikijs/types": "3.20.0" } }, "sha512-PrHHMRr3Q5W1qB/42kJW6laqFyWdhrPF2hNR9qjOm1xcSiAO3hAHo7HaVyHE6pMyevmy3i51O8kuGGXC78uK3g=="],
"@opentui/solid/@babel/core": ["@babel/[email protected]", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.27.3", "@babel/helpers": "^7.27.6", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.0", "@babel/types": "^7.28.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ=="],
@@ -5366,6 +5372,8 @@
"@smithy/util-stream/@smithy/util-utf8": ["@smithy/[email protected]", "", { "dependencies": { "@smithy/util-buffer-from": "^4.2.2", "tslib": "^2.6.2" } }, "sha512-75MeYpjdWRe8M5E3AW0O4Cx3UadweS+cwdXjwYGBW5h/gxxnbeZ877sLPX/ZJA9GVTlL/qG0dXP29JWFCD1Ayw=="],
+ "@solid-primitives/bounds/@solid-primitives/resize-observer": ["@solid-primitives/[email protected]", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/static-store": "^0.1.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-zBLje5E06TgOg93S7rGPldmhDnouNGhvfZVKOp+oG2XU8snA+GoCSSCz1M+jpNAg5Ek2EakU5UVQqL152WmdXQ=="],
+
"@solidjs/start/path-to-regexp": ["[email protected]", "", {}, "sha512-fvU78fIjZ+SBM9YwCknCvKOUKkLVqtWDVctl0s7xIqfmfb38t2TT4ZU2gHm+Z8xGwgW+QWEU3oQSAzIbo89Ggw=="],
"@solidjs/start/shiki": ["[email protected]", "", { "dependencies": { "@shikijs/core": "1.29.2", "@shikijs/engine-javascript": "1.29.2", "@shikijs/engine-oniguruma": "1.29.2", "@shikijs/langs": "1.29.2", "@shikijs/themes": "1.29.2", "@shikijs/types": "1.29.2", "@shikijs/vscode-textmate": "^10.0.1", "@types/hast": "^3.0.4" } }, "sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg=="],
diff --git a/packages/app/package.json b/packages/app/package.json
index 670bec60e..d179e4a52 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -46,9 +46,10 @@
"@solid-primitives/active-element": "2.1.3",
"@solid-primitives/audio": "1.4.2",
"@solid-primitives/event-bus": "1.1.2",
+ "@solid-primitives/event-listener": "2.4.5",
"@solid-primitives/i18n": "2.2.1",
"@solid-primitives/media": "2.3.3",
- "@solid-primitives/resize-observer": "2.1.3",
+ "@solid-primitives/resize-observer": "2.1.5",
"@solid-primitives/scroll": "2.1.3",
"@solid-primitives/storage": "catalog:",
"@solid-primitives/timer": "1.4.4",
diff --git a/packages/app/src/components/server/server-row.tsx b/packages/app/src/components/server/server-row.tsx
index 63a40bac2..d4f68d630 100644
--- a/packages/app/src/components/server/server-row.tsx
+++ b/packages/app/src/components/server/server-row.tsx
@@ -1,11 +1,11 @@
import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
import {
children,
createEffect,
createMemo,
createSignal,
type JSXElement,
- onCleanup,
onMount,
type ParentProps,
Show,
@@ -46,12 +46,9 @@ export function ServerRow(props: ServerRowProps) {
})
onMount(() => {
- check()
if (typeof ResizeObserver !== "function") return
- const observer = new ResizeObserver(check)
- if (nameRef) observer.observe(nameRef)
- if (versionRef) observer.observe(versionRef)
- onCleanup(() => observer.disconnect())
+ createResizeObserver([nameRef, versionRef], check)
+ check()
})
const tooltipValue = () => (
diff --git a/packages/app/src/pages/session/composer/session-composer-region.tsx b/packages/app/src/pages/session/composer/session-composer-region.tsx
index a5263cd74..372adef96 100644
--- a/packages/app/src/pages/session/composer/session-composer-region.tsx
+++ b/packages/app/src/pages/session/composer/session-composer-region.tsx
@@ -13,6 +13,7 @@ import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
import type { SessionComposerState } from "@/pages/session/composer/session-composer-state"
import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
import type { FollowupDraft } from "@/components/prompt-input/submit"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
export function SessionComposerRegion(props: {
state: SessionComposerState
@@ -115,13 +116,9 @@ export function SessionComposerRegion(props: {
createEffect(() => {
const el = store.body
if (!el) return
- const update = () => {
- setStore("height", el.getBoundingClientRect().height)
- }
+ const update = () => setStore("height", el.getBoundingClientRect().height)
+ createResizeObserver(store.body, update)
update()
- const observer = new ResizeObserver(update)
- observer.observe(el)
- onCleanup(() => observer.disconnect())
})
return (
diff --git a/packages/app/src/pages/session/composer/session-question-dock.tsx b/packages/app/src/pages/session/composer/session-question-dock.tsx
index 38974b246..35690030c 100644
--- a/packages/app/src/pages/session/composer/session-question-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-question-dock.tsx
@@ -8,6 +8,8 @@ import { showToast } from "@opencode-ai/ui/toast"
import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
import { useLanguage } from "@/context/language"
import { useSDK } from "@/context/sdk"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
const cache = new Map<string, { tab: number; answers: QuestionAnswer[]; custom: string[]; customOn: boolean[] }>()
@@ -172,17 +174,14 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
}
update()
- window.addEventListener("resize", update)
+
+ makeEventListener(window, "resize", update)
const dock = root?.closest('[data-component="session-prompt-dock"]')
const scroller = document.querySelector(".scroll-view__viewport")
- const observer = new ResizeObserver(update)
- if (dock instanceof HTMLElement) observer.observe(dock)
- if (scroller instanceof HTMLElement) observer.observe(scroller)
+ createResizeObserver([dock, scroller], update)
onCleanup(() => {
- window.removeEventListener("resize", update)
- observer.disconnect()
if (raf !== undefined) cancelAnimationFrame(raf)
})
diff --git a/packages/app/src/pages/session/composer/session-todo-dock.tsx b/packages/app/src/pages/session/composer/session-todo-dock.tsx
index c16ac8399..7928bcc9c 100644
--- a/packages/app/src/pages/session/composer/session-todo-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-todo-dock.tsx
@@ -6,6 +6,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
import { useSpring } from "@opencode-ai/ui/motion-spring"
import { TextReveal } from "@opencode-ai/ui/text-reveal"
import { TextStrikethrough } from "@opencode-ai/ui/text-strikethrough"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
import { Index, createEffect, createMemo, on, onCleanup } from "solid-js"
import { createStore } from "solid-js/store"
import { composerEnabled, composerProbe } from "@/testing/session-composer"
@@ -91,9 +92,7 @@ export function SessionTodoDock(props: {
setStore("height", el.getBoundingClientRect().height)
}
update()
- const observer = new ResizeObserver(update)
- observer.observe(el)
- onCleanup(() => observer.disconnect())
+ createResizeObserver(el, update)
})
createEffect(() => {
diff --git a/packages/ui/src/components/scroll-view.tsx b/packages/ui/src/components/scroll-view.tsx
index 2b58300b9..3ff00f117 100644
--- a/packages/ui/src/components/scroll-view.tsx
+++ b/packages/ui/src/components/scroll-view.tsx
@@ -1,4 +1,5 @@
-import { onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
+import { onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
import { createStore } from "solid-js/store"
import { useI18n } from "../context/i18n"
@@ -97,19 +98,7 @@ export function ScrollView(props: ScrollViewProps) {
local.viewportRef(viewportRef)
}
- const observer = new ResizeObserver(() => {
- updateThumb()
- })
-
- observer.observe(viewportRef)
- // Also observe the first child if possible to catch content changes
- if (viewportRef.firstElementChild) {
- observer.observe(viewportRef.firstElementChild)
- }
-
- onCleanup(() => {
- observer.disconnect()
- })
+ createResizeObserver([viewportRef, viewportRef.firstElementChild], updateThumb)
updateThumb()
})
diff --git a/packages/ui/src/components/text-strikethrough.stories.tsx b/packages/ui/src/components/text-strikethrough.stories.tsx
index 5e86413f9..5ef06dbcf 100644
--- a/packages/ui/src/components/text-strikethrough.stories.tsx
+++ b/packages/ui/src/components/text-strikethrough.stories.tsx
@@ -1,5 +1,6 @@
// @ts-nocheck
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { createSignal, onMount } from "solid-js"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
import { createStore } from "solid-js/store"
import { useSpring } from "./motion-spring"
import { TextStrikethrough } from "./text-strikethrough"
@@ -144,13 +145,7 @@ function VariantF(props: { active: boolean; text: string }) {
}
onMount(measure)
- createEffect(() => {
- const el = containerRef
- if (!el) return
- const observer = new ResizeObserver(measure)
- observer.observe(el)
- onCleanup(() => observer.disconnect())
- })
+ createResizeObserver(() => containerRef, measure)
const clipRight = () => {
const cw = containerWidth()
diff --git a/packages/ui/src/components/text-strikethrough.tsx b/packages/ui/src/components/text-strikethrough.tsx
index aee5e0cbd..958befff6 100644
--- a/packages/ui/src/components/text-strikethrough.tsx
+++ b/packages/ui/src/components/text-strikethrough.tsx
@@ -1,5 +1,6 @@
import type { JSX } from "solid-js"
-import { createEffect, onCleanup, onMount } from "solid-js"
+import { onMount } from "solid-js"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
import { createStore } from "solid-js/store"
import { useSpring } from "./motion-spring"
@@ -33,14 +34,7 @@ export function TextStrikethrough(props: {
}
onMount(measure)
-
- createEffect(() => {
- const el = containerRef
- if (!el) return
- const observer = new ResizeObserver(measure)
- observer.observe(el)
- onCleanup(() => observer.disconnect())
- })
+ createResizeObserver(() => containerRef, measure)
// Revealed pixels from left = progress * textWidth
const revealedPx = () => {
diff --git a/packages/ui/src/pierre/file-find.ts b/packages/ui/src/pierre/file-find.ts
index 692ab3167..841b57edc 100644
--- a/packages/ui/src/pierre/file-find.ts
+++ b/packages/ui/src/pierre/file-find.ts
@@ -1,4 +1,5 @@
import { createEffect, onCleanup, onMount } from "solid-js"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
import { createStore } from "solid-js/store"
export type FindHost = {
@@ -429,12 +430,10 @@ export function createFileFind(opts: CreateFileFindOptions) {
const wrapper = opts.wrapper()
if (!wrapper) return
const root = scrollParent(wrapper) ?? wrapper
- const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => update())
- observer?.observe(root)
+ createResizeObserver(root, update)
onCleanup(() => {
window.removeEventListener("resize", update)
- observer?.disconnect()
})
})
diff --git a/packages/web/package.json b/packages/web/package.json
index ef0d8aa6c..60082740b 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -18,6 +18,7 @@
"@astrojs/starlight": "0.34.3",
"@fontsource/ibm-plex-mono": "5.2.5",
"@shikijs/transformers": "3.20.0",
+ "@solid-primitives/resize-observer": "2.1.5",
"@types/luxon": "catalog:",
"ai": "catalog:",
"astro": "5.7.13",
diff --git a/packages/web/src/components/share/common.tsx b/packages/web/src/components/share/common.tsx
index aebc95537..ad50e425f 100644
--- a/packages/web/src/components/share/common.tsx
+++ b/packages/web/src/components/share/common.tsx
@@ -1,5 +1,6 @@
-import { createContext, createSignal, onCleanup, splitProps, useContext } from "solid-js"
+import { createContext, createSignal, splitProps, useContext } from "solid-js"
import type { JSX } from "solid-js/jsx-runtime"
+import { makeResizeObserver } from "@solid-primitives/resize-observer"
import { IconCheckCircle, IconHashtag } from "../icons"
export type ShareMessages = { locale: string } & Record<string, string>
@@ -87,16 +88,10 @@ export function createOverflow() {
setOverflow(el.scrollHeight > el.clientHeight + 1)
}
- const ro = new ResizeObserver(() => {
- sync()
- })
+ const obs = makeResizeObserver(sync)
+ obs.observe(el)
sync()
- ro.observe(el)
-
- onCleanup(() => {
- ro.disconnect()
- })
},
}
}