@octane-xplat/pager 0.15.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/pager",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "description": "Paged swipe container for Octane xplat — web scroll-snap row + @nativescript-community/ui-pager (ViewPager2 / paging UICollectionView)",
   "keywords": [
     "android",
@@ -51,11 +51,11 @@
   "devDependencies": {
     "@nativescript-community/octane": "0.2.5",
     "@nativescript/core": "9.1.3",
-    "@octane-xplat/macos-renderer": "0.15.0",
-    "@octane-xplat/ui": "0.15.0",
+    "@octane-xplat/macos-renderer": "0.16.1",
+    "@octane-xplat/ui": "0.16.1",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.11.0",
-    "tsrx-typegen": "0.3.0",
+    "tsrx-typegen": "0.3.1",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },

package/src/Pager.tsrx

@@ -1,20 +1,27 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { memo, useCallback, useEffect, useRef, useState } 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 {
-	registerElement,
-} from '@nativescript-community/octane';
+	applyEscapeProps,
+	nativeAccessibilityRole,
+	nativeAccessibilityState,
+} from './escape-props.mobile'
 
-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 { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props.mobile';
-import { layoutChildProps } from './layout-child';
+import { layoutChildProps } from './layout-child'
 
 declare module '@nativescript-community/octane/intrinsics' {
 	interface NativeScriptElements {
-		pager: Attributes<typeof NSPager>;
+		pager: Attributes<typeof NSPager>
 	}
 }
 
@@ -22,168 +29,188 @@ 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)
 
 function createPortal(children: unknown, target: unknown) {
-	return createUniversalPortal(children as UniversalRenderable, target);
+	return createUniversalPortal(children as UniversalRenderable, target)
 }
 
 /** One recycled page: the adapter-owned host plus the current render data.
-	 *  Its content is a portal from Pager's declaring tree. */
+ *  Its content is a portal from Pager's declaring tree. */
 interface PagerCell {
-	host: any;
-	pager: any;
-	renderItem: any;
-	item: any;
-	index: number;
+	host: any
+	pager: any
+	renderItem: any
+	item: any
+	index: number
 }
 
-const cellsByHost = new WeakMap<object, PagerCell>();
-const cellsByPager = new WeakMap<object, Set<PagerCell>>();
+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, 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);
+		cellsByHost.delete(cell.host)
 	}
 
-	cellsByPager.delete(pager);
+	cellsByPager.delete(pager)
 }
 
 function PagerInner(props: PagerProps) @{
-	const host = useRef<any>(null);
-	const [portalCells, setPortalCells] = useState<PagerCell[]>([]);
+	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 current = useRef(props.page ?? props.defaultPage ?? 0);
-	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.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 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);
-			setPortalCells((current) => current.filter((entry) => entry !== cell));
+			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) {
 			// 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;
+			current.current = Math.max(0, Math.min(props.items.length - 1, target))
+			pager.selectedIndex = target
 		}
 
-		pageSeeded.current = true;
-	});
+		pageSeeded.current = true
+	})
 
 	<>
-	<pager
-		ref={bindHost}
-		id={props.id}
-		{...layoutChildProps(props)}
-		className={['vx-pager', props.className]}
-		style={props.style}
-		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(
-			<gridlayout>{cell.renderItem?.(cell.item, cell.index)}</gridlayout>,
-			cell.host,
-		),
-	)}
+		<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,
+			),
+		)}
 	</>
 }
 
@@ -193,34 +220,36 @@ 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 &&
-	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
-);
+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
@@ -239,7 +268,6 @@ export function Pager(props: PagerProps) @{
 			accessibilityLiveRegion={props.accessibilityLiveRegion}
 			id={props.id}
 			className={props.className}
-			style={props.style}
 			items={props.items}
 			renderItem={props.renderItem}
 			page={props.page}

package/src/layout-child.ts

@@ -1,57 +1,95 @@
 import type { LayoutChildProps, FlexContainerProps } from './props'
+import { mergeStyle } from './style-merge'
 
 // start/end shorthand → flex-start/flex-end.
 const FLEX_JUSTIFY: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
 const FLEX_ALIGN: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
 
-/** NativeScript reads these attributes from each child view during parent
- *  layout. Values are forwarded with NativeScript's own property names.
- *  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
- *  the host flexboxlayout itself — its own attributes, not child metadata. */
-export function layoutChildProps(props: LayoutChildProps & Partial<FlexContainerProps>) {
-	const result: Record<string, any> = {}
-	for (const key of [
-		'row',
-		'col',
-		'rowSpan',
-		'colSpan',
-		'dock',
-		'left',
-		'top',
-		'flexGrow',
-		'flexShrink',
-		'alignSelf',
-		'order',
-	] as const) {
-		if (props[key] !== undefined) {
-			result[key] = props[key]
+/** Convert parent-layout metadata + the flex-container contract to the CSS
+ *  style bag on the host masonview — mirrors layout-child.web.ts so the same
+ *  component props compile to the same CSS on both targets. `dock` has no
+ *  CSS equivalent on web (ignored there); on native it becomes absolute
+ *  insets. Native adds `position: absolute` for edge-placed children since
+ *  there is no `.vx-absolute > *` stylesheet rule on the mason engine. */
+export function layoutChildProps(
+	props: LayoutChildProps & Partial<FlexContainerProps> & { style?: any },
+	baseStyle = props.style,
+) {
+	const style: Record<string, any> = { ...(typeof baseStyle === 'object' ? baseStyle : {}) }
+	if (props.row !== undefined) {
+		style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`
+	} else if (props.rowSpan !== undefined) {
+		style.gridRow = `span ${props.rowSpan}`
+	}
+
+	if (props.col !== undefined) {
+		style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`
+	} else if (props.colSpan !== undefined) {
+		style.gridColumn = `span ${props.colSpan}`
+	}
+
+	if (props.dock !== undefined) {
+		style.position = style.position ?? 'absolute'
+		if (props.dock === 'left' || props.dock === 'top' || props.dock === 'bottom') {
+			style.left = style.left ?? 0
+		}
+		if (props.dock === 'right' || props.dock === 'top' || props.dock === 'bottom') {
+			style.right = style.right ?? 0
+		}
+		if (props.dock === 'top' || props.dock === 'left' || props.dock === 'right') {
+			style.top = style.top ?? 0
+		}
+		if (props.dock === 'bottom' || props.dock === 'left' || props.dock === 'right') {
+			style.bottom = style.bottom ?? 0
 		}
 	}
 
-	if (props.justifyContent !== undefined) {
-		result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent
+	if (props.left !== undefined) {
+		style.left = props.left
+	}
+	if (props.top !== undefined) {
+		style.top = props.top
+	}
+	if ((props.left !== undefined || props.top !== undefined) && props.dock === undefined) {
+		style.position = style.position ?? 'absolute'
 	}
 
-	if (props.alignItems !== undefined) {
-		result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems
+	if (props.flexGrow !== undefined) {
+		style.flexGrow = props.flexGrow
+	}
+	if (props.flexShrink !== undefined) {
+		style.flexShrink = props.flexShrink
+	}
+	if (props.alignSelf !== undefined) {
+		style.alignSelf = props.alignSelf
+	}
+	if (props.order !== undefined) {
+		style.order = props.order
 	}
 
+	// Flex-container props (View/Row/Pressable hosts) — RN vocabulary on the
+	// element style.
+	if (props.justifyContent !== undefined) {
+		style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent
+	}
+	if (props.alignItems !== undefined) {
+		style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems
+	}
 	if (props.flexWrap !== undefined) {
-		result.flexWrap =
+		style.flexWrap =
 			props.flexWrap === true ? 'wrap' : props.flexWrap === false ? 'nowrap' : props.flexWrap
 	}
-
 	if (props.gap !== undefined) {
-		result.gap = props.gap
+		style.gap = props.gap
 	}
-
 	if (props.rowGap !== undefined) {
-		result.rowGap = props.rowGap
+		style.rowGap = props.rowGap
 	}
-
 	if (props.columnGap !== undefined) {
-		result.columnGap = props.columnGap
+		style.columnGap = props.columnGap
 	}
 
-	return result
+	// A string base is inline CSS — serialize the emitted keys under it so the
+	// authored declarations still win.
+	return { style: typeof baseStyle === 'string' ? mergeStyle(style, baseStyle) : style }
 }

package/src/style-merge.ts

@@ -0,0 +1,59 @@
+const kebab = (key: string) => key.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase())
+
+/** Anything accepted as a style value, including nested arrays. */
+export type StyleInput =
+	| string
+	| Record<string, any>
+	| null
+	| undefined
+	| readonly StyleInput[]
+
+/** Merge component-emitted style defaults under the authored `style` prop.
+ *  Authored keys win; array styles fold in order; a string style is appended
+ *  after the serialized defaults so its declarations override them too. */
+export function mergeStyle(
+	base: Record<string, any>,
+	style?: Record<string, any> | readonly (Record<string, any> | null | undefined)[] | null,
+): Record<string, any>
+export function mergeStyle(
+	base: Record<string, any>,
+	style?: StyleInput,
+): string | Record<string, any>
+export function mergeStyle(
+	base: Record<string, any>,
+	style?: StyleInput,
+): string | Record<string, any> {
+	if (style == null) {
+		return base
+	}
+
+	let obj: Record<string, any> = { ...base }
+	const strings: string[] = []
+	const add = (s: StyleInput) => {
+		if (s == null) {
+			return
+		}
+		if (typeof s === 'string') {
+			strings.push(s)
+		} else if (Array.isArray(s)) {
+			for (const part of s) {
+				add(part)
+			}
+		} else {
+			obj = { ...obj, ...s }
+		}
+	}
+	add(style)
+
+	if (strings.length === 0) {
+		return obj
+	}
+
+	const prefix = Object.entries(obj)
+		.filter(([, v]) => v != null)
+		.map(([k, v]) => `${kebab(k)}:${v}`)
+		.join(';')
+	return [prefix, ...strings].filter(Boolean).join(';')
+}
+
+export type StyleProp = string | Record<string, any> | readonly StyleProp[] | null | undefined