react-native-screen-transitions 3.8.0 → 3.9.0-alpha.1

package/src/shared/utils/bounds/helpers/create-bound-tag.ts

@@ -1,10 +1,51 @@
-import type { BoundId } from "../types/options";
+import type {
+	BoundId,
+	BoundsIdentity,
+	BoundsIdentityInput,
+} from "../types/options";
 
 type CreateBoundTagParams = {
 	id?: BoundId;
 	group?: string;
 };
 
+const splitBoundTag = (id: BoundId): BoundsIdentity => {
+	"worklet";
+
+	const normalizedId = String(id);
+	const separatorIndex = normalizedId.indexOf(":");
+
+	if (separatorIndex <= 0 || separatorIndex >= normalizedId.length - 1) {
+		return { id };
+	}
+
+	return {
+		group: normalizedId.slice(0, separatorIndex),
+		id: normalizedId.slice(separatorIndex + 1),
+	};
+};
+
+export const normalizeBoundIdentity = (
+	identity: BoundsIdentityInput,
+	fallbackGroup?: string,
+): BoundsIdentity => {
+	"worklet";
+
+	const source =
+		typeof identity === "object"
+			? identity
+			: ({
+					id: identity,
+				} satisfies BoundsIdentity);
+	const parsed = splitBoundTag(source.id);
+	const group = source.group || parsed.group || fallbackGroup;
+
+	return {
+		id: parsed.id,
+		group,
+	};
+};
+
 /**
  * Creates a bound tag by formatting the given id and optional group
  * into a `group:id` string. If no group is provided, returns just the id.
@@ -17,11 +58,12 @@ export const createBoundTag = ({
 
 	if (id == null || id === "") return undefined;
 
-	const normalizedId = String(id);
+	const identity = normalizeBoundIdentity({ id, group });
+	const normalizedId = String(identity.id);
 
-	if (!group) {
+	if (!identity.group) {
 		return normalizedId;
 	}
 
-	return `${group}:${normalizedId}`;
+	return `${identity.group}:${normalizedId}`;
 };

package/src/shared/utils/bounds/helpers/create-bounds-accessor-core.ts

@@ -1,35 +1,29 @@
 import type {
+	BoundsAccessor,
 	BoundsInterpolationProps,
-	BoundsScopedAccessors,
+	BoundsScopedAccessor,
 } from "../../../types/bounds.types";
-import type { BoundsOptions, BoundsOptionsResult } from "../types/options";
-import { createBoundTag } from "./create-bound-tag";
-import { createInterpolators } from "./create-interpolators";
+import type {
+	BoundsComputeOptions,
+	BoundsIdentity,
+	BoundsIdentityInput,
+	BoundsMathResult,
+	BoundsStyleResult,
+} from "../types/options";
+import { createBoundTag, normalizeBoundIdentity } from "./create-bound-tag";
 import { createLinkAccessor } from "./create-link-accessor";
-import { prepareBoundStyles } from "./prepare-bound-styles";
-
-type BoundsComputeResult<T extends BoundsOptions> = BoundsOptionsResult<T> &
-	BoundsScopedAccessors;
-
-type BoundsCompute = <T extends BoundsOptions>(
-	options: T,
-) => BoundsComputeResult<T>;
+import { prepareBoundStyles, syncActiveGroupId } from "./prepare-bound-styles";
 
-type BoundsAccessorCore = BoundsCompute &
-	ReturnType<typeof createLinkAccessor> &
-	ReturnType<typeof createInterpolators>;
-
-type ExtendBoundsResultParams<T extends BoundsOptions> = {
-	target: BoundsComputeResult<T>;
+type ExtendBoundsResultParams = {
+	target: BoundsScopedAccessor;
+	identity: BoundsIdentity;
 	props: BoundsInterpolationProps;
 	tag: string | undefined;
 };
 
 type CreateBoundsAccessorCoreParams = {
 	getProps: () => BoundsInterpolationProps;
-	extendResult?: <T extends BoundsOptions>(
-		params: ExtendBoundsResultParams<T>,
-	) => void;
+	extendResult?: (params: ExtendBoundsResultParams) => void;
 };
 
 const createBoundsAccessorParts = ({
@@ -38,124 +32,79 @@ const createBoundsAccessorParts = ({
 }: CreateBoundsAccessorCoreParams) => {
 	"worklet";
 
-	const { getMeasured, getSnapshot, getLink } = createLinkAccessor(getProps);
-	const { interpolateStyle, interpolateBounds } = createInterpolators({
-		getProps,
-		getLink,
-	});
+	const { getLink } = createLinkAccessor(getProps);
 
-	const computeBounds = (<T extends BoundsOptions>(
-		params?: T,
-	): BoundsComputeResult<T> => {
+	const createScopedBounds = ((
+		identity: BoundsIdentityInput,
+	): BoundsScopedAccessor => {
 		"worklet";
 		const props = getProps();
-		const options = (params ?? { id: "" }) as T;
-		const tag = createBoundTag({
-			id: options.id,
-			group: options.group,
-		});
-
-		const computed = prepareBoundStyles({
+		const normalizedIdentity = normalizeBoundIdentity(identity);
+		const tag = createBoundTag(normalizedIdentity);
+		syncActiveGroupId({
 			props,
-			options,
-			syncGroupActiveId: true,
+			id: normalizedIdentity.id,
+			group: normalizedIdentity.group,
 		});
-		const scopedTag = tag ?? "";
-		const target = Object.isExtensible(computed) ? computed : { ...computed };
 
-		Object.defineProperties(target, {
-			getMeasured: {
-				value: (key?: string) => {
-					"worklet";
-					return getMeasured(scopedTag, key);
-				},
-				enumerable: false,
-				configurable: true,
-			},
-			getSnapshot: {
-				value: (key?: string) => {
-					"worklet";
-					return getSnapshot(scopedTag, key);
-				},
-				enumerable: false,
-				configurable: true,
+		const scoped: BoundsScopedAccessor = {
+			styles: (options?: BoundsComputeOptions): BoundsStyleResult => {
+				"worklet";
+				return prepareBoundStyles({
+					props,
+					options: {
+						...options,
+						id: normalizedIdentity.id,
+						group: normalizedIdentity.group,
+					},
+				}) as BoundsStyleResult;
 			},
-			getLink: {
-				value: () => {
-					"worklet";
-					return getLink(scopedTag);
-				},
-				enumerable: false,
-				configurable: true,
+			math: <T extends BoundsComputeOptions = BoundsComputeOptions>(
+				options?: T,
+			): BoundsMathResult<T> => {
+				"worklet";
+				return prepareBoundStyles({
+					props,
+					options: {
+						...options,
+						id: normalizedIdentity.id,
+						group: normalizedIdentity.group,
+						raw: true,
+					},
+				}) as BoundsMathResult<T>;
 			},
-			interpolateStyle: {
-				value: (
-					property: Parameters<typeof interpolateStyle>[1],
-					fallback?: number,
-				) => {
-					"worklet";
-					return interpolateStyle(scopedTag, property, fallback);
-				},
-				enumerable: false,
-				configurable: true,
+			link: (id?: BoundsIdentityInput) => {
+				"worklet";
+				const linkIdentity =
+					id == null
+						? normalizedIdentity
+						: normalizeBoundIdentity(id, normalizedIdentity.group);
+				const linkTag = createBoundTag(linkIdentity);
+				return getLink(linkTag ?? "");
 			},
-			interpolateBounds: {
-				value: (
-					property: Parameters<typeof interpolateBounds>[1],
-					fallbackOrTargetKey?: Parameters<typeof interpolateBounds>[2],
-					fallback?: number,
-				) => {
-					"worklet";
-					return interpolateBounds(
-						scopedTag,
-						property,
-						fallbackOrTargetKey,
-						fallback,
-					);
-				},
-				enumerable: false,
-				configurable: true,
-			},
-		});
+		} as BoundsScopedAccessor;
 
 		extendResult?.({
-			target: target as BoundsComputeResult<T>,
+			target: scoped,
+			identity: normalizedIdentity,
 			props,
 			tag,
 		});
 
-		return target as BoundsComputeResult<T>;
-	}) as BoundsCompute;
+		return scoped;
+	}) as BoundsAccessor;
 
 	return {
-		computeBounds,
-		getMeasured,
-		getSnapshot,
-		getLink,
-		interpolateStyle,
-		interpolateBounds,
+		createScopedBounds,
 	};
 };
 
 export const createBoundsAccessorCore = (
 	params: CreateBoundsAccessorCoreParams,
-): BoundsAccessorCore => {
+): BoundsAccessor => {
 	"worklet";
 
-	const {
-		computeBounds,
-		getMeasured,
-		getSnapshot,
-		getLink,
-		interpolateStyle,
-		interpolateBounds,
-	} = createBoundsAccessorParts(params);
+	const { createScopedBounds } = createBoundsAccessorParts(params);
 
-	return Object.assign(computeBounds, {
-		getMeasured,
-		getSnapshot,
-		getLink,
-		interpolateStyle,
-		interpolateBounds,
-	}) as BoundsAccessorCore;
+	return createScopedBounds;
 };

package/src/shared/utils/bounds/helpers/create-link-accessor.ts

@@ -1,107 +1,37 @@
-import { getEntry } from "../../../stores/bounds/internals/entries";
 import { getResolvedLink } from "../../../stores/bounds/internals/links";
-import type {
-	MeasuredEntry,
-	ResolvedTransitionPair,
-	TagLink,
-} from "../../../stores/bounds/types";
 import type {
 	BoundsInterpolationProps,
 	BoundsLink,
-	BoundsLinkComputeOptions,
 } from "../../../types/bounds.types";
-import type { BoundId, BoundsOptionsResult } from "../types/options";
-import { prepareBoundStyles } from "./prepare-bound-styles";
+import type { BoundId } from "../types/options";
 import { resolveBoundsPairKey } from "./resolve-bounds-pair-key";
 
 type GetProps = () => BoundsInterpolationProps;
 
 export type LinkAccessor = {
-	getMeasured: (tag: BoundId, key?: string) => MeasuredEntry | null;
-	getSnapshot: (tag: BoundId, key?: string) => MeasuredEntry | null;
 	getLink: (tag: BoundId) => BoundsLink | null;
 };
 
-const toResolvedPair = (link: TagLink): ResolvedTransitionPair => {
-	"worklet";
-	return {
-		sourceBounds: link.source.bounds,
-		destinationBounds: link.destination?.bounds ?? null,
-		sourceStyles: link.source.styles,
-		destinationStyles: link.destination?.styles ?? null,
-		sourceScreenKey: link.source.screenKey,
-		destinationScreenKey: link.destination?.screenKey ?? null,
-	};
-};
-
 export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 	"worklet";
 
-	const getMeasured = (tag: BoundId, key?: string): MeasuredEntry | null => {
-		"worklet";
-		if (!key) return null;
-		const entry = getEntry(String(tag), key);
-		return entry?.bounds ? (entry as MeasuredEntry) : null;
-	};
-
-	const getSnapshot = (tag: BoundId, key?: string): MeasuredEntry | null => {
-		"worklet";
-		return getMeasured(tag, key);
-	};
-
 	const getLink = (tag: BoundId): BoundsLink | null => {
 		"worklet";
 		const props = getProps();
 		const stringTag = String(tag);
 		const pairKey = resolveBoundsPairKey(props);
-		const resolved = pairKey
-			? getResolvedLink(pairKey, stringTag)
-			: { tag: stringTag, link: null };
-		const selectedTag = resolved.tag;
-		const link = resolved.link;
-
-		if (!link) return null;
-		const resolvedPair = toResolvedPair(link);
-
-		return {
-			id: selectedTag,
-			source: link.source
-				? { bounds: link.source.bounds, styles: link.source.styles }
-				: null,
-			destination: link.destination
-				? { bounds: link.destination.bounds, styles: link.destination.styles }
-				: null,
-			initialSource: link.initialSource
-				? {
-						bounds: link.initialSource.bounds,
-						styles: link.initialSource.styles,
-					}
-				: null,
-			initialDestination: link.initialDestination
-				? {
-						bounds: link.initialDestination.bounds,
-						styles: link.initialDestination.styles,
-					}
-				: null,
-			compute: <T extends BoundsLinkComputeOptions>(
-				computeOptions: T,
-			): BoundsOptionsResult<T & { id: string }> => {
-				"worklet";
-				return prepareBoundStyles({
-					props,
-					options: {
-						...computeOptions,
-						id: selectedTag,
-					} as T & { id: string },
-					resolvedPair,
-				});
-			},
-		};
+		if (!pairKey) return null;
+
+		const resolved = getResolvedLink(pairKey, stringTag);
+		return resolved.link
+			? {
+					id: resolved.tag,
+					...resolved.link,
+				}
+			: null;
 	};
 
 	return {
-		getMeasured,
-		getSnapshot,
 		getLink,
 	};
 };

package/src/shared/utils/bounds/helpers/prepare-bound-styles.ts

@@ -1,5 +1,8 @@
 import { getEntry } from "../../../stores/bounds/internals/entries";
-import { setActiveGroupId } from "../../../stores/bounds/internals/links";
+import {
+	getActiveGroupId,
+	setActiveGroupId,
+} from "../../../stores/bounds/internals/links";
 import type { ResolvedTransitionPair } from "../../../stores/bounds/types";
 import type { BoundsInterpolationProps } from "../../../types/bounds.types";
 import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
@@ -18,7 +21,6 @@ type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
 	props: BaseInterpolatorProps;
 	options: T;
 	resolvedPair?: ResolvedTransitionPair;
-	syncGroupActiveId?: boolean;
 };
 
 type BuildBoundsOptionsParams = {
@@ -55,7 +57,7 @@ const buildBoundsOptions = ({
 	return resolved;
 };
 
-const syncActiveGroupId = (params: {
+export const syncActiveGroupId = (params: {
 	props: BoundsInterpolationProps;
 	id?: BoundId;
 	group?: string;
@@ -67,25 +69,19 @@ const syncActiveGroupId = (params: {
 	const pairKey = resolveBoundsPairKey(props);
 	if (!pairKey) return;
 
-	setActiveGroupId(pairKey, group, String(id));
+	const activeId = String(id);
+	if (getActiveGroupId(pairKey, group) === activeId) return;
+
+	setActiveGroupId(pairKey, group, activeId);
 };
 
 export const prepareBoundStyles = <T extends BoundsOptions>({
 	props,
 	options,
 	resolvedPair,
-	syncGroupActiveId = false,
 }: ComputeResolvedBoundsStylesParams<T>): BoundsOptionsResult<T> => {
 	"worklet";
 
-	if (syncGroupActiveId) {
-		syncActiveGroupId({
-			props,
-			id: options.id,
-			group: options.group,
-		});
-	}
-
 	const resolved = buildBoundsOptions({
 		props,
 		id: options.id,
@@ -101,6 +97,7 @@ export const prepareBoundStyles = <T extends BoundsOptions>({
 			next: props.next,
 			progress: resolved.progress ?? props.progress,
 			dimensions: props.layouts.screen,
+			interpolationProps: props,
 		},
 		resolved,
 		resolvedPair,