@octane-xplat/pager 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/pager",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Paged swipe container for Octane xplat — web scroll-snap row + @nativescript-community/ui-pager (ViewPager2 / paging UICollectionView)",
   "keywords": [
     "android",
@@ -24,9 +24,10 @@
     "directory": "packages/pager"
   },
   "files": [
-    "dist",
     "types",
-    "src"
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*"
   ],
   "type": "module",
   "exports": {
@@ -36,9 +37,9 @@
         "default": "./src/index.macos.ts"
       },
       "types": "./types/index.d.ts",
-      "web": "./dist/web/index.js",
-      "native": "./dist/native/index.js",
-      "default": "./dist/native/index.js"
+      "web": "./src/index.web.ts",
+      "native": "./src/index.ts",
+      "default": "./src/index.ts"
     }
   },
   "publishConfig": {
@@ -48,17 +49,20 @@
     "@nativescript-community/ui-pager": "14.1.42"
   },
   "devDependencies": {
-    "@nativescript-community/octane": "0.2.4",
+    "@nativescript-community/octane": "0.2.5",
     "@nativescript/core": "9.1.3",
+    "@octane-xplat/macos-renderer": "0.16.0",
+    "@octane-xplat/ui": "0.16.0",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.11.0",
-    "tsrx-typegen": "0.2.2",
+    "tsrx-typegen": "0.3.1",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },
   "peerDependencies": {
     "@nativescript-community/octane": ">=0.2.1 <1",
     "@nativescript/core": ">=9.1.0 <10",
+    "@octane-xplat/ui": ">=0.6.0 <1",
     "octane": ">=0.6.3 <1"
   },
   "peerDependenciesMeta": {
@@ -70,7 +74,7 @@
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "test:native": "vitest run --config vitest.native.config.mts",
     "typegen": "tsc -p tsconfig.types.json",
     "test:packed": "node tests/packed-consumer.mjs",
     "pack:check": "tsrx-typegen --pack-check"

package/src/Pager.parity.check.ts

@@ -0,0 +1,19 @@
+import type { ParityCheck } from '@octane-xplat/ui/parity/check-helpers'
+import { dims } from '@octane-xplat/ui/parity/check-helpers'
+
+export const CHECKS: ParityCheck[] = [
+
+	{
+		fixture: 'pager-two-pages',
+		targets: ['web', 'ios', 'android'],
+		elements: { pager: 'parity-pager-root', page: 'parity-pager-page' },
+		equal: [
+			'pager.box.w',
+			'pager.box.h',
+			'pager.style.backgroundColor',
+			'page.box.w',
+			'page.box.h',
+		],
+		check: (m) => [dims(m('pager'), 220, 96), dims(m('page'), 220, 96)],
+	}
+]

package/src/Pager.parity.tsrx

@@ -0,0 +1,19 @@
+// Measured parity fixtures — assertions live in Pager.parity.check.ts.
+import { Pager } from './Pager'
+import { View } from '@octane-xplat/ui'
+import type { ParityFixture } from '@octane-xplat/ui/parity'
+
+function PagerFixture() @{
+	<Pager
+		className="parity-pager-root"
+		style={{ width: 220, height: 96, backgroundColor: '#f5f5f5' }}
+		items={[{ key: 'first' }, { key: 'second' }]}
+		renderItem={() => (
+			<View className="parity-pager-page" style={{ width: 220, height: 96 }} />
+		)}
+	/>
+}
+
+export const PARITY: ParityFixture[] = [
+	{ name: 'pager-two-pages', component: 'Pager', renderer: PagerFixture, props: {} },
+]

package/src/Pager.tsrx

@@ -1,24 +1,27 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { memo, useCallback, useEffect, useRef } from 'octane';
+import { memo, useCallback, useEffect, useRef, useState } from 'octane'
+import { registerElement } from '@nativescript-community/octane'
+
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import {
+	createPortal as createUniversalPortal,
+	type UniversalRenderable,
+} from 'octane/universal/native'
+
+import { Pager as NSPager } from '@nativescript-community/ui-pager'
+import { GridLayout } from '@nativescript/core'
+import type { PagerProps } from './props'
 import {
-	NATIVESCRIPT_RENDERER_ID,
-	createNativeScriptRoot,
-	defineUniversalComponent,
-	registerElement,
-} from '@nativescript-community/octane';
-
-import type { Attributes } from '@nativescript-community/octane/intrinsics';
-import type { UniversalRoot } from '@nativescript-community/octane';
-import { Pager as NSPager } from '@nativescript-community/ui-pager';
-import { GridLayout } from '@nativescript/core';
-import type { PagerProps } from './props';
-import { cx } from './cx.mobile';
-import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props.mobile';
-import { layoutChildProps } from './layout-child';
+	applyEscapeProps,
+	nativeAccessibilityRole,
+	nativeAccessibilityState,
+} from './escape-props.mobile'
+
+import { layoutChildProps } from './layout-child'
 
 declare module '@nativescript-community/octane/intrinsics' {
 	interface NativeScriptElements {
-		pager: Attributes<typeof NSPager>;
+		pager: Attributes<typeof NSPager>
 	}
 }
 
@@ -26,166 +29,189 @@ declare module '@nativescript-community/octane/intrinsics' {
 // UICollectionView on iOS. It is a required peer: this leaf sits in the
 // shared native barrel, so every native app must declare the plugin for
 // the /ns/m dev bridge to resolve it under the app root.
-registerElement('pager', NSPager);
+registerElement('pager', NSPager)
 
-/** One recycled page: the host view the plugin's adapter asks for plus the
- *  Octane root mounted into it. Mirrors the driver's ListView cell seam —
- *  ui-pager fires the same `itemLoading`/`itemDisposing` pair. */
-interface PagerCell {
-	host: any;
-	root: UniversalRoot;
-	pager: any;
-	renderItem: any;
-	item: any;
-	index: number;
+function createPortal(children: unknown, target: unknown) {
+	return createUniversalPortal(children as UniversalRenderable, target)
 }
 
-const cellsByHost = new WeakMap<object, PagerCell>();
-const cellsByPager = new WeakMap<object, Set<PagerCell>>();
+/** One recycled page: the adapter-owned host plus the current render data.
+ *  Its content is a portal from Pager's declaring tree. */
+interface PagerCell {
+	host: any
+	pager: any
+	renderItem: any
+	item: any
+	index: number
+}
 
-/** Every page root renders this one component, so rebinds are diffs of the
- *  cell's tree rather than remounts. The renderItem output wraps in a
- *  gridlayout — page content must stay single-root. */
-const PagerCell = defineUniversalComponent(NATIVESCRIPT_RENDERER_ID, (props: any) =>
-	props.renderItem(props.item, props.index),
-);
+const cellsByHost = new WeakMap<object, PagerCell>()
+const cellsByPager = new WeakMap<object, Set<PagerCell>>()
 
 function cellFor(host: any): PagerCell {
-	let cell = cellsByHost.get(host);
+	let cell = cellsByHost.get(host)
 	if (!cell) {
-		cell = { host, root: createNativeScriptRoot(host), pager: null, renderItem: null, item: undefined, index: -1 };
-		cellsByHost.set(host, cell);
+		cell = { host, pager: null, renderItem: null, item: undefined, index: -1 }
+		cellsByHost.set(host, cell)
 	}
 
-	return cell;
+	return cell
 }
 
 /** `createView` runs inside the plugin's adapter — no pager instance in
  *  scope, so the cell is only linked to its pager at `itemLoading` (where
  *  `args.object` is the owner). */
 function createPageHost() {
-	const host = new GridLayout();
-	cellFor(host);
-	return host;
+	const host = new GridLayout()
+	cellFor(host)
+	return host
 }
 
-const PAGER_TEMPLATES = [{ key: 'xplat-page', createView: createPageHost }];
+const PAGER_TEMPLATES = [{ key: 'xplat-page', createView: createPageHost }]
 // The built-in 'default' template stays first in the plugin's internal
 // list, so the selector must name our key — a 'default' entry would match
 // the built-in (an XML string parse, which yields nothing here).
-const selectPageTemplate = () => 'xplat-page';
+const selectPageTemplate = () => 'xplat-page'
 
 function releasePagerCells(pager: any) {
-	const cells = cellsByPager.get(pager);
-	if (!cells) return;
+	const cells = cellsByPager.get(pager)
+	if (!cells) {
+		return
+	}
+
 	for (const cell of cells) {
-		cellsByHost.delete(cell.host);
-		cell.root.unmount();
+		cellsByHost.delete(cell.host)
 	}
 
-	cellsByPager.delete(pager);
+	cellsByPager.delete(pager)
 }
 
 function PagerInner(props: PagerProps) @{
-	const host = useRef<any>(null);
-	// selectedIndex writes the leaf makes itself — the plugin raises
+	const host = useRef<any>(null)
+	const [portalCells, setPortalCells] = useState<PagerCell[]>([])
+	// Track selectedIndex writes across synchronous and delayed echoes.
+	// The plugin raises
 	// 'selectedIndexChange' for script writes exactly as for swipes, and
 	// the driver's auto-mute only covers JSX prop writes, not ours.
-	const suppressEcho = useRef(false);
-	const pageSeeded = useRef(false);
+	const current = useRef(props.page ?? props.defaultPage ?? 0)
+	const pageSeeded = useRef(false)
 
 	// Stable ref identity — an inline closure re-fires ref(null)/ref(v) per
 	// render, which would bounce host.current around the effects below.
 	const bindHost = useCallback((v: any) => {
-		host.current = v;
-	}, []);
+		host.current = v
+	}, [])
 
 	const bindCell = (args: any) => {
-		const cell = cellFor(args.view);
-		cell.pager = args.object;
-		let owned = cellsByPager.get(cell.pager);
+		const cell = cellFor(args.view)
+		cell.pager = args.object
+		let owned = cellsByPager.get(cell.pager)
 		if (!owned) {
-			owned = new Set();
-			cellsByPager.set(cell.pager, owned);
+			owned = new Set()
+			cellsByPager.set(cell.pager, owned)
 		}
 
-		owned.add(cell);
-		const item = args.bindingContext ?? props.items?.[args.index];
-		if (cell.renderItem === props.renderItem && cell.index === args.index && Object.is(cell.item, item)) {
-			return;
+		owned.add(cell)
+		const item = args.bindingContext ?? props.items?.[args.index]
+		if (
+			cell.renderItem === props.renderItem &&
+			cell.index === args.index &&
+			Object.is(cell.item, item)
+		) {
+			return
 		}
 
-		cell.renderItem = props.renderItem;
-		cell.item = item;
-		cell.index = args.index;
-		cell.root.render(PagerCell, {
-			renderItem: (it: any, i: number) => <gridlayout>{props.renderItem(it, i)}</gridlayout>,
-			item,
-			index: args.index,
-		});
-	};
+		cell.renderItem = props.renderItem
+		cell.item = item
+		cell.index = args.index
+		setPortalCells((current) => {
+			const existing = current.some((entry) => entry === cell)
+			return existing ? [...current] : [...current, cell]
+		})
+	}
 
 	const disposeCell = (args: any) => {
-		const cell = args.view && cellsByHost.get(args.view);
+		const cell = args.view && cellsByHost.get(args.view)
 		if (cell) {
-			cellsByHost.delete(args.view);
-			if (cell.pager) cellsByPager.get(cell.pager)?.delete(cell);
-			cell.root.unmount();
+			cellsByHost.delete(args.view)
+			if (cell.pager) {
+				cellsByPager.get(cell.pager)?.delete(cell)
+			}
+
+			setPortalCells((current) => current.filter((entry) => entry !== cell))
 		}
-	};
+	}
 
 	// One-time wiring (mount): the template set + selector are imperative —
 	// as JSX props they would be re-applied on every render. The cleanup
 	// captures the pager so cell roots release after the ref detaches.
 	useEffect(() => {
-		const pager = host.current;
-		if (!pager) return;
-		pager.itemTemplates = PAGER_TEMPLATES;
-		pager.itemTemplateSelector = selectPageTemplate;
-		return () => releasePagerCells(pager);
-	}, []);
+		const pager = host.current
+		if (!pager) {
+			return
+		}
+
+		pager.itemTemplates = PAGER_TEMPLATES
+		pager.itemTemplateSelector = selectPageTemplate
+		return () => releasePagerCells(pager)
+	}, [])
 
 	// Items and the index are imperative writes, not JSX props: `items` must
 	// land before `selectedIndex` (the plugin coerces the index against the
 	// page count — a write ahead of items clamps to -1), and a re-assert
 	// after an items change repairs the plugin's own re-coercion.
 	useEffect(() => {
-		const pager = host.current;
-		if (!pager) return;
-		applyEscapeProps(pager, props);
-		if (pager.items !== props.items) pager.items = props.items;
-		const target = props.page ?? (pageSeeded.current ? undefined : props.defaultPage);
+		const pager = host.current
+		if (!pager) {
+			return
+		}
+
+		applyEscapeProps(pager, props)
+		if (pager.items !== props.items) {
+			pager.items = props.items
+		}
+
+		const target = props.page ?? (pageSeeded.current ? undefined : props.defaultPage)
 		if (target !== undefined && pager.selectedIndex !== target) {
-			suppressEcho.current = true;
-			try {
-				pager.selectedIndex = target;
-			} finally {
-				suppressEcho.current = false;
-			}
+			// Track the coerced target before writing: Android may echo later.
+			current.current = Math.max(0, Math.min(props.items.length - 1, target))
+			pager.selectedIndex = target
 		}
 
-		pageSeeded.current = true;
-	});
-
-	<pager
-		ref={bindHost}
-		id={props.id}
-		{...layoutChildProps(props)}
-		className={cx('vx-pager', props.className)}
-		style={props.style}
-		onItemLoading={bindCell}
-		onItemDisposing={disposeCell}
-		onSelectedIndexChange={(args: any) => {
-			if (!suppressEcho.current) props.onPageChange?.(args.value);
-		}}
-		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
-		accessibilityLabel={props.accessibilityLabel}
-		accessibilityHint={props.accessibilityHint}
-		accessibilityValue={props.accessibilityValue}
-		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
-		accessible={props.accessible}
-		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
-	/>
+		pageSeeded.current = true
+	})
+
+	<>
+		<pager
+			ref={bindHost}
+			id={props.id}
+			{...layoutChildProps(props)}
+			className={['vx-pager', props.className]}
+			onItemLoading={bindCell}
+			onItemDisposing={disposeCell}
+			onSelectedIndexChange={(args: any) => {
+				if (args.value !== current.current) {
+					current.current = args.value
+					props.onPageChange?.(args.value)
+				}
+			}}
+			accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+			accessibilityLabel={props.accessibilityLabel}
+			accessibilityHint={props.accessibilityHint}
+			accessibilityValue={props.accessibilityValue}
+			accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+			accessible={props.accessible}
+			accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+		/>
+		{portalCells.map((cell) =>
+			createPortal(
+				<masonview style={{ display: 'grid' }}>
+					{cell.renderItem?.(cell.item, cell.index)}
+				</masonview>,
+				cell.host,
+			),
+		)}
+	</>
 }
 
 // The pager subtree is memoized on `items` and configuration: the universal
@@ -194,28 +220,54 @@ function PagerInner(props: PagerProps) @{
 // UITableView: `renderItem` should be identity-stable — a fresh closure per
 // render is deliberately not part of the compare. (`PagerInner` must precede
 // this — compiled components are consts, not hoisted functions.)
-const MemoPager = memo(PagerInner, (a, b) =>
-	a.items === b.items &&
-	a.className === b.className &&
-	a.style === b.style &&
-	a.id === b.id &&
-	a.page === b.page &&
-	a.onPageChange === b.onPageChange &&
-	a.ios === b.ios &&
-	a.android === b.android
-);
+const MemoPager = memo(
+	PagerInner,
+	(a, b) =>
+		a.items === b.items &&
+		a.className === b.className &&
+		a.style === b.style &&
+		a.id === b.id &&
+		a.page === b.page &&
+		a.onPageChange === b.onPageChange &&
+		a.ios === b.ios &&
+		a.android === b.android &&
+		a.row === b.row &&
+		a.col === b.col &&
+		a.rowSpan === b.rowSpan &&
+		a.colSpan === b.colSpan &&
+		a.dock === b.dock &&
+		a.left === b.left &&
+		a.top === b.top &&
+		a.flexGrow === b.flexGrow &&
+		a.flexShrink === b.flexShrink &&
+		a.alignSelf === b.alignSelf &&
+		a.order === b.order &&
+		a.accessible === b.accessible &&
+		a.accessibilityRole === b.accessibilityRole &&
+		a.accessibilityLabel === b.accessibilityLabel &&
+		a.accessibilityHint === b.accessibilityHint &&
+		a.accessibilityValue === b.accessibilityValue &&
+		a.accessibilityState === b.accessibilityState &&
+		a.accessibilityLiveRegion === b.accessibilityLiveRegion,
+)
 
 /** Pager — paged horizontal swiping via @nativescript-community/ui-pager
  *  (ViewPager2 / paging UICollectionView), chrome-reset: one full-size cell
  *  per item, no indicator. Pages recycle through `itemTemplates` +
- *  `itemLoading`, each slot hosting its own Octane root — the same cell
- *  machinery the driver builds for `listview`, hand-wired here. */
+ *  `itemLoading`; active cell hosts are portals from the Pager's declaring
+ *  tree, so provider context follows each cell. */
 export function Pager(props: PagerProps) @{
 	@if (props.items.length > 0) {
 		<MemoPager
+			accessible={props.accessible}
+			accessibilityRole={props.accessibilityRole}
+			accessibilityLabel={props.accessibilityLabel}
+			accessibilityHint={props.accessibilityHint}
+			accessibilityValue={props.accessibilityValue}
+			accessibilityState={props.accessibilityState}
+			accessibilityLiveRegion={props.accessibilityLiveRegion}
 			id={props.id}
 			className={props.className}
-			style={props.style}
 			items={props.items}
 			renderItem={props.renderItem}
 			page={props.page}

package/src/Pager.web.tsrx

@@ -17,6 +17,7 @@ export function Pager(props: PagerProps) @{
 	// updated by controlled writes and settled swipes. A scroll that lands
 	// on `current` is programmatic — the settle never reports it.
 	const current = useRef(props.page ?? props.defaultPage ?? 0);
+	const hasItems = props.items.length > 0;
 	const settle = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	useEffect(() => {
@@ -45,17 +46,19 @@ export function Pager(props: PagerProps) @{
 		return () => {
 			el.removeEventListener('scroll', onScroll);
 			if (settle.current !== null) clearTimeout(settle.current);
+			settle.current = null;
 		};
-	}, []);
+	}, [hasItems]);
 
-	// Mount: jump (no animation) to the starting page — an initial position
+	// Each new host: jump (no animation) to the starting page — an initial position
 	// is not a scroll. Runs after the scroll listener attaches so the write
 	// still flows through the tracked-index path.
 	useEffect(() => {
 		const el = host.current;
-		if (!el || current.current <= 0) return;
+		if (!el) return;
+		current.current = props.page ?? current.current;
 		el.scrollLeft = current.current * el.clientWidth;
-	}, []);
+	}, [hasItems]);
 
 	// Controlled writes scroll smoothly. Skipped when the page already
 	// matches `current` — a user swipe that the parent echoes back unchanged