@shopify/shopify-app-remix
Version:
Shopify Remix - to simplify the building of Shopify Apps with Remix
1 lines • 3.23 kB
Source Map (JSON)
{"version":3,"file":"AppProxyForm.mjs","sources":["../../../../../../src/react/components/AppProxyForm/AppProxyForm.tsx"],"sourcesContent":["import {forwardRef, useContext} from 'react';\nimport {Form, type FormProps} from '@remix-run/react';\n\nimport {AppProxyProviderContext} from '../AppProxyProvider';\n\nexport interface AppProxyFormProps extends FormProps {\n action: string;\n}\n\n/**\n * Sets up a Remix `<Form>` component that works when rendered on an app proxy page.\n *\n * Supports any properties accepted by the `<Form>` component.\n *\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/`), or set the Remix Form prop\n * `navigate` to `false`.\n *\n * @example\n * <caption>Render a form element in a proxied route.</caption>\n * <description>Use an `AppProxyForm` within an `AppProxy` to create a form.</description>\n * ```ts\n * // /app/routes/apps/appProxy.ts\n * import {\n * AppProxyProvider,\n * AppProxyForm,\n * } from \"@shopify/shopify-app-remix/react\";\n * import { authenticate } from \"~/shopify.server\";\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 async function action({ request }) {\n * await authenticate.public.appProxy(request);\n *\n * const formData = await request.formData();\n * const field = formData.get(\"field\")?.toString();\n *\n * // Perform actions\n * if (field) {\n * console.log(\"Field:\", field);\n * }\n *\n * // Return JSON to the client\n * return json({ message: \"Success!\" });\n * }\n *\n * export default function App() {\n * const { appUrl } = useLoaderData();\n *\n * return (\n * <AppProxyProvider appUrl={appUrl}>\n * <AppProxyForm action=\"/apps/appProxy\" method=\"post\">\n * <input type=\"text\" name=\"field\" />\n *\n * <input type=\"submit\" name=\"Submit\" />\n * </AppProxyForm>\n * </AppProxyProvider>\n * );\n * }\n * ```\n * @publicDocs\n */\nexport const AppProxyForm = forwardRef<HTMLFormElement, AppProxyFormProps>(\n function AppProxyForm(props, ref) {\n const context = useContext(AppProxyProviderContext);\n\n if (!context) {\n throw new Error(\n 'AppProxyForm must be used within an AppProxyProvider component',\n );\n }\n\n const {children, action, ...otherProps} = props;\n\n return (\n <Form action={context.formatUrl(action, false)} {...otherProps} ref={ref}>\n {children}\n </Form>\n );\n },\n);\n"],"names":["_jsx"],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDG;AACI,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG,EAAA;AAC9B,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,uBAAuB,CAAC;IAEnD,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE;IACH;IAEA,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,UAAU,EAAC,GAAG,KAAK;IAE/C,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,EAAA,GAAM,UAAU,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EACrE,QAAQ,EAAA,CACJ;AAEX,CAAC;;;;"}