react-native-screen-transitions 4.0.0-alpha.2 → 4.0.0-alpha.3

package/src/utils/create-provider.tsx

@@ -2,6 +2,18 @@
  * THANK YOU @MatiPl01
  * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/providers/utils/createProvider.tsx
  * SUPER COOL AMAZING UTILITY
+ *
+ * Store-only provider: values propagate exclusively through a subscription
+ * store read with `use${Name}Store(selector)`. There is intentionally no raw
+ * context channel, so consumers subscribe only to the values they render.
+ *
+ * Factories do not memoize what they return:
+ * - `value`: the store shallow-compares snapshots and keeps the previous
+ *   object when the contents are unchanged. Derived object and array fields
+ *   must still have stable identities.
+ * - `children`: passed-through children keep their identity across
+ *   provider-local renders. Factories that wrap children should use a
+ *   module-level memoized component for the wrapper.
  */
 import {
 	createContext,
@@ -9,13 +21,10 @@ import {
 	useCallback,
 	useContext,
 	useLayoutEffect,
-	useMemo,
 	useRef,
 	useSyncExternalStore,
 } from "react";
 
-type InnerProviderComponent = React.FC<{ children: ReactNode }>;
-
 type ProviderSnapshot<
 	ContextValue,
 	Guarded extends boolean,
@@ -32,9 +41,8 @@ type ProviderStoreHook<ContextValue, Guarded extends boolean> = {
 	): Selected;
 };
 
-type ProviderOptionalStoreHook<ContextValue> = {
-	(): ContextValue | null;
-	<Selected>(selector: (value: ContextValue | null) => Selected): Selected;
+export type ProviderFactoryInternals<ContextValue> = {
+	useParentStore: ProviderStoreHook<ContextValue, false>;
 };
 
 export interface ProviderStoreApi<ContextValue> {
@@ -53,6 +61,42 @@ const NullProviderStore: ProviderStoreApi<never> = {
 	subscribe: () => () => {},
 };
 
+const shallowEqual = (a: unknown, b: unknown): boolean => {
+	if (Object.is(a, b)) {
+		return true;
+	}
+
+	if (
+		typeof a !== "object" ||
+		a === null ||
+		typeof b !== "object" ||
+		b === null
+	) {
+		return false;
+	}
+
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+
+	if (aKeys.length !== bKeys.length) {
+		return false;
+	}
+
+	for (const key of aKeys) {
+		if (
+			!(key in b) ||
+			!Object.is(
+				(a as Record<string, unknown>)[key],
+				(b as Record<string, unknown>)[key],
+			)
+		) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
 const createProviderStore = <ContextValue,>(
 	initialSnapshot: ContextValue | null,
 ): MutableProviderStoreApi<ContextValue> => {
@@ -67,7 +111,7 @@ const createProviderStore = <ContextValue,>(
 			}
 		},
 		setSnapshot: (nextSnapshot) => {
-			if (Object.is(snapshot, nextSnapshot)) {
+			if (shallowEqual(snapshot, nextSnapshot)) {
 				return false;
 			}
 
@@ -88,36 +132,73 @@ export default function createProvider<
 	Guarded extends boolean = true,
 >(name: ProviderName, options?: { guarded?: Guarded }) {
 	return <ProviderProps extends object, ContextValue>(
-		factory: (props: ProviderProps) => {
+		factory: (
+			props: ProviderProps,
+			internals: ProviderFactoryInternals<ContextValue>,
+		) => {
 			value?: ContextValue;
 			enabled?: boolean;
-			children?:
-				| ReactNode
-				| ((
-						innerProvider: {
-							[K in ProviderName as `${K}Provider`]: InnerProviderComponent;
-						},
-				  ) => ReactNode);
+			children?: ReactNode;
 		},
 	) => {
 		const { guarded = true } = options ?? {};
 		const providerDisplayName = `${name}Provider`;
-		const innerProviderDisplayName = `${name}InnerProvider`;
-
-		const Context = createContext<ContextValue | null>(null);
-		Context.displayName = name;
 
 		const StoreContext = createContext<ProviderStoreApi<ContextValue> | null>(
 			null,
 		);
 		StoreContext.displayName = `${name}Store`;
 
+		const createStoreHook = (strict: boolean) => {
+			return <Selected,>(
+				selector?: (value: ContextValue | null) => Selected,
+			): Selected | ContextValue | null => {
+				const store = useContext(StoreContext);
+				const resolvedStore =
+					store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
+				const selectorRef = useRef<typeof selector>(selector);
+				selectorRef.current = selector;
+
+				const getSelectedSnapshot = useCallback(() => {
+					if (strict && store === null) {
+						throw new Error(
+							`${name} store must be used within a ${name}Provider`,
+						);
+					}
+
+					const snapshot = resolvedStore.getSnapshot();
+
+					if (strict && snapshot === null) {
+						throw new Error(
+							`${name} store must be used within an enabled ${name}Provider`,
+						);
+					}
+
+					return selectorRef.current ? selectorRef.current(snapshot) : snapshot;
+				}, [resolvedStore, store]);
+
+				return useSyncExternalStore(
+					resolvedStore.subscribe,
+					getSelectedSnapshot,
+					getSelectedSnapshot,
+				);
+			};
+		};
+
+		const useStoreSelector = createStoreHook(guarded);
+		const factoryInternals: ProviderFactoryInternals<ContextValue> = {
+			useParentStore: createStoreHook(false) as ProviderStoreHook<
+				ContextValue,
+				false
+			>,
+		};
+
 		const Provider: React.FC<ProviderProps> = (props) => {
 			const {
 				children = (props as { children?: ReactNode }).children,
 				enabled = true,
 				value,
-			} = factory(props);
+			} = factory(props, factoryInternals);
 
 			if (!value) {
 				throw new Error(
@@ -125,23 +206,19 @@ export default function createProvider<
 				);
 			}
 
-			const memoValue = useMemo(
-				() => (enabled ? value : null),
-				[enabled, value],
-			);
-
+			const snapshotValue = enabled ? value : null;
 			const storeRef = useRef<MutableProviderStoreApi<ContextValue> | null>(
 				null,
 			);
 			const pendingNotifyRef = useRef(false);
 
 			if (storeRef.current === null) {
-				storeRef.current = createProviderStore<ContextValue>(memoValue);
+				storeRef.current = createProviderStore<ContextValue>(snapshotValue);
 			}
 			const store = storeRef.current;
 
 			pendingNotifyRef.current =
-				store.setSnapshot(memoValue) || pendingNotifyRef.current;
+				store.setSnapshot(snapshotValue) || pendingNotifyRef.current;
 
 			useLayoutEffect(() => {
 				if (!pendingNotifyRef.current) {
@@ -152,130 +229,22 @@ export default function createProvider<
 				store.notify();
 			});
 
-			// Per-instance ref ensures InnerProvider reads latest value while keeping
-			// a stable component reference.
-			const valueRef = useRef<ContextValue | null>(memoValue);
-			valueRef.current = memoValue;
-
-			const InnerProvider = useMemo((): InnerProviderComponent => {
-				const NamedInnerProvider: InnerProviderComponent = ({ children }) => (
-					<StoreContext.Provider value={store}>
-						<Context.Provider value={valueRef.current}>
-							{children}
-						</Context.Provider>
-					</StoreContext.Provider>
-				);
-
-				NamedInnerProvider.displayName = innerProviderDisplayName;
-
-				return NamedInnerProvider;
-			}, [store]);
-
-			if (typeof children === "function") {
-				return children({
-					[`${name}Provider`]: InnerProvider,
-				} as { [K in ProviderName as `${K}Provider`]: InnerProviderComponent });
-			}
-
 			return (
-				<StoreContext.Provider value={store}>
-					<Context.Provider value={memoValue}>{children}</Context.Provider>
-				</StoreContext.Provider>
+				<StoreContext.Provider value={store}>{children}</StoreContext.Provider>
 			);
 		};
 		Provider.displayName = providerDisplayName;
 
-		const useEnhancedContext = (): ContextValue | null => {
-			const context = useContext(Context);
-
-			if (guarded && context === null) {
-				throw new Error(
-					`${name} context must be used within a ${name}Provider`,
-				);
-			}
-
-			return context;
-		};
-
-		const useStoreSelector = <Selected,>(
-			selector?: (value: ContextValue | null) => Selected,
-		): Selected | ContextValue | null => {
-			const store = useContext(StoreContext);
-			const resolvedStore =
-				store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
-			const selectorRef = useRef<typeof selector>(selector);
-			selectorRef.current = selector;
-
-			const getSelectedSnapshot = useCallback(() => {
-				if (guarded && store === null) {
-					throw new Error(
-						`${name} store must be used within a ${name}Provider`,
-					);
-				}
-
-				const snapshot = resolvedStore.getSnapshot();
-
-				if (guarded && snapshot === null) {
-					throw new Error(
-						`${name} store must be used within an enabled ${name}Provider`,
-					);
-				}
-
-				return selectorRef.current ? selectorRef.current(snapshot) : snapshot;
-			}, [resolvedStore, store]);
-
-			return useSyncExternalStore(
-				resolvedStore.subscribe,
-				getSelectedSnapshot,
-				getSelectedSnapshot,
-			);
-		};
-
-		const useOptionalStoreSelector = <Selected,>(
-			selector?: (value: ContextValue | null) => Selected,
-		): Selected | ContextValue | null => {
-			const store = useContext(StoreContext);
-			const resolvedStore =
-				store ?? (NullProviderStore as ProviderStoreApi<ContextValue>);
-			const selectorRef = useRef<typeof selector>(selector);
-			selectorRef.current = selector;
-
-			const getSelectedSnapshot = useCallback(() => {
-				const snapshot = resolvedStore.getSnapshot();
-				return selectorRef.current ? selectorRef.current(snapshot) : snapshot;
-			}, [resolvedStore]);
-
-			return useSyncExternalStore(
-				resolvedStore.subscribe,
-				getSelectedSnapshot,
-				getSelectedSnapshot,
-			);
-		};
-
 		return {
-			[`${name}Context`]: Context,
-			[`${name}StoreContext`]: StoreContext,
 			[`${name}Provider`]: Provider,
-			[`use${name}Context`]: useEnhancedContext,
 			[`use${name}Store`]: useStoreSelector,
-			[`use${name}OptionalStore`]: useOptionalStoreSelector,
 		} as {
-			[P in ProviderName as `${P}Context`]: React.Context<ContextValue>;
-		} & {
-			[P in ProviderName as `${P}StoreContext`]: React.Context<ProviderStoreApi<ContextValue> | null>;
-		} & {
 			[P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>;
-		} & {
-			[P in ProviderName as `use${P}Context`]: () => Guarded extends true
-				? ContextValue
-				: ContextValue | null;
 		} & {
 			[P in ProviderName as `use${P}Store`]: ProviderStoreHook<
 				ContextValue,
 				Guarded
 			>;
-		} & {
-			[P in ProviderName as `use${P}OptionalStore`]: ProviderOptionalStoreHook<ContextValue>;
 		};
 	};
 }

package/lib/commonjs/components/boundary/portal/components/boundary-portal/helpers/host-name.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createBoundaryPortalHostName = void 0;
-const BOUNDARY_PORTAL_HOST_NAME_SUFFIX = "-portal-host";
-const createBoundaryPortalHostName = (hostKey, boundaryId, pairKey) => {
-  "worklet";
-
-  return `${hostKey}-${pairKey ? `${pairKey}-` : ""}${boundaryId}${BOUNDARY_PORTAL_HOST_NAME_SUFFIX}`;
-};
-exports.createBoundaryPortalHostName = createBoundaryPortalHostName;
-//# sourceMappingURL=host-name.js.map

package/lib/commonjs/components/boundary/portal/components/boundary-portal/helpers/host-name.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BOUNDARY_PORTAL_HOST_NAME_SUFFIX","createBoundaryPortalHostName","hostKey","boundaryId","pairKey","exports"],"sourceRoot":"../../../../../../../../src","sources":["components/boundary/portal/components/boundary-portal/helpers/host-name.ts"],"mappings":";;;;;;AAAA,MAAMA,gCAAgC,GAAG,cAAc;AAEhD,MAAMC,4BAA4B,GAAGA,CAC3CC,OAAe,EACfC,UAAkB,EAClBC,OAAuB,KACnB;EACJ,SAAS;;EACT,OAAO,GAAGF,OAAO,IAAIE,OAAO,GAAG,GAAGA,OAAO,GAAG,GAAG,EAAE,GAAGD,UAAU,GAAGH,gCAAgC,EAAE;AACpG,CAAC;AAACK,OAAA,CAAAJ,4BAAA,GAAAA,4BAAA","ignoreList":[]}

package/lib/commonjs/components/boundary/portal/utils/handoff-target.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resolveEnteringHandoffTarget = void 0;
-var _linkPairs = require("../../../../stores/bounds/helpers/link-pairs.helpers");
-/** Resolve only the immediate A -> B entering handoff. */
-const resolveEnteringHandoffTarget = ({
-  animationProgress,
-  boundaryId,
-  currentScreenKey,
-  pairsState,
-  sourcePairKey
-}) => {
-  "worklet";
-
-  if (!sourcePairKey || animationProgress <= 0) {
-    return null;
-  }
-  const pair = pairsState[sourcePairKey];
-  const linkKey = (0, _linkPairs.getLinkKeyFromTag)(boundaryId);
-  const link = pair?.links[linkKey];
-  if (link?.status !== "complete" || link.source.screenKey !== currentScreenKey || !link.source.handoff || !link.destination.handoff) {
-    return null;
-  }
-  if (link.group && pair.groups[link.group]?.activeId !== linkKey) {
-    return null;
-  }
-  return link.destination.screenKey;
-};
-exports.resolveEnteringHandoffTarget = resolveEnteringHandoffTarget;
-//# sourceMappingURL=handoff-target.js.map

package/lib/commonjs/components/boundary/portal/utils/handoff-target.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_linkPairs","require","resolveEnteringHandoffTarget","animationProgress","boundaryId","currentScreenKey","pairsState","sourcePairKey","pair","linkKey","getLinkKeyFromTag","link","links","status","source","screenKey","handoff","destination","group","groups","activeId","exports"],"sourceRoot":"../../../../../../src","sources":["components/boundary/portal/utils/handoff-target.ts"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAeA;AACO,MAAMC,4BAA4B,GAAGA,CAAC;EAC5CC,iBAAiB;EACjBC,UAAU;EACVC,gBAAgB;EAChBC,UAAU;EACVC;AACmC,CAAC,KAAuB;EAC3D,SAAS;;EAET,IAAI,CAACA,aAAa,IAAIJ,iBAAiB,IAAI,CAAC,EAAE;IAC7C,OAAO,IAAI;EACZ;EAEA,MAAMK,IAAI,GAAGF,UAAU,CAACC,aAAa,CAAC;EACtC,MAAME,OAAO,GAAG,IAAAC,4BAAiB,EAACN,UAAU,CAAC;EAC7C,MAAMO,IAAI,GAAGH,IAAI,EAAEI,KAAK,CAACH,OAAO,CAAC;EAEjC,IACCE,IAAI,EAAEE,MAAM,KAAK,UAAU,IAC3BF,IAAI,CAACG,MAAM,CAACC,SAAS,KAAKV,gBAAgB,IAC1C,CAACM,IAAI,CAACG,MAAM,CAACE,OAAO,IACpB,CAACL,IAAI,CAACM,WAAW,CAACD,OAAO,EACxB;IACD,OAAO,IAAI;EACZ;EAEA,IAAIL,IAAI,CAACO,KAAK,IAAIV,IAAI,CAACW,MAAM,CAACR,IAAI,CAACO,KAAK,CAAC,EAAEE,QAAQ,KAAKX,OAAO,EAAE;IAChE,OAAO,IAAI;EACZ;EAEA,OAAOE,IAAI,CAACM,WAAW,CAACF,SAAS;AAClC,CAAC;AAACM,OAAA,CAAAnB,4BAAA,GAAAA,4BAAA","ignoreList":[]}

package/lib/commonjs/hooks/use-stable-callback-value.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useStableCallbackValue;
-var _react = require("react");
-var _reactNativeReanimated = require("react-native-reanimated");
-var _reactNativeWorklets = require("react-native-worklets");
-/**
- * Credit:
- * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/integrations/reanimated/hooks/useStableCallbackValue.ts
- */
-
-function useMutableValue(initialValue) {
-  const [mutable] = (0, _react.useState)(() => (0, _reactNativeReanimated.makeMutable)(initialValue));
-  (0, _react.useEffect)(() => {
-    return () => {
-      (0, _reactNativeReanimated.cancelAnimation)(mutable);
-    };
-  }, [mutable]);
-  return mutable;
-}
-
-// We cannot store a function as a SharedValue because reanimated will treat
-// it as an animation and will try to execute the animation when assigned
-// to the SharedValue. Since we want the function to be treated as a value,
-// we wrap it in an object and store the object in the SharedValue.
-
-const wrap = callback => {
-  if ((0, _reactNativeWorklets.isWorkletFunction)(callback)) {
-    return {
-      call: callback
-    };
-  }
-  return {
-    call: (...args) => {
-      "worklet";
-
-      (0, _reactNativeWorklets.scheduleOnRN)(callback, ...args);
-    }
-  };
-};
-
-/** Creates a stable worklet callback that can be called from the UI runtime
- * @param callback The JavaScript or worklet function to be called
- * @returns A worklet function that can be safely called from the UI thread
- * @default Behavior:
- * - If passed a regular JS function, schedules it on the JS thread
- * - If passed a worklet function, calls it directly on the UI thread
- * @important The returned function maintains a stable reference and properly handles
- * thread execution based on the input callback type
- */
-function useStableCallbackValue(callback) {
-  const stableCallback = useMutableValue(null);
-  (0, _react.useEffect)(() => {
-    if (callback) {
-      stableCallback.set(wrap(callback));
-    } else {
-      stableCallback.set(null);
-    }
-  }, [callback, stableCallback]);
-  return (0, _react.useCallback)((...args) => {
-    "worklet";
-
-    stableCallback.get()?.call(...args);
-  }, [stableCallback]);
-}
-//# sourceMappingURL=use-stable-callback-value.js.map

package/lib/commonjs/hooks/use-stable-callback-value.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNativeReanimated","_reactNativeWorklets","useMutableValue","initialValue","mutable","useState","makeMutable","useEffect","cancelAnimation","wrap","callback","isWorkletFunction","call","args","scheduleOnRN","useStableCallbackValue","stableCallback","set","useCallback","get"],"sourceRoot":"../../../src","sources":["hooks/use-stable-callback-value.ts"],"mappings":";;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AANA;AACA;AACA;AACA;;AAOA,SAASG,eAAeA,CAAIC,YAAe,EAAE;EAC5C,MAAM,CAACC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM,IAAAC,kCAAW,EAACH,YAAY,CAAC,CAAC;EAE3D,IAAAI,gBAAS,EAAC,MAAM;IACf,OAAO,MAAM;MACZ,IAAAC,sCAAe,EAACJ,OAAO,CAAC;IACzB,CAAC;EACF,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,OAAOA,OAAO;AACf;;AAEA;AACA;AACA;AACA;;AAKA,MAAMK,IAAI,GAA2BC,QAAW,IAAyB;EACxE,IAAI,IAAAC,sCAAiB,EAACD,QAAQ,CAAC,EAAE;IAChC,OAAO;MAAEE,IAAI,EAAEF;IAAS,CAAC;EAC1B;EACA,OAAO;IACNE,IAAI,EAAGA,CAAC,GAAGC,IAAmB,KAAK;MAClC,SAAS;;MACT,IAAAC,iCAAY,EAACJ,QAAQ,EAAE,GAAGG,IAAI,CAAC;IAChC;EACD,CAAC;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASE,sBAAsBA,CAC7CL,QAAY,EACX;EACD,MAAMM,cAAc,GAAGd,eAAe,CAA4B,IAAI,CAAC;EAEvE,IAAAK,gBAAS,EAAC,MAAM;IACf,IAAIG,QAAQ,EAAE;MACbM,cAAc,CAACC,GAAG,CAACR,IAAI,CAACC,QAAQ,CAAC,CAAC;IACnC,CAAC,MAAM;MACNM,cAAc,CAACC,GAAG,CAAC,IAAI,CAAC;IACzB;EACD,CAAC,EAAE,CAACP,QAAQ,EAAEM,cAAc,CAAC,CAAC;EAE9B,OAAO,IAAAE,kBAAW,EACjB,CAAC,GAAGL,IAAmB,KAAK;IAC3B,SAAS;;IACTG,cAAc,CAACG,GAAG,CAAC,CAAC,EAAEP,IAAI,CAAC,GAAGC,IAAI,CAAC;EACpC,CAAC,EACD,CAACG,cAAc,CAChB,CAAC;AACF","ignoreList":[]}