Changesets setup

[wizardlyhel]

70

How to test

Check templates are being generated properly

1. Make sure your templates/demo-store files are a fresh copy from github
2. Run node scripts/compile-template-for-dist.mjs demo-store in terminal
3. See 2 new folders in the templates folder: demo-store-js and demo-store-ts
4. Make sure npm i and npm run dev works for both templates (Only works when we release the packages)

The changesets github workflow will force push these templates to the dist branch.

[frandiox]

It's green now ✅ 🎉

Notes:

• NPM can't do aliases in workspaces so I'm patching Shopify CLI to pick up the new temporary @shopify/cli-h2-test plugin. However, we could just go with the original plugin name @shopify/cli-hydrogen and release an experimental version instead because I don't think this package name will change.
• The demo-store is using the previous naming, and we rely on TS paths/aliases to find the right packages in the workspace. Not sure if this is something we want.

[caution-tape-bot[bot]]

:wave: It seems that this PR is adding an open-source GitHub action.

We are letting you know that majority of open-source GitHub actions are deprecated because of security reasons.

Any GitHub actions coming from unverified developers will be blocked on February 1, 2023.

If you still want to onboard these actions, please follow this onboarding guide.

For any questions please reach us on #code-scale channel.

_View the source of this rule in Services DB_

[caution-tape-bot[bot]]

:wave: It seems that this PR is adding a GitHub Action workflow that looks a lot like a CI step.

CI should generally be handled with Shopify Build pipelines, and GitHub Actions should be used for GitHub automation and package publishing.

If this workflow change is not introducing a CI step, then feel free to ignore this comment.

For more details and explanation, click to expand...

GitHub Actions are generally intended for GitHub, Project or Repository-related automation, or for public package and library publishing. You can learn more about the supported use cases in our [GitHub Actions documentation](https://development.shopify.io/engineering/deploying_and_running/overview/github_actions_index). If your Action is a CI step, please migrate to [shopify-build](https://shopify-build.docs.shopify.io/) instead. If you have any questions about how to setup a `shopify-build` pipeline, don't hesitate to ask them in [#help-eng-infrastructure](https://shopify.slack.com/archives/C01MXHNTT4Z). Note that this message is based on a simple [regex detection](https://github.com/Shopify/services-db/blob/master/components/caution_tape_bot/app/models/caution_tape_bot/rules/github_actions.rb#L68), and may not always be accurate. If your action is not a CI step, and is already running on `shopify-ubuntu-latest` or similar, feel free to ignore this message. If your repository is intended to become Public later, please use `runs-on: shopify-ubuntu-latest` for now and ignore the rest of this comment. If you think this workflow has been mistakenly labeled as a CI step, please let us know by commenting your reasons below.

_View the source of this rule in Services DB_

[caution-tape-bot[bot]]

:wave: It seems that this PR is adding, or editing, a GitHub Action workflow that is not configured to use our custom GitHub Action runners.

For private repositories, the only supported way of running Action workflows is via the custom runners. You can learn more about the supported use cases in our GitHub Actions documentation.

To make sure that your workflow is using these runners you need to add the shopify-ubuntu-latest label to your workflow manifest file, or shopify-core-ubuntu-latest for Core repositories:

runs-on: shopify-ubuntu-latest

If your repository is intended to become Public later, please use runs-on: shopify-ubuntu-latest for now. The custom runners should function the same as ubuntu-latest public runners.

If you run into any issues with the custom runners, please reach out in #help-eng-infrastructure.

_View the source of this rule in Services DB_

[wizardlyhel]

Getting app security approval for changeset reminder workflow

https://github.com/Shopify/github-actions/pull/83

[wizardlyhel]

To-Do:

• [ ] Set up repo branches and env vars
• [x] Fix package versioning warnings after running npm run changeset add
• [x] Check node scripts/compile-template-for-dist.mjs demo-store works properly
• [ ] Update changeset reminder workflow when appsec approves to uses: Shopify/github-actions/oss/mskelton/changelog-reminder-action@v2

[jplhomer]

• I think @frandiox told me the remix init CLI can convert a TS template into JS automatically? If so, that would be a nice alternative to building our own in a dist branch. I'd be OK defaulting to TS in hydrogen.new if that was the tradeoff.
• Might check in with @frehner to see how we can get the NPM_TOKEN GH secret applied to this repo (it's an org-wide secret but limited to an allowlist). I can't remember who added it to shopify/hydrogen for me 🙃

[frehner]

• Might check in with @frehner to see how we can get the NPM_TOKEN GH secret applied to this repo (it's an org-wide secret but limited to an allowlist). I can't remember who added it to shopify/hydrogen for me 🙃

I think #help-eng-infrastructure is where I asked.

[wizardlyhel]

Quick googling and I got this:

We can register our Hydrogen template as a Remix stack

npx create-remix@latest --template my-username/my-repo

Example of a stack: https://github.com/edmundhung/remix-worker-template

The stack itself can be written in Typescript and the Remix cli can remove typescript if user choose to.

Remove TypeScript If there's a tsconfig.json file in the root of the project, the Remix CLI will ask whether the user wants the TypeScript automatically removed from the template. We don't recommend this, but some folks just really want to write regular JavaScript.

The above drastically differs from the way how Oxygen is pulling templates from Hydrogen now. @jplhomer I know we used to use create hydrogen command line to generate template in Oxygen but later on moved away from that. Perhaps it would be beneficial to make 2 deployable templates?

• dist branch for Oxygen
• Remix shopify (or hydrogen) stack in a different public repo (future when H2 is public)

I'll see what I can do to run the JS template creation locally with remix-dev

[wizardlyhel]

@frandiox Can you explain how are we doing the package name alias in this PR?

I don't see any import path changes in the demo-store template .. and yet somehow it is referencing properly from @shopify/hydrogen-remix --> @shopify/h2-test-hydrogen-remix

[wizardlyhel]

More github actions to be approved by appsec

• https://github.com/Shopify/github-actions/pull/88
• https://github.com/Shopify/github-actions/pull/89

[frandiox]

Can you explain how are we doing the package name alias in this PR?

There are aliases in templates/demo-store/tsconfig.json, in the paths property 👍 -- hopefully that's also valid in jsconfig.json.

[frandiox]

It looks like the concurrency option works for canceling previous flows:

[frandiox]

I think this is ready now. We have cache for:

• node_modules
• Turbo (build packages)
• Playwright browsers

And we are not using any action that needs internal approval 👍

[jplhomer]

:shipit: :shipit: :shipit: :shipit:

[wizardlyhel]

Requesting for a npm token