Proposal: allow to ignore layout on config

[cjoecker]

I have the following routes: routes/app+/ui.tsx routes/app+/ui-without-layout.tsx routes/app+/_layout.tsx

In ui.tsx, I want to show the layout. In ui-without-layout.tsx, I don't want to show the layout. Since both routes are inside the routes/app+ folder, the layout is shown on both routes.

I can hide the layout with a condition inside the react component of _layout. But it will be nicer if I have the possibility in the remix.config of remix-flat-routes to ignore the layout. Something like this:

{
    routes: async (defineRoutes) => {
        return flatRoutes("routes", defineRoutes, {
            ignoredLayouts: [
                {
                    layout: "routes/app+/_layout.tsx",
                    route: "routes/app+/ui-without-layout.tsx",
                },
            ],
        });
    },
}

[kiliman]

With hybrid routes, there are some extended conventions.

As you know, app+/_layout.tsx is equivalent to app.tsx

And typically, you'd want all your child routes to use the parent layout. However to opt out of this, you would typically use the _ suffix. So in flat-files, you'd use app_.ui-without-layout.tsx.

To do the equivalent in hybrid routes, just name your child route with the _. prefix. This will append it to the parent route.

So app+/_.ui-without-layout.tsx is converted to app_.ui-without-layout.tsx which is what you ultimately want.

[kiliman]

See https://github.com/kiliman/remix-flat-routes/issues/58 for details. I should add this to the README.

[cjoecker]

@kiliman smart! Thanks for the explanation.

Would it make sense to have a cheat sheet in the documentation? I have this in the README of my project:

1. Folders with _ prefix and + suffix like _auth+ are ignored in paths
2. Files inside folders with + suffix are added to the path. E.g. account+/change-password.tsx becomes /account/change-password
3. Files with _index.tsx prefix inside folders with + suffix are the default files for the path. E.g. account+/_index.tsx becomes /account.
4. Files with _layout.tsx suffix are the layout files for the path. E.g. account+/_layout.tsx becomes the layout for all the paths inside /account
5. Routes that should not show the _layout.tsx must have a _. prefix. E.g. account+/_.ui-witouth-layout.tsx do not show the layout inside account+ folder

Maybe it makes sense to reorganize the README since I feel it has grown historically and I tend to oversee parts of it. I can submit a PR for that if you want.

[kiliman]

Yes, I've been meaning to rewrite the README.

I want to highlight the differences between remix-flat-routes and the Remix v2 routing convention.

[dkAndFed]

On related note, how would one solve the following with the hybrid approach.

foo+/
├── _.bar_.baz_.qux+/      # Having to repeat the segments makes it difficult to maintain
│   ├── _route.tsx
│   └── quux.tsx
├── bar+/
│   ├── baz+/
│   │   ├── _.qux+/        # Will only escape `baz` layout but want to escape all the way to root
│   │   │   ├── _route.tsx
│   │   │   └── quux.tsx
│   │   └── _route.tsx
│   └── _route.tsx
└── _route.tsx

Perhaps it's possible to write some custom logic in the existing implementation with a custom annotator to ignore the layout up to a given segment? Perhaps something as follow 🤔

foo+/
├── bar+/
│   ├── baz+/
│   │   ├── ~3.qux+/        # Will escape layout of 3 ancestor segments and produce `foo_.bar_.baz_.qux`
│   │   │   ├── _route.tsx  # `foo_.bar_.baz_.qux._route`
│   │   │   └── quux.tsx    # `foo_.bar_.baz_.qux.quux`
│   │   └── _route.tsx
│   └── _route.tsx
└── _route.tsx