spread

Applies a whole props object to an element and keeps it in sync: the helper compiled JSX calls for {...props} on an element.

Applies a whole props object to an element and keeps it in sync: the helper compiled JSX calls for {...props} on an element. The props are read inside a render effect, so a getter (or the props accessor) that changes rewrites only the keys whose values changed, and a key that disappears is undone. Event listeners and the last ref cleanup are released when the owner is disposed.

Keys: class/className, classList and style use the class and style helpers; ref is called untracked with the element (a returned function is its cleanup); on* keys bind with React's spelling (onChange on a text input is input, onFocus is focusin, ...Capture listens in the capture phase, onWheel is passive), delegated when the event allows it; prop: writes a property, attr: and bool: an attribute; innerHTML, dangerouslySetInnerHTML and textContent set the content; value, checked, selected, muted, indeterminate, defaultValue and defaultChecked are written as properties and re-applied when the user changed them; autoFocus applies once. Other keys are attributes, with React names mapped (htmlFor is for, SVG strokeWidth is stroke-width). key, suppressHydrationWarning, suppressContentEditableWarning, __proto__, constructor and prototype are ignored.

Import#

import { spread } from "@shadow-js/web";

Signature#

function spread(el: Element, props: unknown, isSVG = false, skipChildren = false): void

Parameters#

Name	Description
`el`	Target element.
`props`	A props object, or a function returning one (read in the effect). `null` and other values do nothing.
`isSVG`	`true` for SVG elements: `class` is written as an attribute and SVG names are mapped. Default: `false`.
`skipChildren`	`true` ignores `children` (the compiler sets it when the JSX has its own children). Default: `false`, which inserts `children` as the element's content; on a `<textarea>`, `children` is its value instead.

Throws#

TypeError INVALID_ATTRIBUTE_NAME for an attribute name that is not valid, and SHADOW_EVENT_HANDLER for an on* value that is not a handler.

Examples#

import { useSignal } from "@shadow-js/core";
import { spread } from "@shadow-js/web";

function SaveButton() {
  const [busy] = useSignal(false);
  const button = document.createElement("button");
  spread(button, {
    class: "btn",
    onClick: () => console.log("save"),
    get disabled() { return busy(); },
    children: "Save",
  });
  return button;
}