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: #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

Author: lubieowoce

crates/next-custom-transforms/tests/fixture/server-actions/client-graph/3/input.js

@@ -1,5 +1,7 @@
 'use server'
 
-export const { sampleFunction } = someObject
-export const { sampleFunction2 } = fn()
-export let { 0: sampleFunction3, 1: sampleFunction4 } = [g(), g()]
+import ANYTHING from 'anything'
+
+export const { sampleFunction } = ANYTHING
+export const { sampleFunction2 } = ANYTHING()
+export let { 0: sampleFunction3, 1: sampleFunction4 } = [ANYTHING(), ANYTHING()]

crates/next-custom-transforms/tests/fixture/server-actions/client-graph/5/input.js

@@ -6,6 +6,7 @@ export async function action0(b, c, ...g) {
   return async function action1(d) {
     'use server'
     let f
+    // @ts-expect-error: window is not iterable
     console.log(...window, { window })
     console.log(a, b, action2)
 

crates/next-custom-transforms/tests/fixture/server-actions/index.ts

@@ -0,0 +1,2 @@
+/// <reference types="./next" />
+/// <reference types="./modules" />

crates/next-custom-transforms/tests/fixture/server-actions/modules.d.ts

@@ -0,0 +1,51 @@
+declare module 'database' {
+  export const db: {
+    serialize<T>(cb: () => T): T
+    run(
+      statement: string,
+      args: Record<string, any>,
+      onComplete: (this: { lastID: string }, error?: Error) => void
+    ): void
+  }
+}
+
+declare module 'db' {
+  export default function deleteFromDb(arg: any, ...args: any[]): Promise<void>
+}
+
+declare module 'auth' {
+  export function validator<TFn extends (...args: any[]) => any>(fn: TFn): TFn
+  export function another<TFn extends (...args: any[]) => any>(fn: TFn): TFn
+}
+
+declare module 'anything' {
+  const ANYTHING: any
+  export default ANYTHING
+}
+
+declare module 'foo' {
+  const f: any
+  export default f
+  export const f1: any
+  export const f2: any
+}
+
+declare module 'components' {
+  import React from 'react'
+
+  export function Button(
+    props: {
+      action: () => Promise<any>
+    } & React.ComponentProps<'button'>
+  ): React.ReactNode
+
+  export function Form(
+    props: React.PropsWithChildren<{ action: () => Promise<any> }>
+  ): React.ReactNode
+
+  export function Client(props: Record<string, any>): React.ReactNode
+}
+
+declare module 'navigation' {
+  export function redirect(href: string): void
+}

crates/next-custom-transforms/tests/fixture/server-actions/next.d.ts

@@ -0,0 +1,49 @@
+declare module 'private-next-rsc-action-encryption' {
+  export function encryptActionBoundArgs(
+    actionId: string,
+    ...args: any[]
+  ): Promise<string>
+
+  export function decryptActionBoundArgs(
+    actionId: string,
+    encryptedPromise: Promise<string>
+  ): Promise<any[]>
+}
+
+declare module 'private-next-rsc-server-reference' {
+  export function registerServerReference<T extends (...args: any[]) => any>(
+    reference: T,
+    id: string,
+    exportName: string | null
+  ): T
+}
+
+declare module 'private-next-rsc-action-client-wrapper' {
+  export function callServer(
+    actionId: string,
+    actionArgs: unknown[]
+  ): Promise<unknown>
+
+  export function findSourceMapURL(filename: string): string | null
+
+  const createServerReference: (
+    id: string,
+    callServer: any,
+    encodeFormAction?: any,
+    findSourceMapURL?: any,
+    functionName?: string
+  ) => (...args: unknown[]) => Promise<unknown>
+}
+
+declare module 'private-next-rsc-action-validate' {
+  function ensureServerEntryExports(actions: unknown[]): void
+}
+
+declare module 'private-next-rsc-cache-wrapper' {
+  export function cache<TFn extends (...args: any[]) => Promise<any>>(
+    kind: string,
+    id: string,
+    boundArgsLength: number,
+    fn: TFn
+  ): TFn
+}

crates/next-custom-transforms/tests/fixture/server-actions/server-graph/1/input.js

@@ -1,3 +1,4 @@
+import { Button } from 'components'
 import deleteFromDb from 'db'
 
 export function Item({ id1, id2 }) {

crates/next-custom-transforms/tests/fixture/server-actions/server-graph/1/output.js

@@ -1,5 +1,6 @@
 /* __next_internal_action_entry_do_not_use__ {"406a88810ecce4a4e8b59d53b8327d7e98bbf251d7":"$$RSC_SERVER_ACTION_0","4090b5db271335765a4b0eab01f044b381b5ebd5cd":"$$RSC_SERVER_ACTION_1"} */ import { registerServerReference } from "private-next-rsc-server-reference";
 import { encryptActionBoundArgs, decryptActionBoundArgs } from "private-next-rsc-action-encryption";
+import { Button } from 'components';
 import deleteFromDb from 'db';
 export const /*#__TURBOPACK_DISABLE_EXPORT_MERGING__*/ $$RSC_SERVER_ACTION_0 = async function deleteItem($$ACTION_CLOSURE_BOUND) {
     var [$$ACTION_ARG_0, $$ACTION_ARG_1] = await decryptActionBoundArgs("406a88810ecce4a4e8b59d53b8327d7e98bbf251d7", $$ACTION_CLOSURE_BOUND);

crates/next-custom-transforms/tests/fixture/server-actions/server-graph/16/input.js

@@ -1,3 +1,4 @@
+import { Button } from 'components'
 import deleteFromDb from 'db'
 
 const v1 = 'v1'
@@ -13,7 +14,7 @@ export function Item({ id1, id2 }) {
   return <Button action={deleteItem}>Delete</Button>
 }
 
-const f = (x) => {
+let f = (x) => {
   async function g(y, ...z) {
     'use server'
     return x + y + z[0]
@@ -23,6 +24,14 @@ const f = (x) => {
 const g = (x) => {
   f = async (y, ...z) => {
     'use server'
-    return x + y + z[0]
+    return (
+      x +
+      y +
+      // can't be a `ts-expect-error` because the type of `z` changes to `any` in the output
+      // and it stops being an error
+      //
+      // @ts-ignore: incompatible argument types
+      z[0]
+    )
   }
 }

crates/next-custom-transforms/tests/fixture/server-actions/server-graph/16/output.js

@@ -1,5 +1,6 @@
 /* __next_internal_action_entry_do_not_use__ {"406a88810ecce4a4e8b59d53b8327d7e98bbf251d7":"$$RSC_SERVER_ACTION_0","7f1c36b06e398c97abe5d5d7ae8c672bfddf4e1b91":"$$RSC_SERVER_ACTION_2","7f90b5db271335765a4b0eab01f044b381b5ebd5cd":"$$RSC_SERVER_ACTION_1"} */ import { registerServerReference } from "private-next-rsc-server-reference";
 import { encryptActionBoundArgs, decryptActionBoundArgs } from "private-next-rsc-action-encryption";
+import { Button } from 'components';
 import deleteFromDb from 'db';
 const v1 = 'v1';
 export const /*#__TURBOPACK_DISABLE_EXPORT_MERGING__*/ $$RSC_SERVER_ACTION_0 = async function deleteItem($$ACTION_CLOSURE_BOUND) {
@@ -17,12 +18,16 @@ export const /*#__TURBOPACK_DISABLE_EXPORT_MERGING__*/ $$RSC_SERVER_ACTION_1 = a
     var [$$ACTION_ARG_0] = await decryptActionBoundArgs("7f90b5db271335765a4b0eab01f044b381b5ebd5cd", $$ACTION_CLOSURE_BOUND);
     return $$ACTION_ARG_0 + y + z[0];
 };
-const f = (x)=>{
+let f = (x)=>{
     var g = registerServerReference($$RSC_SERVER_ACTION_1, "7f90b5db271335765a4b0eab01f044b381b5ebd5cd", null).bind(null, encryptActionBoundArgs("7f90b5db271335765a4b0eab01f044b381b5ebd5cd", x));
 };
 export const /*#__TURBOPACK_DISABLE_EXPORT_MERGING__*/ $$RSC_SERVER_ACTION_2 = async function f($$ACTION_CLOSURE_BOUND, y, ...z) {
     var [$$ACTION_ARG_0] = await decryptActionBoundArgs("7f1c36b06e398c97abe5d5d7ae8c672bfddf4e1b91", $$ACTION_CLOSURE_BOUND);
-    return $$ACTION_ARG_0 + y + z[0];
+    return $$ACTION_ARG_0 + y + // can't be a `ts-expect-error` because the type of `z` changes to `any` in the output
+    // and it stops being an error
+    //
+    // @ts-ignore: incompatible argument types
+    z[0];
 };
 const g = (x)=>{
     f = registerServerReference($$RSC_SERVER_ACTION_2, "7f1c36b06e398c97abe5d5d7ae8c672bfddf4e1b91", null).bind(null, encryptActionBoundArgs("7f1c36b06e398c97abe5d5d7ae8c672bfddf4e1b91", x));

crates/next-custom-transforms/tests/fixture/server-actions/server-graph/18/input.js

@@ -1,3 +1,4 @@
+import { Button } from 'components'
 import deleteFromDb from 'db'
 
 const v1 = 'v1'