@shopify/create-hydrogen 0.2.1 → 0.3.0

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "0.2.1",
+  "version": "0.3.0",
   "main": "index.js",
   "license": "MIT",
   "bin": {
@@ -24,5 +24,5 @@
     "kolorist": "^1.4.0",
     "minimist": "^1.2.5"
   },
-  "gitHead": "8d764811b4e1420ea00e90fb1e1e4b5412de990e"
+  "gitHead": "79eec7e076abe074755bbe42bc62f7f96dcd2ff8"
 }

package/template-hydrogen/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dev",
   "description": "This is a dev environment for Hydrogen",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -31,7 +31,7 @@
     "vite": "^2.6.0"
   },
   "dependencies": {
-    "@shopify/hydrogen": "^0.2.1",
+    "@shopify/hydrogen": "^0.3.0",
     "compression": "^1.7.4",
     "express": "^4.17.1",
     "focus-trap-react": "^8.8.1",

package/template-hydrogen/src/components/CartProvider.client.jsx

@@ -22,7 +22,7 @@ export default function CartProvider({children, cart, numCartLines}) {
 function Provider({children, cart, numCartLines}) {
   const {openCart} = useCartUI();
 
-  const onCartLineAdd = useCallback(() => {
+  const open = useCallback(() => {
     openCart();
   }, [openCart]);
 
@@ -31,7 +31,8 @@ function Provider({children, cart, numCartLines}) {
       <ShopifyCartProvider
         cart={cart}
         numCartLines={numCartLines}
-        onLineAdd={onCartLineAdd}
+        onLineAdd={open}
+        onCreate={open}
       >
         {children}
       </ShopifyCartProvider>

package/template-hydrogen/src/components/ProductCard.client.jsx

@@ -7,14 +7,14 @@ import {
 } from '@shopify/hydrogen/client';
 
 export default function ProductCard({product}) {
-  const firstVariant = product?.variants?.edges[0]?.node;
-
   if (!product) return null;
 
+  const firstVariant = product.variants?.edges[0]?.node;
+
   return (
     <ProductProvider product={product} initialVariantId={firstVariant.id}>
       <Link to={`/products/${product.handle}`}>
-        <SelectedVariantImage className="rounded-md bg-gray-100 h-80 w-96 mb-2" />
+        <SelectedVariantImage className="rounded-md bg-gray-100 h-80 w-96 mb-2 object-cover" />
         <ProductTitle className="text-gray-900 font-medium" />
       </Link>
       <div className="flex items-center">

package/template-hydrogen/src/components/ProductDetails.client.jsx

@@ -1,18 +1,15 @@
-import {Product} from '@shopify/hydrogen/client';
+import {Product, flattenConnection} from '@shopify/hydrogen/client';
 
-import Layout from './Layout.client';
 import ProductOptions from './ProductOptions.client';
 import Gallery from './Gallery.client';
 import Seo from './Seo.client';
 
-export default function ProductDetails({data}) {
+export default function ProductDetails({product}) {
+  const initialVariant = flattenConnection(product.variants)[0];
   return (
-    <Layout>
-      <Seo product={data.product} />
-      <Product
-        product={data.product}
-        initialVariantId={data.product.variants.edges[0].node.id}
-      >
+    <>
+      <Seo product={product} />
+      <Product product={product} initialVariantId={initialVariant.id}>
         <div className="py-4 md:grid md:grid-cols-2 lg:grid-cols-3 gap-12">
           <div className="md:hidden pb-4 flex justify-between items-top">
             <Product.Title as="h1" className="font-bold text-2xl" />
@@ -179,6 +176,6 @@ export default function ProductDetails({data}) {
           </section>
         </div>
       </Product>
-    </Layout>
+    </>
   );
 }

package/template-hydrogen/src/pages/Index.server.jsx

@@ -5,7 +5,7 @@ import {
 } from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
-import HighlightedProduct from '../components/HightlightedProduct.client';
+import HighlightedProduct from '../components/HighlightedProduct.client';
 import Layout from '../components/Layout.client';
 import ProductCard from '../components/ProductCard.client';
 import MediaPlaceholder from '../components/MediaPlaceholder';

package/template-hydrogen/src/pages/products/[handle].server.jsx

@@ -4,6 +4,7 @@ import gql from 'graphql-tag';
 
 import ProductDetails from '../../components/ProductDetails.client';
 import NotFound from '../../components/NotFound.server';
+import Layout from '../../components/Layout.client';
 
 export default function Product() {
   const {handle} = useParams();
@@ -26,7 +27,11 @@ export default function Product() {
     return <NotFound />;
   }
 
-  return <ProductDetails data={data} />;
+  return (
+    <Layout>
+      <ProductDetails product={data.product} />
+    </Layout>
+  );
 }
 
 const QUERY = gql`