Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -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 {
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;
}
const { fallback = 'animate', handleForms } = Astro.props;
const { fallback = 'animate' } = Astro.props;
---
<style is:global>
@ -25,7 +29,6 @@ const { fallback = 'animate', handleForms } = Astro.props;
</style>
<meta name="astro-view-transitions-enabled" content="true" />
<meta name="astro-view-transitions-fallback" content={fallback} />
{handleForms ? <meta name="astro-view-transitions-forms" content="true" /> : ''}
<script>
import type { Options } 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) => {
let el = ev.target as HTMLElement;
if (el.tagName !== 'FORM' || isReloadEl(el)) {
return;
}
document.addEventListener('submit', (ev) => {
let el = ev.target as HTMLElement;
if (el.tagName !== 'FORM' || isReloadEl(el)) {
return;
}
const form = el as HTMLFormElement;
const submitter = ev.submitter;
const formData = new FormData(form);
// Use the form action, if defined, otherwise fallback to current path.
let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
const method = submitter?.getAttribute('formmethod') ?? form.method;
const form = el as HTMLFormElement;
const submitter = ev.submitter;
const formData = new FormData(form);
// Use the form action, if defined, otherwise fallback to current path.
let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
const method = submitter?.getAttribute('formmethod') ?? form.method;
const options: Options = { sourceElement: submitter ?? form };
if (method === 'get') {
const params = new URLSearchParams(formData as any);
const url = new URL(action);
url.search = params.toString();
action = url.toString();
} else {
options.formData = formData;
}
ev.preventDefault();
navigate(action, options);
});
}
const options: Options = { sourceElement: submitter ?? form };
if (method === 'get') {
const params = new URLSearchParams(formData as any);
const url = new URL(action);
url.search = params.toString();
action = url.toString();
} else {
options.formData = formData;
}
ev.preventDefault();
navigate(action, options);
});
// @ts-expect-error injected by vite-plugin-transitions for treeshaking
if (!__PREFETCH_DISABLED__) {