Skip to content

CHANGELOG.md

Latest commit

 

History

History
609 lines (454 loc) · 29.3 KB

CHANGELOG.md

File metadata and controls

609 lines (454 loc) · 29.3 KB

demo-store

2.1.1

Patch Changes

  • Hydrogen is now compatible with TypeScript v5. (#1240) by @frandiox

    If you have typescript as a dev dependency in your app, it is recommended to change its version as follows:

      "devDependencies": {
    ...
-   "typescript": "^4.9.5",
+   "typescript": "^5.2.2",
  },

    After installing the new version of TypeScript, you may need to update the version used in your IDE. For example, in VSCode, you can do this by clicking on the { } icon in the bottom-right toolbar next to the language mode (generally, { } TypeScript JSX when editing a .tsx file).

  • Updated dependencies [3491fd5c, 06516ee9, d67ce6aa, 1b7e0016, ee6e2920, 17892a72, 1a7762bc, 1f8acd7b]:

    • @shopify/cli-hydrogen@5.2.1
    • @shopify/hydrogen@2023.7.4

2.1.0

Minor Changes

  • Support Remix Hot Module Replacement (HMR) and Hot Data Revalidation (HDR). (#1187) by @frandiox

    Start using it with the following changes to your project:

    1. Upgrade to the latest Hydrogen version and Remix 1.19.1.

    2. Enable the v2 dev server in remix.config.js:

    // ...
future: {
+ v2_dev: true,
  v2_meta: true,
  v2_headers: true,
  // ...
}
    1. Add Remix' <LiveReload /> component if you don't have it to your root.jsx or root.tsx file:
    import {
  Outlet,
  Scripts,
+ LiveReload,
  ScrollRestoration,
} from '@remix-run/react';

// ...

export default function App() {
  // ...

  return (
    <html>
      <head>
       {/* ...  */}
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
+       <LiveReload />
      </body>
    </html>
  );
}

export function ErrorBoundary() {
  // ...

  return (
    <html>
      <head>
        {/* ... */}
      </head>
      <body>
        Error!
        <Scripts />
+       <LiveReload />
      </body>
    </html>
  );
}

Patch Changes

2.0.2

Patch Changes

  • Update @shopify/oxygen-workers-types dependencies (#1208) by @juanpprieto

  • Fix demo-store analytics (#1177) by @wizardlyhel

  • Updated dependencies [b29c85d0, 21eb9dac]:

    • @shopify/hydrogen@2023.7.2
    • @shopify/cli-hydrogen@5.1.2
    • @shopify/remix-oxygen@1.1.3

2.0.1

Patch Changes

  • Update to Remix v1.19.1. (#1172) by @frandiox

    See changes for 1.18 and 1.19.

  • It's recommended to update @shopify/cli: (#1172) by @frandiox

    -"@shopify/cli": "3.47.5"
+"@shopify/cli": "3.48.0"

    Also, for projects using Remix v1 Error Boundary convention, remove the deprecated ErrorBoundaryComponent type (or update to the v2 convention):

    -export const ErrorBoundary: ErrorBoundaryComponent = ({error}) => {
+export const ErrorBoundary = ({error}: {error: Error}) => {

  • Updated dependencies [b7a8ecf6, ef809228, 1015f170, 076bab7d]:

    • @shopify/remix-oxygen@1.1.2
    • @shopify/hydrogen@2023.7.1
    • @shopify/cli-hydrogen@5.1.1

2.0.0

Major Changes

  • Add .env file to Remix watcher to allow reloading environment variables on file save. In remix.config.js: (#997) by @frandiox

    -watchPaths: ['./public'],
+watchPaths: ['./public', './.env'],

Patch Changes

1.0.4

Patch Changes

  • Update Remix to the latest version (1.17.1). (#852) by @frandiox

    When updating your app, remember to also update your Remix dependencies to 1.17.1 in your package.json file:

    -"@remix-run/react": "1.15.0",
+"@remix-run/react": "1.17.1",

-"@remix-run/dev": "1.15.0",
-"@remix-run/eslint-config": "1.15.0",
+"@remix-run/dev": "1.17.1",
+"@remix-run/eslint-config": "1.17.1",

  • Updated dependencies [f29e178a]:

    • @shopify/remix-oxygen@1.1.1
    • @shopify/hydrogen@2023.4.5
    • @shopify/cli-hydrogen@5.0.1

1.0.3

Patch Changes

  • A default https:// protocol is now added automatically to storeDomain if missing. (#985) by @frandiox

  • Start using GraphQL code generation. This allows us to have full-stack type-safety and better developer experience. (#937) by @frandiox

    As a result of the above, we've fixed issues where the frontend was accessing data that was not correctly fetched from the Storefront API. For example, missing product.vendor or accessing totalPrice instead of totalPriceV2.

    To enable the unstable codegen feature in your project, run your dev command as shopify hydrogen dev --codegen-unstable. See the changes associated here for examples.

  • Update the demostore to not cache the customer query. This is important to update in your app if you copied the logic from the demo store. (#950) by @blittle

  • Remove wrong cache control headers from route. Demo store is setting cache-control header when it is not suppose to. The demo store server renders cart information. Cart information is consider personalized content and should never be cached in any way. (#991) by @wizardlyhel

    Route ($locale).api.countries.tsx can have cache control header because it is an API endpoint that doesn't render the cart.

  • Make storefrontApiVersion parameter optional. By default, it will use the current version of Hydrogen as the Storefront API version. (#984) by @frandiox

  • Updated dependencies [b2195520, 4c5cdfd6, 7b4afea2, 42683d0a, 7d6a1a7c, 808ceb51, 442f602a, be912b2f, 8ccf6dbe, 428c78dc, 93a7c3c6, 5124d618]:

    • @shopify/cli-hydrogen@5.0.0
    • @shopify/hydrogen@2023.4.4
    • @shopify/remix-oxygen@1.1.0

1.0.2

Patch Changes

  • Fix release (#926) by @blittle

  • Updated dependencies [7aaa4e86]:

    • @shopify/cli-hydrogen@4.2.1
    • @shopify/hydrogen@2023.4.3
    • @shopify/remix-oxygen@1.0.7

1.0.1

Patch Changes

1.0.0

Major Changes

  • All routes were changed from having a $lang path parameter to having a $locale path parameter. See #860 for more details. (#864) by @frehner

Patch Changes

  • Add .shopify to the .gitignore file to support upcoming CLI changes (#784) by @graygilmore

  • Move GraphQL fragments from the beginning of the template literal to the end of it, so that we don't get the EOF error in VSCode. (#833) by @frehner

  • Updated Tailwind configuration file with a new dynamic opacity placeholder for colors (#851) by @blanklob

  • Updated dependencies [685bb696, 025385b6, 35a87107, 33f33edd, 0a009a3b, 9c2e67c5, 9c2e67c5, 3d458e2b]:

    • @shopify/cli-hydrogen@4.1.2
    • @shopify/remix-oxygen@1.0.6
    • @shopify/hydrogen@2023.4.1

0.2.1

Patch Changes

  • Updated dependencies [2039a4a, 82b6af7, 361879e]:
    • @shopify/cli-hydrogen@4.1.1
    • @shopify/hydrogen@2023.4.0

0.2.0

Minor Changes

Patch Changes

  • Adopt Remix v2_meta future flag (#738) by @wizardlyhel

    v2_meta migration steps

    1. For any routes that you used meta route export, convert it to the V2_MetaFunction equivalent. Notice that the package name in the import statement has also changed to '@remix-run/react':

      - import {type MetaFunction} from '@shopify/remix-oxygen';
+ import {type V2_MetaFunction} from '@remix-run/react';

- export const meta: MetaFunction = () => {
+ export const meta: V2_MetaFunction = () => {
-   return {title: 'Login'};
+   return [{title: 'Login'}];
  };

    2. If you are using data from loaders, pass the loader type to the V2_MetaFunction generic:

      - export const meta: MetaFunction = ({data}) => {
+ export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
-   return {title: `Order ${data?.order?.name}`};
+   return [{title: `Order ${data?.order?.name}`}];
  };

    3. If you are using meta route export in root, convert it to Global Meta

      // app/root.tsx

- export const meta: MetaFunction = () => ({
-   charset: 'utf-8',
-   viewport: 'width=device-width,initial-scale=1',
- });

export default function App() {

  return (
    <html lang={locale.language}>
      <head>
+       <meta charSet="utf-8" />
+       <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Seo />
        <Meta />

  • Adopt v2_routeConvention future flag (#747) by @wizardlyhel

    v2_routeConventions migration steps

    Remix v2 route conventions are just file renames. We just need to ensure when changing file name and file location, the import paths of other files are also updated.

    Go to Remix docs for more details on the V2 route convention.

    Rename and move the following files in the routes folder to adopt to V2 route convention.

    Before After (V2 route convention) 
    app/routes/
  ├─ [sitemap.xml].tsx
  ├─ [robots.txt].tsx
  └─ ($lang)/
      ├─ $shopid/orders/$token/
      │   └─ authenticate.tsx
      ├─ account/
      │   ├─ __private/
      │   │   ├─ address/
      │   │   │   └─ $id.tsx
      │   │   ├─ orders.$id.tsx
      │   │   ├─ edit.tsx
      │   │   └─ logout.ts
      │   └─ __public/
      │       ├─ recover.tsx
      │       ├─ login.tsx
      │       ├─ register.tsx
      │       ├─ activate.$id.$activationToken.tsx
      │       └─ reset.$id.$resetToken.tsx
      ├─ api/
      │   ├─ countries.tsx
      │   └─ products.tsx
      ├─ collections/
      │   ├─ index.tsx
      │   ├─ $collectionHandle.tsx
      │   └─ all.tsx
      ├─ journal/
      │   ├─ index.tsx
      │   └─ $journalHandle.tsx
      ├─ pages
      │   └─ $pageHandle.tsx
      ├─ policies/
      │   ├─ index.tsx
      │   └─ $policyHandle.tsx
      ├─ products/
      │   ├─ index.tsx
      │   └─ $productHandle.tsx
      ├─ $.tsx
      ├─ account.tsx
      ├─ cart.tsx
      ├─ cart.$lines.tsx
      ├─ discount.$code.tsx
      ├─ featured-products.tsx
      ├─ index.tsx
      └─ search.tsx
    		 
    app/routes/
  ├─ [sitemap.xml].tsx
  ├─ [robots.txt].tsx
  ├─ ($lang).$shopid.orders.$token.authenticate.tsx
  ├─ ($lang).account.address.$id.tsx
  ├─ ($lang).account.orders.$id.tsx
  ├─ ($lang).account.edit.tsx
  ├─ ($lang).account.logout.ts
  ├─ ($lang).account.recover.tsx
  ├─ ($lang).account.login.tsx
  ├─ ($lang).account.register.tsx
  ├─ ($lang).account.activate.$id.$activationToken.tsx
  ├─ ($lang).account.reset.$id.$resetToken.tsx
  ├─ ($lang).api.countries.tsx
  ├─ ($lang).api.products.tsx
  ├─ ($lang).collections._index.tsx
  ├─ ($lang).collections.$collectionHandle.tsx
  ├─ ($lang).collections.all.tsx
  ├─ ($lang).journal._index.tsx
  ├─ ($lang).journal.$journalHandle.tsx
  ├─ ($lang).pages.$pageHandle.tsx
  ├─ ($lang).policies._index.tsx
  ├─ ($lang).policies.$policyHandle.tsx
  ├─ ($lang).products._index.tsx
  ├─ ($lang).products.$productHandle.tsx
  ├─ $.tsx
  ├─ ($lang)._index.tsx
  ├─ ($lang).account.tsx
  ├─ ($lang).cart.tsx
  ├─ ($lang).cart.$lines.tsx
  ├─ ($lang).discount.$code.tsx
  ├─ ($lang).featured-products.tsx
  └─ ($lang).search.tsx

    Optional

    If you want to continue using nested folder routes but have the v2_routeConvention flag turned on, you may consider using the npm package @remix-run/v1-route-convention.

    If you like the flat route convention but still wants a hybrid style of nested route folder, you may consider using the npm package remix-flat-routes

  • Adopt Remix unstable_tailwind and unstable_postcss future flags for the Demo Store template. (#751) by @frandiox

    unstable_tailwind and unstable_postcss migration steps

    1. Move the file <root>/styles/app.css to <root>/app/styles/app.css, and remove it from .gitignore.

    2. Add "browserslist": ["defaults"] to your package.json, or your preferred value from Browserslist.

    3. Replace the build and dev scripts in your package.json with the following:

      Before

       "scripts": {
   "build": "npm run build:css && shopify hydrogen build",
   "build:css": "postcss styles --base styles --dir app/styles --env production",
   "dev": "npm run build:css && concurrently -g --kill-others-on-fail -r npm:dev:css \"shopify hydrogen dev\"",
   "dev:css": "postcss styles --base styles --dir app/styles -w",
   ...
 }

      After

       "scripts": {
   "dev": "shopify hydrogen dev",
   "build": "shopify hydrogen build",
   ...
 }

    You can also remove dependencies like concurrently if you don't use them anywhere else.

  • Forwards search params of /discount/<code> route to a redirect route. (#766) by @lneicelis

  • Carts created in liquid will soon be compatible with the Storefront API and vice versa, making it possible to share carts between channels. (#721) by @scottdixon

    This change updates the Demo Store to use Online Store's cart cookie (instead of sessions) which prevents customers from losing carts when merchants migrate to/from Hydrogen.

  • Bump internal Remix dependencies to 1.15.0. (#728) by @wizardlyhel

    Recommendations to follow:

    • Upgrade all the Remix packages in your app to 1.15.0.
    • Enable Remix v2 future flags at your earliest convenience following the official guide.

  • Updated CLI prompts. It's recommended to update your version of @shopify/cli to 3.45.0 when updating @shopify/cli-hydrogen. (#733) by @frandiox

    "dependencies": {
-  "@shopify/cli": "3.x.x",
+  "@shopify/cli": "3.45.0",
}

  • Adopt Remix v2_errorBoundary future flag (#729) by @wizardlyhel

    v2_errorBoundary migration steps

    1. Remove all CatchBoundary route exports

    2. Handle route level errors with ErrorBoundary

      Before:

      // app/root.tsx
export function ErrorBoundary({error}: {error: Error}) {
  const [root] = useMatches();
  const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;

  return (
    <html lang={locale.language}>
      <head>
        <title>Error</title>
        <Meta />
        <Links />
      </head>
      <body>
        <Layout layout={root?.data?.layout}>
          <GenericError error={error} />
        </Layout>
        <Scripts />
      </body>
    </html>
  );
}

      After:

      // app/root.tsx
import {isRouteErrorResponse, useRouteError} from '@remix-run/react';

export function ErrorBoundary({error}: {error: Error}) {
  const [root] = useMatches();
  const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
  const routeError = useRouteError();
  const isRouteError = isRouteErrorResponse(routeError);

  let title = 'Error';
  let pageType = 'page';

  // We have an route error
  if (isRouteError) {
    title = 'Not found';

    // We have a page not found error
    if (routeError.status === 404) {
      pageType = routeError.data || pageType;
    }
  }

  return (
    <html lang={locale.language}>
      <head>
        <title>{title}</title>
        <Meta />
        <Links />
      </head>
      <body>
        <Layout
          layout={root?.data?.layout}
          key={`${locale.language}-${locale.country}`}
        >
          {isRouteError ? (
            <>
              {routeError.status === 404 ? (
                <NotFound type={pageType} />
              ) : (
                <GenericError
                  error={{
                    message: `${routeError.status} ${routeError.data}`,
                  }}
                />
              )}
            </>
          ) : (
            <GenericError
              error={error instanceof Error ? error : undefined}
            />
          )}
        </Layout>
        <Scripts />
      </body>
    </html>
  );
}

  • Updated dependencies [e6e6c2d, 475a39c, 1f8526c, 0f4d562, 737f83e, 2d4c5d9, 68a6028]:

    • @shopify/cli-hydrogen@4.1.0
    • @shopify/hydrogen@2023.1.7
    • @shopify/remix-oxygen@1.0.5