Can These Props Cross to a Client Component?
Hard · Server Components
Props passed from a Server Component to a Client Component ("use client") are serialized and sent to the browser, so they must be serializable. The React docs ("Serializable types") allow: primitives (string, number, bigint, boolean, undefined, null, symbols registered with Symbol.for), arrays, Maps, Sets, typed arrays and ArrayBuffer, Date, plain objects, Server Functions ("use server"), JSX elements and Promises, as long as everything inside is serializable too. Not allowed: other functions, classes, instances of classes, objects with a null prototype, and local symbols.
Write checkProps(props). Because tests can only pass plain data, special values are described with a $type tag:
- Allowed: strings, numbers, booleans, null, plain arrays and plain objects (checked recursively), { $type: "undefined" }, { $type: "bigint" }, { $type: "date" }, { $type: "typedArray" }, { $type: "arrayBuffer" }, { $type: "element" } (JSX), { $type: "serverFunction" }.
- { $type: "symbol", global }: allowed only if global is true, else reason "local symbol".
- { $type: "map", entries: [[key, value], ...] }: check each key at <path>.keys[i] and value at <path>.values[i], entry by entry.
- { $type: "set", values: [...] }: check each member at <path>.values[i].
- { $type: "promise", value }: check the resolved value at <path>.value.
- Not allowed: { $type: "function" } with reason "function", { $type: "class" } with reason "class", { $type: "instance", className } with reason "class instance: <className>", { $type: "nullProto" } with reason "null prototype".
Paths start at props. Object keys that are valid JS identifiers are written .key, other keys ["key"] (using JSON.stringify), array items [i]. Check depth-first in key/array order and return the first problem as { ok: false, path, reason }, or { ok: true }.