@shopify/shopify-app-remix 2.7.0 → 2.8.0

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

@@ -26,6 +26,7 @@ var englishI18n__default = /*#__PURE__*/_interopDefaultLegacy(englishI18n);
  * <caption>Set up AppProvider.</caption>
  * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
  * ```ts
+ * // /app/routes/**\/*.ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
  *
@@ -50,6 +51,7 @@ var englishI18n__default = /*#__PURE__*/_interopDefaultLegacy(englishI18n);
  * <caption>Localize Polaris components.</caption>
  * <description>Pass in a different locale for Polaris to translate its components.</description>
  * ```ts
+ * // /app/routes/**\/*.ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
  *

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

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@remix-run/react');
+var AppProxyProvider = require('../AppProxyProvider/AppProxyProvider.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Sets up a Remix `<Form>` component that works when rendered behind an app proxy.
+ *
+ * Supports any properties accepted by the `<Form>` component.
+ *
+ * @example
+ * <caption>Render a form element in a proxied route.</caption>
+ * <description>Use an `AppProxyForm` within an `AppProxy` to create a form.</description>
+ * ```ts
+ * // /app/routes/**\/*.ts
+ * import {
+ *   AppProxyProvider,
+ *   AppProxyForm,
+ * } from "@shopify/shopify-app-remix/react";
+ * import { authenticate } from "~/shopify.server";
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.public.appProxy(request);
+ *
+ *   return json({ appUrl: process.env.SHOPIFY_APP_URL });
+ * }
+ *
+ * export async function action({ request }) {
+ *   await authenticate.public.appProxy(request);
+ *
+ *   const formData = await request.formData();
+ *   const field = formData.get("field")?.toString();
+ *
+ *   // Perform actions
+ *   if (field) {
+ *     console.log("Field:", field);
+ *   }
+ *
+ *   // Return JSON to the client
+ *   return json({ message: "Success!" });
+ * }
+ *
+ * export default function App() {
+ *   const { appUrl } = useLoaderData();
+ *   const data = useActionData();
+ *
+ *   return (
+ *     <AppProxyProvider appUrl={appUrl}>
+ *       <AppProxyForm action="/">
+ *         <input type="text" name="field" defaultValue={data?.field} />
+ *
+ *         <input type="submit" name="Submit" />
+ *       </AppProxyForm>
+ *     </AppProxyProvider>
+ *   );
+ * }
+ * ```
+ */
+function AppProxyForm(props) {
+  const context = React.useContext(AppProxyProvider.AppProxyProviderContext);
+  if (!context) {
+    throw new Error('AppProxyForm must be used within an AppProxyProvider component');
+  }
+  const {
+    children,
+    action,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(react.Form, {
+    action: context.formatUrl(action, false),
+    ...otherProps,
+    children: children
+  });
+}
+
+exports.AppProxyForm = AppProxyForm;

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

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var AppProxyProvider = require('../AppProxyProvider/AppProxyProvider.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Sets up an `<a />` HTML element that works when rendered behind an app proxy.
+ *
+ * Supports any properties accepted by the `<a />` HTML element.
+ *
+ * @example
+ * <caption>Link to a different route.</caption>
+ * <description>Use an `AppProxyLink` within an `AppProxyProvider` to link to a different proxied route.</description>
+ * ```ts
+ * // /app/routes/**\/*.ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProxyProvider, AppProxyLink} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.public.appProxy(request);
+ *
+ *   return json({ appUrl: process.env.SHOPIFY_APP_URL });
+ * }
+ *
+ * export default function App() {
+ *   const { appUrl } = useLoaderData();
+ *
+ *   return (
+ *     <AppProxyProvider appUrl={appUrl}>
+ *       <AppProxyLink href="/other-proxy-route">Link to another route</AppProxyLink>
+ *     </AppProxyProvider>
+ *   );
+ * }
+ * ```
+ */
+function AppProxyLink(props) {
+  const context = React.useContext(AppProxyProvider.AppProxyProviderContext);
+  if (!context) {
+    throw new Error('AppProxyLink must be used within an AppProxyProvider component');
+  }
+  const {
+    children,
+    href,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx("a", {
+    href: context.formatUrl(href),
+    ...otherProps,
+    children: children
+  });
+}
+
+exports.AppProxyLink = AppProxyLink;

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

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+const AppProxyProviderContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Sets up a page to render behind a Shopify app proxy, enabling JavaScript and CSS to be loaded from the app.
+ *
+ * Also provides components that enable using other components such as links and forms within proxies.
+ *
+ * > Caution:
+ * Because Remix doesn't support URL rewriting, any route using this component should <b>match the pathname of the proxy
+ * URL exactly</b>, and <b>end in a trailing slash</b> (e.g., `https://<shop>/apps/proxy/`).
+ *
+ * @example
+ * <caption>Wrap a route with an AppProxyProvider component.</caption>
+ * <description>Wrap your route component in the `AppProxyProvider` component and pass in your app URL.</description>
+ * ```ts
+ * // /app/routes/**\/*.ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProxyProvider} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.public.appProxy(request);
+ *
+ *   return json({ appUrl: process.env.SHOPIFY_APP_URL });
+ * }
+ *
+ * export default function App() {
+ *   const { appUrl } = useLoaderData();
+ *
+ *   return (
+ *     <AppProxyProvider appUrl={appUrl}>
+ *       Page content
+ *     </AppProxyProvider>
+ *   );
+ * }
+ * ```
+ */
+function AppProxyProvider(props) {
+  const {
+    children,
+    appUrl
+  } = props;
+  const [requestUrl, setRequestUrl] = React.useState();
+  React.useEffect(() => setRequestUrl(new URL(window.location.href)), [setRequestUrl]);
+  return /*#__PURE__*/jsxRuntime.jsxs(AppProxyProviderContext.Provider, {
+    value: {
+      appUrl,
+      requestUrl,
+      formatUrl: formatProxyUrl(requestUrl)
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("base", {
+      href: appUrl
+    }), children]
+  });
+}
+function formatProxyUrl(requestUrl) {
+  return (url, addOrigin = true) => {
+    if (!url) {
+      return url;
+    }
+    let finalUrl = url;
+    if (addOrigin && requestUrl && finalUrl.startsWith('/')) {
+      finalUrl = new URL(`${requestUrl.origin}${url}`).href;
+    }
+    if (!finalUrl.endsWith('/')) {
+      finalUrl = `${finalUrl}/`;
+    }
+    return finalUrl;
+  };
+}
+
+exports.AppProxyProvider = AppProxyProvider;
+exports.AppProxyProviderContext = AppProxyProviderContext;

package/build/cjs/react/index.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var AppProvider = require('./components/AppProvider/AppProvider.js');
+var AppProxyProvider = require('./components/AppProxyProvider/AppProxyProvider.js');
+var AppProxyForm = require('./components/AppProxyForm/AppProxyForm.js');
+var AppProxyLink = require('./components/AppProxyLink/AppProxyLink.js');
 
 
 
 exports.AppProvider = AppProvider.AppProvider;
+exports.AppProxyProvider = AppProxyProvider.AppProxyProvider;
+exports.AppProxyProviderContext = AppProxyProvider.AppProxyProviderContext;
+exports.AppProxyForm = AppProxyForm.AppProxyForm;
+exports.AppProxyLink = AppProxyLink.AppProxyLink;

package/build/cjs/server/adapters/node/index.js

@@ -3,8 +3,8 @@
 var crypto = require('crypto');
 var runtime = require('@shopify/shopify-api/runtime');
 var appBridgeUrl = require('../../authenticate/helpers/app-bridge-url.js');
-require('isbot');
 require('@remix-run/server-runtime');
+require('isbot');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -138,11 +138,7 @@ async function getSessionTokenContext(params, request) {
     })
   });
   if (config.isEmbeddedApp) {
-    const payload = await validateSessionToken.validateSessionToken({
-      config,
-      logger,
-      api
-    }, sessionToken);
+    const payload = await validateSessionToken.validateSessionToken(params, request, sessionToken);
     const dest = new URL(payload.dest);
     const shop = dest.hostname;
     logger.debug('Session token is valid', {

package/build/cjs/server/authenticate/admin/strategies/token-exchange.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var shopifyApi = require('@shopify/shopify-api');
-require('isbot');
 var respondToInvalidSessionToken = require('../../helpers/respond-to-invalid-session-token.js');
+require('isbot');
 require('@remix-run/server-runtime');
 var handleClientError = require('../helpers/handle-client-error.js');
 var triggerAfterAuthHook = require('../helpers/trigger-after-auth-hook.js');

package/build/cjs/server/authenticate/helpers/validate-session-token.js

@@ -2,12 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-async function validateSessionToken({
-  api,
-  logger
-}, token, {
+var respondToInvalidSessionToken = require('./respond-to-invalid-session-token.js');
+
+async function validateSessionToken(params, request, token, {
   checkAudience = true
 } = {}) {
+  const {
+    api,
+    logger
+  } = params;
   logger.debug('Validating session token');
   try {
     const payload = await api.session.decodeSessionToken(token, {
@@ -19,9 +22,10 @@ async function validateSessionToken({
     return payload;
   } catch (error) {
     logger.debug(`Failed to validate session token: ${error.message}`);
-    throw new Response(undefined, {
-      status: 401,
-      statusText: 'Unauthorized'
+    throw respondToInvalidSessionToken.respondToInvalidSessionToken({
+      params,
+      request,
+      retryRequest: true
     });
   }
 }

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

@@ -13,30 +13,15 @@ function authenticateAppProxyFactory(params) {
   } = params;
   return async function authenticate(request) {
     logger.info('Authenticating app proxy request');
-    const {
-      searchParams
-    } = new URL(request.url);
-    const query = Object.fromEntries(searchParams.entries());
-    let isValid = false;
-    try {
-      isValid = await api.utils.validateHmac(query, {
-        signator: 'appProxy'
-      });
-    } catch (error) {
-      logger.info(error.message);
-      throw new Response(undefined, {
-        status: 400,
-        statusText: 'Bad Request'
-      });
-    }
-    if (!isValid) {
+    const url = new URL(request.url);
+    if (!(await validateAppProxyHmac(params, url))) {
       logger.info('App proxy request has invalid signature');
       throw new Response(undefined, {
         status: 400,
         statusText: 'Bad Request'
       });
     }
-    const shop = searchParams.get('shop');
+    const shop = url.searchParams.get('shop');
     const sessionId = api.session.getOfflineId(shop);
     const session = await config.sessionStorage.loadSession(sessionId);
     if (!session) {
@@ -64,8 +49,9 @@ function authenticateAppProxyFactory(params) {
   };
 }
 const liquid = (body, initAndOptions) => {
+  const processedBody = processLiquidBody(body);
   if (typeof initAndOptions !== 'object') {
-    return new Response(body, {
+    return new Response(processedBody, {
       status: initAndOptions || 200,
       headers: {
         'Content-Type': 'application/liquid'
@@ -76,7 +62,7 @@ const liquid = (body, initAndOptions) => {
     layout,
     ...responseInit
   } = initAndOptions || {};
-  const responseBody = layout === false ? `{% layout none %} ${body}` : body;
+  const responseBody = layout === false ? `{% layout none %} ${processedBody}` : processedBody;
   const headers = new Headers(responseInit.headers);
   headers.set('Content-Type', 'application/liquid');
   return new Response(responseBody, {
@@ -84,5 +70,48 @@ const liquid = (body, initAndOptions) => {
     headers
   });
 };
+async function validateAppProxyHmac(params, url) {
+  const {
+    api,
+    logger
+  } = params;
+  try {
+    let searchParams = new URLSearchParams(url.search);
+    if (!searchParams.get('index')) {
+      searchParams.delete('index');
+    }
+    let isValid = await api.utils.validateHmac(Object.fromEntries(searchParams.entries()), {
+      signator: 'appProxy'
+    });
+    if (!isValid) {
+      const cleanPath = url.pathname.replace(/^\//, '').replace(/\/$/, '').replaceAll('/', '.');
+      const data = `routes%2F${cleanPath}`;
+      searchParams = new URLSearchParams(`?_data=${data}&${searchParams.toString().replace(/^\?/, '')}`);
+      isValid = await api.utils.validateHmac(Object.fromEntries(searchParams.entries()), {
+        signator: 'appProxy'
+      });
+      if (!isValid) {
+        const searchParams = new URLSearchParams(`?_data=${data}._index&${url.search.replace(/^\?/, '')}`);
+        isValid = await api.utils.validateHmac(Object.fromEntries(searchParams.entries()), {
+          signator: 'appProxy'
+        });
+      }
+    }
+    return isValid;
+  } catch (error) {
+    logger.info(error.message);
+    throw new Response(undefined, {
+      status: 400,
+      statusText: 'Bad Request'
+    });
+  }
+}
+function processLiquidBody(body) {
+  return body
+  // Add trailing slashes to relative form action URLs
+  .replaceAll(/<(form[^>]+)action="(\/[^"?]+)(\?[^"]+)?">/g, '<$1action="$2/$3">')
+  // Add trailing slashes to relative link href URLs
+  .replaceAll(/<(a[^>]+)href="(\/[^"?]+)(\?[^"]+)?">/g, '<$1href="$2/$3">');
+}
 
 exports.authenticateAppProxyFactory = authenticateAppProxyFactory;

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

@@ -28,7 +28,7 @@ function authenticateCheckoutFactory(params) {
       });
     }
     return {
-      sessionToken: await validateSessionToken.validateSessionToken(params, sessionTokenHeader, {
+      sessionToken: await validateSessionToken.validateSessionToken(params, request, sessionTokenHeader, {
         checkAudience: false
       }),
       cors: ensureCorsHeaders.ensureCORSHeadersFactory(params, request, corsHeaders)

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

@@ -25,7 +25,7 @@ const boundary = {
    */
   error: error.errorBoundary,
   /**
-   * A function that sets the appropriate document repsonse headers.
+   * A function that sets the appropriate document response headers.
    *
    * @example
    * <caption>Catching errors in a route</caption>

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

@@ -11,8 +11,8 @@ var authenticate = require('./authenticate/admin/authenticate.js');
 var authenticate$3 = require('./authenticate/webhooks/authenticate.js');
 var overrideLogger = require('./override-logger.js');
 var addResponseHeaders = require('./authenticate/helpers/add-response-headers.js');
-require('isbot');
 require('@remix-run/server-runtime');
+require('isbot');
 var login = require('./authenticate/login/login.js');
 var factory$1 = require('./unauthenticated/admin/factory.js');
 var factory = require('./authenticate/public/factory.js');

package/build/cjs/server/version.js

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

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

@@ -39,6 +39,7 @@ export interface AppProviderProps extends Omit<PolarisAppProviderProps, 'linkCom
  * <caption>Set up AppProvider.</caption>
  * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
  * ```ts
+ * // /app/routes/**\/*.ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
  *
@@ -63,6 +64,7 @@ export interface AppProviderProps extends Omit<PolarisAppProviderProps, 'linkCom
  * <caption>Localize Polaris components.</caption>
  * <description>Pass in a different locale for Polaris to translate its components.</description>
  * ```ts
+ * // /app/routes/**\/*.ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
  *

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,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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsBlD"}

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

@@ -21,6 +21,7 @@ var RemixPolarisLink_1 = require("../RemixPolarisLink");
  * <caption>Set up AppProvider.</caption>
  * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
  * ```ts
+ * // /app/routes/**\/*.ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
  *
@@ -45,6 +46,7 @@ var RemixPolarisLink_1 = require("../RemixPolarisLink");
  * <caption>Localize Polaris components.</caption>
  * <description>Pass in a different locale for Polaris to translate its components.</description>
  * ```ts
+ * // /app/routes/**\/*.ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
  *

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":";;;;;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,YAExB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;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,YAExB,QAAQ,IACU,IACpB,CACJ,CAAC;AACJ,CAAC;AAtBD,kCAsBC"}

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

@@ -0,0 +1,59 @@
+import { type FormProps } from '@remix-run/react';
+export interface AppProxyFormProps extends FormProps {
+    action: string;
+}
+/**
+ * Sets up a Remix `<Form>` component that works when rendered behind an app proxy.
+ *
+ * Supports any properties accepted by the `<Form>` component.
+ *
+ * @example
+ * <caption>Render a form element in a proxied route.</caption>
+ * <description>Use an `AppProxyForm` within an `AppProxy` to create a form.</description>
+ * ```ts
+ * // /app/routes/**\/*.ts
+ * import {
+ *   AppProxyProvider,
+ *   AppProxyForm,
+ * } from "@shopify/shopify-app-remix/react";
+ * import { authenticate } from "~/shopify.server";
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.public.appProxy(request);
+ *
+ *   return json({ appUrl: process.env.SHOPIFY_APP_URL });
+ * }
+ *
+ * export async function action({ request }) {
+ *   await authenticate.public.appProxy(request);
+ *
+ *   const formData = await request.formData();
+ *   const field = formData.get("field")?.toString();
+ *
+ *   // Perform actions
+ *   if (field) {
+ *     console.log("Field:", field);
+ *   }
+ *
+ *   // Return JSON to the client
+ *   return json({ message: "Success!" });
+ * }
+ *
+ * export default function App() {
+ *   const { appUrl } = useLoaderData();
+ *   const data = useActionData();
+ *
+ *   return (
+ *     <AppProxyProvider appUrl={appUrl}>
+ *       <AppProxyForm action="/">
+ *         <input type="text" name="field" defaultValue={data?.field} />
+ *
+ *         <input type="submit" name="Submit" />
+ *       </AppProxyForm>
+ *     </AppProxyProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function AppProxyForm(props: AppProxyFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppProxyForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyForm.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyForm/AppProxyForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAgBpD"}

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

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

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var data = {
+    name: 'AppProxyForm',
+    descriptionType: 'AppProxyFormGeneratedType',
+    description: '',
+    category: 'App proxy components',
+    type: 'component',
+    isVisualComponent: false,
+    definitions: [],
+    jsDocTypeExamples: ['AppProxyFormGeneratedType'],
+    related: [
+        {
+            name: 'authenticate.public.appProxy',
+            subtitle: 'Authenticating app proxy requests.',
+            url: '/docs/api/shopify-app-remix/authenticate/public/app-proxy',
+            type: 'remix',
+        },
+        {
+            name: 'AppProxyProvider',
+            subtitle: 'Enable JavaScript in pages loaded through app proxies.',
+            url: '/docs/api/shopify-app-remix/app-proxy-components/appproxyprovider',
+            type: 'remix',
+        },
+    ],
+};
+exports.default = data;
+//# sourceMappingURL=AppProxyForm.doc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyForm.doc.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyForm/AppProxyForm.doc.ts"],"names":[],"mappings":";;AAEA,IAAM,IAAI,GAAkC;IAC1C,IAAI,EAAE,cAAc;IACpB,eAAe,EAAE,2BAA2B;IAC5C,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,sBAAsB;IAChC,IAAI,EAAE,WAAW;IACjB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE,EAAE;IACf,iBAAiB,EAAE,CAAC,2BAA2B,CAAC;IAChD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,8BAA8B;YACpC,QAAQ,EAAE,oCAAoC;YAC9C,GAAG,EAAE,2DAA2D;YAChE,IAAI,EAAE,OAAO;SACd;QACD;YACE,IAAI,EAAE,kBAAkB;YACxB,QAAQ,EAAE,wDAAwD;YAClE,GAAG,EAAE,mEAAmE;YACxE,IAAI,EAAE,OAAO;SACd;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}