remix-run/remix v0.20.0

on GitHub

Gather 'round folks, this release brings along lots of tasty features and stomps out a few gnarly bugs. Here's a high-level overview of important changes:

• CLI changes
  • remix dev is now remix watch
  • remix run is now remix dev
  • Added remix routes
  • Added remix build --sourcemap
• <Form forceRefresh /> is now <Form reloadDocument />
• Added a new handleDataRequest API for manipulating request data
• Now using react-route-dom@6.0.0-beta.8

Now, let's get into to the weeds a bit 🤓

🕞 tl;dr Upgrading

• Update your package.json or pm2 configs
  • remix dev -> remix watch
  • remix run -> remix dev
• <Form forceRefresh /> -> <Form reloadDocument />
• Ensure you've got react-route-dom@6.0.0-beta.8 in your package.json dependencies.

💔 Breaking Changes

• Several users felt that the remix dev command did not behave as expected. The CLI command remix dev has been changed to remix watch, and remix run has been changed to remix dev to hopefully make the CLI a bit more intuitive. Please note that remix dev requires that @remix-run/serve is installed as a dependency, just as remix run did before (#315).
• The forceRefresh prop on <Form> has been renamed to reloadDocument. We feel like this more clearly communicates the behavior of the form's submission.

✨ Improvements

• Now shipping with the latest beta of react-router-dom! 🚀

• We updated all docs and templates to suggest npx create-remix instead of npm init remix, which is generally more consistent and less error prone for creating new sites with reasonable defaults.

• TypeScript should now correctly infer types from imported .json modules (#314)

• Added support for multiple meta tags that use the same key to a route's meta function (#322). We now allow you to pass an array of values to a key in the object returned by meta:

  export let meta: MetaFunction = () => {
    return {
      "article:author": ["Chance the Dev", "Ryan Florence"],
    };
  };

• We added a new CLI command remix routes that allows you to visualize your app's route structure from the command line in either JSX or JSON format (#326).

• We introduced handleDataRequest for modifying the response of data requests in routes (#329):

  // example route file
  import type { HandleDataRequestFunction } from "remix";
  
  // this is an optional export!
  export let handleDataRequest: HandleDataRequestFunction = (
    response,
    { request, params, context }
  ) => {
    // do whatever you'd like before returning the response!
    response.headers.set("x-custom", "yay!");
    return response;
  };

• remix build no longer puts source maps in your browser build by default. This was a security issue because people could see your server side code from the browser! If you want to have source maps in your production builds, you can use the --sourcemap flag 🗺️ (#350).

• We made a handful of improvements to the new Remix application templates.

🐛 Bugfixes

• The ~/ path alias for the app directory now works when importing markdown files (#317).
• We squashed a bug in which form submissions were trimming values with duplicate keys (checkboxes, radio inputs, etc.) (#344).
• We annihalated a bug in which redirects are not followed when thrown from an action for client-side form submissions (#349).
• We exterminated a particularly nasty bug in the @remix/architect server that was sending requests to invalid URLs (#333).
• We wiped out several bugs for sites shipping to Cloudflare Workers (#318).
• We crushed a bug causing back/forward navigation mayhem (#351)
• We demolished a bug where <Link prefetch> was prefetching way too much stuff.
• We fumigated a bug where imports from React Router weren't working in Remix (like <Outlet>).
• I'm running out of creative synonyms for "fix", so thankfully I'm also out of bug fixes to describe 😅

🗒️ Docs

• Lots of docs updates and improvements, perhaps too many to capture succinctly in release notes! Be sure to check out https://docs.remix.run for the latest and greatest.