react-native-screen-transitions 3.6.0-alpha.1 → 3.6.0-alpha.2

package/src/shared/stores/bounds/internals/entries.ts

@@ -1,23 +1,64 @@
-import {
-	applyEntryPatch,
-	ensureScreenEntry,
-	findMatchingScreenEntry,
-} from "../helpers/entries.helpers";
-import { ensureTagState, pruneTagState } from "../helpers/tag-state.helpers";
+import { hasAnyKeys } from "../helpers/keys";
 import type { EntryPatch, ScreenEntry, ScreenKey, TagID } from "../types";
-import { type RegistryState, registry } from "./state";
+import { type BoundaryEntriesState, boundaryRegistry } from "./state";
+
+const ensureBoundaryState = (state: BoundaryEntriesState, tag: TagID) => {
+	"worklet";
+	if (!state[tag]) {
+		state[tag] = {
+			screens: {},
+		};
+	}
+	return state[tag];
+};
+
+const ensureScreenEntry = (
+	state: BoundaryEntriesState,
+	tag: TagID,
+	screenKey: ScreenKey,
+): ScreenEntry => {
+	"worklet";
+	const tagState = ensureBoundaryState(state, tag);
+	if (!tagState.screens[screenKey]) {
+		tagState.screens[screenKey] = {
+			bounds: null,
+			styles: {},
+		};
+	}
+	return tagState.screens[screenKey];
+};
+
+const applyEntryPatch = (entry: ScreenEntry, patch: EntryPatch) => {
+	"worklet";
+	if (patch.bounds !== undefined) {
+		entry.bounds = patch.bounds;
+	}
+
+	if (patch.styles !== undefined) {
+		entry.styles = patch.styles ?? {};
+	}
+
+	if (patch.boundaryConfig === undefined) {
+		return;
+	}
+
+	if (patch.boundaryConfig === null) {
+		delete entry.boundaryConfig;
+	} else {
+		entry.boundaryConfig = patch.boundaryConfig;
+	}
+};
 
 function getEntry(tag: TagID, key: ScreenKey): ScreenEntry | null {
 	"worklet";
-	return findMatchingScreenEntry(registry.get()[tag], key);
+	return boundaryRegistry.get()[tag]?.screens[key] ?? null;
 }
 
 function setEntry(tag: TagID, screenKey: ScreenKey, patch: EntryPatch) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
 		"worklet";
-		const tagState = ensureTagState(state, tag);
-		const entry = ensureScreenEntry(tagState, screenKey);
+		const entry = ensureScreenEntry(state, tag, screenKey);
 		applyEntryPatch(entry, patch);
 		return state;
 	});
@@ -25,7 +66,7 @@ function setEntry(tag: TagID, screenKey: ScreenKey, patch: EntryPatch) {
 
 function removeEntry(tag: TagID, screenKey: ScreenKey) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
 		"worklet";
 		const tagState = state[tag];
 		if (!tagState?.screens[screenKey]) {
@@ -33,7 +74,9 @@ function removeEntry(tag: TagID, screenKey: ScreenKey) {
 		}
 
 		delete tagState.screens[screenKey];
-		pruneTagState(state, tag);
+		if (!hasAnyKeys(tagState.screens)) {
+			delete state[tag];
+		}
 
 		return state;
 	});

package/src/shared/stores/bounds/internals/links.ts

@@ -1,72 +1,169 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import {
-	findLatestPendingSourceLinkIndex,
-	findLinkIndexForDestinationWrite,
-	hasLinkSide,
-	isCompletedLinkForScreenKey,
-	isSameScreenFamily,
-	selectSourceUpdateTargetIndex,
-} from "../helpers/link.helpers";
-import { ensureTagState } from "../helpers/tag-state.helpers";
-import type { ScreenKey, TagID, TagLink } from "../types";
-import { type RegistryState, registry } from "./state";
-
-type LinkSourceWriteMode = "capture" | "refresh";
-type LinkDestinationWriteMode = "attach" | "refresh";
+	createGroupTag,
+	createPendingPairKey,
+	ensurePairGroups,
+	ensurePairLinks,
+	getGroupKeyFromTag,
+	getLinkKeyFromTag,
+	getActiveGroupId as getPairActiveGroupId,
+	getDestination as getPairDestination,
+	getLink as getPairLink,
+	getSource as getPairSource,
+	getSourceScreenKeyFromPairKey,
+	removePairLink,
+} from "../helpers/link-pairs.helpers";
+import type {
+	GroupKey,
+	LinkKey,
+	LinkPairsState,
+	ScreenKey,
+	ScreenPairKey,
+	TagID,
+	TagLink,
+} from "../types";
+import { pairs } from "./state";
+
+const toLinkKey = (tag: TagID): LinkKey => {
+	"worklet";
+	return getLinkKeyFromTag(tag);
+};
+
+const createLinkSide = (
+	screenKey: ScreenKey,
+	bounds: MeasuredDimensions,
+	styles: StyleProps,
+) => {
+	"worklet";
+	return {
+		screenKey,
+		bounds,
+		styles,
+	};
+};
+
+const writePairLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+	link: TagLink,
+) => {
+	"worklet";
+	ensurePairLinks(state, pairKey)[linkKey] = link;
+};
+
+const writeGroup = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	group: GroupKey,
+	activeId: LinkKey,
+	initialId?: LinkKey,
+) => {
+	"worklet";
+	const previousInitialId = state[pairKey]?.groups?.[group]?.initialId;
+
+	ensurePairGroups(state, pairKey)[group] = {
+		activeId,
+		initialId: previousInitialId ?? initialId ?? activeId,
+	};
+};
+
+const writeDestination = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+	screenKey: ScreenKey,
+	bounds: MeasuredDimensions,
+	styles: StyleProps,
+	group?: GroupKey,
+) => {
+	"worklet";
+	const link = getPairLink(state, pairKey, linkKey);
+	if (!link) return;
+
+	const destination = createLinkSide(screenKey, bounds, styles);
+
+	link.group = group ?? link.group;
+	link.destination = destination;
+	link.initialDestination ??= destination;
+
+	writePairLink(state, pairKey, linkKey, link);
+
+	if (link.group) {
+		writeGroup(state, pairKey, link.group, linkKey);
+	}
+};
+
+const promotePendingSource = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+) => {
+	"worklet";
+	if (getPairLink(state, pairKey, linkKey)) return;
+
+	const sourceScreenKey = getSourceScreenKeyFromPairKey(pairKey);
+	const pendingPairKey = createPendingPairKey(sourceScreenKey);
+	if (pendingPairKey === pairKey) return;
+
+	const pendingLink = getPairLink(state, pendingPairKey, linkKey);
+	if (!pendingLink) return;
+
+	writePairLink(state, pairKey, linkKey, pendingLink);
+
+	if (pendingLink.group) {
+		const pendingGroupState =
+			state[pendingPairKey]?.groups?.[pendingLink.group];
+
+		if (pendingGroupState) {
+			writeGroup(
+				state,
+				pairKey,
+				pendingLink.group,
+				pendingGroupState.activeId,
+				pendingGroupState.initialId,
+			);
+		}
+	}
+
+	removePairLink(state, pendingPairKey, linkKey);
+};
 
 function setSource(
-	mode: LinkSourceWriteMode,
+	pairKey: ScreenPairKey,
 	tag: TagID,
 	screenKey: ScreenKey,
 	bounds: MeasuredDimensions,
 	styles: StyleProps = {},
+	group?: GroupKey,
 ) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
-		const source = {
-			screenKey,
-			bounds,
-			styles,
-		};
+		const linkKey = toLinkKey(tag);
+		const source = createLinkSide(screenKey, bounds, styles);
 
-		if (mode === "capture") {
-			const tagState = ensureTagState(state, tag);
-			const stack = tagState.linkStack;
-			const topIndex = stack.length - 1;
-			const topLink = topIndex >= 0 ? stack[topIndex] : null;
-
-			if (
-				topLink &&
-				topLink.destination === null &&
-				isSameScreenFamily(topLink.source, source)
-			) {
-				topLink.source = source;
-				if (!topLink.initialSource) {
-					topLink.initialSource = source;
-				}
-				return state;
-			}
-
-			stack.push({
+		const pairLinks = ensurePairLinks(state, pairKey);
+
+		const existingLink = pairLinks[linkKey];
+		const link =
+			existingLink ??
+			({
+				group,
 				source,
 				destination: null,
 				initialSource: source,
-			});
-
-			return state;
-		}
+			} satisfies TagLink);
 
-		const stack = state[tag]?.linkStack;
-		if (!stack || stack.length === 0) return state;
-		const targetIndex = selectSourceUpdateTargetIndex(stack, screenKey);
-		if (targetIndex === -1) return state;
+		link.group = group ?? link.group;
+		link.source = source;
+		link.initialSource ??= source;
 
-		const link = stack[targetIndex];
+		pairLinks[linkKey] = link;
 
-		link.source = source;
-		if (!link.initialSource) {
-			link.initialSource = source;
+		const pendingPairKey = createPendingPairKey(screenKey);
+		if (pendingPairKey !== pairKey) {
+			removePairLink(state, pendingPairKey, linkKey);
 		}
 
 		return state;
@@ -74,98 +171,110 @@ function setSource(
 }
 
 function setDestination(
-	mode: LinkDestinationWriteMode,
+	pairKey: ScreenPairKey,
 	tag: TagID,
 	screenKey: ScreenKey,
 	bounds: MeasuredDimensions,
 	styles: StyleProps = {},
-	expectedSourceScreenKey?: ScreenKey,
+	group?: GroupKey,
 ) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
-		const stack = state[tag]?.linkStack;
-		if (!stack || stack.length === 0) return state;
-
-		const targetIndex = findLinkIndexForDestinationWrite(
-			stack,
-			mode === "refresh" ? screenKey : undefined,
-			expectedSourceScreenKey,
-		);
-
-		if (targetIndex === -1) return state;
-
-		const link = stack[targetIndex];
-		const destination = {
-			screenKey,
-			bounds,
-			styles,
-		};
+		const linkKey = toLinkKey(tag);
+		promotePendingSource(state, pairKey, linkKey);
+		writeDestination(state, pairKey, linkKey, screenKey, bounds, styles, group);
 
-		link.destination = destination;
-		if (!link.initialDestination) {
-			link.initialDestination = destination;
-		}
+		return state;
+	});
+}
 
+function setActiveGroupId(pairKey: ScreenPairKey, group: GroupKey, tag: TagID) {
+	"worklet";
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		writeGroup(state, pairKey, group, toLinkKey(tag));
 		return state;
 	});
 }
 
-function getMatchedLink(tag: TagID, screenKey?: ScreenKey): TagLink | null {
+function getActiveGroupId(
+	pairKey: ScreenPairKey,
+	group: GroupKey,
+): LinkKey | null {
 	"worklet";
-	const tagState = registry.get()[tag];
-	const stack = tagState?.linkStack;
-	if (!stack || stack.length === 0) {
-		return null;
-	}
+	return getPairActiveGroupId(pairs.get(), pairKey, group);
+}
+
+function getLink(pairKey: ScreenPairKey, tag: TagID): TagLink | null {
+	"worklet";
+	return getPairLink(pairs.get(), pairKey, toLinkKey(tag));
+}
+
+const isCompletedLink = (link: TagLink | null): link is TagLink => {
+	"worklet";
+	return !!link?.destination;
+};
 
-	if (!screenKey) {
-		const lastLink = stack[stack.length - 1];
-		return lastLink ?? null;
+function getResolvedLink(
+	pairKey: ScreenPairKey,
+	tag: TagID,
+): { tag: TagID; link: TagLink | null } {
+	"worklet";
+	const state = pairs.get();
+	const linkKey = toLinkKey(tag);
+	const group = getGroupKeyFromTag(tag);
+	const requestedLink = getPairLink(state, pairKey, linkKey);
+
+	// Group active ids can update before the new member has a full source/destination
+	// link, so unresolved grouped links fall back to the initial id's measurements.
+	if (!group || isCompletedLink(requestedLink)) {
+		return {
+			tag,
+			link: requestedLink,
+		};
 	}
 
-	for (let i = stack.length - 1; i >= 0; i--) {
-		const link = stack[i];
-		if (isCompletedLinkForScreenKey(link, screenKey)) {
-			return link;
+	const initialId = state[pairKey]?.groups?.[group]?.initialId;
+	if (initialId) {
+		const initialLink = getPairLink(state, pairKey, initialId);
+		if (isCompletedLink(initialLink)) {
+			return {
+				tag: createGroupTag(group, initialId),
+				link: initialLink,
+			};
 		}
 	}
 
-	return null;
+	return {
+		tag,
+		link: requestedLink,
+	};
 }
 
-function getPendingLink(
+function getSource(
+	pairKey: ScreenPairKey,
 	tag: TagID,
-	sourceScreenKey?: ScreenKey,
-): TagLink | null {
+): TagLink["source"] | null {
 	"worklet";
-	const tagState = registry.get()[tag];
-	const stack = tagState?.linkStack;
-	if (!stack || stack.length === 0) return null;
-
-	const pendingSourceLinkIndex = findLatestPendingSourceLinkIndex(
-		stack,
-		sourceScreenKey,
-	);
-	if (pendingSourceLinkIndex === -1) return null;
-	return stack[pendingSourceLinkIndex] ?? null;
+	return getPairSource(pairs.get(), pairKey, toLinkKey(tag));
 }
 
-function hasSourceLink(tag: TagID, screenKey: ScreenKey): boolean {
-	"worklet";
-	return hasLinkSide(registry.get()[tag]?.linkStack, screenKey, "source");
-}
-
-function hasDestinationLink(tag: TagID, screenKey: ScreenKey): boolean {
+function getDestination(
+	pairKey: ScreenPairKey,
+	tag: TagID,
+): TagLink["destination"] | null {
 	"worklet";
-	return hasLinkSide(registry.get()[tag]?.linkStack, screenKey, "destination");
+	return getPairDestination(pairs.get(), pairKey, toLinkKey(tag));
 }
 
 export {
-	getMatchedLink,
-	getPendingLink,
-	hasDestinationLink,
-	hasSourceLink,
+	getActiveGroupId,
+	getDestination,
+	getLink,
+	getResolvedLink,
+	getSource,
+	setActiveGroupId,
 	setDestination,
 	setSource,
 };

package/src/shared/stores/bounds/internals/resolver.ts

@@ -1,77 +1,27 @@
-import { findLatest } from "../helpers/find-latest";
-import { matchesScreenKey } from "../helpers/matching";
+import { createScreenPairKey } from "../helpers/link-pairs.helpers";
 import type {
 	ResolvedTransitionPair,
 	ResolveTransitionContext,
-	ScreenKey,
+	ScreenPairKey,
 	TagID,
-	TagLink,
 } from "../types";
-import { registry } from "./state";
+import { getResolvedLink } from "./links";
 
-function findCompletedLinkByDestination(
-	stack: TagLink[],
-	screenKey?: ScreenKey,
-): TagLink | null {
-	"worklet";
-	if (!screenKey) return null;
-
-	return findLatest(
-		stack,
-		(link) =>
-			!!link.destination && matchesScreenKey(link.destination, screenKey),
-	);
-}
-
-function findCompletedLinkBySource(
-	stack: TagLink[],
-	screenKey?: ScreenKey,
-): TagLink | null {
-	"worklet";
-	if (!screenKey) return null;
-
-	return findLatest(
-		stack,
-		(link) => !!link.destination && matchesScreenKey(link.source, screenKey),
-	);
-}
-
-function findPendingLinkBySource(
-	stack: TagLink[],
-	screenKey?: ScreenKey,
-): TagLink | null {
-	"worklet";
-	if (!screenKey) return null;
-
-	return findLatest(
-		stack,
-		(link) =>
-			link.destination === null && matchesScreenKey(link.source, screenKey),
-	);
-}
-
-function findEnteringTransitionLink(
-	stack: TagLink[],
+function resolvePairKey(
 	context: ResolveTransitionContext,
-): TagLink | null {
+): ScreenPairKey | null {
 	"worklet";
-	return (
-		findCompletedLinkByDestination(stack, context.currentScreenKey) ??
-		findPendingLinkBySource(stack, context.previousScreenKey) ??
-		findCompletedLinkBySource(stack, context.previousScreenKey)
-	);
-}
 
-function findExitingTransitionLink(
-	stack: TagLink[],
-	context: ResolveTransitionContext,
-): TagLink | null {
-	"worklet";
-	return (
-		findCompletedLinkBySource(stack, context.currentScreenKey) ??
-		findCompletedLinkByDestination(stack, context.nextScreenKey) ??
-		findPendingLinkBySource(stack, context.currentScreenKey)
-	);
+	if (context.entering) {
+		if (!context.previousScreenKey || !context.currentScreenKey) return null;
+		return createScreenPairKey(
+			context.previousScreenKey,
+			context.currentScreenKey,
+		);
+	}
+
+	if (!context.currentScreenKey || !context.nextScreenKey) return null;
+	return createScreenPairKey(context.currentScreenKey, context.nextScreenKey);
 }
 
 function resolveTransitionPair(
@@ -79,30 +29,16 @@ function resolveTransitionPair(
 	context: ResolveTransitionContext,
 ): ResolvedTransitionPair {
 	"worklet";
-	const tagState = registry.get()[tag];
-	const stack = tagState?.linkStack;
-
-	const matchedLink =
-		stack && stack.length > 0
-			? context.entering
-				? findEnteringTransitionLink(stack, context)
-				: findExitingTransitionLink(stack, context)
-			: null;
-
-	const sourceBounds = matchedLink?.source?.bounds ?? null;
-	const destinationBounds = matchedLink?.destination?.bounds ?? null;
-	const sourceStyles = matchedLink?.source?.styles ?? null;
-	const destinationStyles = matchedLink?.destination?.styles ?? null;
-	const sourceScreenKey = matchedLink?.source?.screenKey ?? null;
-	const destinationScreenKey = matchedLink?.destination?.screenKey ?? null;
+	const pairKey = resolvePairKey(context);
+	const matchedLink = pairKey ? getResolvedLink(pairKey, tag).link : null;
 
 	return {
-		sourceBounds,
-		destinationBounds,
-		sourceStyles,
-		destinationStyles,
-		sourceScreenKey,
-		destinationScreenKey,
+		sourceBounds: matchedLink?.source.bounds ?? null,
+		destinationBounds: matchedLink?.destination?.bounds ?? null,
+		sourceStyles: matchedLink?.source.styles ?? null,
+		destinationStyles: matchedLink?.destination?.styles ?? null,
+		sourceScreenKey: matchedLink?.source.screenKey ?? null,
+		destinationScreenKey: matchedLink?.destination?.screenKey ?? null,
 	};
 }
 

package/src/shared/stores/bounds/internals/state.ts

@@ -1,8 +1,30 @@
 import { makeMutable } from "react-native-reanimated";
-import type { GroupState, TagID, TagState } from "../types";
+import type { LinkPairsState, TagID, TagState } from "../types";
 
-export type RegistryState = Record<TagID, TagState>;
-export type GroupsState = Record<string, GroupState>;
+export type BoundaryEntriesState = Record<TagID, TagState>;
 
-export const registry = makeMutable<RegistryState>({});
-export const groups = makeMutable<GroupsState>({});
+export const boundaryRegistry = makeMutable<BoundaryEntriesState>({});
+
+/**
+ * Transition links scoped per screen pair.
+ *
+ * Links used to live in a flat array that acted like a global history. To find
+ * the right link, we had to scan for the latest pending or completed entry that
+ * matched a screen, which made refreshes and rapid triggers tricky to handle.
+ *
+ * Keying by screen pair fixes that: each transition lives under its pair, and
+ * every shared boundary id maps to a single link in that pair. Refreshing the
+ * source or destination just overwrites the same slot instead of pushing a new
+ * history entry.
+ *
+ * Example:
+ *
+ * {
+ *   "a<>b": {
+ *     links: {
+ *       "unique-tag-1": { source: ..., destination: ... },
+ *     },
+ *   },
+ * }
+ */
+export const pairs = makeMutable<LinkPairsState>({});