Use Remix presets for virtual routes

[frandiox]

This would allow us to remove a lot of hacky code to add virtual routes:

// vite.config.js
import {defineConfig} from 'vite';
import {hydrogen} from '@shopify/hydrogen/vite';
import {oxygen} from '@shopify/mini-oxygen/vite';
import {vitePlugin as remix} from '@remix-run/dev';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({presets: [hydrogen.preset()]}),
    tsconfigPaths(),
  ],
});

However, there are currently some issues:

• Small bug: Fix Vite critical CSS resolution for route files with absolute paths remix-run/remix#9194
• I think all of the virtual routes would now go through the user's root loader. In the previous implementation, we could use a custom virtual root without any heavy requests. Therefore, virtual routes are probably slower now because user roots tend to contain queries for cart, header, etc. that we don't need. Is there any way to add a route and skip the root?
  • ✅ Update: found a hacky workaround 2443887
• Not sure if it's possible to disable virtual routes with a CLI flag or when it's a build (instead of serving), since the Remix presets don't have access to the CLI flag or Vite info (I think?). This means we are now adding /graphiql and /subrequest-profiler to builds with this approach. We could probably just rely on process.env.NODE_ENV to at least avoid it in production builds.
  • ✅ Update: fixed in 9f93ecf

Other thoughts:

• It would be great if Remix exposed an API to add presets programmatically (Vite plugin's api: {}). That way we could add the preset only for development, and if the user doesn't pass --disable-virtual-routes to our CLI. Also, you wouldn't need to specify hydrogen.preset() in vite.config.js.

[frandiox]

Thinking about this more, maybe we could create a secondary Remix app with only our virtual routes, and use the Node handler instead of workerd for this 🤔

Will check this idea soon.

Update: too many rabbit holes with this approach, going back to adding routes to the preset approach.

[shopify]

Oxygen deployed a preview of your fd-preset-virtual-routes branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 5, 2024 6:08 PM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 5, 2024 6:07 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 5, 2024 6:07 PM
skeleton	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 5, 2024 6:08 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 5, 2024 6:07 PM
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 5, 2024 6:07 PM

Learn more about Hydrogen's GitHub integration.

[github-actions]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset.
If the changes are user-facing and should cause a version bump, run npm run changeset add to track your changes and include them in the next release CHANGELOG.
If you are making simple updates to examples or documentation, you do not need to add a changeset.