Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(remix-dev): adjust conventional routes logic for pathless layout routes #4421

Merged
merged 9 commits into from May 24, 2023

Conversation

brophdawg11
Copy link
Contributor

@brophdawg11 brophdawg11 commented Oct 25, 2022

tl;dr;

This fixes 2 issues ion our conventional routes logic:

  • Removes the trailing slash from all generated path values since # of slash-delimited segments counts towards route ranking so the trailing slash incorrectly increases the scoring for routes.
  • Removes pathless layout routes from the unique route path checks since they inherently trigger duplicate paths. This allows us to support sibling pathless layouts.

Closes #3014 #3327

Deets

#4355 had an integration test failure once merged to dev due to conflicts with an unrelated PR that merged an integration tests with an index file inside a pathless layout route folder. This uncovered a bit of a rabbit hole into some details around our path collision detection in conventionalRoutes.ts.

Before #4355, index routes inside pathless layout routes were fine because they had a trailing slash hanging around on the "path", so our uniqueRouteIds structure looked like:

{
  'parent': 'routes/parent.tsx',
  'parent/': 'routes/parent/__pathless.tsx',
  'parent?index': 'routes/parent/__pathless/index.tsx'
}

Once we got rid of the trailing slash in #4355 (to fix #3014) we now start failing the build on the above since the "path" (the key in the Map) is identical for both matches.

This turns out to also be the reason that sibling pathless layout routes fail - even though the following is valid in React Router:

<Routes>
  <Route file="root.tsx">
    <Route path="parent" file="routes/parent.jsx">
      <Route file="routes/parent/__a.jsx">
        <Route path="a-child" file="routes/parent/__a/a-child.jsx" />
      </Route>
      <Route file="routes/parent/__b.jsx">
        <Route path="b-child" file="routes/parent/__b/b-child.jsx" />
      </Route>
    </Route>
  </Route>
</Routes>

With the current logic, we end up reporting a path collision on /parent between routes/parent/__a.jsx and routes/parent/__b.jsx even though they have mutually exclusive children routes.

What I ended up doing in here is just ignoring path collision detection only for pathless-layout route files, since by definition they sort of introduce potential path collisions that the user should be aware of and accounting for (we even warn them in the docs!). We still check for collisions on any children route files inside a __pathless/ directory - which lets us detect if they include non-mutually-exclusive route paths beneath a pathless layout route folder.

So at the end of the day we get 2 things from this PR:

@changeset-bot
Copy link

changeset-bot bot commented Oct 25, 2022

🦋 Changeset detected

Latest commit: fc33f83

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

This PR includes changesets to release 18 packages
Name Type
@remix-run/dev Patch
create-remix Patch
@remix-run/css-bundle Patch
remix 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

@@ -188,6 +240,8 @@ export function createRoutePath(partialRouteId: string): string | undefined {

if (rawSegmentBuffer === "index" && result.endsWith("index")) {
result = result.replace(/\/?index$/, "");
} else {
result = result.replace(/\/$/, "");
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Align route paths so we never include trailing slashes on <Route path> entries, which messes with ranking since /-delimited segments count in ranking

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes #3014

@MichaelDeBoey MichaelDeBoey changed the title adjust conventional routes logic for pathless layout routes fix(remix-dev): adjust conventional routes logic for pathless layout routes Oct 26, 2022
* routes/parent/__pathless/index.tsx
* routes/parent/__pathless2/index.tsx
*/
if (uniqueRouteId && !isPathlessLayoutRoute) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes #3327

Copy link
Collaborator

@chaance chaance left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks awesome. Just a minor request for the changeset. Also, should we add similar tests for flat route conventions?

.changeset/stale-spoons-tie.md Outdated Show resolved Hide resolved
@brophdawg11
Copy link
Contributor Author

yeah I can look into the same tests/logic for flat routes 👍

@brophdawg11 brophdawg11 assigned brophdawg11 and unassigned chaance Jan 24, 2023
@sixers
Copy link

sixers commented Mar 17, 2023

Hey, any update on this? I have to patch-package and apply this hotfix each time I upgrade Remix. It would be awesome to finally merge this fix.

@brophdawg11
Copy link
Contributor Author

@sixers This is on hold since I'm unsure if it's needed when using new route convention. The code this PR is fixing will be removed in v2 but made available through another package so you can continue using the nested folder structure via the remix.config routes method. If your team happens to try out flat routes I'd love to know if it resolves this issue. Otherwise I plan to dig back into this once we stabilize some of the ongoing work for 1.15.0.

@sixers
Copy link

sixers commented Mar 17, 2023

@brophdawg11 Yes, it's needed, the issue also exists in V2 route convention.

@chaance
Copy link
Collaborator

chaance commented Apr 8, 2023

@brophdawg11 Just so it's on your radar, you probably want to keep the v1 compat package in sync with these kind of fixes. https://github.com/remix-run/v1-compat-utils

* fix: avoid collisions on pathless routes with indices

* Add changeset

* Remove unused import from e2e test
@brophdawg11 brophdawg11 force-pushed the brophdawg11/pathless-route-collision-3 branch from 182cd3a to a41fd13 Compare April 21, 2023 19:42
@brophdawg11 brophdawg11 force-pushed the brophdawg11/pathless-route-collision-3 branch from 5f07ba7 to 63400c6 Compare May 16, 2023 18:03
@brophdawg11
Copy link
Contributor Author

Added PR for @remix-run/v1-route-convention in remix-run/v1-compat-utils#20

@brophdawg11 brophdawg11 merged commit 5f808a4 into dev May 24, 2023
9 checks passed
@brophdawg11 brophdawg11 deleted the brophdawg11/pathless-route-collision-3 branch May 24, 2023 18:03
@github-actions
Copy link
Contributor

🤖 Hello there,

We just published version v0.0.0-nightly-33cc4c0-20230525 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
Copy link
Contributor

github-actions bot commented Jun 2, 2023

🤖 Hello there,

We just published version 1.17.0-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
Copy link
Contributor

github-actions bot commented Jun 6, 2023

🤖 Hello there,

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Layout route with more than one pathless layout causes invalid conflict
6 participants