react-router 0.0.0-experimental-e7e9ce6e → 0.0.0-experimental-91f2bf54

package/dist/lib/context.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { AgnosticRouteMatch, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, History, Location, Router, StaticHandlerContext, To, TrackedPromise } from "@remix-run/router";
+import type { AgnosticRouteMatch, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, History, Location, Router, StaticHandlerContext, To, TrackedPromise, LazyRouteFunction } from "@remix-run/router";
 import type { Action as NavigationType } from "@remix-run/router";
 export interface IndexRouteObject {
     caseSensitive?: AgnosticIndexRouteObject["caseSensitive"];
@@ -14,6 +14,9 @@ export interface IndexRouteObject {
     children?: undefined;
     element?: React.ReactNode | null;
     errorElement?: React.ReactNode | null;
+    Component?: React.ComponentType | null;
+    ErrorBoundary?: React.ComponentType | null;
+    lazy?: LazyRouteFunction<IndexRouteObject>;
 }
 export interface NonIndexRouteObject {
     caseSensitive?: AgnosticNonIndexRouteObject["caseSensitive"];
@@ -28,6 +31,9 @@ export interface NonIndexRouteObject {
     children?: RouteObject[];
     element?: React.ReactNode | null;
     errorElement?: React.ReactNode | null;
+    Component?: React.ComponentType | null;
+    ErrorBoundary?: React.ComponentType | null;
+    lazy?: LazyRouteFunction<NonIndexRouteObject>;
 }
 export declare type RouteObject = IndexRouteObject | NonIndexRouteObject;
 export declare type DataRouteObject = RouteObject & {

package/dist/lib/hooks.d.ts

@@ -158,7 +158,7 @@ export declare function useActionData(): unknown;
 /**
  * Returns the nearest ancestor Route error, which could be a loader/action
  * error or a render error.  This is intended to be called from your
- * errorElement to display a proper error message.
+ * ErrorBoundary/errorElement to display a proper error message.
  */
 export declare function useRouteError(): unknown;
 /**

package/dist/main.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-e7e9ce6e
+ * React Router v0.0.0-experimental-91f2bf54
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/react-router.development.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-e7e9ce6e
+ * React Router v0.0.0-experimental-91f2bf54
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,7 +8,7 @@
  *
  * @license MIT
  */
-import { UNSAFE_invariant, joinPaths, matchPath, UNSAFE_getPathContributingMatches, warning, resolveTo, parsePath, matchRoutes, Action, isRouteErrorResponse, createMemoryHistory, stripBasename, AbortedDeferredError, createRouter } from '@remix-run/router';
+import { UNSAFE_invariant, joinPaths, matchPath, UNSAFE_getPathContributingMatches, UNSAFE_warning, resolveTo, parsePath, matchRoutes, Action, isRouteErrorResponse, createMemoryHistory, stripBasename, AbortedDeferredError, createRouter } from '@remix-run/router';
 export { AbortedDeferredError, Action as NavigationType, createPath, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from '@remix-run/router';
 import * as React from 'react';
 
@@ -354,7 +354,7 @@ function useNavigate() {
     activeRef.current = true;
   });
   let navigate = React.useCallback((to, options = {}) => {
-    warning(activeRef.current, `You should call navigate() in a React.useEffect(), not when ` + `your component is first rendered.`) ;
+    UNSAFE_warning(activeRef.current, `You should call navigate() in a React.useEffect(), not when ` + `your component is first rendered.`) ;
     if (!activeRef.current) return;
 
     if (typeof to === "number") {
@@ -504,8 +504,8 @@ function useRoutes(routes, locationArg) {
   });
 
   {
-    warning(parentRoute || matches != null, `No routes matched location "${location.pathname}${location.search}${location.hash}" `) ;
-    warning(matches == null || matches[matches.length - 1].route.element !== undefined, `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" does not have an element. ` + `This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`) ;
+    UNSAFE_warning(parentRoute || matches != null, `No routes matched location "${location.pathname}${location.search}${location.hash}" `) ;
+    UNSAFE_warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined, `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" ` + `does not have an element or Component. This means it will render an <Outlet /> with a ` + `null value by default resulting in an "empty" page.`) ;
   }
 
   let renderedMatches = _renderMatches(matches && matches.map(match => Object.assign({}, match, {
@@ -538,7 +538,7 @@ function useRoutes(routes, locationArg) {
   return renderedMatches;
 }
 
-function DefaultErrorElement() {
+function DefaultErrorComponent() {
   let error = useRouteError();
   let message = isRouteErrorResponse(error) ? `${error.status} ${error.statusText}` : error instanceof Error ? error.message : JSON.stringify(error);
   let stack = error instanceof Error ? error.stack : null;
@@ -556,7 +556,7 @@ function DefaultErrorElement() {
   {
     devInfo = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "\uD83D\uDCBF Hey developer \uD83D\uDC4B"), /*#__PURE__*/React.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own\u00A0", /*#__PURE__*/React.createElement("code", {
       style: codeStyles
-    }, "errorElement"), " props on\u00A0", /*#__PURE__*/React.createElement("code", {
+    }, "ErrorBoundary"), " prop on\u00A0", /*#__PURE__*/React.createElement("code", {
       style: codeStyles
     }, "<Route>")));
   }
@@ -634,7 +634,7 @@ function RenderedRoute({
   let dataRouterContext = React.useContext(DataRouterContext); // Track how deep we got in our render pass to emulate SSR componentDidCatch
   // in a DataStaticRouter
 
-  if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && match.route.errorElement) {
+  if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) {
     dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
   }
 
@@ -667,21 +667,45 @@ function _renderMatches(matches, parentMatches = [], dataRouterState) {
   return renderedMatches.reduceRight((outlet, match, index) => {
     let error = match.route.id ? errors?.[match.route.id] : null; // Only data routers handle errors
 
-    let errorElement = dataRouterState ? match.route.errorElement || /*#__PURE__*/React.createElement(DefaultErrorElement, null) : null;
+    let errorElement = null;
+
+    if (dataRouterState) {
+      if (match.route.ErrorBoundary) {
+        errorElement = /*#__PURE__*/React.createElement(match.route.ErrorBoundary, null);
+      } else if (match.route.errorElement) {
+        errorElement = match.route.errorElement;
+      } else {
+        errorElement = /*#__PURE__*/React.createElement(DefaultErrorComponent, null);
+      }
+    }
+
     let matches = parentMatches.concat(renderedMatches.slice(0, index + 1));
 
-    let getChildren = () => /*#__PURE__*/React.createElement(RenderedRoute, {
-      match: match,
-      routeContext: {
-        outlet,
-        matches
+    let getChildren = () => {
+      let children = outlet;
+
+      if (error) {
+        children = errorElement;
+      } else if (match.route.Component) {
+        children = /*#__PURE__*/React.createElement(match.route.Component, null);
+      } else if (match.route.element) {
+        children = match.route.element;
       }
-    }, error ? errorElement : match.route.element !== undefined ? match.route.element : outlet); // Only wrap in an error boundary within data router usages when we have an
-    // errorElement on this route.  Otherwise let it bubble up to an ancestor
-    // errorElement
 
+      return /*#__PURE__*/React.createElement(RenderedRoute, {
+        match: match,
+        routeContext: {
+          outlet,
+          matches
+        },
+        children: children
+      });
+    }; // Only wrap in an error boundary within data router usages when we have an
+    // ErrorBoundary/errorElement on this route.  Otherwise let it bubble up to
+    // an ancestor ErrorBoundary/errorElement
 
-    return dataRouterState && (match.route.errorElement || index === 0) ? /*#__PURE__*/React.createElement(RenderErrorBoundary, {
+
+    return dataRouterState && (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? /*#__PURE__*/React.createElement(RenderErrorBoundary, {
       location: dataRouterState.location,
       component: errorElement,
       error: error,
@@ -703,6 +727,7 @@ var DataRouterHook;
 var DataRouterStateHook;
 
 (function (DataRouterStateHook) {
+  DataRouterStateHook["UseBlocker"] = "useBlocker";
   DataRouterStateHook["UseLoaderData"] = "useLoaderData";
   DataRouterStateHook["UseActionData"] = "useActionData";
   DataRouterStateHook["UseRouteError"] = "useRouteError";
@@ -826,7 +851,7 @@ function useActionData() {
 /**
  * Returns the nearest ancestor Route error, which could be a loader/action
  * error or a render error.  This is intended to be called from your
- * errorElement to display a proper error message.
+ * ErrorBoundary/errorElement to display a proper error message.
  */
 
 function useRouteError() {
@@ -870,21 +895,24 @@ function useBlocker(shouldBlock) {
   let {
     router
   } = useDataRouterContext(DataRouterHook.UseBlocker);
+  let state = useDataRouterState(DataRouterStateHook.UseBlocker);
   let [blockerKey] = React.useState(() => String(++blockerId));
   let blockerFunction = React.useCallback(args => {
     return typeof shouldBlock === "function" ? !!shouldBlock(args) : !!shouldBlock;
   }, [shouldBlock]);
   let blocker = router.getBlocker(blockerKey, blockerFunction); // Cleanup on unmount
 
-  React.useEffect(() => () => router.deleteBlocker(blockerKey), [router, blockerKey]);
-  return blocker;
+  React.useEffect(() => () => router.deleteBlocker(blockerKey), [router, blockerKey]); // Prefer the blocker from state since DataRouterContext is memoized so this
+  // ensures we update on blocker state updates
+
+  return state.blockers.get(blockerKey) || blocker;
 }
 const alreadyWarned = {};
 
 function warningOnce(key, cond, message) {
   if (!cond && !alreadyWarned[key]) {
     alreadyWarned[key] = true;
-    warning(false, message) ;
+    UNSAFE_warning(false, message) ;
   }
 }
 
@@ -896,11 +924,12 @@ function RouterProvider({
   fallbackElement,
   router
 }) {
-  // Sync router state to our component state to force re-renders
-  let state = useSyncExternalStore(router.subscribe, () => router.state, // We have to provide this so React@18 doesn't complain during hydration,
+  let getState = React.useCallback(() => router.state, [router]); // Sync router state to our component state to force re-renders
+
+  let state = useSyncExternalStore(router.subscribe, getState, // We have to provide this so React@18 doesn't complain during hydration,
   // but we pass our serialized hydration data into the router so state here
   // is already synced with what the server saw
-  () => router.state);
+  getState);
   let navigator = React.useMemo(() => {
     return {
       createHref: router.createHref,
@@ -917,7 +946,13 @@ function RouterProvider({
       })
     };
   }, [router]);
-  let basename = router.basename || "/"; // The fragment and {null} here are important!  We need them to keep React 18's
+  let basename = router.basename || "/";
+  let dataRouterContext = React.useMemo(() => ({
+    router,
+    navigator,
+    static: false,
+    basename
+  }), [router, navigator, basename]); // The fragment and {null} here are important!  We need them to keep React 18's
   // useId happy when we are server-rendering since we may have a <script> here
   // containing the hydrated server-side staticContext (from StaticRouterProvider).
   // useId relies on the component tree structure to generate deterministic id's
@@ -925,13 +960,7 @@ function RouterProvider({
   // we don't need the <script> tag
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataRouterContext.Provider, {
-    value: {
-      router,
-      navigator,
-      static: false,
-      // Do we need this?
-      basename
-    }
+    value: dataRouterContext
   }, /*#__PURE__*/React.createElement(DataRouterStateContext.Provider, {
     value: state
   }, /*#__PURE__*/React.createElement(Router, {
@@ -996,7 +1025,7 @@ function Navigate({
   !useInRouterContext() ? UNSAFE_invariant(false, // TODO: This error is probably because they somehow have 2 versions of
   // the router loaded. We can help them understand how to avoid that.
   `<Navigate> may be used only in the context of a <Router> component.`)  : void 0;
-  warning(!React.useContext(NavigationContext).static, `<Navigate> must not be used on the initial render in a <StaticRouter>. ` + `This is a no-op, but you should modify your code so the <Navigate> is ` + `only ever rendered in response to some user interaction or state change.`) ;
+  UNSAFE_warning(!React.useContext(NavigationContext).static, `<Navigate> must not be used on the initial render in a <StaticRouter>. ` + `This is a no-op, but you should modify your code so the <Navigate> is ` + `only ever rendered in response to some user interaction or state change.`) ;
   let dataRouterState = React.useContext(DataRouterStateContext);
   let navigate = useNavigate();
   React.useEffect(() => {
@@ -1051,15 +1080,9 @@ function Router({
   navigator,
   static: staticProp = false
 }) {
-  // Temporarily commented out for testing of <CompatRouter> nested in a
-  // <RouterProvider>
-  // invariant(
-  //   !useInRouterContext(),
-  //   `You cannot render a <Router> inside another <Router>.` +
-  //     ` You should never have more than one in your app.`
-  // );
-  // Preserve trailing slashes on basename, so we can let the user control
+  !!useInRouterContext() ? UNSAFE_invariant(false, `You cannot render a <Router> inside another <Router>.` + ` You should never have more than one in your app.`)  : void 0; // Preserve trailing slashes on basename, so we can let the user control
   // the enforcement of trailing slashes throughout the app
+
   let basename = basenameProp.replace(/^\/*/, "/");
   let navigationContext = React.useMemo(() => ({
     basename,
@@ -1078,7 +1101,7 @@ function Router({
     state = null,
     key = "default"
   } = locationProp;
-  let location = React.useMemo(() => {
+  let locationContext = React.useMemo(() => {
     let trailingPathname = stripBasename(pathname, basename);
 
     if (trailingPathname == null) {
@@ -1086,16 +1109,19 @@ function Router({
     }
 
     return {
-      pathname: trailingPathname,
-      search,
-      hash,
-      state,
-      key
+      location: {
+        pathname: trailingPathname,
+        search,
+        hash,
+        state,
+        key
+      },
+      navigationType
     };
-  }, [basename, pathname, search, hash, state, key]);
-  warning(location != null, `<Router basename="${basename}"> is not able to match the URL ` + `"${pathname}${search}${hash}" because it does not start with the ` + `basename, so the <Router> won't render anything.`) ;
+  }, [basename, pathname, search, hash, state, key, navigationType]);
+  UNSAFE_warning(locationContext != null, `<Router basename="${basename}"> is not able to match the URL ` + `"${pathname}${search}${hash}" because it does not start with the ` + `basename, so the <Router> won't render anything.`) ;
 
-  if (location == null) {
+  if (locationContext == null) {
     return null;
   }
 
@@ -1103,10 +1129,7 @@ function Router({
     value: navigationContext
   }, /*#__PURE__*/React.createElement(LocationContext.Provider, {
     children: children,
-    value: {
-      location,
-      navigationType
-    }
+    value: locationContext
   }));
 }
 /**
@@ -1296,14 +1319,17 @@ function createRoutesFromChildren(children, parentPath = []) {
       id: element.props.id || treePath.join("-"),
       caseSensitive: element.props.caseSensitive,
       element: element.props.element,
+      Component: element.props.Component,
       index: element.props.index,
       path: element.props.path,
       loader: element.props.loader,
       action: element.props.action,
       errorElement: element.props.errorElement,
-      hasErrorBoundary: element.props.errorElement != null,
+      ErrorBoundary: element.props.ErrorBoundary,
+      hasErrorBoundary: element.props.ErrorBoundary != null || element.props.errorElement != null,
       shouldRevalidate: element.props.shouldRevalidate,
-      handle: element.props.handle
+      handle: element.props.handle,
+      lazy: element.props.lazy
     };
 
     if (element.props.children) {
@@ -1321,27 +1347,21 @@ function createRoutesFromChildren(children, parentPath = []) {
 function renderMatches(matches) {
   return _renderMatches(matches);
 }
-/**
- * @private
- * Walk the route tree and add hasErrorBoundary if it's not provided, so that
- * users providing manual route arrays can just specify errorElement
- */
-
-function enhanceManualRouteObjects(routes) {
-  return routes.map(route => {
-    let routeClone = { ...route
-    };
 
-    if (routeClone.hasErrorBoundary == null) {
-      routeClone.hasErrorBoundary = routeClone.errorElement != null;
+function detectErrorBoundary(route) {
+  {
+    if (route.Component && route.element) {
+      UNSAFE_warning(false, "You should not include both `Component` and `element` on your route - " + "`element` will be ignored.") ;
     }
 
-    if (routeClone.children) {
-      routeClone.children = enhanceManualRouteObjects(routeClone.children);
+    if (route.ErrorBoundary && route.errorElement) {
+      UNSAFE_warning(false, "You should not include both `ErrorBoundary` and `errorElement` on your route - " + "`errorElement` will be ignored.") ;
     }
+  } // Note: this check also occurs in createRoutesFromChildren so update
+  // there if you change this
 
-    return routeClone;
-  });
+
+  return Boolean(route.ErrorBoundary) || Boolean(route.errorElement);
 }
 
 function createMemoryRouter(routes, opts) {
@@ -1352,9 +1372,10 @@ function createMemoryRouter(routes, opts) {
       initialIndex: opts?.initialIndex
     }),
     hydrationData: opts?.hydrationData,
-    routes: enhanceManualRouteObjects(routes)
+    routes,
+    detectErrorBoundary
   }).initialize();
 } ///////////////////////////////////////////////////////////////////////////////
 
-export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useBlocker as unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
+export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, detectErrorBoundary as UNSAFE_detectErrorBoundary, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useBlocker as unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
 //# sourceMappingURL=react-router.development.js.map