remix-run/remix remix@1.15.0

v1.15.0

on GitHub

For the last few months we've been working hard on bringing new and improved APIs to Remix. We've introduced serveral major changes to prepare you for v2 via future flags, and we think v1.15.0 is our last big push to get you ready for the future of Remix.

It's important to note that nothing in your app will break if you do not opt-in to our future flags. 🥳 We are on a mission to provide the smoothest possible upgrade path so you can take it on before a new major release.

Let's get into it 🤓

Future Flags

As of v1.15.0, we have deprecated all v1 APIs impacted by v2 future flags. When you run your app in development, we will show a one-time warning for deprecated APIs along with a link that explains how to incrementally migrate to the new APIs before v2 is released.

The v2 future flags include:

• v2_errorBoundary: Removes the CatchBoundary component in favor of handling thrown Response objects in ErrorBoundary directly
• v2_meta: Uses the new function signature for route meta functions and simplifies rendering in <Meta />
• v2_routeConvention: Uses new "flat route" naming conventions
• v2_normalizeFormMethod: useNavigation and useFetcher hooks returning an object with formMethod will uses uppercase method verbs ("GET", "POST", etc.) to align with fetch() behavior

For detailed information on how to use these flags and incrementally upgrade your app, please refer to Preparing for v2 in the Remix docs.

Changes to v2 meta

We have made a few changes to the API for route module meta functions when using the future.v2_meta flag.

• V2_HtmlMetaDescriptor has been renamed to V2_MetaDescriptor
• The meta function's arguments have been simplified
  • parentsData has been removed, as each route's loader data is available on the data property of its respective match object

    // before
    export function meta({ parentsData }) {
      return [{ title: parentsData["routes/parent"].title }];
    }
    // after
    export function meta({ matches }) {
      let parent = matches.find((match) => match.id === "routes/parent");
      return [{ title: parent.data.title }];
    }

  • The route property on route matches has been removed, as relevant match data is attached directly to the match object

    // before
    export function meta({ matches }) {
      let rootModule = matches.find((match) => match.route.id === "root");
    }
    // after
    export function meta({ matches }) {
      let rootModule = matches.find((match) => match.id === "root");
    }

• We have added support for generating <script type='application/ld+json' /> and meta-related <link /> tags to document head via the route meta function

See the v2 meta docs for more information.

useTransition becomes useNavigation

We have deprecated the useTransition hook in favor of the new useNavigation. When we were designing early versions of Remix, the React team shipped their own [at the time] experimental hook called useTransition. To avoid confusion we plan to remove our useTransition hook in v2.

The signature for useNavigation is similar but makes a few key changes to note when upgrading:

import { useTransition } from "@remix-run/react";

function SomeComponent() {
  // before
  let {
    location,
    state,
    submission: { formAction, formData, formMethod },
    type,
  } = useTransition();

  // after
  let {
    // `submission` properties have been flattened
    formAction,
    formData,
    formMethod,
    location,
    state,
  } = useNavigation();
}

Notably, the type property has been removed. It can be derived from the state of a navigation alongside its other properties. See the v2 upgrade guide in our docs for more details.

Deprecated remix.config options

• browserBuildDirectory has been deprecated in favor of assetsBuildDirectory
• serverBuildDirectory has been deprecated in favor of serverBuildPath
• serverBuildTarget has been deprecated in favor of more granular configuration to build for a wider variety of environments

Other notable changes

• The V2_HtmlMetaDescriptor type has been renamed to V2_MetaDescriptor
• We now ensure that stack traces are removed from all server side errors in production
• entry.client and entry.server files are now optional, making it simpler to start a new Remix app without a template or boilerplate
• Bumped React Router dependencies to the latest version. See the release notes for more details.
• Fixed issue to ensure changes to CSS inserted via @remix-run/css-bundle are picked up during HMR
• Added experimental support for Vanilla Extract caching, which can be enabled by setting future.unstable_vanillaExtract: { cache: true } in remix.config. This is considered experimental due to the use of a brand new Vanilla Extract compiler under the hood. In order to use this feature, you must be using at least v1.10.0 of @vanilla-extract/css.

Changes by Package 🔗

• @remix-run/cloudflare
• @remix-run/css-bundle
• @remix-run/deno
• @remix-run/dev
• @remix-run/eslint-config
• @remix-run/node
• @remix-run/react
• @remix-run/server-runtime
• @remix-run/testing

Full Changelog: 1.14.3...1.15.0