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

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

@@ -0,0 +1,368 @@
+import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	BaseStackScene,
+	StackDescriptorSource,
+	StackSceneActivity,
+} from "../../../../../types/stack.types";
+import { resolveSceneNeighbors } from "../../../../../utils/navigation/resolve-scene-neighbors";
+import { isOverlayVisible } from "../../../../../utils/overlay/visibility";
+import {
+	areDescriptorSourcesEquivalent,
+	areDescriptorsEqual,
+	areRouteChildStateMapsEqual,
+	getRouteChildState,
+	setsAreEqual,
+} from "./helpers";
+import type {
+	LocalRoutesState,
+	ManagedDescriptorSources,
+	ManagedDescriptors,
+	ManagedRoutes,
+	SceneActivityWindow,
+} from "./types";
+
+type BuildManagedStackStateParams<
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+> = {
+	props: ManagedStackProps<TDescriptor, TNavigation>;
+	routes: ManagedRoutes<TDescriptor>;
+	descriptors: ManagedDescriptorSources<TDescriptor>;
+	closingRouteKeys: ReadonlySet<string>;
+	previousState?: LocalRoutesState<TDescriptor>;
+};
+
+const areRouteKeysEqual = (a: string[], b: string[]): boolean => {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+
+	return a.every((key, index) => key === b[index]);
+};
+
+const resolveStableDescriptorSource = <
+	TDescriptor extends BaseStackDescriptor,
+>({
+	routeKey,
+	sourceDescriptor,
+	previousState,
+}: {
+	routeKey: string;
+	sourceDescriptor: StackDescriptorSource<TDescriptor>;
+	previousState?: LocalRoutesState<TDescriptor>;
+}): StackDescriptorSource<TDescriptor> => {
+	const previousSourceDescriptor = previousState?.sourceDescriptors[routeKey];
+
+	if (
+		previousSourceDescriptor &&
+		areDescriptorSourcesEquivalent(previousSourceDescriptor, sourceDescriptor)
+	) {
+		return previousSourceDescriptor;
+	}
+
+	return sourceDescriptor;
+};
+
+const getSceneActivity = ({
+	focusedIndex,
+	isClosing,
+	sceneIndex,
+	topIndex,
+	topIsClosing,
+}: SceneActivityWindow & {
+	isClosing: boolean;
+	sceneIndex: number;
+}): StackSceneActivity => {
+	if (isClosing) {
+		return "closing";
+	}
+
+	if (topIsClosing) {
+		return sceneIndex === focusedIndex ? "inert" : "inactive";
+	}
+
+	if (sceneIndex === topIndex) {
+		return "active";
+	}
+
+	if (sceneIndex === topIndex - 1) {
+		return "inert";
+	}
+
+	return "inactive";
+};
+
+const getSceneActivityWindow = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>({
+	props,
+	routes,
+	closingRouteKeys,
+}: BuildManagedStackStateParams<
+	TDescriptor,
+	TNavigation
+>): SceneActivityWindow => {
+	const focusedRouteKey = props.state.routes[props.state.index]?.key;
+
+	let focusedIndex = Math.max(
+		0,
+		routes.findIndex((route) => route.key === focusedRouteKey),
+	);
+
+	while (focusedIndex > 0 && closingRouteKeys.has(routes[focusedIndex]?.key)) {
+		focusedIndex--;
+	}
+
+	const topIndex = routes.length - 1;
+	const topRoute = routes[topIndex];
+	const topIsClosing =
+		topRoute !== undefined && closingRouteKeys.has(topRoute.key);
+
+	return {
+		focusedIndex,
+		topIndex,
+		topIsClosing,
+	};
+};
+
+const withDescriptorActivityState = <TDescriptor extends BaseStackDescriptor>(
+	descriptor: StackDescriptorSource<TDescriptor>,
+	activity: StackSceneActivity,
+): TDescriptor => {
+	if (descriptor.activity === activity) {
+		return descriptor as TDescriptor;
+	}
+
+	return {
+		...descriptor,
+		activity,
+	} as TDescriptor;
+};
+
+const buildBaseScenes = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>({
+	routes,
+	descriptors,
+	closingRouteKeys,
+	previousState,
+	activityWindow,
+}: BuildManagedStackStateParams<TDescriptor, TNavigation> & {
+	activityWindow: SceneActivityWindow;
+}) => {
+	const routeKeys: string[] = [];
+	const scenes: BaseStackScene<TDescriptor>[] = [];
+	const routeChildStates: Record<string, unknown> = {};
+	const sourceDescriptors = {} as ManagedDescriptorSources<TDescriptor>;
+	const managedDescriptors = {} as ManagedDescriptors<TDescriptor>;
+	let shouldShowFloatOverlay = false;
+
+	for (let sceneIndex = 0; sceneIndex < routes.length; sceneIndex++) {
+		const route = routes[sceneIndex] as TDescriptor["route"];
+
+		const rawSourceDescriptor = descriptors[route.key] as
+			| StackDescriptorSource<TDescriptor>
+			| undefined;
+
+		if (!rawSourceDescriptor) {
+			throw new Error(`Missing descriptor for route "${route.key}"`);
+		}
+
+		const routeChildState = getRouteChildState(route);
+		const childStateUnchanged =
+			!previousState ||
+			Object.is(previousState.routeChildStates[route.key], routeChildState);
+
+		const sourceDescriptor = childStateUnchanged
+			? resolveStableDescriptorSource({
+					routeKey: route.key,
+					sourceDescriptor: rawSourceDescriptor,
+					previousState,
+				})
+			: rawSourceDescriptor;
+
+		const activity = getSceneActivity({
+			...activityWindow,
+			isClosing: closingRouteKeys.has(route.key),
+			sceneIndex,
+		});
+
+		const previousDescriptor = previousState?.descriptors[route.key];
+		const descriptor =
+			previousDescriptor &&
+			childStateUnchanged &&
+			previousDescriptor.route === sourceDescriptor.route &&
+			previousDescriptor.navigation === sourceDescriptor.navigation &&
+			previousDescriptor.options === sourceDescriptor.options &&
+			previousDescriptor.activity === activity
+				? previousDescriptor
+				: withDescriptorActivityState(sourceDescriptor, activity);
+
+		routeKeys.push(route.key);
+		routeChildStates[route.key] = routeChildState;
+		sourceDescriptors[route.key] = sourceDescriptor;
+		managedDescriptors[route.key] = descriptor;
+
+		if (!shouldShowFloatOverlay) {
+			shouldShowFloatOverlay = isOverlayVisible(sourceDescriptor?.options);
+		}
+
+		scenes.push({
+			route: descriptor.route,
+			descriptor,
+		});
+	}
+
+	return {
+		scenes,
+		routeChildStates,
+		sourceDescriptors,
+		descriptors: managedDescriptors,
+		routeKeys,
+		shouldShowFloatOverlay,
+	};
+};
+
+const withSceneRelationships = <TDescriptor extends BaseStackDescriptor>({
+	scenes,
+	sourceDescriptors,
+	closingRouteKeys,
+	previousState,
+}: {
+	scenes: BaseStackScene<TDescriptor>[];
+	sourceDescriptors: ManagedDescriptorSources<TDescriptor>;
+	closingRouteKeys: ReadonlySet<string>;
+	previousState?: LocalRoutesState<TDescriptor>;
+}): BaseStackScene<TDescriptor>[] => {
+	const isRouteClosing = (routeKey: string) => closingRouteKeys.has(routeKey);
+
+	const closingRouteOrder = new Map(
+		Array.from(closingRouteKeys, (routeKey, index) => [routeKey, index]),
+	);
+
+	const previousScenesByRouteKey = previousState
+		? new Map(previousState.scenes.map((scene) => [scene.route.key, scene]))
+		: undefined;
+
+	let reusedEveryScene =
+		previousState !== undefined &&
+		scenes.length === previousState.scenes.length;
+
+	const relationshipScenes = scenes.map((scene) => ({
+		route: scene.route,
+		descriptor: (sourceDescriptors[scene.route.key] ??
+			scene.descriptor) as TDescriptor,
+	}));
+
+	const nextScenes = scenes.map((scene, sceneIndex) => {
+		const { previousDescriptor, nextDescriptor } = resolveSceneNeighbors(
+			relationshipScenes,
+			sceneIndex,
+			isRouteClosing,
+			(routeKey) => closingRouteOrder.get(routeKey),
+		);
+
+		const nextScene = {
+			...scene,
+			previousDescriptor,
+			nextDescriptor,
+		};
+
+		const previousScene =
+			previousState?.scenes[sceneIndex]?.route === scene.route
+				? previousState.scenes[sceneIndex]
+				: previousScenesByRouteKey?.get(scene.route.key);
+
+		if (
+			previousScene &&
+			previousScene.route === nextScene.route &&
+			previousScene.descriptor === nextScene.descriptor &&
+			previousScene.previousDescriptor === nextScene.previousDescriptor &&
+			previousScene.nextDescriptor === nextScene.nextDescriptor
+		) {
+			return previousScene;
+		}
+
+		reusedEveryScene = false;
+		return nextScene;
+	});
+
+	if (reusedEveryScene && previousState) {
+		return previousState.scenes;
+	}
+
+	return nextScenes;
+};
+
+export const buildManagedStackState = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>(
+	params: BuildManagedStackStateParams<TDescriptor, TNavigation>,
+): LocalRoutesState<TDescriptor> => {
+	const activityWindow = getSceneActivityWindow(params);
+	const focusedRouteKey =
+		params.props.state.routes[params.props.state.index]?.key;
+
+	const {
+		scenes: baseScenes,
+		routeChildStates,
+		sourceDescriptors,
+		descriptors: managedDescriptors,
+		routeKeys,
+		shouldShowFloatOverlay,
+	} = buildBaseScenes({
+		...params,
+		activityWindow,
+	});
+
+	const scenes = withSceneRelationships({
+		scenes: baseScenes,
+		sourceDescriptors,
+		closingRouteKeys: params.closingRouteKeys,
+		previousState: params.previousState,
+	});
+
+	const closingRouteKeys = new Set(params.closingRouteKeys);
+
+	return {
+		routes: params.routes,
+		descriptors:
+			params.previousState &&
+			areDescriptorsEqual(params.previousState.descriptors, managedDescriptors)
+				? params.previousState.descriptors
+				: managedDescriptors,
+		sourceDescriptors:
+			params.previousState &&
+			areDescriptorsEqual(
+				params.previousState.sourceDescriptors,
+				sourceDescriptors,
+			)
+				? params.previousState.sourceDescriptors
+				: sourceDescriptors,
+		focusedRouteKey,
+		routeChildStates:
+			params.previousState &&
+			areRouteChildStateMapsEqual(
+				params.previousState.routeChildStates,
+				routeChildStates,
+			)
+				? params.previousState.routeChildStates
+				: routeChildStates,
+		scenes,
+		routeKeys:
+			params.previousState &&
+			areRouteKeysEqual(params.previousState.routeKeys, routeKeys)
+				? params.previousState.routeKeys
+				: routeKeys,
+		shouldShowFloatOverlay,
+		closingRouteKeys:
+			params.previousState &&
+			setsAreEqual(params.previousState.closingRouteKeys, closingRouteKeys)
+				? params.previousState.closingRouteKeys
+				: closingRouteKeys,
+	};
+};

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

@@ -0,0 +1,129 @@
+import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	RouteWithKey,
+} from "../../../../../types/stack.types";
+import { buildManagedStackState } from "./build-managed-stack-state";
+import {
+	areDescriptorSourceMapsEquivalent,
+	areDescriptorsEqual,
+	areRouteChildStateMapsEqual,
+	getRouteChildStateMap,
+	setsAreEqual,
+} from "./helpers";
+import { reconcileManagedRoutes } from "./reconcile-managed-routes";
+import type { LocalRoutesState, ManagedRoutes } from "./types";
+
+type DeriveManagedStackStateParams<
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+> = {
+	props: ManagedStackProps<TDescriptor, TNavigation>;
+	current: LocalRoutesState<TDescriptor>;
+	previousRoutesSnapshot: ManagedRoutes<TDescriptor>;
+	closingRouteKeys: Set<string>;
+};
+
+const routesAreIdentical = <Route extends RouteWithKey>(
+	a: Route[],
+	b: Route[],
+): boolean => {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+
+	return a.every((route, index) => route === b[index]);
+};
+
+const routeKeysAreEqual = <Route extends RouteWithKey>(
+	a: Route[],
+	b: Route[],
+): boolean => {
+	if (a.length !== b.length) return false;
+
+	return a.every((route, index) => route.key === b[index]?.key);
+};
+
+export const deriveManagedStackState = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>({
+	props,
+	current,
+	previousRoutesSnapshot,
+	closingRouteKeys,
+}: DeriveManagedStackStateParams<
+	TDescriptor,
+	TNavigation
+>): LocalRoutesState<TDescriptor> => {
+	const nextRoutesSnapshot = props.state.routes;
+	const nextDescriptors = props.descriptors;
+	const nextRouteChildStates = getRouteChildStateMap(nextRoutesSnapshot);
+	const nextFocusedRouteKey = nextRoutesSnapshot[props.state.index]?.key;
+	const focusedRouteUnchanged = current.focusedRouteKey === nextFocusedRouteKey;
+	const closingRouteKeysUnchanged = setsAreEqual(
+		current.closingRouteKeys,
+		closingRouteKeys,
+	);
+	const routeChildStatesUnchanged = areRouteChildStateMapsEqual(
+		current.routeChildStates,
+		nextRouteChildStates,
+	);
+
+	const alreadyAligned =
+		focusedRouteUnchanged &&
+		closingRouteKeysUnchanged &&
+		routeChildStatesUnchanged &&
+		routesAreIdentical(current.routes, nextRoutesSnapshot) &&
+		areDescriptorsEqual(current.sourceDescriptors, nextDescriptors);
+
+	if (alreadyAligned) {
+		return current;
+	}
+
+	const logicallyAligned =
+		focusedRouteUnchanged &&
+		closingRouteKeysUnchanged &&
+		routeChildStatesUnchanged &&
+		routeKeysAreEqual(current.routes, nextRoutesSnapshot) &&
+		areDescriptorSourceMapsEquivalent(
+			current.sourceDescriptors,
+			nextDescriptors,
+		);
+
+	if (logicallyAligned) {
+		return current;
+	}
+
+	const result = reconcileManagedRoutes({
+		current,
+		previousRoutesSnapshot,
+		nextRoutesSnapshot,
+		nextDescriptors,
+		closingRouteKeys,
+	});
+
+	const routesChanged = !routesAreIdentical(current.routes, result.routes);
+	const descriptorsChanged = !areDescriptorsEqual(
+		current.sourceDescriptors,
+		result.descriptors,
+	);
+	const closingRouteKeysChanged = !setsAreEqual(
+		current.closingRouteKeys,
+		closingRouteKeys,
+	);
+
+	if (!routesChanged && !descriptorsChanged && !closingRouteKeysChanged) {
+		return current;
+	}
+
+	return buildManagedStackState({
+		props,
+		routes: routesChanged ? result.routes : current.routes,
+		descriptors: descriptorsChanged
+			? result.descriptors
+			: current.sourceDescriptors,
+		closingRouteKeys,
+		previousState: current,
+	});
+};

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);
+	});
+};