@octane-xplat/ui 0.7.2 → 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

@@ -1,20 +1,32 @@
 import { isAndroid, isIOS } from '@nativescript/core'
 import type { NativeModifier, Role } from './props'
 import { applyNativeModifiers } from './apply-native-modifiers.native'
+import { rememberGridChildPlacement } from './grid-placement'
 
 /** Apply only the active device's escape bag after the primitive's own props. */
 export function applyEscapeProps(
 	view: any,
-	props: { ios?: any; android?: any; modifiers?: readonly NativeModifier[] },
+	props: {
+		ios?: any
+		android?: any
+		modifiers?: readonly NativeModifier[]
+		row?: number
+		col?: number
+		rowSpan?: number
+		colSpan?: number
+	},
 ): void {
 	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

@@ -0,0 +1,163 @@
+import type { GridChildPlacement } from './grid-placement'
+
+export interface GridCell {
+	row: number
+	col: number
+}
+
+export interface GridAutoPlacement {
+	cells: GridCell[]
+	rowCount: number
+	columnCount: number
+}
+
+function gridIndex(value: unknown): number | null {
+	if (value == null || value === '') {
+		return null
+	}
+
+	const index = Number(value)
+	return Number.isInteger(index) && index >= 0 ? index : null
+}
+
+function gridSpan(value: unknown): number {
+	const span = Number(value)
+	return Number.isInteger(span) && span > 0 ? span : 1
+}
+
+function trackCount(spec?: string): number {
+	return spec?.split(',').filter((track) => track.trim().length > 0).length ?? 0
+}
+
+/** Match CSS Grid's row-flow placement for NativeScript GridLayout children. */
+export function autoPlaceGridChildren(
+	items: readonly GridChildPlacement[],
+	rowTracks?: string,
+	columnTracks?: string,
+): GridAutoPlacement {
+	const placements = items.map((item) => ({
+		row: gridIndex(item.row),
+		col: gridIndex(item.col),
+		rowSpan: gridSpan(item.rowSpan),
+		colSpan: gridSpan(item.colSpan),
+	}))
+
+	const columnCount = Math.max(
+		1,
+		trackCount(columnTracks),
+		...placements
+			.filter((placement) => placement.col != null)
+			.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
+				}
+			}
+		}
+
+		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}`)
+			}
+		}
+	}
+
+	// Definite placements reserve their cells before automatic items flow.
+	for (const placement of placements) {
+		if (placement.row != null && placement.col != null) {
+			occupy(placement.row, placement.col, placement.rowSpan, placement.colSpan)
+		}
+	}
+
+	for (const placement of placements) {
+		if (placement.row == null || placement.col != null) {
+			continue
+		}
+
+		let col = 0
+		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
+		}
+
+		let row = 0
+		while (!isFree(row, placement.col, placement.rowSpan, placement.colSpan)) {
+			row++
+		}
+
+		placement.row = row
+		occupy(row, placement.col, placement.rowSpan, placement.colSpan)
+	}
+
+	let cursorRow = 0
+	let cursorCol = 0
+	for (const placement of placements) {
+		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
+			}
+
+			cursorCol++
+		}
+
+		placement.row = cursorRow
+		placement.col = cursorCol
+		occupy(cursorRow, cursorCol, placement.rowSpan, placement.colSpan)
+		cursorCol += placement.colSpan
+		if (cursorCol >= columnCount) {
+			cursorRow++
+			cursorCol = 0
+		}
+	}
+
+	return {
+		cells: placements.map(({ row, col }) => ({ row: row!, col: col! })),
+		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')
+	}
+
+	return tracks.join(',')
+}

package/src/grid-placement.ts

@@ -0,0 +1,29 @@
+import type { LayoutChildProps } from './props'
+
+export type GridChildPlacement = Pick<LayoutChildProps, 'row' | 'col' | 'rowSpan' | 'colSpan'>
+
+const placements = new WeakMap<object, GridChildPlacement>()
+
+/** Keep the authored Grid placement next to its mounted NativeScript view. */
+export function rememberGridChildPlacement(view: unknown, props: GridChildPlacement): void {
+	if ((typeof view !== 'object' || view === null) && typeof view !== 'function') {
+		return
+	}
+
+	const placement: GridChildPlacement = {}
+	for (const key of ['row', 'col', 'rowSpan', 'colSpan'] as const) {
+		if (props[key] !== undefined) {
+			placement[key] = props[key]
+		}
+	}
+
+	if (Object.keys(placement).length) {
+		placements.set(view as object, placement)
+	} else {
+		placements.delete(view as object)
+	}
+}
+
+export function gridChildPlacement(view: unknown): GridChildPlacement {
+	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,