one 1.14.4 → 1.15.0

package/dist/esm/router/useScreens.native.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { createElement as _createElement } from "react";
 import { createNavigatorFactory } from "@react-navigation/core";
 import { SafeAreaProviderCompat } from "@react-navigation/elements";
-import React, { memo, Suspense, useContext } from "react";
+import React, { memo, Suspense, useContext, useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { ServerContextScript } from "../server/ServerContextScript.native.js";
 import { getPageExport } from "../utils/getPageExport.native.js";
@@ -16,190 +16,301 @@ import { SpaShellContext } from "./SpaShellContext.native.js";
 import { NamedSlot } from "../views/Navigator.native.js";
 import { sortRoutesWithInitial } from "./sortRoutes.native.js";
 function _assert_this_initialized(self) {
-  if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
   return self;
 }
 function _call_super(_this, derived, args) {
-  return derived = _get_prototype_of(derived), _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+  derived = _get_prototype_of(derived);
+  return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
 }
 function _class_call_check(instance, Constructor) {
-  if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
 }
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
     var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor);
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
   }
 }
 function _create_class(Constructor, protoProps, staticProps) {
-  return protoProps && _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps), Constructor;
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
 }
 function _get_prototype_of(o) {
-  return _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function (o2) {
+  _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o2) {
     return o2.__proto__ || Object.getPrototypeOf(o2);
-  }, _get_prototype_of(o);
+  };
+  return _get_prototype_of(o);
 }
 function _inherits(subClass, superClass) {
-  if (typeof superClass != "function" && superClass !== null) throw new TypeError("Super expression must either be null or a function");
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
   subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
       value: subClass,
-      writable: !0,
-      configurable: !0
+      writable: true,
+      configurable: true
     }
-  }), superClass && _set_prototype_of(subClass, superClass);
+  });
+  if (superClass) _set_prototype_of(subClass, superClass);
 }
 function _instanceof(left, right) {
-  return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
 }
 function _possible_constructor_return(self, call) {
-  return call && (_type_of(call) === "object" || typeof call == "function") ? call : _assert_this_initialized(self);
+  if (call && (_type_of(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+  return _assert_this_initialized(self);
 }
 function _set_prototype_of(o, p) {
-  return _set_prototype_of = Object.setPrototypeOf || function (o2, p2) {
-    return o2.__proto__ = p2, o2;
-  }, _set_prototype_of(o, p);
+  _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o2, p2) {
+    o2.__proto__ = p2;
+    return o2;
+  };
+  return _set_prototype_of(o, p);
 }
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 function _is_native_reflect_construct() {
   try {
     var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-  } catch {}
+  } catch (_) {}
   return (_is_native_reflect_construct = function () {
     return !!result;
   })();
 }
 function hasMetaCharset(children) {
   if (process.env.NODE_ENV === "development") {
-    if (!children) return !1;
+    if (!children) return false;
     var checkElement = function (child) {
-      if (! /* @__PURE__ */React.isValidElement(child)) return !1;
+      if (! /* @__PURE__ */React.isValidElement(child)) return false;
       if (child.type === "meta") {
         var props = child.props;
-        if ("charSet" in props || "charset" in props) return !0;
+        if ("charSet" in props || "charset" in props) {
+          return true;
+        }
       }
       var childProps = child.props;
-      return childProps.children ? hasMetaCharset(childProps.children) : !1;
+      if (childProps.children) {
+        return hasMetaCharset(childProps.children);
+      }
+      return false;
     };
-    return Array.isArray(children) ? children.some(checkElement) : checkElement(children);
+    if (Array.isArray(children)) {
+      return children.some(checkElement);
+    }
+    return checkElement(children);
   }
-  return !0;
+  return true;
 }
 var {
-    Screen,
-    Group
-  } = createNavigatorFactory({})(),
-  cachedInlineCSSElements = typeof document < "u" ? function () {
-    var elements = [],
-      cssElements = document.querySelectorAll('style[id^="__one_css_"], link[rel="stylesheet"][data-one-css]');
-    return cssElements.forEach(function (el, i) {
-      if (el.tagName === "STYLE") elements.push(/* @__PURE__ */_jsx("style", {
+  Screen,
+  Group
+} = createNavigatorFactory({})();
+var cachedInlineCSSElements = typeof document !== "undefined" ? function () {
+  var elements = [];
+  var cssElements = document.querySelectorAll('style[id^="__one_css_"], link[rel="stylesheet"][data-one-css]');
+  cssElements.forEach(function (el, i) {
+    if (el.tagName === "STYLE") {
+      elements.push(/* @__PURE__ */_jsx("style", {
         id: el.id,
         dangerouslySetInnerHTML: {
           __html: el.innerHTML
         }
-      }, `inline-css-${i}`));else {
-        var href = el.getAttribute("href");
-        elements.push(/* @__PURE__ */_jsx("link", {
-          rel: "stylesheet",
-          href,
-          "data-one-css": ""
-        }, href));
-      }
-    }), elements;
-  }() : [];
+      }, `inline-css-${i}`));
+    } else {
+      var href = el.getAttribute("href");
+      elements.push(/* @__PURE__ */_jsx("link", {
+        rel: "stylesheet",
+        href,
+        "data-one-css": ""
+      }, href));
+    }
+  });
+  return elements;
+}() : [];
 function RootLayoutRenderer(param) {
   var {
-      LayoutComponent,
-      layoutProps,
-      forwardedRef
-    } = param,
-    _serverContext_cssContents,
-    _serverContext_css;
-  if (process.env.NODE_ENV === "development" && !1) var setHmrKey;
-  var out = LayoutComponent(layoutProps, forwardedRef),
-    {
-      children,
-      bodyProps,
-      head,
-      htmlProps
-    } = filterRootHTML(out),
-    {
-      children: headChildren,
-      ...headProps
-    } = head?.props || {},
-    serverContext = useServerContext(),
-    finalChildren = children;
-  return finalChildren;
+    LayoutComponent,
+    layoutProps,
+    forwardedRef
+  } = param;
+  var _serverContext_cssContents, _serverContext_css;
+  if (process.env.NODE_ENV === "development" && false) {
+    var [, setHmrKey] = useState(0);
+    useEffect(function () {
+      var handler = function () {
+        return setHmrKey(function (k) {
+          return k + 1;
+        });
+      };
+      window.addEventListener("one-hmr-update", handler);
+      return function () {
+        return window.removeEventListener("one-hmr-update", handler);
+      };
+    }, []);
+  }
+  var out = LayoutComponent(layoutProps, forwardedRef);
+  var {
+    children,
+    bodyProps,
+    head,
+    htmlProps
+  } = filterRootHTML(out);
+  var {
+    children: headChildren,
+    ...headProps
+  } = (head === null || head === void 0 ? void 0 : head.props) || {};
+  var serverContext = useServerContext();
+  var finalChildren = children;
+  if (true) {
+    return finalChildren;
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (!hasMetaCharset(headChildren)) {
+      console.warn(`[one] Missing <meta charSet="utf-8" /> in your root _layout.tsx <head>. This can cause React hydration issues due to encoding mismatch. Add it as the first element in your <head> tag.`);
+    }
+  }
+  finalChildren = /* @__PURE__ */_jsxs(_Fragment, {
+    children: [/* @__PURE__ */_jsxs("head", {
+      ...headProps,
+      children: [/* @__PURE__ */_jsx(DevHead, {}), /* @__PURE__ */_jsx("script", {
+        dangerouslySetInnerHTML: {
+          __html: `globalThis['global'] = globalThis`
+        }
+      }), (serverContext === null || serverContext === void 0 ? void 0 : (_serverContext_cssContents = serverContext.cssContents) === null || _serverContext_cssContents === void 0 ? void 0 : _serverContext_cssContents.length) || (serverContext === null || serverContext === void 0 ? void 0 : serverContext.cssInlineCount) ?
+      // inline/mixed CSS: render each entry as <style> (if content) or <link>
+      (serverContext === null || serverContext === void 0 ? void 0 : serverContext.cssContents) ? serverContext.cssContents.map(function (content, i) {
+        var _serverContext_css2;
+        return content ? /* @__PURE__ */_jsx("style", {
+          id: `__one_css_${i}`,
+          dangerouslySetInnerHTML: {
+            __html: content
+          }
+        }, `inline-css-${i}`) : ((_serverContext_css2 = serverContext.css) === null || _serverContext_css2 === void 0 ? void 0 : _serverContext_css2[i]) ? /* @__PURE__ */_jsx("link", {
+          rel: "stylesheet",
+          href: serverContext.css[i]
+        }, serverContext.css[i]) : null;
+      }) : cachedInlineCSSElements : serverContext === null || serverContext === void 0 ? void 0 : (_serverContext_css = serverContext.css) === null || _serverContext_css === void 0 ? void 0 : _serverContext_css.map(function (file) {
+        return /* @__PURE__ */_jsx("link", {
+          rel: "stylesheet",
+          href: file
+        }, file);
+      }), /* @__PURE__ */_jsx(ServerContextScript, {}), headChildren]
+    }, "head"), /* @__PURE__ */_jsx("body", {
+      suppressHydrationWarning: true,
+      ...bodyProps,
+      children: /* @__PURE__ */_jsx(SafeAreaProviderCompat, {
+        children: finalChildren
+      })
+    }, "body")]
+  });
+  return (
+    // tamagui and libraries can add className on hydration to have ssr safe styling
+    // so supress hydration warnings here
+    /* @__PURE__ */
+    _jsx("html", {
+      suppressHydrationWarning: true,
+      lang: "en-US",
+      ...htmlProps,
+      children: finalChildren
+    })
+  );
 }
 function getSortedChildren(children, order, initialRouteName, options) {
-  if (!order?.length) return children.sort(sortRoutesWithInitial(initialRouteName)).map(function (route) {
+  if (!(order === null || order === void 0 ? void 0 : order.length)) {
+    return children.sort(sortRoutesWithInitial(initialRouteName)).map(function (route) {
+      return {
+        route,
+        props: {}
+      };
+    });
+  }
+  var entries = [...children];
+  var ordered = order.map(function (param) {
+    var {
+      name,
+      redirect,
+      initialParams,
+      listeners,
+      options: _$options,
+      getId
+    } = param;
+    if (!entries.length) {
+      console.warn(`[Layout children]: Too many screens defined. Route "${name}" is extraneous.`);
+      return null;
+    }
+    var matchIndex = entries.findIndex(function (child) {
+      return child.route === name;
+    });
+    if (matchIndex === -1) {
+      console.warn(`[Layout children]: No route named "${name}" exists in nested children:`, children.map(function (param2) {
+        var {
+          route
+        } = param2;
+        return route;
+      }));
+      return null;
+    }
+    var match = entries[matchIndex];
+    entries.splice(matchIndex, 1);
+    if (redirect) {
+      if (typeof redirect === "string") {
+        throw new Error(`Redirecting to a specific route is not supported yet.`);
+      }
+      return null;
+    }
     return {
-      route,
-      props: {}
-    };
-  });
-  var entries = [...children],
-    ordered = order.map(function (param) {
-      var {
-        name,
-        redirect,
+      route: match,
+      props: {
         initialParams,
         listeners,
         options: _$options,
         getId
-      } = param;
-      if (!entries.length) return console.warn(`[Layout children]: Too many screens defined. Route "${name}" is extraneous.`), null;
-      var matchIndex = entries.findIndex(function (child) {
-        return child.route === name;
-      });
-      if (matchIndex === -1) return console.warn(`[Layout children]: No route named "${name}" exists in nested children:`, children.map(function (param2) {
-        var {
-          route
-        } = param2;
-        return route;
-      })), null;
-      var match = entries[matchIndex];
-      if (entries.splice(matchIndex, 1), redirect) {
-        if (typeof redirect == "string") throw new Error("Redirecting to a specific route is not supported yet.");
-        return null;
       }
+    };
+  }).filter(Boolean);
+  if (!(options === null || options === void 0 ? void 0 : options.onlyMatching)) {
+    ordered.push(...entries.sort(sortRoutesWithInitial(initialRouteName)).map(function (route) {
       return {
-        route: match,
-        props: {
-          initialParams,
-          listeners,
-          options: _$options,
-          getId
-        }
+        route,
+        props: {}
       };
-    }).filter(Boolean);
-  return options?.onlyMatching || ordered.push(...entries.sort(sortRoutesWithInitial(initialRouteName)).map(function (route) {
-    return {
-      route,
-      props: {}
-    };
-  })), ordered;
+    }));
+  }
+  return ordered;
 }
 function useSortedScreens(order, options) {
-  var node = useRouteNode(),
-    sortedScreens = React.useMemo(function () {
-      var _node_children,
-        sorted = !(node == null || (_node_children = node.children) === null || _node_children === void 0) && _node_children.length ? getSortedChildren(node.children, order, node.initialRouteName, options) : [];
-      return sorted.filter(function (value) {
-        var _options_protectedScreens,
-          _options_protectedScreens1,
-          routeName = value.route.route,
-          normalized = routeName.replace(/\/index$/, "");
-        return !(!(options == null || (_options_protectedScreens = options.protectedScreens) === null || _options_protectedScreens === void 0) && _options_protectedScreens.has(routeName) || !(options == null || (_options_protectedScreens1 = options.protectedScreens) === null || _options_protectedScreens1 === void 0) && _options_protectedScreens1.has(normalized));
-      }).map(function (value) {
-        return routeToScreen(value.route, value.props);
-      });
-    }, [node?.children, node?.initialRouteName, order, options?.protectedScreens]);
+  var node = useRouteNode();
+  var sortedScreens = React.useMemo(function () {
+    var _node_children;
+    var sorted = (node === null || node === void 0 ? void 0 : (_node_children = node.children) === null || _node_children === void 0 ? void 0 : _node_children.length) ? getSortedChildren(node.children, order, node.initialRouteName, options) : [];
+    return sorted.filter(function (value) {
+      var _options_protectedScreens, _options_protectedScreens1;
+      var routeName = value.route.route;
+      var normalized = routeName.replace(/\/index$/, "");
+      return !((options === null || options === void 0 ? void 0 : (_options_protectedScreens = options.protectedScreens) === null || _options_protectedScreens === void 0 ? void 0 : _options_protectedScreens.has(routeName)) || (options === null || options === void 0 ? void 0 : (_options_protectedScreens1 = options.protectedScreens) === null || _options_protectedScreens1 === void 0 ? void 0 : _options_protectedScreens1.has(normalized)));
+    }).map(function (value) {
+      return routeToScreen(value.route, value.props);
+    });
+  }, [node === null || node === void 0 ? void 0 : node.children, node === null || node === void 0 ? void 0 : node.initialRouteName, order, options === null || options === void 0 ? void 0 : options.protectedScreens]);
   return sortedScreens;
 }
 function fromImport(param) {
@@ -207,23 +318,27 @@ function fromImport(param) {
     ErrorBoundary,
     ...component
   } = param;
-  if (ErrorBoundary) return {
-    default: /* @__PURE__ */React.forwardRef(function (props, ref) {
-      var children = /* @__PURE__ */React.createElement(getPageExport(component) || EmptyRoute, {
-        ...props,
-        ref
-      });
-      return /* @__PURE__ */_jsx(Try, {
-        catch: ErrorBoundary,
-        children
-      });
-    })
-  };
+  if (ErrorBoundary) {
+    return {
+      default: /* @__PURE__ */React.forwardRef(function (props, ref) {
+        var children = /* @__PURE__ */React.createElement(getPageExport(component) || EmptyRoute, {
+          ...props,
+          ref
+        });
+        return /* @__PURE__ */_jsx(Try, {
+          catch: ErrorBoundary,
+          children
+        });
+      })
+    };
+  }
   if (process.env.NODE_ENV !== "production") {
     var exported = getPageExport(component);
-    if (exported && (typeof exported > "u" ? "undefined" : _type_of(exported)) === "object" && Object.keys(exported).length === 0) return {
-      default: EmptyRoute
-    };
+    if (exported && (typeof exported === "undefined" ? "undefined" : _type_of(exported)) === "object" && Object.keys(exported).length === 0) {
+      return {
+        default: EmptyRoute
+      };
+    }
   }
   return {
     default: getPageExport(component)
@@ -231,130 +346,192 @@ function fromImport(param) {
 }
 var qualifiedStore = /* @__PURE__ */new WeakMap();
 function getQualifiedRouteComponent(value) {
-  if (value && qualifiedStore.has(value)) return qualifiedStore.get(value);
+  if (value && qualifiedStore.has(value)) {
+    return qualifiedStore.get(value);
+  }
   var ScreenComponent = /* @__PURE__ */React.forwardRef(function (props, ref) {
-      var _value_children;
-      if (process.env.NODE_ENV === "development" && !1) var setHmrKey;
-      var isSpaShell = useContext(SpaShellContext);
-      if (isSpaShell && props.segment !== "" && !(!((_value_children = value.children) === null || _value_children === void 0) && _value_children.length)) return /* @__PURE__ */_jsx("div", {
+    var _value_children;
+    if (process.env.NODE_ENV === "development" && false) {
+      var [, setHmrKey] = useState(0);
+      useEffect(function () {
+        var handler = function () {
+          return setHmrKey(function (k) {
+            return k + 1;
+          });
+        };
+        window.addEventListener("one-hmr-update", handler);
+        return function () {
+          return window.removeEventListener("one-hmr-update", handler);
+        };
+      }, []);
+    }
+    var isSpaShell = useContext(SpaShellContext);
+    if (isSpaShell && props.segment !== "" && !((_value_children = value.children) === null || _value_children === void 0 ? void 0 : _value_children.length)) {
+      return /* @__PURE__ */_jsx("div", {
         "data-one-spa-content": ""
       });
-      var res = value.loadRoute(),
-        Component = getPageExport(fromImport(res));
-      process.env.NODE_ENV === "development" && process.env.DEBUG === "one" && (console.groupCollapsed(`Render ${props.key} ${props.segment}`), console.info("value", value), console.info("Component", Component), console.groupEnd());
-      var slotProps = {};
-      if (value.slots && value.slots.size > 0) {
-        var _iteratorNormalCompletion = !0,
-          _didIteratorError = !1,
-          _iteratorError = void 0;
+    }
+    var res = value.loadRoute();
+    var Component = getPageExport(fromImport(res));
+    if (process.env.NODE_ENV === "development" && process.env.DEBUG === "one") {
+      console.groupCollapsed(`Render ${props.key} ${props.segment}`);
+      console.info(`value`, value);
+      console.info(`Component`, Component);
+      console.groupEnd();
+    }
+    var slotProps = {};
+    if (value.slots && value.slots.size > 0) {
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = value.slots[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var [slotName] = _step.value;
+          slotProps[slotName] = /* @__PURE__ */_jsx(NamedSlot, {
+            name: slotName,
+            layoutContextKey: value.contextKey
+          });
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
         try {
-          for (var _iterator = value.slots[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-            var [slotName] = _step.value;
-            slotProps[slotName] = /* @__PURE__ */_jsx(NamedSlot, {
-              name: slotName,
-              layoutContextKey: value.contextKey
-            });
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
           }
-        } catch (err) {
-          _didIteratorError = !0, _iteratorError = err;
         } finally {
-          try {
-            !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-          } finally {
-            if (_didIteratorError) throw _iteratorError;
+          if (_didIteratorError) {
+            throw _iteratorError;
           }
         }
       }
-      return props.segment === "" ? /* @__PURE__ */_jsx(RootLayoutRenderer, {
+    }
+    if (props.segment === "") {
+      return /* @__PURE__ */_jsx(RootLayoutRenderer, {
         LayoutComponent: Component,
         layoutProps: {
           ...props,
           ...slotProps
         },
         forwardedRef: ref
-      }) : /* @__PURE__ */_jsx(RouteErrorBoundary, {
-        routeName: value.route,
-        children: /* @__PURE__ */_jsx(Component, {
-          ...props,
-          ...slotProps,
-          ref
-        })
       });
-    }),
-    wrapSuspense = function (children) {
-      return process.env.ONE_SUSPEND_ROUTES_NATIVE === "0" ? children : /* @__PURE__ */_jsx(Suspense, {
+    }
+    return /* @__PURE__ */_jsx(RouteErrorBoundary, {
+      routeName: value.route,
+      children: /* @__PURE__ */_jsx(Component, {
+        ...props,
+        ...slotProps,
+        ref
+      })
+    });
+  });
+  var wrapSuspense = function (children) {
+    if (true) {
+      if (process.env.ONE_SUSPEND_ROUTES_NATIVE === "0") {
+        return children;
+      }
+      return /* @__PURE__ */_jsx(Suspense, {
         fallback: null,
         children
       });
-    },
-    QualifiedRoute = /* @__PURE__ */React.forwardRef(function (param, ref) {
-      var {
-        // Remove these React Navigation props to
-        // enforce usage of router hooks (where the query params are correct).
-        route,
-        navigation,
-        // Pass all other props to the component
-        ...props
-      } = param;
-      return /* @__PURE__ */_jsx(Route, {
-        route,
-        node: value,
-        children: /* @__PURE__ */_jsx(_Fragment, {
-          children: wrapSuspense(/* @__PURE__ */_jsx(ScreenComponent, {
-            ...props,
-            ref,
-            // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
-            // the intention is to make it possible to deduce shared routes.
-            segment: value.route
-          }))
-        })
+    }
+    if (process.env.ONE_SUSPEND_ROUTES === "1") {
+      return /* @__PURE__ */_jsx(Suspense, {
+        fallback: null,
+        children
       });
+    }
+    return children;
+  };
+  var QualifiedRoute = /* @__PURE__ */React.forwardRef(function (param, ref) {
+    var {
+      // Remove these React Navigation props to
+      // enforce usage of router hooks (where the query params are correct).
+      route,
+      navigation,
+      // Pass all other props to the component
+      ...props
+    } = param;
+    return /* @__PURE__ */_jsx(Route, {
+      route,
+      node: value,
+      children: /* @__PURE__ */_jsx(_Fragment, {
+        children: wrapSuspense(/* @__PURE__ */_jsx(ScreenComponent, {
+          ...props,
+          ref,
+          // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
+          // the intention is to make it possible to deduce shared routes.
+          segment: value.route
+        }))
+      })
     });
-  return QualifiedRoute.displayName = `Route(${value.route})`, qualifiedStore.set(value, QualifiedRoute), /* @__PURE__ */memo(QualifiedRoute);
+  });
+  QualifiedRoute.displayName = `Route(${value.route})`;
+  qualifiedStore.set(value, QualifiedRoute);
+  return /* @__PURE__ */memo(QualifiedRoute);
 }
 function createGetIdForRoute(route) {
   var include = /* @__PURE__ */new Map();
   if (route.dynamic) {
-    var _iteratorNormalCompletion = !0,
-      _didIteratorError = !1,
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
       _iteratorError = void 0;
     try {
-      for (var _iterator = route.dynamic[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+      for (var _iterator = route.dynamic[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
         var segment = _step.value;
         include.set(segment.name, segment);
       }
     } catch (err) {
-      _didIteratorError = !0, _iteratorError = err;
+      _didIteratorError = true;
+      _iteratorError = err;
     } finally {
       try {
-        !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
       } finally {
-        if (_didIteratorError) throw _iteratorError;
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
       }
     }
   }
   return function () {
     var {
-        params = {}
-      } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {},
-      _segments_join,
-      segments = [],
-      _iteratorNormalCompletion2 = !0,
-      _didIteratorError2 = !1,
+      params = {}
+    } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _segments_join;
+    var segments = [];
+    var _iteratorNormalCompletion2 = true,
+      _didIteratorError2 = false,
       _iteratorError2 = void 0;
     try {
-      for (var _iterator2 = include.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
-        var dynamic = _step2.value,
-          value = params?.[dynamic.name];
-        Array.isArray(value) && value.length > 0 ? segments.push(value.join("/")) : value && !Array.isArray(value) ? segments.push(value) : dynamic.deep ? segments.push(`[...${dynamic.name}]`) : segments.push(`[${dynamic.name}]`);
+      for (var _iterator2 = include.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+        var dynamic = _step2.value;
+        var value = params === null || params === void 0 ? void 0 : params[dynamic.name];
+        if (Array.isArray(value) && value.length > 0) {
+          segments.push(value.join("/"));
+        } else if (value && !Array.isArray(value)) {
+          segments.push(value);
+        } else if (dynamic.deep) {
+          segments.push(`[...${dynamic.name}]`);
+        } else {
+          segments.push(`[${dynamic.name}]`);
+        }
       }
     } catch (err) {
-      _didIteratorError2 = !0, _iteratorError2 = err;
+      _didIteratorError2 = true;
+      _iteratorError2 = err;
     } finally {
       try {
-        !_iteratorNormalCompletion2 && _iterator2.return != null && _iterator2.return();
+        if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+          _iterator2.return();
+        }
       } finally {
-        if (_didIteratorError2) throw _iteratorError2;
+        if (_didIteratorError2) {
+          throw _iteratorError2;
+        }
       }
     }
     return (_segments_join = segments.join("/")) !== null && _segments_join !== void 0 ? _segments_join : route.contextKey;
@@ -372,20 +549,24 @@ function routeToScreen(route) {
     name: route.route,
     key: route.route,
     options: function (args) {
-      var _route_loadRoute,
-        staticOptions = route.generated ? (_route_loadRoute = route.loadRoute()) === null || _route_loadRoute === void 0 ? void 0 : _route_loadRoute.getNavOptions : null,
-        staticResult = typeof staticOptions == "function" ? staticOptions(args) : staticOptions,
-        dynamicResult = typeof options == "function" ? options?.(args) : options,
-        output = {
-          ...staticResult,
-          ...dynamicResult
+      var _route_loadRoute;
+      var staticOptions = route.generated ? (_route_loadRoute = route.loadRoute()) === null || _route_loadRoute === void 0 ? void 0 : _route_loadRoute.getNavOptions : null;
+      var staticResult = typeof staticOptions === "function" ? staticOptions(args) : staticOptions;
+      var dynamicResult = typeof options === "function" ? options === null || options === void 0 ? void 0 : options(args) : options;
+      var output = {
+        ...staticResult,
+        ...dynamicResult
+      };
+      if (route.generated) {
+        output.tabBarButton = function () {
+          return null;
         };
-      return route.generated && (output.tabBarButton = function () {
-        return null;
-      }, output.drawerItemStyle = {
-        height: 0,
-        display: "none"
-      }), output;
+        output.drawerItemStyle = {
+          height: 0,
+          display: "none"
+        };
+      }
+      return output;
     },
     // this doesn't work, also probably better to wrap suspense only on root layout in useScreens
     // but it doesnt seem to pick up our startTransitions which i wrapped in a few places.
@@ -406,119 +587,123 @@ function routeToScreen(route) {
   });
 }
 var ROUTE_ERROR_BOUNDARY_INITIAL_STATE = {
-    hasError: !1,
-    error: null,
-    errorInfo: null
-  },
-  RouteErrorBoundary = /* @__PURE__ */function (_React_Component) {
-    "use strict";
+  hasError: false,
+  error: null,
+  errorInfo: null
+};
+var RouteErrorBoundary = /* @__PURE__ */function (_React_Component) {
+  "use strict";
 
-    _inherits(RouteErrorBoundary2, _React_Component);
-    function RouteErrorBoundary2(props) {
-      _class_call_check(this, RouteErrorBoundary2);
-      var _this;
-      return _this = _call_super(this, RouteErrorBoundary2, [props]), _this.state = ROUTE_ERROR_BOUNDARY_INITIAL_STATE, _this;
-    }
-    return _create_class(RouteErrorBoundary2, [{
-      key: "componentDidCatch",
-      value: function (error, errorInfo) {
-        console.error(`Error occurred while running route "${this.props.routeName}": ${_instanceof(error, Error) ? error.message : error}
+  _inherits(RouteErrorBoundary2, _React_Component);
+  function RouteErrorBoundary2(props) {
+    _class_call_check(this, RouteErrorBoundary2);
+    var _this;
+    _this = _call_super(this, RouteErrorBoundary2, [props]);
+    _this.state = ROUTE_ERROR_BOUNDARY_INITIAL_STATE;
+    return _this;
+  }
+  _create_class(RouteErrorBoundary2, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      console.error(`Error occurred while running route "${this.props.routeName}": ${_instanceof(error, Error) ? error.message : error}
 
 ${error.stack}
 
 Component Stack:
-${errorInfo.componentStack}`), this.setState({
+${errorInfo.componentStack}`);
+      this.setState({
+        errorInfo
+      });
+    }
+  }, {
+    key: "clearError",
+    value: function clearError() {
+      this.setState(ROUTE_ERROR_BOUNDARY_INITIAL_STATE);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        var {
+          error,
           errorInfo
-        });
-      }
-    }, {
-      key: "clearError",
-      value: function () {
-        this.setState(ROUTE_ERROR_BOUNDARY_INITIAL_STATE);
-      }
-    }, {
-      key: "render",
-      value: function () {
-        if (this.state.hasError) {
-          var {
-            error,
-            errorInfo
-          } = this.state;
-          return /* @__PURE__ */_jsx(SafeAreaView, {
+        } = this.state;
+        return /* @__PURE__ */_jsx(SafeAreaView, {
+          style: {
+            backgroundColor: "#000"
+          },
+          children: /* @__PURE__ */_jsxs(View, {
             style: {
-              backgroundColor: "#000"
+              margin: 16,
+              gap: 16
             },
-            children: /* @__PURE__ */_jsxs(View, {
+            children: [/* @__PURE__ */_jsxs(Text, {
               style: {
-                margin: 16,
-                gap: 16
+                alignSelf: "flex-start",
+                padding: 5,
+                margin: -5,
+                backgroundColor: "red",
+                color: "white",
+                fontSize: 20,
+                fontFamily: "monospace"
               },
-              children: [/* @__PURE__ */_jsxs(Text, {
+              children: ['Error on route "', this.props.routeName, '"']
+            }), /* @__PURE__ */_jsx(Text, {
+              style: {
+                color: "white",
+                fontSize: 16,
+                fontFamily: "monospace"
+              },
+              children: _instanceof(error, Error) ? error.message : error
+            }), /* @__PURE__ */_jsx(TouchableOpacity, {
+              onPress: this.clearError.bind(this),
+              children: /* @__PURE__ */_jsx(Text, {
                 style: {
                   alignSelf: "flex-start",
-                  padding: 5,
-                  margin: -5,
-                  backgroundColor: "red",
-                  color: "white",
-                  fontSize: 20,
+                  margin: -6,
+                  padding: 6,
+                  backgroundColor: "white",
+                  color: "black",
+                  fontSize: 14,
                   fontFamily: "monospace"
                 },
-                children: ['Error on route "', this.props.routeName, '"']
-              }), /* @__PURE__ */_jsx(Text, {
+                children: "Retry"
+              })
+            }), /* @__PURE__ */_jsxs(ScrollView, {
+              contentContainerStyle: {
+                gap: 12
+              },
+              children: [_instanceof(error, Error) ? /* @__PURE__ */_jsx(Text, {
                 style: {
                   color: "white",
-                  fontSize: 16,
+                  fontSize: 12,
                   fontFamily: "monospace"
                 },
-                children: _instanceof(error, Error) ? error.message : error
-              }), /* @__PURE__ */_jsx(TouchableOpacity, {
-                onPress: this.clearError.bind(this),
-                children: /* @__PURE__ */_jsx(Text, {
-                  style: {
-                    alignSelf: "flex-start",
-                    margin: -6,
-                    padding: 6,
-                    backgroundColor: "white",
-                    color: "black",
-                    fontSize: 14,
-                    fontFamily: "monospace"
-                  },
-                  children: "Retry"
-                })
-              }), /* @__PURE__ */_jsxs(ScrollView, {
-                contentContainerStyle: {
-                  gap: 12
+                children: error.stack
+              }) : null, (errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack) ? /* @__PURE__ */_jsxs(Text, {
+                style: {
+                  color: "white",
+                  fontSize: 12,
+                  fontFamily: "monospace"
                 },
-                children: [_instanceof(error, Error) ? /* @__PURE__ */_jsx(Text, {
-                  style: {
-                    color: "white",
-                    fontSize: 12,
-                    fontFamily: "monospace"
-                  },
-                  children: error.stack
-                }) : null, errorInfo?.componentStack ? /* @__PURE__ */_jsxs(Text, {
-                  style: {
-                    color: "white",
-                    fontSize: 12,
-                    fontFamily: "monospace"
-                  },
-                  children: ["Component Stack: ", errorInfo.componentStack]
-                }) : null]
-              })]
-            })
-          });
-        }
-        return this.props.children;
-      }
-    }], [{
-      key: "getDerivedStateFromError",
-      value: function (error) {
-        return {
-          hasError: !0,
-          error
-        };
+                children: ["Component Stack: ", errorInfo.componentStack]
+              }) : null]
+            })]
+          })
+        });
       }
-    }]), RouteErrorBoundary2;
-  }(React.Component);
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true,
+        error
+      };
+    }
+  }]);
+  return RouteErrorBoundary2;
+}(React.Component);
 export { Group, Screen, createGetIdForRoute, getQualifiedRouteComponent, useSortedScreens };
 //# sourceMappingURL=useScreens.native.js.map