remix-fs-convention-proposals.md

Remix Conventions Proposals

I'm splitting these off into separate changes that could be made to Remix that I think would make it more flexible and provide more value.

.route. naming

Remix (any many other tools right now) contains what I'll call "magic exports":

export function loader() {/*...*/}
export function meta() {/*...*/}
export function links() {/*...*/}
export function ErrorBoundary() {/*...*/}
export function CatchBoundary() {/*...*/}
export default function Component() {/*...*/}

These exports are expected to have specific type signatures and receive implicit behavior.

But right now, editors and other tools just see a JavaScript/TypeScript file, and so they can't add nice behavior around the conventions that exist (Imagine something like a built-in editor refactoring on an <img/> tag that adds it to links() to be preloaded).

Knowing that the file that we're looking at is a route has value both as a developer and a tooling author. So I would suggest making it so that all routes are suffixed *.route.* like page.route.tsx.

Single leading _

I frequently typo the double __ and since there's no convention for a single leading _ I don't see a good reason for it.

Trailing _ to ignore layout

Right now to ignore layout Remix has you name things like this:

layout/
  with-layout.tsx
layout.without-layout.tsx
layout.tsx

I dislike that this potentially separates otherwise highly related routes as directories and files are generally sorted separately.

As an alternative, a trailing _ could be used to skip the layout.

layout/
  with-layout.tsx
layout_/
  without-layout.tsx
layout.tsx

This nicely mirrors the leading _ to skip a route segment. So if you stick with the double __ it should probably do the same here.

Make . paths use layouts

Note: This is dependent on having another way to ignore layouts such as the trailing _ suggested above.

Many people (myself included) much prefer flatter file structures. Right now you can almost achieve this with Remix, but it won't get the nice behavior with layouts:

company.tsx
company.careers.tsx
company.about.tsx
company.about.index.tsx
company.about.team.tsx

This even nicely mix and matches:

/company/
    careers.tsx
    about.tsx
    about.index.tsx
    about.team.tsx

It provides enough flexibility that people can use many different layouts.

Special naming for layouts

Sometimes when you have a long list of files it's hard to tell that something is a layout because files and directories are often displayed really far apart.

/company/
    /about/
      index.tsx
      team.tsx
    about.tsx (layout)
    careers.tsx
company.tsx (layout)

Instead, what if there were some kind of naming scheme that placed layouts inside of the same folder as their nested routes, and marked them clearly as "layouts".

/company/
    /about/
      _about.layout.tsx (layout)
      index.tsx
      team.tsx
    _company.layout.tsx (layout)
    careers.tsx

This would also be nice for flat file structures:

/company/
  _company.layout.tsx (layout)
/company.about/
  _about.layout.tsx (layout)
/company.about.index/
  _index.route.tsx
/company.about.team/
  _team.route.tsx
/company.careers/
  _careers.route.tsx

Or mixed:

/company/
    _company.layout.tsx (layout)
    careers.tsx
    about.layout.tsx (layout)
    about.index.tsx
    about.team.tsx