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

package/dist/core/focus.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusContext = void 0;
+exports.NavigationFocusable = NavigationFocusable;
+const react_1 = __importDefault(require("react"));
+exports.FocusContext = react_1.default.createContext(null);
+/** Wrap a ref-forwarding native control (Pressable, TextInput, or a custom control). */
+function NavigationFocusable({ id, children, }) {
+    const registry = react_1.default.useContext(exports.FocusContext);
+    const target = react_1.default.useRef(null);
+    const childProps = children.props;
+    const originalRef = Number(react_1.default.version.split('.')[0]) >= 19
+        ? childProps.ref
+        : children.ref;
+    const setRef = react_1.default.useCallback((value) => {
+        target.current = value;
+        if (typeof originalRef === 'function')
+            originalRef(value);
+        else if (originalRef)
+            originalRef.current =
+                value;
+    }, [originalRef]);
+    react_1.default.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_1.default.cloneElement(children, {
+        ref: setRef,
+        onFocus: (...args) => {
+            registry?.record(id);
+            childProps.onFocus?.(...args);
+        },
+    });
+}

package/dist/core/hooks.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Navigation } from './types';
+import type { NavigationRoute, NavigationState } from '../routers';
+export declare function useNavigation<N = Navigation>(): N;
+export declare function useRoute<R extends NavigationRoute = NavigationRoute>(): R;
+export declare function useNavigationState<T>(selector: (state: NavigationState) => T): T;
+export declare function useIsFocused(): boolean;
+export declare function useFocusEffect(effect: React.EffectCallback): void;

package/dist/core/hooks.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigation = useNavigation;
+exports.useRoute = useRoute;
+exports.useNavigationState = useNavigationState;
+exports.useIsFocused = useIsFocused;
+exports.useFocusEffect = useFocusEffect;
+const react_1 = __importDefault(require("react"));
+const builder_1 = require("./builder");
+const context_1 = require("./context");
+function useNavigation() {
+    const screen = react_1.default.useContext(context_1.ScreenContext);
+    if (!screen)
+        throw new Error('useNavigation must be used inside a Screen.');
+    return screen.navigation;
+}
+function useRoute() {
+    const screen = react_1.default.useContext(context_1.ScreenContext);
+    if (!screen)
+        throw new Error('useRoute must be used inside a Screen.');
+    return screen.route;
+}
+function useNavigationState(selector) {
+    const store = (0, context_1.useStore)();
+    const { nodeId } = react_1.default.useContext(context_1.ScopeContext);
+    const snapshot = react_1.default.useCallback(() => store.getNode(nodeId ?? store.getState().rootNodeId)?.state, [store, nodeId]);
+    const state = react_1.default.useSyncExternalStore(store.subscribe, snapshot, snapshot);
+    // Screen render can precede the navigator's layout-effect registration.
+    const initial = react_1.default.useContext(builder_1.NavigatorStateContext);
+    const value = state ?? initial;
+    if (!value)
+        throw new Error('useNavigationState requires a registered navigator.');
+    return selector(value);
+}
+function useIsFocused() {
+    const screen = react_1.default.useContext(context_1.ScreenContext);
+    return screen?.focused ?? false;
+}
+function useFocusEffect(effect) {
+    const focused = useIsFocused();
+    react_1.default.useEffect(() => {
+        if (focused)
+            return effect();
+    }, [focused, effect]);
+}

package/dist/core/navigation.d.ts

@@ -0,0 +1,6 @@
+import type { NavigationStore } from './store';
+import type { ParamListBase } from '../routers';
+import type { StackNavigation, SidebarNavigation, TabNavigation, NavigationRef } from './types';
+export type AnyNavigation<P extends ParamListBase = ParamListBase> = StackNavigation<P> & SidebarNavigation<P> & TabNavigation<P>;
+export declare function createNavigation<P extends ParamListBase = ParamListBase>(store: NavigationStore, id: string, routeKey?: string): AnyNavigation<P>;
+export declare function createNavigationRef<P extends ParamListBase = ParamListBase>(): NavigationRef<P>;

package/dist/core/navigation.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNavigation = createNavigation;
+exports.createNavigationRef = createNavigationRef;
+function createNavigation(store, id, routeKey) {
+    const dispatch = (action) => {
+        store.dispatch({ ...action, target: action.target ?? id });
+    };
+    const routeAction = (type) => (...[name, params]) => 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),
+    };
+}
+function createNavigationRef() {
+    const ref = {
+        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;
+}

package/dist/core/store.d.ts

@@ -0,0 +1,39 @@
+import { type NavigationAction, type NavigationNode, type RootNavigationState, type RouterOptions } from '../routers';
+export type NavigationEventType = 'focus' | 'blur' | 'beforeRemove' | 'state';
+export interface NavigationEvent {
+    type: NavigationEventType;
+    target: string;
+    action?: NavigationAction;
+    defaultPrevented: boolean;
+    preventDefault(): void;
+}
+type Listener = (event: NavigationEvent) => void;
+export declare function serializeNavigationState(state: RootNavigationState): string;
+export declare function restoreNavigationState(input: string | RootNavigationState): RootNavigationState;
+export declare class NavigationStore {
+    private snapshot;
+    private subscribers;
+    private events;
+    private configs;
+    private mounted;
+    constructor(initialState?: RootNavigationState);
+    getState: () => RootNavigationState;
+    getNode: (id: string) => NavigationNode | undefined;
+    subscribe: (listener: () => void) => () => void;
+    isReady: () => boolean;
+    register(node: NavigationNode, options: RouterOptions): () => void;
+    updateOptions(id: string, options: RouterOptions): void;
+    addListener(routeKey: string, type: NavigationEventType, listener: Listener): () => void;
+    private emit;
+    isNodeFocused(id: string): boolean;
+    isRouteFocused(id: string, routeKey: string): boolean;
+    private focusedRouteKeys;
+    private publishFocus;
+    private commit;
+    focusRoute(id: string, routeKey: string): void;
+    setFocusedNode(id: string): void;
+    getActiveNodeId(): string;
+    canDispatch(type: 'back' | 'forward', target?: string): boolean;
+    dispatch: (original: NavigationAction) => boolean;
+}
+export {};

package/dist/core/store.js

@@ -0,0 +1,391 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationStore = void 0;
+exports.serializeNavigationState = serializeNavigationState;
+exports.restoreNavigationState = restoreNavigationState;
+const routers_1 = require("../routers");
+function assertSerializable(value, seen = new Set()) {
+    if (value === undefined ||
+        value === null ||
+        typeof value === 'string' ||
+        typeof value === 'boolean')
+        return;
+    if (typeof value === 'number' && Number.isFinite(value))
+        return;
+    if (typeof value !== 'object')
+        throw new Error('Navigation params must be JSON serializable.');
+    if (seen.has(value))
+        throw new Error('Navigation state contains a circular reference.');
+    if (!Array.isArray(value) &&
+        Object.getPrototypeOf(value) !== Object.prototype)
+        throw new Error('Navigation params must contain only plain objects and arrays.');
+    seen.add(value);
+    for (const child of Object.values(value))
+        assertSerializable(child, seen);
+    seen.delete(value);
+}
+function serializeNavigationState(state) {
+    assertSerializable(state);
+    return JSON.stringify(state);
+}
+function restoreNavigationState(input) {
+    const state = typeof input === 'string'
+        ? JSON.parse(input)
+        : JSON.parse(serializeNavigationState(input));
+    if (!state ||
+        state.version !== 1 ||
+        typeof state.rootNodeId !== 'string' ||
+        !state.nodes ||
+        !state.nodes[state.rootNodeId])
+        throw new Error('Invalid navigation snapshot (expected version 1).');
+    for (const [id, node] of Object.entries(state.nodes)) {
+        const s = node.state;
+        if (id !== node.id ||
+            s?.key !== id ||
+            node.type !== s.type ||
+            !['stack', 'sidebar', 'tabs', 'split'].includes(s.type) ||
+            !Array.isArray(s.routes) ||
+            !s.routes.length)
+            throw new Error(`Invalid navigation node: ${id}`);
+        const keys = s.routes.map((r) => r.key);
+        if (new Set(keys).size !== keys.length ||
+            !keys.includes(s.activeRouteKey) ||
+            s.routes.some((r) => typeof r.key !== 'string' || typeof r.name !== 'string'))
+            throw new Error(`Invalid routes: ${id}`);
+        if (s.type === 'stack' &&
+            (!Number.isInteger(s.nextRouteId) || s.nextRouteId < 1))
+            throw new Error('Invalid stack route counter.');
+        if ((s.type === 'sidebar' || s.type === 'tabs') &&
+            typeof s.collapsed !== 'boolean')
+            throw new Error('Invalid selection state.');
+        if (s.type === 'stack' &&
+            s.activeRouteKey !== s.routes[s.routes.length - 1].key)
+            throw new Error('Stack active route must be the last route.');
+        if (s.type === 'stack' && s.history) {
+            for (const routes of [...s.history.past, ...s.history.future]) {
+                if (!Array.isArray(routes) ||
+                    !routes.length ||
+                    routes.some((r) => typeof r.key !== 'string' || typeof r.name !== 'string'))
+                    throw new Error('Invalid stack history.');
+            }
+        }
+        if (s.type === 'split' &&
+            (!s.widths ||
+                !Array.isArray(s.visibleColumnIds) ||
+                !s.visibleColumnIds.length ||
+                new Set(s.visibleColumnIds).size !== s.visibleColumnIds.length ||
+                s.visibleColumnIds.some((name) => !s.routes.some((r) => r.name === name)) ||
+                s.routes.some((r) => !Number.isFinite(s.widths[r.name]) || s.widths[r.name] < 0)))
+            throw new Error('Invalid split state.');
+        if (s.type === 'split' && s.collapsedColumns !== undefined) {
+            if (!s.collapsedColumns ||
+                typeof s.collapsedColumns !== 'object' ||
+                Array.isArray(s.collapsedColumns) ||
+                Object.entries(s.collapsedColumns).some(([name, column]) => !s.routes.some((r) => r.name === name) ||
+                    !column ||
+                    !Number.isFinite(column.width) ||
+                    column.width < 0 ||
+                    !Number.isFinite(column.expandedWidth) ||
+                    column.expandedWidth < 0 ||
+                    s.widths[name] !== column.width))
+                throw new Error('Invalid collapsed split state.');
+        }
+        const visited = new Set([id]);
+        let current = node;
+        while (current.parentId) {
+            const parent = state.nodes[current.parentId];
+            if (!parent ||
+                visited.has(parent.id) ||
+                !retainedRoutes(parent.state).some((r) => r.key === current.parentRouteKey))
+                throw new Error('Invalid navigation parent relationship.');
+            visited.add(parent.id);
+            current = parent;
+        }
+        if (current.id !== state.rootNodeId)
+            throw new Error('Navigation snapshot has multiple roots.');
+    }
+    if (state.activeNodeId && !state.nodes[state.activeNodeId])
+        throw new Error('Invalid active navigator.');
+    return state;
+}
+function retainedRoutes(state) {
+    return state.type === 'stack' && state.history
+        ? [
+            ...state.routes,
+            ...state.history.past.flat(),
+            ...state.history.future.flat(),
+        ]
+        : state.routes;
+}
+class NavigationStore {
+    snapshot;
+    subscribers = new Set();
+    events = new Map();
+    configs = new Map();
+    mounted = new Set();
+    constructor(initialState) {
+        this.snapshot = initialState
+            ? restoreNavigationState(initialState)
+            : { version: 1, rootNodeId: 'root', nodes: {} };
+    }
+    getState = () => this.snapshot;
+    getNode = (id) => this.snapshot.nodes[id];
+    subscribe = (listener) => {
+        this.subscribers.add(listener);
+        return () => {
+            this.subscribers.delete(listener);
+        };
+    };
+    isReady = () => this.mounted.has(this.snapshot.rootNodeId);
+    register(node, options) {
+        assertSerializable(node.state);
+        if (this.mounted.has(node.id))
+            throw new Error(`Duplicate navigator id: ${node.id}. Supply a unique id for sibling navigators.`);
+        const saved = this.snapshot.nodes[node.id];
+        if (saved &&
+            (saved.type !== node.type ||
+                retainedRoutes(saved.state).some((r) => !options.routes.some((c) => c.name === r.name))))
+            throw new Error(`Saved state does not match navigator ${node.id}.`);
+        const previousFocus = this.focusedRouteKeys();
+        this.configs.set(node.id, options);
+        this.mounted.add(node.id);
+        this.commit({
+            ...this.snapshot,
+            rootNodeId: node.parentId ? this.snapshot.rootNodeId : node.id,
+            nodes: { ...this.snapshot.nodes, [node.id]: saved ?? node },
+        }, undefined, previousFocus);
+        return () => {
+            const oldFocus = this.focusedRouteKeys();
+            this.mounted.delete(node.id);
+            this.configs.delete(node.id);
+            this.publishFocus(oldFocus);
+            for (const listener of this.subscribers)
+                listener();
+        };
+    }
+    updateOptions(id, options) {
+        this.configs.set(id, options);
+    }
+    addListener(routeKey, type, listener) {
+        let types = this.events.get(routeKey);
+        if (!types)
+            this.events.set(routeKey, (types = new Map()));
+        let listeners = types.get(type);
+        if (!listeners)
+            types.set(type, (listeners = new Set()));
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+            if (!listeners.size)
+                types.delete(type);
+            if (!types.size)
+                this.events.delete(routeKey);
+        };
+    }
+    emit(target, type, action) {
+        const event = {
+            type,
+            target,
+            action,
+            defaultPrevented: false,
+            preventDefault() {
+                if (type === 'beforeRemove')
+                    this.defaultPrevented = true;
+            },
+        };
+        for (const listener of this.events.get(target)?.get(type) ?? [])
+            listener(event);
+        return event.defaultPrevented;
+    }
+    isNodeFocused(id) {
+        const node = this.snapshot.nodes[id];
+        if (!node || !this.mounted.has(id))
+            return false;
+        if (!node.parentId)
+            return true;
+        const parent = this.snapshot.nodes[node.parentId];
+        return (!!parent &&
+            parent.state.activeRouteKey === node.parentRouteKey &&
+            this.isNodeFocused(parent.id));
+    }
+    isRouteFocused(id, routeKey) {
+        return (this.getNode(id)?.state.activeRouteKey === routeKey &&
+            this.isNodeFocused(id));
+    }
+    focusedRouteKeys() {
+        const depth = (node) => node.parentId && this.getNode(node.parentId)
+            ? 1 + depth(this.getNode(node.parentId))
+            : 0;
+        return Object.values(this.snapshot.nodes)
+            .filter((n) => this.isNodeFocused(n.id))
+            .sort((a, b) => depth(a) - depth(b))
+            .map((n) => n.state.activeRouteKey);
+    }
+    publishFocus(previous) {
+        const next = this.focusedRouteKeys();
+        for (const key of [...previous].reverse())
+            if (!next.includes(key))
+                this.emit(key, 'blur');
+        for (const key of next)
+            if (!previous.includes(key))
+                this.emit(key, 'focus');
+    }
+    commit(next, action, previous = this.focusedRouteKeys()) {
+        this.snapshot = next;
+        this.publishFocus(previous);
+        for (const listener of this.subscribers)
+            listener();
+        for (const node of Object.values(next.nodes))
+            for (const route of node.state.routes)
+                this.emit(route.key, 'state', action);
+    }
+    focusRoute(id, routeKey) {
+        const node = this.getNode(id);
+        if (node?.state.type === 'split' &&
+            node.state.activeRouteKey !== routeKey) {
+            const route = node.state.routes.find((r) => r.key === routeKey);
+            if (!route || !node.state.visibleColumnIds.includes(route.name))
+                return;
+            this.commit({
+                ...this.snapshot,
+                nodes: {
+                    ...this.snapshot.nodes,
+                    [id]: { ...node, state: { ...node.state, activeRouteKey: routeKey } },
+                },
+            });
+        }
+        // Native focus bubbles: an ancestor Scene must not replace the focused leaf.
+        let active = this.getNode(this.getActiveNodeId());
+        while (active) {
+            if (active.id === id && this.isNodeFocused(this.getActiveNodeId()))
+                return;
+            active = active.parentId ? this.getNode(active.parentId) : undefined;
+        }
+        this.setFocusedNode(id);
+    }
+    setFocusedNode(id) {
+        if (!this.mounted.has(id))
+            return;
+        let node = this.getNode(id);
+        const nodes = { ...this.snapshot.nodes };
+        while (node?.parentId) {
+            const parent = nodes[node.parentId];
+            if (!parent)
+                return;
+            if (parent.state.type === 'split') {
+                const route = parent.state.routes.find((r) => r.key === node.parentRouteKey);
+                if (!route || !parent.state.visibleColumnIds.includes(route.name))
+                    return;
+                nodes[parent.id] = {
+                    ...parent,
+                    state: { ...parent.state, activeRouteKey: route.key },
+                };
+            }
+            else if (parent.state.activeRouteKey !== node.parentRouteKey)
+                return;
+            node = parent;
+        }
+        if (this.snapshot.activeNodeId === id &&
+            Object.keys(nodes).every((key) => nodes[key] === this.snapshot.nodes[key]))
+            return;
+        this.commit({ ...this.snapshot, nodes, activeNodeId: id });
+    }
+    getActiveNodeId() {
+        const preferred = this.snapshot.activeNodeId;
+        let id = preferred && this.isNodeFocused(preferred)
+            ? preferred
+            : this.snapshot.rootNodeId;
+        while (true) {
+            const child = Object.values(this.snapshot.nodes).find((n) => n.parentId === id && this.isNodeFocused(n.id));
+            if (!child)
+                return id;
+            id = child.id;
+        }
+    }
+    canDispatch(type, target = this.getActiveNodeId()) {
+        let node = this.getNode(target);
+        while (node) {
+            const s = node.state;
+            if (s.type === 'stack' &&
+                (type === 'back'
+                    ? s.history
+                        ? s.history.past.length > 0
+                        : s.routes.length > 1
+                    : !!s.history?.future.length))
+                return true;
+            node = node.parentId ? this.getNode(node.parentId) : undefined;
+        }
+        return false;
+    }
+    dispatch = (original) => {
+        let action = original;
+        if ('payload' in action)
+            assertSerializable(action.payload);
+        if (action.type === 'navigate' ||
+            action.type === 'push' ||
+            action.type === 'replace')
+            action = {
+                ...action,
+                payload: {
+                    ...action.payload,
+                    key: action.payload.key ?? (0, routers_1.createRouteKey)(action.payload.name),
+                },
+            };
+        let node = this.getNode(action.target ?? this.getActiveNodeId());
+        while (node) {
+            const options = this.configs.get(node.id);
+            const next = options
+                ? (0, routers_1.reduceNavigation)(node.state, action, options)
+                : null;
+            if (next) {
+                if (next === node.state)
+                    return true;
+                const removed = node.state.routes
+                    .filter((r) => !next.routes.some((n) => n.key === r.key))
+                    .map((r) => r.key);
+                const removedNodes = new Set();
+                let changed = true;
+                while (changed) {
+                    changed = false;
+                    for (const child of Object.values(this.snapshot.nodes))
+                        if (!removedNodes.has(child.id) &&
+                            ((child.parentId === node.id &&
+                                removed.includes(child.parentRouteKey)) ||
+                                removedNodes.has(child.parentId))) {
+                            removedNodes.add(child.id);
+                            removed.push(...child.state.routes.map((r) => r.key));
+                            changed = true;
+                        }
+                }
+                let blocked = false;
+                for (const key of [...removed].reverse())
+                    blocked = this.emit(key, 'beforeRemove', action) || blocked;
+                if (blocked)
+                    return true;
+                const nodes = {
+                    ...this.snapshot.nodes,
+                    [node.id]: { ...node, state: next },
+                };
+                // Keep history-owned subtrees so Back/Forward can restore nested navigator state.
+                let pruned = true;
+                while (pruned) {
+                    pruned = false;
+                    for (const child of Object.values(nodes))
+                        if (child.parentId &&
+                            (!nodes[child.parentId] ||
+                                !retainedRoutes(nodes[child.parentId].state).some((r) => r.key === child.parentRouteKey))) {
+                            delete nodes[child.id];
+                            pruned = true;
+                        }
+                }
+                this.commit({ ...this.snapshot, nodes, activeNodeId: node.id }, action);
+                return true;
+            }
+            node = node.parentId ? this.getNode(node.parentId) : undefined;
+        }
+        if (['navigate', 'push', 'replace', 'popTo', 'select'].includes(action.type))
+            console.warn(`Unhandled navigation action: ${action.type}${'payload' in action && action.payload && 'name' in action.payload ? ` (${action.payload.name})` : ''}`);
+        return false;
+    };
+}
+exports.NavigationStore = NavigationStore;