Remix v2

.changeset/early-taxis-compete.md

@@ -0,0 +1,6 @@
+---
+'demo-store': major
+---
+
+Update to Remix v2. Please check the [Remix v2 release notes](https://github.com/remix-run/remix/releases/tag/remix%402.0.0) to see what needs to be changed in your app code.
+If you were not already using v2 flags, follow the official [Remix migration guide](https://remix.run/docs/en/main/start/v2) before upgrading to v2.

.changeset/smart-ways-destroy.md

@@ -0,0 +1,17 @@
+---
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': major
+'@shopify/create-hydrogen': major
+'@shopify/remix-oxygen': major
+---
+
+Update to Remix v2. Remix is now a peer dependency and its version is no longer pinned. This means that you can upgrade to newer Remix 2.x versions without upgrading Hydrogen.
+
+### Breaking changes
+
+Please check the [Remix v2 release notes](https://github.com/remix-run/remix/releases/tag/remix%402.0.0) to see what needs to be changed in your app code. Common changes include:
+
+- Renaming types prefixed with `V2_`. For example, `V2_MetaFunction` is now `MetaFunction`.
+- Renaming other types like `LoaderArgs` and `ActionArgs`, which are now `LoaderFunctionArgs` and `ActionFunctionArgs` respectively.
+
+If you were not already using v2 flags, follow the official [Remix migration guide](https://remix.run/docs/en/main/start/v2) before upgrading to v2.

.changeset/unlucky-stingrays-live.md

@@ -0,0 +1,23 @@
+---
+'demo-store': patch
+---
+
+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:
+
+```ts
+// 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.

examples/customer-api/app/root.tsx

@@ -1,4 +1,7 @@
-import {type LinksFunction, type LoaderArgs} from '@shopify/remix-oxygen';
+import {
+  type LinksFunction,
+  type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -28,7 +31,7 @@ export const links: LinksFunction = () => {
   ];
 };
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   const layout = await context.storefront.query<{shop: Shop}>(LAYOUT_QUERY);
   return {layout};
 }

examples/customer-api/app/routes/_index.tsx

@@ -1,7 +1,7 @@
 import {Form, useLoaderData, useRouteError} from '@remix-run/react';
-import {type LoaderArgs, json} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs, json} from '@shopify/remix-oxygen';
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   if (await context.customer.isLoggedIn()) {
     const user = await context.customer.query(`
       {
@@ -36,7 +36,7 @@ export function ErrorBoundary() {
 }
 
 export default function () {
-  const {user} = useLoaderData();
+  const {user} = useLoaderData() as any;
 
   return (
     <div style={{marginTop: 24}}>

examples/customer-api/app/routes/authorize.tsx

@@ -1,9 +1,9 @@
-import {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
+import {ActionFunctionArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen';
 
-export async function action({context}: ActionArgs) {
+export async function action({context}: ActionFunctionArgs) {
   return context.customer.login();
 }
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   return context.customer.authorize('/');
 }

examples/customer-api/app/routes/logout.tsx

@@ -1,5 +1,5 @@
-import {ActionArgs} from '@shopify/remix-oxygen';
+import {ActionFunctionArgs} from '@shopify/remix-oxygen';
 
-export async function action({context}: ActionArgs) {
+export async function action({context}: ActionFunctionArgs) {
   return context.customer.logout();
 }

examples/customer-api/package.json

@@ -13,7 +13,7 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "1.19.1",
+    "@remix-run/react": "2.1.0",
     "@shopify/cli": "3.49.2",
     "@shopify/cli-hydrogen": "^5.4.3",
     "@shopify/hydrogen": "^2023.7.11",
@@ -25,7 +25,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "1.19.1",
+    "@remix-run/dev": "2.1.0",
     "@shopify/oxygen-workers-types": "^3.17.2",
     "@shopify/prettier-config": "^1.1.2",
     "@types/eslint": "^8.4.10",

examples/customer-api/remix.config.js

@@ -16,12 +16,4 @@ module.exports = {
   serverModuleFormat: 'esm',
   serverPlatform: 'neutral',
   serverMinify: process.env.NODE_ENV === 'production',
-  future: {
-    v2_dev: true,
-    v2_meta: true,
-    v2_headers: true,
-    v2_errorBoundary: true,
-    v2_routeConvention: true,
-    v2_normalizeFormMethod: true,
-  },
 };

examples/express/app/entry.server.tsx

@@ -7,7 +7,7 @@
 import {PassThrough} from 'node:stream';
 
 import type {AppLoadContext, EntryContext} from '@remix-run/node';
-import {Response} from '@remix-run/node';
+import {Response} from '@remix-run/web-fetch';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToPipeableStream} from 'react-dom/server';

examples/express/app/root.tsx

@@ -1,4 +1,8 @@
-import {defer, type LinksFunction, type LoaderArgs} from '@remix-run/node';
+import {
+  defer,
+  type LinksFunction,
+  type LoaderFunctionArgs,
+} from '@remix-run/node';
 import {
   Links,
   Meta,
@@ -29,7 +33,7 @@ export const links: LinksFunction = () => {
   ];
 };
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   const [customerAccessToken, cartId] = await Promise.all([
     context.session.get('customerAccessToken'),
     context.session.get('cartId'),

examples/express/app/routes/products.$handle.tsx

@@ -1,7 +1,7 @@
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
 
-export async function loader({params, context}: LoaderArgs) {
+export async function loader({params, context}: LoaderFunctionArgs) {
   const {handle} = params;
   const {storefront} = context;
 

examples/express/package.json

@@ -11,10 +11,10 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "1.19.1",
-    "@remix-run/express": "1.19.1",
-    "@remix-run/node": "1.19.1",
-    "@remix-run/react": "1.19.1",
+    "@remix-run/css-bundle": "2.1.0",
+    "@remix-run/express": "2.1.0",
+    "@remix-run/node": "2.1.0",
+    "@remix-run/react": "2.1.0",
     "@shopify/hydrogen": "^2023.7.11",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
@@ -25,8 +25,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "1.19.1",
-    "@remix-run/eslint-config": "1.19.1",
+    "@remix-run/dev": "2.1.0",
+    "@remix-run/eslint-config": "2.1.0",
     "@shopify/cli": "3.49.2",
     "@shopify/cli-hydrogen": "^5.4.3",
     "@types/compression": "^1.7.2",

examples/express/remix.config.js

@@ -6,12 +6,4 @@ module.exports = {
   // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
   serverModuleFormat: 'cjs',
-  future: {
-    v2_dev: true,
-    v2_meta: true,
-    v2_headers: true,
-    v2_errorBoundary: true,
-    v2_routeConvention: true,
-    v2_normalizeFormMethod: true,
-  },
 };