use solid-primitives/resize-observer across web code

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

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 = () => (

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 (

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)
  })
 

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(() => {

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()
  })

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()

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 = () => {

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()
  })
  })
 

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

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