Remix v2 (#1289)

* Update Remix versions to 2.0.0-pre.3 * Fix types in Hydrogen * Fix type exports in Oxygen adapter * Mock v2 flags in CLI * Rename V2_MetaFunction type in skeleton * Remove CSS nesting to avoid ESBuild warnings * Remove old error and catch boundaries * Add small wrapper for root data to fix type unknown * ts-ignore jsonify errors remix-run/remix#7246 * Remove vs flags from template * Update to Remix 2.0.0 * Update skeleton types to v2 * Update hello-world types to v2 * Update demo-store types to v2 * Update examples types to v2 * Remove future v2 flags * Minor type update * Remove v2 flags from CLI * Remix deprecated tsconfig in config * Fix typecheck * Stop injecting booleans in remix config. Fix tests * Package lock * Fix types * Remove unused tests * Cleanup * Update package-lock * Update Remix versions to latest nightly * Fix optimistic-ui for Remix v2 * Update package-lock * Remove ts-ignore comments related to JsonifyObject error * Add missing reference to eslint package in skeleton * Update to Remix 2.1.0 * Fix SerializeFrom in JSDoc * Fix typedefs in JSDoc * Use SerializeFrom in demo-store * Changesets * Support generics in JSDoc * Set Remix as a non-pinned peer dependency * Changesets * Update .changeset/smart-ways-destroy.md Co-authored-by: Bret Little <bret.little@shopify.com> * Remove react dep again * Remove template guidelines for Remix v1 * Minor fix * Update changeset --------- Co-authored-by: Bret Little <bret.little@shopify.com>
Shopify · Oct 26, 2023 · 66a4857 · 66a4857
1 parent ad45656
commit 66a4857
Show file tree

Hide file tree

Showing 127 changed files with 6,355 additions and 4,943 deletions.
diff --git a/.changeset/early-taxis-compete.md b/.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.
diff --git a/.changeset/smart-ways-destroy.md b/.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.
diff --git a/.changeset/unlucky-stingrays-live.md b/.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.
diff --git a/examples/customer-api/app/root.tsx b/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};
 }

diff --git a/examples/customer-api/app/routes/_index.tsx b/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}}>

diff --git a/examples/customer-api/app/routes/authorize.tsx b/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('/');
 }
diff --git a/examples/customer-api/app/routes/logout.tsx b/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();
 }
diff --git a/examples/customer-api/package.json b/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",

diff --git a/examples/customer-api/remix.config.js b/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,
-  },
 };
diff --git a/examples/express/app/entry.server.tsx b/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';

diff --git a/examples/express/app/root.tsx b/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'),

diff --git a/examples/express/app/routes/products.$handle.tsx b/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;
 

diff --git a/examples/express/package.json b/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",

diff --git a/examples/express/remix.config.js b/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,
-  },
 };