@symbiote-native/navigation 2.1.0 → 2.2.0

package/src/vue/stack/index.ts

@@ -13,7 +13,12 @@
 import { defineComponent, h, shallowRef, useId } from '@vue/runtime-core';
 import type { VNode } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
-import { Platform, debugNodeId, dlog, isSymbioteNode } from '@symbiote-native/engine';
+import {
+  Platform,
+  debugNodeId,
+  dlog,
+  isSymbioteNode,
+} from '@symbiote-native/engine';
 import {
   NAVIGATION_EVENT_BLUR,
   NAVIGATION_EVENT_FOCUS,
@@ -48,7 +53,11 @@ import type {
 } from '../../core';
 import { NavigationScope, injectNavigationScope } from '../navigation-context';
 import { Screen } from '../screen';
-import type { IScreenOptionsArgs, IScreenProps, IVueScreenOptions } from '../screen';
+import type {
+  IScreenOptionsArgs,
+  IScreenProps,
+  IVueScreenOptions,
+} from '../screen';
 
 export type { INavigatorHandle } from '../../core';
 
@@ -62,7 +71,9 @@ export type IStackProps = {
 // backTitleVisible defaults to `true` on both platforms per the codegen spec's own default
 // (CT.WithDefault<boolean, 'true'>) - no ios/android divergence in v1 scope, so a single constant
 // stands in for the per-platform injection point ISliderPlatform-style adapters use elsewhere.
-const NAVIGATOR_PLATFORM: INavigatorPlatform = { defaultHeaderBackTitleVisible: true };
+const NAVIGATOR_PLATFORM: INavigatorPlatform = {
+  defaultHeaderBackTitleVisible: true,
+};
 
 type IScreenRegistryEntry = {
   component: IScreenProps['component'];
@@ -93,7 +104,9 @@ function asScreenOptionsOrResolver(value: unknown): IScreenProps['options'] {
   return asScreenOptions(value);
 }
 
-function collectRegistry(vnodes: readonly VNode[]): Map<string, IScreenRegistryEntry> {
+function collectRegistry(
+  vnodes: readonly VNode[],
+): Map<string, IScreenRegistryEntry> {
   const registry = new Map<string, IScreenRegistryEntry>();
   for (const vnode of vnodes) {
     if (vnode.type !== Screen || !isRecord(vnode.props)) continue;
@@ -115,7 +128,9 @@ function resolveScreenOptions(
   screenOptions: IVueScreenOptions | undefined,
 ): IVueScreenOptions {
   const own =
-    typeof entry.options === 'function' ? entry.options(screenOptionsArgs) : entry.options;
+    typeof entry.options === 'function'
+      ? entry.options(screenOptionsArgs)
+      : entry.options;
   return { ...screenOptions, ...own };
 }
 
@@ -168,7 +183,10 @@ const StackImpl = defineComponent<IStackProps>(
       });
     } else {
       initialState = createInitialNavigatorState(
-        createRoute(initialRouteName, initialRegistry.get(initialRouteName)?.initialParams),
+        createRoute(
+          initialRouteName,
+          initialRegistry.get(initialRouteName)?.initialParams,
+        ),
       );
     }
 
@@ -193,11 +211,13 @@ const StackImpl = defineComponent<IStackProps>(
     }
 
     const handle: INavigatorHandle = {
-      push: (name, params) => dispatch({ type: 'push', route: createRoute(name, params) }),
+      push: (name, params) =>
+        dispatch({ type: 'push', route: createRoute(name, params) }),
       pop: count => dispatch({ type: 'pop', count }),
       popToTop: () => dispatch({ type: 'popToTop' }),
       popTo: key => dispatch({ type: 'popTo', key }),
-      replace: (name, params) => dispatch({ type: 'replace', route: createRoute(name, params) }),
+      replace: (name, params) =>
+        dispatch({ type: 'replace', route: createRoute(name, params) }),
       setParams: (params, key) => dispatch({ type: 'setParams', key, params }),
       reset: nextState => dispatch({ type: 'reset', state: nextState }),
       canGoBack: () => currentState().routes.length > 1,
@@ -215,7 +235,8 @@ const StackImpl = defineComponent<IStackProps>(
         emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, current);
       }
       for (const routeKey of emitters.keys()) {
-        if (!current.routes.some(route => route.key === routeKey)) emitters.delete(routeKey);
+        if (!current.routes.some(route => route.key === routeKey))
+          emitters.delete(routeKey);
       }
     }
 
@@ -245,9 +266,19 @@ const StackImpl = defineComponent<IStackProps>(
           return null;
         }
 
-        const screenOptionsArgs: IScreenOptionsArgs = { route, navigation: handle };
-        const mergedOptions = resolveScreenOptions(entry, screenOptionsArgs, screenOptions);
-        const activityState = computeActivityState(index, current.routes.length);
+        const screenOptionsArgs: IScreenOptionsArgs = {
+          route,
+          navigation: handle,
+        };
+        const mergedOptions = resolveScreenOptions(
+          entry,
+          screenOptionsArgs,
+          screenOptions,
+        );
+        const activityState = computeActivityState(
+          index,
+          current.routes.length,
+        );
         // Investigation instrumentation (flicker-on-focus bug): fires on EVERY Stack render, not
         // just on transitions, so the log stream shows whether a route's activityState/index ever
         // changes outside of a push/pop dispatch. Kept behind DEBUG, never removed.
@@ -268,21 +299,30 @@ const StackImpl = defineComponent<IStackProps>(
           isAndroid: Platform.OS === 'android',
           screenPassthrough: {
             [SCREEN_ON_DISMISSED]: () => dispatch({ type: 'pop', count: 1 }),
-            [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () => dispatch({ type: 'pop', count: 1 }),
+            [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () =>
+              dispatch({ type: 'pop', count: 1 }),
             // onAppear/onDisappear are the definitive visibility boundary (post-transition-
             // animation), so 'focus'/'blur' fire exactly once per transition; onWillAppear/
             // onWillDisappear fire BEFORE the animation runs, so wiring them to emit() too would
             // double-invoke useFocusEffect per transition - they only get a debug log here.
             [SCREEN_ON_WILL_APPEAR]: () =>
-              dlog(`Stack: route "${route.name}" will appear at t=${Date.now()}`),
+              dlog(
+                `Stack: route "${route.name}" will appear at t=${Date.now()}`,
+              ),
             [SCREEN_ON_APPEAR]: () => {
-              dlog(`Stack: route "${route.name}" appeared (focus) at t=${Date.now()}`);
+              dlog(
+                `Stack: route "${route.name}" appeared (focus) at t=${Date.now()}`,
+              );
               routeEmitter.emit(NAVIGATION_EVENT_FOCUS);
             },
             [SCREEN_ON_WILL_DISAPPEAR]: () =>
-              dlog(`Stack: route "${route.name}" will disappear at t=${Date.now()}`),
+              dlog(
+                `Stack: route "${route.name}" will disappear at t=${Date.now()}`,
+              ),
             [SCREEN_ON_DISAPPEAR]: () => {
-              dlog(`Stack: route "${route.name}" disappeared (blur) at t=${Date.now()}`);
+              dlog(
+                `Stack: route "${route.name}" disappeared (blur) at t=${Date.now()}`,
+              );
               routeEmitter.emit(NAVIGATION_EVENT_BLUR);
             },
           },
@@ -309,7 +349,8 @@ const StackImpl = defineComponent<IStackProps>(
                   );
                   const appRef = searchBarOptions.ref;
                   if (appRef === undefined) return;
-                  appRef.value = node === null ? null : buildSearchBarHandle(() => node);
+                  appRef.value =
+                    node === null ? null : buildSearchBarHandle(() => node);
                 },
               }
             : undefined,
@@ -334,22 +375,26 @@ const StackImpl = defineComponent<IStackProps>(
         // sizing (see RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME's comment in core/constants.ts). A
         // `push` screen doesn't need it, but a `formSheet` one is otherwise left with no content
         // ever attached natively.
-        const content = h(RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME, plan.contentWrapperProps, [
-          h(
-            NavigationScope,
-            {
-              value: {
-                route,
-                navigation: handle,
-                emitter: routeEmitter,
-                parent: ambientScopeRef?.value,
+        const content = h(
+          RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME,
+          plan.contentWrapperProps,
+          [
+            h(
+              NavigationScope,
+              {
+                value: {
+                  route,
+                  navigation: handle,
+                  emitter: routeEmitter,
+                  parent: ambientScopeRef?.value,
+                },
               },
-            },
-            // No route/navigation props: the screen reads both through composables off the
-            // NavigationScope provided just above (useRoute / useStackNavigation).
-            () => h(entry.component),
-          ),
-        ]);
+              // No route/navigation props: the screen reads both through composables off the
+              // NavigationScope provided just above (useRoute / useStackNavigation).
+              () => h(entry.component),
+            ),
+          ],
+        );
 
         // react-native-screens' own Screen.tsx swaps in a DIFFERENT Fabric component
         // ('RNSModalScreen') for a modally-presented screen - its native updateLayoutMetrics:
@@ -373,7 +418,10 @@ const StackImpl = defineComponent<IStackProps>(
                   // RNSScreen.mm treats an unset/inactive nested screen as not yet pushed,
                   // leaving it parked at its pre-push transition position (off past the bottom
                   // edge) instead of its real, presented frame.
-                  { style: plan.innerScreenStyle, activityState: plan.activityState },
+                  {
+                    style: plan.innerScreenStyle,
+                    activityState: plan.activityState,
+                  },
                   [descriptorToVue(plan.headerConfig), content],
                 ),
               ]),

package/src/vue/tab-screen.ts

@@ -14,7 +14,9 @@ export type ITabScreenOptionsArgs = {
   navigation: ITabNavigatorHandle;
 };
 
-export type ITabScreenOptionsResolver = (props: ITabScreenOptionsArgs) => ITabOptions;
+export type ITabScreenOptionsResolver = (
+  props: ITabScreenOptionsArgs,
+) => ITabOptions;
 
 export type ITabScreenProps = {
   name: string;

package/src/vue/tabs/index.ts

@@ -7,7 +7,14 @@
 // `symbiote-view`/`symbiote-text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register here - Tab needs no `../register` import.
 
-import { defineComponent, h, nextTick, onUnmounted, shallowRef, useId } from '@vue/runtime-core';
+import {
+  defineComponent,
+  h,
+  nextTick,
+  onUnmounted,
+  shallowRef,
+  useId,
+} from '@vue/runtime-core';
 import type { VNode } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
 import { dlog } from '@symbiote-native/engine';
@@ -72,7 +79,9 @@ function asTabOptionsOrResolver(value: unknown): ITabScreenProps['options'] {
   return asTabOptions(value);
 }
 
-function collectRegistry(vnodes: readonly VNode[]): Map<string, ITabRegistryEntry> {
+function collectRegistry(
+  vnodes: readonly VNode[],
+): Map<string, ITabRegistryEntry> {
   const registry = new Map<string, ITabRegistryEntry>();
   for (const vnode of vnodes) {
     if (vnode.type !== TabScreen || !isRecord(vnode.props)) continue;
@@ -94,7 +103,9 @@ function resolveTabOptions(
   screenOptions: ITabOptions | undefined,
 ): ITabOptions {
   const own =
-    typeof entry.options === 'function' ? entry.options(screenComponentProps) : entry.options;
+    typeof entry.options === 'function'
+      ? entry.options(screenComponentProps)
+      : entry.options;
   return { ...screenOptions, ...own };
 }
 
@@ -112,7 +123,9 @@ const TabImpl = defineComponent<ITabProps>(
     const ambientScopeRef = injectNavigationScope();
     const routeIdPrefix = useId();
 
-    function buildRoutes(registry: Map<string, ITabRegistryEntry>): IRoute<unknown>[] {
+    function buildRoutes(
+      registry: Map<string, ITabRegistryEntry>,
+    ): IRoute<unknown>[] {
       return Array.from(registry.entries()).map(([name, entry]) => ({
         key: `${routeIdPrefix}-${name}`,
         name,
@@ -122,7 +135,8 @@ const TabImpl = defineComponent<ITabProps>(
 
     const initialRegistry = collectRegistry(slots.default?.() ?? []);
     const initialRoutes = buildRoutes(initialRegistry);
-    if (initialRoutes.length === 0) dlog('Tab: no <Tab.Screen> children registered');
+    if (initialRoutes.length === 0)
+      dlog('Tab: no <Tab.Screen> children registered');
 
     // A <Tab.Screen> can appear or disappear after mount (a marker behind a v-if, a data-driven
     // screen list), so the route list is re-collected from the slot on every render and the
@@ -147,7 +161,10 @@ const TabImpl = defineComponent<ITabProps>(
     }
 
     function dispatch(action: ITabRouterAction): void {
-      dispatchedState.value = tabRouterReducer(resolveState(latestRoutes), action);
+      dispatchedState.value = tabRouterReducer(
+        resolveState(latestRoutes),
+        action,
+      );
     }
 
     const jumpTo = (name: string, params?: unknown): void =>
@@ -215,7 +232,8 @@ const TabImpl = defineComponent<ITabProps>(
     }
 
     onUnmounted(() => {
-      if (focusedRouteKey !== undefined) emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_BLUR);
+      if (focusedRouteKey !== undefined)
+        emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_BLUR);
     });
 
     return () => {
@@ -229,17 +247,27 @@ const TabImpl = defineComponent<ITabProps>(
       const state = resolveState(routes);
       syncFocus(state);
 
-      const focusedRoute: IRoute<unknown> | undefined = state.routes[state.index];
+      const focusedRoute: IRoute<unknown> | undefined =
+        state.routes[state.index];
 
       const items: ITabBarItemView[] = state.routes.map((route, index) => {
         const entry = registry.get(route.name);
         const focused = isFocusedRoute(index, state.index);
         if (entry === undefined) {
           dlog(`Tab: no screen registered for route name "${route.name}"`);
-          return { key: route.key, focused, label: route.name, passthrough: {} };
+          return {
+            key: route.key,
+            focused,
+            label: route.name,
+            passthrough: {},
+          };
         }
 
-        const options = resolveTabOptions(entry, { route, navigation: handle }, screenOptions);
+        const options = resolveTabOptions(
+          entry,
+          { route, navigation: handle },
+          screenOptions,
+        );
 
         return {
           key: route.key,
@@ -257,7 +285,9 @@ const TabImpl = defineComponent<ITabProps>(
         };
       });
 
-      const focusedEntry = focusedRoute ? registry.get(focusedRoute.name) : undefined;
+      const focusedEntry = focusedRoute
+        ? registry.get(focusedRoute.name)
+        : undefined;
       const focusedOptions: ITabOptions | undefined =
         focusedEntry && focusedRoute
           ? resolveTabOptions(
@@ -268,7 +298,11 @@ const TabImpl = defineComponent<ITabProps>(
           : screenOptions;
 
       const tabBar = descriptorToVue(
-        renderTabBar({ items, style: focusedOptions?.tabBarStyle, passthrough: {} }),
+        renderTabBar({
+          items,
+          style: focusedOptions?.tabBarStyle,
+          passthrough: {},
+        }),
       );
 
       // Only the focused route's screen is ever mounted (unlike Stack, which keeps every pushed
@@ -294,7 +328,11 @@ const TabImpl = defineComponent<ITabProps>(
           : null;
 
       return h('symbiote-view', { style: TAB_ROOT_STYLE }, [
-        h('symbiote-view', { style: TAB_CONTENT_STYLE }, content === null ? [] : [content]),
+        h(
+          'symbiote-view',
+          { style: TAB_CONTENT_STYLE },
+          content === null ? [] : [content],
+        ),
         tabBar,
       ]);
     };