mergeProps (@shadow-js/web/server)
Merges props objects into one getter-preserving object. (mergeProps of @shadow-js/web/server)
Merges props objects into one getter-preserving object. Reading a key returns the value from the
right-most source that has it, unless that value is undefined, in which case the next source
to the left is tried. Nothing is copied at merge time, so reads stay reactive. Use it to give
component props defaults without reading them in the component body.
Sources may be objects, null, undefined or false (skipped), or functions that return an
object. A function is called on every read, which is how spreads such as {...props()} stay
reactive. Keys named __proto__, constructor or prototype are ignored.
Import#
import { mergeProps } from "@shadow-js/web/server";
Signature#
function mergeProps<T extends readonly MergeSource[]>(...sources: T): MergeProps<T>
Parameters#
| Name | Description |
|---|---|
sources |
The props objects, from lowest to highest priority. |
Returns#
A read-only object whose keys are the union of the sources' own enumerable keys. With a function source, the key set is recomputed on every access.
Throws#
- TypeError (production message
SHADOW_MERGE_SOURCES) when a source is not an object, a function,null,undefinedorfalse. A read of the result throws TypeError (production messageSHADOW_MERGE_SOURCE) when a function source returns anything else.
Examples#
import { mergeProps } from "@shadow-js/core";
function Button(props: { size?: "sm" | "md"; label: string }) {
const merged = mergeProps({ size: "md" as const }, props);
return <button class={`btn-${merged.size}`}>{merged.label}</button>;
}