@react-navigation/lynx 0.0.0 → 0.1.0

package/src/stack/views/__tests__/LynxStackViewState.test.tsx

@@ -0,0 +1,506 @@
+// Ported from react-navigation's new native stack. The reducer is
+// platform-agnostic, so only the imports and type names change; `render`
+// comes from ReactLynx's testing library instead of react-native's.
+//
+// One deliberate divergence: upstream's mock descriptors set `title`, a header
+// option this package does not have yet. Those two assertions use
+// `presentation` instead - same shape, an option that exists here.
+//
+//   packages/native-stack/src/next/views/__tests__/NativeStackViewState.test.tsx @ 7b32fd92d
+import { expect, test } from 'vitest';
+import type {
+  ParamListBase,
+  Route,
+  StackNavigationState,
+} from '@react-navigation/core';
+import { render } from '@lynx-js/react/testing-library';
+
+import type {
+  LynxStackDescriptorMap,
+  LynxStackNavigationProp,
+} from '../../types';
+import {
+  type LynxStackViewState,
+  reducer,
+  useViewState,
+} from '../LynxStackViewState';
+
+const createRoute = (name: string): Route<string> => ({
+  key: name,
+  name,
+});
+
+const A = createRoute('A');
+const B = createRoute('B');
+const C = createRoute('C');
+const D = createRoute('D');
+const E = createRoute('E');
+
+function getParent(): LynxStackNavigationProp<ParamListBase> {
+  return navigation;
+}
+
+const navigation = {
+  addListener: () => () => {},
+  canGoBack: () => false,
+  dispatch: () => {},
+  getParent,
+  getState: () => ({
+    stale: false,
+    type: 'stack',
+    key: 'stack',
+    index: 0,
+    routeNames: [],
+    routes: [],
+    retainedRouteKeys: [],
+  }),
+  goBack: () => {},
+  isFocused: () => true,
+  navigate: () => {},
+  pop: () => {},
+  popTo: () => {},
+  popToTop: () => {},
+  preload: () => {},
+  push: () => {},
+  pushParams: () => {},
+  removeListener: () => {},
+  replace: () => {},
+  replaceParams: () => {},
+  reset: () => {},
+  retain: () => {},
+  setOptions: () => {},
+  setParams: () => {},
+} satisfies LynxStackNavigationProp<ParamListBase>;
+
+const descriptors = {
+  A: {
+    navigation,
+    options: {},
+    render: () => <></>,
+    route: A,
+  },
+  B: {
+    navigation,
+    options: {},
+    render: () => <></>,
+    route: B,
+  },
+  C: {
+    navigation,
+    options: {},
+    render: () => <></>,
+    route: C,
+  },
+  D: {
+    navigation,
+    options: {},
+    render: () => <></>,
+    route: D,
+  },
+  E: {
+    navigation,
+    options: {},
+    render: () => <></>,
+    route: E,
+  },
+} satisfies LynxStackDescriptorMap;
+
+function createState(): LynxStackViewState {
+  const routes = [A, B, C];
+
+  return {
+    previous: { index: 2, routes, descriptors },
+    renderedRoutes: routes,
+    poppedByKey: new Map(),
+    nativelyDismissedRouteKeys: new Set(),
+  };
+}
+
+const syncState = (
+  state: LynxStackViewState,
+  routes: Route<string>[],
+  nextDescriptors: LynxStackDescriptorMap = descriptors
+) =>
+  reducer(state, {
+    type: 'SYNC_STATE',
+    index: routes.length - 1,
+    routes,
+    descriptors: nextDescriptors,
+  });
+
+const getRouteKeys = (state: LynxStackViewState) =>
+  state.renderedRoutes.map((route) => route.key);
+
+const getPoppedRouteKeys = (state: LynxStackViewState) =>
+  state.renderedRoutes
+    .filter((route) => state.poppedByKey.has(route.key))
+    .map((route) => route.key);
+
+const createNavigationState = (
+  routes: Route<string>[]
+): StackNavigationState<ParamListBase> => ({
+  stale: false,
+  type: 'stack',
+  key: 'stack',
+  index: routes.length - 1,
+  routeNames: routes.map((route) => route.name),
+  routes,
+  retainedRouteKeys: [],
+});
+
+test('preserves route order across consecutive pops', () => {
+  let state = syncState(createState(), [A, B]);
+
+  state = syncState(state, [A]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'C']);
+  expect(getPoppedRouteKeys(state)).toEqual(['B', 'C']);
+});
+
+test('retains all routes removed by pop-to-top in their original order', () => {
+  let state = syncState(createState(), [A]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'C']);
+  expect(getPoppedRouteKeys(state)).toEqual(['B', 'C']);
+
+  state = reducer(state, {
+    type: 'REMOVE_POPPED_ROUTE',
+    key: 'C',
+  });
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B']);
+  expect(getPoppedRouteKeys(state)).toEqual(['B']);
+});
+
+test('keeps a removed route above its replacement while it closes', () => {
+  const state = syncState(createState(), [A, B, D]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'D', 'C']);
+  expect(getPoppedRouteKeys(state)).toEqual(['C']);
+  expect(state.poppedByKey.get('C')?.focusedReplacementKey).toBe('D');
+});
+
+test('recognizes a preloaded route as the replacement', () => {
+  const routes = [A, B, C, D];
+  const state = syncState(
+    {
+      previous: { index: 2, routes, descriptors },
+      renderedRoutes: routes,
+      poppedByKey: new Map(),
+      nativelyDismissedRouteKeys: new Set(),
+    },
+    [A, B, D]
+  );
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'C', 'D']);
+  expect(state.poppedByKey.get('C')?.focusedReplacementKey).toBe('D');
+});
+
+test('does not retarget a pending replacement after a later push', () => {
+  let state = syncState(createState(), [A, B, D]);
+
+  state = syncState(state, [A, B, D, E]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'D', 'E', 'C']);
+  expect(state.poppedByKey.get('C')?.focusedReplacementKey).toBe('D');
+});
+
+test('tracks consecutive replacements independently', () => {
+  let state = syncState(createState(), [A, B, D]);
+
+  state = syncState(state, [A, B, E]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'E', 'D', 'C']);
+  expect(state.poppedByKey.get('C')?.focusedReplacementKey).toBe('D');
+  expect(state.poppedByKey.get('D')?.focusedReplacementKey).toBe('E');
+});
+
+test('keeps a removed middle route above its replacement while it closes', () => {
+  const state = syncState(createState(), [A, D, C]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'D', 'B', 'C']);
+  expect(getPoppedRouteKeys(state)).toEqual(['B']);
+  expect(state.poppedByKey.get('B')?.focusedReplacementKey).toBeUndefined();
+});
+
+test('rejects reordering retained routes', () => {
+  expect(() => syncState(createState(), [C, A])).toThrow(
+    'Changing the order of active routes is not supported in native stack.'
+  );
+});
+
+test('allows a preloaded route to move into the active stack', () => {
+  const routes = [A, B, C];
+  const state = reducer(
+    {
+      previous: { index: 0, routes, descriptors },
+      renderedRoutes: routes,
+      poppedByKey: new Map(),
+      nativelyDismissedRouteKeys: new Set(),
+    },
+    {
+      type: 'SYNC_STATE',
+      index: 1,
+      routes: [A, C, B],
+      descriptors,
+    }
+  );
+
+  expect(getRouteKeys(state)).toEqual(['A', 'C', 'B']);
+  expect(getPoppedRouteKeys(state)).toEqual([]);
+});
+
+test('keeps removed routes above a root replacement while they close', () => {
+  const state = syncState(createState(), [D]);
+
+  expect(getRouteKeys(state)).toEqual(['D', 'A', 'B', 'C']);
+  expect(getPoppedRouteKeys(state)).toEqual(['A', 'B', 'C']);
+  expect(state.poppedByKey.get('A')?.focusedReplacementKey).toBe('D');
+  expect(state.poppedByKey.get('B')?.focusedReplacementKey).toBe('D');
+  expect(state.poppedByKey.get('C')?.focusedReplacementKey).toBe('D');
+});
+
+test('stops retaining a route when its key returns to navigation state', () => {
+  let state = syncState(createState(), [A, B]);
+
+  state = syncState(state, [A, B, C]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'C']);
+  expect(getPoppedRouteKeys(state)).toEqual([]);
+});
+
+test('does not retain routes that were dismissed natively', () => {
+  let state = reducer(createState(), {
+    type: 'ADD_NATIVELY_DISMISSED_ROUTES',
+    keys: ['C'],
+  });
+
+  state = syncState(state, [A, B]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B']);
+  expect(getPoppedRouteKeys(state)).toEqual([]);
+  expect(state.nativelyDismissedRouteKeys).toEqual(new Set());
+});
+
+test('retains a natively dismissed route if it stayed in navigation state', () => {
+  let state = reducer(createState(), {
+    type: 'ADD_NATIVELY_DISMISSED_ROUTES',
+    keys: ['C'],
+  });
+
+  // The pop action following the native dismissal didn't remove the route, e.g.
+  // when a 'beforeRemove' listener prevented it.
+  state = syncState(state, [A, B, C]);
+
+  expect(state.nativelyDismissedRouteKeys).toEqual(new Set());
+
+  state = syncState(state, [A, B]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B', 'C']);
+  expect(getPoppedRouteKeys(state)).toEqual(['C']);
+});
+
+test('does not retain detached routes removed from navigation state', () => {
+  const initialState: LynxStackViewState = {
+    previous: { index: 1, routes: [A, B, C], descriptors },
+    renderedRoutes: [A, B, C],
+    poppedByKey: new Map(),
+    nativelyDismissedRouteKeys: new Set(),
+  };
+
+  const state = syncState(initialState, [A, B]);
+
+  expect(getRouteKeys(state)).toEqual(['A', 'B']);
+  expect(getPoppedRouteKeys(state)).toEqual([]);
+});
+
+test('retains a popped route and its previous descriptor until dismissal', () => {
+  const state = syncState(createState(), [A, B], {
+    A: descriptors.A,
+    B: descriptors.B,
+  });
+
+  expect(state.poppedByKey.get('C')).toEqual({
+    descriptor: descriptors.C,
+    previousDescriptor: descriptors.B,
+    focusedReplacementKey: undefined,
+  });
+
+  const dismissedState = reducer(state, {
+    type: 'REMOVE_POPPED_ROUTE',
+    key: 'C',
+  });
+
+  expect(getRouteKeys(dismissedState)).toEqual(['A', 'B']);
+  expect(getPoppedRouteKeys(dismissedState)).toEqual([]);
+});
+
+test('uses the current descriptor for the previous route', () => {
+  const previousDescriptor = {
+    ...descriptors.B,
+    options: { presentation: 'card' as const },
+  };
+  const state = syncState(createState(), [A, B], {
+    A: descriptors.A,
+    B: previousDescriptor,
+  });
+
+  expect(state.poppedByKey.get('C')?.previousDescriptor).toBe(
+    previousDescriptor
+  );
+});
+
+test('uses the old descriptor when the previous route was also removed', () => {
+  const state = syncState(createState(), [A], {
+    A: descriptors.A,
+  });
+
+  expect(state.poppedByKey.get('C')?.previousDescriptor).toBe(descriptors.B);
+});
+
+test('uses the latest descriptor snapshot when a route is popped', () => {
+  const descriptor = {
+    ...descriptors.C,
+    options: { presentation: 'card' as const },
+  };
+  const updatedDescriptors = {
+    ...descriptors,
+    C: descriptor,
+  };
+  let state = reducer(createState(), {
+    type: 'SYNC_DESCRIPTORS',
+    descriptors: updatedDescriptors,
+  });
+
+  state = syncState(state, [A, B]);
+
+  expect(state.poppedByKey.get('C')?.descriptor).toBe(descriptor);
+});
+
+test('preserves native dismissal state when descriptors change', () => {
+  let state = reducer(createState(), {
+    type: 'ADD_NATIVELY_DISMISSED_ROUTES',
+    keys: ['C'],
+  });
+
+  state = reducer(state, {
+    type: 'SYNC_DESCRIPTORS',
+    descriptors: { ...descriptors },
+  });
+
+  expect(state.nativelyDismissedRouteKeys).toEqual(new Set(['C']));
+});
+
+test('renders content once while synchronizing descriptor changes', async () => {
+  let renderCount = 0;
+  let renderedDescriptors: LynxStackDescriptorMap | undefined;
+
+  const Content = ({
+    currentDescriptors,
+  }: {
+    currentDescriptors: LynxStackDescriptorMap;
+  }) => {
+    renderCount++;
+    renderedDescriptors = currentDescriptors;
+
+    return null;
+  };
+
+  const navigationState = createNavigationState([A, B, C]);
+
+  const TestView = ({
+    currentDescriptors,
+  }: {
+    currentDescriptors: LynxStackDescriptorMap;
+  }) => {
+    const [{ previous }] = useViewState({
+      state: navigationState,
+      descriptors: currentDescriptors,
+    });
+
+    return <Content currentDescriptors={previous.descriptors} />;
+  };
+
+  const screen = await render(<TestView currentDescriptors={descriptors} />);
+
+  const nextDescriptors = { ...descriptors };
+
+  await screen.rerender(<TestView currentDescriptors={nextDescriptors} />);
+
+  expect(renderCount).toBe(2);
+  expect(renderedDescriptors).toBe(nextDescriptors);
+});
+
+test('renders content once while synchronizing a back state', async () => {
+  let renderCount = 0;
+  let renderedRouteKeys: string[] = [];
+  let poppedDescriptor: LynxStackDescriptorMap[string] | undefined;
+
+  const Content = ({
+    renderedRoutes,
+    poppedByKey,
+    currentDescriptors,
+  }: Pick<LynxStackViewState, 'renderedRoutes' | 'poppedByKey'> & {
+    currentDescriptors: LynxStackDescriptorMap;
+  }) => {
+    renderCount++;
+
+    for (const route of renderedRoutes) {
+      const descriptor =
+        currentDescriptors[route.key] ?? poppedByKey.get(route.key)?.descriptor;
+
+      if (descriptor == null) {
+        throw new Error(`Missing descriptor for ${route.key}`);
+      }
+    }
+
+    renderedRouteKeys = renderedRoutes.map((route) => route.key);
+    poppedDescriptor = poppedByKey.get('C')?.descriptor;
+
+    return null;
+  };
+
+  const TestView = ({
+    state,
+    currentDescriptors,
+  }: {
+    state: StackNavigationState<ParamListBase>;
+    currentDescriptors: LynxStackDescriptorMap;
+  }) => {
+    const [{ renderedRoutes, poppedByKey }] = useViewState({
+      state,
+      descriptors: currentDescriptors,
+    });
+
+    return (
+      <Content
+        renderedRoutes={renderedRoutes}
+        poppedByKey={poppedByKey}
+        currentDescriptors={currentDescriptors}
+      />
+    );
+  };
+
+  const screen = await render(
+    <TestView
+      state={createNavigationState([A, B, C])}
+      currentDescriptors={descriptors}
+    />
+  );
+
+  const nextDescriptors = {
+    A: descriptors.A,
+    B: descriptors.B,
+  };
+
+  await screen.rerender(
+    <TestView
+      state={createNavigationState([A, B])}
+      currentDescriptors={nextDescriptors}
+    />
+  );
+
+  expect(renderCount).toBe(2);
+  expect(renderedRouteKeys).toEqual(['A', 'B', 'C']);
+  expect(poppedDescriptor).toBe(descriptors.C);
+});

package/src/theming/DarkTheme.ts

@@ -0,0 +1,16 @@
+import type { LynxTheme } from '../types';
+
+import { fonts } from './fonts';
+
+export const DarkTheme = {
+  dark: true,
+  colors: {
+    primary: 'rgb(10, 132, 255)',
+    background: 'rgb(0, 0, 0)',
+    card: 'rgb(28, 28, 30)',
+    text: 'rgb(255, 255, 255)',
+    border: 'rgb(56, 56, 58)',
+    notification: 'rgb(255, 69, 58)',
+  },
+  fonts,
+} as const satisfies LynxTheme;

package/src/theming/LightTheme.ts

@@ -0,0 +1,17 @@
+import type { LynxTheme } from '../types';
+
+import { fonts } from './fonts';
+
+/** Same palette as `@react-navigation/native`, so themes port across renderers. */
+export const LightTheme = {
+  dark: false,
+  colors: {
+    primary: 'rgb(0, 122, 255)',
+    background: 'rgb(242, 242, 247)',
+    card: 'rgb(255, 255, 255)',
+    text: 'rgb(0, 0, 0)',
+    border: 'rgb(198, 198, 200)',
+    notification: 'rgb(255, 59, 48)',
+  },
+  fonts,
+} as const satisfies LynxTheme;

package/src/theming/fonts.ts

@@ -0,0 +1,25 @@
+import type { LynxTheme } from '../types';
+
+/**
+ * React Native picks per-platform families here (`System` on iOS,
+ * `sans-serif*` on Android). Lynx resolves the platform default when no family
+ * is named, so weights are all that need to differ.
+ */
+export const fonts: LynxTheme['fonts'] = {
+  regular: {
+    fontFamily: '',
+    fontWeight: '400',
+  },
+  medium: {
+    fontFamily: '',
+    fontWeight: '500',
+  },
+  bold: {
+    fontFamily: '',
+    fontWeight: '600',
+  },
+  heavy: {
+    fontFamily: '',
+    fontWeight: '700',
+  },
+};

package/src/types.ts

@@ -0,0 +1,42 @@
+type FontStyle = {
+  fontFamily: string;
+  fontWeight:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+};
+
+/**
+ * Core declares `Theme` as an empty interface for the platform layer to fill
+ * in, the same way `@react-navigation/native` does for React Native. Keeping
+ * the shape identical means themes carry over between the two unchanged.
+ */
+export interface LynxTheme {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+  };
+  fonts: {
+    regular: FontStyle;
+    medium: FontStyle;
+    bold: FontStyle;
+    heavy: FontStyle;
+  };
+}
+
+declare module '@react-navigation/core' {
+  interface Theme extends LynxTheme {}
+}