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 adding _modules to the colocated files. This doesn't require special handling because you can just do import { AuthForm } from './_modules/form' as it's not a route.

Here's my typical use case:

app/routes/
├── index.tsx
└── _auth+
    ├── _modules                     colocated modules
    │   └ 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.

[kenn]

Hey @kiliman, now that we have RRv7, any plans for this?

I believe the hybrid approach is mature enough that we could drop the + suffix from folders.