[ci] release v1.x-2022-07 #864

github-actions · 2022-03-08T21:04:40Z

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to v1.x-2022-07, this PR will be updated.

Releases

[email protected]

Minor Changes

#912 de0e0d6a Thanks @blittle! - Change the country selector to lazy load available countries. The motivation to do so is that a lot of countries come with the starter template. The problem is 1) the graphql query to fetch them all is relatively slow and 2) all of them get serialized to the browser in each RSC response.

This change removes availableCountries from the LocalizationProvider. As a result, the useAvailableCountries hook is also gone. Instead, the available countries are loaded on demand from an API route.

Migratation steps:

Create an API route to retrieve available countries:

export async function api(request, {queryShop}) {
  const {
    data: {
      localization: {availableCountries},
    },
  } = await queryShop({
    query: QUERY,
  });

  return availableCountries.sort((a, b) => a.name.localeCompare(b.name));
}

const QUERY = `
  query Localization {
    localization {
      availableCountries {
        isoCode
        name
        currency {
          isoCode
        }
      }
    }
  }
`;

Then within your client code, query the API route with a useEffect hook:

const [countries, setCountries] = useState([]);

useEffect(() => {
  fetch('/api/countries')
    .then((resp) => resp.json())
    .then((c) => setCountries(c))
    .catch((e) => setError(e))
    .finally(() => setLoading(false));
}, []);

See an example on how this could be done inside the Hydrogen Example Template country selector

#698 6f30b9a1 Thanks @jplhomer! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
```
yarn test
```
Or in continuous-integration (CI) environments:
```
yarn test:ci
```

#846 58c823b5 Thanks @blittle! - ## New <Route> Component

The <Route> component is available for routes not defined by the file system. The <Route> component must be used within the <Router> component.

// app.server.jsx

function App({routes, ...serverProps}) {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <ShopifyProvider shopifyConfig={shopifyConfig}>
        <CartProvider>
          <DefaultSeo />
          <Router serverProps={serverProps}>
            <Route path="/custom" page={<CustomRoute />} />
          </Router>
        </CartProvider>
      </ShopifyProvider>
    </Suspense>
  );
}

function CustomRoute() {
  return <h1>Custom route</h1>;
}

<Route> accepts two props:

Property	Type	Required	Description
`path`	`string`	Yes	The URL path where the route exists. The path can contain variables. For example, `/products/:handle`.
`page`	`A rendered Server Component reference`	Yes	A reference to a React Server Component that's rendered when the route is active.

Changes to `<Router>`

You can have multiple <Route> and <FileRoutes> components in your app. Hydrogen will only render one route for each request — whichever it finds first. This means the <Router> component no longer takes fallback as a prop. It also doesn't need serverProps. Instead, to render a 404 "Not Found" page, add <Route path="*" page={<NotFound />} /> to your app. Make sure it's the last <Route> defined inside your app:

function App({routes, ...serverProps}) {
  return (
    <ShopifyProvider shopifyConfig={shopifyConfig}>
      <CartProvider>
        <DefaultSeo />
-       <Router
-         fallback={<NotFound response={serverProps.response} />}
-         serverProps={serverProps}
-       >
+       <Router>
          <FileRoutes routes={routes} />
+         <Route path="*" page={<NotFound />} />
        </Router>
      </CartProvider>
    </ShopifyProvider>
  );
}

Changes to `<FileRoutes>`

The <FileRoutes> component now accepts two additional optional props:

Property	Type	Required	Default Value	Description
`basePath`	`string`	No	`"/"`	A path that's prepended to all file routes.
`dirPrefix`	`string`	No	`"./routes"`	The portion of the file route path that shouldn't be a part of the URL.

You need to modify dirPrefix if you want to import routes from a location other than src/routes.

You can modify basePath if you want to prefix all file routes. For example, you can prefix all file routes with a locale:

<Router>
  <FileRoutes basePath={`/${locale}`} routes={routes} />
  <Route path="*" page={<NotFound />} />
</Router>

New `useRouteParams()` hook

You can use the useRouteParams() hook to retrieve the parameters of an active route. The hook is available in both server and client components:

// products/[handle].server.jsx

import {useRouteParams} from '@shopify/hydrogen';

export default function Product() {
  const {handle} = useRouteParams();
  // ...
}

// ProductDetails.client.jsx
import {useRouteParams} from '@shopify/hydrogen/client';

export default function ProductDetails() {
  const {handle} = useRouteParams();
  // ...
}

#842 626e58ee Thanks @wizardlyhel! - Removed the Rawhtml component.

Upgrade your project by replacing references to the RawHtml component to follow
React's dangerouslySetInnerHTML:

Change all RawHtml component
```
<RawHtml string="<p>Hello world</p>" />
```
to jsx equivalent
```
<div dangerouslySetInnerHTML={{__html: '<p>Hello world</p>'}} />
```

Patch Changes

#906 4db9534c Thanks @blittle! - Optimize the GraphQL query for the home page
#965 cdad13ed Thanks @blittle! - Fix server redirects to work properly with RSC responses. For example, the redirect component within the starter template needs to change:
```
export default function Redirect({response}) {
-  response.redirect('/products/snowboard');
-  return <div>This page is redirected</div>;
+  return response.redirect('/products/snowboard');
}
```
This server component is rendered two ways:
1. When an app directly loads the redirect route, the server will render a 300 redirect with the proper location header.
2. The app is already loaded, but the user navigates to the redirected route. We cannot 300 respond in this scenario, instead response.redirect(...) returns a component which will redirect on the client.
#758 0bee3af0 Thanks @frandiox! - Upgrade to React experimental version 0.0.0-experimental-2bf7c02f0-20220314.

To upgrade your Hydrogen app, change the pinned version of react and react-dom in your package.json file to this version, or run:
```
yarn add @shopify/hydrogen [email protected] [email protected]
```
#917 be888259 Thanks @jplhomer! - Add accessible button label for mobile navigation
#918 5699e0e9 Thanks @michenly! - Optimize the GraphQL query for products page
#926 0ca1a039 Thanks @frandiox! - Added a new default worker entry point that uses module syntax in @shopify/hydrogen/platforms/worker.
#903 dd33f7ef Thanks @blittle! - Optimize the GraphQL query for the NotFound.server.jsx page
#897 c01044e6 Thanks @blittle! - Add new custom headers for storefront API calls. See Issue #660
#872 d90bb3be Thanks @jplhomer! - Fix usage of NotFound when it is not possible to modify the response object

[email protected]

Minor Changes

#877 a362a5dd Thanks @cartogram! - Breaking Change: New rules client-component-banned-hooks and server-component-banned-hooks added as generic rules to ban any non-supported hooks in each context. server-component-banned-hooks combines and replaces the no-state-in-server-components and no-effects-in-server-components rules. client-component-banned-hooks will flag usage of useQuery and useShopQuery in client components.

@shopify/[email protected]

Minor Changes

#922 b5eaddc1 Thanks @frehner! - Fragments and their related types have been removed:
- ExternalVideoFragment and ExternalVideoFragmentFragment
- Model3DFragment and Model3DFragmentFragment
- ImageFragment and ImageFragmentFragment
- MoneyFragment and MoneyFragmentFragment
- UnitPriceFragment and UnitPriceFragmentFragment
- VideoFragment and VideoFragmentFragment
- MetafieldFragment and MetafieldFragmentFragment
- Seo fragments and types:
  - DefaultPageSeoFragment and DefaultPageSeoFragmentFragment
  - HomeSeoFragment and HomeSeoFragmentFragment
  - ProductSeoFragment and ProductSeoFragmentFragment
  - CollectionSeoFragment and CollectionSeoFragmentFragment
  - PageSeoFragment and PageSeoFragmentFragment
- MediaFile fragments and types:
  - MediaFileFragment and MediaFileFragmentFragment
  - MediaFileFragment_ExternalVideo_Fragment
  - MediaFileFragment_MediaImage_Fragment
  - MediaFileFragment_Model3d_Fragment
  - MediaFileFragment_Video_Fragment
- ProductFragment and ProductFragmentFragment
These fragments have been removed to reduce the chances of over-fetching (in other words, querying for fields you don't use) in your GraphQL queries. Please refer to the Storefront API documentation for information and guides.

#912 de0e0d6a Thanks @blittle! - Change the country selector to lazy load available countries. The motivation to do so is that a lot of countries come with the starter template. The problem is 1) the graphql query to fetch them all is relatively slow and 2) all of them get serialized to the browser in each RSC response.

This change removes availableCountries from the LocalizationProvider. As a result, the useAvailableCountries hook is also gone. Instead, the available countries are loaded on demand from an API route.

Migratation steps:

Create an API route to retrieve available countries:

export async function api(request, {queryShop}) {
  const {
    data: {
      localization: {availableCountries},
    },
  } = await queryShop({
    query: QUERY,
  });

  return availableCountries.sort((a, b) => a.name.localeCompare(b.name));
}

const QUERY = `
  query Localization {
    localization {
      availableCountries {
        isoCode
        name
        currency {
          isoCode
        }
      }
    }
  }
`;

Then within your client code, query the API route with a useEffect hook:

const [countries, setCountries] = useState([]);

useEffect(() => {
  fetch('/api/countries')
    .then((resp) => resp.json())
    .then((c) => setCountries(c))
    .catch((e) => setError(e))
    .finally(() => setLoading(false));
}, []);

See an example on how this could be done inside the Hydrogen Example Template country selector

#698 6f30b9a1 Thanks @jplhomer! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
```
yarn test
```
Or in continuous-integration (CI) environments:
```
yarn test:ci
```
#932 507c5cbf Thanks @jplhomer! - Adds CSS Modules support. Hydrogen now includes a Vite plugin that collects styles for each CSS Module and exports them to a StyleTag component. To use CSS Modules in your Hydrogen app, you must render the style tag in the component along with your styles:
```
import * as styles from './styles.module.css';

export default MyComponent() {
  return (
    <div className={styles.wrapper}>
      // A style is rendered inline
      <styles.StyleTag />
      <p>Hello</p>
    </div>
  );
}
```
Explore an example implementation of CSS Modules in GitHub.

#846 58c823b5 Thanks @blittle! - ## New <Route> Component

The <Route> component is available for routes not defined by the file system. The <Route> component must be used within the <Router> component.

// app.server.jsx

function App({routes, ...serverProps}) {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <ShopifyProvider shopifyConfig={shopifyConfig}>
        <CartProvider>
          <DefaultSeo />
          <Router serverProps={serverProps}>
            <Route path="/custom" page={<CustomRoute />} />
          </Router>
        </CartProvider>
      </ShopifyProvider>
    </Suspense>
  );
}

function CustomRoute() {
  return <h1>Custom route</h1>;
}

<Route> accepts two props:

Property	Type	Required	Description
`path`	`string`	Yes	The URL path where the route exists. The path can contain variables. For example, `/products/:handle`.
`page`	`A rendered Server Component reference`	Yes	A reference to a React Server Component that's rendered when the route is active.

Changes to `<Router>`

You can have multiple <Route> and <FileRoutes> components in your app. Hydrogen will only render one route for each request — whichever it finds first. This means the <Router> component no longer takes fallback as a prop. It also doesn't need serverProps. Instead, to render a 404 "Not Found" page, add <Route path="*" page={<NotFound />} /> to your app. Make sure it's the last <Route> defined inside your app:

function App({routes, ...serverProps}) {
  return (
    <ShopifyProvider shopifyConfig={shopifyConfig}>
      <CartProvider>
        <DefaultSeo />
-       <Router
-         fallback={<NotFound response={serverProps.response} />}
-         serverProps={serverProps}
-       >
+       <Router>
          <FileRoutes routes={routes} />
+         <Route path="*" page={<NotFound />} />
        </Router>
      </CartProvider>
    </ShopifyProvider>
  );
}

Changes to `<FileRoutes>`

The <FileRoutes> component now accepts two additional optional props:

Property	Type	Required	Default Value	Description
`basePath`	`string`	No	`"/"`	A path that's prepended to all file routes.
`dirPrefix`	`string`	No	`"./routes"`	The portion of the file route path that shouldn't be a part of the URL.

You need to modify dirPrefix if you want to import routes from a location other than src/routes.

You can modify basePath if you want to prefix all file routes. For example, you can prefix all file routes with a locale:

<Router>
  <FileRoutes basePath={`/${locale}`} routes={routes} />
  <Route path="*" page={<NotFound />} />
</Router>

New `useRouteParams()` hook

You can use the useRouteParams() hook to retrieve the parameters of an active route. The hook is available in both server and client components:

// products/[handle].server.jsx

import {useRouteParams} from '@shopify/hydrogen';

export default function Product() {
  const {handle} = useRouteParams();
  // ...
}

// ProductDetails.client.jsx
import {useRouteParams} from '@shopify/hydrogen/client';

export default function ProductDetails() {
  const {handle} = useRouteParams();
  // ...
}

#842 626e58ee Thanks @wizardlyhel! - Removed the Rawhtml component.

Upgrade your project by replacing references to the RawHtml component to follow
React's dangerouslySetInnerHTML:

Change all RawHtml component
```
<RawHtml string="<p>Hello world</p>" />
```
to jsx equivalent
```
<div dangerouslySetInnerHTML={{__html: '<p>Hello world</p>'}} />
```

Patch Changes

#870 4c0fcd8f Thanks @frandiox! - Remove useQuery hook from client exports to avoid leaking server logic to the browser.
#950 d19fc36b Thanks @frandiox! - Allow disabling minification in vite.config.js
#981 8dda8a86 Thanks @michenly! - Fix useUrl() when it is in RSC mode
#965 cdad13ed Thanks @blittle! - Fix server redirects to work properly with RSC responses. For example, the redirect component within the starter template needs to change:
```
export default function Redirect({response}) {
-  response.redirect('/products/snowboard');
-  return <div>This page is redirected</div>;
+  return response.redirect('/products/snowboard');
}
```
This server component is rendered two ways:
1. When an app directly loads the redirect route, the server will render a 300 redirect with the proper location header.
2. The app is already loaded, but the user navigates to the redirected route. We cannot 300 respond in this scenario, instead response.redirect(...) returns a component which will redirect on the client.
#904 1b46f8d0 Thanks @wizardlyhel! - Log query key when provided in string
#758 0bee3af0 Thanks @frandiox! - Upgrade to React experimental version 0.0.0-experimental-2bf7c02f0-20220314.

To upgrade your Hydrogen app, change the pinned version of react and react-dom in your package.json file to this version, or run:
```
yarn add @shopify/hydrogen [email protected] [email protected]
```
#895 1017b541 Thanks @frandiox! - Improve error thrown in development when entry point fails on load.
#897 c01044e6 Thanks @blittle! - Add new custom headers for storefront API calls. See Issue #660
#908 8f4cd100 Thanks @mcvinci! - Hydrogen docs: Updates to align with latest release
#871 4cb07c73 Thanks @scottdixon! - Hydrogen docs: Update ProductProvider example query
#878 587aa3e6 Thanks @frandiox! - Fix preloading queries in workers to prevent waterfall requests.

Breaking change: fetchBuilder no longer accepts a Request argument. Instead, it now accepts a url: string and options: FetchInit:
```
-fetchBuilder(new Request('https://my.endpoint.com', {headers: {foo: 'bar'}}));
+fetchBuilder('https://my.endpoint.com', {headers: {foo: 'bar}});
```
#923 993be985 Thanks @frandiox! - Provide a Logger option to use GraphQL and disable by default. Improve logging of unused query properties.
#960 2e8a5ea2 Thanks @mcvinci! - Hydrogen docs: Add reference to robots.txt.server.js file

@shopify/[email protected]

Patch Changes

#908 8f4cd100 Thanks @mcvinci! - Hydrogen docs: Updates to align with latest release

@shopify/[email protected]

Patch Changes

#908 8f4cd100 Thanks @mcvinci! - Hydrogen docs: Updates to align with latest release

github-actions bot changed the title ~~[ci] release v1.x-2022-07~~ [ci] release v1.x-2022-07 (rc1) Mar 8, 2022

github-actions bot force-pushed the changeset-release/v1.x-2022-07 branch 29 times, most recently from 7fd1f24 to af886ac Compare March 15, 2022 12:17

github-actions bot force-pushed the changeset-release/v1.x-2022-07 branch 8 times, most recently from 0890d8b to 68d5d0e Compare March 17, 2022 19:19

github-actions bot changed the title ~~[ci] release v1.x-2022-07 (rc1)~~ [ci] release v1.x-2022-07 Mar 17, 2022

github-actions bot force-pushed the changeset-release/v1.x-2022-07 branch 17 times, most recently from af40b8a to cb4894a Compare March 22, 2022 15:43

[ci] release v1.x-2022-07

25b15a8

github-actions bot force-pushed the changeset-release/v1.x-2022-07 branch from cb4894a to 25b15a8 Compare March 22, 2022 17:37

blittle merged commit 1d8a6e0 into v1.x-2022-07 Mar 22, 2022

blittle deleted the changeset-release/v1.x-2022-07 branch March 22, 2022 17:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ci] release v1.x-2022-07 #864

[ci] release v1.x-2022-07 #864

github-actions bot commented Mar 8, 2022 •

edited

Loading

[ci] release v1.x-2022-07 #864

[ci] release v1.x-2022-07 #864

Conversation

github-actions bot commented Mar 8, 2022 • edited Loading

Releases

[email protected]

Minor Changes

Changes to <Router>

Changes to <FileRoutes>

New useRouteParams() hook

Patch Changes

[email protected]

Minor Changes

@shopify/[email protected]

Minor Changes

Changes to <Router>

Changes to <FileRoutes>

New useRouteParams() hook

Patch Changes

@shopify/[email protected]

Patch Changes

@shopify/[email protected]

Patch Changes

github-actions bot commented Mar 8, 2022 •

edited

Loading

Changes to `<Router>`

Changes to `<FileRoutes>`

New `useRouteParams()` hook

Changes to `<Router>`

Changes to `<FileRoutes>`

New `useRouteParams()` hook