Skip to content

Commit

Permalink
Merge pull request Weaverse#106 from paul-phan/main
Browse files Browse the repository at this point in the history
Migrate to Vite
  • Loading branch information
paul-phan authored Apr 16, 2024
2 parents cac334e + 7c0c7b3 commit 4da1ece
Show file tree
Hide file tree
Showing 96 changed files with 5,618 additions and 5,284 deletions.
51 changes: 51 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* @type {import("@types/eslint").Linter.BaseConfig}
*/
module.exports = {
extends: [
'@remix-run/eslint-config',
'plugin:hydrogen/recommended',
'plugin:hydrogen/typescript',
],
rules: {
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/naming-convention': 'off',
'hydrogen/prefer-image-component': 'off',
'no-useless-escape': 'off',
'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
'no-case-declarations': 'off',
// TODO: Remove jest plugin from hydrogen/eslint-plugin
'jest/no-deprecated-functions': 'off',
'import/order': [
'error',
{
/**
* @description
*
* This keeps imports separate from one another, ensuring that imports are separated
* by their relative groups. As you move through the groups, imports become closer
* to the current file.
*
* @example
* ```
* import fs from 'fs';
*
* import package from 'npm-package';
*
* import xyz from '~/project-file';
*
* import index from '../';
*
* import sibling from './foo';
* ```
*/
groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
'newlines-between': 'always',
},
],
'prefer-const': 'off',
'jsx-a11y/click-events-have-key-events': 'warn',
'jsx-a11y/no-static-element-interactions': 'warn',
'jsx-a11y/label-has-associated-control': 'warn',
},
};
15 changes: 0 additions & 15 deletions .eslintrc.js

This file was deleted.

232 changes: 232 additions & 0 deletions .hydrogen/upgrade-2024.1.6-to-2024.4.0.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
# Hydrogen upgrade guide: 2024.1.6 to 2024.4.0

----

## Features

### Add `@shopify/mini-oxygen` as a dev dependency for local development [#1891](https://github.com/Shopify/hydrogen/pull/1891)

#### package.json
[#1891](https://github.com/Shopify/hydrogen/pull/1891)
```diff
"devDependencies": {
"@remix-run/dev": "^2.8.0",
"@remix-run/eslint-config": "^2.8.0",
+ "@shopify/mini-oxygen": "^3.0.0",
"@shopify/oxygen-workers-types": "^4.0.0",
...
}
```

### Support scaffolding projects from external repositories using the `--template` flag [#1867](https://github.com/Shopify/hydrogen/pull/1867)

#### The following examples are equivalent
[#1867](https://github.com/Shopify/hydrogen/pull/1867)
```bash
npm create @shopify/hydrogen -- --template shopify/hydrogen-demo-store
npm create @shopify/hydrogen -- --template github.com/shopify/hydrogen-demo-store
npm create @shopify/hydrogen -- --template https://github.com/shopify/hydrogen-demo-store
```

### Deprecate the `<Seo />` component in favor of directly using Remix meta route exports [#1875](https://github.com/Shopify/hydrogen/pull/1875)

#### Step: 1. Remove the `<Seo />` component from `root.jsx` [#1875](https://github.com/Shopify/hydrogen/pull/1875)

[#1875](https://github.com/Shopify/hydrogen/pull/1875)
```diff
export default function App() {
const nonce = useNonce();
const data = useLoaderData<typeof loader>();

return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
- <Seo />
<Meta />
<Links />
</head>
<body>
<Layout {...data}>
<Outlet />
</Layout>
<ScrollRestoration nonce={nonce} />
<Scripts nonce={nonce} />
<LiveReload nonce={nonce} />
</body>
</html>
);
}
```

#### Step: 2. Add a Remix meta export to each route that returns an seo property from a loader or handle: [#1875](https://github.com/Shopify/hydrogen/pull/1875)

[#1875](https://github.com/Shopify/hydrogen/pull/1875)
```diff
+import {getSeoMeta} from '@shopify/hydrogen';

export async function loader({context}) {
const {shop} = await context.storefront.query(`
query layout {
shop {
name
description
}
}
`);

return {
seo: {
title: shop.title,
description: shop.description,
},
};
}

+export const meta = ({data}) => {
+ return getSeoMeta(data.seo);
+};
```

#### Step: 3. Merge root route meta data [#1875](https://github.com/Shopify/hydrogen/pull/1875)

[#1875](https://github.com/Shopify/hydrogen/pull/1875)
If your root route loader also returns an seo property, make sure to merge that data:

```js
export const meta = ({data, matches}) => {
return getSeoMeta(
matches[0].data.seo,
// the current route seo data overrides the root route data
data.seo,
);
};
```
Or more simply:

```js
export const meta = ({data, matches}) => {
return getSeoMeta(...matches.map((match) => match.data.seo));
};
```

#### Step: 4. Override meta [#1875](https://github.com/Shopify/hydrogen/pull/1875)

[#1875](https://github.com/Shopify/hydrogen/pull/1875)
Sometimes getSeoMeta might produce a property in a way you'd like to change. Map over the resulting array to change it. For example, Hydrogen removes query parameters from canonical URLs, add them back:

```js
export const meta = ({data, location}) => {
return getSeoMeta(data.seo).map((meta) => {
if (meta.rel === 'canonical') {
return {
...meta,
href: meta.href + location.search,
};
}

return meta;
});
};
```

### Codegen dependencies must be now listed explicitly in package.json [#1962](https://github.com/Shopify/hydrogen/pull/1962)

#### Update package.json
[#1962](https://github.com/Shopify/hydrogen/pull/1962)
```diff
{
"devDependencies": {
+ "@graphql-codegen/cli": "5.0.2",
"@remix-run/dev": "^2.8.0",
"@remix-run/eslint-config": "^2.8.0",
+ "@shopify/hydrogen-codegen": "^0.3.0",
"@shopify/mini-oxygen": "^2.2.5",
"@shopify/oxygen-workers-types": "^4.0.0",
...
}
}
```

----

----

## Fixes

### Fix a bug where cart could be null, even though a new cart was created by adding a line item. [#1865](https://github.com/Shopify/hydrogen/pull/1865)

#### Example
[#1865](https://github.com/Shopify/hydrogen/pull/1865)
```ts
import {
createCartHandler,
cartGetIdDefault,
cartSetIdDefault,
} from '@shopify/hydrogen';

const cartHandler = createCartHandler({
storefront,
getCartId: cartGetIdDefault(request.headers),
setCartId: cartSetIdDefault(),
cartQueryFragment: CART_QUERY_FRAGMENT,
cartMutateFragment: CART_MUTATE_FRAGMENT,
});

await cartHandler.addLines([{merchandiseId: '...'}]);
// .get() now returns the cart as expected
const cart = await cartHandler.get();
```

### Update Vite plugin imports, and how their options are passed to Remix [#1935](https://github.com/Shopify/hydrogen/pull/1935)

#### vite.config.js
[#1935](https://github.com/Shopify/hydrogen/pull/1935)
```diff
-import {hydrogen, oxygen} from '@shopify/cli-hydrogen/experimental-vite';
+import {hydrogen} from '@shopify/hydrogen/vite';
+import {oxygen} from '@shopify/mini-oxygen/vite';
import {vitePlugin as remix} from '@remix-run/dev';

export default defineConfig({
hydrogen(),
oxygen(),
remix({
- buildDirectory: 'dist',
+ presets: [hydrogen.preset()],
future: {
```

### Change `storefrontRedirect` to ignore query parameters when matching redirects [#1900](https://github.com/Shopify/hydrogen/pull/1900)

#### This is a breaking change. If you want to retain the legacy functionality that is query parameter sensitive, pass matchQueryParams to storefrontRedirect():
[#1900](https://github.com/Shopify/hydrogen/pull/1900)
```js
storefrontRedirect({
request,
response,
storefront,
+ matchQueryParams: true,
});
```

### Fix types returned by the session object [#1869](https://github.com/Shopify/hydrogen/pull/1869)

#### In remix.env.d.ts or env.d.ts, add the following types
[#1869](https://github.com/Shopify/hydrogen/pull/1869)
```diff
import type {
// ...
HydrogenCart,
+ HydrogenSessionData,
} from '@shopify/hydrogen';

// ...

declare module '@shopify/remix-oxygen' {
// ...

+ interface SessionData extends HydrogenSessionData {}
}
```
14 changes: 8 additions & 6 deletions app/components/Cart.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import clsx from 'clsx';
import {useRef} from 'react';
import {useScroll} from 'react-use';
import useScroll from 'react-use/esm/useScroll';
import {
flattenConnection,
CartForm,
Expand Down Expand Up @@ -286,11 +286,13 @@ function CartLineItem({line}: {line: CartLine}) {
</Heading>

<div className="grid pb-2">
{(merchandise?.selectedOptions || []).filter(option => option.value !== 'Default Title').map((option) => (
<Text color="subtle" key={option.name}>
{option.name}: {option.value}
</Text>
))}
{(merchandise?.selectedOptions || [])
.filter((option) => option.value !== 'Default Title')
.map((option) => (
<Text color="subtle" key={option.name}>
{option.name}: {option.value}
</Text>
))}
</div>

<div className="flex items-center gap-2">
Expand Down
22 changes: 11 additions & 11 deletions app/components/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -373,18 +373,18 @@ export function IconArrowInput(props: IconProps) {
<path
d="M2.5 8H13.5"
stroke="#0F0F0F"
stroke-opacity="0.7"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeOpacity="0.7"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 3.5L13.5 8L9 12.5"
stroke="#0F0F0F"
stroke-opacity="0.7"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeOpacity="0.7"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Icon>
);
Expand All @@ -401,7 +401,7 @@ export function IconFilledStar(props: IconProps) {
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
stroke-width="0"
strokeWidth="0"
fill="currentColor"
/>
</Icon>
Expand All @@ -414,7 +414,7 @@ export function IconStar(props: IconProps) {
viewBox="0 0 24 24"
stroke={props.stroke || 'currentColor'}
stroke-width="2"
fill='none'
fill="none"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
Expand All @@ -432,7 +432,7 @@ export function IconHalfFilledStar(props: IconProps) {
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12 1a.993 .993 0 0 1 .823 .443l.067 .116l2.852 5.781l6.38 .925c.741 .108 1.08 .94 .703 1.526l-.07 .095l-.078 .086l-4.624 4.499l1.09 6.355a1.001 1.001 0 0 1 -1.249 1.135l-.101 -.035l-.101 -.046l-5.693 -3l-5.706 3c-.105 .055 -.212 .09 -.32 .106l-.106 .01a1.003 1.003 0 0 1 -1.038 -1.06l.013 -.11l1.09 -6.355l-4.623 -4.5a1.001 1.001 0 0 1 .328 -1.647l.113 -.036l.114 -.023l6.379 -.925l2.853 -5.78a.968 .968 0 0 1 .904 -.56zm0 3.274v12.476a1 1 0 0 1 .239 .029l.115 .036l.112 .05l4.363 2.299l-.836 -4.873a1 1 0 0 1 .136 -.696l.07 -.099l.082 -.09l3.546 -3.453l-4.891 -.708a1 1 0 0 1 -.62 -.344l-.073 -.097l-.06 -.106l-2.183 -4.424z"
stroke-width="0"
strokeWidth="0"
fill="currentColor"
/>
</Icon>
Expand Down
1 change: 1 addition & 0 deletions app/components/Input.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import clsx from 'clsx';
import {useState} from 'react';

import {IconClose} from '.';

const variants = {
Expand Down
Loading

0 comments on commit 4da1ece

Please sign in to comment.