Incorporate the `v3_routeConfig` future flag for Remix.
WHY are these changes introduced?
These changes are to support an upgrade to the next version of Remix, by using the future flag and supporting libraries to get the code ready for that upgrade in place before the upgrade itself happens.
WHAT is this pull request doing?
- Added the
v3_routeConfigflag set totrue. - Created a
hydrogen.v3presetfunction which excludes theroutesattribute that thehydrogen.presetfunction includes because that is incompatible with the flag being turned on. - Added a
hydrogenRoutesfunction which transforms the route specified inroutes.tsto include the virtual routes. - Rewrote
getVirtualRoutesto work without using any node libraries so that it can run in MiniOxygen. - Updated the example projects to have them use the flag and the changes necessary to use the flag.
- Set the
LANGenvironment variable in theclipackage so that the date formatting uses the US formatting. build.test.tsnow closes resources so that the test doesn't fail due to the hanging file watchers.build.tssets theserver.watchconfiguration option as that may be necessary to disable the file watching.hydrogen/dev.tsshuts down the watcher on theviteServerwhen finishing up.setup.test.tsmakes sure to include theroutes.tsfile.classic-compiler/dev.tsmakes sure to filter out the virtual routes whendisableVirtualRoutesis true.common.tsnow makes sure to includeroutes.tsandlayout.tsx.local.test.tsslightly tweaked to make it easier to find out what files are missing and also now correctly takes account of the content that was shifted fromroot.tsxtolayout.tsx.remix-config.tsconstructs a valueroutesViteNodeContextwhich is necessary when resolving the config ifv3_routeConfigis enabled.route-validator.tsis now null safe when assigningcurrentRoute.path.replacers.tslooks forlayoutinstead ofroot.get-virtual-routes.test.tsnow checks for thejsxfiles instead of thetsxfiles of the virtual routes.- Patched
@remix-run/devto not watch inremixVitePluginwhen in a test because the file watchers cannot be reached to switch them off which causes tests relying on that to fail. - Patched
viteto handle thewatchproperties of the config to set it if the value isnullas that has meaning in that particular case.
HOW to test your changes?
- Follow the steps as described in https://remix.run/docs/en/main/start/future-flags#v3_routeconfig to bring your project in line with the expectations therein.
- Wrap the routes in
routes.tswith thehydrogenRoutesfunction, to add the supporting routes. - Change the hydrogen preset from
hydrogen.preset()tohydrogen.v3preset().
Post-merge steps
Checklist
- [x] I've read the Contributing Guidelines
- [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
- [x] I've added a changeset if this PR contains user-facing or noteworthy changes
- [x] I've added tests to cover my changes
- [x] I've added or updated the documentation
Oxygen deployed a preview of your refactor/v3_routeconfig_flag branch. Details:
| Storefront | Status | Preview link | Deployment details | Last update (UTC) |
|---|---|---|---|---|
| third-party-queries-caching | ✅ Successful (Logs) | Preview deployment | Inspect deployment | March 21, 2025 9:10 PM |
| Skeleton (skeleton.hydrogen.shop) | ✅ Successful (Logs) | Preview deployment | Inspect deployment | March 21, 2025 9:10 PM |
| metaobjects | ✅ Successful (Logs) | Preview deployment | Inspect deployment | March 21, 2025 9:10 PM |
| classic-remix | ✅ Successful (Logs) | Preview deployment | Inspect deployment | March 21, 2025 9:10 PM |
| custom-cart-method | ✅ Successful (Logs) | Preview deployment | Inspect deployment | March 21, 2025 9:10 PM |
Learn more about Hydrogen's GitHub integration.
Updated this PR so it's just a single patch on @remix-run/dev
Related issue: https://github.com/remix-run/remix/issues/10324
/snapit
🫰✨ Thanks @wizardlyhel! Your snapshots have been published to npm.
Test the snapshots by updating your package.json with the newly published versions:
"@shopify/cli-hydrogen": "0.0.0-snapshot-20250321172553",
"@shopify/hydrogen": "0.0.0-snapshot-20250321172553",
"@shopify/hydrogen-codegen": "0.0.0-snapshot-20250321172553",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250321172553",
"@shopify/remix-oxygen": "0.0.0-snapshot-20250321172553"
Create a new project with all the released packages running
npm create @shopify/hydrogen@<snapshot_version>To try a new CLI plugin version, add@shopify/cli-hydrogenas a dependency to your project using the snapshot version.
/snapit
🫰✨ Thanks @wizardlyhel! Your snapshots have been published to npm.
Test the snapshots by updating your package.json with the newly published versions:
"@shopify/cli-hydrogen": "0.0.0-snapshot-20250321203919",
"@shopify/hydrogen": "0.0.0-snapshot-20250321203919",
"@shopify/hydrogen-codegen": "0.0.0-snapshot-20250321203919",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250321203919",
"@shopify/remix-oxygen": "0.0.0-snapshot-20250321203919"
Create a new project with all the released packages running
npm create @shopify/hydrogen@<snapshot_version>To try a new CLI plugin version, add@shopify/cli-hydrogenas a dependency to your project using the snapshot version.
/snapit
🫰✨ Thanks @wizardlyhel! Your snapshots have been published to npm.
Test the snapshots by updating your package.json with the newly published versions:
"@shopify/cli-hydrogen": "0.0.0-snapshot-20250321210338",
"@shopify/hydrogen": "0.0.0-snapshot-20250321210338",
"@shopify/hydrogen-codegen": "0.0.0-snapshot-20250321210338",
"@shopify/mini-oxygen": "0.0.0-snapshot-20250321210338",
"@shopify/remix-oxygen": "0.0.0-snapshot-20250321210338"
Create a new project with all the released packages running
npm create @shopify/hydrogen@<snapshot_version>To try a new CLI plugin version, add@shopify/cli-hydrogenas a dependency to your project using the snapshot version.
@wizardlyhel , I may have missed it but moving the layout out of root along with imports we loose the ability to have styled error pages / error messages wrapped in layout ?
@jasonloeve ~~Looks like this was done in error whilst attempting to clean up the code. We'll revert this and cut a new release ASAP.~~ Thanks for the heads up - edit: I was wrong to say this was to clean up code, it was actually done to support some virtual routes that are exposed during local dev. Either way, we'll get this fixed ASAP