Merge branch 'v1.x-2022-07' into jl-persisted-state

* v1.x-2022-07: (37 commits) Adds Shopify/hydrogen-cli for development server (#1089) Make `useUrl()` reactive for subscribing to navigation events (#1082) fix e2e tests streaming and suspense draft (#1033) [Hydrogen docs]: Restructure and simplify IA (#1079) Use new storefront API headers in queryShop API helper (#1075) Remove the dep of hydrogen-ui for now until we get it publishing (#1076) [ci] release v1.x-2022-07 (#1048) Introduce a synchronous-looking version of fetch for server and client (#983) improve the current type of ShopifyContextValue to be based on ShopifyConfig (#1072) Foundational work to split hydrogen-ui to its own package (#1060) Allow returning new requests from API routes (#1057) [Hydrogen docs]: Analytics (#962) Analytics (#890) Allow line breaks inside script tags (#1061) Fix encoding of CSS Modules to solve hydration errors (#1062) [Hydrogen docs]: Update guidance on troubleshooting third-party dependencies (#1055) Update Vite RSC Plugin (#1054) Fix link prefetch (#1059) Initial devTools component (#998) ...
Shopify · Apr 19, 2022 · b7113d8 · b7113d8
2 parents 241c006 + 3c18966
commit b7113d8
Show file tree

Hide file tree

Showing 410 changed files with 5,924 additions and 5,318 deletions.
diff --git a/.alexignore b/.alexignore
@@ -1,7 +1,5 @@
 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/usequery.md
 packages/hydrogen/CHANGELOG.md
diff --git a/.changeset/breezy-peaches-promise.md b/.changeset/breezy-peaches-promise.md
@@ -0,0 +1,19 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Update `useUrl()` to allow a developer to subscribe to a reactive version of the current router location.
+
+Example:
+
+```jsx
+import {useUrl} from '@shopify/hydrogen/client';
+
+function MyClientComponent() {
+  const url = useUrl();
+
+  useEffect(() => {
+    // Record navigation, analytics, etc
+  }, [url]);
+}
+```
diff --git a/.changeset/fair-guests-speak.md b/.changeset/fair-guests-speak.md
diff --git a/.changeset/kind-buses-exist.md b/.changeset/kind-buses-exist.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Properly set buyer IP and secret token for API Route queryShop helper
diff --git a/.changeset/tough-ties-deny.md b/.changeset/tough-ties-deny.md
@@ -0,0 +1,18 @@
+---
+'create-hydrogen-app': patch
+---
+
+Use Shopify CLI to start a local development server instead of `vite`.
+
+To update your existing apps, install the Shopify & Hydrogen CLIs:
+
+```bash
+yarn add -D @shopify/cli @shopify/cli-hydrogen
+```
+
+And update the `dev` script in your `package.json`:
+
+```diff
+-    "dev": "vite",
++    "dev": "shopify hydrogen dev",
+```
diff --git a/.eslintrc.js b/.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'],
       },
     ],

diff --git a/.github/workflows/discord_announcement.yml b/.github/workflows/discord_announcement.yml
@@ -0,0 +1,25 @@
+name: Discord announcement
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    if: startsWith(github.event.release.tag_name, '@shopify/hydrogen@')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Set Hydrogen version as env
+        run: |
+          TAG=${{ github.event.release.tag_name }}
+          echo "HYDROGEN_VERSION=${TAG//@shopify\/hydrogen@/}" >> $GITHUB_ENV
+
+      - name: Discord notification
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+          DISCORD_USERNAME: Shopify Devs
+          DISCORD_AVATAR: https://cdn.discordapp.com/avatars/905537246990590012/0f6a687b93ef3f81a036c817fb02ccbf.webp
+        uses: Ilshidur/action-discord@08d9328877d6954120eef2b07abbc79249bb6210
+        with:
+          args: "Hydrogen ${{ env.HYDROGEN_VERSION }} has been released.\n${{ github.event.release.html_url }}"
diff --git a/.../src/components/AddToCartButton/README.md → docs/components/addtocartbutton.md b/.../src/components/AddToCartButton/README.md → docs/components/addtocartbutton.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/AddToCartButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
 It must be a descendent of the `CartProvider` component.
 
@@ -36,13 +34,13 @@ export function MyComponent() {
 
 ## Props
 
-| Name                         | Type                                                                 | Description                                                                                                                                                   |
-| ---------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| attributes?                  | <code>Unknown<<wbr>UndocumentedType, UndocumentedType<wbr>>[]</code> | An array of cart line attributes that belong to the item being added to the cart.                                                                             |
-| variantId                    | <code>string</code>                                                  | The ID of the variant.                                                                                                                                        |
-| quantity?                    | <code>number</code>                                                  | The item quantity.                                                                                                                                            |
-| children                     | <code>ReactNode</code>                                               | Any ReactNode elements.                                                                                                                                       |
-| accessibleAddingToCartLabel? | <code>string</code>                                                  | The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. |
+| Name                         | Type                                        | Description                                                                                                                                                   |
+| ---------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attributes?                  | <code>Object<<wbr>key, value<wbr>>[]</code> | An array of cart line attributes that belong to the item being added to the cart.                                                                             |
+| variantId                    | <code>string</code>                         | The ID of the variant.                                                                                                                                        |
+| quantity?                    | <code>number</code>                         | The item quantity.                                                                                                                                            |
+| children                     | <code>ReactNode</code>                      | Any ReactNode elements.                                                                                                                                       |
+| accessibleAddingToCartLabel? | <code>string</code>                         | The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. |
 
 ## Component type
 

diff --git a/docs/components/buynowbutton.md b/docs/components/buynowbutton.md
@@ -0,0 +1,28 @@
+The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.
+
+## Example code
+
+```tsx
+import {BuyNowButton} from '@shopify/hydrogen';
+
+export function MyComponent() {
+  return (
+    <BuyNowButton quantity={1} variantId={'123'}>
+      Buy it now
+    </BuyNowButton>
+  );
+}
+```
+
+## Props
+
+| Name        | Type                                            | Description                                                                       |
+| ----------- | ----------------------------------------------- | --------------------------------------------------------------------------------- |
+| quantity?   | <code>number</code>                             | The item quantity. Defaults to 1.                                                 |
+| variantId   | <code>string</code>                             | The ID of the variant.                                                            |
+| attributes? | <code>Object<<wbr>string, string<wbr>>[]</code> | An array of cart line attributes that belong to the item being added to the cart. |
+| children    | <code>ReactNode<<wbr>Imported<wbr>></code>      | Any `ReactNode` elements.                                                         |
+
+## Component type
+
+The `BuyNowButton` component is a shared component, which means that it renders on both the server and the client. For more information about component types, refer to [React Server Components](/custom-storefronts/hydrogen/framework/react-server-components).
diff --git a/...c/components/CartCheckoutButton/README.md → docs/components/cartcheckoutbutton.md b/...c/components/CartCheckoutButton/README.md → docs/components/cartcheckoutbutton.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartCheckoutButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
 
 > Note:

diff --git a/...rc/components/CartEstimatedCost/README.md → docs/components/cartestimatedcost.md b/...rc/components/CartEstimatedCost/README.md → docs/components/cartestimatedcost.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartEstimatedCost and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartEstimatedCost` component renders a `Money` component with the
 cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
 If `children` is a function, then it will pass down the render props provided by the parent component.

diff --git a/...en/src/components/CartLineImage/README.md → docs/components/cartlineimage.md b/...en/src/components/CartLineImage/README.md → docs/components/cartlineimage.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineImage and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
 It must be a descendent of a `CartLineProvider` component.
 

diff --git a/...en/src/components/CartLinePrice/README.md → docs/components/cartlineprice.md b/...en/src/components/CartLinePrice/README.md → docs/components/cartlineprice.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLinePrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
 compare at price. It must be a descendent of a `CartLineProvider` component.
 

diff --git a/...components/CartLineProductTitle/README.md → docs/components/cartlineproducttitle.md b/...components/CartLineProductTitle/README.md → docs/components/cartlineproducttitle.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineProductTitle and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartLineProductTitle` component renders a `span` element (or the type of HTML element specified by
 the `as` prop) with the cart line merchandise's title. It must be a descendent of a `CartLineProvider` component.
 

diff --git a/...src/components/CartLineProvider/README.md → docs/components/cartlineprovider.md b/...src/components/CartLineProvider/README.md → docs/components/cartlineprovider.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.
 
 ## Example code

diff --git a/...src/components/CartLineQuantity/README.md → docs/components/cartlinequantity.md b/...src/components/CartLineQuantity/README.md → docs/components/cartlinequantity.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineQuantity and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartLineQuantity` component renders a `span` element (or the type of HTML element
 specified by the `as` prop) with the cart line's quantity. It must be a descendent of a `CartLineProvider` component.
 

diff --git a/...ts/CartLineQuantityAdjustButton/README.md → ...omponents/cartlinequantityadjustbutton.md b/...ts/CartLineQuantityAdjustButton/README.md → ...omponents/cartlinequantityadjustbutton.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineQuantityAdjustButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
 It must be a descendent of a `CartLineProvider` component.
 

diff --git a/...drogen/src/components/CartLines/README.md → docs/components/cartlines.md b/...drogen/src/components/CartLines/README.md → docs/components/cartlines.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLines and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartLines` component iterates over each cart line and renders its `children` within
 a `CartLineProvider` for each cart line.
 

diff --git a/...gen/src/components/CartProvider/README.md → docs/components/cartprovider.md b/...gen/src/components/CartProvider/README.md → docs/components/cartprovider.md
@@ -1,4 +1,10 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
+The `CartProvider` component creates a context for using a cart. It creates a cart object and callbacks
+that can be accessed by any descendent component using the `useCart` hook and related hooks. It also carries out
+any callback props when a relevant action is performed. For example, if a `onLineAdd` callback is provided,
+then the callback will be called when a new line item is successfully added to the cart.
+
+The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
+You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
 
 ## Example code
 
@@ -81,8 +87,10 @@ The `data` prop is an object with fields that correspond to the Storefront API's
               height
             }
             product {
+              id
               handle
               title
+              vendor
             }
             selectedOptions {
               name

diff --git a/...rc/components/CartShopPayButton/README.md → docs/components/cartshoppaybutton.md b/...rc/components/CartShopPayButton/README.md → docs/components/cartshoppaybutton.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartShopPayButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
 It must be a descendent of a `CartProvider` component.
 

diff --git a/...en/src/components/ExternalVideo/README.md → docs/components/externalvideo.md b/...en/src/components/ExternalVideo/README.md → docs/components/externalvideo.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ExternalVideo and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `ExternalVideo` component renders an embedded video for the Storefront
 API's [ExternalVideo object](/api/storefront/reference/products/externalvideo).
 

diff --git a/...rogen/src/foundation/FileRoutes/README.md → docs/components/fileroutes.md b/...rogen/src/foundation/FileRoutes/README.md → docs/components/fileroutes.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Image and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple instances of this component to source file routes from multiple locations.
 
 ## Example code

diff --git a/...s/hydrogen/src/components/Image/README.md → docs/components/image.md b/...s/hydrogen/src/components/Image/README.md → docs/components/image.md
@@ -1,5 +1,3 @@
-<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Image and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->
-
 The `Image` component renders an image for the Storefront API's
 [Image object](/api/storefront/reference/common-objects/image).
 
@@ -55,6 +53,7 @@ export default function ExternalImageWithLoader() {
       src="fancyImage.png"
       width={500}
       height={500}
+      loader={imageLoader}
       loaderOptions={{scale: 2}}
     />
   );