@natsuneko-laboratory/react-native-desktop-navigation 0.1.0-alpha.12

package/src/core/builder.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import {
+  routers,
+  type NavigationState,
+  type Router,
+  type RouterOptions,
+  type ParamListBase,
+  type RouteName,
+  type NavigationRoute,
+} from '../routers';
+import type { SidebarSectionOptions } from './types';
+import { ScopeContext, useStore } from './context';
+import { createNavigation, type AnyNavigation } from './navigation';
+export const NavigatorStateContext =
+  React.createContext<NavigationState | null>(null);
+export interface ScreenConfig<
+  P extends ParamListBase,
+  N extends RouteName<P>,
+  O,
+  Nav = AnyNavigation<P>,
+> {
+  name: N;
+  component: React.ComponentType<{
+    navigation: Nav;
+    route: NavigationRoute<N, P[N]>;
+  }>;
+  initialParams?: P[N];
+  options?:
+    | O
+    | ((context: { navigation: Nav; route: NavigationRoute<N, P[N]> }) => O);
+}
+export interface Definition<O> {
+  name: string;
+  component: React.ComponentType<any>;
+  initialParams?: unknown;
+  options?:
+    | O
+    | ((context: { navigation: AnyNavigation; route: NavigationRoute }) => O);
+  section?: SidebarSectionOptions & { key: string };
+}
+export function readScreens<O>(
+  children: React.ReactNode,
+  Screen: React.ElementType,
+  Section?: React.ElementType,
+): Definition<O>[] {
+  const result: Definition<O>[] = [];
+  function visit(items: React.ReactNode, section?: Definition<O>['section']) {
+    React.Children.forEach(items, (child) => {
+      if (!React.isValidElement(child)) {
+        if (child != null && typeof child !== 'boolean')
+          throw new Error('Navigator children must be Screen elements.');
+        return;
+      }
+      const props = child.props as {
+        children?: React.ReactNode;
+      } & SidebarSectionOptions;
+      if (child.type === React.Fragment) visit(props.children, section);
+      else if (Section && child.type === Section)
+        visit(props.children, {
+          key: String(child.key ?? result.length),
+          title: props.title,
+          style: props.style,
+          titleStyle: props.titleStyle,
+          renderTitle: props.renderTitle,
+        });
+      else if (child.type === Screen)
+        result.push({ ...(child.props as Definition<O>), section });
+      else
+        throw new Error(
+          'Navigator children must be Screen, Section, or Fragment elements.',
+        );
+    });
+  }
+  visit(children);
+  if (
+    !result.length ||
+    new Set(result.map((r) => r.name)).size !== result.length
+  )
+    throw new Error('Navigator requires unique Screen names.');
+  return result;
+}
+export function useNavigator<S extends NavigationState>(
+  type: S['type'],
+  options: Omit<RouterOptions, 'key'>,
+  explicitId?: string,
+) {
+  const store = useStore();
+  const parent = React.useContext(ScopeContext);
+  const id = parent.nodeId
+    ? `${parent.nodeId}/${parent.routeKey}/${explicitId ?? type}`
+    : (explicitId ?? 'root');
+  const config: RouterOptions = { ...options, key: id };
+  const [initial] = React.useState(
+    () =>
+      (store.getNode(id)?.state as S | undefined) ??
+      (routers[type] as Router<S>).getInitialState(config),
+  );
+  const getSnapshot = React.useCallback(
+    () => (store.getNode(id)?.state as S | undefined) ?? initial,
+    [store, id, initial],
+  );
+  const state = React.useSyncExternalStore(
+    store.subscribe,
+    getSnapshot,
+    getSnapshot,
+  );
+  React.useLayoutEffect(
+    () =>
+      store.register(
+        {
+          id,
+          parentId: parent.nodeId,
+          parentRouteKey: parent.routeKey,
+          type,
+          state: initial,
+        },
+        config,
+      ),
+    [store, id],
+  );
+  React.useLayoutEffect(() => {
+    store.updateOptions(id, config);
+  });
+  const navigation = React.useMemo(
+    () => createNavigation(store, id),
+    [store, id],
+  );
+  return { id, state, store, navigation };
+}
+export function resolveOptions<O>(
+  definition: Definition<O>,
+  route: NavigationRoute,
+  navigation: AnyNavigation,
+  defaults?:
+    | O
+    | ((context: { route: NavigationRoute; navigation: AnyNavigation }) => O),
+): O {
+  const context = { route, navigation };
+  return {
+    ...(typeof defaults === 'function'
+      ? (defaults as (c: typeof context) => O)(context)
+      : defaults),
+    ...(typeof definition.options === 'function'
+      ? (definition.options as (c: typeof context) => O)(context)
+      : definition.options),
+  } as O;
+}

package/src/core/context.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { NavigationStore } from './store';
+import type { NavigationRoute } from '../routers';
+import type { AnyNavigation } from './navigation';
+import type { NavigationTheme } from './types';
+import { defaultPlatformAdapter } from '../platform';
+export const StoreContext = React.createContext<NavigationStore | null>(null);
+export const ScopeContext = React.createContext<{
+  nodeId?: string;
+  routeKey?: string;
+}>({});
+/** Only a Sidebar directly owned by this Split column may resize it. */
+export const SplitColumnContext = React.createContext<{
+  nodeId: string;
+  columnId: string;
+  onSidebarChange: (columnId: string, width: number | null) => void;
+} | null>(null);
+export const ScreenContext = React.createContext<{
+  navigation: AnyNavigation;
+  route: NavigationRoute;
+  focused: boolean;
+} | null>(null);
+export const PlatformContext = React.createContext(defaultPlatformAdapter);
+export const DefaultTheme: NavigationTheme = {
+  dark: false,
+  colors: {
+    background: '#ffffff',
+    surface: '#f5f5f7',
+    text: '#202124',
+    mutedText: '#64656b',
+    border: '#d8d8dc',
+    accent: '#0067c0',
+    selectedBackground: '#dcecff',
+  },
+};
+export const ThemeContext = React.createContext(DefaultTheme);
+export const useNavigationTheme = () => React.useContext(ThemeContext);
+export function useStore() {
+  const store = React.useContext(StoreContext);
+  if (!store)
+    throw new Error('Navigation must be rendered inside NavigationContainer.');
+  return store;
+}

package/src/core/focus.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+export interface FocusTarget {
+  focus(): void;
+}
+export interface FocusRegistry {
+  register(id: string, target: FocusTarget): () => void;
+  record(id: string): void;
+}
+export const FocusContext = React.createContext<FocusRegistry | null>(null);
+/** Wrap a ref-forwarding native control (Pressable, TextInput, or a custom control). */
+export function NavigationFocusable({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactElement<any>;
+}) {
+  const registry = React.useContext(FocusContext);
+  const target = React.useRef<FocusTarget | null>(null);
+  const childProps = children.props as {
+    ref?: React.Ref<FocusTarget>;
+    onFocus?: (...args: any[]) => void;
+  };
+  const originalRef =
+    Number(React.version.split('.')[0]) >= 19
+      ? childProps.ref
+      : (children as unknown as { ref?: React.Ref<FocusTarget> }).ref;
+  const setRef = React.useCallback(
+    (value: FocusTarget | null) => {
+      target.current = value;
+      if (typeof originalRef === 'function') originalRef(value);
+      else if (originalRef)
+        (originalRef as React.MutableRefObject<FocusTarget | null>).current =
+          value;
+    },
+    [originalRef],
+  );
+  React.useLayoutEffect(() => {
+    if (!registry)
+      throw new Error('NavigationFocusable must be inside a Screen.');
+    if (target.current) return registry.register(id, target.current);
+  }, [id, registry]);
+  return React.cloneElement(children, {
+    ref: setRef,
+    onFocus: (...args: any[]) => {
+      registry?.record(id);
+      childProps.onFocus?.(...args);
+    },
+  });
+}

package/src/core/hooks.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { NavigatorStateContext } from './builder';
+import { ScreenContext, ScopeContext, useStore } from './context';
+import type { Navigation } from './types';
+import type { NavigationRoute, NavigationState } from '../routers';
+export function useNavigation<N = Navigation>(): N {
+  const screen = React.useContext(ScreenContext);
+  if (!screen) throw new Error('useNavigation must be used inside a Screen.');
+  return screen.navigation as N;
+}
+export function useRoute<R extends NavigationRoute = NavigationRoute>(): R {
+  const screen = React.useContext(ScreenContext);
+  if (!screen) throw new Error('useRoute must be used inside a Screen.');
+  return screen.route as R;
+}
+export function useNavigationState<T>(
+  selector: (state: NavigationState) => T,
+): T {
+  const store = useStore();
+  const { nodeId } = React.useContext(ScopeContext);
+  const snapshot = React.useCallback(
+    () => store.getNode(nodeId ?? store.getState().rootNodeId)?.state,
+    [store, nodeId],
+  );
+  const state = React.useSyncExternalStore(store.subscribe, snapshot, snapshot);
+  // Screen render can precede the navigator's layout-effect registration.
+  const initial = React.useContext(NavigatorStateContext);
+  const value = state ?? initial;
+  if (!value)
+    throw new Error('useNavigationState requires a registered navigator.');
+  return selector(value);
+}
+export function useIsFocused() {
+  const screen = React.useContext(ScreenContext);
+  return screen?.focused ?? false;
+}
+export function useFocusEffect(effect: React.EffectCallback) {
+  const focused = useIsFocused();
+  React.useEffect(() => {
+    if (focused) return effect();
+  }, [focused, effect]);
+}

package/src/core/navigation.ts

@@ -0,0 +1,77 @@
+import type { NavigationStore } from './store';
+import type { ParamListBase, NavigationAction } from '../routers';
+import type {
+  StackNavigation,
+  SidebarNavigation,
+  TabNavigation,
+  NavigationRef,
+} from './types';
+export type AnyNavigation<P extends ParamListBase = ParamListBase> =
+  StackNavigation<P> & SidebarNavigation<P> & TabNavigation<P>;
+export function createNavigation<P extends ParamListBase = ParamListBase>(
+  store: NavigationStore,
+  id: string,
+  routeKey?: string,
+): AnyNavigation<P> {
+  const dispatch = (action: NavigationAction) => {
+    store.dispatch({ ...action, target: action.target ?? id });
+  };
+  const routeAction =
+    (type: 'navigate' | 'push' | 'replace' | 'popTo') =>
+    (...[name, params]: [string, unknown?]) =>
+      dispatch({ type, payload: { name, params } });
+  return {
+    navigate: routeAction('navigate'),
+    push: routeAction('push'),
+    replace: routeAction('replace'),
+    popTo: routeAction('popTo'),
+    dispatch,
+    goBack: () => dispatch({ type: 'back' }),
+    goForward: () => dispatch({ type: 'forward' }),
+    canGoBack: () => store.canDispatch('back', id),
+    canGoForward: () => store.canDispatch('forward', id),
+    pop: (count) => dispatch({ type: 'pop', payload: { count } }),
+    popToRoot: () => dispatch({ type: 'popToRoot' }),
+    select: (name) => dispatch({ type: 'select', payload: { name } }),
+    collapseSidebar: () => dispatch({ type: 'collapseSidebar' }),
+    expandSidebar: () => dispatch({ type: 'expandSidebar' }),
+    toggleSidebar: () => dispatch({ type: 'toggleSidebar' }),
+    nextTab: () => dispatch({ type: 'nextTab' }),
+    previousTab: () => dispatch({ type: 'previousTab' }),
+    getState: () => {
+      const node = store.getNode(id);
+      if (!node) throw new Error('Navigator is not mounted.');
+      return node.state;
+    },
+    getParent: () => {
+      const node = store.getNode(id);
+      return node?.parentId
+        ? createNavigation(store, node.parentId, node.parentRouteKey)
+        : undefined;
+    },
+    isFocused: () =>
+      routeKey ? store.isRouteFocused(id, routeKey) : store.isNodeFocused(id),
+    addListener: (type, listener) =>
+      store.addListener(
+        routeKey ?? store.getNode(id)?.state.activeRouteKey ?? id,
+        type,
+        listener,
+      ),
+  };
+}
+export function createNavigationRef<
+  P extends ParamListBase = ParamListBase,
+>(): NavigationRef<P> {
+  const ref: NavigationRef<P> = {
+    current: null,
+    isReady: () => ref.current?.isReady() ?? false,
+    navigate: (...args) => ref.current?.navigate(...args),
+    goBack: () => ref.current?.goBack(),
+    goForward: () => ref.current?.goForward(),
+    canGoBack: () => ref.current?.canGoBack() ?? false,
+    canGoForward: () => ref.current?.canGoForward() ?? false,
+    dispatch: (action) => ref.current?.dispatch(action),
+    getRootState: () => ref.current?.getRootState(),
+  };
+  return ref;
+}