@shopify/shopify-app-remix 1.2.0 → 1.3.0

package/README.md

@@ -24,11 +24,11 @@ The easiest way to get started with developing Shopify apps is using the [Shopif
 It helps you set up your environment for developing and publishing your apps and extensions.
 
 We strongly recommend using the CLI to create and manage your Remix apps and extensions!
-See the [getting started documentation](https://shopify.dev/docs/apps/getting-started/create) to create your app using the Shopify CLI.
+Refer to the [getting started documentation](https://shopify.dev/docs/apps/getting-started/create) to create your app using the Shopify CLI.
 
 ### Using a plain Remix app
 
-This package works with any Remix app. If you're starting an app from scratch, you can create a brand new Remix app that uses the indie-stack:
+This package works with any Remix app. If you're starting an app from scratch, then you can create a brand new Remix app that uses the indie-stack:
 
 ```bash
 npx create-remix@latest --template remix-run/indie-stack
@@ -142,7 +142,7 @@ export default function App() {
 }
 ```
 
-This component will set up [Polaris](https://polaris.shopify.com/components/utilities/app-provider) and [App Bridge](https://shopify.dev/tools/app-bridge). If your app is not embedded, set the `isEmbeddedApp` prop to `false`.
+This component will set up [Polaris](https://polaris.shopify.com/components/utilities/app-provider) and [App Bridge](https://shopify.dev/tools/app-bridge). If your app isn't embedded, set the `isEmbeddedApp` prop to `false`.
 
 Now that your app is ready to respond to requests, it will also need to add the required `Content-Security-Policy` header directives, as per [our documentation](https://shopify.dev/docs/apps/store/security/iframe-protection).
 To do that, this package provides the `shopify.addDocumentResponseHeaders` method.
@@ -179,7 +179,7 @@ import '@shopify/shopify-app-remix/server/adapters/node';
 ```
 
 before calling `shopifyApp`.
-If you're running on a runtime other than Node, you can simply omit that line.
+If you're running on a runtime other than Node, then you can simply omit that line.
 
 ## Loading your app in admin
 
@@ -210,7 +210,7 @@ If there is no session for the user, the loader will throw the appropriate redir
 
 ## Authenticating cross-origin admin requests
 
-If your Remix server is authenticating an admin extension, a request from the extension to Remix will be cross-origin. Here `shopify.authenticate.admin` provides a cors function to add the required cross-origin headers:
+If your Remix server is authenticating an admin extension, a request from the extension to Remix is cross-origin. Here `shopify.authenticate.admin` provides a cors function to add the required cross-origin headers:
 
 ```ts
 export const loader = async ({request}: LoaderArgs) => {
@@ -387,7 +387,7 @@ export const loader = async ({request}: LoaderArgs) => {
 
 This can be useful if your app exposes checkout or theme extensions and those extensions need to access data from your app.
 
-**Note:** These requests will be cross-origin. So you must use the cross-origin helper returned from `shopify.authenticate.public`.
+**Note:** These requests are cross-origin, so you must use the cross-origin helper returned from `shopify.authenticate.public`.
 
 ## Session Storage
 

package/build/cjs/react/components/AppProvider/AppProvider.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('react');
 var polaris = require('@shopify/polaris');
 var englishI18n = require('@shopify/polaris/locales/en.json');
 var _const = require('../../const.js');
@@ -14,13 +13,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var englishI18n__default = /*#__PURE__*/_interopDefaultLegacy(englishI18n);
 
 /**
- * Sets up the Polaris AppProvider and injects the App Bridge script.
+ * Sets up the Polaris `AppProvider` and injects the App Bridge script.
+ *
+ * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component
+ * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`
+ * component.
  *
  * {@link https://polaris.shopify.com/components/utilities/app-provider}
  * {@link https://shopify.dev/tools/app-bridge}
  *
  * @example
- * Wrap your app in the `AppProvider` component and pass in your API key.
+ * <caption>Set up AppProvider.</caption>
+ * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
  * ```ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
@@ -35,7 +39,34 @@ var englishI18n__default = /*#__PURE__*/_interopDefaultLegacy(englishI18n);
  *   const { apiKey } = useLoaderData();
  *
  *   return (
- *     <AppProvider apiKey={apiKey}>
+ *     <AppProvider isEmbeddedApp apiKey={apiKey}>
+ *       <Outlet />
+ *     </AppProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * <caption>Localize Polaris components.</caption>
+ * <description>Pass in a different locale for Polaris to translate its components.</description>
+ * ```ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProvider} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.admin(request);
+ *
+ *   return json({
+ *     apiKey: process.env.SHOPIFY_API_KEY,
+ *     polarisTranslations: require("@shopify/polaris/locales/fr.json"),
+ *   });
+ * }
+ *
+ * export default function App() {
+ *   const { apiKey, polarisTranslations } = useLoaderData();
+ *
+ *   return (
+ *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
  *       <Outlet />
  *     </AppProvider>
  *   );

package/build/cjs/server/authenticate/admin/billing/request.js

@@ -11,7 +11,8 @@ function requestBillingFactory(params, request, session) {
   return async function requestBilling({
     plan,
     isTest,
-    returnUrl
+    returnUrl,
+    ...overrides
   }) {
     const {
       api,
@@ -30,7 +31,8 @@ function requestBillingFactory(params, request, session) {
         session,
         isTest,
         returnUrl,
-        returnObject: true
+        returnObject: true,
+        ...overrides
       });
     } catch (error) {
       if (error instanceof shopifyApi.HttpResponseError && error.response.code === 401) {

package/build/cjs/server/authenticate/public/appProxy/authenticate.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var factory = require('../../../clients/admin/factory.js');
+var factory$1 = require('../../../clients/storefront/factory.js');
 
 function authenticateAppProxyFactory(params) {
   const {
@@ -42,7 +43,8 @@ function authenticateAppProxyFactory(params) {
       const context = {
         liquid,
         session: undefined,
-        admin: undefined
+        admin: undefined,
+        storefront: undefined
       };
       return context;
     }
@@ -52,6 +54,10 @@ function authenticateAppProxyFactory(params) {
       admin: factory.adminClientFactory({
         params,
         session
+      }),
+      storefront: factory$1.storefrontClientFactory({
+        params,
+        session
       })
     };
     return context;

package/build/cjs/server/boundary/index.js

@@ -13,10 +13,10 @@ const boundary = {
    * A function that handles errors or thrown responses.
    *
    * @example
-   * Catching errors in a route
+   * <caption>Catching errors in a route</caption>
    * ```ts
-   * // app/routes/admin/widgets.ts
-   * import { boundary } from "@shopify/shopify-app-remix";
+   * // /app/routes/admin/widgets.ts
+   * import { boundary } from "@shopify/shopify-app-remix/server";
    *
    * export function ErrorBoundary() {
    *   return boundary.error(useRouteError());
@@ -28,10 +28,10 @@ const boundary = {
    * A function that sets the appropriate document repsonse headers.
    *
    * @example
-   * Catching errors in a route
+   * <caption>Catching errors in a route</caption>
    * ```ts
-   * // app/routes/admin/widgets.ts
-   * import { boundary } from "@shopify/shopify-app-remix";
+   * // /app/routes/admin/widgets.ts
+   * import { boundary } from "@shopify/shopify-app-remix/server";
    *
    * export const headers = (headersArgs) => {
    *   return boundary.headers(headersArgs);

package/build/cjs/server/clients/storefront/factory.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@shopify/shopify-api/runtime');
+
+function storefrontClientFactory({
+  params,
+  session
+}) {
+  const {
+    api
+  } = params;
+  return {
+    graphql: async (query, options = {}) => {
+      const client = new api.clients.Storefront({
+        session,
+        apiVersion: options.apiVersion
+      });
+      const apiResponse = await client.query({
+        data: {
+          query,
+          variables: options === null || options === void 0 ? void 0 : options.variables
+        },
+        tries: options.tries,
+        extraHeaders: options.headers
+      });
+      return new Response(JSON.stringify(apiResponse.body), {
+        headers: runtime.flatHeaders(apiResponse.headers)
+      });
+    }
+  };
+}
+
+exports.storefrontClientFactory = storefrontClientFactory;

package/build/cjs/server/shopify-app.js

@@ -15,17 +15,18 @@ require('isbot');
 var login = require('./authenticate/login/login.js');
 var factory$1 = require('./unauthenticated/admin/factory.js');
 var factory = require('./authenticate/public/factory.js');
+var factory$2 = require('./unauthenticated/storefront/factory.js');
 
 /**
  * Creates an object your app will use to interact with Shopify.
  *
- * @param appConfig Configuration options for your shopify app.  For example, the scopes your app needs.
+ * @param appConfig Configuration options for your Shopify app, such as the scopes your app needs.
  * @returns `ShopifyApp` An object constructed using your appConfig.  It has methods for interacting with Shopify.
  *
  * @example
- * The minimum viable configuration
+ * <caption>The minimum viable configuration</caption>
  * ```ts
- * import { shopifyApp } from "@shopify/shopify-app-remix";
+ * import { shopifyApp } from "@shopify/shopify-app-remix/server";
  *
  * const shopify = shopifyApp({
  *   apiKey: process.env.SHOPIFY_API_KEY!,
@@ -59,7 +60,8 @@ function shopifyApp(appConfig) {
       webhook: authenticate.authenticateWebhookFactory(params)
     },
     unauthenticated: {
-      admin: factory$1.unauthenticatedAdminContextFactory(params)
+      admin: factory$1.unauthenticatedAdminContextFactory(params),
+      storefront: factory$2.unauthenticatedStorefrontContextFactory(params)
     }
   };
   if (isAppStoreApp(shopify, appConfig) || isSingleMerchantApp(shopify, appConfig)) {
@@ -106,7 +108,7 @@ function deriveApi(appConfig) {
 function deriveConfig(appConfig, apiConfig) {
   var _appConfig$distributi, _appConfig$useOnlineT, _appConfig$hooks;
   if (!appConfig.sessionStorage) {
-    throw new shopifyApi.ShopifyError('Please provide a valid session storage. See https://github.com/Shopify/shopify-app-js/blob/main/README.md#session-storage-options for options.');
+    throw new shopifyApi.ShopifyError('Please provide a valid session storage. Refer to https://github.com/Shopify/shopify-app-js/blob/main/README.md#session-storage-options for options.');
   }
   const authPathPrefix = appConfig.authPathPrefix || '/auth';
   appConfig.distribution = (_appConfig$distributi = appConfig.distribution) !== null && _appConfig$distributi !== void 0 ? _appConfig$distributi : types.AppDistribution.AppStore;

package/build/cjs/server/types.js

@@ -19,7 +19,7 @@ let LoginErrorType = /*#__PURE__*/function (LoginErrorType) {
 /**
  * An object your app can use to interact with Shopify.
  *
- * By default, the app's distribution will be AppStore.
+ * By default, the app's distribution is `AppStore`.
  */
 
 exports.AppDistribution = AppDistribution;

package/build/cjs/server/unauthenticated/admin/factory.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var shopifyApi = require('@shopify/shopify-api');
 var factory = require('../../clients/admin/factory.js');
+var getOfflineSession = require('../helpers/get-offline-session.js');
 
 function unauthenticatedAdminContextFactory(params) {
   return async shop => {
-    const offlineSessionId = params.api.session.getOfflineId(shop);
-    const session = await params.config.sessionStorage.loadSession(offlineSessionId);
+    const session = await getOfflineSession.getOfflineSession(shop, params);
     if (!session) {
       throw new shopifyApi.ShopifyError(`Could not find a session for shop ${shop} when creating unauthenticated admin context`);
     }

package/build/cjs/server/unauthenticated/helpers/get-offline-session.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+async function getOfflineSession(shop, {
+  api,
+  config
+}) {
+  const offlineSessionId = api.session.getOfflineId(shop);
+  const session = await config.sessionStorage.loadSession(offlineSessionId);
+  return session;
+}
+
+exports.getOfflineSession = getOfflineSession;

package/build/cjs/server/unauthenticated/storefront/factory.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shopifyApi = require('@shopify/shopify-api');
+var factory = require('../../clients/storefront/factory.js');
+var getOfflineSession = require('../helpers/get-offline-session.js');
+
+function unauthenticatedStorefrontContextFactory(params) {
+  return async shop => {
+    const session = await getOfflineSession.getOfflineSession(shop, params);
+    if (!session) {
+      throw new shopifyApi.ShopifyError(`Could not find a session for shop ${shop} when creating unauthenticated storefront context`);
+    }
+    return {
+      session,
+      storefront: factory.storefrontClientFactory({
+        params,
+        session
+      })
+    };
+  };
+}
+
+exports.unauthenticatedStorefrontContextFactory = unauthenticatedStorefrontContextFactory;

package/build/cjs/server/version.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const SHOPIFY_REMIX_LIBRARY_VERSION = '1.2.0';
+const SHOPIFY_REMIX_LIBRARY_VERSION = '1.3.0';
 
 exports.SHOPIFY_REMIX_LIBRARY_VERSION = SHOPIFY_REMIX_LIBRARY_VERSION;

package/build/ts/react/components/AppProvider/AppProvider.d.ts

@@ -1,30 +1,43 @@
-import React from 'react';
 import { AppProviderProps as PolarisAppProviderProps } from '@shopify/polaris';
 export interface AppProviderProps extends Omit<PolarisAppProviderProps, 'linkComponent' | 'i18n'> {
-    children: React.ReactNode;
     /**
-     * The API key for your Shopify app.
+     * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.
+     *
+     * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment
+     * variable, then you need to pass it from the loader to the component.
      */
     apiKey: string;
     /**
-     * Whether the app is embedded or not. Defaults to `true`.
+     * Whether the app is loaded inside the Shopify Admin. Default is `true`.
+     *
+     * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
      */
     isEmbeddedApp?: boolean;
     /**
-     * The i18n configuration for your Polaris provider.
+     * The internationalization (i18n) configuration for your Polaris provider.
      *
      * {@link https://polaris.shopify.com/components/utilities/app-provider}
      */
     i18n?: PolarisAppProviderProps['i18n'];
+    /**
+     * Used internally by Shopify. You don't need to set this.
+     * @private
+     */
+    __APP_BRIDGE_URL?: string;
 }
 /**
- * Sets up the Polaris AppProvider and injects the App Bridge script.
+ * Sets up the Polaris `AppProvider` and injects the App Bridge script.
+ *
+ * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component
+ * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`
+ * component.
  *
  * {@link https://polaris.shopify.com/components/utilities/app-provider}
  * {@link https://shopify.dev/tools/app-bridge}
  *
  * @example
- * Wrap your app in the `AppProvider` component and pass in your API key.
+ * <caption>Set up AppProvider.</caption>
+ * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
  * ```ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
@@ -39,7 +52,34 @@ export interface AppProviderProps extends Omit<PolarisAppProviderProps, 'linkCom
  *   const { apiKey } = useLoaderData();
  *
  *   return (
- *     <AppProvider apiKey={apiKey}>
+ *     <AppProvider isEmbeddedApp apiKey={apiKey}>
+ *       <Outlet />
+ *     </AppProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * <caption>Localize Polaris components.</caption>
+ * <description>Pass in a different locale for Polaris to translate its components.</description>
+ * ```ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProvider} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.admin(request);
+ *
+ *   return json({
+ *     apiKey: process.env.SHOPIFY_API_KEY,
+ *     polarisTranslations: require("@shopify/polaris/locales/fr.json"),
+ *   });
+ * }
+ *
+ * export default function App() {
+ *   const { apiKey, polarisTranslations } = useLoaderData();
+ *
+ *   return (
+ *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
  *       <Outlet />
  *     </AppProvider>
  *   );

package/build/ts/react/components/AppProvider/AppProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,uBAAuB,EAAE,eAAe,GAAG,MAAM,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;CAMxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsBlD"}
+{"version":3,"file":"AppProvider.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,uBAAuB,EAAE,eAAe,GAAG,MAAM,CAAC;IAC/D;;;;;OAKG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IACvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsBlD"}

package/build/ts/react/components/AppProvider/AppProvider.doc.d.ts

@@ -0,0 +1,4 @@
+import { ReferenceEntityTemplateSchema } from '@shopify/generate-docs';
+declare const data: ReferenceEntityTemplateSchema;
+export default data;
+//# sourceMappingURL=AppProvider.doc.d.ts.map

package/build/ts/react/components/AppProvider/AppProvider.doc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppProvider.doc.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BA6BX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/ts/react/components/AppProvider/AppProvider.doc.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var data = {
+    name: 'AppProvider',
+    descriptionType: 'AppProviderGeneratedType',
+    description: '',
+    category: 'Entrypoints',
+    type: 'component',
+    isVisualComponent: false,
+    definitions: [
+        {
+            title: 'AppProviderProps',
+            description: 'Props for the `AppProvider` component.',
+            type: 'AppProviderProps',
+        },
+    ],
+    jsDocTypeExamples: ['AppProviderGeneratedType'],
+    related: [
+        {
+            name: 'App bridge',
+            subtitle: 'Learn more about App Bridge.',
+            url: '/docs/api/app-bridge-library',
+            type: 'shopify',
+        },
+        {
+            name: 'Polaris',
+            subtitle: 'Learn more about Polaris.',
+            url: '/docs/apps/tools/polaris',
+            type: 'shopify',
+        },
+    ],
+};
+exports.default = data;
+//# sourceMappingURL=AppProvider.doc.js.map

package/build/ts/react/components/AppProvider/AppProvider.doc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppProvider.doc.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.doc.ts"],"names":[],"mappings":";;AAEA,IAAM,IAAI,GAAkC;IAC1C,IAAI,EAAE,aAAa;IACnB,eAAe,EAAE,0BAA0B;IAC3C,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,aAAa;IACvB,IAAI,EAAE,WAAW;IACjB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE;QACX;YACE,KAAK,EAAE,kBAAkB;YACzB,WAAW,EAAE,wCAAwC;YACrD,IAAI,EAAE,kBAAkB;SACzB;KACF;IACD,iBAAiB,EAAE,CAAC,0BAA0B,CAAC;IAC/C,OAAO,EAAE;QACP;YACE,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE,8BAA8B;YACxC,GAAG,EAAE,8BAA8B;YACnC,IAAI,EAAE,SAAS;SAChB;QACD;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,2BAA2B;YACrC,GAAG,EAAE,0BAA0B;YAC/B,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/build/ts/react/components/AppProvider/AppProvider.js

@@ -8,13 +8,18 @@ var en_json_1 = tslib_1.__importDefault(require("@shopify/polaris/locales/en.jso
 var const_1 = require("../../const");
 var RemixPolarisLink_1 = require("../RemixPolarisLink");
 /**
- * Sets up the Polaris AppProvider and injects the App Bridge script.
+ * Sets up the Polaris `AppProvider` and injects the App Bridge script.
+ *
+ * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component
+ * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`
+ * component.
  *
  * {@link https://polaris.shopify.com/components/utilities/app-provider}
  * {@link https://shopify.dev/tools/app-bridge}
  *
  * @example
- * Wrap your app in the `AppProvider` component and pass in your API key.
+ * <caption>Set up AppProvider.</caption>
+ * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
  * ```ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
@@ -29,7 +34,34 @@ var RemixPolarisLink_1 = require("../RemixPolarisLink");
  *   const { apiKey } = useLoaderData();
  *
  *   return (
- *     <AppProvider apiKey={apiKey}>
+ *     <AppProvider isEmbeddedApp apiKey={apiKey}>
+ *       <Outlet />
+ *     </AppProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * <caption>Localize Polaris components.</caption>
+ * <description>Pass in a different locale for Polaris to translate its components.</description>
+ * ```ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProvider} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.admin(request);
+ *
+ *   return json({
+ *     apiKey: process.env.SHOPIFY_API_KEY,
+ *     polarisTranslations: require("@shopify/polaris/locales/fr.json"),
+ *   });
+ * }
+ *
+ * export default function App() {
+ *   const { apiKey, polarisTranslations } = useLoaderData();
+ *
+ *   return (
+ *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
  *       <Outlet />
  *     </AppProvider>
  *   );

package/build/ts/react/components/AppProvider/AppProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":";;;;;AACA,4CAG0B;AAC1B,qFAA2D;AAE3D,qCAA2C;AAC3C,wDAAqD;AA0BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAgB,WAAW,CAAC,KAAuB;IAE/C,IAAA,QAAQ,GAMN,KAAK,SANC,EACR,MAAM,GAKJ,KAAK,OALD,EACN,IAAI,GAIF,KAAK,KAJH,EACJ,KAGE,KAAK,cAHa,EAApB,aAAa,mBAAG,IAAI,KAAA,EACpB,KAEE,KAAK,iBAF0B,EAAjC,gBAAgB,mBAAG,sBAAc,KAAA,EAC9B,YAAY,kBACb,KAAK,EAPH,mEAOL,CADgB,CACP;IAEV,OAAO,CACL,6DACG,aAAa,IAAI,mCAAQ,GAAG,EAAE,gBAAgB,kBAAgB,MAAM,GAAI,EACzE,uBAAC,qBAAkB,uBACb,YAAY,IAChB,aAAa,EAAE,mCAAgB,EAC/B,IAAI,EAAE,IAAI,IAAI,iBAAW,gBAExB,QAAQ,IACU,IACpB,CACJ,CAAC;AACJ,CAAC;AAtBD,kCAsBC"}
+{"version":3,"file":"AppProvider.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":";;;;;AAAA,4CAG0B;AAC1B,qFAA2D;AAE3D,qCAA2C;AAC3C,wDAAqD;AA8BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,SAAgB,WAAW,CAAC,KAAuB;IAE/C,IAAA,QAAQ,GAMN,KAAK,SANC,EACR,MAAM,GAKJ,KAAK,OALD,EACN,IAAI,GAIF,KAAK,KAJH,EACJ,KAGE,KAAK,cAHa,EAApB,aAAa,mBAAG,IAAI,KAAA,EACpB,KAEE,KAAK,iBAF0B,EAAjC,gBAAgB,mBAAG,sBAAc,KAAA,EAC9B,YAAY,kBACb,KAAK,EAPH,mEAOL,CADgB,CACP;IAEV,OAAO,CACL,6DACG,aAAa,IAAI,mCAAQ,GAAG,EAAE,gBAAgB,kBAAgB,MAAM,GAAI,EACzE,uBAAC,qBAAkB,uBACb,YAAY,IAChB,aAAa,EAAE,mCAAgB,EAC/B,IAAI,EAAE,IAAI,IAAI,iBAAW,gBAExB,QAAQ,IACU,IACpB,CACJ,CAAC;AACJ,CAAC;AAtBD,kCAsBC"}

package/build/ts/server/__test-helpers/expect-admin-api-client.d.ts

@@ -1,5 +1,5 @@
 import { Session } from '@shopify/shopify-api';
-import { AdminApiContext } from '../config-types';
+import type { AdminApiContext } from '../clients';
 export declare function expectAdminApiClient(factory: () => Promise<{
     admin: AdminApiContext;
     expectedSession: Session;

package/build/ts/server/__test-helpers/expect-admin-api-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expect-admin-api-client.d.ts","sourceRoot":"","sources":["../../../../src/server/__test-helpers/expect-admin-api-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAG7C,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAOhD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,OAAO,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC,QAqGH"}
+{"version":3,"file":"expect-admin-api-client.d.ts","sourceRoot":"","sources":["../../../../src/server/__test-helpers/expect-admin-api-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAG7C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,YAAY,CAAC;AAOhD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,OAAO,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC,QAqGH"}

package/build/ts/server/__test-helpers/expect-storefront-api-client.d.ts

@@ -0,0 +1,8 @@
+import { Session } from '@shopify/shopify-api';
+import type { StorefrontContext } from '../clients';
+export declare function expectStorefrontApiClient(factory: () => Promise<{
+    storefront: StorefrontContext;
+    expectedSession: Session;
+    actualSession: Session;
+}>): void;
+//# sourceMappingURL=expect-storefront-api-client.d.ts.map

package/build/ts/server/__test-helpers/expect-storefront-api-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expect-storefront-api-client.d.ts","sourceRoot":"","sources":["../../../../src/server/__test-helpers/expect-storefront-api-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAG7C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAKlD,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,OAAO,CAAC;IACrB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC,QAoCH"}

package/build/ts/server/__test-helpers/expect-storefront-api-client.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expectStorefrontApiClient = void 0;
+var tslib_1 = require("tslib");
+var __1 = require("..");
+var request_mock_1 = require("./request-mock");
+var const_1 = require("./const");
+function expectStorefrontApiClient(factory) {
+    var _this = this;
+    it('Storefront client can perform GraphQL Requests', function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var _a, storefront, actualSession, apiResponse, response, _b;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, factory()];
+                case 1:
+                    _a = _c.sent(), storefront = _a.storefront, actualSession = _a.actualSession;
+                    apiResponse = { blogs: { nodes: [{ id: 1 }] } };
+                    return [4 /*yield*/, (0, request_mock_1.mockExternalRequest)({
+                            request: new Request("https://".concat(const_1.TEST_SHOP, "/api/").concat(__1.LATEST_API_VERSION, "/graphql.json"), {
+                                method: 'POST',
+                                headers: {
+                                    'Shopify-Storefront-Private-Token': actualSession.accessToken,
+                                },
+                            }),
+                            response: new Response(JSON.stringify(apiResponse)),
+                        })];
+                case 2:
+                    _c.sent();
+                    return [4 /*yield*/, storefront.graphql('blogs(first: 1) { nodes { id }}')];
+                case 3:
+                    response = _c.sent();
+                    // THEN
+                    expect(response.status).toEqual(200);
+                    _b = expect;
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    _b.apply(void 0, [_c.sent()]).toEqual(apiResponse);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Storefront client uses the correct session', function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var _a, expectedSession, actualSession;
+        return tslib_1.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, factory()];
+                case 1:
+                    _a = _b.sent(), expectedSession = _a.expectedSession, actualSession = _a.actualSession;
+                    // THEN
+                    expect(expectedSession).toEqual(actualSession);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+}
+exports.expectStorefrontApiClient = expectStorefrontApiClient;
+//# sourceMappingURL=expect-storefront-api-client.js.map

package/build/ts/server/__test-helpers/expect-storefront-api-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expect-storefront-api-client.js","sourceRoot":"","sources":["../../../../src/server/__test-helpers/expect-storefront-api-client.ts"],"names":[],"mappings":";;;;AAEA,wBAAsC;AAGtC,+CAAmD;AACnD,iCAAkC;AAElC,SAAgB,yBAAyB,CACvC,OAIE;IALJ,iBAyCC;IAlCC,EAAE,CAAC,gDAAgD,EAAE;;;;wBAEf,qBAAM,OAAO,EAAE,EAAA;;oBAA7C,KAA8B,SAAe,EAA5C,UAAU,gBAAA,EAAE,aAAa,mBAAA;oBAC1B,WAAW,GAAG,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,CAAC,EAAC,EAAE,EAAE,CAAC,EAAC,CAAC,EAAC,EAAC,CAAC;oBAChD,qBAAM,IAAA,kCAAmB,EAAC;4BACxB,OAAO,EAAE,IAAI,OAAO,CAClB,kBAAW,iBAAS,kBAAQ,sBAAkB,kBAAe,EAC7D;gCACE,MAAM,EAAE,MAAM;gCACd,OAAO,EAAE;oCACP,kCAAkC,EAAE,aAAa,CAAC,WAAY;iCAC/D;6BACF,CACF;4BACD,QAAQ,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;yBACpD,CAAC,EAAA;;oBAXF,SAWE,CAAC;oBAGc,qBAAM,UAAU,CAAC,OAAO,CACvC,iCAAiC,CAClC,EAAA;;oBAFK,QAAQ,GAAG,SAEhB;oBAED,OAAO;oBACP,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;oBACrC,KAAA,MAAM,CAAA;oBAAC,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;;oBAA5B,kBAAO,SAAqB,EAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;;;;SACpD,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE;;;;wBAEN,qBAAM,OAAO,EAAE,EAAA;;oBAAlD,KAAmC,SAAe,EAAjD,eAAe,qBAAA,EAAE,aAAa,mBAAA;oBAErC,OAAO;oBACP,MAAM,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;;;;SAChD,CAAC,CAAC;AACL,CAAC;AAzCD,8DAyCC"}