Files
Janka UrygaandGitHub 669c52e393 typechecking inputs/outputs in action transform tests (#75935)
This PR attempts to add typechecking to the server actions tests
fixtures in order to add an extra layer of validation against compiler
bugs. (there's a couple!). Unfortunately the tests were pretty
loosey-goosey around undefined variables, so there's a lot of noise in
adding missing imports for `Button` etc. i tried to call out the
interesting changes via PR comments.

Note that this is a bit limited, because we often have to rely on
typescript inferring some sensible types for the outputs -- see e.g. the
issue with `24/output.js` mentioned below. In case typescript can't
infer sensible types for something, we can just exclude that file from
checking. this seems to be pretty rare, so i think it's okay.

We should also definitely add typechecking to the other fixture folders,
but this PR is already big, so i want to do that piecemeal.

### TODO
- [x] invoke the typechecker in CI
- added a `check-compiler-fixtures` script that runs as part of
`types-and-precompiled` (open to feedback, maybe this isn't the right
place?)
- [x] figure out how to make `tsc` error on
`crates/next-custom-transforms/tests/fixture/server-actions/server-graph/51/output.js`,
where we're referencing a non-existent variable `$$RSC_SERVER_ACTION_0`.
right now, it emits no errors
- this is a compiler bug, and i want to catch bugs like this in the
future
  - solution: https://github.com/vercel/next.js/pull/75944
- [x] figure out why `tsc` is complaining about a type mismatch in
`crates/next-custom-transforms/tests/fixture/server-actions/server-graph/24/output.js`
- we can work around this by loosening the types for
`registerServerReference`, but i'd rather we didn't have to do that
- this seems to be a bizarre TS behavior where `fn.bind(...)` makes all
the params optional in JS files. ignoring this for now
2025-02-24 16:59:34 +00:00

44 lines
751 B
JavaScript

import { Form } from 'components'
export default function Page() {
const foo = async () => {
'use server'
return 'declarator arrow function expression'
}
async function bar() {
'use server'
return 'function declaration'
}
return (
<>
<Form action={foo} />
<Form action={bar} />
<Form
action={async () => {
'use server'
return 'arrow function expression'
}}
/>
<Form
action={async function () {
'use server'
return 'anonymous function expression'
}}
/>
<Form
action={async function baz() {
'use server'
return 'named function expression'
}}
/>
</>
)
}