fix: update flat-route module check for file colocation

[mcansh]

closes #5028

before:

<Routes>
  <Route file="root.tsx">
    <Route index file="routes/_index.tsx" />
    <Route path="help" file="routes/help.tsx">
      <Route index file="routes/help._index.tsx" />
      <Route path="bam" file="routes/help.bam.tsx" />
    </Route>
    <Route path="app" index file="routes/app/_index.tsx" />
    <Route path="app/footer" file="routes/app/footer.tsx" />
    <Route path="app/primary-nav" file="routes/app/primary-nav.tsx" />
    <Route path="something" index file="routes/something/_index.tsx" />
  </Route>
</Routes>

after:

<Routes>
  <Route file="root.tsx">
    <Route index file="routes/_index.tsx" />
    <Route path="help" file="routes/help.tsx">
      <Route index file="routes/help._index.tsx" />
      <Route path="bam" file="routes/help.bam.tsx" />
    </Route>
    <Route path="app" index file="routes/app/_index.tsx" />
    <Route path="something" index file="routes/something/_index.tsx" />
  </Route>
</Routes>

• Docs
• Tests

Testing Strategy:

[changeset-bot]

🦋 Changeset detected

Latest commit: 558a448

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

[pcattori]

This regex is too complex for me to understand at a glance. Could we break this down into simpler pieces somehow?

For example, this regex matches /a.js, but not /abc.js nor a.js. I'm not really sure if that's intentional or not.
It also seems to only match after the final / so /abc/d.js is only matched on /d.js. If we only want to match after the final path separator, I think it'd be better to use path utilities to get the base filename first and then match against regexes.

In any case, I think this deserves at least a comment explaining it, but probably warrants doing it a different way to keep things readable/understandable.

[kiliman]

Yes, the regex is complex. Even more so in my package as it handles more conventions. Unfortunately, JavaScript doesn't support the x flag (ignore whitespace) to make the regex easier to read.

Since routes can be determined as either a filename a.b.c.tsx or a folder a.b.c./_index.tsx, I don't think you can just get the base filename.

The filepath in isRouteModuleFile will be the full path after routes folder. So will never start with /.

To match flat-files convention, this is the regex: ^[^\/\\:?*]+\.(tsx?|jsx?|mdx?)$

• Start of path ^
• Followed by one or more non-path characters [^\/\\:?*]+
• Ending with .tsx, etc \.(tsx?|jsx?|mdx?)$

To match flat-folders convention, this is the regex: [\/\\]_index\.(tsx?|jsx?|mdx?)$

• Path ends with /_index.tsx
• So it should ignore colocated files like users/component.tsx

Put them together and you get: ((^[^\/\\:?*]+)|([\/\\]_index))\.(tsx?|jsx?|mdx?)$

[mcansh]

instead of using a regex would using isIndexRoute be sufficient for non flat files?

[kiliman]

Probably, considering the new core feature is a subset of the remix-flat-routes package. You don't need to handle quite as many cases.

But if you end up expanding the naming conventions, you'll most likely need to use regex at some point.

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-f5475db-20230111 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!

[github-actions]

🤖 Hello there,

We just published version 1.10.1-pre.0 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!

[github-actions]

🤖 Hello there,

We just published version 1.10.1 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!