use solid-primitives/resize-observer across web code (#20613)

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