hydrogen icon indicating copy to clipboard operation
hydrogen copied to clipboard

Incorporate the `v3_routeConfig` future flag for Remix.

Open seanparsons opened this issue 11 months ago • 1 comments

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_routeConfig flag set to true.
  • Created a hydrogen.v3preset function which excludes the routes attribute that the hydrogen.preset function includes because that is incompatible with the flag being turned on.
  • Added a hydrogenRoutes function which transforms the route specified in routes.ts to include the virtual routes.
  • Rewrote getVirtualRoutes to 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 LANG environment variable in the cli package so that the date formatting uses the US formatting.
  • build.test.ts now closes resources so that the test doesn't fail due to the hanging file watchers.
  • build.ts sets the server.watch configuration option as that may be necessary to disable the file watching.
  • hydrogen/dev.ts shuts down the watcher on the viteServer when finishing up.
  • setup.test.ts makes sure to include the routes.ts file.
  • classic-compiler/dev.ts makes sure to filter out the virtual routes when disableVirtualRoutes is true.
  • common.ts now makes sure to include routes.ts and layout.tsx.
  • local.test.ts slightly tweaked to make it easier to find out what files are missing and also now correctly takes account of the content that was shifted from root.tsx to layout.tsx.
  • remix-config.ts constructs a value routesViteNodeContext which is necessary when resolving the config if v3_routeConfig is enabled.
  • route-validator.ts is now null safe when assigning currentRoute.path.
  • replacers.ts looks for layout instead of root.
  • get-virtual-routes.test.ts now checks for the jsx files instead of the tsx files of the virtual routes.
  • Patched @remix-run/dev to not watch in remixVitePlugin when in a test because the file watchers cannot be reached to switch them off which causes tests relying on that to fail.
  • Patched vite to handle the watch properties of the config to set it if the value is null as 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.ts with the hydrogenRoutes function, to add the supporting routes.
  • Change the hydrogen preset from hydrogen.preset() to hydrogen.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

seanparsons avatar Jan 23 '25 17:01 seanparsons

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.

shopify[bot] avatar Jan 23 '25 17:01 shopify[bot]

Updated this PR so it's just a single patch on @remix-run/dev Related issue: https://github.com/remix-run/remix/issues/10324

wizardlyhel avatar Feb 26 '25 22:02 wizardlyhel

/snapit

wizardlyhel avatar Mar 21 '25 17:03 wizardlyhel

🫰✨ 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-hydrogen as a dependency to your project using the snapshot version.

github-actions[bot] avatar Mar 21 '25 17:03 github-actions[bot]

/snapit

wizardlyhel avatar Mar 21 '25 20:03 wizardlyhel

🫰✨ 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-hydrogen as a dependency to your project using the snapshot version.

github-actions[bot] avatar Mar 21 '25 20:03 github-actions[bot]

/snapit

wizardlyhel avatar Mar 21 '25 21:03 wizardlyhel

🫰✨ 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-hydrogen as a dependency to your project using the snapshot version.

github-actions[bot] avatar Mar 21 '25 21:03 github-actions[bot]

@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 avatar Mar 30 '25 23:03 jasonloeve

@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

rbshop avatar Apr 01 '25 09:04 rbshop