UNPKG

one

Version:

One is a new React Framework that makes Vite serve both native and web.

250 lines (249 loc) 7.81 kB
import { StackRouter, useNavigationBuilder } from "@react-navigation/native"; import * as React from "react"; import { SafeAreaView } from "react-native-safe-area-context"; import { useFilterScreenChildren } from "../layouts/withLayoutContext.mjs"; import { findNearestNotFoundRoute, findRouteNodeByPath, useNotFoundState } from "../notFoundState.mjs"; import { useContextKey } from "../router/Route.mjs"; import { matchRoutePattern, stripGroupSegmentsFromPath } from "../router/matchers.mjs"; import { routeNode as globalRouteNode, initialPathname } from "../router/router.mjs"; import { registerProtectedRoutes, unregisterProtectedRoutes } from "../router/router.mjs"; import { useSortedScreens, getQualifiedRouteComponent } from "../router/useScreens.mjs"; import { Screen } from "./Screen.mjs"; import { registerClearSlotStates, registerSetSlotState } from "../router/interceptRoutes.mjs"; import { Fragment, jsx } from "react/jsx-runtime"; const SLOT_STATIC_KEY = "one-slot-static-key"; const globalSlotState = /* @__PURE__ */new Map(); const slotStateListeners = /* @__PURE__ */new Set(); function getSlotState(slotName) { return globalSlotState.get(slotName); } function setSlotState(slotName, state) { if (state === null) { globalSlotState.delete(slotName); } else { globalSlotState.set(slotName, state); } slotStateListeners.forEach(listener => listener()); } function clearAllSlotStates() { globalSlotState.clear(); slotStateListeners.forEach(listener => listener()); } registerClearSlotStates(clearAllSlotStates); registerSetSlotState(setSlotState); function useSlotStateSubscription() { const [, forceUpdate] = React.useReducer(x => x + 1, 0); React.useEffect(() => { slotStateListeners.add(forceUpdate); return () => { slotStateListeners.delete(forceUpdate); }; }, []); } const NavigatorContext = React.createContext(null); if (process.env.NODE_ENV !== "production") { NavigatorContext.displayName = "NavigatorContext"; } function Navigator({ initialRouteName, screenOptions, children, router }) { const contextKey = useContextKey(); const { screens, children: otherSlot, protectedScreens } = useFilterScreenChildren(children, { isCustomNavigator: true, contextKey }); registerProtectedRoutes(contextKey, protectedScreens); React.useEffect(() => { registerProtectedRoutes(contextKey, protectedScreens); return () => { unregisterProtectedRoutes(contextKey); }; }, [contextKey, protectedScreens]); const sorted = useSortedScreens(screens ?? [], { protectedScreens }); if (!sorted.length) { console.warn(`Navigator at "${contextKey}" has no children.`); return null; } return /* @__PURE__ */jsx(QualifiedNavigator, { initialRouteName, screenOptions, screens: sorted, contextKey, router, children: otherSlot }); } function QualifiedNavigator({ initialRouteName, screenOptions, children, screens, contextKey, router = StackRouter }) { const resolvedInitialRouteName = React.useMemo(() => { if (initialRouteName) return initialRouteName; const browserPath = initialPathname ?? (typeof window !== "undefined" ? window.location.pathname : void 0); if (!browserPath) return void 0; const layoutUrlPrefix = stripGroupSegmentsFromPath(contextKey).replace(/\/+$/, ""); let best; for (const screen of screens) { const name = screen?.props?.name; if (!name) continue; const fullPattern = layoutUrlPrefix ? `${layoutUrlPrefix}/${name}` : name; const match = matchRoutePattern(fullPattern, browserPath); if (!match) continue; if (!best || match.specificity > best.specificity) { best = { name, specificity: match.specificity }; } } return best?.name; }, [initialRouteName, screens, contextKey]); const { state, navigation, descriptors, NavigationContent } = useNavigationBuilder(router, { // Used for getting the parent with navigation.getParent('/normalized/path') id: contextKey, children: screens, screenOptions, initialRouteName: resolvedInitialRouteName }); const descriptorsRef = React.useRef(descriptors); descriptorsRef.current = descriptors; const value = React.useMemo(() => { return { contextKey, state, navigation, descriptorsRef, router }; }, [contextKey, state, navigation, router]); return /* @__PURE__ */jsx(NavigatorContext.Provider, { value, children: /* @__PURE__ */jsx(NavigationContent, { children }) }); } function useNavigatorContext() { const context = React.useContext(NavigatorContext); if (!context) { throw new Error("useNavigatorContext must be used within a <Navigator />"); } return context; } function useSlot() { const context = useNavigatorContext(); const { state, descriptorsRef } = context; const notFoundState = useNotFoundState(); if (notFoundState) { const notFoundRouteNode = notFoundState.notFoundRouteNode || findRouteNodeByPath(notFoundState.notFoundPath, globalRouteNode) || findNearestNotFoundRoute(notFoundState.originalPath, globalRouteNode); if (notFoundRouteNode) { const NotFoundComponent = getQualifiedRouteComponent(notFoundRouteNode); return /* @__PURE__ */jsx(NotFoundComponent, { route: { params: {} } }, "one-not-found-inline"); } return null; } if (!state.routes) { return null; } const current = state.routes[state.index]; if (!current) { return null; } const renderedElement = descriptorsRef.current[current.key]?.render() ?? null; if (renderedElement !== null) { return React.cloneElement(renderedElement, { key: `${SLOT_STATIC_KEY}-${current.name}` }); } return renderedElement; } const Slot = React.memo(function Slot2(props) { const contextKey = useContextKey(); const context = React.useContext(NavigatorContext); if (context?.contextKey !== contextKey) { return /* @__PURE__ */jsx(Navigator, { ...props, children: /* @__PURE__ */jsx(QualifiedSlot, {}) }); } return /* @__PURE__ */jsx(QualifiedSlot, {}); }); function QualifiedSlot() { return useSlot(); } function DefaultNavigator() { return /* @__PURE__ */jsx(SafeAreaView, { style: { flex: 1 }, children: /* @__PURE__ */jsx(Navigator, { children: /* @__PURE__ */jsx(QualifiedSlot, {}) }) }); } Navigator.Slot = Slot; Navigator.useContext = useNavigatorContext; Navigator.Screen = Screen; function getScopedSlotKey(slotName, layoutContextKey) { if (!layoutContextKey) return slotName; return `${layoutContextKey}:${slotName}`; } function useNamedSlot(slotName, layoutContextKey) { useSlotStateSubscription(); const scopedKey = getScopedSlotKey(slotName, layoutContextKey); const slotState = getSlotState(scopedKey); if (!slotState?.activeRouteKey || !slotState.isIntercepted) { return null; } if (slotState.activeRouteNode) { const Component = getQualifiedRouteComponent(slotState.activeRouteNode); return /* @__PURE__ */jsx(Component, { route: { params: slotState.params || {} } }, slotState.activeRouteKey); } return null; } function NamedSlot({ name, layoutContextKey, children }) { const slotContent = useNamedSlot(name, layoutContextKey); if (slotContent) { return /* @__PURE__ */jsx(Fragment, { children: slotContent }); } return /* @__PURE__ */jsx(Fragment, { children }); } export { DefaultNavigator, NamedSlot, Navigator, NavigatorContext, QualifiedSlot, Slot, clearAllSlotStates, getScopedSlotKey, getSlotState, setSlotState, useNamedSlot, useNavigatorContext, useSlot }; //# sourceMappingURL=Navigator.mjs.map