[]previous and next page

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#

ts
import { mergeProps } from "@shadow-js/web/server";

Signature#

ts
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, undefined or false. A read of the result throws TypeError (production message SHADOW_MERGE_SOURCE) when a function source returns anything else.

Examples#

ts
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>;
}