skeleton

1.0.10

Patch Changes

Update @shopify/cli dependency to avoid React version mismatches in your project: (#2059) by @frandiox

  "dependencies": {
    ...
-   "@shopify/cli": "3.58.0",
+   "@shopify/cli": "3.59.2",
    ...
  }

Updated dependencies [d2bc720b]:
- @shopify/cli-hydrogen@8.0.3

1.0.9

Patch Changes

Pin React dependency to 18.2.0 to avoid mismatches. (#2051) by @frandiox
Updated dependencies [9c36c8a5]:
- @shopify/cli-hydrogen@8.0.2

1.0.8

Patch Changes

Stop inlining the favicon in base64 to avoid issues with the Content-Security-Policy. In vite.config.js: (#2006) by @frandiox
```
export default defineConfig({
  plugins: [
    ...
  ],
+ build: {
+   assetsInlineLimit: 0,
+ },
});
```

To improve HMR in Vite, move the useRootLoaderData function from app/root.tsx to a separate file like app/lib/root-data.ts. This change avoids circular imports: (#2014) by @frandiox

// app/lib/root-data.ts
import {useMatches} from '@remix-run/react';
import type {SerializeFrom} from '@shopify/remix-oxygen';
import type {loader} from '~/root';

/**
 * Access the result of the root loader from a React component.
 */
export const useRootLoaderData = () => {
  const [root] = useMatches();
  return root?.data as SerializeFrom<typeof loader>;
};

Import this hook from ~/lib/root-data instead of ~/root in your components.

Updated dependencies [b4dfda32, ffa57bdb, ac4e1670, 0af624d5, 9723eaf3, e842f68c]:
- @shopify/cli-hydrogen@8.0.1
- @shopify/hydrogen@2024.4.1

1.0.7

Patch Changes

Update internal libraries for parsing .env files. (#1946) by @aswamy

Please update the @shopify/cli dependency in your app to avoid duplicated subdependencies:
```
"dependencies": {
-   "@shopify/cli": "3.56.3",
+   "@shopify/cli": "3.58.0",
}
```
Add Adds magic Catalog route (#1967) by @juanpprieto

Update Vite plugin imports, and how their options are passed to Remix: (#1935) by @frandiox

-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: {

Add @shopify/mini-oxygen as a dev dependency for local development: (#1891) by @frandiox

  "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",
    ...
  },

Add the customer-account push command to the Hydrogen CLI. This allows you to push the current --dev-origin URL to the Shopify admin to enable secure connection to the Customer Account API for local development. (#1804) by @michenly

Fix types returned by the session object. (#1869) by @frandiox

In remix.env.d.ts or env.d.ts, add the following types:

import type {
  // ...
  HydrogenCart,
+ HydrogenSessionData,
} from '@shopify/hydrogen';

// ...

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

+ interface SessionData extends HydrogenSessionData {}
}

Codegen dependencies must be now listed explicitly in package.json: (#1962) by @frandiox

{
  "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",
    ...
  }
}

Updated dependencies [4eaec272, 14bb5df1, 646b78d4, 87072950, 5f1295fe, 3c8a7313, ca1dcbb7, 11879b17, f4d6e5b0, 788d86b3, ebaf5529, da95bb1c, 5bb43304, 140e4768, 062d6be7, b3323e59, ab0df5a5, ebaf5529, ebaf5529, 9e899218, a209019f, d007b7bc, a5511cd7, 4afedb4d, 34fbae23, e3baaba5, 99d72f7a, 9351f9f5]:
- @shopify/cli-hydrogen@8.0.0
- @shopify/hydrogen@2024.4.0
- @shopify/remix-oxygen@2.0.4

1.0.6

Patch Changes

Improve performance of predictive search: (#1823) by @frandiox
- Change the request to be GET instead of POST to avoid Remix route revalidations.
- Add Cache-Control headers to the response to get quicker results when typing.
Aside from that, it now shows a loading state when fetching the results instead of "No results found.".
Updated dependencies [351b3c1b, 5060cf57, 2888014e]:
- @shopify/hydrogen@2024.1.4
- @shopify/cli-hydrogen@7.1.2

1.0.5

Patch Changes

Update the @shopify/cli dependency: (#1786) by @frandiox

- "@shopify/cli": "3.52.0",
+ "@shopify/cli": "3.56.3",

Update Remix and associated packages to 2.8.0. (#1781) by @frandiox

"dependencies": {
-  "@remix-run/react": "^2.6.0",
-  "@remix-run/server-runtime": "^2.6.0",
+  "@remix-run/react": "^2.8.0",
+  "@remix-run/server-runtime": "^2.8.0",
    //...
  },
  "devDependencies": {
-   "@remix-run/dev": "^2.6.0",
-   "@remix-run/eslint-config": "^2.6.0",
+  "@remix-run/dev": "^2.8.0",
+  "@remix-run/eslint-config": "^2.8.0",
    //...
  },

Updated dependencies [ced1d4cb, fc013401, e641255e, d7e04cb6, eedd9c49]:
- @shopify/cli-hydrogen@7.1.1
- @shopify/hydrogen@2024.1.3

1.0.4

Patch Changes

This is an important fix to a bug with 404 routes and path-based i18n projects where some unknown routes would not properly render a 404. This fixes all new projects, but to fix existing projects, add a ($locale).tsx route with the following contents: (#1732) by @blittle

import {type LoaderFunctionArgs} from '@remix-run/server-runtime';

export async function loader({params, context}: LoaderFunctionArgs) {
  const {language, country} = context.storefront.i18n;

  if (
    params.locale &&
    params.locale.toLowerCase() !== `${language}-${country}`.toLowerCase()
  ) {
    // If the locale URL param is defined, yet we still are still at the default locale
    // then the the locale param must be invalid, send to the 404 page
    throw new Response(null, {status: 404});
  }

  return null;
}

Add defensive null checks to the default cart implementation in the starter template (#1746) by @blittle
🐛 Fix issue where customer login does not persist to checkout (#1719) by @michenly

✨ Add customerAccount option to createCartHandler. Where a ?logged_in=true will be added to the checkoutUrl for cart query if a customer is logged in.
Updated dependencies [faeba9f8, 6d585026, fcecfb23, 28864d6f, c0ec7714, 226cf478, 06d9fd91]:
- @shopify/cli-hydrogen@7.1.0
- @shopify/hydrogen@2024.1.2

1.0.3

Patch Changes

♻️ CustomerClient type is deprecated and replaced by CustomerAccount (#1692) by @michenly
Updated dependencies [02798786, 52b15df4, a2664362, eee5d927, c7b2017f, 06320ee4]:
- @shopify/hydrogen@2024.1.1
- @shopify/cli-hydrogen@7.0.1

1.0.2

Patch Changes

Use new parameters introduced in Storefront API v2024-01 to fix redirection to the product's default variant when there are unknown query params in the URL. (#1642) by @wizardlyhel

-   selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
+   selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
      ...ProductVariant
    }

Update the GraphQL config in .graphqlrc.yml to use the more modern projects structure: (#1577) by @frandiox
```
-schema: node_modules/@shopify/hydrogen/storefront.schema.json
+projects:
+ default:
+    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
```
This allows you to add additional projects to the GraphQL config, such as third party CMS schemas.

Also, you can modify the document paths used for the Storefront API queries. This is useful if you have a large codebase and want to exclude certain files from being used for codegen or other GraphQL utilities:
```
projects:
  default:
    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
    documents:
      - '!*.d.ts'
      - '*.{ts,tsx,js,jsx}'
      - 'app/**/*.{ts,tsx,js,jsx}'
```
Improve resiliency of HydrogenSession (#1583) by @blittle

Update @shopify/cli dependency in package.json: (#1579) by @frandiox

-   "@shopify/cli": "3.51.0",
+   "@shopify/cli": "3.52.0",

- Update example and template Remix versions to ^2.5.1 (#1639) by @wizardlyhel
- Enable Remix future flags:
  - v3_fetcherPersist
  - v3_relativeSplatpath
Updated dependencies [810f48cf, 8c477cb5, 42ac4138, 0241b7d2, 6a897586, 0ff63bed, 6bc1d61c, eb0f4bcc, 400bfee6, a69c21ca, 970073e7, 772118ca, 335375a6, 335371ce, 94509b75, 36d6fa2c, 3e7b6e8a, cce65795, 9e3d88d4, ca1161b2, 92840e51, 952fedf2, 1bc053c9]:
- @shopify/hydrogen@2024.1.0
- @shopify/cli-hydrogen@7.0.0
- @shopify/remix-oxygen@2.0.3

1.0.1

Patch Changes

Sync up environment variable names across all example & type files. (#1542) by @michenly
Remove error boundary from robots.txt file in the Skeleton template (#1492) by @andrewcohen

Use the worker runtime by default when running the dev or preview commands. (#1525) by @frandiox

Enable it in your project by adding the --worker flag to your package.json scripts:

"scripts": {
  "build": "shopify hydrogen build",
- "dev": "shopify hydrogen dev --codegen",
+ "dev": "shopify hydrogen dev --worker --codegen",
- "preview": "npm run build && shopify hydrogen preview",
+ "preview": "npm run build && shopify hydrogen preview --worker",
  ...
}

Update to the latest version of @shopify/oxygen-workers-types. (#1494) by @frandiox

In TypeScript projects, when updating to the latest @shopify/remix-oxygen adapter release, you should also update to the latest version of @shopify/oxygen-workers-types:
```
"devDependencies": {
  "@remix-run/dev": "2.1.0",
  "@remix-run/eslint-config": "2.1.0",
- "@shopify/oxygen-workers-types": "^3.17.3",
+ "@shopify/oxygen-workers-types": "^4.0.0",
  "@shopify/prettier-config": "^1.1.2",
  ...
},
```
Update internal dependencies for bug resolution. (#1496) by @vincentezw

Update your @shopify/cli dependency to avoid duplicated sub-dependencies:
```
  "dependencies": {
-   "@shopify/cli": "3.50.2",
+   "@shopify/cli": "3.51.0",
  }
```
Update all Node.js dependencies to version 18. (Not a breaking change, since Node.js 18 is already required by Remix v2.) (#1543) by @michenly
🐛 fix undefined menu error (#1533) by @michenly
Add @remix-run/server-runtime dependency. (#1489) by @frandiox

Since Remix is now a peer dependency of @shopify/remix-oxygen, you need to add @remix-run/server-runtime to your dependencies, with the same version as the rest of your Remix dependencies.
```
"dependencies": {
  "@remix-run/react": "2.1.0"
+ "@remix-run/server-runtime": "2.1.0"
  ...
}
```
Updated dependencies [b2a350a7, 9b4f4534, 74ea1dba, 2be9ce82, a9b8bcde, bca112ed, 848c6260, d53b4ed7, 961fd8c6, 2bff9fc7, c8e8f6fd, 8fce70de, f90e4d47, e8cc49fe]:
- @shopify/cli-hydrogen@6.1.0
- @shopify/remix-oxygen@2.0.2
- @shopify/hydrogen@2023.10.3

1.0.0

Major Changes

The Storefront API 2023-10 now returns menu item URLs that include the primaryDomainUrl, instead of defaulting to the Shopify store ID URL (example.myshopify.com). The skeleton template requires changes to check for the primaryDomainUrl: by @blittle

Update the HeaderMenu component to accept a primaryDomainUrl and include it in the internal url check

// app/components/Header.tsx

+ import type {HeaderQuery} from 'storefrontapi.generated';

export function HeaderMenu({
  menu,
+  primaryDomainUrl,
  viewport,
}: {
  menu: HeaderProps['header']['menu'];
+  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
  viewport: Viewport;
}) {

  // ...code

  // if the url is internal, we strip the domain
  const url =
    item.url.includes('myshopify.com') ||
    item.url.includes(publicStoreDomain) ||
+   item.url.includes(primaryDomainUrl)
      ? new URL(item.url).pathname
      : item.url;

   // ...code

}

Update the FooterMenu component to accept a primaryDomainUrl prop and include it in the internal url check

// app/components/Footer.tsx

- import type {FooterQuery} from 'storefrontapi.generated';
+ import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';

function FooterMenu({
  menu,
+  primaryDomainUrl,
}: {
  menu: FooterQuery['menu'];
+  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
}) {
  // code...

  // if the url is internal, we strip the domain
  const url =
    item.url.includes('myshopify.com') ||
    item.url.includes(publicStoreDomain) ||
+   item.url.includes(primaryDomainUrl)
      ? new URL(item.url).pathname
      : item.url;

   // ...code

  );
}

Update the Footer component to accept a shop prop

export function Footer({
  menu,
+ shop,
}: FooterQuery & {shop: HeaderQuery['shop']}) {
  return (
    <footer className="footer">
-      <FooterMenu menu={menu} />
+      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
    </footer>
  );
}

Update Layout.tsx to pass the shop prop

export function Layout({
  cart,
  children = null,
  footer,
  header,
  isLoggedIn,
}: LayoutProps) {
  return (
    <>
      <CartAside cart={cart} />
      <SearchAside />
      <MobileMenuAside menu={header.menu} shop={header.shop} />
      <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
      <main>{children}</main>
      <Suspense>
        <Await resolve={footer}>
-          {(footer) => <Footer menu={footer.menu}  />}
+          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
        </Await>
      </Suspense>
    </>
  );
}

Patch Changes

If you are calling useMatches() in different places of your app to access the data returned by the root loader, you may want to update it to the following pattern to enhance types: (#1289) by @frandiox

// root.tsx

import {useMatches} from '@remix-run/react';
import {type SerializeFrom} from '@shopify/remix-oxygen';

export const useRootLoaderData = () => {
  const [root] = useMatches();
  return root?.data as SerializeFrom<typeof loader>;
};

export function loader(context) {
  // ...
}

This way, you can import useRootLoaderData() anywhere in your app and get the correct type for the data returned by the root loader.

Updated dependencies [81400439, a6f397b6, 3464ec04, 7fc088e2, 867e0b03, ad45656c, f24e3424, 66a48573, 0ae7cbe2, 8198c1be, ad45656c]:
- @shopify/hydrogen@2023.10.0
- @shopify/remix-oxygen@2.0.0
- @shopify/cli-hydrogen@6.0.0

Navigation Menu

Uh oh!

skeleton

1.0.10

Patch Changes

1.0.9

Patch Changes

1.0.8

Patch Changes

1.0.7

Patch Changes

1.0.6

Patch Changes

1.0.5

Patch Changes

1.0.4

Patch Changes

1.0.3

Patch Changes

1.0.2

Patch Changes

1.0.1

Patch Changes

1.0.0

Major Changes

Patch Changes

Uh oh!

FilesExpand file tree

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

skeleton

1.0.10

Patch Changes

1.0.9

Patch Changes

1.0.8

Patch Changes

1.0.7

Patch Changes

1.0.6

Patch Changes

1.0.5

Patch Changes

1.0.4

Patch Changes

1.0.3

Patch Changes

1.0.2

Patch Changes

1.0.1

Patch Changes

1.0.0

Major Changes

Patch Changes