Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-13 22:11:20 -05:00
Code Issues Activity

Unflag view transitions form handling (#9225)

Browse source
This commit is contained in:
Nate Moore 2023-11-29 09:06:38 -06:00 • committed by GitHub
parent 4b8a42406b
commit c421a3d179
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/odd-rivers-happen.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': major
---
Removes the opt-in `handleForms` property for `<ViewTransitions />`. Form submissions are now handled by default and can be disabled by setting `data-astro-reload` on relevant `<form />` elements.

55
packages/astro/components/ViewTransitions.astro
View file

@ -3,10 +3,14 @@ type Fallback = 'none' | 'animate' | 'swap';
export interface Props { export interface Props {
fallback?: Fallback; fallback?: Fallback;
/** @deprecated handleForms is enabled by default in Astro 4.0
*
* Set `data-astro-reload` on your form to opt-out of the default behavior.
*/
handleForms?: boolean; handleForms?: boolean;
} }
const { fallback = 'animate', handleForms } = Astro.props; const { fallback = 'animate' } = Astro.props;
--- ---
<style is:global> <style is:global>
@ -25,7 +29,6 @@ const { fallback = 'animate', handleForms } = Astro.props;
</style> </style>
<meta name="astro-view-transitions-enabled" content="true" /> <meta name="astro-view-transitions-enabled" content="true" />
<meta name="astro-view-transitions-fallback" content={fallback} /> <meta name="astro-view-transitions-fallback" content={fallback} />
{handleForms ? <meta name="astro-view-transitions-forms" content="true" /> : ''}
<script> <script>
import type { Options } from 'astro:transitions/client'; import type { Options } from 'astro:transitions/client';
import { supportsViewTransitions, navigate } from 'astro:transitions/client'; import { supportsViewTransitions, navigate } from 'astro:transitions/client';
@ -89,33 +92,31 @@ const { fallback = 'animate', handleForms } = Astro.props;
}); });
}); });
if (document.querySelector('[name="astro-view-transitions-forms"]')) { document.addEventListener('submit', (ev) => {
document.addEventListener('submit', (ev) => { let el = ev.target as HTMLElement;
let el = ev.target as HTMLElement; if (el.tagName !== 'FORM' || isReloadEl(el)) {
if (el.tagName !== 'FORM' || isReloadEl(el)) { return;
return; }
}
const form = el as HTMLFormElement; const form = el as HTMLFormElement;
const submitter = ev.submitter; const submitter = ev.submitter;
const formData = new FormData(form); const formData = new FormData(form);
// Use the form action, if defined, otherwise fallback to current path. // Use the form action, if defined, otherwise fallback to current path.
let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname; let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
const method = submitter?.getAttribute('formmethod') ?? form.method; const method = submitter?.getAttribute('formmethod') ?? form.method;
const options: Options = { sourceElement: submitter ?? form }; const options: Options = { sourceElement: submitter ?? form };
if (method === 'get') { if (method === 'get') {
const params = new URLSearchParams(formData as any); const params = new URLSearchParams(formData as any);
const url = new URL(action); const url = new URL(action);
url.search = params.toString(); url.search = params.toString();
action = url.toString(); action = url.toString();
} else { } else {
options.formData = formData; options.formData = formData;
} }
ev.preventDefault(); ev.preventDefault();
navigate(action, options); navigate(action, options);
}); });
}
// @ts-expect-error injected by vite-plugin-transitions for treeshaking // @ts-expect-error injected by vite-plugin-transitions for treeshaking
if (!__PREFETCH_DISABLED__) { if (!__PREFETCH_DISABLED__) {