Attach Hydrogen Version Metadata to Deployment

[benwolfram]

WHY are these changes introduced?

We are looking to attach metadata to each deployment containing the Hydrogen version number. This would allow us to show this data in the Admin, and also encourage things like upgrades to merchants in order to gain new and exciting features released in Hydrogen if they are behind on versions.

WHAT is this pull request doing?

• Moving getHydrogenVersion to a shared location and out of update.ts

• Consuming that command in deploy.ts and attaching the metadata

• Need to ship to Oxygen-CLI first

HOW to test your changes?

I logged out the version number in the deploy command to see before the metadata was sent.

Post-merge steps

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[shopify]

Oxygen deployed a preview of your deploy-include-h2-version branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 3, 2024 7:55 PM
classic-remix	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 3, 2024 7:55 PM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 3, 2024 7:55 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 3, 2024 7:55 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	December 3, 2024 7:55 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.

[benwolfram]

Moving back to draft to fix a couple things:

• Not sharing the method with upgrade, we cant throw errors in the deploy one since it is not as critical to have and we don't want to block deploys
• Reading from node_modules/@shopify/hydrogen/package.json -> version first, and then looking at root/package.json as a fallback -- as we want the actual version, not including characters that allow for multiple versions like > if possible.

[benwolfram]

I couldn't figure out why, but this had a file created already when running, I am not sure if temporary folder stuff is bleeding over? But this will make the test safe.

[benwolfram]

Ah, the actual deploy command is creating the file for real in the test since I am not mocking writeFile anymore 🤔. This has been a pain 😞.

Very open to input here 😅, is there a way we have to create a temporary directory that will cleanup the files after?

[benwolfram]

/snapit

[github-actions]

🫰✨ Thanks @benwolfram! 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-20241118174207",
"@shopify/hydrogen": "0.0.0-snapshot-20241118174207"

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.

[blittle]

Will do a more in depth review, but I'm not sure this will work in some package managers like yarn >2 and pnpm. Could you try testing?

[benwolfram]

Yeah, it looks like the node_modules look a lot different in yarn@latest. pnpm works, and I think my approach is here is trying to do the best we can and fall back to different options. But open to more ideas.

For example below , if they have ^ or > in package.json for @shopify/hydrogen it can be slightly less accurate too, but we're trying to get the best data we can basically.

We can also rely on parsing the working bundle and crawling it as a fallback too if we don't like any of these. This is being used to backfill data too.

[wizardlyhel]

@benwolfram I think we can use importLocal that's being used within the Hydrogen CLI repo to get the Hydrogen lib version accurate to the node package itself.

1. Export the LIB_VERSION in hydrogen package - This lib version will be updated on every release including if someone is using a next tag (which won't have a proper version tag and we can ignore showing banner in admin)
2. Then in CLI, we can local import hydrogen to get the lib version like this

import {importLocal} from '../../lib/import-utils.js';

export async function getHydrogenVersion({appPath}: {appPath: string}) {
  const {root} = getProjectPaths(appPath);

  type HydrogenType = typeof import('@shopify/hydrogen');
  const {LIB_VERSION} = await importLocal<HydrogenType>(
    '@shopify/hydrogen',
    root,
  ).catch(() => {
    return '1.0.0';
  });

  return LIB_VERSION;
}

[frandiox]

Importing Hydrogen in the CLI might be problematic. Perhaps you can just find the package.json in a safe way and import it:

import {createRequire} from 'node:module';

const require = createRequire(import.meta.url);

const {version} = require(
  require.resolve(
    '@shopify/hydrogen/package.json',
    {paths: [root]}
  )
);

[benwolfram]

I'll give that a whirl, thanks @wizardlyhel! I appreciate the guidance!

@frandiox I am already trying to do that in the PR, but are you saying this solution would solve for Yarn>2 as well?

[benwolfram]

I had errors/difficulty importing hydrogen with @wizardlyhel's solution, so DMd a bit and shifted to @frandiox's suggestion.

I tested Yarn@4 and it seemed good with that solution. Let me know if there are any concerns about different managers @blittle or if you have a similar experience of success.

[frandiox]

I am already trying to do that in the PR, but are you saying this solution would solve for Yarn>2 as well?

The code I posted relies on Node's resolution logic, which should be safer than finding the file manually. I'd expect this to work across package managers, just like any import or require in Node work with all of them because it uses the same algorithm.

Also, no need to use async / await with this code 👍

[wizardlyhel]

Nice!

[benwolfram]

/snapit

[github-actions]

🫰✨ Thanks @benwolfram! 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-20241203192325",
"@shopify/hydrogen": "0.0.0-snapshot-20241203192325"

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.

[benwolfram]

I've tested this locally with the snap and it worked great and I verified it on our side internally that the metadata is working. I've also pushed a changelog, but GitHub went down as I did it, and I've waited 1+ hours already, so at some point it should sync here..