@shopify/shopify-app-remix 2.6.1 → 2.8.0

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"}

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppProxyForm = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_2 = require("@remix-run/react");
+var AppProxyProvider_1 = require("../AppProxyProvider");
+/**
+ * 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) {
+    var context = (0, react_1.useContext)(AppProxyProvider_1.AppProxyProviderContext);
+    if (!context) {
+        throw new Error('AppProxyForm must be used within an AppProxyProvider component');
+    }
+    var children = props.children, action = props.action, otherProps = tslib_1.__rest(props, ["children", "action"]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Form, tslib_1.__assign({ action: context.formatUrl(action, false) }, otherProps, { children: children })));
+}
+exports.AppProxyForm = AppProxyForm;
+//# sourceMappingURL=AppProxyForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyForm.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyForm/AppProxyForm.tsx"],"names":[],"mappings":";;;;;AAAA,+BAAiC;AACjC,0CAAsD;AAEtD,wDAA4D;AAM5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,IAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,0CAAuB,CAAC,CAAC;IAEpD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IAEM,IAAA,QAAQ,GAA2B,KAAK,SAAhC,EAAE,MAAM,GAAmB,KAAK,OAAxB,EAAK,UAAU,kBAAI,KAAK,EAAzC,sBAAiC,CAAD,CAAU;IAEhD,OAAO,CACL,uBAAC,YAAI,qBAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,IAAM,UAAU,cAC3D,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC;AAhBD,oCAgBC"}

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

@@ -0,0 +1,2 @@
+export { AppProxyForm, type AppProxyFormProps } from './AppProxyForm';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppProxyForm = void 0;
+var AppProxyForm_1 = require("./AppProxyForm");
+Object.defineProperty(exports, "AppProxyForm", { enumerable: true, get: function () { return AppProxyForm_1.AppProxyForm; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyForm/index.ts"],"names":[],"mappings":";;;AAAA,+CAAoE;AAA5D,4GAAA,YAAY,OAAA"}

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export interface AppProxyLinkProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+    href: string;
+}
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function AppProxyLink(props: AppProxyLinkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppProxyLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyLink.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyLink/AppProxyLink.tsx"],"names":[],"mappings":";AAIA,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,iBAAiB,CAClB;IACD,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAgBpD"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyLink.doc.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyLink/AppProxyLink.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/AppProxyLink/AppProxyLink.doc.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var data = {
+    name: 'AppProxyLink',
+    descriptionType: 'AppProxyLinkGeneratedType',
+    description: '',
+    category: 'App proxy components',
+    type: 'component',
+    isVisualComponent: false,
+    definitions: [],
+    jsDocTypeExamples: ['AppProxyLinkGeneratedType'],
+    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=AppProxyLink.doc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyLink.doc.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyLink/AppProxyLink.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"}

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppProxyLink = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var AppProxyProvider_1 = require("../AppProxyProvider");
+/**
+ * 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) {
+    var context = (0, react_1.useContext)(AppProxyProvider_1.AppProxyProviderContext);
+    if (!context) {
+        throw new Error('AppProxyLink must be used within an AppProxyProvider component');
+    }
+    var children = props.children, href = props.href, otherProps = tslib_1.__rest(props, ["children", "href"]);
+    return ((0, jsx_runtime_1.jsx)("a", tslib_1.__assign({ href: context.formatUrl(href) }, otherProps, { children: children })));
+}
+exports.AppProxyLink = AppProxyLink;
+//# sourceMappingURL=AppProxyLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyLink.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyLink/AppProxyLink.tsx"],"names":[],"mappings":";;;;;AAAA,+BAAiC;AAEjC,wDAA4D;AAU5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,IAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,0CAAuB,CAAC,CAAC;IAEpD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IAEM,IAAA,QAAQ,GAAyB,KAAK,SAA9B,EAAE,IAAI,GAAmB,KAAK,KAAxB,EAAK,UAAU,kBAAI,KAAK,EAAvC,oBAA+B,CAAD,CAAU;IAE9C,OAAO,CACL,+CAAG,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAM,UAAU,cAC7C,QAAQ,IACP,CACL,CAAC;AACJ,CAAC;AAhBD,oCAgBC"}

package/build/ts/react/components/AppProxyLink/index.d.ts

@@ -0,0 +1,2 @@
+export { AppProxyLink, type AppProxyLinkProps } from './AppProxyLink';
+//# sourceMappingURL=index.d.ts.map

package/build/ts/react/components/AppProxyLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}

package/build/ts/react/components/AppProxyLink/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppProxyLink = void 0;
+var AppProxyLink_1 = require("./AppProxyLink");
+Object.defineProperty(exports, "AppProxyLink", { enumerable: true, get: function () { return AppProxyLink_1.AppProxyLink; } });
+//# sourceMappingURL=index.js.map

package/build/ts/react/components/AppProxyLink/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyLink/index.ts"],"names":[],"mappings":";;;AAAA,+CAAoE;AAA5D,4GAAA,YAAY,OAAA"}

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

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export interface AppProxyProviderProps {
+    /**
+     * The URL where the app is hosted. You can set this from the `SHOPIFY_APP_URL` environment variable.
+     */
+    appUrl: string;
+    /**
+     * The children to render.
+     */
+    children?: React.ReactNode;
+}
+type FormatUrlFunction = (url: string | undefined, addOrigin?: boolean) => string | undefined;
+interface AppProxyProviderContextProps {
+    appUrl: string;
+    formatUrl: FormatUrlFunction;
+    requestUrl?: URL;
+}
+export declare const AppProxyProviderContext: import("react").Context<AppProxyProviderContextProps | 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function AppProxyProvider(props: AppProxyProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AppProxyProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyProvider.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyProvider/AppProxyProvider.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,KAAK,iBAAiB,GAAG,CACvB,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,SAAS,CAAC,EAAE,OAAO,KAChB,MAAM,GAAG,SAAS,CAAC;AAExB,UAAU,4BAA4B;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAkB5D"}

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

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

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var data = {
+    name: 'AppProxyProvider',
+    descriptionType: 'AppProxyProviderGeneratedType',
+    description: '',
+    category: 'Entrypoints',
+    type: 'component',
+    isVisualComponent: false,
+    definitions: [
+        {
+            title: 'AppProxyProviderProps',
+            description: 'Props for the `AppProxyProvider` component.',
+            type: 'AppProxyProviderProps',
+        },
+    ],
+    jsDocTypeExamples: ['AppProxyProviderGeneratedType'],
+    related: [
+        {
+            name: 'authenticate.public.appProxy',
+            subtitle: 'Authenticate app proxy requests.',
+            url: '/docs/api/shopify-app-remix/authenticate/public/app-proxy',
+            type: 'remix',
+        },
+        {
+            name: 'AppProxyForm',
+            subtitle: 'Render form elements in proxies.',
+            url: '/docs/api/shopify-app-remix/app-proxy-components/appproxy-form',
+            type: 'remix',
+        },
+        {
+            name: 'AppProxyLink',
+            subtitle: 'Render link elements in proxies.',
+            url: '/docs/api/shopify-app-remix/app-proxy-components/appproxy-link',
+            type: 'remix',
+        },
+    ],
+};
+exports.default = data;
+//# sourceMappingURL=AppProxyProvider.doc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyProvider.doc.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyProvider/AppProxyProvider.doc.ts"],"names":[],"mappings":";;AAEA,IAAM,IAAI,GAAkC;IAC1C,IAAI,EAAE,kBAAkB;IACxB,eAAe,EAAE,+BAA+B;IAChD,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,aAAa;IACvB,IAAI,EAAE,WAAW;IACjB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE;QACX;YACE,KAAK,EAAE,uBAAuB;YAC9B,WAAW,EAAE,6CAA6C;YAC1D,IAAI,EAAE,uBAAuB;SAC9B;KACF;IACD,iBAAiB,EAAE,CAAC,+BAA+B,CAAC;IACpD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,8BAA8B;YACpC,QAAQ,EAAE,kCAAkC;YAC5C,GAAG,EAAE,2DAA2D;YAChE,IAAI,EAAE,OAAO;SACd;QACD;YACE,IAAI,EAAE,cAAc;YACpB,QAAQ,EAAE,kCAAkC;YAC5C,GAAG,EAAE,gEAAgE;YACrE,IAAI,EAAE,OAAO;SACd;QACD;YACE,IAAI,EAAE,cAAc;YACpB,QAAQ,EAAE,kCAAkC;YAC5C,GAAG,EAAE,gEAAgE;YACrE,IAAI,EAAE,OAAO;SACd;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppProxyProvider = exports.AppProxyProviderContext = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+exports.AppProxyProviderContext = (0, react_1.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) {
+    var children = props.children, appUrl = props.appUrl;
+    var _a = tslib_1.__read((0, react_1.useState)(), 2), requestUrl = _a[0], setRequestUrl = _a[1];
+    (0, react_1.useEffect)(function () { return setRequestUrl(new URL(window.location.href)); }, [setRequestUrl]);
+    return ((0, jsx_runtime_1.jsxs)(exports.AppProxyProviderContext.Provider, { value: { appUrl: appUrl, requestUrl: requestUrl, formatUrl: formatProxyUrl(requestUrl) }, children: [(0, jsx_runtime_1.jsx)("base", { href: appUrl }), children] }));
+}
+exports.AppProxyProvider = AppProxyProvider;
+function formatProxyUrl(requestUrl) {
+    return function (url, addOrigin) {
+        if (addOrigin === void 0) { addOrigin = true; }
+        if (!url) {
+            return url;
+        }
+        var finalUrl = url;
+        if (addOrigin && requestUrl && finalUrl.startsWith('/')) {
+            finalUrl = new URL("".concat(requestUrl.origin).concat(url)).href;
+        }
+        if (!finalUrl.endsWith('/')) {
+            finalUrl = "".concat(finalUrl, "/");
+        }
+        return finalUrl;
+    };
+}
+//# sourceMappingURL=AppProxyProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProxyProvider.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyProvider/AppProxyProvider.tsx"],"names":[],"mappings":";;;;;AAAA,+BAAyD;AAyB5C,QAAA,uBAAuB,GAClC,IAAA,qBAAa,EAAsC,IAAI,CAAC,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,SAAgB,gBAAgB,CAAC,KAA4B;IACpD,IAAA,QAAQ,GAAY,KAAK,SAAjB,EAAE,MAAM,GAAI,KAAK,OAAT,CAAU;IAC3B,IAAA,KAAA,eAA8B,IAAA,gBAAQ,GAAmB,IAAA,EAAxD,UAAU,QAAA,EAAE,aAAa,QAA+B,CAAC;IAEhE,IAAA,iBAAS,EACP,cAAM,OAAA,aAAa,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAA5C,CAA4C,EAClD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,wBAAC,+BAAuB,CAAC,QAAQ,IAC/B,KAAK,EAAE,EAAC,MAAM,QAAA,EAAE,UAAU,YAAA,EAAE,SAAS,EAAE,cAAc,CAAC,UAAU,CAAC,EAAC,aAElE,iCAAM,IAAI,EAAE,MAAM,GAAI,EAErB,QAAQ,IACwB,CACpC,CAAC;AACJ,CAAC;AAlBD,4CAkBC;AAED,SAAS,cAAc,CAAC,UAA2B;IACjD,OAAO,UAAC,GAAuB,EAAE,SAAgB;QAAhB,0BAAA,EAAA,gBAAgB;QAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAO,GAAG,CAAC;QACb,CAAC;QAED,IAAI,QAAQ,GAAG,GAAG,CAAC;QAEnB,IAAI,SAAS,IAAI,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YACxD,QAAQ,GAAG,IAAI,GAAG,CAAC,UAAG,UAAU,CAAC,MAAM,SAAG,GAAG,CAAE,CAAC,CAAC,IAAI,CAAC;QACxD,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,QAAQ,GAAG,UAAG,QAAQ,MAAG,CAAC;QAC5B,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;AACJ,CAAC"}

package/build/ts/react/components/AppProxyProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { AppProxyProvider, type AppProxyProviderProps, AppProxyProviderContext, } from './AppProxyProvider';
+//# sourceMappingURL=index.d.ts.map

package/build/ts/react/components/AppProxyProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,uBAAuB,GACxB,MAAM,oBAAoB,CAAC"}

package/build/ts/react/components/AppProxyProvider/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppProxyProviderContext = exports.AppProxyProvider = void 0;
+var AppProxyProvider_1 = require("./AppProxyProvider");
+Object.defineProperty(exports, "AppProxyProvider", { enumerable: true, get: function () { return AppProxyProvider_1.AppProxyProvider; } });
+Object.defineProperty(exports, "AppProxyProviderContext", { enumerable: true, get: function () { return AppProxyProvider_1.AppProxyProviderContext; } });
+//# sourceMappingURL=index.js.map

package/build/ts/react/components/AppProxyProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/react/components/AppProxyProvider/index.ts"],"names":[],"mappings":";;;AAAA,uDAI4B;AAH1B,oHAAA,gBAAgB,OAAA;AAEhB,2HAAA,uBAAuB,OAAA"}

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

@@ -1,2 +1,5 @@
 export * from './AppProvider';
+export * from './AppProxyProvider';
+export * from './AppProxyForm';
+export * from './AppProxyLink';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

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

@@ -2,4 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./AppProvider"), exports);
+tslib_1.__exportStar(require("./AppProxyProvider"), exports);
+tslib_1.__exportStar(require("./AppProxyForm"), exports);
+tslib_1.__exportStar(require("./AppProxyLink"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/react/components/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/react/components/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,6DAAmC;AACnC,yDAA+B;AAC/B,yDAA+B"}

package/build/ts/server/__test-helpers/const.d.ts

@@ -5,6 +5,6 @@ export declare const SHOPIFY_HOST = "totally-real-host.myshopify.io";
 export declare const BASE64_HOST: string;
 export declare const TEST_SHOP_NAME = "test-shop";
 export declare const TEST_SHOP = "test-shop.myshopify.com";
-export declare const GRAPHQL_URL = "https://test-shop.myshopify.com/admin/api/2024-01/graphql.json";
+export declare const GRAPHQL_URL = "https://test-shop.myshopify.com/admin/api/2024-04/graphql.json";
 export declare const USER_ID = 12345;
 //# sourceMappingURL=const.d.ts.map

package/build/ts/server/__test-helpers/test-config.d.ts

@@ -8,7 +8,7 @@ declare const TEST_CONFIG: {
     readonly apiKey: "testApiKey";
     readonly apiSecretKey: "testApiSecretKey";
     readonly scopes: any;
-    readonly apiVersion: import("@shopify/shopify-api").ApiVersion.January24;
+    readonly apiVersion: import("@shopify/shopify-api").ApiVersion.April24;
     readonly appUrl: "https://my-test-app.myshopify.io";
     readonly logger: {
         readonly log: jest.Mock<any, any, any>;

package/build/ts/server/authenticate/admin/authenticate.admin.doc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"authenticate.admin.doc.d.ts","sourceRoot":"","sources":["../../../../../src/server/authenticate/admin/authenticate.admin.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BAgCX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"authenticate.admin.doc.d.ts","sourceRoot":"","sources":["../../../../../src/server/authenticate/admin/authenticate.admin.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BA6CX,CAAC;AAEF,eAAe,IAAI,CAAC"}