/** * Blueprint for the Proxy props * @typedef {{[name: string]: any}} PropStringMap */ /** * A minimal base class to reduce the complexity of creating reactive custom elements * * Pass the shape of your `static props` as a type argument to get typed * `this.props` access in TypeScript: * ```ts * const props = { variant: 'primary', enabled: true } * class CozyButton extends WebComponent { * static props = props * } * ``` * @template {PropStringMap} [Props=PropStringMap] * @see https://webcomponent.io * @see https://webcomponent.io/prop-access/ */ export class WebComponent extends HTMLElement { /** * Declared props and their defaults. The value types of this object drive * both the runtime type guard and — when passed as the class type argument * — the compile-time type of `this.props`. * @type {PropStringMap} */ static props: PropStringMap; /** * CSS adopted into the shadow root as constructable stylesheet(s). An array * is adopted in order, so shared/base sheets can be composed with * per-component ones. Requires `static shadowRootInit`. * @type {string | CSSStyleSheet | Array} */ static styles: string | CSSStyleSheet | Array; /** * Shadow root initialization options * @type {ShadowRootInit} */ static shadowRootInit: ShadowRootInit; /** * When `true`, a declared-type violation on a prop write throws a * `TypeError` instead of logging via `console.error` and skipping. * @type {boolean} */ static strictProps: boolean; static get observedAttributes(): any[]; constructor(); /** * Read-only string property that represents how the component will be rendered * @returns {string | any} * @see https://webcomponent.io/template-vs-render/ */ get template(): string | any; /** * Read-only property containing camelCase counterparts of observed attributes. * @see https://webcomponent.io/prop-access/ * @returns {Props} */ get props(): Props; /** * Triggered after view is initialized */ afterViewInit(): void; /** * Triggered when the component is connected to the DOM */ onInit(): void; /** * Triggered when the component is disconnected from the DOM */ onDestroy(): void; /** * Triggered when an attribute value changes * @typedef {object} Changes * @property {string} property camelCase prop key, matching `props` access * @property {string} attribute kebab-case attribute name that changed * @property {any} previousValue value before the change * @property {any} currentValue value after the change * @param {Changes} changes */ onChanges(changes: { /** * camelCase prop key, matching `props` access */ property: string; /** * kebab-case attribute name that changed */ attribute: string; /** * value before the change */ previousValue: any; /** * value after the change */ currentValue: any; }): void; /** * Converts a prop value into the attribute value that reflects it. Override * to customize serialization for a prop; call `super.toAttribute(...)` for * the ones you don't handle. * * Returning **`null` removes the attribute** — that is how a `false` boolean * becomes an absent attribute, and it works for any prop. * @param {string} name camelCase prop key, matching `static props` * @param {any} value the prop value being reflected * @returns {string | null} the attribute value, or `null` to remove it */ toAttribute(name: string, value: any): string | null; /** * Converts an attribute value into the prop value it represents — the * inverse of `toAttribute`. Override to customize parsing for a prop; call * `super.fromAttribute(...)` for the ones you don't handle. * * Only called for attributes that are *present*: removal is handled by the * declared-default reset (and, for boolean props, always yields `false`). * @param {string} name camelCase prop key, matching `static props` * @param {string} value the attribute value, never `null` * @returns {any} the value to store on `this.props[name]` */ fromAttribute(name: string, value: string): any; connectedCallback(): void; disconnectedCallback(): void; attributeChangedCallback(attribute: any, previousValue: any, currentValue: any): void; render(): void; #private; } /** * Blueprint for the Proxy props */ export type PropStringMap = { [name: string]: any; };