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.

Sign up for GitHub

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

Jump to bottom

Update react monorepo with types to v7 (major) #397

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update react monorepo with types to v7 (major) #397

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Nov 22, 2024 •
edited
Loading

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
react-router (source) 6.26.1 -> 7.0.2 age adoption passing confidence
react-router-dom (source) 6.26.1 -> 7.0.2 age adoption passing confidence

Release Notes

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

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

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

v6.28.0

Compare Source

Minor Changes
    • Log deprecation warnings for v7 flags (#​11750)
    • Add deprecation warnings to json/defer in favor of returning raw objects
      • These methods will be removed in React Router v7
Patch Changes

v6.27.0: v6.27.0

Compare Source

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6270

v6.26.2

Compare Source

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

v7.0.2

Compare Source

Patch Changes

v7.0.1

Compare Source

Patch 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,

  • 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

v6.28.0

Compare Source

Minor Changes
    • Log deprecation warnings for v7 flags (#​11750)
    • Add deprecation warnings to json/defer in favor of returning raw objects
      • These methods will be removed in React Router v7
Patch Changes

v6.27.0

Compare Source

v6.26.2

Compare Source

Configuration

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

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, 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 was generated by Mend Renovate. View the repository job log.

@renovate Renovate
Copy link
Contributor Author

renovate bot commented Nov 22, 2024 •
edited
Loading

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   dev eslint@"9.9.1" from the root project
npm warn   7 more (@babel/eslint-parser, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^7.32.0 || ^8.2.0" from [email protected]
npm warn node_modules/eslint-config-airbnb
npm warn   dev eslint-config-airbnb@"19.0.4" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   dev eslint@"9.9.1" from the root project
npm warn   7 more (@babel/eslint-parser, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" from [email protected]
npm warn node_modules/eslint-plugin-import
npm warn   dev eslint-plugin-import@"2.29.1" from the root project
npm warn   3 more (eslint-config-airbnb, eslint-config-airbnb-base, eslint-config-react-app)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   dev eslint@"9.9.1" from the root project
npm warn   7 more (@babel/eslint-parser, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" from [email protected]
npm warn node_modules/eslint-plugin-import
npm warn   dev eslint-plugin-import@"2.29.1" from the root project
npm warn   3 more (eslint-config-airbnb, eslint-config-airbnb-base, eslint-config-react-app)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   dev eslint@"9.9.1" from the root project
npm warn   7 more (@babel/eslint-parser, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8" from [email protected]
npm warn node_modules/eslint-plugin-jsx-a11y
npm warn   dev eslint-plugin-jsx-a11y@"6.9.0" from the root project
npm warn   2 more (eslint-config-airbnb, eslint-config-react-app)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   dev eslint@"9.9.1" from the root project
npm warn   7 more (@babel/eslint-parser, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8" from [email protected]
npm warn node_modules/eslint-plugin-jsx-a11y
npm warn   dev eslint-plugin-jsx-a11y@"6.9.0" from the root project
npm warn   2 more (eslint-config-airbnb, eslint-config-react-app)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   dev eslint@"9.9.1" from the root project
npm warn   7 more (@babel/eslint-parser, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" from [email protected]
npm warn node_modules/eslint-plugin-react-hooks
npm warn   dev eslint-plugin-react-hooks@"4.6.2" from the root project
npm warn   2 more (eslint-config-airbnb, eslint-config-react-app)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   dev eslint@"9.9.1" from the root project
npm warn   7 more (@babel/eslint-parser, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" from [email protected]
npm warn node_modules/eslint-plugin-react-hooks
npm warn   dev eslint-plugin-react-hooks@"4.6.2" from the root project
npm warn   2 more (eslint-config-airbnb, eslint-config-react-app)
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/eslint
npm error   dev eslint@"9.9.1" from the root project
npm error
npm error Could not resolve dependency:
npm error peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" from [email protected]
npm error node_modules/eslint-plugin-import
npm error   dev eslint-plugin-import@"2.29.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /tmp/renovate/cache/others/npm/_logs/2024-12-03T04_06_40_551Z-eresolve-report.txt
npm error A complete log of this run can be found in: /tmp/renovate/cache/others/npm/_logs/2024-12-03T04_06_40_551Z-debug-0.log

@sourcery-ai Sourcery AI
Copy link

sourcery-ai bot commented Nov 22, 2024 •
edited
Loading

Reviewer's Guide by Sourcery

This PR updates react-router and react-router-dom from version 6.26.1 to version 7.0.0. This is a major version upgrade that includes several breaking changes, primarily focused on removing deprecated features and future flags, updating minimum requirements, and streamlining the API.

Class diagram for updated React Router v7

classDiagram
    class RouterProvider {
        +createRemixRouter()
        +hydrateFallbackElement
        +RouterProvider()
    }
    class Link {
        +prefetchingSupport
    }
    class NavLink {
        +prefetchingSupport
    }
    class ScrollRestoration {
        +enhancedSSRSupport
    }
    class RemixRouter {
        +createRemixRouter()
    }
    RouterProvider --> RemixRouter : uses
    Link --> RouterProvider : uses
    NavLink --> RouterProvider : uses
    ScrollRestoration --> RouterProvider : uses
    note for RouterProvider "Updated to support Remix-style hydration and fallback elements"
    note for Link "Added prefetching support"
    note for NavLink "Added prefetching support"
    note for ScrollRestoration "Enhanced SSR support"
Loading

File-Level Changes

Change Details Files
Major version upgrade of React Router packages with breaking changes
  • Removes original defer implementation in favor of raw promises
  • Updates minimum Node.js version requirement to 18
  • Updates minimum React version requirement to 18
  • Removes several future flags (v7_startTransition, v7_normalizeFormMethod, v7_partialHydration, v7_fetcherPersist)
  • Removes json/defer methods in favor of returning raw objects
  • Adds exports field to all packages
  • Enhances ScrollRestoration for better SSR document load handling
  • Adds built-in Remix-style hydration support to RouterProvider
 package.json
Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time. You can also use
    this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

sourcery-ai[bot]
sourcery-ai bot reviewed Nov 22, 2024
View reviewed changes
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have skipped reviewing this pull request. Here's why:

  • It seems to have been created by a bot (hey, renovate[bot]!). We assume it knows what it's doing!
  • We don't review packaging changes - Let us know if you'd like us to change this.

@renovate renovate bot force-pushed the renovate/major-react-monorepo-with-types branch from 3b37eee to ae130e3 Compare November 22, 2024 17:23
@renovate renovate bot force-pushed the renovate/major-react-monorepo-with-types branch from ae130e3 to 8438e64 Compare December 3, 2024 04:06
@sonarcloud SonarCloud
Copy link

sonarcloud bot commented Dec 3, 2024

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sourcery-ai sourcery-ai[bot] sourcery-ai[bot] left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants