Skip to content

v1.18.0
Compare
Choose a tag to compare
@pcattori pcattori released this 26 Jun 17:30
· 1486 commits to main since this release
remix@1.18.0
d8f4034
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

New Features

Stable V2 Dev Server

Great news! 1.18.0 officially stabilizes the "New Dev Server" complete with HMR/HDR 🎉. If you've previously opted into the unstable_dev version, you'll need to update your remix.config.js flag name from future.unstable_dev -> future.v2_dev in 1.18.0. If you've not yet opted in, we now consider the new dev server stable (no more API changes) so feel free to upgrade anytime to make your eventual migration to v2 smoother! You can read up on the new dev server in the docs.

JSON/Text Submissions

If you're not a huge fan of FormData, Remix 1.18.0 updates to react-router-dom@6.14.0 which brings along support for opt-in application/json or text/plain encoding in useSubmit/fetcher.submit, and adds corresponding navigation.json/navigation.text and fetcher.json/fetcher.text fields containing the respective submissions. For details please check out the React Router release notes or the useSubmit docs. (#6570)

// Submit to your action using JSON
submit({ key: "value" }, { method: "post", encType: "application/json" });
// available in components via useNavigation().json and actions via request.json()
// Submit to your action using text
submit("plain text", { method: "post", encType: "text/plain" });
// available in components via useNavigation().text and actions via request.text()

Warning
Please be aware that useSubmit() and fetcher.submit() are not suitable for Progressive Enhancement, so switching to these to leverage JSON or Text submissions will break your app when JS is unable to load/execute. It's recommended to stick with normal FormData submissions for critical aspects of your application.

Default Behavior

Please also note that to avoid a breaking change, the default behavior will still encode a simple key/value JSON object into a FormData instance:

submit({ key: "value" }, { method: "post" });
// available in components via useNavigation().formData and actions via request.formData()
}

This behavior will likely change in the future when React Router releases v7, so it's best to make any JSON object submissions explicit with either encType: "application/x-www-form-urlencoded" or encType: "application/json" to ease your eventual v7 migration path.

Viewport-driven Prefetching

The Link component can now automatically prefetch your route data and JS modules when they enter the viewport via the new <Link prefetch="viewport"> prop value. Similar to intent this will add the relevant <link rel="prefetch"> tags to DOM when the link enters the viewport, and remove them when it exits (via an Intersection Observer). (#6433)

Updated ESLint Configurations

We've updated the @remix-run/eslint-config to inherit the recommended set of rules from @typescript-eslint/recommended instead of manually maintaining our own TS-related rules, so you may see some new lint warnings/errors (#6614)

Perf improvements 🏎️

We've invested heavily into performance the last couple weeks and are excited to share those speed gains with all of you 💪.

You could see modest improvement (~10% faster), but we've also personally witnessed build and rebuild times melt in some extreme cases. Here's a sample:

All of these numbers depend on your hardware, OS, and your app so take them with a grain of salt 🧂. That said, none of our optimizations were hardware or OS-specific so here's hoping 🤞 that your DX gets a speed boost!

Pro-tip: if your project uses a large component library like MUI or AntD you could get BIG perf gains if you avoid named imports.

Other notable Changes

  • Fix typing issues when using React 17 (#5713)
    • ⚠️ Note that because @remix/server-runtime doesn't actually do anything with React, the included CatchBoundaryComponent/ErrorBoundaryComponent/V2_ErrorBoundaryComponent types have been loosened to any and marked @deprecated. If you were using these types you should instead import them from the corresponding types in @remix-run/react.
  • Fix bug with pathless layout routes beneath nested path segments (#6649)
  • Properly pass <Scripts /> props (i.e., nonce) to inline script tags for deferred data (#6389)
  • Detect mismatches between the initially loaded URL and the URL at the time of hydration and trigger a hard reload if they don't match (#6409)
  • Show deprecation warning when using @remix-run/vercel, since Vercel now provides built-in support for Remix apps (#5964)
  • improved logging for remix build and remix dev (#6596)
  • fix remix dev -c: kill all descendant processes of specified command when restarting (#6663)
  • Updated React Router dependencies to the latest versions:

Changes by Package 🔗

Full Changelog: 1.17.1...1.18.0

Assets 2