Merge pull request #452 from Shopify/update_remix_dependencies

Chore: updating Remix dependencies to v2
Shopify · Oct 5, 2023 · fc57401 · fc57401
2 parents bd7e8b5 + 384a150
commit fc57401
Show file tree

Hide file tree

Showing 20 changed files with 259 additions and 246 deletions.
diff --git a/.changeset/eleven-carrots-cross.md b/.changeset/eleven-carrots-cross.md
@@ -0,0 +1,5 @@
+---
+'@shopify/shopify-app-remix': patch
+---
+
+Updating Remix dependencies to v2.
diff --git a/packages/shopify-app-remix/README.md b/packages/shopify-app-remix/README.md
@@ -81,11 +81,11 @@ It should export a loader that uses `shopifyApp` to authenticate:
 
 ```ts
 // app/routes/auth/$.tsx
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return null;
@@ -98,12 +98,12 @@ Here is an example:
 
 ```ts
 // root.tsx
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 import {AppProvider} from '@shopify/shopify-app-remix/react';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return json({

diff --git a/packages/shopify-app-remix/docs/generated/generated_docs_data.json b/packages/shopify-app-remix/docs/generated/generated_docs_data.json
diff --git a/packages/shopify-app-remix/docs/generated/generated_static_pages.json b/packages/shopify-app-remix/docs/generated/generated_static_pages.json
@@ -233,7 +233,7 @@
             {
               "title": "/app/routes/auth/$.tsx",
               "language": "ts",
-              "code": "import {LoaderArgs} from '@remix-run/node';\n\nimport shopify from '~/shopify.server';\n\nexport async function loader({request}: LoaderArgs) {\n  await shopify.authenticate.admin(request);\n\n  // App logic goes here\n\n  return null;\n}\n"
+              "code": "import {LoaderFunctionArgs} from '@remix-run/node';\n\nimport shopify from '~/shopify.server';\n\nexport async function loader({request}: LoaderFunctionArgs) {\n  await shopify.authenticate.admin(request);\n\n  // App logic goes here\n\n  return null;\n}\n"
             }
           ]
         }
@@ -268,7 +268,7 @@
             {
               "title": "/app/root.tsx",
               "language": "tsx",
-              "code": "import {LoaderArgs} from '@remix-run/node';\nimport {AppProvider} from '@shopify/shopify-app-remix/react';\n\nimport shopify from '~/shopify.server';\n\nexport async function loader({request}: LoaderArgs) {\n  await shopify.authenticate.admin(request);\n\n  return json({\n    apiKey: process.env.SHOPIFY_API_KEY,\n  });\n}\n\nexport default function App() {\n  const {apiKey} = useLoaderData&lt;typeof loader&gt;();\n\n  return (\n    &lt;html&gt;\n      &lt;head&gt;\n        &lt;Meta /&gt;\n        &lt;Links /&gt;\n      &lt;/head&gt;\n      &lt;body&gt;\n        &lt;AppProvider apiKey={apiKey} isEmbeddedApp&gt;\n          &lt;Outlet /&gt;\n        &lt;/AppProvider&gt;\n      &lt;/body&gt;\n    &lt;/html&gt;\n  );\n}\n"
+              "code": "import {LoaderFunctionArgs} from '@remix-run/node';\nimport {AppProvider} from '@shopify/shopify-app-remix/react';\n\nimport shopify from '~/shopify.server';\n\nexport async function loader({request}: LoaderFunctionArgs) {\n  await shopify.authenticate.admin(request);\n\n  return json({\n    apiKey: process.env.SHOPIFY_API_KEY,\n  });\n}\n\nexport default function App() {\n  const {apiKey} = useLoaderData&lt;typeof loader&gt;();\n\n  return (\n    &lt;html&gt;\n      &lt;head&gt;\n        &lt;Meta /&gt;\n        &lt;Links /&gt;\n      &lt;/head&gt;\n      &lt;body&gt;\n        &lt;AppProvider apiKey={apiKey} isEmbeddedApp&gt;\n          &lt;Outlet /&gt;\n        &lt;/AppProvider&gt;\n      &lt;/body&gt;\n    &lt;/html&gt;\n  );\n}\n"
             }
           ]
         }

diff --git a/packages/shopify-app-remix/docs/staticPages/examples/index/app-provider.example.ts b/packages/shopify-app-remix/docs/staticPages/examples/index/app-provider.example.ts
@@ -1,9 +1,9 @@
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 import {AppProvider} from '@shopify/shopify-app-remix/react';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return json({

diff --git a/packages/shopify-app-remix/docs/staticPages/examples/index/splat-route.example.ts b/packages/shopify-app-remix/docs/staticPages/examples/index/splat-route.example.ts
@@ -1,8 +1,8 @@
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   // App logic goes here

diff --git a/packages/shopify-app-remix/package.json b/packages/shopify-app-remix/package.json
@@ -50,7 +50,7 @@
     "Storefront API"
   ],
   "devDependencies": {
-    "@remix-run/react": "^1.19.0",
+    "@remix-run/react": "^2.0.0",
     "@shopify/generate-docs": "^0.11.1",
     "@shopify/polaris": "^11.8.0",
     "@shopify/react-testing": "^5.1.3",
@@ -67,7 +67,7 @@
     "ts-jest": "^29.1.0"
   },
   "dependencies": {
-    "@remix-run/server-runtime": "^1.17.1",
+    "@remix-run/server-runtime": "^2.0.0",
     "@shopify/shopify-api": "^7.7.0",
     "@shopify/shopify-app-session-storage": "^1.1.10",
     "isbot": "^3.6.5",

diff --git a/packages/shopify-app-remix/src/server/authenticate/admin/billing/types.ts b/packages/shopify-app-remix/src/server/authenticate/admin/billing/types.ts
@@ -52,10 +52,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Call `billing.request` in the `onFailure` callback to immediately request payment.</description>
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   await billing.require({
    *     plans: [MONTHLY_PLAN],
@@ -97,10 +97,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.</description>
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, redirect } from "@remix-run/node";
+   * import { LoaderFunctionArgs, redirect } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   const billingCheck = await billing.require({
    *     plans: [MONTHLY_PLAN, ANNUAL_PLAN],
@@ -154,10 +154,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Change where the merchant is returned to after approving the purchase using the `returnUrl` option.</description>
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   await billing.require({
    *     plans: [MONTHLY_PLAN],
@@ -209,10 +209,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.</description>
    * ```ts
    * // /app/routes/cancel-subscription.ts
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   const billingCheck = await billing.require({
    *     plans: [MONTHLY_PLAN],

diff --git a/packages/shopify-app-remix/src/server/authenticate/admin/types.ts b/packages/shopify-app-remix/src/server/authenticate/admin/types.ts
@@ -33,11 +33,11 @@ interface AdminContextInternal<
    * ```
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session } = await authenticate.admin(request);
    *   return json(await getMyAppData({shop: session.shop));
    * };
@@ -59,11 +59,11 @@ interface AdminContextInternal<
    * ```
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session } = await authenticate.admin(request);
    *   return json(await getMyAppData({user: session.onlineAccessInfo!.id}));
    * };
@@ -91,11 +91,11 @@ interface AdminContextInternal<
    * <description>Use the `cors` helper to ensure your app can respond to requests from admin extensions.</description>
    * ```ts
    * // /app/routes/admin/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session, cors } = await authenticate.admin(request);
    *   return cors(json(await getMyAppData({user: session.onlineAccessInfo!.id})));
    * };
@@ -131,11 +131,11 @@ export interface EmbeddedAdminContext<
    * ```
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken } = await authenticate.public.checkout(
    *     request
    *   );
@@ -156,10 +156,10 @@ export interface EmbeddedAdminContext<
    * <description>Use the `redirect` helper to safely redirect between pages.</description>
    * ```ts
    * // /app/routes/admin/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session, redirect } = await authenticate.admin(request);
    *   return redirect("/");
    * };
@@ -170,10 +170,10 @@ export interface EmbeddedAdminContext<
    * <description>Pass in a `target` option of `_top` or `_parent` to go to an external URL.</description>
    * ```ts
    * // /app/routes/admin/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session, redirect } = await authenticate.admin(request);
    *   return redirect("/", { target: '_parent' });
    * };

diff --git a/packages/shopify-app-remix/src/server/authenticate/public/appProxy/types.ts b/packages/shopify-app-remix/src/server/authenticate/public/appProxy/types.ts
@@ -96,7 +96,7 @@ export interface AppProxyContextWithSession<
    * import { json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { admin } = await authenticate.public.appProxy(request);
    *
    *   const response = await admin.graphql(
@@ -129,7 +129,7 @@ export interface AppProxyContextWithSession<
    * import { json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { admin } = await authenticate.public.appProxy(request);
    *
    *   const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);

diff --git a/packages/shopify-app-remix/src/server/authenticate/public/checkout/types.ts b/packages/shopify-app-remix/src/server/authenticate/public/checkout/types.ts
@@ -25,11 +25,11 @@ export interface CheckoutContext {
    * <description>Get store-specific data using the `sessionToken` object.</description>
    * ```ts
    * // app/routes/public/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken } = await authenticate.public.checkout(
    *     request
    *   );
@@ -47,11 +47,11 @@ export interface CheckoutContext {
    * <description>Use the `cors` helper to ensure your app can respond to checkout extension requests.</description>
    * ```ts
    * // app/routes/public/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken, cors } = await authenticate.public.checkout(
    *     request,
    *     { corsHeaders: ["X-My-Custom-Header"] }

diff --git a/packages/shopify-app-remix/src/server/authenticate/public/types.ts b/packages/shopify-app-remix/src/server/authenticate/public/types.ts
@@ -14,10 +14,10 @@ interface AuthenticatePublicObject {
    * <caption>Authenticating a checkout extension request</caption>
    * ```ts
    * // /app/routes/public/widgets.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken, cors } = await authenticate.public.checkout(
    *     request,
    *   );
@@ -34,10 +34,10 @@ interface AuthenticatePublicObject {
    * <caption>Authenticating an app proxy request</caption>
    * ```ts
    * // /app/routes/public/widgets.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   await authenticate.public.appProxy(
    *     request,
    *   );

diff --git a/packages/shopify-app-remix/src/server/clients/admin/types.ts b/packages/shopify-app-remix/src/server/clients/admin/types.ts
@@ -46,10 +46,10 @@ export interface AdminApiContext<
    *
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { admin, session } = await authenticate.admin(request);
    *   return json(admin.rest.resources.Order.count({ session }));
    * };
@@ -74,10 +74,10 @@ export interface AdminApiContext<
    *
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { admin, session } = await authenticate.admin(request);
    *   const response = await admin.rest.get({ path: "/customers/count.json" });
    *   const customers = await response.json();
@@ -97,10 +97,10 @@ export interface AdminApiContext<
    * <caption>Querying the GraphQL API.</caption>
    * <description>Use `admin.graphql` to make query / mutation requests.</description>
    * ```ts
-   * import { ActionArgs } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { admin } = await authenticate.admin(request);
    *
    *   const response = await admin.graphql(

diff --git a/packages/shopify-app-remix/src/server/clients/storefront/types.ts b/packages/shopify-app-remix/src/server/clients/storefront/types.ts
@@ -12,10 +12,10 @@ export interface StorefrontContext {
    * <caption>Querying the GraphQL API.</caption>
    * <description>Use `storefront.graphql` to make query / mutation requests.</description>
    * ```ts
-   * import { ActionArgs } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { storefront } = await authenticate.storefront(request);
    *
    *   const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);

diff --git a/packages/shopify-app-remix/src/server/config-types.ts b/packages/shopify-app-remix/src/server/config-types.ts
@@ -96,12 +96,12 @@ export interface AppConfigArg<
    * export const authenticate = shopify.authenticate;
    *
    * // /app/routes/webhooks.jsx
-   * import { ActionArgs } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    *
    * import { authenticate } from "../shopify.server";
    * import db from "../db.server";
    *
-   * export const action = async ({ request }: ActionArgs) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { topic, shop } = await authenticate.webhook(request);
    *
    *   switch (topic) {
@@ -200,10 +200,10 @@ export interface AppConfigArg<
    * export const authenticate = shopify.authenticate;
    *
    * // /app/routes/auth/$.jsx
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../../shopify.server";
    *
-   * export async function loader({ request }: LoaderArgs) {
+   * export async function loader({ request }: LoaderFunctionArgs) {
    *   await authenticate.admin(request);
    *
    *   return null