Incorporate the v3_routeConfig future flag for Remix.

.changeset/spicy-drinks-hang.md

@@ -0,0 +1,71 @@
+---
+'skeleton': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+---
+
+Added support for the Remix future flag `v3_routeConfig`.
+
+Remix documentation for the `v3_routeConfig`: [https://remix.run/docs/en/main/start/future-flags#v3_routeconfig](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig)
+Details the base changes that need to be made to enable the flag, including the up to 3 additional dependencies that need to be added.
+
+Two files need to be changed once the above instructions have been applied.
+
+1. In the `app/routes.ts` file, a support function needs to be included to get the additional routes that were originally added in the vite plugin. With a file like the following:
+
+   ```typescript
+   import {flatRoutes} from '@remix-run/fs-routes';
+   import type {RouteConfig} from '@remix-run/route-config';
+   import {route} from '@remix-run/route-config';
+   import {remixRoutesOptionAdapter} from '@remix-run/routes-option-adapter';
+
+   export default [
+     ...(await flatRoutes({rootDirectory: 'fs-routes'})),
+
+     ...(await remixRoutesOptionAdapter(/* ... */)),
+
+     route('/hello', 'routes/hello.tsx'),
+   ] satisfies RouteConfig;
+   ```
+
+   Include the `hydrogenRoutes` function like so:
+
+   ```typescript
+   import {flatRoutes} from '@remix-run/fs-routes';
+   import type {RouteConfig} from '@remix-run/route-config';
+   import {route} from '@remix-run/route-config';
+   import {remixRoutesOptionAdapter} from '@remix-run/routes-option-adapter';
+   import {hydrogenRoutes} from '@shopify/hydrogen';
+
+   export default hydrogenRoutes([
+     ...(await flatRoutes({rootDirectory: 'fs-routes'})),
+
+     ...(await remixRoutesOptionAdapter(/* ... */)),
+
+     route('/hello', 'routes/hello.tsx'),
+   ]) satisfies RouteConfig;
+   ```
+
+   The function should wrap around all of the routes so that the priority of the routes is applied correctly.
+
+2. In the Vite config (`vite.config.ts` usually) the `remix` plugin needs to have it's configuration slightly altered.
+
+   From this:
+
+   ```typescript
+   ...
+   remix({
+     presets: [hydrogen.preset()],
+   ...
+   ```
+
+   To this:
+
+   ```typescript
+   ...
+   remix({
+     presets: [hydrogen.v3preset()],
+   ...
+   ```
+
+   This is due to the `routes` configuration option not being allowed with the `v3_routeConfig` future flag enabled.

examples/classic-remix/remix.config.js

@@ -22,5 +22,6 @@ module.exports = {
     v3_throwAbortReason: true,
     v3_lazyRouteDiscovery: true,
     v3_singleFetch: true,
+    v3_routeConfig: true,
   },
 };

examples/express/app/routes.ts

@@ -0,0 +1,5 @@
+import {flatRoutes} from '@remix-run/fs-routes';
+import type {RouteConfig} from '@remix-run/route-config';
+import {hydrogenRoutes} from '@shopify/hydrogen';
+
+export default hydrogenRoutes([...(await flatRoutes())]) satisfies RouteConfig;

examples/express/package.json

@@ -14,6 +14,9 @@
     "@remix-run/node": "^2.15.3",
     "@remix-run/react": "^2.15.3",
     "@remix-run/server-runtime": "^2.15.3",
+    "@remix-run/eslint-config": "^2.15.3",
+    "@remix-run/fs-routes": "^2.15.3",
+    "@remix-run/route-config": "^2.15.3",
     "@shopify/hydrogen": "2025.1.2",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",

examples/express/vite.config.ts

@@ -7,12 +7,13 @@ export default defineConfig({
   plugins: [
     hydrogen(),
     remix({
-      presets: [hydrogen.preset()],
+      presets: [hydrogen.v3preset()],
       future: {
         v3_fetcherPersist: true,
         v3_relativeSplatPath: true,
         v3_throwAbortReason: true,
         v3_lazyRouteDiscovery: true,
+        v3_routeConfig: true,
         v3_singleFetch: true,
       },
     }),

examples/multipass/app/routes.ts

@@ -0,0 +1,3 @@
+import {flatRoutes} from '@remix-run/fs-routes';
+
+export default flatRoutes();

examples/multipass/vite.config.ts

@@ -15,12 +15,13 @@ export default defineConfig({
     hydrogen(),
     oxygen(),
     remix({
-      presets: [hydrogen.preset()],
+      presets: [hydrogen.v3preset()],
       future: {
         v3_fetcherPersist: true,
         v3_relativeSplatPath: true,
         v3_throwAbortReason: true,
         v3_lazyRouteDiscovery: true,
+        v3_routeConfig: true,
         v3_singleFetch: true,
       },
     }),