Merge branch 'v1.x-2022-07' into bl-countries-session

* v1.x-2022-07: (95 commits)
  [ci] release v1.x-2022-07 (#1170)
  Try ignoring hello-world to see if it will get bumped
  Don't consider examples part of the workspace (#1202)
  Fix headers on oxygen (#1201)
  Add bot user agents for Seoradar and Adresults, resolves #1199 (#1200)
  Fix changeset
  updates to docker deploy documentation to resolve run issues (#1196)
  Upgrade body-parser (#1162)
  Fix path for deployments
  Adds ability to add more than one cookie per response (#1161)
  Move Demo Store to templates folder (#1132)
  Avoid additional div element (#1191)
  Whoops this should only be patch
  Adds preconnect <link> for CDN (#1160)
  Bump ejs from 3.1.6 to 3.1.7 (#1147)
  Fix scroll restoration when server props are changed (#1152)
  Typo
  Fixes #1165 by making a missing alt tag a console warning (#1167)
  Remove concurrency directive for Oxygen deployments
  Fix hydrogen-ui dev and build issues (#1169)
  ...

.alexignore

@@ -1,7 +1,4 @@
-docs/code_of_conduct.md
-packages/hydrogen/src/docs/hooks.md
-packages/hydrogen/src/docs/components.md
-packages/hydrogen/src/docs/hydrogen-reference.md
-packages/hydrogen/src/framework/docs/css-support.md
-packages/hydrogen/src/foundation/useQuery/README.md
+docs/framework/css-support.md
+docs/framework/work-with-rsc.md
+docs/hooks/global/usequery.md
 packages/hydrogen/CHANGELOG.md

.changeset/config.json

@@ -2,14 +2,16 @@
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": ["@changesets/changelog-github", {"repo": "shopify/hydrogen"}],
   "commit": false,
-  "fixed": [],
-  "linked": [["@shopify/hydrogen", "create-hydrogen-app"]],
+  "fixed": [["@shopify/hydrogen", "create-hydrogen-app"]],
+  "linked": [],
   "access": "public",
   "baseBranch": "v1.x-2022-07",
   "updateInternalDependencies": "patch",
   "ignore": [
     "template-hydrogen-default",
+    "template-hydrogen-hello-world",
     "test-server-components",
-    "hydrogen-playground"
+    "hydrogen-playground",
+    "@shopify/hydrogen-ui"
   ]
 }

.eslintrc.js

@@ -14,7 +14,12 @@ module.exports = {
     'node/no-missing-import': [
       'error',
       {
-        allowModules: ['types', 'testUtils', '@shopify/hydrogen'],
+        allowModules: [
+          'types',
+          'testUtils',
+          '@shopify/hydrogen',
+          '@shopify/hydrogen-ui',
+        ],
         tryExtensions: ['.ts', '.js', '.jsx', '.tsx', '.d.ts'],
       },
     ],

docs/contributing.md → .github/contributing.md

@@ -1,5 +1,9 @@
 # Contributing to Hydrogen
 
+## Releasing
+
+See [Releasing](releasing.md).
+
 **Requirements:**
 
 - Node.js version 16.5.0 or higher
@@ -13,7 +17,7 @@ yarn dev
 
 Visit the dev environment at http://localhost:3000.
 
-To make changes to the Demo Store template, edit the files in `examples/template-hydrogen-default`.
+To make changes to the Demo Store template, edit the files in `templates/template-hydrogen-default`.
 
 To modify Hydrogen framework, components, and hooks, edit the files in `packages/hydrogen`.
 
@@ -23,7 +27,8 @@ You can [inspect Vite plugin](https://github.com/antfu/vite-plugin-inspect) tran
 
 Hydrogen is a Yarn v1 monorepo. It consists of several key packages:
 
-- `examples/template-hydrogen-default`: The Demo Store template
+- `examples`: Illustrative proofs of concept demonstrating integrations and special use cases for Hydrogen
+- `templates`: Full working implementations of a Hydrogen storefront (including the Demo Store template)
 - `packages/hydrogen`: The Hydrogen React framework & SDK
 - `packages/create-hydrogen-app`: The CLI used to scaffold new projects
 - `packages/cli`: The CLI used to perform tasks in a Hydrogen app
@@ -131,7 +136,7 @@ Next, choose an option below.
 
 ### Option 1: `localdev` package
 
-This option creates a new Hydrogen app similar to `examples/template-hydrogen-default` directly in the monorepo under `packages/localdev`. This directory is ignored in git, so your changes will not be tracked.
+This option creates a new Hydrogen app similar to `templates/template-hydrogen-default` directly in the monorepo under `packages/localdev`. This directory is ignored in git, so your changes will not be tracked.
 
 ```terminal
 create-hydrogen packages/localdev
@@ -206,36 +211,6 @@ Each mini-project under `packages/playground` contains a tests folder. You are w
 
 You can run a single E2E test by passing a keyword, which is matched using regex, e.g. `yarn test-e2e server` will run the `server-components` test.
 
-## Releasing new versions
-
-Hydrogen versions are determined exclusively by [changesets](https://github.com/changesets/changesets). When new changesets are merged into a release branch like `v1.x-2022-07`, a new PR will be automatically created containing the proposed version.
-
-This PR can stay open and will be continously updated by the changesets bot until you are ready to merge.
-
-When you are ready to release a new version of Hydrogen, merge the PR created by the changesets bot. This will convert all changesets into appropriate `CHANGELOG` files, add Git tags, and create GitHub releases for each package contained in the release.
-
-Next, visit the Shipit page for Hydrogen containing the version you intend to release, e.g. `Hydrogen v1.x-2022-07`. Click **Deploy** on the merge commit that was recently created.
-
-_Most recent stable version only_: After Shipit is finished publishing to NPM, manually [run the Stackblitz publish workflow](https://github.com/Shopify/hydrogen/actions/workflows/publish_stackblitz.yml) in GitHub against the latest stable branch. This is required, because GitHub will not allow a bot to kick off another GitHub Action, and the Changesets bot is the user who created the release.
-
-## Releasing unstable versions
-
-Hydrogen maintains an `unstable` branch as a home for features and breaking changes related to the `unstable` version of the Storefront API.
-
-To release an unstable version:
-
-1. Merge your changes into the `unstable` branch.
-1. Visit the Shipit page for `Hydrogen Unstable` and click **Deploy** on the commit you want to release
-
-A new snapshot release will be created with your changes and tagged on NPM with `unstable`. You can install the unstable version of Hydrogen using this tag:
-
-```bash
-yarn add @shopify/hydrogen@unstable
-
-# or start a new project:
-npx create-hydrogen-app@unstable
-```
-
 ## Testing changes in another project
 
 From the root of the repo, run:

docs/migration_guide.md → .github/migration_guide.md

@@ -64,7 +64,7 @@ In version 0.10, we removed React Router on the server. With this release, we ha
 
 1. [`<Link>` component](https://shopify.dev/custom-storefronts/hydrogen/framework/routes#link-component)
 2. [`useNavigate` hook](https://shopify.dev/custom-storefronts/hydrogen/framework/routes#usenavigate-hook)
-3. [`useUrl` hook](/api/hydrogen/hooks/global/useurl)
+3. [`useUrl` hook](https://shopify.dev/api/hydrogen/hooks/global/useurl)
 
 In a later release, we'll continue to enhance the routing capabilities in Hydrogen. Read more in the [Custom Routes RFC](https://github.com/Shopify/hydrogen/discussions/569).
 

.github/releasing.md

@@ -0,0 +1,37 @@
+# Releasing
+
+Hydrogen versions are determined exclusively by [changesets](https://github.com/changesets/changesets). When new changesets are merged into a release branch like `v1.x-2022-07`, a new PR will be automatically created containing the proposed version.
+
+This PR can stay open and will be continously updated by the changesets bot until you are ready to release a new version.
+
+## Releasing new versions
+
+When you are ready to release a new version of Hydrogen, follow these steps:
+
+1. Merge the PR created by the changesets bot. This will convert all changesets into appropriate `CHANGELOG` files, add Git tags, and create GitHub releases for each package contained in the release.
+1. Next, visit the Shipit page for Hydrogen containing the version you intend to release, e.g. `Hydrogen v1.x-2022-07`. Click **Deploy** on the merge commit that was recently created.
+1. _Most recent stable version only_: After Shipit is finished publishing to NPM, manually [run the Stackblitz publish workflow](https://github.com/Shopify/hydrogen/actions/workflows/publish_stackblitz.yml) in GitHub against the latest stable branch. This is required, because GitHub will not allow a bot to kick off another GitHub Action, and the Changesets bot is the user who created the release.
+
+## Releasing unstable versions
+
+Hydrogen maintains an `unstable` branch as a home for features and breaking changes related to the `unstable` version of the Storefront API.
+
+To release an unstable version:
+
+1. Merge your changes into the `unstable` branch.
+1. Visit the Shipit page for `Hydrogen Unstable` and click **Deploy** on the commit you want to release
+
+A new snapshot release will be created with your changes and tagged on NPM with `unstable`. You can install the unstable version of Hydrogen using this tag:
+
+```bash
+yarn add @shopify/hydrogen@unstable
+
+# or start a new project:
+npx create-hydrogen-app@unstable
+```
+
+## Common problems
+
+**After merging the auto-generated changeset PR, my GitHub Action encountered an Error with the message `No commits between X and changeset-release/Y`**
+
+This happens when changesets does not properly clear out all the changesets in the `.changesets` directory of the hydrogen repo. The soluction is to create a new PR with all of the `.changesets` removed. The GitHub Action will re-run when you merge the second PR.

.github/workflows/deployments.yml

@@ -33,13 +33,13 @@ jobs:
         run: yarn workspace @shopify/hydrogen build
 
       - name: Make updates for Cloudflare Workers runtime
-        working-directory: ./examples/template-hydrogen-default
+        working-directory: ./templates/template-hydrogen-default
         run: |
           cp ../../.github/deployments/cloudflare/* .
           yarn add @cloudflare/kv-asset-handler
 
       - name: Build for workers
-        working-directory: ./examples/template-hydrogen-default
+        working-directory: ./templates/template-hydrogen-default
         run: |
           yarn build:client
           yarn cross-env WORKER=true vite build --outDir dist/worker --ssr worker
@@ -50,7 +50,7 @@ jobs:
           CF_ACCOUNT_ID: ${{ secrets.DEPLOYMENT_CF_ACCOUNT_ID }}
         with:
           apiToken: ${{ secrets.DEPLOYMENT_CF_API_TOKEN }}
-          workingDirectory: ./examples/template-hydrogen-default
+          workingDirectory: ./templates/template-hydrogen-default
 
       - name: Run health check
         run: |

.github/workflows/oxygen-deployment.yml

@@ -0,0 +1,74 @@
+# This Action is responsible for deploying the default Hydrogen template to Oxygen.
+# It is split out from deployments.yml because Oxygen checks for the presence of this specific workflow in the repo.
+# TODO: Merge the workflow if/when Oxygen is more lenient.
+name: Oxygen Deployment
+
+on:
+  workflow_dispatch:
+  push:
+    branches: ['v1.x-2022-07']
+
+jobs:
+  deploy_oxygen:
+    runs-on: ubuntu-latest
+    if: ${{ github.repository_owner == 'shopify' }}
+    name: Deploy to Oxygen
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'yarn'
+
+      - name: Install the packages
+        run: yarn install --frozen-lockfile --ignore-engines
+
+      - name: Build Hydrogen
+        run: yarn workspace @shopify/hydrogen build
+
+      - name: Generate deployment ID
+        id: deployment-id
+        working-directory: ./templates/template-hydrogen-default
+        run: |
+          yarn add ulid
+          echo "::set-output name=ID::$(LC_ALL=C </dev/urandom tr -dc "0123456789abcdefghjkmnpqrstvwxyz" | head -c 9)"
+
+      - name: Set asset base URL
+        shell: bash
+        run: echo "::set-output name=URL::https://cdn.shopify.com/oxygen/55145660472/9928760/${{ steps.deployment-id.outputs.ID }}/"
+        id: base-url
+
+      - name: Production build
+        id: storefront-build
+        working-directory: ./templates/template-hydrogen-default
+        run: |
+          HYDROGEN_ASSET_BASE_URL=${{ steps.base-url.outputs.URL }} yarn build:client
+          HYDROGEN_ASSET_BASE_URL=${{ steps.base-url.outputs.URL }} yarn build:worker
+
+      - name: Publish to Oxygen
+        id: deploy
+        uses: shopify/oxygenctl-action@v2
+        with:
+          path: ./templates/template-hydrogen-default
+          deployment_id: ${{ steps.deployment-id.outputs.ID }}
+          oxygen_deployment_token: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN }}
+          # Hardcode message and timestamp if manual dispatch
+          commit_message: ${{ github.event.head_commit.message || 'Manual deployment' }}
+          commit_timestamp: ${{ github.event.head_commit.timestamp || github.event.repository.updated_at }}
+
+      - name: Create GitHub Deployment
+        uses: shopify/github-deployment-action@v1
+        if: always()
+        with:
+          token: ${{ github.token }}
+          environment: 'preview'
+          preview_url: ${{ steps.deploy.outputs.url }}
+          description: ${{ github.event.head_commit.message }}
+
+      # Skip this for now. It takes Oxygen a few seconds to make the deployment live, and this 404s.
+      # - name: Run health check
+      #   run: |
+      #     yarn ts-node scripts/health-check.ts ${{ steps.deploy.outputs.url }}

.github/workflows/publish_stackblitz.yml

@@ -16,7 +16,7 @@ jobs:
           ref: 'v1.x-2022-07'
       - name: Rename gitignore
         run: |
-          mv examples/template-hydrogen-default/_gitignore examples/template-hydrogen-default/.gitignore
+          mv templates/template-hydrogen-default/_gitignore templates/template-hydrogen-default/.gitignore
       - name: Push to stackblitz branch
         run: |
           git show-ref

.github/workflows/tests_and_lint.yml

@@ -50,7 +50,11 @@ jobs:
 
       - name: Lint the template code
         run: yarn lint
-        working-directory: ./examples/template-hydrogen-default
+        working-directory: ./templates/template-hydrogen-default
+
+      - name: Type check hydrogen-ui
+        run: yarn typecheck
+        working-directory: ./packages/hydrogen-ui
 
       - name: Run the unit tests
         run: yarn test
@@ -62,4 +66,4 @@ jobs:
 
       - name: Run the template code tests
         run: yarn test:ci
-        working-directory: ./examples/template-hydrogen-default
+        working-directory: ./templates/template-hydrogen-default

.gitignore

@@ -112,6 +112,7 @@ dist
 # VSCode launch configs
 .vscode/
 !examples/*/.vscode/
+!templates/*/.vscode/
 
 # yarn v2
 .yarn/cache

.prettierignore

@@ -2,3 +2,6 @@
 **/dist/**
 packages/hydrogen/graphql.schema.json
 **/vendor
+packages/hydrogen-ui/storefront.schema.json
+packages/hydrogen-ui/coverage/**
+docs/

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <a href="https://hydrogen.shopify.dev"><img src="./docs/images/HydrogenLogo.png" alt="Hydrogen Logo"/></a>
+    <a href="https://hydrogen.shopify.dev"><img src="./.github/images/hydrogen-logo.svg" alt="Hydrogen Logo"/></a>
 </p>
 <p align="center">
     <a href="https://www.npmjs.com/package/@shopify/hydrogen"><img src="https://img.shields.io/npm/v/@shopify/hydrogen.svg?sanitize=true" alt="Version"></a>
@@ -55,11 +55,11 @@ npm run dev
 
 2. Visit the development environment running at http://localhost:3000.
 
-Learn more about [getting started with Hydrogen](https://shopify.dev/custom-storefronts/hydrogen/getting-started).
+Learn more about [getting started with Hydrogen](https://shopify.dev/custom-storefronts/hydrogen/templates).
 
 ## Contributing to Hydrogen
 
-[Read our contributing guide](./docs/contributing.md)
+[Read our contributing guide](./.github/contributing.md)
 
 ## Other handy links
 

docs/README.md

@@ -0,0 +1,3 @@
+## Welcome to the Hydrogen docs!
+
+Feel free to browse through the docs here or at: https://shopify.dev/api/hydrogen/