blittle · blittle · Feb 16, 2022
diff --git a/index.html b/index.html
@@ -15,6 +15,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/entry-client.jsx"></script>
+    <script type="module" src="/@shopify/hydrogen/entry-client"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
     "lint:css": "stylelint ./src/**/*.{css,sass,scss}",
     "build": "yarn build:client && yarn build:server && yarn build:worker",
     "build:client": "vite build --outDir dist/client --manifest",
-    "build:server": "vite build --outDir dist/server --ssr src/entry-server.jsx",
-    "build:worker": "cross-env WORKER=true vite build --outDir dist/worker --ssr worker.js",
+    "build:server": "vite build --outDir dist/server --ssr @shopify/hydrogen/platforms/node",
+    "build:worker": "cross-env WORKER=true vite build --outDir dist/worker --ssr @shopify/hydrogen/platforms/worker-event",
     "serve": "node --enable-source-maps server",
     "preview": "npx @shopify/hydrogen-cli@latest preview"
   },
@@ -34,15 +34,14 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.1",
-    "@shopify/hydrogen": "^0.10.1",
+    "@shopify/hydrogen": "^0.11.0-experimental.2",
     "body-parser": "^1.19.1",
     "compression": "^1.7.4",
     "express": "^4.17.1",
     "graphql-tag": "^2.12.4",
     "path-to-regexp": "^6.2.0",
     "react": "0.0.0-experimental-529dc3ce8-20220124",
     "react-dom": "0.0.0-experimental-529dc3ce8-20220124",
-    "react-router-dom": "^5.2.0",
     "serve-static": "^1.14.1"
   }
-}
+}
diff --git a/server.js b/server.js
@@ -1,41 +1,8 @@
-// @ts-check
-const fs = require('fs');
-const bodyParser = require('body-parser');
-const path = require('path');
-const express = require('express');
-
-const {hydrogenMiddleware} = require('@shopify/hydrogen/middleware');
-
-const resolve = (p) => path.resolve(__dirname, p);
-
-async function createServer() {
-  const indexProd = fs.readFileSync(resolve('dist/client/index.html'), 'utf-8');
-
-  const app = express();
-
-  app.use(require('compression')());
-  app.use(
-    require('serve-static')(resolve('dist/client'), {
-      index: false,
-    }),
-  );
-
-  app.use('*', bodyParser.raw({type: '*/*'}));
-
-  app.use(
-    '*',
-    hydrogenMiddleware({
-      getServerEntrypoint: () =>
-        require('./dist/server/entry-server.js').default,
-      indexTemplate: indexProd,
-    }),
-  );
-
-  return {app};
-}
+const {createServer} = require('./dist/server');
 
 createServer().then(({app}) => {
   const port = process.env.PORT || 8080;
+
   app.listen(port, () => {
     console.log(`Hydrogen running at http://localhost:${port}`);
   });

diff --git a/shopify.config.js b/shopify.config.js
@@ -1,5 +1,5 @@
 export default {
   storeDomain: 'hydrogen-preview.myshopify.com',
   storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
-  storefrontApiVersion: 'unstable',
+  storefrontApiVersion: '2022-01',
 };
diff --git a/src/App.client.jsx b/src/App.client.jsx
@@ -1,13 +1,8 @@
-import {HelmetProvider} from '@shopify/hydrogen/client';
 import CartProvider from './components/CartProvider.client';
 
 /**
  *  Setup client context, though the children are most likely server components
  */
-export default function ClientApp({helmetContext, children}) {
-  return (
-    <HelmetProvider context={helmetContext}>
-      <CartProvider>{children}</CartProvider>
-    </HelmetProvider>
-  );
+export default function ClientApp({children}) {
+  return <CartProvider>{children}</CartProvider>;
 }
diff --git a/src/App.server.jsx b/src/App.server.jsx
@@ -1,23 +1,30 @@
-import {DefaultRoutes} from '@shopify/hydrogen';
+import renderHydrogen from '@shopify/hydrogen/entry-server';
+import {DefaultRoutes, ShopifyProvider} from '@shopify/hydrogen';
 import {Suspense} from 'react';
+import shopifyConfig from '../shopify.config';
 
 import DefaultSeo from './components/DefaultSeo.server';
 import NotFound from './components/NotFound.server';
 import AppClient from './App.client';
 import LoadingFallback from './components/LoadingFallback';
 
-export default function App({log, pages, ...serverState}) {
+function App({log, pages, ...serverState}) {
   return (
     <Suspense fallback={<LoadingFallback />}>
-      <AppClient helmetContext={serverState.helmetContext}>
-        <DefaultSeo />
-        <DefaultRoutes
-          pages={pages}
-          serverState={serverState}
-          log={log}
-          fallback={<NotFound />}
-        />
-      </AppClient>
+      <ShopifyProvider shopifyConfig={shopifyConfig}>
+        <AppClient>
+          <DefaultSeo />
+          <DefaultRoutes
+            pages={pages}
+            serverState={serverState}
+            log={log}
+            fallback={<NotFound />}
+          />
+        </AppClient>
+      </ShopifyProvider>
     </Suspense>
   );
 }
+
+const pages = import.meta.globEager('./pages/**/*.server.[jt](s|sx)');
+export default renderHydrogen(App, {pages});
diff --git a/src/components/Cart.client.jsx b/src/components/Cart.client.jsx
@@ -1,9 +1,14 @@
 import {
-  useCartLinesTotalQuantity,
+  useCart,
   CartCheckoutButton,
   Link,
   CartLines,
-  CartLine,
+  useCartLine,
+  CartLinePrice,
+  CartLineQuantity,
+  CartLineQuantityAdjustButton,
+  CartLineProductTitle,
+  CartLineImage,
   CartShopPayButton,
   CartEstimatedCost,
 } from '@shopify/hydrogen/client';
@@ -18,7 +23,7 @@ import {BUTTON_PRIMARY_CLASSES} from './Button.client';
  */
 export default function Cart() {
   const {isCartOpen, closeCart} = useCartUI();
-  const itemCount = useCartLinesTotalQuantity();
+  const {itemCount} = useCart();
 
   return (
     <div>
@@ -67,6 +72,66 @@ function CartHeader() {
   );
 }
 
+function LineInCart() {
+  const {merchandise} = useCartLine();
+
+  return (
+    <div
+      role="row"
+      className="flex py-7 border-b last:border-b-0 border-gray-300 text-gray-900"
+    >
+      <div role="cell" className="flex-shrink-0 mr-7">
+        <Link to={`products/${merchandise.product.handle}`}>
+          <CartLineImage
+            className="bg-white border border-black border-opacity-5 rounded-xl "
+            options={{width: 98, height: 98, crop: 'center'}}
+          />
+        </Link>
+      </div>
+      <div
+        role="cell"
+        className="flex flex-col w-full justify-between items-start flex-grow-1 mr-4"
+      >
+        <Link
+          to={`products/${merchandise.product.handle}`}
+          className="hover:underline"
+        >
+          <CartLineProductTitle className="text-lg font-medium" />
+        </Link>
+        <ul className="text-xs space-y-1">
+          {merchandise.selectedOptions.map(({name, value}) => (
+            <li key={name}>
+              {name}: {value}
+            </li>
+          ))}
+        </ul>
+        <CartItemQuantity />
+      </div>
+      <div role="cell" className="flex flex-col justify-between items-end">
+        <CartLineQuantityAdjustButton
+          adjust="remove"
+          aria-label="Remove from cart"
+          className="disabled:pointer-events-all disabled:cursor-wait"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </CartLineQuantityAdjustButton>
+        <CartLinePrice className="text-lg" />
+      </div>
+    </div>
+  );
+}
+
 function CartItems() {
   return (
     <div className="px-7 flex-grow" role="table" aria-label="Shopping cart">
@@ -76,71 +141,7 @@ function CartItems() {
         <div role="columnheader">Price</div>
       </div>
       <CartLines>
-        {({merchandise}) => (
-          <div
-            role="row"
-            className="flex py-7 border-b last:border-b-0 border-gray-300 text-gray-900"
-          >
-            <div role="cell" className="flex-shrink-0 mr-7">
-              <Link to={`products/${merchandise.product.handle}`}>
-                <CartLine.Image
-                  className="bg-white border border-black border-opacity-5 rounded-xl "
-                  options={{width: 98, height: 98, crop: 'center'}}
-                />
-              </Link>
-            </div>
-            <div
-              role="cell"
-              className="flex flex-col w-full justify-between items-start flex-grow-1 mr-4"
-            >
-              <Link
-                to={`products/${merchandise.product.handle}`}
-                className="hover:underline"
-              >
-                <CartLine.ProductTitle className="text-lg font-medium" />
-              </Link>
-              <CartLine.SelectedOptions as="ul" className="text-xs space-y-1">
-                {({name, value}) => (
-                  <>
-                    {name}: {value}
-                  </>
-                )}
-              </CartLine.SelectedOptions>
-              <CartLine.Attributes as="ul" className="text-sm space-y-1">
-                {({key, value}) => (
-                  <>
-                    {key}: {value}
-                  </>
-                )}
-              </CartLine.Attributes>
-              <CartItemQuantity />
-            </div>
-            <div
-              role="cell"
-              className="flex flex-col justify-between items-end"
-            >
-              <CartLine.QuantityAdjustButton
-                adjust="remove"
-                aria-label="Remove from cart"
-                className="disabled:pointer-events-all disabled:cursor-wait"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </CartLine.QuantityAdjustButton>
-              <CartLine.Price className="text-lg" />
-            </div>
-          </div>
-        )}
+        <LineInCart />
       </CartLines>
     </div>
   );
@@ -149,7 +150,7 @@ function CartItems() {
 function CartItemQuantity() {
   return (
     <div className="flex border rounded border-gray-300 items-center overflow-auto mt-2">
-      <CartLine.QuantityAdjustButton
+      <CartLineQuantityAdjustButton
         adjust="decrease"
         aria-label="Decrease quantity"
         className="p-2 disabled:pointer-events-all disabled:cursor-wait"
@@ -166,12 +167,12 @@ function CartItemQuantity() {
             clipRule="evenodd"
           />
         </svg>
-      </CartLine.QuantityAdjustButton>
-      <CartLine.Quantity
+      </CartLineQuantityAdjustButton>
+      <CartLineQuantity
         as="div"
         className="p-2 text-gray-900 text-xs text-center"
       />
-      <CartLine.QuantityAdjustButton
+      <CartLineQuantityAdjustButton
         adjust="increase"
         aria-label="Increase quantity"
         className="p-2 text-gray-400 disabled:pointer-events-all disabled:cursor-wait"
@@ -188,7 +189,7 @@ function CartItemQuantity() {
             clipRule="evenodd"
           />
         </svg>
-      </CartLine.QuantityAdjustButton>
+      </CartLineQuantityAdjustButton>
     </div>
   );
 }

diff --git a/src/components/CartIconWithItems.client.jsx b/src/components/CartIconWithItems.client.jsx
@@ -1,12 +1,12 @@
-import {useCartLinesTotalQuantity} from '@shopify/hydrogen/client';
+import {useCart} from '@shopify/hydrogen/client';
 
 import CartIcon from './CartIcon';
 
 /**
  * A client component that specifies the icon to use if a cart contains merchandise
  */
 export default function CartIconWithItems() {
-  const itemCount = useCartLinesTotalQuantity();
+  const {itemCount} = useCart();
 
   return (
     <>

diff --git a/src/components/DefaultSeo.server.jsx b/src/components/DefaultSeo.server.jsx
@@ -1,28 +1,32 @@
-import {useShopQuery} from '@shopify/hydrogen';
+import {useShopQuery, Seo} from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
-import Seo from './Seo.client';
-
 /**
  * A server component that fetches a `shop.name` and sets default values and templates for every page on a website
  */
 export default function DefaultSeo() {
   const {
     data: {
-      shop: {name: shopName},
+      shop: {name: shopName, description: shopDescription},
     },
   } = useShopQuery({
     query: QUERY,
     cache: {maxAge: 60 * 60 * 12, staleWhileRevalidate: 60 * 60 * 12},
   });
 
-  return <Seo shopName={shopName} />;
+  return (
+    <Seo
+      type="defaultSeo"
+      data={{title: shopName, description: shopDescription}}
+    />
+  );
 }
 
 const QUERY = gql`
   query shopName {
     shop {
       name
+      description
     }
   }
 `;