Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: migrate to 0.11
Browse files Browse the repository at this point in the history
blittle committed Feb 23, 2022

Verified

This commit was signed with the committer’s verified signature.
blittle Bret Little
1 parent 9a9e8b7 commit 0803f46
Showing 20 changed files with 271 additions and 483 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 4 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
}
41 changes: 3 additions & 38 deletions server.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,7 @@
// @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}`);
app.listen(8080, () => {
console.log(`Server ready`);
});
});
2 changes: 1 addition & 1 deletion shopify.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default {
storeDomain: 'hydrogen-preview.myshopify.com',
storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
storefrontApiVersion: 'unstable',
storefrontApiVersion: '2022-01',
};
9 changes: 2 additions & 7 deletions src/App.client.jsx
Original file line number Diff line number Diff line change
@@ -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>;
}
29 changes: 18 additions & 11 deletions src/App.server.jsx
Original file line number Diff line number Diff line change
@@ -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});
147 changes: 74 additions & 73 deletions src/components/Cart.client.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
4 changes: 2 additions & 2 deletions src/components/CartIconWithItems.client.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<>
Loading

0 comments on commit 0803f46

Please sign in to comment.