@shopify/shopify-app-remix
Version:
Shopify Remix - to simplify the building of Shopify Apps with Remix
1 lines • 5.64 kB
Source Map (JSON)
{"version":3,"file":"AppProvider.mjs","sources":["../../../../../../src/react/components/AppProvider/AppProvider.tsx"],"sourcesContent":["import {\n AppProvider as PolarisAppProvider,\n AppProviderProps as PolarisAppProviderProps,\n} from '@shopify/polaris';\n// This leads to some TS errors, but it does compile to something that works\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport englishI18n from '@shopify/polaris/locales/en.json' with {type: 'json'};\nimport {useNavigate} from '@remix-run/react';\nimport {useEffect} from 'react';\n\nimport {APP_BRIDGE_URL} from '../../const';\nimport {RemixPolarisLink} from '../RemixPolarisLink';\n\n/**\n * Props for the `AppProvider` component.\n * @publicDocs\n */\nexport interface AppProviderProps extends Omit<\n PolarisAppProviderProps,\n 'linkComponent' | 'i18n'\n> {\n /**\n * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n *\n * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment\n * variable, then you need to pass it from the loader to the component.\n */\n apiKey: string;\n /**\n * Whether the app is loaded inside the Shopify Admin. Default is `true`.\n *\n * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n */\n isEmbeddedApp?: boolean;\n /**\n * The internationalization (i18n) configuration for your Polaris provider.\n *\n * {@link https://polaris.shopify.com/components/utilities/app-provider}\n */\n i18n?: PolarisAppProviderProps['i18n'];\n /**\n * Used internally by Shopify. You don't need to set this.\n * @private\n */\n __APP_BRIDGE_URL?: string;\n}\n\n/**\n * Sets up the Polaris `AppProvider` and injects the App Bridge script.\n *\n * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component\n * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`\n * component.\n *\n * {@link https://polaris.shopify.com/components/utilities/app-provider}\n * {@link https://shopify.dev/tools/app-bridge}\n *\n * @example\n * <caption>Set up AppProvider.</caption>\n * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n * await authenticate.admin(request);\n *\n * return json({ apiKey: process.env.SHOPIFY_API_KEY });\n * }\n *\n * export default function App() {\n * const { apiKey } = useLoaderData();\n *\n * return (\n * <AppProvider isEmbeddedApp apiKey={apiKey}>\n * <Outlet />\n * </AppProvider>\n * );\n * }\n * ```\n *\n * @example\n * <caption>Localize Polaris components.</caption>\n * <description>Pass in a different locale for Polaris to translate its components.</description>\n * ```ts\n * // /app/routes/**\\/*.ts\n * import {authenticate} from '~/shopify.server';\n * import {AppProvider} from '@shopify/shopify-app-remix/react';\n *\n * export async function loader({ request }) {\n * await authenticate.admin(request);\n *\n * return json({\n * apiKey: process.env.SHOPIFY_API_KEY,\n * polarisTranslations: require(\"@shopify/polaris/locales/fr.json\"),\n * });\n * }\n *\n * export default function App() {\n * const { apiKey, polarisTranslations } = useLoaderData();\n *\n * return (\n * <AppProvider apiKey={apiKey} i18n={polarisTranslations}>\n * <Outlet />\n * </AppProvider>\n * );\n * }\n * ```\n */\nexport function AppProvider(props: AppProviderProps) {\n const {\n children,\n apiKey,\n i18n,\n isEmbeddedApp = true,\n __APP_BRIDGE_URL = APP_BRIDGE_URL,\n ...polarisProps\n } = props;\n\n const navigate = useNavigate();\n\n useEffect(() => {\n const handleNavigate = (event: Event) => {\n const href = (event.target as HTMLElement)?.getAttribute('href');\n if (href) {\n navigate(href);\n }\n };\n\n addEventListener('shopify:navigate', handleNavigate);\n\n return () => {\n removeEventListener('shopify:navigate', handleNavigate);\n };\n }, [navigate]);\n\n return (\n <>\n {isEmbeddedApp && <script src={__APP_BRIDGE_URL} data-api-key={apiKey} />}\n <PolarisAppProvider\n {...polarisProps}\n linkComponent={RemixPolarisLink}\n i18n={i18n || englishI18n}\n >\n {children}\n </PolarisAppProvider>\n </>\n );\n}\n"],"names":["_jsxs","_Fragment","_jsx","PolarisAppProvider"],"mappings":";;;;;;;;AAgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;IACjD,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAG,cAAc,EACjC,GAAG,YAAY,EAChB,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,CAAC,KAAY,KAAI;YACtC,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,EAAE,YAAY,CAAC,MAAM,CAAC;YAChE,IAAI,IAAI,EAAE;gBACR,QAAQ,CAAC,IAAI,CAAC;YAChB;AACF,QAAA,CAAC;AAED,QAAA,gBAAgB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AAEpD,QAAA,OAAO,MAAK;AACV,YAAA,mBAAmB,CAAC,kBAAkB,EAAE,cAAc,CAAC;AACzD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,aAAa,IAAIC,GAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,gBAAgB,EAAA,cAAA,EAAgB,MAAM,EAAA,CAAI,EACzEA,IAACC,aAAkB,EAAA,EAAA,GACb,YAAY,EAChB,aAAa,EAAE,gBAAgB,EAC/B,IAAI,EAAE,IAAI,IAAI,WAAW,EAAA,QAAA,EAExB,QAAQ,EAAA,CACU,CAAA,EAAA,CACpB;AAEP;;;;"}