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): mark routes.ts support unstable #10196

Merged
merged 3 commits into from
Nov 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .changeset/popular-humans-attend.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
"@remix-run/dev": minor
---

Add support for `routes.ts` behind `future.v3_routeConfig` flag to assist with the migration to React Router v7.
Add support for `routes.ts` behind `future.unstable_routeConfig` flag to assist with the migration to React Router v7.

Config-based routing is the new default in React Router v7, configured via the `routes.ts` file in the app directory. Support for `routes.ts` and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the `@remix-run` scope, these new packages only exist to keep the code in `routes.ts` as similar as possible to the equivalent code for React Router v7.

When the `v3_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing.
When the `unstable_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing.

To enable the flag, in your `vite.config.ts` file:

```ts
remix({
future: {
v3_routeConfig: true,
unstable_routeConfig: true,
},
});
```
Expand Down
6 changes: 3 additions & 3 deletions docs/start/future-flags.md
Original file line number Diff line number Diff line change
Expand Up @@ -472,11 +472,11 @@ You shouldn't need to make any changes to your application code for this feature

You may find some usage for the new [`<Link discover>`][discover-prop] API if you wish to disable eager route discovery on certain links.

## v3_routeConfig
## unstable_routeConfig

Config-based routing is the new default in React Router v7, configured via the `routes.ts` file in the app directory. Support for `routes.ts` and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the `@remix-run` scope, these new packages only exist to keep the code in `routes.ts` as similar as possible to the equivalent code for React Router v7.

When the `v3_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing. To opt back in to file system routing, this can be explicitly configured within `routes.ts` as we'll cover below.
When the `unstable_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing. To opt back in to file system routing, this can be explicitly configured within `routes.ts` as we'll cover below.

**Update your code**

Expand All @@ -487,7 +487,7 @@ To migrate Remix's file system routing and route config to the equivalent setup
```ts filename=vite.config.ts
remix({
future: {
v3_routeConfig: true,
unstable_routeConfig: true,
},
});
```
Expand Down
2 changes: 1 addition & 1 deletion integration/helpers/vite.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const viteConfig = {
export default {
${await viteConfig.server(args)}
plugins: [remix(${
args.routeConfig ? "{ future: { v3_routeConfig: true } }" : ""
args.routeConfig ? "{ future: { unstable_routeConfig: true } }" : ""
})]
}
`;
Expand Down
8 changes: 4 additions & 4 deletions integration/vite-fs-routes-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ test.describe("fs-routes", () => {

export default defineConfig({
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
})],
});
`,
Expand Down Expand Up @@ -257,7 +257,7 @@ test.describe("emits warnings for route conflicts", async () => {

export default defineConfig({
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
})],
});
`,
Expand Down Expand Up @@ -331,7 +331,7 @@ test.describe("", () => {

export default defineConfig({
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
})],
});
`,
Expand Down Expand Up @@ -380,7 +380,7 @@ test.describe("pathless routes and route collisions", () => {

export default defineConfig({
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
})],
});
`,
Expand Down
8 changes: 4 additions & 4 deletions integration/vite-route-config-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ test.describe("route config", () => {

export default {
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
})]
}
`,
Expand All @@ -64,7 +64,7 @@ test.describe("route config", () => {

export default {
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
routes: () => {},
})]
}
Expand All @@ -88,7 +88,7 @@ test.describe("route config", () => {
export default {
${await viteConfig.server({ port })}
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
routes: () => {},
})]
}
Expand All @@ -113,7 +113,7 @@ test.describe("route config", () => {

export default {
plugins: [remix({
future: { v3_routeConfig: true },
future: { unstable_routeConfig: true },
})]
}
`,
Expand Down
2 changes: 1 addition & 1 deletion packages/remix-dev/__tests__/readConfig-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ describe("readConfig", () => {
"entryServerFilePath": Any<String>,
"future": {
"unstable_optimizeDeps": false,
"unstable_routeConfig": false,
"v3_fetcherPersist": false,
"v3_lazyRouteDiscovery": false,
"v3_relativeSplatPath": false,
"v3_routeConfig": false,
"v3_singleFetch": false,
"v3_throwAbortReason": false,
},
Expand Down
6 changes: 3 additions & 3 deletions packages/remix-dev/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ interface FutureConfig {
v3_throwAbortReason: boolean;
v3_singleFetch: boolean;
v3_lazyRouteDiscovery: boolean;
v3_routeConfig: boolean;
unstable_optimizeDeps: boolean;
unstable_routeConfig: boolean;
}

type NodeBuiltinsPolyfillOptions = Pick<
Expand Down Expand Up @@ -579,7 +579,7 @@ export async function resolveConfig(
root: { path: "", id: "root", file: rootRouteFile },
};

if (appConfig.future?.v3_routeConfig) {
if (appConfig.future?.unstable_routeConfig) {
invariant(routesViteNodeContext);
invariant(vite);

Expand Down Expand Up @@ -721,8 +721,8 @@ export async function resolveConfig(
v3_throwAbortReason: appConfig.future?.v3_throwAbortReason === true,
v3_singleFetch: appConfig.future?.v3_singleFetch === true,
v3_lazyRouteDiscovery: appConfig.future?.v3_lazyRouteDiscovery === true,
v3_routeConfig: appConfig.future?.v3_routeConfig === true,
unstable_optimizeDeps: appConfig.future?.unstable_optimizeDeps === true,
unstable_routeConfig: appConfig.future?.unstable_routeConfig === true,
};

if (appConfig.future) {
Expand Down