@octane-xplat/pager 0.7.0

package/dist/web/Pager.web.tsrx.js

@@ -0,0 +1,337 @@
+import { applyWebProps } from "./platformProps.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { bag4, bagOf, child, clone, drainFrag, forBlock, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, snapshotSpread, template, useEffect, useRef } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings, setAriaAttributeIfChanged } from "octane/internal/client";
+//#region src/Pager.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-pager-page\" role=\"group\" aria-roledescription=\"slide\"></div>");
+var _t$1 = /* @__PURE__ */ template("<div><!></div>");
+var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _key$1 = (item, i) => i;
+function __item$2(item, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	const i = __block.itemIndex;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag4(__s, _root, void 0, _m1, null, void 0);
+	}
+	_b.a = setAriaAttributeIfChanged(`${i + 1} of ${props.items.length}`, _b.a, _b.b, "aria-label");
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, props.renderItem(item, i), "b:a193c343", null, void 0, void 0, void 0, true);
+}
+var _rm$5 = [
+	"s",
+	"p",
+	"o"
+];
+function __then$0(__props, __s, __extra) {
+	const host = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14, _m15, _m16;
+		const _root = clone(_t$1);
+		_m0 = (el) => {
+			host.current = el;
+			applyWebProps(el, props.web);
+		};
+		_m1 = props.id;
+		_m2 = ["vx-pager", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props));
+		_m4 = props.accessibilityRole ?? "group";
+		_m5 = "carousel";
+		_m6 = props.accessibilityLabel;
+		_m7 = props.accessible === false ? true : void 0;
+		_m8 = props.accessibilityHint;
+		_m9 = props.accessibilityValue;
+		_m10 = props.accessibilityState?.disabled;
+		_m11 = props.accessibilityState?.selected;
+		_m12 = props.accessibilityState?.checked;
+		_m13 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m14 = _root;
+		_m15 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"role",
+				_m4
+			],
+			[
+				false,
+				"aria-roledescription",
+				_m5
+			],
+			[
+				false,
+				"aria-label",
+				_m6
+			],
+			[
+				false,
+				"aria-hidden",
+				_m7
+			],
+			[
+				false,
+				"aria-description",
+				_m8
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m9
+			],
+			[
+				false,
+				"aria-disabled",
+				_m10
+			],
+			[
+				false,
+				"aria-selected",
+				_m11
+			],
+			[
+				false,
+				"aria-checked",
+				_m12
+			],
+			[
+				false,
+				"aria-live",
+				_m13
+			]
+		], "b:452923c1", true);
+		markDangerouslySetInnerHTMLChildren(_root);
+		_m16 = child(_root);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: _m6,
+			h: _m7,
+			i: _m8,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: _m12,
+			n: _m13,
+			o: _m14,
+			p: _m15,
+			q: _m16
+		});
+		__s.refFields = _rm$5;
+	} else {
+		{
+			const _v = (el) => {
+				host.current = el;
+				applyWebProps(el, props.web);
+			};
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-pager", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props));
+		{
+			const _v = props.accessibilityRole ?? "group";
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = "carousel";
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.n !== _v) _b.n = _v;
+		}
+		_b.p = bindSignalHostPropSources(__s, _b.p, _b.o, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"role",
+				_b.e
+			],
+			[
+				false,
+				"aria-roledescription",
+				_b.f
+			],
+			[
+				false,
+				"aria-label",
+				_b.g
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.h
+			],
+			[
+				false,
+				"aria-description",
+				_b.i
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.j
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.k
+			],
+			[
+				false,
+				"aria-selected",
+				_b.l
+			],
+			[
+				false,
+				"aria-checked",
+				_b.m
+			],
+			[
+				false,
+				"aria-live",
+				_b.n
+			]
+		], "b:452923c1", true);
+	}
+	forBlock(__s, 1, _b.o, props.items, _key$1, __item$2, 50, [props], null, _b.q, true, "f3hircj");
+}
+function __else$6(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$2);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:8f0f2972", _b.b, true, void 0, true, void 0);
+}
+var Pager = function Pager(props, __s, __extra) {
+	const __block = __s.block;
+	const host = useRef(null, _hs$ + 0);
+	const latest = useRef(props, _hs$ + 1);
+	const current = useRef(props.page ?? props.defaultPage ?? 0, _hs$ + 2);
+	const settle = useRef(null, _hs$ + 3);
+	useEffect(() => {
+		latest.current = props;
+	}, [props], _hs$ + 4);
+	useEffect(() => {
+		const el = host.current;
+		if (!el) return;
+		const onScroll = () => {
+			if (settle.current !== null) clearTimeout(settle.current);
+			settle.current = setTimeout(() => {
+				settle.current = null;
+				const el2 = host.current;
+				if (!el2 || el2.clientWidth === 0) return;
+				const max = Math.max(latest.current.items.length - 1, 0);
+				const next = Math.max(0, Math.min(max, Math.round(el2.scrollLeft / el2.clientWidth)));
+				if (next !== current.current) {
+					current.current = next;
+					latest.current.onPageChange?.(next);
+				}
+			}, 90);
+		};
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			el.removeEventListener("scroll", onScroll);
+			if (settle.current !== null) clearTimeout(settle.current);
+		};
+	}, [], _hs$ + 5);
+	useEffect(() => {
+		const el = host.current;
+		if (!el || current.current <= 0) return;
+		el.scrollLeft = current.current * el.clientWidth;
+	}, [], _hs$ + 6);
+	useEffect(() => {
+		const el = host.current;
+		if (!el || props.page === void 0 || props.page === current.current) return;
+		current.current = props.page;
+		el.scrollTo({
+			left: props.page * el.clientWidth,
+			behavior: "smooth"
+		});
+	}, [props.page], _hs$ + 7);
+	ifBlock(__s, 0, __block.parentNode, props.items.length > 0, __then$0, __else$6, __block.endMarker, [host, props]);
+};
+//#endregion
+export { Pager };

package/dist/web/index.js

@@ -0,0 +1,2 @@
+import { Pager } from "./Pager.web.tsrx.js";
+export { Pager };

package/dist/web/layout-child.web.js

@@ -0,0 +1,47 @@
+//#region src/layout-child.web.ts
+/** The shared contract is "numbers are dips" (RN semantics), but octane's DOM
+*  renderer keeps React's unitless list — lineHeight is unitless there, so
+*  `style={{lineHeight: 40}}` would render a 40× multiplier instead of 40px.
+*  lineHeight is the one unitless-in-React prop that is a length in the
+*  shared vocabulary; force the px suffix. */
+function normStyle(style) {
+	if (style && typeof style.lineHeight === "number") return {
+		...style,
+		lineHeight: style.lineHeight + "px"
+	};
+	return style;
+}
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** Convert parent-layout metadata to CSS on the web leaf. Native's `dock`
+*  attribute has no CSS equivalent and is ignored on web. Grid indices are
+*  zero-based in the shared API, matching NativeScript. */
+function layoutChildProps(props, baseStyle = props.style) {
+	const style = { ...normStyle(baseStyle) };
+	if (props.row !== void 0) style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`;
+	else if (props.rowSpan !== void 0) style.gridRow = `span ${props.rowSpan}`;
+	if (props.col !== void 0) style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`;
+	else if (props.colSpan !== void 0) style.gridColumn = `span ${props.colSpan}`;
+	if (props.left !== void 0) style.left = props.left;
+	if (props.top !== void 0) style.top = props.top;
+	if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
+	if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
+	if (props.alignSelf !== void 0) style.alignSelf = props.alignSelf;
+	if (props.order !== void 0) style.order = props.order;
+	if (props.justifyContent !== void 0) style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) style.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) style.gap = props.gap;
+	if (props.rowGap !== void 0) style.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) style.columnGap = props.columnGap;
+	if (typeof style.lineHeight === "number") style.lineHeight = style.lineHeight + "px";
+	return { style };
+}
+//#endregion
+export { layoutChildProps, normStyle };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "96e85d2a-0522-46fc-bfbf-35a119e135dc",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/platformProps.web.js

@@ -0,0 +1,9 @@
+//#region src/platformProps.web.ts
+/** Apply a web escape-hatch bag after the primitive's standard props. */
+function applyWebProps(el, props) {
+	if (!el || !props) return;
+	for (const [name, value] of Object.entries(props)) if (name.includes("-")) el.setAttribute(name, String(value));
+	else el[name] = value;
+}
+//#endregion
+export { applyWebProps };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@octane-xplat/pager",
+  "version": "0.7.0",
+  "description": "Paged swipe container leaf for Octane xplat — web scroll-snap row + @nativescript-community/ui-pager (ViewPager2 / paging UICollectionView)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "directory": "packages/pager"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "macos": {
+        "types": "./types/index.macos.d.ts",
+        "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"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nativescript-community/ui-pager": "14.1.42"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.1",
+    "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.61",
+    "octane": "0.6.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs"
+  }
+}

package/src/Pager.macos.tsrx

@@ -0,0 +1,7 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { PagerProps } from './props'
+
+/** Explicit placeholder until the AppKit host has a paging surface. */
+export function Pager(_props: PagerProps) @{
+	<label className="vx-unsupported">Pager is unsupported by the AppKit host</label>
+}

package/src/Pager.tsrx

@@ -0,0 +1,231 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { memo, useCallback, useEffect, useRef } from 'octane';
+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';
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		pager: Attributes<typeof NSPager>;
+	}
+}
+
+// @nativescript-community/ui-pager — ViewPager2 on Android, a paging
+// 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);
+
+/** 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;
+}
+
+const cellsByHost = new WeakMap<object, PagerCell>();
+const cellsByPager = new WeakMap<object, Set<PagerCell>>();
+
+/** 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),
+);
+
+function cellFor(host: any): PagerCell {
+	let cell = cellsByHost.get(host);
+	if (!cell) {
+		cell = { host, root: createNativeScriptRoot(host), pager: null, renderItem: null, item: undefined, index: -1 };
+		cellsByHost.set(host, 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 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';
+
+function releasePagerCells(pager: any) {
+	const cells = cellsByPager.get(pager);
+	if (!cells) return;
+	for (const cell of cells) {
+		cellsByHost.delete(cell.host);
+		cell.root.unmount();
+	}
+
+	cellsByPager.delete(pager);
+}
+
+function PagerInner(props: PagerProps) @{
+	const host = useRef<any>(null);
+	// selectedIndex writes the leaf makes itself — 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);
+
+	// 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;
+	}, []);
+
+	const bindCell = (args: any) => {
+		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.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,
+		});
+	};
+
+	const disposeCell = (args: any) => {
+		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();
+		}
+	};
+
+	// 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);
+	}, []);
+
+	// 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);
+		if (target !== undefined && pager.selectedIndex !== target) {
+			suppressEcho.current = true;
+			try {
+				pager.selectedIndex = target;
+			} finally {
+				suppressEcho.current = false;
+			}
+		}
+
+		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}
+	/>
+}
+
+// The pager subtree is memoized on `items` and configuration: the universal
+// driver re-applies props on every render (no value diffing) and a stray
+// `items` write would refresh the whole adapter. Constraint matches
+// 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
+);
+
+/** 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. */
+export function Pager(props: PagerProps) @{
+	@if (props.items.length > 0) {
+		<MemoPager
+			id={props.id}
+			className={props.className}
+			style={props.style}
+			items={props.items}
+			renderItem={props.renderItem}
+			page={props.page}
+			defaultPage={props.defaultPage}
+			onPageChange={props.onPageChange}
+			ios={props.ios}
+			android={props.android}
+			{...layoutChildProps(props)}
+		/>
+	} @else {
+		<>{props.renderEmpty?.()}</>
+	}
+}