fix(remix-dev/flat-routes): use index without leading underscore for colocation

[mcansh]

before:

  app_.projects.$id.roadmap/
    _index.tsx
    chart.tsx
    update-timeline.server.tsx

after:

  app_.projects.$id.roadmap/
    index.tsx
    chart.tsx
    update-timeline.server.tsx

Signed-off-by: Logan McAnsh logan@mcan.sh

Closes: #

• Docs
• Tests

Testing Strategy:

[changeset-bot]

🦋 Changeset detected

Latest commit: 06f5e47

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
remix	Patch
@remix-run/dev	Patch
create-remix	Patch
@remix-run/css-bundle	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/deno	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/netlify	Patch
@remix-run/node	Patch
@remix-run/react	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/testing	Patch
@remix-run/vercel	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-52d60ec-20230121 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[Xiphe]

Hi 👋 and thanks for the fix 👍

I somehow find it irritating that routes/index.ts is still not recognized as the index root route while routes/app/index.tsx is considered the index for the app layout.

Similarly when using dot routes routes/app._index.tsx the underscore is still required whereas in routes/app/index.tsx it isn't.

Is there a reasoning behind that?

[lennerd]

I believe it‘s a bug. Or at least the ideas and conventions of colocation explained in the RFC/Docs and the implementation do not match yet. See my comment (and the RFC) here: #4482 (comment)

A correct implementation (as far as I was able to test it) can be added via @kiliman library https://github.com/kiliman/remix-flat-routes

As @ryanflorence is saying in his gist :

while the example is exclusively files, they are really just "import paths". So you could make a folder for a route instead and the index file will be imported, allowing all of a route's modules to live along side each other.

[chaance]

@lennerd If there are still bugs, do you mind opening a new issue? It'll be much easier to get it prioritized that way.

[kiliman]

@Xiphe and @lennerd There's a difference between v2 routing and my package.

With v2 routing, it only supports _index for the index route (<Route index>) and /index.tsx for the flat-folder route file.

flat-files
routes/_index.tsx => / index route
routes/app._index.tsx => /app/ index route

flat-folders
routes/_index/index.tsx => / index route
routes/app._index/index.tsx => /app/ index route

[Xiphe]

He, was about to post a reference to your comment here: #5216 (comment) and that I seem to have understood things wrong.

The irritating thing for me was that both routes and folders use "index" but they don't mean the same thing.

So the flat-folder equivalent of routes/app._index.tsx is routes/app._index/index.tsx and not routes/app/index.tsx
Also routes/app.tsx and routes/app/index.tsx are equivalent where none of it is an index route.

Thanks for clarifying!

[kiliman]

Yeah, it is a little confusing, but there is a difference in meaning. That's why v2 routing makes it explicit which type you mean: index route vs colocated index route file. It's simpler to teach it that way.

So the flat-folder equivalent of routes/app._index.tsx is routes/app._index/index.tsx and not routes/app/index.tsx
Also routes/app.tsx and routes/app/index.tsx are equivalent where none of it is an index route.

Yes that is correct.

[ryanflorence]

I somehow find it irritating that routes/index.ts is still not recognized as the index root route while routes/app/index.tsx is considered the index for the app layout.

Similarly when using dot routes routes/app._index.tsx the underscore is still required whereas in routes/app/index.tsx it isn't.

app._index.tsx and app/index.tsx are different routes. The first is an index route for the second, and will be rendered into the parent outlet. The second is the parent route itself.

index.tsx no longer has any semantic meaning for "index routes", but rather the node module resolution convention of "index modules".

routes/app.tsx and routes/app/index.tsx are the same route. You just moved it to a folder and made an index.tsx because that's how node module resolution looks for the module at routes/app.

If you want an index route, you use _index

file name	route path	layout
routes/index.tsx	/index	root
routes/_index.tsx	/	root
routes/app.tsx	/app	root
routes/app/index.tsx	same route as above	root
routes/app._index.tsx	/app	routes/app.tsx or routes/app/index.tsx
routes/app._index/index.tsx	same route as above	routes/app.tsx or routes/app/index.tsx

I'm expecting this is only confusing temporarily for people coming from the old convention, or people who aren't familiar with node module "index" resolution.

Again, only _index has meaning for route paths (it's the index route) while index has no meaning at all for route paths but regular module resolution.

[ryanflorence]

https://remix.run/docs/en/v1/file-conventions/route-files-v2#folders-for-organization

[Xiphe]

Awesome! I like how it's written in that section. Thanks for clarifying!

[lennerd]

@lennerd If there are still bugs, do you mind opening a new issue? It'll be much easier to get it prioritized that way.

@chaance Here you go: #5303