react-native-screen-transitions 3.6.0 → 3.7.0-alpha.0

package/src/shared/providers/stack/helpers/managed-stack-state/helpers/helpers.ts

@@ -0,0 +1,139 @@
+import type {
+	BaseStackDescriptor,
+	RouteWithKey,
+	StackDescriptorSource,
+} from "../../../../../types/stack.types";
+import type { ManagedDescriptorSources } from "./types";
+
+export const areDescriptorsEqual = <
+	DescriptorMap extends Record<string, unknown>,
+>(
+	a: DescriptorMap,
+	b: DescriptorMap,
+): boolean => {
+	if (a === b) return true;
+
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+
+	if (aKeys.length !== bKeys.length) return false;
+
+	return aKeys.every((key) => a[key] === b[key]);
+};
+
+export const setsAreEqual = <T>(
+	left: ReadonlySet<T>,
+	right: ReadonlySet<T>,
+) => {
+	if (left.size !== right.size) {
+		return false;
+	}
+
+	for (const value of left) {
+		if (!right.has(value)) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+export const getRouteChildState = (route: RouteWithKey): unknown => {
+	if (!route || typeof route !== "object") {
+		return undefined;
+	}
+
+	const childStateSymbol = Object.getOwnPropertySymbols(route).find(
+		(symbol) => symbol.description === "CHILD_STATE",
+	);
+
+	if (childStateSymbol && childStateSymbol in route) {
+		return (route as unknown as Record<symbol, unknown>)[childStateSymbol];
+	}
+
+	return (route as { state?: unknown }).state;
+};
+
+export const getRouteChildStateMap = <Route extends RouteWithKey>(
+	routes: Route[],
+): Record<string, unknown> => {
+	const childStates: Record<string, unknown> = {};
+
+	for (const route of routes) {
+		childStates[route.key] = getRouteChildState(route);
+	}
+
+	return childStates;
+};
+
+export const areRouteChildStateMapsEqual = (
+	previous: Record<string, unknown>,
+	next: Record<string, unknown>,
+): boolean => {
+	if (previous === next) return true;
+
+	const previousKeys = Object.keys(previous);
+	const nextKeys = Object.keys(next);
+
+	if (previousKeys.length !== nextKeys.length) return false;
+
+	return previousKeys.every((key) => Object.is(previous[key], next[key]));
+};
+
+export const areRecordsShallowEqual = (
+	a: Record<string, unknown>,
+	b: Record<string, unknown>,
+): boolean => {
+	if (a === b) return true;
+
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+
+	if (aKeys.length !== bKeys.length) return false;
+
+	return aKeys.every((key) => Object.is(a[key], b[key]));
+};
+
+export const areDescriptorSourcesEquivalent = <
+	TDescriptor extends BaseStackDescriptor,
+>(
+	previous: StackDescriptorSource<TDescriptor>,
+	next: StackDescriptorSource<TDescriptor>,
+): boolean => {
+	return (
+		previous.navigation === next.navigation &&
+		areRecordsShallowEqual(
+			previous.route as unknown as Record<string, unknown>,
+			next.route as unknown as Record<string, unknown>,
+		) &&
+		areRecordsShallowEqual(
+			previous.options as unknown as Record<string, unknown>,
+			next.options as unknown as Record<string, unknown>,
+		)
+	);
+};
+
+export const areDescriptorSourceMapsEquivalent = <
+	TDescriptor extends BaseStackDescriptor,
+>(
+	previous: ManagedDescriptorSources<TDescriptor>,
+	next: ManagedDescriptorSources<TDescriptor>,
+): boolean => {
+	if (previous === next) return true;
+
+	const previousKeys = Object.keys(previous);
+	const nextKeys = Object.keys(next);
+
+	if (previousKeys.length !== nextKeys.length) return false;
+
+	return previousKeys.every((key) => {
+		const previousDescriptor = previous[key];
+		const nextDescriptor = next[key];
+
+		if (!previousDescriptor || !nextDescriptor) {
+			return false;
+		}
+
+		return areDescriptorSourcesEquivalent(previousDescriptor, nextDescriptor);
+	});
+};

package/src/shared/providers/stack/helpers/managed-stack-state/helpers/reconcile-managed-routes.ts

@@ -0,0 +1,198 @@
+import type {
+	BaseStackDescriptor,
+	RouteWithKey,
+} from "../../../../../types/stack.types";
+import { composeDescriptors } from "../../../../../utils/navigation/compose-descriptors";
+import { syncRoutesWithRemoved } from "../../../../../utils/navigation/sync-routes-with-removed";
+import type {
+	LocalRoutesState,
+	ManagedDescriptorSources,
+	ManagedRoutes,
+	ReconciledRoutes,
+} from "./types";
+
+type ReconcileManagedRoutesParams<TDescriptor extends BaseStackDescriptor> = {
+	current: LocalRoutesState<TDescriptor>;
+	previousRoutesSnapshot: ManagedRoutes<TDescriptor>;
+	nextRoutesSnapshot: ManagedRoutes<TDescriptor>;
+	nextDescriptors: ManagedDescriptorSources<TDescriptor>;
+	closingRouteKeys: Set<string>;
+};
+
+const haveSameRouteKeys = <Route extends RouteWithKey>(
+	previous: Route[],
+	next: Route[],
+): boolean => {
+	if (previous.length !== next.length) {
+		return false;
+	}
+
+	return previous.every((route, index) => route?.key === next[index]?.key);
+};
+
+const alignRoutesWithLatest = <
+	Route extends RouteWithKey,
+	DescriptorMap extends Record<string, unknown>,
+>(
+	currentRoutes: Route[],
+	currentDescriptors: DescriptorMap,
+	nextRoutes: Route[],
+	nextDescriptors: DescriptorMap,
+): { routes: Route[]; descriptors: DescriptorMap } => {
+	if (currentRoutes.length === 0) {
+		return {
+			routes: nextRoutes,
+			descriptors: composeDescriptors(
+				nextRoutes,
+				nextDescriptors,
+				currentDescriptors,
+			),
+		};
+	}
+
+	const nextRouteLookup = new Map<string, Route>();
+	for (const route of nextRoutes) {
+		nextRouteLookup.set(route.key, route);
+	}
+
+	let didChange = currentRoutes.length !== nextRoutes.length;
+	const alignedRoutes = currentRoutes.map((route) => {
+		const nextRoute = nextRouteLookup.get(route.key);
+
+		if (!nextRoute) {
+			return route;
+		}
+
+		if (nextRoute !== route) {
+			didChange = true;
+			return nextRoute;
+		}
+
+		return route;
+	});
+	const routesResult = didChange ? alignedRoutes : currentRoutes;
+
+	return {
+		routes: routesResult,
+		descriptors: composeDescriptors(
+			routesResult,
+			nextDescriptors,
+			currentDescriptors,
+		),
+	};
+};
+
+const acceptAlreadyClosingRouteRemovals = <
+	TDescriptor extends BaseStackDescriptor,
+>({
+	current,
+	previousRoutesSnapshot,
+	nextRoutesSnapshot,
+	nextDescriptors,
+	closingRouteKeys,
+}: ReconcileManagedRoutesParams<TDescriptor>): ReconciledRoutes<TDescriptor> | null => {
+	const nextRouteKeys = new Set(nextRoutesSnapshot.map((route) => route.key));
+	const acceptedRemovedKeys = new Set<string>();
+
+	for (const route of previousRoutesSnapshot) {
+		if (nextRouteKeys.has(route.key)) {
+			continue;
+		}
+
+		if (!closingRouteKeys.has(route.key)) {
+			continue;
+		}
+
+		acceptedRemovedKeys.add(route.key);
+		closingRouteKeys.delete(route.key);
+	}
+
+	if (acceptedRemovedKeys.size === 0) {
+		return null;
+	}
+
+	const remainingClosingRoutes = current.routes.filter((route) => {
+		if (nextRouteKeys.has(route.key)) {
+			return false;
+		}
+
+		if (acceptedRemovedKeys.has(route.key)) {
+			return false;
+		}
+
+		return closingRouteKeys.has(route.key);
+	});
+
+	const routes = [
+		...nextRoutesSnapshot,
+		...remainingClosingRoutes,
+	] as ManagedRoutes<TDescriptor>;
+	const descriptors = {
+		...nextDescriptors,
+	} as ManagedDescriptorSources<TDescriptor>;
+
+	for (const route of remainingClosingRoutes) {
+		const descriptor = current.sourceDescriptors[route.key];
+		if (descriptor) {
+			descriptors[route.key] = descriptor;
+		}
+	}
+
+	return {
+		routes,
+		descriptors,
+	};
+};
+
+export const reconcileManagedRoutes = <TDescriptor extends BaseStackDescriptor>(
+	params: ReconcileManagedRoutesParams<TDescriptor>,
+): ReconciledRoutes<TDescriptor> => {
+	const {
+		current,
+		previousRoutesSnapshot,
+		nextRoutesSnapshot,
+		nextDescriptors,
+		closingRouteKeys,
+	} = params;
+
+	const routeKeysUnchanged = haveSameRouteKeys(
+		previousRoutesSnapshot,
+		nextRoutesSnapshot,
+	);
+
+	if (routeKeysUnchanged) {
+		const result = alignRoutesWithLatest(
+			current.routes,
+			current.sourceDescriptors,
+			nextRoutesSnapshot,
+			nextDescriptors,
+		);
+
+		return {
+			routes: result.routes as ManagedRoutes<TDescriptor>,
+			descriptors: result.descriptors as ManagedDescriptorSources<TDescriptor>,
+		};
+	}
+
+	const acceptedRemoval = acceptAlreadyClosingRouteRemovals(params);
+
+	if (acceptedRemoval) {
+		return acceptedRemoval;
+	}
+
+	const result = syncRoutesWithRemoved({
+		prevRoutes:
+			previousRoutesSnapshot.length > 0
+				? previousRoutesSnapshot
+				: current.routes,
+		prevDescriptors: current.sourceDescriptors,
+		nextRoutes: nextRoutesSnapshot,
+		nextDescriptors,
+		closingRouteKeys,
+	});
+
+	return {
+		routes: result.routes as ManagedRoutes<TDescriptor>,
+		descriptors: result.descriptors as ManagedDescriptorSources<TDescriptor>,
+	};
+};

package/src/shared/providers/stack/helpers/managed-stack-state/helpers/types.ts

@@ -0,0 +1,57 @@
+import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	BaseStackRoute,
+	BaseStackScene,
+	StackDescriptorSource,
+} from "../../../../../types/stack.types";
+
+export type ManagedRoutes<TDescriptor extends BaseStackDescriptor> =
+	TDescriptor["route"][];
+
+export type ManagedDescriptors<TDescriptor extends BaseStackDescriptor> =
+	Record<string, TDescriptor>;
+
+export type ManagedDescriptorSources<TDescriptor extends BaseStackDescriptor> =
+	Record<string, StackDescriptorSource<TDescriptor>>;
+
+export type LocalRoutesState<TDescriptor extends BaseStackDescriptor> = {
+	routes: ManagedRoutes<TDescriptor>;
+	descriptors: ManagedDescriptors<TDescriptor>;
+	sourceDescriptors: ManagedDescriptorSources<TDescriptor>;
+	focusedRouteKey?: string;
+	routeChildStates: Record<string, unknown>;
+	scenes: BaseStackScene<TDescriptor>[];
+	routeKeys: string[];
+	shouldShowFloatOverlay: boolean;
+	closingRouteKeys: ReadonlySet<string>;
+};
+
+export type ManagedStackControllerSnapshot<
+	TDescriptor extends BaseStackDescriptor,
+> = {
+	state: LocalRoutesState<TDescriptor>;
+};
+
+export type ManagedStackController<
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+> = {
+	subscribe: (listener: () => void) => () => void;
+	getSnapshot: () => ManagedStackControllerSnapshot<TDescriptor>;
+	update: (props: ManagedStackProps<TDescriptor, TNavigation>) => void;
+	handleCloseRoute: (payload: { route: BaseStackRoute }) => void;
+	requestDismiss: (payload: { route: BaseStackRoute }) => boolean;
+};
+
+export type ReconciledRoutes<TDescriptor extends BaseStackDescriptor> = {
+	routes: ManagedRoutes<TDescriptor>;
+	descriptors: ManagedDescriptorSources<TDescriptor>;
+};
+
+export type SceneActivityWindow = {
+	focusedIndex: number;
+	topIndex: number;
+	topIsClosing: boolean;
+};

package/src/shared/providers/stack/helpers/managed-stack-state/index.ts

@@ -0,0 +1,40 @@
+import { useRef, useSyncExternalStore } from "react";
+import type { ManagedStackProps } from "../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+} from "../../../../types/stack.types";
+import {
+	createManagedStackController,
+	type ManagedStackController,
+} from "./managed-stack-controller";
+
+export const useManagedStackState = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>(
+	props: ManagedStackProps<TDescriptor, TNavigation>,
+) => {
+	const controllerRef = useRef<
+		ManagedStackController<TDescriptor, TNavigation> | undefined
+	>(undefined);
+
+	if (!controllerRef.current) {
+		controllerRef.current = createManagedStackController(props);
+	}
+
+	const controller = controllerRef.current;
+	controller.update(props);
+
+	const snapshot = useSyncExternalStore(
+		controller.subscribe,
+		controller.getSnapshot,
+		controller.getSnapshot,
+	);
+
+	return {
+		state: snapshot.state,
+		handleCloseRoute: controller.handleCloseRoute,
+		requestDismiss: controller.requestDismiss,
+	};
+};

package/src/shared/providers/stack/helpers/managed-stack-state/managed-stack-controller.ts

@@ -0,0 +1,160 @@
+import { StackActions } from "@react-navigation/native";
+import type { ManagedStackProps } from "../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	BaseStackRoute,
+} from "../../../../types/stack.types";
+import { buildManagedStackState } from "./helpers/build-managed-stack-state";
+import { deriveManagedStackState } from "./helpers/derive-managed-stack-state";
+import type {
+	ManagedDescriptorSources,
+	ManagedStackControllerSnapshot,
+	ManagedStackController as ManagedStackControllerType,
+} from "./helpers/types";
+
+export type { ManagedStackController } from "./helpers/types";
+
+/**
+ * Maintains the stack-local route snapshot used while managed transitions run.
+ *
+ * React Navigation remains the source of truth for settled routes, but it can
+ * remove descriptors before our close animation has finished. This controller
+ * keeps those closing routes locally until their lifecycle reports completion.
+ */
+export const createManagedStackController = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>(
+	initialProps: ManagedStackProps<TDescriptor, TNavigation>,
+): ManagedStackControllerType<TDescriptor, TNavigation> => {
+	const closingRouteKeys = new Set<string>();
+	let props = initialProps;
+	let previousPropRoutes = initialProps.state.routes;
+	let snapshot: ManagedStackControllerSnapshot<TDescriptor> = {
+		state: buildManagedStackState({
+			props,
+			routes: initialProps.state.routes,
+			descriptors:
+				initialProps.descriptors as ManagedDescriptorSources<TDescriptor>,
+			closingRouteKeys,
+		}),
+	};
+	const listeners = new Set<() => void>();
+
+	const emit = () => {
+		for (const listener of listeners) {
+			listener();
+		}
+	};
+
+	const subscribe = (listener: () => void) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+
+	const getSnapshot = (): ManagedStackControllerSnapshot<TDescriptor> => {
+		return snapshot;
+	};
+
+	const update = (nextProps: ManagedStackProps<TDescriptor, TNavigation>) => {
+		const previousRoutesSnapshot = previousPropRoutes;
+		props = nextProps;
+
+		const nextState = deriveManagedStackState({
+			props,
+			current: snapshot.state,
+			previousRoutesSnapshot,
+			closingRouteKeys,
+		});
+		previousPropRoutes = nextProps.state.routes;
+
+		if (nextState === snapshot.state) {
+			return;
+		}
+
+		snapshot = {
+			state: nextState,
+		};
+	};
+
+	const handleCloseRoute = ({ route }: { route: BaseStackRoute }) => {
+		const { state, navigation } = props;
+
+		if (state.routes.some((candidate) => candidate.key === route.key)) {
+			navigation.dispatch({
+				...StackActions.pop(),
+				source: route.key,
+				target: state.key,
+			});
+			return;
+		}
+
+		closingRouteKeys.delete(route.key);
+
+		const current = snapshot.state;
+		const routeExists = current.routes.some(
+			(candidate) => candidate.key === route.key,
+		);
+
+		if (!routeExists) {
+			return;
+		}
+
+		const nextRoutes = current.routes.filter(
+			(candidate) => candidate.key !== route.key,
+		);
+
+		const nextDescriptors = { ...current.sourceDescriptors };
+		delete nextDescriptors[route.key];
+
+		snapshot = {
+			state: buildManagedStackState({
+				props,
+				routes: nextRoutes,
+				descriptors: nextDescriptors,
+				closingRouteKeys,
+				previousState: current,
+			}),
+		};
+		emit();
+	};
+
+	const requestDismiss = ({ route }: { route: BaseStackRoute }): boolean => {
+		const current = snapshot.state;
+		const routeIndex = current.routes.findIndex(
+			(candidate) => candidate.key === route.key,
+		);
+
+		if (routeIndex <= 0) {
+			return false;
+		}
+
+		if (closingRouteKeys.has(route.key)) {
+			return true;
+		}
+
+		closingRouteKeys.add(route.key);
+		snapshot = {
+			state: buildManagedStackState({
+				props,
+				routes: current.routes,
+				descriptors: current.sourceDescriptors,
+				closingRouteKeys,
+				previousState: current,
+			}),
+		};
+		emit();
+		return true;
+	};
+
+	return {
+		subscribe,
+		getSnapshot,
+		update,
+		handleCloseRoute,
+		requestDismiss,
+	};
+};