v0.17.0
This release brings us a giant step closer to v1 stable by introducing a new remix
package that you'll use in all your app code. It also removes the old compiler from @remix-run/dev
and completely replaces it with the new one we introduced in v0.15. Finally, we introduced a new <LiveReload>
element that replaces our useLiveReload()
hook.
There are a few breaking changes in this release, so we have bumped the minor version accordingly. This will likely be the last release of the 0.x
series before we move to 1.x
beta releases.
New remix Package
The major new feature in this release is the new remix
package, which is a significant improvement in the way you use Remix in your app code. We recommend using the remix
package for all your import
s instead of importing directly from @remix-run/node
and/or @remix-run/react
. The remix
package contains all the exports you need from both of those packages.
// You can replace these:
// import type { LoaderFunction } from "@remix-run/node";
// import { useRouteData } from "@remix-run/react";
// With this:
import type { LoaderFunction } from "remix";
import { useRouteData } from "remix";
export let loader: LoaderFunction = () => {
return { now: Date.now() }
};
export default function HomePage() {
let { now } = useRouteData();
return (
<p>This page was rendered at {new Date(now).toLocaleString()}.</p>
);
}
Now you don't have to remember which package to get stuff from, which was kind of a pain in the past 🤪
If you start a new app today using npm init remix
, you will automatically get { "dependencies": { "remix": "*" } }
in your package.json. If you're upgrading an existing app, you'll want to add the remix
package to your package.json dependencies
:
$ npm add remix@*
Streamlined CLI Commands
We had a proliferation of CLI commands when we introduced the new compiler in v0.15, and then again when we added our own built-in app server in v0.16. But in v0.17, it all comes into focus! 🧐
We now have 3 remix
CLI commands:
remix build
- Runs the compiler and generates the build. This uses our new esbuild-based compiler, and was previouslyremix build2
.remix dev
- Runs the compiler in watch mode and boots the dev server for live reloading. This was previouslyremix run2
.remix run
- Runs the built-in application server (requires@remix-run/serve
) +remix dev
. This was previouslyremix run3
.
These commands are designed to provide the right level of functionality in several different usage scenarios. The story goes something like this:
- If you're using
remix-serve
to deploy your app in production, useremix run
in development. It's the same server plus everything thatremix dev
does. - If you're using Architect/Vercel/Firebase or
@remix-run/express
in your ownnode server.js
, useremix dev
in development. You'll have to run 2 processes either in 2 separate terminal tabs or using a process manager likepm2-dev
.
We are very happy to finally have some resolution here. It got crazy there for a second 😅
New <LiveReload>
Element
This release introduces a new <LiveReload>
element that replaces the useLiveReload()
hook we shipped in v0.16. Having an element instead of a hook is a little more ergonomic since the rules of hooks require you to always use them, but you aren't always in dev. The <LiveReload>
element also does not require you to render a <Scripts>
element or hydrate the page, so it works when you are developing a page without any other scripts.
If you were using useLiveReload()
previously, replace it with a <LiveReload>
element in the same component.
import { LiveReload } from "remix";
export default function MyApp() {
// Instead of this:
// useLiveReload();
return (
<Document>
<p>Welcome to the app!</p>
{/* Use this: */}
{process.env.NODE_ENV === "development" && <LiveReload />}
</Document>
)
}
We hope you enjoy this release as much as we've enjoyed making it for you. Onward to 1.0!