Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(deps): update react-router monorepo to v7 (major) #158

Merged
merged 1 commit into from
Feb 19, 2025

Conversation

pactflow-renovate-bot[bot]
Copy link
Contributor

@pactflow-renovate-bot pactflow-renovate-bot bot commented Feb 19, 2025

This PR contains the following updates:

Package Type Update Change
react-router (source) dependencies major ^6.4.2 -> ^7.0.0
react-router-dom (source) dependencies major ^6.4.2 -> ^7.0.0

Release Notes

remix-run/react-router (react-router)

v7.2.0

Compare Source

Minor Changes
  • New type-safe href utility that guarantees links point to actual paths in your app (#​13012)

    import { href } from "react-router";
    
    export default function Component() {
      const link = href("/blog/:slug", { slug: "my-first-post" });
      return (
        <main>
          <Link to={href("/products/:id", { id: "asdf" })} />
          <NavLink to={href("/:lang?/about", { lang: "en" })} />
        </main>
      );
    }
Patch Changes
  • Fix typegen for repeated params (#​13012)

    In React Router, path parameters are keyed by their name.
    So for a path pattern like /a/:id/b/:id?/c/:id, the last :id will set the value for id in useParams and the params prop.
    For example, /a/1/b/2/c/3 will result in the value { id: 3 } at runtime.

    Previously, generated types for params incorrectly modeled repeated params with an array.
    So /a/1/b/2/c/3 generated a type like { id: [1,2,3] }.

    To be consistent with runtime behavior, the generated types now correctly model the "last one wins" semantics of path parameters.
    So /a/1/b/2/c/3 now generates a type like { id: 3 }.

  • Don't apply Single Fetch revalidation de-optimization when in SPA mode since there is no server HTTP request (#​12948)

  • Properly handle revalidations to across a prerender/SPA boundary (#​13021)

    • In "hybrid" applications where some routes are pre-rendered and some are served from a SPA fallback, we need to avoid making .data requests if the path wasn't pre-rendered because the request will 404
    • We don't know all the pre-rendered paths client-side, however:
      • All loader data in ssr:false mode is static because it's generated at build time
      • A route must use a clientLoader to do anything dynamic
      • Therefore, if a route only has a loader and not a clientLoader, we disable revalidation by default because there is no new data to retrieve
      • We short circuit and skip single fetch .data request logic if there are no server loaders with shouldLoad=true in our single fetch dataStrategy
      • This ensures that the route doesn't cause a .data request that would 404 after a submission
  • Error at build time in ssr:false + prerender apps for the edge case scenario of: (#​13021)

    • A parent route has only a loader (does not have a clientLoader)
    • The parent route is pre-rendered
    • The parent route has children routes which are not prerendered
    • This means that when the child paths are loaded via the SPA fallback, the parent won't have any loaderData because there is no server on which to run the loader
    • This can be resolved by either adding a parent clientLoader or pre-rendering the child paths
    • If you add a clientLoader, calling the serverLoader() on non-prerendered paths will throw a 404
  • Add unstable support for splitting route modules in framework mode via future.unstable_splitRouteModules (#​11871)

  • Add unstable_SerializesTo brand type for library authors to register types serializable by React Router's streaming format (turbo-stream) (ab5b05b02)

  • Align dev server behavior with static file server behavior when ssr:false is set (#​12948)

    • When no prerender config exists, only SSR down to the root HydrateFallback (SPA Mode)
    • When a prerender config exists but the current path is not prerendered, only SSR down to the root HydrateFallback (SPA Fallback)
    • Return a 404 on .data requests to non-pre-rendered paths
  • Improve prefetch performance of CSS side effects in framework mode (#​12889)

  • Disable Lazy Route Discovery for all ssr:false apps and not just "SPA Mode" because there is no runtime server to serve the search-param-configured __manifest requests (#​12894)

    • We previously only disabled this for "SPA Mode" which is ssr:false and no prerender config but we realized it should apply to all ssr:false apps, including those prerendering multiple pages
    • In those prerender scenarios we would prerender the /__manifest file assuming the static file server would serve it but that makes some unneccesary assumptions about the static file server behaviors
  • Properly handle interrupted manifest requests in lazy route discovery (#​12915)

v7.1.5

Compare Source

Patch Changes
  • Fix regression introduced in 7.1.4 via #​12800 that caused issues navigating to hash routes inside splat routes for applications using Lazy Route Discovery (patchRoutesOnNavigation) (#​12927)

v7.1.4

Compare Source

Patch Changes
  • Internal reorg to clean up some duplicated route module types (#​12799)
  • Properly handle status codes that cannot have a body in single fetch responses (204, etc.) (#​12760)
  • Stop erroring on resource routes that return raw strings/objects and instead serialize them as text/plain or application/json responses (#​12848)
    • This only applies when accessed as a resource route without the .data extension
    • When accessed from a Single Fetch .data request, they will still be encoded via turbo-stream
  • Optimize Lazy Route Discovery path discovery to favor a single querySelectorAll call at the body level instead of many calls at the sub-tree level (#​12731)
  • Properly bubble headers as errorHeaders when throwing a data() result (#​12846)
    • Avoid duplication of Set-Cookie headers could be duplicated if also returned from headers
  • Optimize route matching by skipping redundant matchRoutes calls when possible (#​12800)

v7.1.3

Compare Source

No changes

v7.1.2

Compare Source

Patch Changes
  • Fix issue with fetcher data cleanup in the data layer on fetcher unmount (#​12681)

  • Do not rely on symbol for filtering out redirect responses from loader data (#​12694)

    Previously, some projects were getting type checking errors like:

    error TS4058: Return type of exported function has or is using name 'redirectSymbol' from external module "node_modules/..." but cannot be named.

    Now that symbols are not used for the redirect response type, these errors should no longer be present.

v7.1.1

Compare Source

No changes

v7.1.0

Compare Source

Patch Changes
  • Throw unwrapped single fetch redirect to align with pre-single fetch behavior (#​12506)
  • Ignore redirects when inferring loader data types (#​12527)
  • Remove <Link prefetch> warning which suffers from false positives in a lazy route discovery world (#​12485)

v7.0.2

Compare Source

Patch Changes
  • temporarily only use one build in export map so packages can have a peer dependency on react router (#​12437)

  • Generate wide matches and params types for current route and child routes (#​12397)

    At runtime, matches includes child route matches and params include child route path parameters.
    But previously, we only generated types for parent routes in matches; for params, we only considered the parent routes and the current route.
    To align our generated types more closely to the runtime behavior, we now generate more permissive, wider types when accessing child route information.

v7.0.1

Compare Source

No changes

v7.0.0

Compare Source

Major Changes
  • Remove the original defer implementation in favor of using raw promises via single fetch and turbo-stream. This removes these exports from React Router: (#​11744)

    • defer
    • AbortedDeferredError
    • type TypedDeferredData
    • UNSAFE_DeferredData
    • UNSAFE_DEFERRED_SYMBOL,
    • Collapse @remix-run/router into react-router (#​11505)
    • Collapse react-router-dom into react-router
    • Collapse @remix-run/server-runtime into react-router
    • Collapse @remix-run/testing into react-router
  • Remove single_fetch future flag. (#​11522)

  • Drop support for Node 16, React Router SSR now requires Node 18 or higher (#​11391)

  • Remove future.v7_startTransition flag (#​11696)

    • Expose the underlying router promises from the following APIs for compsition in React 19 APIs: (#​11521)
      • useNavigate()
      • useSubmit
      • useFetcher().load
      • useFetcher().submit
      • useRevalidator.revalidate
  • Remove future.v7_normalizeFormMethod future flag (#​11697)

  • For Remix consumers migrating to React Router, the crypto global from the Web Crypto API is now required when using cookie and session APIs. This means that the following APIs are provided from react-router rather than platform-specific packages: (#​11837)

    • createCookie
    • createCookieSessionStorage
    • createMemorySessionStorage
    • createSessionStorage

    For consumers running older versions of Node, the installGlobals function from @remix-run/node has been updated to define globalThis.crypto, using Node's require('node:crypto').webcrypto implementation.

    Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:

    • createCookieFactory
    • createSessionStorageFactory
    • createCookieSessionStorageFactory
    • createMemorySessionStorageFactory
  • Imports/Exports cleanup (#​11840)

    • Removed the following exports that were previously public API from @remix-run/router
      • types
        • AgnosticDataIndexRouteObject
        • AgnosticDataNonIndexRouteObject
        • AgnosticDataRouteMatch
        • AgnosticDataRouteObject
        • AgnosticIndexRouteObject
        • AgnosticNonIndexRouteObject
        • AgnosticRouteMatch
        • AgnosticRouteObject
        • TrackedPromise
        • unstable_AgnosticPatchRoutesOnMissFunction
        • Action -> exported as NavigationType via react-router
        • Router exported as DataRouter to differentiate from RR's <Router>
      • API
        • getToPathname (@private)
        • joinPaths (@private)
        • normalizePathname (@private)
        • resolveTo (@private)
        • stripBasename (@private)
        • createBrowserHistory -> in favor of createBrowserRouter
        • createHashHistory -> in favor of createHashRouter
        • createMemoryHistory -> in favor of createMemoryRouter
        • createRouter
        • createStaticHandler -> in favor of wrapper createStaticHandler in RR Dom
        • getStaticContextFromError
    • Removed the following exports that were previously public API from react-router
      • Hash
      • Pathname
      • Search
  • update minimum node version to 18 (#​11690)

  • Remove future.v7_prependBasename from the ionternalized @remix-run/router package (#​11726)

  • Migrate Remix type generics to React Router (#​12180)

    • These generics are provided for Remix v2 migration purposes
    • These generics and the APIs they exist on should be considered informally deprecated in favor of the new Route.* types
    • Anyone migrating from React Router v6 should probably not leverage these new generics and should migrate straight to the Route.* types
    • For React Router v6 users, these generics are new and should not impact your app, with one exception
      • useFetcher previously had an optional generic (used primarily by Remix v2) that expected the data type
      • This has been updated in v7 to expect the type of the function that generates the data (i.e., typeof loader/typeof action)
      • Therefore, you should update your usages:
        • useFetcher<LoaderData>()
        • useFetcher<typeof loader>()
  • Remove future.v7_throwAbortReason from internalized @remix-run/router package (#​11728)

  • Add exports field to all packages (#​11675)

  • node package no longer re-exports from react-router (#​11702)

  • renamed RemixContext to FrameworkContext (#​11705)

  • updates the minimum React version to 18 (#​11689)

  • PrefetchPageDescriptor replaced by PageLinkDescriptor (#​11960)

    • Consolidate types previously duplicated across @remix-run/router, @remix-run/server-runtime, and @remix-run/react now that they all live in react-router (#​12177)
      • Examples: LoaderFunction, LoaderFunctionArgs, ActionFunction, ActionFunctionArgs, DataFunctionArgs, RouteManifest, LinksFunction, Route, EntryRoute
      • The RouteManifest type used by the "remix" code is now slightly stricter because it is using the former @remix-run/router RouteManifest
        • Record<string, Route> -> Record<string, Route | undefined>
      • Removed AppData type in favor of inlining unknown in the few locations it was used
      • Removed ServerRuntimeMeta* types in favor of the Meta* types they were duplicated from
    • Remove the future.v7_partialHydration flag (#​11725)
      • This also removes the <RouterProvider fallbackElement> prop
        • To migrate, move the fallbackElement to a hydrateFallbackElement/HydrateFallback on your root route
      • Also worth nothing there is a related breaking changer with this future flag:
        • Without future.v7_partialHydration (when using fallbackElement), state.navigation was populated during the initial load
        • With future.v7_partialHydration, state.navigation remains in an "idle" state during the initial load
  • Remove v7_relativeSplatPath future flag (#​11695)

  • Drop support for Node 18, update minimum Node vestion to 20 (#​12171)

    • Remove installGlobals() as this should no longer be necessary
  • Remove remaining future flags (#​11820)

    • React Router v7_skipActionErrorRevalidation
    • Remix v3_fetcherPersist, v3_relativeSplatPath, v3_throwAbortReason
  • rename createRemixStub to createRoutesStub (#​11692)

  • Remove @remix-run/router deprecated detectErrorBoundary option in favor of mapRouteProperties (#​11751)

  • Add react-router/dom subpath export to properly enable react-dom as an optional peerDependency (#​11851)

    • This ensures that we don't blindly import ReactDOM from "react-dom" in <RouterProvider> in order to access ReactDOM.flushSync(), since that would break createMemoryRouter use cases in non-DOM environments
    • DOM environments should import from react-router/dom to get the proper component that makes ReactDOM.flushSync() available:
      • If you are using the Vite plugin, use this in your entry.client.tsx:
        • import { HydratedRouter } from 'react-router/dom'
      • If you are not using the Vite plugin and are manually calling createBrowserRouter/createHashRouter:
        • import { RouterProvider } from "react-router/dom"
  • Remove future.v7_fetcherPersist flag (#​11731)

  • Update cookie dependency to ^1.0.1 - please see the release notes for any breaking changes (#​12172)

Minor Changes
    • Add support for prerender config in the React Router vite plugin, to support existing SSG use-cases (#​11539)
      • You can use the prerender config to pre-render your .html and .data files at build time and then serve them statically at runtime (either from a running server or a CDN)
      • prerender can either be an array of string paths, or a function (sync or async) that returns an array of strings so that you can dynamically generate the paths by talking to your CMS, etc.
    // react-router.config.ts
    import type { Config } from "@&#8203;react-router/dev/config";
    
    export default {
      async prerender() {
        let slugs = await fakeGetSlugsFromCms();
        // Prerender these paths into `.html` files at build time, and `.data`
        // files if they have loaders
        return ["/", "/about", ...slugs.map((slug) => `/product/${slug}`)];
      },
    } satisfies Config;
    
    async function fakeGetSlugsFromCms() {
      await new Promise((r) => setTimeout(r, 1000));
      return ["shirt", "hat"];
    }
  • Params, loader data, and action data as props for route component exports (#​11961)

    export default function Component({ params, loaderData, actionData }) {}
    
    export function HydrateFallback({ params }) {}
    export function ErrorBoundary({ params, loaderData, actionData }) {}
  • Remove duplicate RouterProvider impliementations (#​11679)

  • Typesafety improvements (#​12019)

    React Router now generates types for each of your route modules.
    You can access those types by importing them from ./+types.<route filename without extension>.
    For example:

    // app/routes/product.tsx
    import type * as Route from "./+types.product";
    
    export function loader({ params }: Route.LoaderArgs) {}
    
    export default function Component({ loaderData }: Route.ComponentProps) {}

    This initial implementation targets type inference for:

    • Params : Path parameters from your routing config in routes.ts including file-based routing
    • LoaderData : Loader data from loader and/or clientLoader within your route module
    • ActionData : Action data from action and/or clientAction within your route module

    In the future, we plan to add types for the rest of the route module exports: meta, links, headers, shouldRevalidate, etc.
    We also plan to generate types for typesafe Links:

    <Link to="/products/:id" params={{ id: 1 }} />
    //        ^^^^^^^^^^^^^          ^^^^^^^^^
    // typesafe `to` and `params` based on the available routes in your app

    Check out our docs for more:

  • Stabilize unstable_dataStrategy (#​11969)

  • Stabilize unstable_patchRoutesOnNavigation (#​11970)

Patch Changes
remix-run/react-router (react-router-dom)

v7.2.0

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.2.0

v7.1.5

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.1.5

v7.1.4

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.1.4

v7.1.3

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.1.3

v7.1.2

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.1.2

v7.1.1

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.1.1

v7.1.0

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.1.0

v7.0.2

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.0.2

v7.0.1

Compare Source

Patch Changes
  • Updated dependencies:
    • react-router@7.0.1

v7.0.0

Compare Source

Major Changes
  • Remove the original defer implementation in favor of using raw promises via single fetch and turbo-stream. This removes these exports from React Router: (#​11744)

    • defer
    • AbortedDeferredError
    • type TypedDeferredData
    • UNSAFE_DeferredData
    • UNSAFE_DEFERRED_SYMBOL,
  • Use createRemixRouter/RouterProvider in entry.client instead of RemixBrowser (#​11469)

  • Remove single_fetch future flag. (#​11522)

  • Remove future.v7_startTransition flag (#​11696)

  • Remove future.v7_normalizeFormMethod future flag (#​11697)

  • Allow returning undefined from actions and loaders (#​11680)

  • update minimum node version to 18 (#​11690)

  • Remove future.v7_prependBasename from the ionternalized @remix-run/router package (#​11726)

  • Remove future.v7_throwAbortReason from internalized @remix-run/router package (#​11728)

  • Add exports field to all packages (#​11675)

  • node package no longer re-exports from react-router (#​11702)

  • updates the minimum React version to 18 (#​11689)

    • Remove the future.v7_partialHydration flag (#​11725)
      • This also removes the <RouterProvider fallbackElement> prop
        • To migrate, move the fallbackElement to a hydrateFallbackElement/HydrateFallback on your root route
      • Also worth nothing there is a related breaking changer with this future flag:
        • Without future.v7_partialHydration (when using fallbackElement), state.navigation was populated during the initial load
        • With future.v7_partialHydration, state.navigation remains in an "idle" state during the initial load
  • Remove future.v7_fetcherPersist flag (#​11731)

Minor Changes
  • Add prefetching support to Link/NavLink when using Remix SSR (#​11402)
  • Enhance ScrollRestoration so it can restore properly on an SSR'd document load (#​11401)
  • Add built-in Remix-style hydration support to RouterProvider. When running from a Remix-SSR'd HTML payload with the proper window variables (__remixContext, __remixManifest, __remixRouteModules), you don't need to pass a router prop and RouterProvider will create the router for you internally. (#​11396) (#​11400)
Patch Changes
  • Memoize some RouterProvider internals to reduce uneccesary re-renders (#​11817)
  • Updated dependencies:
    • react-router@7.0.0

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.


  • If you want to rebase/retry this PR, check this box

This PR has been generated by Renovate Bot.

@pactflow-renovate-bot pactflow-renovate-bot bot force-pushed the gh-renovate/major-react-router-monorepo branch 2 times, most recently from c7ed987 to 746497a Compare February 19, 2025 15:25
@YOU54F YOU54F force-pushed the gh-renovate/major-react-router-monorepo branch from 746497a to d10d5f2 Compare February 19, 2025 15:50
@pactflow-renovate-bot pactflow-renovate-bot bot force-pushed the gh-renovate/major-react-router-monorepo branch from d10d5f2 to 337f2fa Compare February 19, 2025 15:50
@YOU54F YOU54F merged commit fccf82d into master Feb 19, 2025
4 checks passed
@pactflow-renovate-bot pactflow-renovate-bot bot deleted the gh-renovate/major-react-router-monorepo branch February 19, 2025 16:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant