Change export default with named Component export

[sergiodxa]

Proposal

Use Component named export instead of export default in route files.

Background

export default was a mistake
By Kent

Using export default makes auto-import suggestions harder, and while you probably don't want, or should, import the route component if you're testing the component in Vitest/Jest you're going to need to import it.

It also encourage exporting anonymous components.

export default () => { ... }

Also all other route exports are named ones.

Use Case

• Change the convention to be all named exports

API/Examples

export async function loader(args: LoaderArgs) { ... }

export async function action(args: ActionArgs) { ... }

export function Component() { ... }

And if you want to test this route component

import { Component, loader, action } from "~/routes/something"
import { render } from "@testing-library/remix" // fake lib, for now 😉 

test("Component renders", async () => {
  render(<Component />)
  // more test code here
})

test("loader returns response", async () => { ... })

test("action returns response", async () => { ... })

---

Component
I figured folks would want to name their route component though.
By Ryan

Users could create a named component first and re-export it later

function Settings() { ... }
export { Component: Settings }

---

This could be either in v2 or in v1 by adding a fallback to export default.

If the route doesn't have a Component export Remix could look up for a default export.

If the route doesn't have Component or default, consider it a resource route.

Then on v2 export default can be removed.

A warning could also be added when remix build find out an export default to tell devs to switch to Component.

[chaance]

I'm typically on team no-default-exports, but I actually think in this case they make the developer experience a bit nicer. I can name my routes whatever I'd like without having to re-export it as Component or use a displayName, which feels like an annoying extra step if I want the tree to look sensible in React dev tools.

Using export default makes auto-import suggestions harder, and while you probably don't want, or should, import the route component if you're testing the component in Vitest/Jest you're going to need to import it.

Yes you might want to import it in a test file, but I'd almost always opt to just test the interactions on the page than write unit tests for the component itself. In any case, this seems like an outlier and not a good enough reason to change conventions.

It also encourage exporting anonymous components.

Sure, but IMO that's no worse for the call-stack/dev tools than seeing Component, which this new pattern would encourage. If you don't want anonymous functions in your codebase, there are eslint rules for that!

So...I dunno. Default exports seem fine to me in this case, and just because some of us don't like that they exist in the first place doesn't seem like a compelling reason to ditch them. Because they do 😂 😭

I'd also just like to be really careful about introducing breaking changes without a solid reason to do so. Even with deprecation warnings and plenty of lead time, breaking changes suck. The more we introduce them, the more time developers have to spend dealing with this stuff than shipping products. Just not sure this change delivers the value to justify it.

[MichaelDeBoey]

I'd also just like to be really careful about introducing breaking changes without a solid reason to do so. Even with deprecation warnings and plenty of lead time, breaking changes suck. The more we introduce them, the more time developers have to spend dealing with this stuff than shipping products. Just not sure this change delivers the value to justify it.

A codemod can fix this

[machour]

A codemod can fix this

That's just more tech debt piling up for us imho, for no real benefits.

[chaance]

@machour Agreed. Codemods are great and helpful, I just don't see this change making a big enough impact to justify it.

[penx]

For those transitioning from react-router to remix, it would be nice if the name of the “Component” export mirrored the react-router <Route> and createBrowserRouter API so that in a react-router app I could have a routes directory following the remix API and spread exports of each route on to a Route component.

import * as someRoute from “./routes/some-route”

…

<Route {…someRoute} />

even better, have something do this for me from the fs 😄