Skip to content

Latest commit

 

History

History
213 lines (164 loc) · 8.92 KB

CHANGELOG.md

File metadata and controls

213 lines (164 loc) · 8.92 KB

skeleton

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

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

    1. 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

}
    1. 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

  );
}
    1. 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>
  );
}
    1. 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]: