{"version":3,"file":"AppProxyProvider.mjs","sources":["../../../../../../src/react/components/AppProxyProvider/AppProxyProvider.tsx"],"sourcesContent":["import {createContext, useEffect, useState} from 'react';\n\nexport interface AppProxyProviderProps {\n  /**\n   * The URL where the app is hosted. You can set this from the `SHOPIFY_APP_URL` environment variable.\n   */\n  appUrl: string;\n\n  /**\n   * The children to render.\n   */\n  children?: React.ReactNode;\n}\n\ntype FormatUrlFunction = (\n  url: string | undefined,\n  addOrigin?: boolean,\n) => string | undefined;\n\ninterface AppProxyProviderContextProps {\n  appUrl: string;\n  formatUrl: FormatUrlFunction;\n  requestUrl?: URL;\n}\n\nexport const AppProxyProviderContext =\n  createContext<AppProxyProviderContextProps | null>(null);\n\n/**\n * Sets up a page to render behind a Shopify app proxy, enabling JavaScript and CSS to be loaded from the app.\n *\n * > Caution:\n * Because React Router doesn't support URL rewriting, any route using this component should <b>match the pathname of the proxy\n * URL exactly</b>, and <b>end in a trailing slash</b> (e.g., `https://<shop>/apps/proxy/`).\n *\n * @example\n * <caption>Wrap a route with an AppProxyProvider component.</caption>\n * <description>Wrap your route component in the `AppProxyProvider` component and pass in your app URL.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProxyProvider} from '@shopify/shopify-app-react-router/react';\n *\n * export async function loader({ request }) {\n *   await authenticate.public.appProxy(request);\n *\n *   return json({ appUrl: process.env.SHOPIFY_APP_URL });\n * }\n *\n * export default function App() {\n *   const { appUrl } = useLoaderData();\n *\n *   return (\n *     <AppProxyProvider appUrl={appUrl}>\n *       Page content\n *     </AppProxyProvider>\n *   );\n * }\n * ```\n */\nexport function AppProxyProvider(props: AppProxyProviderProps) {\n  const {children, appUrl} = props;\n  const [requestUrl, setRequestUrl] = useState<URL | undefined>();\n\n  useEffect(\n    () => setRequestUrl(new URL(window.location.href)),\n    [setRequestUrl],\n  );\n\n  return (\n    <AppProxyProviderContext.Provider\n      value={{appUrl, requestUrl, formatUrl: formatProxyUrl(requestUrl)}}\n    >\n      <base href={appUrl} />\n\n      {children}\n    </AppProxyProviderContext.Provider>\n  );\n}\n\nfunction formatProxyUrl(requestUrl: URL | undefined): FormatUrlFunction {\n  return (url: string | undefined, addOrigin = true) => {\n    if (!url) {\n      return url;\n    }\n\n    let finalUrl = url;\n\n    if (addOrigin && requestUrl && finalUrl.startsWith('/')) {\n      finalUrl = new URL(`${requestUrl.origin}${url}`).href;\n    }\n    if (!finalUrl.endsWith('/')) {\n      finalUrl = `${finalUrl}/`;\n    }\n\n    return finalUrl;\n  };\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;MAyBa,uBAAuB,GAClC,aAAa,CAAsC,IAAI;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACG,SAAU,gBAAgB,CAAC,KAA4B,EAAA;AAC3D,IAAA,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAC,GAAG,KAAK;IAChC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,EAAmB;IAE/D,SAAS,CACP,MAAM,aAAa,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAClD,CAAC,aAAa,CAAC,CAChB;AAED,IAAA,QACEA,IAAA,CAAC,uBAAuB,CAAC,QAAQ,EAAA,EAC/B,KAAK,EAAE,EAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,CAAC,UAAU,CAAC,EAAC,EAAA,QAAA,EAAA,CAElEC,GAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAE,MAAM,EAAA,CAAI,EAErB,QAAQ,CAAA,EAAA,CACwB;AAEvC;AAEA,SAAS,cAAc,CAAC,UAA2B,EAAA;AACjD,IAAA,OAAO,CAAC,GAAuB,EAAE,SAAS,GAAG,IAAI,KAAI;QACnD,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,OAAO,GAAG;QACZ;QAEA,IAAI,QAAQ,GAAG,GAAG;QAElB,IAAI,SAAS,IAAI,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AACvD,YAAA,QAAQ,GAAG,IAAI,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,CAAA,EAAG,GAAG,CAAA,CAAE,CAAC,CAAC,IAAI;QACvD;QACA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC3B,YAAA,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAG;QAC3B;AAEA,QAAA,OAAO,QAAQ;AACjB,IAAA,CAAC;AACH;;;;"}