Deprecate remix-flat-routes in favor of remix-hybrid-routes

[kiliman]

Remix has published the new v2 routing convention and is a more strict flat-routes convention. Ryan doesn't appear interested in incorporating any of the more enhanced features into the core library.

I think it would be a good idea to create a new project called remix-hybrid-routes.

One of the main goals would be to be flexible but simplify the convention.

Requirements

All routes can use . or / as route separators, whichever you prefer. So you can have: a.b.c.d.tsx or a/b/c/d.tsx or anywhere between.

So how does that affect colocation? In v2 and remix-flat-routes a folder automatically opts-in to colocation. So you can no longer use folders just for route organization. That is why I introduced the + suffix for folders. They let you use folders for organization instead of colocation.

With remix-hybrid-routes, I think it should be the opposite. Whereas remix-flat-routes had to maintain compatibility with the flat routes spec, remix-hybrid-routes can do whatever we like. I feel that organization is much more common than colocation.

All index routes (default route for a path) will be named _index like in v2.

_layout in a folder will be the layout for all routes in that folder (including child routes)

Use the + suffix to specify the contents of this folder are colocated. The route file is index.tsx, any other file is ignored.

Parent layouts will look for nearest _layout file, so no need for the trailing _ on the $userId.edit route. It will simply nest under users/_layout.tsx

app/routes-hybrid/
├── _index.tsx.         / (index route)
└── users
    ├── $userId.tsx     /users/:userId route
    ├── $userId.edit+   /users/:userId/edit route (+ means contents are colocated)  
    │   ├── avatar.png  *colocated file (ignored)
    │   ├── index.tsx   actual route file  
    │   └── styles.css  *colocated file (ignored)
    ├── _index.tsx      /users/ (index route)
    └── _layout.tsx     layout for all /users/*

Anyway, I'd appreciate any comments.

[kenn]

I feel that organization is much more common than colocation.

This.

Colocation should be an exception, not the norm. I will definitely switch to remix-hybrid-routes when it's out!

[doaortu]

It's been a year, any status on remix-hybrid-routes ? or you decide to incorporate this into remix-flat-routes?

Thanks

[kiliman]

Wow, time sure flies. I've been super busy lately. However, I plan on rewriting the plugin to clean up the code and add more customizations. I imagine I'll keep the remix-flat-routes name as people are familiar with it.

Thanks for the reminder.

[doaortu]

Thanks for the confirmation,
I just tried the hybrid mode and it's a lot better than the default v2 routing convention.
Thanks for making this library.

[kenn]

I've migrated 3 production (small to medium sized) apps to the + convention, and I can say this is miles better than anything else.

And now I find the needs for colocation, but I'm just prefixing _ to the colocated tsx files. This doesn't require special handling because you can just do import { AuthForm } from './_form' as it's not a route. It's like "Partials" in Rails, but can be colocated.

So far, all of my colocation needs are to have tsx components in the same folder (including shadcn's DataTable), not tricky file types such as png or css. In fact, Remix's doc also shows component examples only, so I'm wondering why you think it's necessary to support images or css in this way. We usually deploy static files via CDN, anyway.

Here's my typical use case:

app/routes/
├── index.tsx
└── _auth+
    ├── _form.tsx                    colocated form component
    ├── _layout.tsx                  layout
    ├── forgot.tsx                   imports the common form component
    ├── login.tsx                    imports the common form component
    ├── reset_password.$token.tsx    imports the common form component
    └── signup.tsx                   imports the common form component

Now, I just want to get rid of + in _auth+ and everything would look super clear.

[jcjp]

Sorry to hijack this discussion but it's not working for me on my side here is my folder structure. I am currently on the latest version of remix. It does not show anything on the expected routes using node version 20 and yarn version 4.

@remix-run/node: ^2.8.1
@remix-run/react: ^2.8.1
@remix-run/serve: ^2.8.1
remix-flat-route: ^0.6.4
vite: ^5.1.0

[kiliman]

What does vite.config.ts look like? Also, can you show the output from npx remix routes?

[jcjp]

Here is my vite.config.ts:

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
});

For npx remix routes here is the result:

<Routes>
  <Route file="root.tsx">
    <Route file="routes/_marketing+/index.tsx" />
    <Route path="*" file="routes/$.tsx" />
  </Route>
</Routes>

[makrandgupta]

@jcjp you have to override remix's default behaviour. Your vite.config.ts needs to look something like this:

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { flatRoutes } from "remix-flat-routes";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*"],
      routes: async (defineRoutes) => {
        return flatRoutes("routes", defineRoutes);
      },
    }),
    tsconfigPaths(),
  ],
});

[jcjp]

@makrandgupta Thank you! That actually fixed my issue, I thought that having remix.config.js on my root folder would suffice. I thought that the library will work on the fly with Vite.