@shadow-js/web

Everything @shadow-js/web exports, from the TSDoc of its entry point.

Functions#

• addEventListener: Binds an event handler to an element: the helper compiled templates call for onX and the on: and oncapture: prefixes.
• anchor: Creates a text anchor: an empty Text node placed before before (appended when null).
• autoFocus: Focuses an element written with autoFocus (React parity) once it is inserted into the document by a client render or update.
• chainEvents: Combines several handlers for one event name on one element into one handler that calls them in order with the same event.
• classList: Toggles individual classes from an object: the helper compiled templates call for classList.
• className: Replaces the whole class of an element: the helper compiled templates call for class and className.
• clearDelegatedEvents: Removes the delegated listeners delegateEvents installed on target.
• createComponent: Calls a component untracked, under a new owner that is a child of the current one: cleanups and effects it creates are disposed with the enclosing scope.
• createDynamic: Function form of Dynamic, for code that is not JSX: renders what component() returns (a component, a tag name or a falsy value) with props, and follows it when it changes.
• delegateEvents: Installs the document listener that runs delegated handlers for each event name, once per document and name; repeated calls do nothing.
• derived: Wraps a computation as a Derived value that recomputes only when the signals it reads change.
• effect: Runs fn as a render effect: synchronously when created, and again when the signals it reads change.
• element: Creates one HTML element from a tag name and a props object, without the generic prop runtime of spread and Dynamic: for a library that renders one fixed element (a link, a button) and wants to pay only for what it binds.
• hydrate: Attaches the application to HTML the server already rendered into container.
• insert: Reactive child insertion: keeps the content of a region in sync with value.
• lazy: Defines a component whose code is loaded on first render.
• memo: Creates a cached derivation that recomputes only when the signals it reads change.
• preconnect: Tells the browser to open a connection (DNS, TCP, TLS) to an origin the page will use soon.
• prefetchDNS: Resolves an origin's DNS ahead of use.
• preinit: Loads a stylesheet or script now, and keeps it applied or executed (React's preinit).
• preinitModule: Loads and runs an ES module now (React's preinitModule).
• preload: Starts fetching a resource the page will need, at high priority.
• preloadModule: Starts loading an ES module the page will import, so the import does not wait for the module graph to be discovered.
• refTo: Fills a ref of any form the compiler accepts.
• render: Mounts code into container.
• setAttribute: Sets or removes one attribute with the JSX value rules: the helper compiled templates call for a dynamic attribute, also usable on elements you create yourself.
• setAttributeNS: Sets or removes a namespaced attribute such as xlink:href or xml:lang, with the value rules and the URL check of setAttribute.
• setBoolAttribute: Sets or removes a presence (boolean) attribute such as disabled or hidden: the helper compiled templates call for the bool: prefix.
• setSelectValue: Selects the options a value stands for.
• setStyleProperty: Sets or removes one inline style property: the helper compiled templates call for the style: prefix.
• spread: Applies a whole props object to an element and keeps it in sync: the helper compiled JSX calls for {...props} on an element.
• startViewTransition: Runs update inside a browser view transition, so the change animates from the old screen to the new one, and resolves when the animation has finished.
• style: Sets the inline style of an element: the helper compiled templates call for a style attribute.
• template: Turns a static HTML string into a factory of fresh DOM copies: the helper compiled JSX uses for the static part of every element tree.
• use: Applies a directive: calls fn(el, arg) untracked, so a directive or a ref never subscribes the surrounding effect to what it reads.
• useHead: Registers head tags for the lifetime of the current owner.

Interfaces#

• ActivityProps: Props of Activity.
• AriaAttributes: The ARIA attributes.
• ClientOnlyProps: Props of ClientOnly.
• CrossOriginOptions: Options of preconnect, preloadModule and preinitModule.
• CustomEvents: The app's custom events, by name, for the on: and oncapture: prefixes: declaration-merge it so on:toast={...} receives a typed event.
• Derived: A value the compiler keeps live: the result of const x = <expression reading signals> inside a component.
• Directives: The app's directives, by name, typed by their argument: declaration-merge it so use:name={argument} checks the argument.
• DynamicProps: Props of Dynamic: component plus the props of whatever it renders.
• ErrorBoundaryLooseProps: ErrorBoundaryProps with untyped members, for code that forwards a fallback or children it does not know the shape of.
• ErrorBoundaryProps: Props of ErrorBoundary.
• ForKeyedProps: Props of For with key: rows are matched by key(item).
• ForUnkeyedProps: Props of For without key: rows are matched by item reference.
• FragmentProps: Props of Fragment.
• HeadAttributeProps: Props of Meta, Link and Base: every prop is an attribute, and a function value is read reactively.
• HeadTag: Describes one head element.
• HTMLIntrinsicElements: Attribute maps for every HTML element the DOM library types, keyed by tag name.
• HydrateOptions: Options of hydrate: the server render it continues, the root's owner, and the error reporters it inherits from RootErrorOptions (onUncaughtError, onCaughtError, onRecoverableError).
• IndexProps: Props of Index.
• LazyComponent: A component made by lazy: call it (or write it in JSX) like any component, and use preload to start the load early.
• ListenerObject: A DOM-style listener object: handleEvent plus the addEventListener options.
• MatchProps: Props of Match.
• MathMLIntrinsicElements: Attribute maps for every MathML element, keyed by the MathML tag name.
• NoHydrationProps: Props of NoHydration.
• PortalProps: Props of Portal.
• PreinitOptions: Options of preinit.
• PreloadOptions: Options of preload: the destination is required, as the browser needs it to pick the right request.
• ShowLooseProps: The same props with untyped children, for code that forwards children it does not know the shape of (a wrapper component's own props.children).
• StyleProps: Props of Style: the CSS text and an optional key that replaces an earlier style with the same key.
• SuspenseListProps: Props of SuspenseList.
• SuspenseProps: Props of Suspense.
• SVGIntrinsicElements: Attribute maps for every SVG element, keyed by the SVG tag name.
• SwitchProps: Props of Switch.
• TitleProps: Props of Title.
• ViewTransitionOptions: Options of startViewTransition.
• ViewTransitionProps: Props of ViewTransition.

Types#

• ActivityMode: visible shows the children; hidden keeps them alive (state, DOM and focus) but out of sight.
• AriaRole: Every ARIA role of WAI-ARIA 1.2 (plus generic and search, which later ARIA versions use).
• Booleanish: Booleans written either as true/false or as the strings the DOM enumerates: the value type of enumerated attributes such as draggable, spellcheck and the aria-* flags.
• BoundEventHandler: Handler and data as a tuple: [(data, event) => void, data].
• ClassValue: A class value in the clsx style the runtime understands: strings, numbers (0 is dropped), booleans, nested arrays and objects whose truthy keys become class names.
• Component: A component: a function from props to a JSX element.
• ComponentProps: The props type of a component, or of an intrinsic element tag name: use it to wrap or forward the props of an element or another component.
• CSSProperties: Inline style declarations for style={...}: every standard CSS property in camelCase or in kebab-case (derived from the DOM library's CSSStyleProperties, so it tracks the platform), plus CSS custom properties (--name).
• CustomElementProps: Props of a custom element (a tag name with a hyphen).
• EventHandler: A plain event handler.
• EventHandlerProp: What an event attribute accepts: a plain handler, a [handler, data] tuple, or a listener object.
• FlowComponent: A component that requires children of type C, such as Show (children are the content it shows) or a For callback.
• ForProps: Props of For.
• HeadAttributeValue: One attribute value: a string is written as is, true as an empty attribute, false and undefined omit it, and a number is written as text.
• HeadInput: What useHead accepts: one tag, several tags, or nothing (which registers nothing).
• HeadTagName: Head elements the registry manages.
• IntrinsicElementMap: The map behind JSX.IntrinsicElements: every element by tag name, plus custom elements matched by the ${string}-${string} pattern.
• JsxChild: Everything a JSX expression can produce or a child can be: DOM nodes, text, numbers, booleans, nothing, accessors (() => child, re-run when their dependencies change) and nested arrays.
• Maybe: A value that may be absent at runtime.
• MaybeAccessor: A value or an accessor returning it.
• ParentComponent: A component that takes optional children, such as a Card or a Layout.
• ParentProps: Props of a component that takes optional children: adds children?: JsxChild to P.
• ShowProps: Props of Show.
• TextChild: Children of elements whose content is text only: textarea, option, script, style.
• ValidComponent: Anything that can be used as a JSX tag: an intrinsic element name or a component function.
• VoidComponent: A component that takes no children.
• VoidProps: Props of a component that takes no children: passing children is a type error.

components#

• Activity: Keeps its children alive while hidden: mode="hidden" removes them from sight but keeps their state, their DOM nodes and their focus and scroll position.
• Base: Registers the document <base>.
• ClientOnly: Renders children in the browser only.
• Dynamic: Renders a component function or an element chosen by a tag name, and re-renders when component changes.
• ErrorBoundary: Renders children.
• For: Renders one row per item.
• Fragment: A no-op wrapper: returns props.children untouched, so the children are created by the caller's getter exactly as if no wrapper existed.
• Index: Renders one row per position.
• Link: Registers a <link>.
• Match: Describes one branch of a Switch.
• Meta: Registers a <meta>.
• NoHydration: Content the browser never hydrates: the server renders it without hydration keys, and while the page hydrates the browser leaves that markup exactly as it is (no code runs for it, no event handlers or reactivity are attached).
• Portal: Renders children into another part of the document, without a wrapper: the content nodes are inserted directly into the mount element (or its shadow root).
• Show: Shows children while when is truthy, and fallback otherwise.
• Style: Registers a <style> with the given CSS text.
• Suspense: Shows fallback while resources read inside it are loading for the first time.
• SuspenseList: Coordinates the <Suspense> boundaries below it so a page of independent loads reveals in a calm order instead of popping in at random.
• Switch: Shows the first Match whose when is truthy, or the fallback when none is.
• Title: Sets the document title.
• ViewTransition: Gives the first element of its children a view transition name and class, so the browser animates that element between the old and the new screen: it enters (an element that appears with the name), exits (one that disappears), updates (the same name with new content) and shares (the same name on both screens, moved or resized).

namespaces#

• JSX: The JSX namespace TypeScript reads through jsxImportSource.