@gtkx/navigation 2.0.0-beta.10 → 2.0.0-beta.11

package/src/stack/stack-pages.ts

@@ -33,18 +33,6 @@ const neededKeys = (state: StackState, closing: StackDescriptorMap, offset: numb
 const hasSameMembers = (left: readonly string[], right: readonly string[]): boolean =>
     left.length === right.length && left.every((key) => right.includes(key));
 
-const hasRefreshedFocus = (tracking: PageTracking, descriptors: StackDescriptorMap): boolean => {
-    const { focusedKey } = tracking;
-
-    if (focusedKey === undefined) {
-        return false;
-    }
-
-    const next = descriptors[focusedKey];
-
-    return next !== undefined && tracking.descriptors[focusedKey]?.route !== next.route;
-};
-
 const appendOrder = (previous: readonly string[], needed: readonly string[]): string[] => [
     ...previous.filter((key) => needed.includes(key)),
     ...needed.filter((key) => !previous.includes(key)),
@@ -114,7 +102,7 @@ const useStackPages = (
 
     if (!hasSameMembers(tracking.order, neededKeys(state, tracking.closing, offset)) ||
         tracking.focusedKey !== getFocusedKey(state, offset) ||
-        hasRefreshedFocus(tracking, descriptors)) {
+        tracking.descriptors !== descriptors) {
         setTracking(advance(tracking, state, descriptors, offset));
     }
 

package/src/stack/stack-view.tsx

@@ -11,14 +11,12 @@ import type {
     StackNavigationConfig,
     StackNavigationEventMap,
     StackNavigationHelpers,
-    StackNavigationOptions,
 } from "./types.js";
 import { HeaderBar } from "../shared/header-bar.js";
 import { useStackPages } from "./stack-pages.js";
 import { reconcilePoppedStack, syncNavigationStack } from "./sync-navigation-stack.js";
 
 type ViewRef = RefObject<Adw.NavigationView | null>;
-type MutableOptions = Record<string, StackNavigationOptions>;
 
 type StackViewProps = StackNavigationConfig & {
     state: StackNavigationState<ParamListBase>;
@@ -59,18 +57,6 @@ const useLatest = <T,>(value: T): RefObject<T> => {
     return ref;
 };
 
-const useTrackedOptions = (descriptors: StackDescriptorMap): RefObject<MutableOptions> => {
-    const optionsRef = useRef<MutableOptions>({});
-
-    useEffect(() => {
-        for (const [key, descriptor] of Object.entries(descriptors)) {
-            optionsRef.current[key] = descriptor.options;
-        }
-    }, [descriptors]);
-
-    return optionsRef;
-};
-
 const useStackSync = (
     viewRef: ViewRef,
     state: StackNavigationState<ParamListBase>,
@@ -179,8 +165,8 @@ const StackPage = ({ descriptor, previous, navigation, onHidden }: StackPageProp
 const StackView = (props: StackViewProps): ReactNode => {
     const { state, navigation, descriptors, describe, popOnEscape, offset = 0 } = props;
     const viewRef = useRef<Adw.NavigationView | null>(null);
-    const options = useTrackedOptions(descriptors);
     const { pages, release } = useStackPages(state, descriptors, describe, offset);
+    const options = useLatest<OptionsByKey>(Object.fromEntries(pages.map((page) => [page.route.key, page.options])));
     const onPopped = usePoppedHandler(viewRef, navigation, options, offset);
     useStackSync(viewRef, state, options, offset);
 

package/src/tabs/create-tab-navigator.tsx

@@ -41,7 +41,7 @@ const createTabScreen: StaticScreenFactory<TabTypeBag> = createScreenFactory<Tab
 
 /** Renders the screens of a {@link createTabNavigator} as pages of an `AdwViewStack` with a view switcher. */
 function TabNavigator({ tabBarPosition, ...options }: TabNavigatorProps): ReactNode {
-    const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
+    const { state, descriptors, navigation, render } = useNavigationBuilder<
         TabNavigationState<ParamListBase>,
         TabRouterOptions,
         TabActionHelpers<ParamListBase>,
@@ -49,10 +49,8 @@ function TabNavigator({ tabBarPosition, ...options }: TabNavigatorProps): ReactN
         TabNavigationEventMap
     >(TabRouter, options);
 
-    return (
-        <NavigationContent>
-            <TabView tabBarPosition={tabBarPosition} state={state} navigation={navigation} descriptors={descriptors} />
-        </NavigationContent>
+    return render(
+        <TabView tabBarPosition={tabBarPosition} state={state} navigation={navigation} descriptors={descriptors} />,
     );
 }
 

package/src/tabs/tab-view.tsx

@@ -8,7 +8,6 @@ import type { TabDescriptor, TabDescriptorMap, TabNavigationConfig, TabNavigatio
 import { HeaderBar } from "../shared/header-bar.js";
 import { getFocusedRoute, requireDescriptor } from "../shared/routes.js";
 import { ScenePage } from "../shared/scene-page.js";
-import { useLoadedRoutes } from "../shared/use-loaded-routes.js";
 import { usePopToTopOnBlur } from "../shared/use-pop-to-top-on-blur.js";
 
 type TabViewProps = TabNavigationConfig & {
@@ -88,7 +87,6 @@ const TabView = ({ state, navigation, descriptors, tabBarPosition = "top" }: Tab
     const [stack, setStack] = useState<Adw.ViewStack | null>(null);
     const focused = getFocusedRoute(state);
     const descriptor = requireDescriptor(descriptors, focused.key);
-    const loaded = useLoadedRoutes(focused.key, state.preloadedRouteKeys);
     const onVisibleChildChanged = useTabSelection(navigation);
 
     const viewSwitcher = stack === null
@@ -115,7 +113,7 @@ const TabView = ({ state, navigation, descriptors, tabBarPosition = "top" }: Tab
                     <TabPage
                         key={route.key}
                         descriptor={requireDescriptor(descriptors, route.key)}
-                        isLoaded={loaded.has(route.key)}
+                        isLoaded={route.key === focused.key || state.preloadedRouteKeys.includes(route.key)}
                     />
                 ))}
             </AdwViewStack>

package/dist/shared/use-loaded-routes.d.ts

@@ -1,3 +0,0 @@
-declare const useLoadedRoutes: (focusedKey: string, preloadedKeys: readonly string[]) => ReadonlySet<string>;
-export { useLoadedRoutes };
-//# sourceMappingURL=use-loaded-routes.d.ts.map

package/dist/shared/use-loaded-routes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-loaded-routes.d.ts","sourceRoot":"","sources":["../../src/shared/use-loaded-routes.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe,GAAI,YAAY,MAAM,EAAE,eAAe,SAAS,MAAM,EAAE,KAAG,WAAW,CAAC,MAAM,CASjG,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/shared/use-loaded-routes.js

@@ -1,11 +0,0 @@
-import { useState } from "react";
-const useLoadedRoutes = (focusedKey, preloadedKeys) => {
-    const [loaded, setLoaded] = useState(() => new Set([focusedKey]));
-    const pending = [focusedKey, ...preloadedKeys].filter((key) => !loaded.has(key));
-    if (pending.length > 0) {
-        setLoaded(new Set([...loaded, ...pending]));
-    }
-    return loaded;
-};
-export { useLoadedRoutes };
-//# sourceMappingURL=use-loaded-routes.js.map

package/dist/shared/use-loaded-routes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-loaded-routes.js","sourceRoot":"","sources":["../../src/shared/use-loaded-routes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAE,aAAgC,EAAuB,EAAE;IAClG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACvF,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,GAAG,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAEjF,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACrB,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import { useState } from \"react\";\n\nconst useLoadedRoutes = (focusedKey: string, preloadedKeys: readonly string[]): ReadonlySet<string> => {\n    const [loaded, setLoaded] = useState<ReadonlySet<string>>(() => new Set([focusedKey]));\n    const pending = [focusedKey, ...preloadedKeys].filter((key) => !loaded.has(key));\n\n    if (pending.length > 0) {\n        setLoaded(new Set([...loaded, ...pending]));\n    }\n\n    return loaded;\n};\n\nexport { useLoadedRoutes };\n"]}

package/src/shared/use-loaded-routes.ts

@@ -1,14 +0,0 @@
-import { useState } from "react";
-
-const useLoadedRoutes = (focusedKey: string, preloadedKeys: readonly string[]): ReadonlySet<string> => {
-    const [loaded, setLoaded] = useState<ReadonlySet<string>>(() => new Set([focusedKey]));
-    const pending = [focusedKey, ...preloadedKeys].filter((key) => !loaded.has(key));
-
-    if (pending.length > 0) {
-        setLoaded(new Set([...loaded, ...pending]));
-    }
-
-    return loaded;
-};
-
-export { useLoadedRoutes };