react-router 0.0.0-experimental-073f56f6c → 0.0.0-experimental-ce4015162

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # `react-router`
 
+## v7.15.1
+
+### Patch Changes
+
+- Update router to operate on fetcher Maps in an immutable manner to avoid delayed React renders from potentially reading an updated but not yet committed Map. This could result in brief flickers in some fetcher-driven optimistic UI scenarios. ([#15028](https://github.com/remix-run/react-router/pull/15028))
+- Fix `serverLoader()` returning stale SSR data when a client navigation aborts pending hydration before the hydration `clientLoader` resolves ([#15022](https://github.com/remix-run/react-router/pull/15022))
+- Fix `RouterProvider` `onError` callback not being called for synchronous initial loader errors in SPA mode ([#15039](https://github.com/remix-run/react-router/pull/15039)) ([#14942](https://github.com/remix-run/react-router/pull/14942))
+- Memoize `useFetchers` to return a stable identity and only change if fetchers changed ([#15028](https://github.com/remix-run/react-router/pull/15028))
+- Internal refactor to consolidate mutation request detection through shared utility ([#15033](https://github.com/remix-run/react-router/pull/15033))
+
+### Unstable Changes
+
+⚠️ _[Unstable features](https://reactrouter.com/community/api-development-strategy#unstable-flags) are not recommended for production use_
+
+- Add a new `unstable_useRouterState()` hook that consolidates access to active and pending router states (RFC: #12358) ([#15017](https://github.com/remix-run/react-router/pull/15017))
+  - Data/Framework/RSC only — throws when used without a data router
+  - This should allow you to consolidate usages of the following hooks which will likely be deprecated and removed in a future major version
+    - `useLocation`
+    - `useSearchParams`
+    - `useParams`
+    - `useMatches`
+    - `useNavigationType`
+    - `useNavigation`
+
+    ```ts
+    let { active, pending } = unstable_useRouterState();
+
+    // Active is always populated with the current location
+    active.location; // replaces `useLocation()`
+    active.searchParams; // replaces `useSearchParams()[0]`
+    active.params; // replaces `useParams()`
+    active.matches; // replaces `useMatches()`
+    active.type; // replaces `useNavigationType()`
+
+    // Pending is only populated during a navigation
+    pending.location; // replaces `useNavigation().location`
+    pending.searchParams; // equivalent to `new URLSearchParams(useNavigation().search)`
+    pending.params; // Not directly accessible today
+    pending.matches; // Not directly accessible today
+    pending.type; // Not directly accessible today
+    pending.state; // replaces `useNavigation().state`
+    pending.formMethod; // replaces useNavigation().formMethod
+    pending.formAction; // replaces useNavigation().formAction
+    pending.formEncType; // replaces useNavigation().formEncType
+    pending.formData; // replaces useNavigation().formData
+    pending.json; // replaces useNavigation().json
+    pending.text; // replaces useNavigation().text
+    ```
+
 ## v7.15.0
 
 ### Minor Changes

package/dist/development/dom-export.d.ts

@@ -1,173 +1,7 @@
-import * as React from 'react';
-import { RouterProviderProps as RouterProviderProps$1, RouterInit, ClientOnErrorFunction } from 'react-router';
-import { C as ClientInstrumentation } from './instrumentation-cRWWLfsU.js';
-export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, R as unstable_RSCHydratedRouter, d as unstable_RSCManifestPayload, e as unstable_RSCPayload, f as unstable_RSCRenderPayload, c as unstable_createCallServer } from './browser-BOdXz9dK.js';
-import './data-BqZ2x964.js';
 
-type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
-declare function RouterProvider(props: RouterProviderProps): React.JSX.Element;
-
-/**
- * Props for the {@link dom.HydratedRouter} component.
- *
- * @category Types
- */
-interface HydratedRouterProps {
-    /**
-     * Context factory function to be passed through to {@link createBrowserRouter}.
-     * This function will be called to create a fresh `context` instance on each
-     * navigation/fetch and made available to
-     * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
-     * functions.
-     */
-    getContext?: RouterInit["getContext"];
-    /**
-     * Array of instrumentation objects allowing you to instrument the router and
-     * individual routes prior to router initialization (and on any subsequently
-     * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
-     * mostly useful for observability such as wrapping navigations, fetches,
-     * as well as route loaders/actions/middlewares with logging and/or performance
-     * tracing. See the [docs](../../how-to/instrumentation) for more information.
-     *
-     * ```tsx
-     * const logging = {
-     *   router({ instrument }) {
-     *     instrument({
-     *       navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
-     *       fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
-     *     });
-     *   },
-     *   route({ instrument, id }) {
-     *     instrument({
-     *       middleware: (impl, { request }) => logExecution(
-     *         `middleware ${request.url} (route ${id})`,
-     *         impl
-     *       ),
-     *       loader: (impl, { request }) => logExecution(
-     *         `loader ${request.url} (route ${id})`,
-     *         impl
-     *       ),
-     *       action: (impl, { request }) => logExecution(
-     *         `action ${request.url} (route ${id})`,
-     *         impl
-     *       ),
-     *     })
-     *   }
-     * };
-     *
-     * async function logExecution(label: string, impl: () => Promise<void>) {
-     *   let start = performance.now();
-     *   console.log(`start ${label}`);
-     *   await impl();
-     *   let duration = Math.round(performance.now() - start);
-     *   console.log(`end ${label} (${duration}ms)`);
-     * }
-     *
-     * startTransition(() => {
-     *   hydrateRoot(
-     *     document,
-     *     <HydratedRouter instrumentations={[logging]} />
-     *   );
-     * });
-     * ```
-     */
-    instrumentations?: ClientInstrumentation[];
-    /**
-     * An error handler function that will be called for any middleware, loader, action,
-     * or render errors that are encountered in your application.  This is useful for
-     * logging or reporting errors instead of in the {@link ErrorBoundary} because it's not
-     * subject to re-rendering and will only run one time per error.
-     *
-     * The `errorInfo` parameter is passed along from
-     * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
-     * and is only present for render errors.
-     *
-     * ```tsx
-     * <HydratedRouter onError=(error, info) => {
-     *   let { location, params, pattern, errorInfo } = info;
-     *   console.error(error, location, errorInfo);
-     *   reportToErrorService(error, location, errorInfo);
-     * }} />
-     * ```
-     */
-    onError?: ClientOnErrorFunction;
-    /**
-     * Control whether router state updates are internally wrapped in
-     * [`React.startTransition`](https://react.dev/reference/react/startTransition).
-     *
-     * - When left `undefined`, all state updates are wrapped in
-     *   `React.startTransition`
-     *   - This can lead to buggy behaviors if you are wrapping your own
-     *     navigations/fetchers in `startTransition`.
-     * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
-     *   in `React.startTransition` and router state changes will be wrapped in
-     *   `React.startTransition` and also sent through
-     *   [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
-     *   surface mid-navigation router state changes to the UI.
-     * - When set to `false`, the router will not leverage `React.startTransition` or
-     *   `React.useOptimistic` on any navigations or state changes.
-     *
-     * For more information, please see the [docs](../../explanation/react-transitions).
-     */
-    useTransitions?: boolean;
-}
-/**
- * Framework-mode router component to be used to hydrate a router from a
- * {@link ServerRouter}. See [`entry.client.tsx`](../framework-conventions/entry.client.tsx).
- *
- * @public
- * @category Framework Routers
- * @mode framework
- * @param props Props
- * @param {dom.HydratedRouterProps.getContext} props.getContext n/a
- * @param {dom.HydratedRouterProps.onError} props.onError n/a
- * @returns A React element that represents the hydrated application.
- */
-declare function HydratedRouter(props: HydratedRouterProps): React.JSX.Element;
-
-declare global {
-    interface Window {
-        __FLIGHT_DATA: any[];
-    }
-}
-/**
- * Get the prerendered [RSC](https://react.dev/reference/rsc/server-components)
- * stream for hydration. Usually passed directly to your
- * `react-server-dom-xyz/client`'s `createFromReadableStream`.
- *
- * @example
- * import { startTransition, StrictMode } from "react";
- * import { hydrateRoot } from "react-dom/client";
- * import {
- *   unstable_getRSCStream as getRSCStream,
- *   unstable_RSCHydratedRouter as RSCHydratedRouter,
- * } from "react-router";
- * import type { unstable_RSCPayload as RSCPayload } from "react-router";
- *
- * createFromReadableStream(getRSCStream()).then(
- *   (payload: RSCServerPayload) => {
- *     startTransition(async () => {
- *       hydrateRoot(
- *         document,
- *         <StrictMode>
- *           <RSCHydratedRouter {...props} />
- *         </StrictMode>,
- *         {
- *           // Options
- *         }
- *       );
- *     });
- *   }
- * );
- *
- * @name unstable_getRSCStream
- * @public
- * @category RSC
- * @mode data
- * @returns A [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
- * that contains the [RSC](https://react.dev/reference/rsc/server-components)
- * data for hydration.
- */
-declare function getRSCStream(): ReadableStream;
-
-export { HydratedRouter, type HydratedRouterProps, RouterProvider, type RouterProviderProps, getRSCStream as unstable_getRSCStream };
+import { RouterProvider, RouterProviderProps } from "./lib/dom-export/dom-router-provider.js";
+import { DecodeActionFunction, DecodeFormStateFunction, DecodeReplyFunction, RSCManifestPayload, RSCPayload, RSCRenderPayload } from "./lib/rsc/server.rsc.js";
+import { RSCHydratedRouter, createCallServer } from "./lib/rsc/browser.js";
+import { HydratedRouter, HydratedRouterProps } from "./lib/dom-export/hydrated-router.js";
+import { getRSCStream } from "./lib/rsc/html-stream/browser.js";
+export { HydratedRouter, type HydratedRouterProps, RouterProvider, type RouterProviderProps, type DecodeActionFunction as unstable_DecodeActionFunction, type DecodeFormStateFunction as unstable_DecodeFormStateFunction, type DecodeReplyFunction as unstable_DecodeReplyFunction, RSCHydratedRouter as unstable_RSCHydratedRouter, type RSCManifestPayload as unstable_RSCManifestPayload, type RSCPayload as unstable_RSCPayload, type RSCRenderPayload as unstable_RSCRenderPayload, createCallServer as unstable_createCallServer, getRSCStream as unstable_getRSCStream };