@octane-xplat/ui 0.7.3 → 0.10.0

package/src/VirtualList.web.test.tsrx

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+import { act, createRoot } from 'octane'
+import { afterEach, expect, it, vi } from 'vitest'
+import { VirtualList } from './VirtualList.web.tsrx'
+import { VirtualListSizeIndex } from './virtual-list-layout'
+
+const roots: ReturnType<typeof createRoot>[] = []
+afterEach(() => {
+	for (const root of roots.splice(0)) act(() => root.unmount())
+	document.body.innerHTML = ''
+	vi.restoreAllMocks()
+	vi.unstubAllGlobals()
+})
+
+it('keeps resize measurements immediate but defers estimate renders beyond microtasks', async () => {
+	let deliver: ResizeObserverCallback
+	const observed = new Set<Element>()
+	vi.stubGlobal('ResizeObserver', class {
+		constructor(callback: ResizeObserverCallback) { deliver = callback }
+		observe(node: Element) { observed.add(node) }
+		unobserve(node: Element) { observed.delete(node) }
+		disconnect() { observed.clear() }
+	})
+
+	let nextFrame = 0
+	const frames = new Map<number, FrameRequestCallback>()
+	vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+		frames.set(++nextFrame, callback)
+		return nextFrame
+	})
+
+	const cancelFrame = vi.fn((id: number) => frames.delete(id))
+	vi.stubGlobal('cancelAnimationFrame', cancelFrame)
+	vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({
+		x: 0, y: 0, width: 100, height: 60, top: 0, bottom: 60, left: 0, right: 100,
+		toJSON() {},
+	}))
+
+	const reset = vi.spyOn(VirtualListSizeIndex.prototype, 'reset')
+	const set = vi.spyOn(VirtualListSizeIndex.prototype, 'set')
+	const host = document.createElement('div')
+	document.body.append(host)
+	const root = createRoot(host)
+	roots.push(root)
+	act(() => root.render(<VirtualList items={Array.from({ length: 100 }, (_, i) => i)}
+		keyExtractor={(i) => i} renderItem={(i) => <div>{i}</div>} />))
+
+	const flushFrame = () => act(() => {
+		const pending = [...frames.values()]
+		frames.clear()
+		for (const callback of pending) callback(0)
+	})
+
+	// Establish the viewport and mounted rows before testing row delivery.
+	const viewport = host.firstElementChild as HTMLElement
+	Object.defineProperties(viewport, { clientWidth: { value: 100 }, clientHeight: { value: 200 } })
+	const record = (target: Element) => ({ target, contentRect: { width: 100, height: 60 } }) as ResizeObserverEntry
+	act(() => deliver!([record(viewport)], {} as ResizeObserver))
+	flushFrame()
+	flushFrame()
+	reset.mockClear()
+	set.mockClear()
+	act(() => deliver!([...observed].filter(node => node !== viewport).map(record), {} as ResizeObserver))
+	expect(set).toHaveBeenCalled()
+	const before = host.innerHTML
+	await Promise.resolve()
+	expect(reset).not.toHaveBeenCalled()
+	expect(host.innerHTML).toBe(before)
+	flushFrame()
+	expect(reset).toHaveBeenCalledTimes(1)
+	// Disposal must cancel both estimate and window work.
+	act(() => deliver!([...observed].filter(node => node !== viewport).map(record), {} as ResizeObserver))
+	expect(frames.size).toBeGreaterThan(0)
+	act(() => root.unmount())
+	await Promise.resolve()
+	expect(cancelFrame).toHaveBeenCalled()
+	const rebuilds = reset.mock.calls.length
+	flushFrame()
+	expect(reset).toHaveBeenCalledTimes(rebuilds)
+})
+
+it('repositions measured cells even when every row remains visible', () => {
+	let deliver: ResizeObserverCallback
+	vi.stubGlobal('ResizeObserver', class {
+		constructor(callback: ResizeObserverCallback) { deliver = callback }
+		observe() {}
+		unobserve() {}
+		disconnect() {}
+	})
+
+	const frames: FrameRequestCallback[] = []
+	vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { frames.push(callback); return frames.length })
+	vi.stubGlobal('cancelAnimationFrame', () => {})
+	vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({
+		x: 0, y: 0, width: 100, height: 32, top: 0, bottom: 32, left: 0, right: 100, toJSON() {},
+	}))
+
+	const host = document.createElement('div')
+	document.body.append(host)
+	const root = createRoot(host)
+	roots.push(root)
+	act(() => root.render(<VirtualList items={[0, 1, 2]} keyExtractor={i => i} renderItem={i => <div>{i}</div>} />))
+	const viewport = host.firstElementChild as HTMLElement
+	Object.defineProperties(viewport, { clientWidth: { value: 100 }, clientHeight: { value: 200 } })
+	act(() => deliver!([{ target: viewport, contentRect: { width: 100, height: 200 } } as ResizeObserverEntry], {} as ResizeObserver))
+	for (let i = 0; i < 4; i++) act(() => {
+		for (const callback of frames.splice(0)) callback(0)
+	})
+
+	const body = host.querySelector('.vx-virtual-list-body') as HTMLElement
+	expect(body.style.height).toBe('96px')
+	expect([...host.querySelectorAll<HTMLElement>('.vx-virtual-list-row')].map(node => node.style.top)).toEqual(['0px', '32px', '64px'])
+})

package/src/VirtualList.web.tsrx

@@ -9,12 +9,15 @@ import {
 	type VirtualListEntry,
 	type VirtualListSizeRecord,
 } from './virtual-list-layout'
+
+import { VirtualListCellPool } from './virtual-list-cell-pool'
+
 import { applyEscapeProps } from './escape-props'
 import { layoutChildProps } from './layout-child.web'
 
 type NodeMeta =
 	| { kind: 'viewport' }
-	| { kind: 'row'; rowKey: string }
+	| { kind: 'row'; rowKey: string; cellId: number; generation: number }
 	| { kind: 'header' }
 	| { kind: 'footer' }
 
@@ -29,8 +32,13 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		() => createVirtualListEntries(props.items, props.keyExtractor, props.getItemType),
 		[props.items, props.keyExtractor, props.getItemType],
 	)
+
 	const [windowVersion, setWindowVersion] = useState(0)
 	const sizeIndexRef = useRef(new VirtualListSizeIndex())
+	const cellsRef = useRef(new VirtualListCellPool<T>())
+	const cellCallbacksRef = useRef(new Map<number, (node: Element | null) => void>())
+	const measuredAssignmentsRef = useRef(new Map<number, number>())
+	const disposedRef = useRef(false)
 	const sizeCacheRef = useRef(new Map<string, VirtualListSizeRecord>())
 	const entriesRef = useRef<VirtualListEntry<T>[]>([])
 	const indexByRowKeyRef = useRef(new Map<string, number>())
@@ -42,9 +50,13 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	const footerHeightRef = useRef(0)
 	const observerRef = useRef<ResizeObserver | null>(null)
 	const estimateScheduledRef = useRef(false)
+	const estimateFrameRef = useRef<number | null>(null)
+	const resizeDeliveryRef = useRef(false)
+	const refreshAfterResizeRef = useRef(false)
 	const nodesBySlotRef = useRef(new Map<string, Element>())
 	const metaByNodeRef = useRef(new WeakMap<Element, NodeMeta>())
 	const rangeRef = useRef({ start: -1, end: -1, top: -1, bottom: -1 })
+	const geometryDirtyRef = useRef(false)
 	const handlersRef = useRef<(meta: NodeMeta, entry: ResizeObserverEntry) => void>(() => {})
 	const hasSeparator = Boolean(props.renderSeparator)
 	const hasSeparatorRef = useRef(hasSeparator)
@@ -61,6 +73,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				entry.rowKey,
 				hasSeparatorRef.current && entry.index < nextEntries.length - 1,
 			)
+
 			activeMeasurements.add(cacheKey)
 		}
 
@@ -74,7 +87,11 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		)
 	}
 
-	if (entries !== entriesRef.current) rebuildLayout(entries, viewportWidthRef.current)
+	if (entries !== entriesRef.current) {
+		const anchor = captureAnchor()
+		rebuildLayout(entries, viewportWidthRef.current)
+		restoreAnchor(anchor)
+	}
 
 	function currentRange() {
 		const listOffset = Math.max(0, scrollOffsetRef.current - headerHeightRef.current)
@@ -87,21 +104,30 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	}
 
 	function refreshWindow() {
+		if (disposedRef.current) return
+		if (resizeDeliveryRef.current) {
+			refreshAfterResizeRef.current = true
+			return
+		}
+
 		const next = currentRange()
 		const previous = rangeRef.current
 		if (
+			geometryDirtyRef.current ||
 			next.start !== previous.start ||
 			next.end !== previous.end ||
 			!sameSize(next.top, previous.top) ||
 			!sameSize(next.bottom, previous.bottom)
 		) {
 			rangeRef.current = next
+			geometryDirtyRef.current = false
 			setWindowVersion((version) => version + 1)
 		}
 	}
 
 	function captureAnchor() {
-		const listOffset = scrollOffsetRef.current - headerHeightRef.current
+		const scrollOffset = scrollRef.current?.scrollTop ?? scrollOffsetRef.current
+		const listOffset = scrollOffset - headerHeightRef.current
 		if (listOffset < 0 || entriesRef.current.length === 0) return null
 
 		const index = sizeIndexRef.current.indexAt(listOffset)
@@ -122,6 +148,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 			0,
 			headerHeightRef.current + sizeIndexRef.current.prefix(index) + anchor.within,
 		)
+
 		if (sameSize(nextOffset, scrollOffsetRef.current)) return
 
 		scrollOffsetRef.current = nextOffset
@@ -131,8 +158,12 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	function scheduleEstimateRebuild() {
 		if (estimateScheduledRef.current) return
 		estimateScheduledRef.current = true
-		Promise.resolve().then(() => {
+		// Measurements and anchor correction are immediate. Defer estimate-driven
+		// DOM writes until the next frame so they run after ResizeObserver delivery.
+		estimateFrameRef.current = requestAnimationFrame(() => {
+			estimateFrameRef.current = null
 			estimateScheduledRef.current = false
+			if (disposedRef.current) return
 			const anchor = captureAnchor()
 			rebuildLayout(entriesRef.current, viewportWidthRef.current)
 			restoreAnchor(anchor)
@@ -141,7 +172,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	}
 
 	function recordRowSize(rowKey: string, width: number, height: number) {
-		if (!Number.isFinite(height) || height < 0) return
+		if (disposedRef.current || !Number.isFinite(height) || height < 0) return
 		const index = indexByRowKeyRef.current.get(rowKey)
 		if (index === undefined) return
 		const entry = entriesRef.current[index]
@@ -153,9 +184,11 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		const anchor = captureAnchor()
 		const delta = sizeIndexRef.current.set(index, height)
 		if (Math.abs(delta) >= 0.5) {
+			geometryDirtyRef.current = true
 			if (anchor && index < anchor.index) restoreAnchor(anchor)
 			refreshWindow()
 		}
+
 		scheduleEstimateRebuild()
 	}
 
@@ -166,12 +199,14 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 			metaByNodeRef.current.delete(previous)
 			nodesBySlotRef.current.delete(slot)
 		}
+
 		if (!node) {
 			if (previous) {
 				observerRef.current?.unobserve(previous)
 				metaByNodeRef.current.delete(previous)
 				nodesBySlotRef.current.delete(slot)
 			}
+
 			return
 		}
 
@@ -180,6 +215,24 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		observerRef.current?.observe(node)
 	}
 
+	function cellCallback(id: number) {
+		let callback = cellCallbacksRef.current.get(id)
+		if (!callback) {
+			callback = (node: Element | null) => {
+				const cell = cellsRef.current.get(id)
+				bindObservedNode('cell:' + id, node, {
+					kind: 'row', rowKey: cell?.entry?.rowKey ?? '', cellId: id, generation: cell?.generation ?? 0,
+				})
+
+				if (!node) cellCallbacksRef.current.delete(id)
+			}
+
+			cellCallbacksRef.current.set(id, callback)
+		}
+
+		return callback
+	}
+
 	handlersRef.current = (meta, entry) => {
 		if (meta.kind === 'viewport') {
 			const width = scrollRef.current?.clientWidth ?? entry.contentRect.width
@@ -192,13 +245,18 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				rebuildLayout(entriesRef.current, width)
 				restoreAnchor(anchor)
 			}
+
 			refreshWindow()
 			return
 		}
 
 		const height = entry.contentRect.height
 		if (meta.kind === 'row') {
-			recordRowSize(meta.rowKey, entry.contentRect.width, height)
+			if (!cellsRef.current.isCurrent(meta.cellId, meta.rowKey, meta.generation)) return
+			// A reused node may have an older ResizeObserver record. Read its
+			// current box after assignment rather than caching the former row.
+			const bounds = entry.target.getBoundingClientRect()
+			recordRowSize(meta.rowKey, bounds.width, bounds.height)
 			return
 		}
 
@@ -213,20 +271,53 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		}
 	}
 
+	useEffect(() => {
+		disposedRef.current = false
+		return () => {
+			disposedRef.current = true
+			if (estimateFrameRef.current !== null) cancelAnimationFrame(estimateFrameRef.current)
+			estimateFrameRef.current = null
+			estimateScheduledRef.current = false
+			cellsRef.current.clear()
+			cellCallbacksRef.current.clear()
+			measuredAssignmentsRef.current.clear()
+			nodesBySlotRef.current.clear()
+			metaByNodeRef.current = new WeakMap()
+		}
+	}, [])
+
 	useEffect(() => {
 		if (typeof ResizeObserver === 'undefined') return
 
+		// Apply measurements and anchor corrections while the previous layout is
+		// still current, but commit the resulting render after ResizeObserver.
+		let frame: number | null = null
 		const observer = new ResizeObserver((records) => {
-			for (const record of records) {
-				const meta = metaByNodeRef.current.get(record.target)
-				if (meta) handlersRef.current(meta, record)
+			resizeDeliveryRef.current = true
+			try {
+				for (const record of records) {
+					const meta = metaByNodeRef.current.get(record.target)
+					if (meta) handlersRef.current(meta, record)
+				}
+			} finally {
+				resizeDeliveryRef.current = false
 			}
+
+			if (!refreshAfterResizeRef.current || frame !== null) return
+			refreshAfterResizeRef.current = false
+			frame = requestAnimationFrame(() => {
+				frame = null
+				refreshWindow()
+			})
 		})
+
 		observerRef.current = observer
 		for (const node of nodesBySlotRef.current.values()) observer.observe(node)
 
 		return () => {
 			observer.disconnect()
+			if (frame !== null) cancelAnimationFrame(frame)
+			refreshAfterResizeRef.current = false
 			observerRef.current = null
 		}
 	}, [])
@@ -240,7 +331,33 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	const range = currentRange()
 	rangeRef.current = range
 	void windowVersion
-	const visibleEntries = entries.slice(range.start, range.end)
+	const cells = cellsRef.current.update(entries.slice(range.start, range.end)).map((cell) => ({
+		...cell, top: cell.entry ? sizeIndexRef.current.prefix(cell.entry.index) : 0,
+	}))
+
+	const contentHeight = sizeIndexRef.current.total
+	for (const cell of cells) {
+		const node = nodesBySlotRef.current.get('cell:' + cell.id)
+		if (node) metaByNodeRef.current.set(node, {
+			kind: 'row', rowKey: cell.entry?.rowKey ?? '', cellId: cell.id, generation: cell.generation,
+		})
+	}
+
+	useEffect(() => {
+		for (const cell of cells) {
+			if (!cell.entry || measuredAssignmentsRef.current.get(cell.id) === cell.generation) continue
+			const node = nodesBySlotRef.current.get('cell:' + cell.id)
+			if (!node || !cellsRef.current.isCurrent(cell.id, cell.entry.rowKey, cell.generation)) continue
+			const bounds = node.getBoundingClientRect()
+			measuredAssignmentsRef.current.set(cell.id, cell.generation)
+			recordRowSize(cell.entry.rowKey, bounds.width, bounds.height)
+		}
+
+		for (const id of measuredAssignmentsRef.current.keys()) {
+			if (!nodesBySlotRef.current.has('cell:' + id)) measuredAssignmentsRef.current.delete(id)
+		}
+	}, [cells])
+
 	const style = {
 		...props.style,
 		minHeight: props.style?.minHeight ?? 0,
@@ -280,26 +397,26 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		{entries.length === 0 ? (
 			props.renderEmpty ? <div className="vx-virtual-list-empty">{props.renderEmpty()}</div> : null
 		) : (
-			<>
-				<div className="vx-virtual-list-spacer" style={{ height: range.top }} aria-hidden="true" />
-				@for (const entry of visibleEntries; key entry.rowKey) {
+			<div className="vx-virtual-list-body" style={{ position: 'relative', height: contentHeight }}>
+				@for (const cell of cells; key cell.id) {
 					<div
-						className="vx-virtual-list-row"
-						data-vx-row="true"
-						ref={(node: any) => bindObservedNode(
-							'row:' + virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1),
-							node,
-							{ kind: 'row', rowKey: entry.rowKey },
-						)}
+						className={cell.entry ? 'vx-virtual-list-cell vx-virtual-list-row' : 'vx-virtual-list-cell'}
+						data-vx-row={cell.entry ? 'true' : undefined}
+						hidden={!cell.entry}
+						style={{ position: 'absolute', top: cell.top, left: 0, width: '100%' }}
+						ref={cellCallback(cell.id)}
 					>
-						<div className="vx-virtual-list-item">{props.renderItem(entry.item, entry.index)}</div>
-						{hasSeparator && entry.index < entries.length - 1 ? (
-							<div className="vx-virtual-list-separator">{props.renderSeparator?.()}</div>
-						) : null}
+						@for (const entry of cell.rows; key entry.rowKey) {
+							<>
+								<div className="vx-virtual-list-item">{props.renderItem(entry.item, entry.index)}</div>
+								{hasSeparator && entry.index < entries.length - 1 ? (
+									<div className="vx-virtual-list-separator">{props.renderSeparator?.()}</div>
+								) : null}
+							</>
+						}
 					</div>
 				}
-				<div className="vx-virtual-list-spacer" style={{ height: range.bottom }} aria-hidden="true" />
-			</>
+			</div>
 		)}
 		{props.renderFooter ? (
 			<div

package/src/VisuallyHidden.macos.tsrx

@@ -0,0 +1,23 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { VisuallyHiddenProps } from './props'
+import { applyEscapeProps } from './escape-props'
+
+/** VisuallyHidden — 1pt opacity-0 container; keeps content in the a11y
+ *  tree while rendering invisible (AppKit hidden views drop from
+ *  VoiceOver; transparent ones stay). */
+export function VisuallyHidden(props: VisuallyHiddenProps) @{
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<flexboxlayout
+		id={props.id}
+		ref={forwardedRef}
+		className="vx-visually-hidden"
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole}
+		accessibilityHint={props.accessibilityHint}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/VisuallyHidden.tsrx

@@ -0,0 +1,28 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { VisuallyHiddenProps } from './props';
+import { applyEscapeProps } from './escape-props';
+
+/** VisuallyHidden — a 1dip, fully transparent container that keeps its
+ *  subtree in the native accessibility tree (opacity:0 views stay exposed
+ *  to TalkBack/VoiceOver, unlike visibility=hidden which drops them on
+ *  iOS). For screen-reader labels and live-region announcements. */
+export function VisuallyHidden(props: VisuallyHiddenProps) @{
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<flexboxlayout
+		id={props.id}
+		ref={forwardedRef}
+		className="vx-visually-hidden"
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={props.accessibilityState as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/VisuallyHidden.web.tsrx

@@ -0,0 +1,32 @@
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { VisuallyHiddenProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { applyWebProps } from './platformProps.web';
+
+/** VisuallyHidden — content stays in the a11y tree / DOM flow but renders
+ *  at a clipped 1px box. No style/className: restyling a hidden node is a
+ *  bug waiting to ship. `as` picks the tag ('span' inline default; 'div'
+ *  for live regions / block announcements). */
+export function VisuallyHidden(props: VisuallyHiddenProps) @{
+	const Tag: any = props.as ?? 'span';
+
+	const forwardedRef = useMemo(() => refList((e: any) => { if (e) { applyEscapeProps(e, props); applyWebProps(e, props.web); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<Tag
+		id={props.id}
+		ref={forwardedRef}
+		className="vx-visually-hidden"
+		role={props.accessibilityRole}
+		aria-label={props.accessibilityLabel}
+		aria-hidden={props.accessible === false ? true : undefined}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+	>
+		{props.children}
+	</Tag>
+}

package/src/WebView.macos.tsrx

@@ -1,6 +1,45 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useImperativeHandle, useRef } from 'octane'
 import type { WebViewProps } from './props'
+import { cx } from './cx'
+import { layoutChildProps } from './layout-child'
 
-export function WebView(_props: WebViewProps) @{
-	<label className="vx-unsupported">WebView is unsupported by the AppKit host</label>
+export function WebView(props: WebViewProps) @{
+	const view = useRef<any>(null)
+	const currentProps = useRef(props)
+	currentProps.current = props
+	useImperativeHandle(props.ref, () => ({
+		reload: () => {
+			if (currentProps.current.html !== undefined) {
+				view.current?.loadHTMLStringBaseURL(currentProps.current.html, null)
+			} else {
+				view.current?.reload()
+			}
+		},
+		goBack: () => view.current?.goBack(),
+		goForward: () => view.current?.goForward(),
+		stopLoading: () => view.current?.stopLoading(),
+		get native() { return view.current },
+	}), [])
+
+	<webview
+		ref={view}
+		id={props.id}
+		{...layoutChildProps(props)}
+		className={cx('vx-webview', props.className)}
+		style={props.style}
+		src={props.src}
+		html={props.html}
+		scrollEnabled={props.scrollEnabled}
+		matchContents={props.matchContents}
+		onLoad={props.onLoad}
+		onError={props.onError}
+		onLayoutContent={props.onLayoutContent}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={props.accessibilityState}
+	/>
 }

package/src/WebView.tsrx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { isAndroid, isIOS } from '@nativescript/core';
-import { useEffect, useRef } from 'octane';
+import { useImperativeHandle, useEffect, useRef } from 'octane';
 import type { WebViewProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
@@ -16,6 +16,7 @@ function reportContentLayout(view: any, props: WebViewProps) {
 	} else if (isAndroid) {
 		height = Number(view?.android?.getContentHeight?.() ?? 0) * Number(view?.android?.getScale?.() ?? 1)
 	}
+
 	if (!Number.isFinite(width) || !Number.isFinite(height) || height <= 0) return
 	props.onLayoutContent?.({ width, height })
 	if (props.matchContents) {
@@ -59,18 +60,19 @@ export function WebView(props: WebViewProps) @{
 		if (props.matchContents && loaded.current) reportContentLayout(v, props);
 	}, [props.scrollEnabled, props.matchContents]);
 
+	useImperativeHandle(props.ref, () => ({
+				reload: () => el.current.reload(),
+				goBack: () => el.current.goBack(),
+				goForward: () => el.current.goForward(),
+				stopLoading: () => el.current.stopLoading(),
+				native: el.current,
+			}), []);
+
 	<webview
 		ref={(v: any) => {
-			el.current = v;
+				el.current = v;
 			if (!v) return;
 			applyEscapeProps(v, props);
-			props.bind?.({
-				reload: () => v.reload(),
-				goBack: () => v.goBack(),
-				goForward: () => v.goForward(),
-				stopLoading: () => v.stopLoading(),
-				native: v,
-			});
 		}}
 		id={props.id}
 		{...layoutChildProps(props)}

package/src/WebView.web.tsrx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'octane'
+import { useImperativeHandle, useEffect, useRef } from 'octane'
 import type { WebViewHandle, WebViewProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
 import { layoutChildProps } from './layout-child.web';
@@ -33,6 +33,7 @@ export function WebView(props: WebViewProps) @{
 		},
 		native: el,
 	});
+
 	useEffect(() => {
 		const el = frame.current;
 		if (!el) return;
@@ -48,6 +49,7 @@ export function WebView(props: WebViewProps) @{
 					width: Math.max(body.scrollWidth, root.scrollWidth),
 					height: Math.max(body.scrollHeight, root.scrollHeight),
 				};
+
 				if (size.width <= 0 || size.height <= 0) return;
 				if (props.matchContents) el.style.height = `${size.height}px`;
 				props.onLayoutContent?.(size);
@@ -62,6 +64,7 @@ export function WebView(props: WebViewProps) @{
 				// Cross-origin documents cannot be inspected by the embedding page.
 			}
 		};
+
 		el.addEventListener('load', measure);
 		measure();
 		return () => {
@@ -70,12 +73,13 @@ export function WebView(props: WebViewProps) @{
 		};
 	}, [props.matchContents, props.onLayoutContent]);
 
+	useImperativeHandle(props.ref, () => handle(frame.current), []);
+
 	<iframe
 		ref={(el: any) => {
-			if (!el) return;
 			frame.current = el;
+			if (!el) return;
 			applyEscapeProps(el, props);
-			props.bind?.(handle(el));
 		}}
 		id={props.id}
 		className={['vx-webview', props.className]}