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

Actions: fix minor type issues in documented example (#11043)

Browse source 
* fix(docs): add type case for `e.target`, say "Preact" explicitly

* fix(docs): Preact -> React

* chore: changeset

* Update .changeset/dirty-planes-punch.md

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
This commit is contained in:
Ben Holmes 2024-05-15 06:45:20 -04:00 • committed by GitHub
parent 086694ac31
commit d0d1710439
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/dirty-planes-punch.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Fixes minor type issues in actions component example

10
packages/astro/src/@types/astro.ts
View file

@ -1776,12 +1776,14 @@ export interface AstroUserConfig {
* };
* ```
*
* Then, call an action from your client components using the `actions` object from `astro:actions`. You can pass a type-safe object when using JSON, or a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) object when using `accept: 'form'` in your action definition:
* Then, call an action from your client components using the `actions` object from `astro:actions`. You can pass a type-safe object when using JSON, or a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) object when using `accept: 'form'` in your action definition.
*
* This example calls the `like` and `comment` actions from a React component:
*
* ```tsx "actions"
* // src/components/blog.tsx
* import { actions } from "astro:actions";
* import { useState } from "preact/hooks";
* import { useState } from "react";
*
* export function Like({ postId }: { postId: string }) {
* const [likes, setLikes] = useState(0);
@ -1802,13 +1804,13 @@ export interface AstroUserConfig {
* <form
* onSubmit={async (e) => {
* e.preventDefault();
* const formData = new FormData(e.target);
* const formData = new FormData(e.target as HTMLFormElement);
* const result = await actions.blog.comment(formData);
* // handle result
* }}
* >
* <input type="hidden" name="postId" value={postId} />
* <label for="author">Author</label>
* <label htmlFor="author">Author</label>
* <input id="author" type="text" name="author" />
* <textarea rows={10} name="body"></textarea>
* <button type="submit">Post</button>