diff --git a/packages/apps/shopify-app-remix/docs/generated/generated_docs_data.json b/packages/apps/shopify-app-remix/docs/generated/generated_docs_data.json index 3a8d39e8cd..5480bb49ae 100644 --- a/packages/apps/shopify-app-remix/docs/generated/generated_docs_data.json +++ b/packages/apps/shopify-app-remix/docs/generated/generated_docs_data.json @@ -129,7 +129,7 @@ }, { "name": "AppProxyForm", - "description": "Sets up a Remix `
` component that works when rendered behind an app proxy.\n\nSupports any properties accepted by the `` component.", + "description": "Sets up a Remix `` component that works when rendered on an app proxy page.\n\nSupports any properties accepted by the `` component.\n\nBecause Remix doesn't support URL rewriting, any route using this component should match the pathname of the proxy URL exactly, and end in a trailing slash (e.g., `https:///apps/proxy/`), or set the Remix Form prop `navigate` to `false`.", "category": "App proxy components", "type": "component", "isVisualComponent": false, @@ -157,8 +157,8 @@ "title": "Render a form element in a proxied route", "tabs": [ { - "title": "/app/routes/**\\/*.ts", - "code": "import {\n AppProxyProvider,\n AppProxyForm,\n} from \"@shopify/shopify-app-remix/react\";\nimport { authenticate } from \"~/shopify.server\";\n\nexport async function loader({ request }) {\n await authenticate.public.appProxy(request);\n\n return json({ appUrl: process.env.SHOPIFY_APP_URL });\n}\n\nexport 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\nexport default function App() {\n const { appUrl } = useLoaderData();\n const data = useActionData();\n\n return (\n <AppProxyProvider appUrl={appUrl}>\n <AppProxyForm action=\"/\">\n <input type=\"text\" name=\"field\" defaultValue={data?.field} />\n\n <input type=\"submit\" name=\"Submit\" />\n </AppProxyForm>\n </AppProxyProvider>\n );\n}", + "title": "/app/routes/apps/appProxy.ts", + "code": "import {\n AppProxyProvider,\n AppProxyForm,\n} from \"@shopify/shopify-app-remix/react\";\nimport { authenticate } from \"~/shopify.server\";\n\nexport async function loader({ request }) {\n await authenticate.public.appProxy(request);\n\n return json({ appUrl: process.env.SHOPIFY_APP_URL });\n}\n\nexport 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\nexport 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}", "language": "typescript" } ] @@ -254,13 +254,13 @@ { "name": "AppProxyForm", "subtitle": "Render form elements in proxies.", - "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxy-form", + "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxyform", "type": "remix" }, { "name": "AppProxyLink", "subtitle": "Render link elements in proxies.", - "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxy-link", + "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxylink", "type": "remix" } ], diff --git a/packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx b/packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx index bfff042375..ca69c36ceb 100644 --- a/packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx +++ b/packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx @@ -8,15 +8,19 @@ export interface AppProxyFormProps extends FormProps { } /** - * Sets up a Remix `` component that works when rendered behind an app proxy. + * Sets up a Remix `` component that works when rendered on an app proxy page. * * Supports any properties accepted by the `` component. * + * Because Remix doesn't support URL rewriting, any route using this component should match the pathname of the proxy + * URL exactly, and end in a trailing slash (e.g., `https:///apps/proxy/`), or set the Remix Form prop + * `navigate` to `false`. + * * @example * Render a form element in a proxied route. * Use an `AppProxyForm` within an `AppProxy` to create a form. * ```ts - * // /app/routes/**\/*.ts + * // /app/routes/apps/appProxy.ts * import { * AppProxyProvider, * AppProxyForm, @@ -46,12 +50,11 @@ export interface AppProxyFormProps extends FormProps { * * export default function App() { * const { appUrl } = useLoaderData(); - * const data = useActionData(); * * return ( * - * - * + * + * * * * diff --git a/packages/apps/shopify-app-remix/src/react/components/AppProxyProvider/AppProxyProvider.doc.ts b/packages/apps/shopify-app-remix/src/react/components/AppProxyProvider/AppProxyProvider.doc.ts index da5bb20457..24a9513386 100644 --- a/packages/apps/shopify-app-remix/src/react/components/AppProxyProvider/AppProxyProvider.doc.ts +++ b/packages/apps/shopify-app-remix/src/react/components/AppProxyProvider/AppProxyProvider.doc.ts @@ -25,13 +25,13 @@ const data: ReferenceEntityTemplateSchema = { { name: 'AppProxyForm', subtitle: 'Render form elements in proxies.', - url: '/docs/api/shopify-app-remix/app-proxy-components/appproxy-form', + url: '/docs/api/shopify-app-remix/app-proxy-components/appproxyform', type: 'remix', }, { name: 'AppProxyLink', subtitle: 'Render link elements in proxies.', - url: '/docs/api/shopify-app-remix/app-proxy-components/appproxy-link', + url: '/docs/api/shopify-app-remix/app-proxy-components/appproxylink', type: 'remix', }, ],