Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Support formmethod and formaction in ViewTransitions (#9084)

Browse source 
* Support formmethod and formaction in ViewTransitions

* Adding a changeset

* Update .changeset/new-pets-fail.md

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Be less clever

---------

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
This commit is contained in:
Matthew Phillips 2023-11-13 14:03:07 -05:00 committed by GitHub
parent 5ef89ef33e
commit 045e5ec979
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/new-pets-fail.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Supports `formmethod` and `formaction` for form overrides

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

@ -88,11 +88,14 @@ const { fallback = 'animate', handleForms } = Astro.props;
}
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 = form.action ?? location.pathname;
let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
const method = submitter?.getAttribute('formmethod') ?? form.method;
const options: Options = {};
if (form.method === 'get') {
if (method === 'get') {
const params = new URLSearchParams(formData as any);
const url = new URL(action);
url.search = params.toString();

20
packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro Normal file
View file

@ -0,0 +1,20 @@
---
import Layout from '../components/Layout.astro';
let formData: FormData | undefined;
if(Astro.request.method === 'POST') {
formData = await Astro.request.formData();
}
---
<Layout>
{
Astro.request.method === 'GET' ? (
<h2>Contact Form</h2>
<form action="/contact" method="get">
<input type="hidden" name="name" value="Testing">
<button id="submit" type="submit" formmethod="post" formaction="/form-three">Submit</button>
</form>
) : (
<div id="three-result">Got: {formData?.get('name')}</div>
)
}
</Layout>

12
packages/astro/e2e/view-transitions.test.js
View file

@ -1004,4 +1004,16 @@ test.describe('View Transitions', () => {
'There should be only 1 page load. No additional loads for the form submission'
).toEqual(1);
});
test('forms are overridden by formmethod and formaction', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/form-three'));
let locator = page.locator('h2');
await expect(locator, 'should have content').toHaveText('Contact Form');
// Submit the form
await page.click('#submit');
const result = page.locator('#three-result');
await expect(result, 'should have content').toHaveText('Got: Testing');
});
});

2
packages/astro/package.json
View file

@ -186,7 +186,7 @@
},
"devDependencies": {
"@astrojs/check": "^0.1.0",
"@playwright/test": "^1.37.1",
"@playwright/test": "1.40.0-alpha-nov-13-2023",
"@types/babel__generator": "^7.6.4",
"@types/babel__traverse": "^7.20.1",
"@types/chai": "^4.3.5",

28
pnpm-lock.yaml
View file

@ -667,8 +667,8 @@ importers:
specifier: ^0.1.0
version: 0.1.0(prettier-plugin-astro@0.12.0)(prettier@3.0.3)(typescript@5.1.6)
'@playwright/test':
specifier: ^1.37.1
version: 1.39.0
specifier: 1.40.0-alpha-nov-13-2023
version: 1.40.0-alpha-nov-13-2023
'@types/babel__generator':
specifier: ^7.6.4
version: 7.6.6
@ -8061,6 +8061,14 @@ packages:
playwright: 1.39.0
dev: true
/@playwright/test@1.40.0-alpha-nov-13-2023:
resolution: {integrity: sha512-qb5AzKN2pf14C4AT90ps3VGbDhx1/9LnzzT+D2TBZQ/vRUUvacvxxhjieelFKvw+FN4BIXFnEs2bNecc37Jyww==}
engines: {node: '>=16'}
hasBin: true
dependencies:
playwright: 1.40.0-alpha-nov-13-2023
dev: true
/@preact/preset-vite@2.6.0(preact@10.18.1):
resolution: {integrity: sha512-5nztNzXbCpqyVum/K94nB2YQ5PTnvWdz4u7/X0jc8+kLyskSSpkNUxLQJeI90zfGSFIX1Ibj2G2JIS/mySHWYQ==}
peerDependencies:
@ -14360,6 +14368,12 @@ packages:
hasBin: true
dev: true
/playwright-core@1.40.0-alpha-nov-13-2023:
resolution: {integrity: sha512-EVClUNNwgSh7y161ACuTQ6ULzb51dgBVbvLSGBd6lBtcb5DZ3gwG6TZLU6UrE4KNSeMxZTBsXlFlrasR6L6G3w==}
engines: {node: '>=16'}
hasBin: true
dev: true
/playwright@1.39.0:
resolution: {integrity: sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==}
engines: {node: '>=16'}
@ -14370,6 +14384,16 @@ packages:
fsevents: 2.3.2
dev: true
/playwright@1.40.0-alpha-nov-13-2023:
resolution: {integrity: sha512-/jHChcF6JXbFaL1YpZvNlXaFDfCJiXPyzooNo4TTp4yUG0vtq0b7r8jSOwmC1AcByIr4tIYkC0nOjn2TjvPlYw==}
engines: {node: '>=16'}
hasBin: true
dependencies:
playwright-core: 1.40.0-alpha-nov-13-2023
optionalDependencies:
fsevents: 2.3.2
dev: true
/port-authority@2.0.1:
resolution: {integrity: sha512-Hz/WvSNt5+7x+Rq1Cn6DetJOZxKtLDehJ1mLCYge6ju4QvSF/PHvRgy94e1SKJVI96AJTcqEdNwkkaAFad+TXQ==}
dev: false