refactor(reatom): idiomatic withResizeObserver exposing plain Size state

.changeset/reatom-idiomatic-resize-observer.md

@@ -0,0 +1,5 @@
+---
+"create-karkas": patch
+---
+
+Make `withResizeObserver` idiomatic Reatom: expose plain `Size` state (`{ width, height }`) instead of the live `ResizeObserverEntry` platform object, keep state serializable, and rename the derived atom from `sizeEntry` to `size`.

apps/demo/src/shared/reatom/resize-observer.ts

@@ -1,27 +1,37 @@
 import { computed, memo, reatomObservable, wrap, type Atom } from '@reatom/core'
 
+export type Size = { width: number; height: number }
+
 export const withResizeObserver = () => {
 	return (target: Atom<HTMLElement | null>) => {
-		const sizeEntry = computed(() => {
-			const stateAtom = memo(() => {
+		const size = computed<Size | null>(() => {
+			const sizeAtom = memo(() => {
 				const node = target()
 				if (!node) return null
 
-				return reatomObservable<ResizeObserverEntry | undefined>({
-					initState: undefined,
+				return reatomObservable<Size>({
+					initState: null,
 					subscribe: (set) => {
 						const observer = new ResizeObserver(
-							wrap((entries) => set(entries.find((entry) => entry.target === node))),
+							wrap((entries) => {
+								const entry = entries.at(-1)
+								if (entry) {
+									set({
+										width: entry.contentRect.width,
+										height: entry.contentRect.height,
+									})
+								}
+							}),
 						)
 						observer.observe(node)
 						return () => observer.disconnect()
 					},
 				})
 			})
 
-			return stateAtom?.()
-		}, `${target.name}.sizeEntry`)
+			return sizeAtom()
+		}, `${target.name}.size`)
 
-		return { sizeEntry }
+		return { size }
 	}
 }

apps/demo/src/widgets/app-shell/ui/AppShell.tsx

@@ -35,7 +35,7 @@ const desktopSidebarCollapsedAtom = reatomBoolean(false, 'desktopSidebar.collaps
 const measureRefAtom = atom<HTMLElement | null>(null, 'appShell.measureRef').extend(
 	withResizeObserver(),
 	(target) => ({
-		height: computed(() => target.sizeEntry()?.contentRect.height ?? 0, 'appShell.headerHeight'),
+		height: computed(() => target.size()?.height ?? 0, 'appShell.headerHeight'),
 	}),
 )
 

packages/create-karkas/template/src/shared/reatom/resize-observer.ts

@@ -1,27 +1,37 @@
 import { computed, memo, reatomObservable, wrap, type Atom } from '@reatom/core'
 
+export type Size = { width: number; height: number }
+
 export const withResizeObserver = () => {
 	return (target: Atom<HTMLElement | null>) => {
-		const sizeEntry = computed(() => {
-			const stateAtom = memo(() => {
+		const size = computed<Size | null>(() => {
+			const sizeAtom = memo(() => {
 				const node = target()
 				if (!node) return null
 
-				return reatomObservable<ResizeObserverEntry | undefined>({
-					initState: undefined,
+				return reatomObservable<Size>({
+					initState: null,
 					subscribe: (set) => {
 						const observer = new ResizeObserver(
-							wrap((entries) => set(entries.find((entry) => entry.target === node))),
+							wrap((entries) => {
+								const entry = entries.at(-1)
+								if (entry) {
+									set({
+										width: entry.contentRect.width,
+										height: entry.contentRect.height,
+									})
+								}
+							}),
 						)
 						observer.observe(node)
 						return () => observer.disconnect()
 					},
 				})
 			})
 
-			return stateAtom?.()
-		}, `${target.name}.sizeEntry`)
+			return sizeAtom()
+		}, `${target.name}.size`)
 
-		return { sizeEntry }
+		return { size }
 	}
 }

packages/create-karkas/template/src/widgets/app-shell/ui/AppShell.tsx

@@ -35,7 +35,7 @@ const desktopSidebarCollapsedAtom = reatomBoolean(false, 'desktopSidebar.collaps
 const measureRefAtom = atom<HTMLElement | null>(null, 'appShell.measureRef').extend(
 	withResizeObserver(),
 	(target) => ({
-		height: computed(() => target.sizeEntry()?.contentRect.height ?? 0, 'appShell.headerHeight'),
+		height: computed(() => target.size()?.height ?? 0, 'appShell.headerHeight'),
 	}),
 )