Skip to content

Commit

Permalink
fix(remix-dev): flat route fixes and enhancements (#5228)
Browse files Browse the repository at this point in the history 
Signed-off-by: Logan McAnsh <logan@mcan.sh>
  • Loading branch information
@mcansh
mcansh authored Feb 6, 2023
1 parent 79859c9 commit d5f95bd
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 112 deletions.
23 changes: 23 additions & 0 deletions .changeset/tame-swans-burn.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
"remix": patch
"@remix-run/dev": patch
---

flat route fixes and enhancements

`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` |
128 changes: 63 additions & 65 deletions packages/remix-dev/__tests__/flat-routes-test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,11 @@ describe("flatRoutes", () => {

for (let [input, expected] of tests) {
it(`"${input}" -> "${expected}"`, () => {
let routeSegments = getRouteSegments(input);
let isIndex = isIndexRoute(input);
expect(createRoutePath(routeSegments, isIndex)).toBe(expected);
let [routeSegments, rawRouteSegments] = getRouteSegments(input);
expect(createRoutePath(routeSegments, rawRouteSegments, isIndex)).toBe(
expected
);
});
}

Expand Down Expand Up @@ -182,20 +184,20 @@ describe("flatRoutes", () => {
},
],
[
"routes/_landing.tsx",
"routes/_landing/index.tsx",
{
id: "routes/_landing",
parentId: "root",
path: undefined,
},
],
[
"routes/_landing._index.tsx",
"routes/_landing._index/index.tsx",
{
id: "routes/_landing._index",
index: true,
parentId: "routes/_landing",
path: undefined,
index: true,
},
],
[
Expand All @@ -207,43 +209,26 @@ describe("flatRoutes", () => {
},
],
[
"routes/about.tsx",
"routes/_about.tsx",
{
id: "routes/about",
id: "routes/_about",
parentId: "root",
path: "about",
},
],
[
"routes/about._index.tsx",
{
id: "routes/about._index",
index: true,
parentId: "routes/about",
path: undefined,
},
],
[
"routes/about.$.tsx",
"routes/_about.faq.tsx",
{
id: "routes/about.$",
parentId: "routes/about",
path: "*",
},
],
[
"routes/about.faq.tsx",
{
id: "routes/about.faq",
parentId: "routes/about",
id: "routes/_about.faq",
parentId: "routes/_about",
path: "faq",
},
],
[
"routes/about.$splat.tsx",
"routes/_about.$splat.tsx",
{
id: "routes/about.$splat",
parentId: "routes/about",
id: "routes/_about.$splat",
parentId: "routes/_about",
path: ":splat",
},
],
Expand Down Expand Up @@ -288,6 +273,22 @@ describe("flatRoutes", () => {
path: ":id",
},
],
[
"routes/folder/route.tsx",
{
id: "routes/folder/route",
parentId: "root",
path: "folder",
},
],
[
"routes/[route].tsx",
{
id: "routes/[route]",
parentId: "root",
path: "route",
},
],

// Opt out of parent layout
[
Expand Down Expand Up @@ -326,17 +327,9 @@ describe("flatRoutes", () => {
],

[
"routes/app.skipall.tsx",
{
id: "routes/app.skipall",
parentId: "routes/app",
path: "skipall",
},
],
[
"routes/app_.skipall_/index.tsx",
"routes/app_.skipall_._index.tsx",
{
id: "routes/app_.skipall_/index",
id: "routes/app_.skipall_._index",
index: true,
parentId: "root",
path: "app/skipall",
Expand All @@ -345,34 +338,34 @@ describe("flatRoutes", () => {

// Escaping route segments
[
"routes/about.[$splat].tsx",
"routes/_about.[$splat].tsx",
{
id: "routes/about.[$splat]",
parentId: "routes/about",
id: "routes/_about.[$splat]",
parentId: "routes/_about",
path: "$splat",
},
],
[
"routes/about.[[].tsx",
"routes/_about.[[].tsx",
{
id: "routes/about.[[]",
parentId: "routes/about",
id: "routes/_about.[[]",
parentId: "routes/_about",
path: "[",
},
],
[
"routes/about.[]].tsx",
"routes/_about.[]].tsx",
{
id: "routes/about.[]]",
parentId: "routes/about",
id: "routes/_about.[]]",
parentId: "routes/_about",
path: "]",
},
],
[
"routes/about.[.].tsx",
"routes/_about.[.].tsx",
{
id: "routes/about.[.]",
parentId: "routes/about",
id: "routes/_about.[.]",
parentId: "routes/_about",
path: ".",
},
],
Expand Down Expand Up @@ -477,18 +470,18 @@ describe("flatRoutes", () => {

// Optional + escaped route segments
[
"routes/([index]).tsx",
"routes/([_index]).tsx",
{
id: "routes/([index])",
id: "routes/([_index])",
parentId: "root",
path: "index?",
path: "_index?",
},
],
[
"routes/([i]ndex).([[]).([[]]).tsx",
"routes/(_[i]ndex).([[]).([[]]).tsx",
{
id: "routes/([i]ndex).([[]).([[]])",
parentId: "routes/([index])",
id: "routes/(_[i]ndex).([[]).([[]])",
parentId: "routes/([_index])",
path: "[?/[]?",
},
],
Expand Down Expand Up @@ -584,9 +577,16 @@ describe("flatRoutes", () => {
[
"routes/brand/index.tsx",
{
id: "routes/brand/index",
id: "routes/brand",
parentId: "root",
path: "brand",
},
],
[
"routes/brand._index.tsx",
{
id: "routes/brand._index",
parentId: "routes/brand",
index: true,
},
],
Expand All @@ -600,12 +600,10 @@ describe("flatRoutes", () => {
],
];

let files: [string, Omit<ConfigRoute, "file">][] = testFiles.map(
([file, route]) => {
let filepath = file.split("/").join(path.sep);
return [filepath, { ...route, file: filepath }];
}
);
let files: [string, ConfigRoute][] = testFiles.map(([file, route]) => {
let filepath = file.split("/").join(path.sep);
return [filepath, { ...route, file: filepath }];
});

let routeManifest = flatRoutesUniversal(
APP_DIR,
Expand Down
Loading

0 comments on commit d5f95bd

Please sign in to comment.