@octane-xplat/ui 0.7.3 → 0.9.0

package/src/data-lifecycle.mobile.test.ts

@@ -0,0 +1,251 @@
+import {
+	Profile,
+	SuspenseProfile,
+	NestedProfile,
+	Retained,
+	Reader,
+	sharedSelection$,
+	sharedCalls,
+} from '../tests/data-lifecycle.fixture.mobile.tsrx'
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
+import { type QueryContext } from 'octane/signals'
+
+type Request = {
+	id: string
+	signal: AbortSignal
+	resolve: (value: string) => void
+	reject: (error: Error) => void
+}
+
+function requests() {
+	const calls: Request[] = []
+	const load = (id: string, { signal }: QueryContext<string>) =>
+		new Promise<string>((resolve, reject) => {
+			calls.push({ id, signal, resolve, reject })
+		})
+
+	return { calls, load }
+}
+
+const roots: ReturnType<typeof createUniversalRoot>[] = []
+function mount(Component: any, props: any) {
+	const container = createObjectContainer('nativescript')
+	const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+	roots.push(root)
+	root.render(Component, props)
+	return {
+		root,
+		container,
+		text: () =>
+			container.children
+				.filter((node: any) => node.type === 'label')
+				.map((node: any) => node.props.text),
+	}
+}
+
+async function settle() {
+	for (let i = 0; i < 12; i++) {
+		await Promise.resolve()
+	}
+
+	flushUniversalSync(() => {})
+}
+
+afterEach(() => {
+	for (const root of roots.splice(0)) {
+		root.unmount()
+	}
+})
+
+describe('compiler-owned query lifecycle on universal roots', () => {
+	it('suspends on first data, catches a query error, and retries the boundary', async () => {
+		const { calls, load } = requests()
+		const view = mount(SuspenseProfile, { load })
+		expect(view.text()).toEqual(['pending'])
+		calls[0].reject(new Error('offline'))
+		await settle()
+		expect(view.container.children[0].props.text).toBe('offline')
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[0], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['pending'])
+		expect(calls).toHaveLength(2)
+		calls[1].resolve('recovered')
+		await settle()
+		expect(view.text()).toEqual(['recovered'])
+	})
+
+	it('shares the declaring component query with a child reader', async () => {
+		const { calls, load } = requests()
+		const view = mount(NestedProfile, { load })
+		expect(calls).toHaveLength(1)
+		calls[0].resolve('nested result')
+		await settle()
+		expect(view.text()).toEqual(['ready', 'nested result'])
+		view.root.unmount()
+		expect(view.container.children).toEqual([])
+		const pendingView = mount(NestedProfile, { load })
+		expect(calls).toHaveLength(2)
+		pendingView.root.unmount()
+		expect(calls[1].signal.aborted).toBe(true)
+		calls[1].resolve('after child reader unmounted')
+		await settle()
+		expect(pendingView.container.children).toEqual([])
+	})
+
+	it('isolates stacked instances, retires requests, and ignores late responses', async () => {
+		const { calls, load } = requests()
+		const first = mount(Profile, { id: 'first', load })
+		const second = mount(Profile, { id: 'second', load })
+		expect(calls.map((call) => call.id)).toEqual(['first', 'second'])
+		calls[0].resolve('one')
+		calls[1].resolve('two')
+		await settle()
+		expect(first.text()).toEqual(['first:ready:one:false'])
+		expect(second.text()).toEqual(['second:ready:two:false'])
+		second.root.render(Profile, { id: 'second', nextId: 'third', load })
+		flushUniversalSync(() =>
+			second.container.dispatchEvent(second.container.children[4], 'tap', {}),
+		)
+
+		await settle()
+		expect(calls.map((call) => call.id)).toEqual(['first', 'second', 'third'])
+		second.root.render(Profile, { id: 'second', nextId: 'fourth', load })
+		flushUniversalSync(() =>
+			second.container.dispatchEvent(second.container.children[4], 'tap', {}),
+		)
+
+		await settle()
+		expect(calls[2].signal.aborted).toBe(true)
+		calls[3].resolve('four')
+		await settle()
+		calls[2].resolve('late third')
+		await settle()
+		expect(second.text()).toEqual(['fourth:ready:four:false'])
+		expect(first.text()).toEqual(['first:ready:one:false'])
+		second.root.render(Profile, { id: 'second', nextId: 'fifth', load })
+		flushUniversalSync(() =>
+			second.container.dispatchEvent(second.container.children[4], 'tap', {}),
+		)
+
+		await settle()
+		second.root.unmount()
+		expect(calls[4].signal.aborted).toBe(true)
+		calls[4].resolve('after unmount')
+		await settle()
+		expect(second.container.children).toEqual([])
+	})
+
+	it('reports pending, error, retry, refetch, and reset separately', async () => {
+		const { calls, load } = requests()
+		const view = mount(Profile, { id: 'a', load })
+		expect(view.text()).toEqual(['a:pending:none:false'])
+		calls[0].reject(new Error('offline'))
+		await settle()
+		expect(view.text()).toEqual(['a:error:none:false'])
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[1], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['a:pending:none:false'])
+		calls[1].resolve('one')
+		await settle()
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[2], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['a:ready:one:true'])
+		calls[2].resolve('two')
+		await settle()
+		flushUniversalSync(() => view.container.dispatchEvent(view.container.children[3], 'tap', {}))
+		await settle()
+		expect(view.text()).toEqual(['a:pending:two:false'])
+		calls[3].resolve('three')
+		await settle()
+		expect(view.text()).toEqual(['a:ready:three:false'])
+	})
+
+	it('updates a module signal across roots and disconnects unmounted readers', async () => {
+		const selection$ = sharedSelection$
+		const calls = sharedCalls
+		selection$.set('a')
+		let renders = 0
+		const props = {
+			onRender: () => {
+				renders++
+			},
+		}
+
+		const page = mount(Reader, props)
+		const sheet = mount(Reader, props)
+		const modal = mount(Reader, props)
+		expect(calls).toHaveLength(1)
+		calls[0].resolve('one')
+		await settle()
+		for (const view of [page, sheet, modal]) {
+			expect(view.text()).toEqual(['a:ready:one'])
+		}
+
+		flushUniversalSync(() => selection$.set('b'))
+		await settle()
+		expect(calls).toHaveLength(2)
+		calls[1].resolve('two')
+		await settle()
+		for (const view of [page, sheet, modal]) {
+			expect(view.text()).toEqual(['b:ready:two'])
+		}
+
+		for (const view of [page, sheet, modal]) {
+			view.root.unmount()
+		}
+
+		const before = renders
+		flushUniversalSync(() => selection$.set(''))
+		await settle()
+		expect(renders).toBe(before)
+	})
+
+	it('delivers a tap that re-suspends, hides retained hosts, and reports handler errors', async () => {
+		let resolve!: (value: string) => void
+		const pending = new Promise<string>((done) => {
+			resolve = done
+		})
+
+		const error = new Error('handler failure')
+		const fail = vi.fn(() => {
+			throw error
+		})
+
+		const uncaught = vi.fn()
+		const container = createObjectContainer('nativescript')
+		const root = createUniversalRoot(container, createObjectDriver('nativescript'), {
+			onUncaughtError: uncaught,
+		})
+
+		roots.push(root)
+		root.render(Retained, { pending, fail })
+		const body = container.children[0]
+		expect(body.props.text).toBe('ready')
+		flushUniversalSync(() => container.dispatchEvent(body, 'tap', {}))
+		await settle()
+		expect(container.children[0]).toBe(body)
+		expect(body.visible).toBe(false)
+		expect(container.children[1]).toMatchObject({ props: { text: 'pending' }, visible: true })
+		expect(container.commits.flatMap((batch: any) => batch.commands ?? batch)).toEqual(
+			expect.arrayContaining([expect.objectContaining({ op: 'visibility', state: 'hidden' })]),
+		)
+
+		resolve('resolved')
+		await settle()
+		expect(container.children[0]).toBe(body)
+		expect(body.visible).toBe(true)
+		expect(body.props.text).toBe('resolved')
+		container.dispatchEvent(container.children[1], 'tap', {})
+		await settle()
+		expect(fail).toHaveBeenCalledOnce()
+		expect(uncaught).toHaveBeenCalledWith(error)
+	})
+})

package/src/escape-props.ts

@@ -19,12 +19,14 @@ export function applyEscapeProps(
 	if (!view) {
 		return
 	}
+
 	rememberGridChildPlacement(view, props)
 
 	const bag = isIOS ? props.ios : isAndroid ? props.android : undefined
 	if (bag) {
 		Object.assign(view, bag)
 	}
+
 	applyNativeModifiers(view, props.modifiers)
 }
 

package/src/grid-auto-placement.ts

@@ -12,7 +12,10 @@ export interface GridAutoPlacement {
 }
 
 function gridIndex(value: unknown): number | null {
-	if (value == null || value === '') return null
+	if (value == null || value === '') {
+		return null
+	}
+
 	const index = Number(value)
 	return Number.isInteger(index) && index >= 0 ? index : null
 }
@@ -38,6 +41,7 @@ export function autoPlaceGridChildren(
 		rowSpan: gridSpan(item.rowSpan),
 		colSpan: gridSpan(item.colSpan),
 	}))
+
 	const columnCount = Math.max(
 		1,
 		trackCount(columnTracks),
@@ -46,18 +50,25 @@ export function autoPlaceGridChildren(
 			.map((placement) => placement.col! + placement.colSpan),
 		...placements.map((placement) => placement.colSpan),
 	)
+
 	const occupied = new Set<string>()
 	const isFree = (row: number, col: number, rowSpan: number, colSpan: number) => {
 		for (let y = row; y < row + rowSpan; y++) {
 			for (let x = col; x < col + colSpan; x++) {
-				if (occupied.has(`${y},${x}`)) return false
+				if (occupied.has(`${y},${x}`)) {
+					return false
+				}
 			}
 		}
+
 		return true
 	}
+
 	const occupy = (row: number, col: number, rowSpan: number, colSpan: number) => {
 		for (let y = row; y < row + rowSpan; y++) {
-			for (let x = col; x < col + colSpan; x++) occupied.add(`${y},${x}`)
+			for (let x = col; x < col + colSpan; x++) {
+				occupied.add(`${y},${x}`)
+			}
 		}
 	}
 
@@ -69,17 +80,29 @@ export function autoPlaceGridChildren(
 	}
 
 	for (const placement of placements) {
-		if (placement.row == null || placement.col != null) continue
+		if (placement.row == null || placement.col != null) {
+			continue
+		}
+
 		let col = 0
-		while (!isFree(placement.row, col, placement.rowSpan, placement.colSpan)) col++
+		while (!isFree(placement.row, col, placement.rowSpan, placement.colSpan)) {
+			col++
+		}
+
 		placement.col = col
 		occupy(placement.row, col, placement.rowSpan, placement.colSpan)
 	}
 
 	for (const placement of placements) {
-		if (placement.col == null || placement.row != null) continue
+		if (placement.col == null || placement.row != null) {
+			continue
+		}
+
 		let row = 0
-		while (!isFree(row, placement.col, placement.rowSpan, placement.colSpan)) row++
+		while (!isFree(row, placement.col, placement.rowSpan, placement.colSpan)) {
+			row++
+		}
+
 		placement.row = row
 		occupy(row, placement.col, placement.rowSpan, placement.colSpan)
 	}
@@ -87,16 +110,24 @@ export function autoPlaceGridChildren(
 	let cursorRow = 0
 	let cursorCol = 0
 	for (const placement of placements) {
-		if (placement.row != null && placement.col != null) continue
+		if (placement.row != null && placement.col != null) {
+			continue
+		}
+
 		while (true) {
 			if (cursorCol + placement.colSpan > columnCount) {
 				cursorRow++
 				cursorCol = 0
 				continue
 			}
-			if (isFree(cursorRow, cursorCol, placement.rowSpan, placement.colSpan)) break
+
+			if (isFree(cursorRow, cursorCol, placement.rowSpan, placement.colSpan)) {
+				break
+			}
+
 			cursorCol++
 		}
+
 		placement.row = cursorRow
 		placement.col = cursorCol
 		occupy(cursorRow, cursorCol, placement.rowSpan, placement.colSpan)
@@ -109,13 +140,24 @@ export function autoPlaceGridChildren(
 
 	return {
 		cells: placements.map(({ row, col }) => ({ row: row!, col: col! })),
-		rowCount: Math.max(trackCount(rowTracks), ...placements.map((item) => item.row! + item.rowSpan)),
+		rowCount: Math.max(
+			trackCount(rowTracks),
+			...placements.map((item) => item.row! + item.rowSpan),
+		),
 		columnCount: Math.max(columnCount, ...placements.map((item) => item.col! + item.colSpan)),
 	}
 }
 
 export function ensureGridTracks(spec: string | undefined, requiredCount: number): string {
-	const tracks = spec?.split(',').map((track) => track.trim()).filter(Boolean) ?? []
-	while (tracks.length < requiredCount) tracks.push('auto')
+	const tracks =
+		spec
+			?.split(',')
+			.map((track) => track.trim())
+			.filter(Boolean) ?? []
+
+	while (tracks.length < requiredCount) {
+		tracks.push('auto')
+	}
+
 	return tracks.join(',')
 }

package/src/grid-placement.ts

@@ -25,5 +25,5 @@ export function rememberGridChildPlacement(view: unknown, props: GridChildPlacem
 }
 
 export function gridChildPlacement(view: unknown): GridChildPlacement {
-	return typeof view === 'object' && view !== null ? placements.get(view) ?? {} : {}
+	return typeof view === 'object' && view !== null ? (placements.get(view) ?? {}) : {}
 }

package/src/hosted-unsupported.macos.tsrx

@@ -4,6 +4,7 @@ import type { CameraViewProps, WebViewProps } from './props'
 export function WebView(_props: WebViewProps) @{
 	<label className="vx-unsupported">WebView is unsupported by the AppKit host</label>
 }
+
 export function CameraView(_props: CameraViewProps) @{
 	<label className="vx-unsupported">Camera capture is unsupported by the AppKit host</label>
 }

package/src/index.macos.ts

@@ -8,7 +8,15 @@ export type { PanEvent, SwipeEvent, SetTranslate } from './props'
 export { setTranslate } from './translate.macos'
 export { Text, RichText, RichTextSpan } from './Text.macos.tsrx'
 export { Pressable } from './Pressable.macos.tsrx'
-export { Button, Checkbox, Switch, Slider, SegmentedControl, SearchInput, ActivityIndicator } from './controls.macos.tsrx'
+export {
+	Button,
+	Checkbox,
+	Switch,
+	Slider,
+	SegmentedControl,
+	SearchInput,
+	ActivityIndicator,
+} from './controls.macos.tsrx'
 
 export { Collapsible } from './Collapsible.macos.tsrx'
 export { Accordion } from './Accordion.macos.tsrx'
@@ -50,6 +58,7 @@ export { Drawer } from './Drawer.macos.tsrx'
 
 export { Hoverable } from './Hoverable.tsrx'
 export { Tooltip } from './Tooltip.tsrx'
+export { Markdown, MarkdownScreen } from './Markdown.tsrx'
 export { Link } from './Link.macos.tsrx'
 export { NavLink } from './NavLink.macos.tsrx'
 export { TextInput, TextArea } from './text-controls.macos.tsrx'
@@ -60,14 +69,25 @@ export { WebView, CameraView } from './hosted-unsupported.macos.tsrx'
 export { Overlay, Popover, Sheet } from './surfaces.macos.tsrx'
 export { showToast } from './toast-anchor.macos.tsrx'
 export { useAnimation } from './anim.macos.tsrx'
-export { useThemeScheme, getThemeScheme, setThemePreference, getThemePreference, themeSchemeClasses, onThemeSchemeChange, applyThemeClasses } from './theme/theme-scheme'
+export {
+	useThemeScheme,
+	getThemeScheme,
+	setThemePreference,
+	getThemePreference,
+	themeSchemeClasses,
+	onThemeSchemeChange,
+	applyThemeClasses,
+} from './theme/theme-scheme'
+
 export { useColorScheme, getColorScheme } from './colorScheme.macos'
 export { styled } from './styled.macos.tsrx'
 export { openWindow } from './windows.macos'
 export { Screen } from './Screen.macos.tsrx'
 export { Tabs } from './Tabs.macos.tsrx'
 export type { TabSpec } from './props'
-export { SafeArea, KeyboardAvoiding } from './layout-shells.macos.tsrx'
+export { SafeArea } from './layout-shells.macos.tsrx'
+export { KeyboardAvoiding } from './KeyboardAvoiding.macos.tsrx'
+export type { KeyboardAvoidingProps } from './props'
 export { useSafeAreaInsets } from './safeAreaInsets.macos.tsrx'
 export { useMeasure } from './useMeasure.macos.tsrx'
 export { Meter, Heading } from './macos-extras.macos.tsrx'

package/src/index.mobile.ts

@@ -1,6 +1,5 @@
 export * from './index.shared'
 export { KeyboardAvoiding } from './KeyboardAvoiding.mobile.tsrx'
-export type { KeyboardAvoidingProps } from './props'
 
 // Keep native status-bar icon appearance synced with the effective theme scheme.
 import './theme/status-bar-scheme.mobile'

package/src/index.shared.ts

@@ -9,6 +9,8 @@ export type { PanEvent, SwipeEvent, SetTranslate } from './props'
 export { setTranslate } from './translate'
 export { Spacer } from './Spacer'
 export { Text } from './Text'
+export { Markdown, MarkdownScreen } from './Markdown'
+export type { MdDoc, MdNode, MdInline } from './Markdown'
 export { RichText, RichTextSpan } from './RichText'
 export { Pressable } from './Pressable'
 export { Button } from './Button'
@@ -169,6 +171,7 @@ export { Tabs } from './Tabs'
 export type { TabSpec } from './Tabs'
 export { Switch } from './Switch'
 export { SafeArea } from './SafeArea'
+export { KeyboardAvoiding } from './KeyboardAvoiding'
 export { Drawer } from './Drawer'
 export { useSafeAreaInsets } from './safeAreaInsets'
 export type { SafeAreaInsets } from './safeAreaInsets'
@@ -218,7 +221,13 @@ export {
 
 export { useBackInterceptor } from './use-back'
 
-export { deriveRouteManifest, defineRoutes, mergeRouteManifests } from './route-table'
+export {
+	deriveRouteManifest,
+	defineRoutes,
+	mergeRouteManifests,
+	manifestToJson,
+} from './route-table'
+
 export type {
 	BeforeLoad,
 	BeforeLoadArgs,
@@ -230,8 +239,19 @@ export type {
 	RouteHeadExport,
 	RouteMeta,
 	RouteManifest,
+	RouteManifestJson,
+	RouteJson,
+	RouteDataMode,
+	RouteNameOfPath,
+	RouteParamsFromSpecs,
+	RoutePathParams,
+	RoutePresentationsFromSpecs,
 	RouteSpec,
 	RouteSpecSet,
+	ManifestRouteNames,
+	ManifestRouteParams,
+	ManifestRoutePresentations,
+	SpecRouteInfo,
 	ScreenTable,
 	ModalOpenResult,
 	OpenWindowOptions,
@@ -249,6 +269,7 @@ export type {
 	DrawerProps,
 	GridProps,
 	ImageProps,
+	KeyboardAvoidingProps,
 	LayoutChildProps,
 	PressableProps,
 	RichTextProps,