mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Hendrik LiebauandGitHub
f2ed75a223
With this PR, we're assigning names to the transformed `"use cache"` functions, using the same rules as in #71478. Since we can't use named function expressions here, we're using `Object.defineProperty` instead, which we already used in #71478 for server actions with default export expressions. In addition, this PR fixes source mapping of `"use cache"` functions, which was slightly off before, due to the wrong spans being assigned to the new expressions. **Before:** <img width="943" alt="before" src="https://github.com/user-attachments/assets/f7cf674c-32d4-4f0d-a304-d5de5637a6a1"> **After:** <img width="943" alt="after" src="https://github.com/user-attachments/assets/8edda482-a666-4431-bfad-7e21987331eb">
40 lines
766 B
TypeScript
40 lines
766 B
TypeScript
'use client'
|
|
|
|
import { useActionState } from 'react'
|
|
|
|
export function Form({
|
|
foo,
|
|
bar,
|
|
baz,
|
|
}: {
|
|
foo: () => Promise<number>
|
|
bar: () => Promise<number>
|
|
baz: () => Promise<number>
|
|
}) {
|
|
const [result, dispatch] = useActionState<
|
|
[number, number, number],
|
|
'submit' | 'reset'
|
|
>(
|
|
async (_state, event) => {
|
|
if (event === 'reset') {
|
|
return [0, 0, 0]
|
|
}
|
|
|
|
return [await foo(), await bar(), await baz()]
|
|
},
|
|
[0, 0, 0]
|
|
)
|
|
|
|
return (
|
|
<form action={() => dispatch('submit')}>
|
|
<button id="submit-button">Submit</button>{' '}
|
|
<button id="reset-button" formAction={() => dispatch('reset')}>
|
|
Reset
|
|
</button>
|
|
<p>
|
|
{result[0]} {result[1]} {result[2]}
|
|
</p>
|
|
</form>
|
|
)
|
|
}
|