@shopify/hydrogen@2023.7.7

Patch Changes

• Supress the hydration warning in the new <Script> component when nonce values differ between the server and client, which is expected. (#1312) by @frandiox

• (Unstable) server-side network request debug virtual route (#1284) by @wizardlyhel

  1. Update your server.ts so that it also passes in the waitUntil and env.

       const handleRequest = createRequestHandler({
         build: remixBuild,
         mode: process.env.NODE_ENV,
     +    getLoadContext: () => ({session, storefront, env, waitUntil}),
       });

     If you are using typescript, make sure to update remix.env.d.ts

       declare module '@shopify/remix-oxygen' {
         export interface AppLoadContext {
     +     env: Env;
           cart: HydrogenCart;
           storefront: Storefront;
           session: HydrogenSession;
     +      waitUntil: ExecutionContext['waitUntil'];
         }
       }

  2. Run npm run dev and you should see terminal log information about a new virtual route that you can view server-side network requests at http://localhost:3000/debug-network

  3. Open http://localhost:3000/debug-network in a tab and your app another tab. When you navigate around your app, you should see server network requests being logged in the debug-network tab

@shopify/hydrogen@2023.7.6

Patch Changes

• Updated dependencies [345f06a2]:
  • @shopify/hydrogen-react@2023.7.4

@shopify/hydrogen-react@2023.7.4

Patch Changes

• Fix incorrect creation of cookie token that only happens on specific dates (#1294) by @wizardlyhel

@shopify/cli-hydrogen@5.2.2

Patch Changes

• Fix error stack traces in development mode. (#1297) by @frandiox

• Updated dependencies [345f06a2]:

  • @shopify/hydrogen-react@2023.7.4

demo-store@2.1.1

Patch Changes

• Hydrogen is now compatible with TypeScript v5. (#1240) by @frandiox

  If you have typescript as a dev dependency in your app, it is recommended to change its version as follows:

    "devDependencies": {
      ...
  -   "typescript": "^4.9.5",
  +   "typescript": "^5.2.2",
    },

  After installing the new version of TypeScript, you may need to update the version used in your IDE. For example, in VSCode, you can do this by clicking on the { } icon in the bottom-right toolbar next to the language mode (generally, { } TypeScript JSX when editing a .tsx file).

• Updated dependencies [3491fd5c, 06516ee9, d67ce6aa, 1b7e0016, ee6e2920, 17892a72, 1a7762bc, 1f8acd7b]:

  • @shopify/cli-hydrogen@5.2.1
  • @Shopify/hydrogen@2023.7.4

@shopify/hydrogen@2023.7.5

Patch Changes

• Fix the Pagination component to reset internal state when the URL changes (not including Pagination params). (#1291) by @blittle

  We also now validate the connection prop to include a pageInfo object with the following properties:

  1. hasNextPage
  2. hasPreviousPage
  3. endCursor
  4. startCursor

  Previously our templates had a bug where startCursor was not included. Upgrading means the app will error
  until you update your query to include it:

   query CollectionDetails {
     collection(handle: $handle) {
       ...
       pageInfo {
         hasPreviousPage
         hasNextPage
         hasNextPage
         endCursor
  +      startCursor
       }
     }
   }
  

@shopify/hydrogen@2023.7.4

Patch Changes

• Fix hydration errors and stale data within the Pagination component (#1283) by @blittle

• Add custom product paths to the VariantSelector component: (#1271) by @blittle

  <VariantSelector handle="snowboard" productPath="shop" options={options}>
    {/* ... */}
  </VariantSelector>

• Add functionality for creating a Content Security Policy. See the guide on Content Security Policies for more details. (#1235) by @blittle

• Updated dependencies [06516ee9, 423acee2]:

  • @shopify/hydrogen-react@2023.7.3

@shopify/hydrogen-react@2023.7.3

Patch Changes

• Hydrogen is now compatible with TypeScript v5. (#1240) by @frandiox

  If you have typescript as a dev dependency in your app, it is recommended to change its version as follows:

    "devDependencies": {
      ...
  -   "typescript": "^4.9.5",
  +   "typescript": "^5.2.2",
    },

  After installing the new version of TypeScript, you may need to update the version used in your IDE. For example, in VSCode, you can do this by clicking on the { } icon in the bottom-right toolbar next to the language mode (generally, { } TypeScript JSX when editing a .tsx file).

• Fix passing ref to the <Image> component. (#1268) by @frandiox

@shopify/create-hydrogen@4.2.3

Patch Changes

• Add functionality for creating a Content Security Policy. See the guide on Content Security Policies for more details. (#1235) by @blittle

• Updated dependencies [3491fd5c, 06516ee9, d67ce6aa, ee6e2920, 1a7762bc, 1f8acd7b]:

  • @shopify/cli-hydrogen@5.2.1

@shopify/cli-hydrogen@5.2.1

Patch Changes

• Fix the default page shown when the project has no routes. (#1266) by @frandiox

• Hydrogen is now compatible with TypeScript v5. (#1240) by @frandiox

  If you have typescript as a dev dependency in your app, it is recommended to change its version as follows:

    "devDependencies": {
      ...
  -   "typescript": "^4.9.5",
  +   "typescript": "^5.2.2",
    },

  After installing the new version of TypeScript, you may need to update the version used in your IDE. For example, in VSCode, you can do this by clicking on the { } icon in the bottom-right toolbar next to the language mode (generally, { } TypeScript JSX when editing a .tsx file).

• Fix development server port in some situations where it was set to a random number instead of the default 3000 or the --port flag value. (#1267) by @frandiox

• Fix transpiling TS to JS when scaffolding routes. (#1273) by @frandiox

• Catch more errors during init while connecting to Shopify (#1281) by @graygilmore

• Add functionality for creating a Content Security Policy. See the guide on Content Security Policies for more details. (#1235) by @blittle

• Updated dependencies [06516ee9, 423acee2]:

  • @shopify/hydrogen-react@2023.7.3