Integrate hydrogen-react into the hydrogen monorepo #605

frehner · 2023-03-01T21:36:17Z

WHY are these changes introduced?

This is the majority of the work to integrate hydrogen-react back into the hydrogen repo. Namely:

Code migration (hypothetically, with completely git history. Thanks @gfscott !) This is why the commit history is so large
Development workflow is working. There's probably room to optimize this, but saving a component in hydrogen-react will cause a page refresh in the demo-store
CI processes are integrated. In addition, a new monorepo-root-level npm script has been added (called ci:checks) that enables you to quickly run all the ci checks locally; before, you had to know which scripts were run in CI, and then run then individually.
Updates the issue template to incorporate the idea of multiple packages
Updates the root README to incorporate the idea of multiple packages (thanks @gfscott !)
Updates docs and package.json to point to the new repo location

A big thank you to @wizardlyhel @juanpprieto and @blittle for pairing on this throughout various points as well!

Final questions:

Should we add the NextJS app?

HOW to test your changes?

Checkout this branch,
clear your node_modules at all levels,
npm i,
npm run dev,
edit code in hydrogen-react and hydrogen, ensure it works and that it reloads correctly

Also:

Run ladle (npm run dev:story) in the hydrogen-react package and ensure that it is working as well. (This helps you develop components in isolation, outside of remix)

Post-merge steps

Validate that publishing works with changesets in this new setup
Update the docs system to point to this new repo
We'll need to migrate issues, PRs, discussions

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

Add github workflows

* test to see if alex is breaking ci stuff * add alex back, and check changeset checker * downgrade alex, and add better words/docs on changeset reminder * revert alex downgrade * see if we can figure out where this is coming from * remove testing as it didn't find anything * remove diff command on alex * remove comment that tests changeset checker

* Fix readmes * update terminology

Add the variant source header for SFAPI calls.

* provide guidance on setting the header content type * language lint * change pkg name

* update readme * fix links Co-authored-by: Elise Yang <[email protected]>

* CI action for publishing the next version automatically * remove output to file

* CI action for publishing the next version automatically * remove output to file * Don't use the action to run these commands

* Change TS's module resolution to 'node' instead of nodenext * Include stories in TS checking now, and fix issues

* Copy CartProvider from hydrogen repo * Add worktop lib to use the cookies package for CartProvider * Modify CartProvider to fit hydrogen-ui * Add CartProvider story * add changeset * Cart provider updates (#14) * Change ts moduleresolution (#13) * Change TS's module resolution to 'node' instead of nodenext * Include stories in TS checking now, and fix issues * Starting work on simplifying the cart code in hui * Simply more cart-related files and remove a bunch of them * All CI checks are passing, and types are improved. * Better file names * Fix mock import filename * Remove any type * Improve release notes, update type names, fix typo * Correct alex config file and allow hooks Co-authored-by: Anthony Frehner <[email protected]>

frehner

You can pretty much ignore all the files/change inside of the packages/hydrogen-react folder, so that should help this PR be much smaller.

frehner · 2023-03-01T23:57:42Z

.github/workflows/ci.yml

@@ -48,7 +48,7 @@ jobs:
      - name: 📥 Install dependencies
        run: npm ci

-      - name: 🔬 Lint
+      - name: 🔬 Check Formatting


This is in the prettier job, so the name needed to be updated.

frehner · 2023-03-01T23:58:24Z

package.json

@@ -4,10 +4,11 @@
  "scripts": {
    "build": "turbo build --parallel",
    "build:pkg": "npm run build -- --filter=./packages/*",
+    "ci:checks": "turbo run lint test format:check typecheck",


new command that can be run from root, to run all ci checks locally

frehner · 2023-03-01T23:58:37Z

package.json

    "dev": "npm run dev:pkg -- --filter=./templates/demo-store",
    "dev:pkg": "cross-env LOCAL_DEV=true turbo dev --parallel --filter=./packages/*",
    "preview": "turbo build --filter=./packages/* && npm run preview -w demo-store",
-    "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx ./packages && npm run lint -w demo-store",
+    "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx ./packages & npm run lint -w demo-store",


run the scripts in parallel instead of serially

frehner · 2023-03-01T23:59:26Z

scripts/copy-hydrogen-react.mjs

@@ -4,19 +4,18 @@ import {fileURLToPath} from 'url';

 (async () => {
  const root = fileURLToPath(new URL('..', import.meta.url));
-  const hydrogenReact = 'node_modules/@shopify/hydrogen-react';
+  const hydrogenReact = 'packages/hydrogen-react';


small updates to this script to get it working with the local files

frehner · 2023-03-02T00:00:27Z

turbo.json

@@ -30,6 +30,9 @@
    "@shopify/create-hydrogen#build": {
      "dependsOn": ["@shopify/cli-hydrogen#build"]
    },
+    "@shopify/hydrogen#build": {
+      "dependsOn": ["@shopify/hydrogen-react#build"]
+    },


hydrogen requires hydrogen-react to build first

For the types?

For everything; hydrogen re-exports things from hydrogen-react, so that will only work if hydrogen-react has been built first.

cartogram · 2023-03-02T07:32:10Z

clear your node_modules at all levels,

npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules

cartogram

Local testing went smoothly 🎉

packages/hydrogen-react/package.json

lordofthecactus

Great work @frehner! I tophatted with ladle and everything seems to work alright.

.gitignore

README.md

lordofthecactus · 2023-03-02T10:45:48Z

README.md


 **Requirements:**

 - Node.js version 16.14.0 or higher
- `npm`, `yarn` or `pnpm`
+- `npm` version 8.3.1 (or your package manager of choice, such as `yarn` or `pnpm`)


Why do we need this specific version of npm? 🤔

This was an addition by @gfscott ; thoughts?

I would not add npm version, unless there was a requirement for a certain version

package.json

packages/hydrogen-react/CONTRIBUTING.md

This reverts commit 7ef939e.

cartogram · 2023-03-02T17:14:46Z

@frehner wondering if it still makes sense to be using vite? Just a question for future discussion, not a blocker for this PR.

frehner · 2023-03-02T18:42:11Z

@frehner wondering if it still makes sense to be using vite? Just a question for future discussion, not a blocker for this PR.

Yeah it's a good and valid question. I used Vite originally because that's what v1 was using, but now that v2 uses tsup it's worth looking into whether tsup supports all the things we need to do to bundle hydrogen-react, and if not, is Vite still the best tool or should we use something like Rollup or microbundle or whatever.

Co-authored-by: Daniel Rios <[email protected]>

frandiox

Thanks, LGTM!

frandiox · 2023-03-03T15:00:26Z

packages/hydrogen/package.json

@@ -14,7 +14,7 @@
  "scripts": {
    "build": "tsup --clean --config ../../tsup.config.ts && npm run copy-hydrogen-react",
    "copy-hydrogen-react": "node ../../scripts/copy-hydrogen-react.mjs",
-    "dev": "tsup --watch --config ../../tsup.config.ts",
+    "dev": "tsup --watch --config ../../tsup.config.ts --watch ../../node_modules/@shopify/hydrogen-react/dist/browser-prod/index.mjs",


maybe ../hydrogen-react/dist/browser-prod/index.mjs better? The node_modules one should be a symlink to this one.

Also, what's this for? Types? 🤔

This helped hydrogen reload when hydrogen-react is updated. It could be that it's not needed, I'll verify, but we had a hard time getting it to work correctly and this is what we ended up with.

Confirmed that this is necessary to get reloading working (at least with the way it is setup now).

I'll merge with this, but improvements as followups are very welcome!

frandiox · 2023-03-03T15:01:47Z

turbo.json

@@ -30,6 +30,9 @@
    "@shopify/create-hydrogen#build": {
      "dependsOn": ["@shopify/cli-hydrogen#build"]
    },
+    "@shopify/hydrogen#build": {
+      "dependsOn": ["@shopify/hydrogen-react#build"]
+    },


For the types?

This reverts commit d85ba01.

frehner and others added 30 commits September 27, 2022 10:32

Initial commit from Create Turborepo

758dce9

Save progress on migration

1c33524

Get storefront api schema and graphql generation working

494e620

Update deps, add changeset, fix types with new version

aad3091

Add turbo ci checks

da7fb02

Add github workflows

create the 2022-7 branch

70bbf6c

Change naming, update docs, move readme and contributing

de0d40b

Config alex and get checks passing

df400c2

Add cla github action

352fdc1

Update actions versions, and run checks before build

5e04cb5

Fix branch references to main

12613eb

add publish config

ccce9f9

Fix readmes (#2)

38ec2af

* Fix readmes * update terminology

Add CoC and update package description

9e3aab2

Fix docs

042b07a

Simplify the logic for external video urls (#3)

f11fe15

Remove unnecessary tsconfig items (#4)

2c5d34d

Add the variant source header for SFAPI calls.

Update README.md

5ec9c3d

Fix issues with formatting and filename

3e807d0

update dependencies (#5)

7e106f4

README updates for content type and pkg name (#6)

ffd44dd

* provide guidance on setting the header content type * language lint * change pkg name

Update README (#7)

a3bda06

* update readme * fix links Co-authored-by: Elise Yang <[email protected]>

CI action for publishing the next version automatically (#8)

a36e228

* CI action for publishing the next version automatically * remove output to file

Publish next2 (#9)

3c54a21

* CI action for publishing the next version automatically * remove output to file * Don't use the action to run these commands

Try manually doing the publish now (#10)

41caf55

Go into dir so script can find package.json (#11)

f4a0aa5

Try this configs

1e3ce50

Change ts moduleresolution (#13)

7fb60a6

* Change TS's module resolution to 'node' instead of nodenext * Include stories in TS checking now, and fix issues

github-actions bot deployed to preview March 1, 2023 23:57 View deployment

frehner commented Mar 2, 2023

View reviewed changes

cartogram reviewed Mar 2, 2023

View reviewed changes

packages/hydrogen-react/package.json Outdated Show resolved Hide resolved

lordofthecactus approved these changes Mar 2, 2023

View reviewed changes

update entry.server.tsx based on new remix template

7ef939e

github-actions bot deployed to preview March 2, 2023 14:31 View deployment

Revert "update entry.server.tsx based on new remix template"

6da7cf3

This reverts commit 7ef939e.

github-actions bot deployed to preview March 2, 2023 16:42 View deployment

Update README.md

ba12e34

Co-authored-by: Daniel Rios <[email protected]>

github-actions bot deployed to preview March 2, 2023 18:46 View deployment

PR feedback

e0a1dfc

github-actions bot deployed to preview March 2, 2023 18:49 View deployment

frehner requested a review from a team March 2, 2023 19:07

frandiox approved these changes Mar 3, 2023

View reviewed changes

remove npm version

8f71141

github-actions bot deployed to preview March 3, 2023 20:06 View deployment

Merge branch '2023-01' into integrate-hydrogen-react

6d7ca12

github-actions bot had a problem deploying to preview March 3, 2023 20:09 Failure

github-actions bot had a problem deploying to preview March 3, 2023 20:13 Failure

frehner added 2 commits March 3, 2023 13:25

triggering a revalidation maybe?

d85ba01

Revert "triggering a revalidation maybe?"

6c65426

This reverts commit d85ba01.

github-actions bot had a problem deploying to preview March 3, 2023 20:27 Failure

try with turbo platform workaround?

246c29d

github-actions bot deployed to preview March 3, 2023 20:31 View deployment

frehner merged commit a215152 into 2023-01 Mar 3, 2023

frehner deleted the integrate-hydrogen-react branch March 3, 2023 20:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate hydrogen-react into the hydrogen monorepo #605

Integrate hydrogen-react into the hydrogen monorepo #605

frehner commented Mar 1, 2023 •

edited

Loading

frehner left a comment

frehner Mar 1, 2023

frehner Mar 1, 2023

frehner Mar 1, 2023

frehner Mar 1, 2023

frehner Mar 2, 2023

frandiox Mar 3, 2023

frehner Mar 3, 2023

cartogram commented Mar 2, 2023

cartogram left a comment

lordofthecactus left a comment

lordofthecactus Mar 2, 2023

frehner Mar 2, 2023

lordofthecactus Mar 3, 2023

cartogram commented Mar 2, 2023

frehner commented Mar 2, 2023

frandiox left a comment

frandiox Mar 3, 2023

frehner Mar 3, 2023

frehner Mar 3, 2023

frandiox Mar 3, 2023

Integrate hydrogen-react into the hydrogen monorepo #605

Integrate hydrogen-react into the hydrogen monorepo #605

Conversation

frehner commented Mar 1, 2023 • edited Loading

WHY are these changes introduced?

HOW to test your changes?

Post-merge steps

Checklist

frehner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cartogram commented Mar 2, 2023

cartogram left a comment

Choose a reason for hiding this comment

lordofthecactus left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cartogram commented Mar 2, 2023

frehner commented Mar 2, 2023

frandiox left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frehner commented Mar 1, 2023 •

edited

Loading