element-vir/dist/declarative-element/define-element.d.ts

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

import { type CustomElementTagName } from './custom-tag-name.js';
import { type DeclarativeElementInit } from './declarative-element-init.js';
import { type DeclarativeElementDefinition } from './declarative-element.js';
import { type EventsInitMap } from './properties/element-events.js';
import { type PropertyInitMapBase } from './properties/element-properties.js';
import { type BaseStringName } from './properties/string-names.js';
/**
 * Verifies that the given `Inputs` type does not clash with built-in HTMLElement properties. This
 * is used within {@link defineElement}.
 *
 * @category Internal
 */
export type DeclarativeElementInputErrorParams<Inputs extends PropertyInitMapBase> = Extract<keyof Inputs, keyof HTMLElement> extends never ? [] : [
    'ERROR: Cannot define an element input property that clashes with native HTMLElement properties.'
];
/**
 * Defines an element with inputs. Note that this function must be called twice, due to TypeScript
 * type inference limitations.
 *
 * @category Element Definition
 * @example
 *
 * ```ts
 * import {defineElement, html} from 'element-vir';
 *
 * const MyElement = defineElement<{username: string}>()({
 *     tagName: 'my-element',
 *     render({inputs}) {
 *         return html`
 *             <p>hi: ${inputs.username}</p>
 *         `;
 *     },
 * });
 * ```
 */
export declare function defineElement<Inputs extends PropertyInitMapBase = {}>(
/**
 * These `errorParams` is present when there are problems with the `Inputs` type. If it is
 * present, the error should be fixed. This should always be empty.
 */
...errorParams: DeclarativeElementInputErrorParams<Inputs>): <const TagName extends CustomElementTagName, State extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseStringName<NoInfer<TagName>> = `${NoInfer<TagName>}-`, const CssVarKeys extends BaseStringName<NoInfer<TagName>> = `${NoInfer<TagName>}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(initInput: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;