@shopify/shopify-app-remix
Version:
Shopify Remix - to simplify the building of Shopify Apps with Remix
1 lines • 4.14 kB
Source Map (JSON)
{"version":3,"file":"AppProxyProvider.mjs","sources":["../../../../../../src/react/components/AppProxyProvider/AppProxyProvider.tsx"],"sourcesContent":["import {createContext, useEffect, useState} from 'react';\n\n/**\n * Props for the `AppProxyProvider` component.\n * @publicDocs\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 * Also provides components that enable using other components such as links and forms within proxies.\n *\n * > Caution:\n * Because Remix 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-remix/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":";;;MA6Ba,uBAAuB,GAClC,aAAa,CAAsC,IAAI;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;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;;;;"}