/** * Represents a signal-based computation. */ interface SignalLike { /** * Gets the current value of the signal with tracking by default. */ (): T; } /** * Represents a value that tracks changes over time. */ interface Signal extends SignalLike { /** @ignore */ _effects: Set; /** * Accesses the current value of the signal without tracking. */ peek(): T; } interface SignalOptions extends SetSignalOptions { /** * A custom equality function to compare the new value with the old value. */ equals?: (a: T, b: T) => boolean; } interface SetSignalOptions { /** * Whether to force the update of the signal even if the new value has the * same reference. */ force?: boolean; /** * Whether to suppress the update of the signal's effects. */ silent?: boolean; } /** * Can be used to update a signal with a new value. */ interface SignalSetter { (update: (value: U) => T, opts?: SetSignalOptions): void; (value: T extends Function ? never : T, opts?: SetSignalOptions): void; } interface SubscopeOptions { details?: object; } interface Effect { _scope: Scope; _pure: boolean; _clean?: Cleanup; _deps: Set>; _run(): void; } /** * Represents the cleanup function of an effect. */ type Cleanup = (() => void) | void | undefined | null; interface Scope { readonly _parent?: Scope; _effects: Set; _subscopes: Set; _details: T; _run(fn: () => T): T; _cleanup(): void; } /** @ignore */ declare const useScope: () => Scope; /** * Creates a new signal with the given value. * @returns A tuple with the signal and its setter. */ declare const useSignal: ((value: T, opts?: SignalOptions) => readonly [Signal, SignalSetter]) & ((value?: T, opts?: SignalOptions) => readonly [Signal, SignalSetter]); /** * Runs the given function in a batch. * * @param fn Any calls to signal setters inside the function will be batched * and updated at the same time. */ declare const useBatch: (fn: () => T) => T; declare const flushBatch: () => void; /** * Creates a memoized signal. * * @param fn The computation function. */ declare const useMemo: (fn: () => T, opts?: SignalOptions) => Signal; /** * Executes a function inside a subscope which can be manually destroyed. * * @param fn The function to run in the subscope. * @returns A function to manually destroy the subscope. */ declare const useSubscope: (fn: () => T, opts?: SubscopeOptions) => [T, () => void]; /** * Provide write capabilities to a signal. */ interface RefSignal extends Signal, RefSignalSetter { /** * Sets the value of the signal. */ set: SignalSetter; } /** * A contravariant variant of {@link RefSignal}. */ interface RefSignalSetter { /** * Sets the value of the signal. */ set: SignalSetter; } /** * Creates a new signal with write capabilities. */ declare const useRef: ((value: T, opts?: SignalOptions) => RefSignal) & ((value?: T, opts?: SignalOptions) => RefSignal); /** * Represents a value that can be a signal or a constant value. * * Note that functions are not allowed as constant values. */ type MaybeSignal = SignalLike | (T extends Function ? never : T); /** * @namespace */ declare const MaybeSignal: { /** * Transforms the given {@link MaybeSignal} into a {@link Signal}. */ upgrade: (signal: MaybeSignal) => SignalLike; /** * Gets the value of the given {@link MaybeSignal}. */ get: (signal: MaybeSignal) => T; /** * Accesses the value of the given {@link MaybeSignal} without tracking. */ peek(signal: MaybeSignal): T; }; interface DomIntrinsicElements { a: HtmlProps & DomEventProps; abbr: HtmlProps & DomEventProps; address: HtmlProps & DomEventProps; area: HtmlProps & DomEventProps; article: HtmlProps & DomEventProps; aside: HtmlProps & DomEventProps; audio: HtmlProps & DomEventProps; b: HtmlProps & DomEventProps; base: HtmlProps & DomEventProps; bdi: HtmlProps & DomEventProps; bdo: HtmlProps & DomEventProps; big: HtmlProps & DomEventProps; blockquote: HtmlProps & DomEventProps; body: HtmlProps & DomEventProps; br: HtmlProps & DomEventProps; button: HtmlProps & DomEventProps; canvas: HtmlProps & DomEventProps; caption: HtmlProps & DomEventProps; cite: HtmlProps & DomEventProps; code: HtmlProps & DomEventProps; col: HtmlProps & DomEventProps; colgroup: HtmlProps & DomEventProps; data: HtmlProps & DomEventProps; datalist: HtmlProps & DomEventProps; dd: HtmlProps & DomEventProps; del: HtmlProps & DomEventProps; details: HtmlProps & DomEventProps; dfn: HtmlProps & DomEventProps; dialog: HtmlProps & DomEventProps; div: HtmlProps & DomEventProps; dl: HtmlProps & DomEventProps; dt: HtmlProps & DomEventProps; em: HtmlProps & DomEventProps; embed: HtmlProps & DomEventProps; fieldset: HtmlProps & DomEventProps; figcaption: HtmlProps & DomEventProps; figure: HtmlProps & DomEventProps; footer: HtmlProps & DomEventProps; form: HtmlProps & DomEventProps; h1: HtmlProps & DomEventProps; h2: HtmlProps & DomEventProps; h3: HtmlProps & DomEventProps; h4: HtmlProps & DomEventProps; h5: HtmlProps & DomEventProps; h6: HtmlProps & DomEventProps; head: HtmlProps & DomEventProps; header: HtmlProps & DomEventProps; hgroup: HtmlProps & DomEventProps; hr: HtmlProps & DomEventProps; html: HtmlProps & DomEventProps; i: HtmlProps & DomEventProps; iframe: HtmlProps & DomEventProps; img: HtmlProps & DomEventProps; input: HtmlProps & DomEventProps; ins: HtmlProps & DomEventProps; kbd: HtmlProps & DomEventProps; keygen: HtmlProps & DomEventProps; label: HtmlProps & DomEventProps; legend: HtmlProps & DomEventProps; li: HtmlProps & DomEventProps; link: HtmlProps & DomEventProps; main: HtmlProps & DomEventProps; map: HtmlProps & DomEventProps; mark: HtmlProps & DomEventProps; marquee: HtmlProps & DomEventProps; menu: HtmlProps & DomEventProps; menuitem: HtmlProps & DomEventProps; meta: HtmlProps & DomEventProps; meter: HtmlProps & DomEventProps; nav: HtmlProps & DomEventProps; noscript: HtmlProps & DomEventProps; object: HtmlProps & DomEventProps; ol: HtmlProps & DomEventProps; optgroup: HtmlProps & DomEventProps; option: HtmlProps & DomEventProps; output: HtmlProps & DomEventProps; p: HtmlProps & DomEventProps; param: HtmlProps & DomEventProps; picture: HtmlProps & DomEventProps; pre: HtmlProps & DomEventProps; progress: HtmlProps & DomEventProps; q: HtmlProps & DomEventProps; rp: HtmlProps & DomEventProps; rt: HtmlProps & DomEventProps; ruby: HtmlProps & DomEventProps; s: HtmlProps & DomEventProps; samp: HtmlProps & DomEventProps; script: HtmlProps & DomEventProps; section: HtmlProps & DomEventProps; select: HtmlProps & DomEventProps; slot: HtmlProps & DomEventProps; small: HtmlProps & DomEventProps; source: HtmlProps & DomEventProps; span: HtmlProps & DomEventProps; strong: HtmlProps & DomEventProps; style: HtmlProps & DomEventProps; sub: HtmlProps & DomEventProps; summary: HtmlProps & DomEventProps; sup: HtmlProps & DomEventProps; table: HtmlProps & DomEventProps; tbody: HtmlProps & DomEventProps; td: HtmlProps & DomEventProps; textarea: HtmlProps & DomEventProps; tfoot: HtmlProps & DomEventProps; th: HtmlProps & DomEventProps; thead: HtmlProps & DomEventProps; time: HtmlProps & DomEventProps; title: HtmlProps & DomEventProps; tr: HtmlProps & DomEventProps; track: HtmlProps & DomEventProps; u: HtmlProps & DomEventProps; ul: HtmlProps & DomEventProps; var: HtmlProps & DomEventProps; video: HtmlProps & DomEventProps; wbr: HtmlProps & DomEventProps; svg: SvgProps & DomEventProps; animate: SvgProps & DomEventProps; circle: SvgProps & DomEventProps; animateTransform: SvgProps & DomEventProps; clipPath: SvgProps & DomEventProps; defs: SvgProps & DomEventProps; desc: SvgProps & DomEventProps; ellipse: SvgProps & DomEventProps; feBlend: SvgProps & DomEventProps; feColorMatrix: SvgProps & DomEventProps; feComponentTransfer: SvgProps & DomEventProps; feComposite: SvgProps & DomEventProps; feConvolveMatrix: SvgProps & DomEventProps; feDiffuseLighting: SvgProps & DomEventProps; feDisplacementMap: SvgProps & DomEventProps; feDropShadow: SvgProps & DomEventProps; feFlood: SvgProps & DomEventProps; feFuncA: SvgProps & DomEventProps; feFuncB: SvgProps & DomEventProps; feFuncG: SvgProps & DomEventProps; feFuncR: SvgProps & DomEventProps; feGaussianBlur: SvgProps & DomEventProps; feImage: SvgProps & DomEventProps; feMerge: SvgProps & DomEventProps; feMergeNode: SvgProps & DomEventProps; feMorphology: SvgProps & DomEventProps; feOffset: SvgProps & DomEventProps; feSpecularLighting: SvgProps & DomEventProps; feTile: SvgProps & DomEventProps; feTurbulence: SvgProps & DomEventProps; filter: SvgProps & DomEventProps; foreignObject: SvgProps & DomEventProps; g: SvgProps & DomEventProps; image: SvgProps & DomEventProps; line: SvgProps & DomEventProps; linearGradient: SvgProps & DomEventProps; marker: SvgProps & DomEventProps; mask: SvgProps & DomEventProps; path: SvgProps & DomEventProps; pattern: SvgProps & DomEventProps; polygon: SvgProps & DomEventProps; polyline: SvgProps & DomEventProps; radialGradient: SvgProps & DomEventProps; rect: SvgProps & DomEventProps; stop: SvgProps & DomEventProps; symbol: SvgProps & DomEventProps; text: SvgProps & DomEventProps; textPath: SvgProps & DomEventProps; tspan: SvgProps & DomEventProps; use: SvgProps & DomEventProps; [tagName: string]: DomProps & Record; } type Styles = { [K in Exclude]?: MaybeSignal; } & { [key: string]: MaybeSignal; }; type ExcludeNeverValues = T[Exclude]; type EventMap = Pick ? K : never; }>>; type EventHandler = (this: E, evt: Omit & { currentTarget: E; }) => void; type DomEventProps = { [K in keyof EventMap as `on${K}`]?: EventHandler; }; interface DangerousHtml { __html: string; } interface DomProps { ref?: RefSignalSetter; class?: MaybeSignal; style?: Styles; dangerouslySetInnerHTML?: MaybeSignal; children?: Children; } interface HtmlProps extends DomProps { accept?: MaybeSignal; acceptCharset?: MaybeSignal; accessKey?: MaybeSignal; action?: MaybeSignal; allow?: MaybeSignal; allowFullScreen?: MaybeSignal; allowTransparency?: MaybeSignal; alt?: MaybeSignal; as?: MaybeSignal; async?: MaybeSignal; autocomplete?: MaybeSignal; autoComplete?: MaybeSignal; autocorrect?: MaybeSignal; autoCorrect?: MaybeSignal; autofocus?: MaybeSignal; autoFocus?: MaybeSignal; autoPlay?: MaybeSignal; capture?: MaybeSignal; cellPadding?: MaybeSignal; cellSpacing?: MaybeSignal; charSet?: MaybeSignal; challenge?: MaybeSignal; checked?: MaybeSignal; cite?: MaybeSignal; cols?: MaybeSignal; colSpan?: MaybeSignal; content?: MaybeSignal; contentEditable?: MaybeSignal; contextMenu?: MaybeSignal; controls?: MaybeSignal; controlsList?: MaybeSignal; coords?: MaybeSignal; crossOrigin?: MaybeSignal; data?: MaybeSignal; dateTime?: MaybeSignal; default?: MaybeSignal; defaultChecked?: MaybeSignal; defaultValue?: MaybeSignal; defer?: MaybeSignal; dir?: MaybeSignal<"auto" | "rtl" | "ltr" | undefined>; disabled?: MaybeSignal; disableRemotePlayback?: MaybeSignal; download?: MaybeSignal; decoding?: MaybeSignal<"sync" | "async" | "auto" | undefined>; draggable?: MaybeSignal; encType?: MaybeSignal; enterkeyhint?: MaybeSignal<"enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined>; for?: MaybeSignal; form?: MaybeSignal; formAction?: MaybeSignal; formEncType?: MaybeSignal; formMethod?: MaybeSignal; formNoValidate?: MaybeSignal; formTarget?: MaybeSignal; frameBorder?: MaybeSignal; headers?: MaybeSignal; height?: MaybeSignal; hidden?: MaybeSignal; high?: MaybeSignal; href?: MaybeSignal; hrefLang?: MaybeSignal; httpEquiv?: MaybeSignal; icon?: MaybeSignal; inputMode?: MaybeSignal; integrity?: MaybeSignal; is?: MaybeSignal; keyParams?: MaybeSignal; keyType?: MaybeSignal; kind?: MaybeSignal; label?: MaybeSignal; lang?: MaybeSignal; list?: MaybeSignal; loading?: MaybeSignal<"eager" | "lazy" | undefined>; loop?: MaybeSignal; low?: MaybeSignal; manifest?: MaybeSignal; marginHeight?: MaybeSignal; marginWidth?: MaybeSignal; max?: MaybeSignal; maxLength?: MaybeSignal; media?: MaybeSignal; mediaGroup?: MaybeSignal; method?: MaybeSignal; min?: MaybeSignal; minLength?: MaybeSignal; multiple?: MaybeSignal; muted?: MaybeSignal; name?: MaybeSignal; nomodule?: MaybeSignal; nonce?: MaybeSignal; noValidate?: MaybeSignal; open?: MaybeSignal; optimum?: MaybeSignal; part?: MaybeSignal; pattern?: MaybeSignal; ping?: MaybeSignal; placeholder?: MaybeSignal; playsInline?: MaybeSignal; poster?: MaybeSignal; preload?: MaybeSignal; radioGroup?: MaybeSignal; readonly?: MaybeSignal; readOnly?: MaybeSignal; referrerpolicy?: MaybeSignal<"no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined>; rel?: MaybeSignal; required?: MaybeSignal; reversed?: MaybeSignal; role?: MaybeSignal; rows?: MaybeSignal; rowSpan?: MaybeSignal; sandbox?: MaybeSignal; scope?: MaybeSignal; scoped?: MaybeSignal; scrolling?: MaybeSignal; seamless?: MaybeSignal; selected?: MaybeSignal; shape?: MaybeSignal; size?: MaybeSignal; sizes?: MaybeSignal; slot?: MaybeSignal; span?: MaybeSignal; spellcheck?: MaybeSignal; spellCheck?: MaybeSignal; src?: MaybeSignal; srcset?: MaybeSignal; srcDoc?: MaybeSignal; srcLang?: MaybeSignal; srcSet?: MaybeSignal; start?: MaybeSignal; step?: MaybeSignal; summary?: MaybeSignal; tabIndex?: MaybeSignal; target?: MaybeSignal; title?: MaybeSignal; type?: MaybeSignal; useMap?: MaybeSignal; value?: MaybeSignal; volume?: MaybeSignal; width?: MaybeSignal; wmode?: MaybeSignal; wrap?: MaybeSignal; autocapitalize?: MaybeSignal<"off" | "none" | "on" | "sentences" | "words" | "characters" | undefined>; autoCapitalize?: MaybeSignal<"off" | "none" | "on" | "sentences" | "words" | "characters" | undefined>; disablePictureInPicture?: MaybeSignal; results?: MaybeSignal; translate?: MaybeSignal<"yes" | "no" | undefined>; about?: MaybeSignal; datatype?: MaybeSignal; inlist?: MaybeSignal; prefix?: MaybeSignal; property?: MaybeSignal; resource?: MaybeSignal; typeof?: MaybeSignal; vocab?: MaybeSignal; itemProp?: MaybeSignal; itemScope?: MaybeSignal; itemType?: MaybeSignal; itemID?: MaybeSignal; itemRef?: MaybeSignal; [name: string]: any; } interface SvgProps extends HtmlProps { "accent-height"?: MaybeSignal; accumulate?: MaybeSignal<"none" | "sum" | undefined>; additive?: MaybeSignal<"replace" | "sum" | undefined>; "alignment-baseline"?: MaybeSignal<"auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined>; "allow-reorder"?: MaybeSignal<"no" | "yes" | undefined>; alphabetic?: MaybeSignal; amplitude?: MaybeSignal; "arabic-form"?: MaybeSignal<"initial" | "medial" | "terminal" | "isolated" | undefined>; ascent?: MaybeSignal; attributeName?: MaybeSignal; attributeType?: MaybeSignal; azimuth?: MaybeSignal; baseFrequency?: MaybeSignal; "baseline-shift"?: MaybeSignal; baseProfile?: MaybeSignal; bbox?: MaybeSignal; begin?: MaybeSignal; bias?: MaybeSignal; by?: MaybeSignal; calcMode?: MaybeSignal; "cap-height"?: MaybeSignal; clip?: MaybeSignal; "clip-path"?: MaybeSignal; clipPathUnits?: MaybeSignal; "clip-rule"?: MaybeSignal; "color-interpolation"?: MaybeSignal; "color-interpolation-filters"?: MaybeSignal<"auto" | "sRGB" | "linearRGB" | "inherit" | undefined>; "color-profile"?: MaybeSignal; "color-rendering"?: MaybeSignal; contentScriptType?: MaybeSignal; contentStyleType?: MaybeSignal; cursor?: MaybeSignal; cx?: MaybeSignal; cy?: MaybeSignal; d?: MaybeSignal; decelerate?: MaybeSignal; descent?: MaybeSignal; diffuseConstant?: MaybeSignal; direction?: MaybeSignal; display?: MaybeSignal; divisor?: MaybeSignal; "dominant-baseline"?: MaybeSignal; dur?: MaybeSignal; dx?: MaybeSignal; dy?: MaybeSignal; edgeMode?: MaybeSignal; elevation?: MaybeSignal; "enable-background"?: MaybeSignal; end?: MaybeSignal; exponent?: MaybeSignal; externalResourcesRequired?: MaybeSignal; fill?: MaybeSignal; "fill-opacity"?: MaybeSignal; "fill-rule"?: MaybeSignal<"nonzero" | "evenodd" | "inherit" | undefined>; filter?: MaybeSignal; filterRes?: MaybeSignal; filterUnits?: MaybeSignal; "flood-color"?: MaybeSignal; "flood-opacity"?: MaybeSignal; focusable?: MaybeSignal; "font-family"?: MaybeSignal; "font-size"?: MaybeSignal; "font-size-adjust"?: MaybeSignal; "font-stretch"?: MaybeSignal; "font-style"?: MaybeSignal; "font-variant"?: MaybeSignal; "font-weight"?: MaybeSignal; format?: MaybeSignal; from?: MaybeSignal; fx?: MaybeSignal; fy?: MaybeSignal; g1?: MaybeSignal; g2?: MaybeSignal; "glyph-name"?: MaybeSignal; "glyph-orientation-horizontal"?: MaybeSignal; "glyph-orientation-vertical"?: MaybeSignal; glyphRef?: MaybeSignal; gradientTransform?: MaybeSignal; gradientUnits?: MaybeSignal; hanging?: MaybeSignal; "horiz-adv-x"?: MaybeSignal; "horiz-origin-x"?: MaybeSignal; ideographic?: MaybeSignal; "image-rendering"?: MaybeSignal; in2?: MaybeSignal; in?: MaybeSignal; intercept?: MaybeSignal; k1?: MaybeSignal; k2?: MaybeSignal; k3?: MaybeSignal; k4?: MaybeSignal; k?: MaybeSignal; kernelMatrix?: MaybeSignal; kernelUnitLength?: MaybeSignal; kerning?: MaybeSignal; keyPoints?: MaybeSignal; keySplines?: MaybeSignal; keyTimes?: MaybeSignal; lengthAdjust?: MaybeSignal; "letter-spacing"?: MaybeSignal; "lighting-color"?: MaybeSignal; limitingConeAngle?: MaybeSignal; local?: MaybeSignal; "marker-end"?: MaybeSignal; markerHeight?: MaybeSignal; "marker-mid"?: MaybeSignal; "marker-start"?: MaybeSignal; markerUnits?: MaybeSignal; markerWidth?: MaybeSignal; mask?: MaybeSignal; maskContentUnits?: MaybeSignal; maskUnits?: MaybeSignal; mathematical?: MaybeSignal; mode?: MaybeSignal; numOctaves?: MaybeSignal; offset?: MaybeSignal; opacity?: MaybeSignal; operator?: MaybeSignal; order?: MaybeSignal; orient?: MaybeSignal; orientation?: MaybeSignal; origin?: MaybeSignal; overflow?: MaybeSignal; "overline-position"?: MaybeSignal; "overline-thickness"?: MaybeSignal; "paint-order"?: MaybeSignal; "panose-1"?: MaybeSignal; pathLength?: MaybeSignal; patternContentUnits?: MaybeSignal; patternTransform?: MaybeSignal; patternUnits?: MaybeSignal; "pointer-events"?: MaybeSignal; points?: MaybeSignal; pointsAtX?: MaybeSignal; pointsAtY?: MaybeSignal; pointsAtZ?: MaybeSignal; preserveAlpha?: MaybeSignal; preserveAspectRatio?: MaybeSignal; primitiveUnits?: MaybeSignal; r?: MaybeSignal; radius?: MaybeSignal; refX?: MaybeSignal; refY?: MaybeSignal; "rendering-intent"?: MaybeSignal; repeatCount?: MaybeSignal; repeatDur?: MaybeSignal; requiredExtensions?: MaybeSignal; requiredFeatures?: MaybeSignal; restart?: MaybeSignal; result?: MaybeSignal; rotate?: MaybeSignal; rx?: MaybeSignal; ry?: MaybeSignal; scale?: MaybeSignal; seed?: MaybeSignal; "shape-rendering"?: MaybeSignal; slope?: MaybeSignal; spacing?: MaybeSignal; specularConstant?: MaybeSignal; specularExponent?: MaybeSignal; speed?: MaybeSignal; spreadMethod?: MaybeSignal; startOffset?: MaybeSignal; stdDeviation?: MaybeSignal; stemh?: MaybeSignal; stemv?: MaybeSignal; stitchTiles?: MaybeSignal; "stop-color"?: MaybeSignal; "stop-opacity"?: MaybeSignal; "strikethrough-position"?: MaybeSignal; "strikethrough-thickness"?: MaybeSignal; string?: MaybeSignal; stroke?: MaybeSignal; "stroke-dasharray"?: MaybeSignal; "stroke-dashoffset"?: MaybeSignal; "stroke-linecap"?: MaybeSignal<"butt" | "round" | "square" | "inherit" | undefined>; "stroke-linejoin"?: MaybeSignal<"miter" | "round" | "bevel" | "inherit" | undefined>; "stroke-miterlimit"?: MaybeSignal; "stroke-opacity"?: MaybeSignal; "stroke-width"?: MaybeSignal; surfaceScale?: MaybeSignal; systemLanguage?: MaybeSignal; tableValues?: MaybeSignal; targetX?: MaybeSignal; targetY?: MaybeSignal; textAnchor?: MaybeSignal; textDecoration?: MaybeSignal; textLength?: MaybeSignal; textRendering?: MaybeSignal; to?: MaybeSignal; transform?: MaybeSignal; "transform-origin"?: MaybeSignal; u1?: MaybeSignal; u2?: MaybeSignal; "underline-position"?: MaybeSignal; "underline-thickness"?: MaybeSignal; unicode?: MaybeSignal; "unicode-bidi"?: MaybeSignal; "unicode-range"?: MaybeSignal; "units-per-em"?: MaybeSignal; "v-alphabetic"?: MaybeSignal; values?: MaybeSignal; vectorEffect?: MaybeSignal; version?: MaybeSignal; "vert-adv-y"?: MaybeSignal; "vert-origin-x"?: MaybeSignal; "vert-origin-y"?: MaybeSignal; "v-hanging"?: MaybeSignal; "v-ideographic"?: MaybeSignal; viewBox?: MaybeSignal; viewTarget?: MaybeSignal; visibility?: MaybeSignal; "v-mathematical"?: MaybeSignal; widths?: MaybeSignal; "word-spacing"?: MaybeSignal; writingMode?: MaybeSignal; x1?: MaybeSignal; x2?: MaybeSignal; x?: MaybeSignal; xChannelSelector?: MaybeSignal; "x-height"?: MaybeSignal; y1?: MaybeSignal; y2?: MaybeSignal; y?: MaybeSignal; yChannelSelector?: MaybeSignal; z?: MaybeSignal; zoomAndPan?: MaybeSignal; } type RemoveOn = S extends `on${infer R}` ? Uncapitalize : never; type CamelCaseToKebabCase = S extends `${infer F}${infer R}` ? F extends Lowercase ? `${F}${CamelCaseToKebabCase}` : `-${Lowercase}${CamelCaseToKebabCase}` : Lowercase; type KebabCaseToCamelCase = S extends `${infer F}-${infer R}` ? `${F}${Capitalize>}` : Capitalize; type JsxPropNameToEventName = CamelCaseToKebabCase>; type EventNameToJsxProp = `on${Capitalize>}`; declare const contextSym: unique symbol; /** * A value that can be passed through the component tree without having to be * explicitly passed as a prop. */ interface Context { readonly [contextSym]: string; /** @ignore */ readonly _init: T; /** @ignore */ readonly _opts?: SetSignalOptions; } /** * Creates a new context with the given value. */ declare const createContext: ((value: T, opts?: SetSignalOptions) => Context) & ((value?: T, opts?: SetSignalOptions) => Context); declare const useContext: (context: Context) => Signal; type TemplateNodes = (Node | TemplateNodes)[]; declare namespace TemplateNodes { const forEach: (nodes: TemplateNodes, fn: (node: Node) => void) => void; const last: (nodes: TemplateNodes, lastIndex?: number) => Node | undefined; } /** * Represents a render result of a component. */ interface Template { /** * Build the DOM elements represented by this template. */ build(): TemplateNodes; } interface Tagged { _tag: T; } type OmitNever = Omit; type PartialRequire = Omit & Required>; /** @ignore */ interface PropMeta extends PropOptions, Tagged<"p"> { _type?: [T]; _defaultOrContext: T; } interface AttributeOptions { /** * The name of the attribute to observe. * * Defaults to the kebab-case version of the prop. */ name?: string; /** * A function to transform the attribute value to the prop value. */ transform: (value: string) => T; /** * Set to `true` to not observe the attribute for changes. * * @default false */ static?: boolean; } type PartialPartial = Omit & Partial>; interface PropOptions { attribute?: ((value: string) => T) | (string extends T ? PartialPartial, "transform"> : AttributeOptions); } type Props = OmitNever<{ readonly [K in keyof M]: M[K] extends PropMeta ? Signal : never; }>; type EventConstructor = new (name: string, arg: T) => E; /** @ignore */ interface EventMeta extends Tagged<"e"> { _event: E; } type Events = OmitNever ? E : never : never; }, `on${Lowercase}`>>; type GeneralJsxProps = Partial | `on${string}` | `${Uppercase}${string}` | "accessKeyLabel" | "offsetHeight" | "offsetLeft" | "offsetParent" | "offsetTop" | "offsetWidth" | "attributes" | "classList" | "clientHeight" | "clientLeft" | "clientTop" | "clientWidth" | "localName" | "namespaceURI" | "ownerDocument" | "part" | "prefix" | "scrollHeight" | "scrollWidth" | "shadowRoot" | "tagName" | "baseURI" | "childNodes" | "firstChild" | "isConnected" | "lastChild" | "nextSibling" | "nodeName" | "nodeType" | "parentElement" | "parentNode" | "previousSibling" | "nextElementSibling" | "previousElementSibling" | "childElementCount" | "firstElementChild" | "lastElementChild" | "assignedSlot" | "attributeStyleMap" | "isContentEditable" | "dataset" ? never : T[K] extends Function ? never : MaybeSignal; }>> & DomProps & DomEventProps & Record; type JsxProps = typeof jsxPropsSym extends keyof T ? NonNullable : any; type ComponentJsxProps = Partial]: Props[K] extends Signal ? MaybeSignal : never; }> & { [K in keyof Events]: (evt: InstanceType[K]>) => void; }> & GeneralJsxProps; type EventEmitters = OmitNever]: Events[K] extends EventConstructor ? undefined extends E ? (arg?: E) => boolean : (arg: E) => boolean : never; }, `on${Lowercase}`>>; /** * Defines a property in your component metadata that can be set from outside * of the component. * * Make sure to avoid conflicts with native `HTMLElement` properties. * * You can get properties by accessing the {@link Signal} in `this.props`. * It's also possible to set the properties directly on the component instance. * * It's also possible to define an attribute for the property by setting the * `attribute` option. By default, the attribute name is the kebab-case version * of the property name. The attribute will be observed and the signal updated * on changes. You can also provide a custom name and a transform function to * convert the attribute value to the property value. * * @example * ```tsx * class App extends Component("x-app", { * greetingMessage: prop("Hello, world!", { * attribute: { * name: "greeting", * } * }), * }) { * render() { * return

{this.props.greetingMessage}

; * } * } * * defineComponents(App); * * const app = new App(); * app.greetingMessage = "Hello, universe!"; * ``` */ declare const prop: ((context: Context, opts?: PropOptions) => PropMeta) & ((defaultValue: T, opts?: PropOptions) => PropMeta) & ((defaultValue?: T, opts?: PropOptions) => PropMeta); type _CustomEventContructor = undefined extends T ? typeof CustomEvent : EventConstructor, "detail">, CustomEvent>; /** * Defines an event in your component metadata that can be dispatched by * the component. * * Make sure your event name starts with `on` and to avoid conflicts with * native `HTMLElement` events. The event name will be converted to kebab-case. * * You can dispatch events either using `HTMLElement.dispatchEvent` or by * calling the event emitter function in `this.events` inside the `render` * function of a component. * * @example * ```tsx * class App extends Component("x-app", { * onSomethingHappen: event(), * // Event name will be `something-happen` * }) { * render() { * // … * this.events.onSomethingHappen({ detail: "Something happened! "}); * } * } * * const app = new App(); * app.addEventListener("something-happen", (evt) => { * // `evt` is `CustomEvent` * console.log(evt.detail); * }); * ``` * * You can also provide a custom event constructor: * * @example * ```tsx * class App extends Component("x-app", { * onSomethingClick: event(() => MouseEvent), * }) { * render() { * return ( * * ); * } * } * ``` */ declare const event: (() => EventMeta<_CustomEventContructor>) & (() => EventMeta<_CustomEventContructor>) & ((eventConstructor: E) => EventMeta); type Metadata = { [K in keyof _ComponentInner | "props" | "events"]?: never; } & { [K in keyof DomProps]?: never; } & { [K in keyof HTMLElement]?: never; } & { [name: string]: PropMeta | EventMeta; }; declare const componentSym: unique symbol; declare const jsxPropsSym: unique symbol; declare abstract class _ComponentInner { protected props: Props; protected events: EventEmitters; readonly [jsxPropsSym]?: ComponentJsxProps; readonly [componentSym]: { _scope?: ReturnType; _destroy?: (() => void) | void; }; connectedCallback(): void; disconnectedCallback(): void; attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void; addEventListener & string>>(type: K, listener: (event: InstanceType[Extract, keyof Events>]>) => void, options?: boolean | AddEventListenerOptions): void; removeEventListener & string>>(type: K, listener: (event: InstanceType[Extract, keyof Events>]>) => void, options?: boolean | EventListenerOptions): void; abstract render(): Template; } interface ComponentConstructor { /** @ignore */ readonly [componentSym]: { readonly _tagName: string | null; }; readonly observedAttributes: readonly string[]; new (): Component; } interface ComponentOptions { /** * Shadow DOM options. Set to `false` to disable shadow DOM. * * @default { mode: "open" } */ shadow?: ShadowRootInit | false; } /** * Creates an effect which will rerun when any accessed signal changes. * * If used inside of a component and the component is not yet mounted, the * effect will run only after the component is mounted. Otherwise, the effect * will run immediately. * * @param fn The function to run; it may return a cleanup function. */ declare const useMountEffect: (fn: () => Cleanup, deps?: SignalLike[]) => void; type Component = { -readonly [K in keyof Props]: Props[K] extends Signal ? T | undefined : never; } & _ComponentInner & HTMLElement; /** * Creates a new web component class. * * Specify props and events using the `metadata` parameter. * * @example * ```tsx * class MyComponent extends Component({ * myProp: prop("Hello, world!"), * onMyEvent: event(), * }) { * render() { * return ( * <> *

{this.props.myProp}

* * * ); * }, * } * * defineComponents(MyComponent); * ``` */ declare const Component: ((tagName?: string) => ComponentConstructor<{}>) & ((tagName: string, metadata: M, opts?: ComponentOptions) => ComponentConstructor) & ((metadata: M, opts?: ComponentOptions) => ComponentConstructor); /** * Determines whether the given value is a component created by * extending {@link ComponentConstructor}. */ declare const isComponent: (value: any) => value is ComponentConstructor | Component; /** * Represents a functional component. * * @example * ```tsx * const MyComponent: FunctionalComponent<{ * name: MaybeSignal; * }> = ({ name }) => { * return

Hello, {name}!

; * }; * ``` */ interface FunctionalComponent { (props: P): Template; } /** * Defines a set of components with the given prefix. */ declare const defineComponents: ((...components: ComponentConstructor[]) => void) & ((prefix: string, ...components: ComponentConstructor[]) => void); type Children = Template | MaybeSignal | Children[]; /** * Fragment is a component that can be used to wrap multiple children without * introducing an extra DOM element. * * @example * ```tsx * render() { * return ( * <> *

Hello World

*

This is a paragraph.

* * ); * } * ``` */ declare const Fragment: FunctionalComponent<{ children?: Children; }>; /** * Creates a template based on the given component type. * * @example * ```tsx * render() { * return createElement("div", { id: "app" }, [ * createElement("h1", {}, "Hello, World!"), * ]); * } * ``` */ declare const createElement: ((type: K, props?: DomIntrinsicElements[K], children?: Children) => Template) & ((...args: [ type: new () => T, ...({} extends JsxProps ? [props?: JsxProps] : [props: JsxProps]), children?: DomProps["children"] ]) => Template) & (

(...args: [ type: FunctionalComponent

, ...({} extends P ? [props?: P] : [props: P]), ...(P extends { children?: unknown; } ? undefined extends P["children"] ? [children?: P["children"]] : [children: P["children"]] : []) ]) => Template); /** * Shorthand for {@link createElement} with convenience methods for intrinsic * elements. * * @example * ```tsx * render() { * return h.div({ id: "app" }, [ * h.h1({}, "Hello, World!"), * ]); * } * ``` */ declare const h: typeof createElement & { [K in keyof DomIntrinsicElements]: (props?: DomIntrinsicElements[K], children?: Children) => Template; }; /** * `For` is a component that can be used to render a list of items. */ declare const For: (props: { each?: MaybeSignal; key?: (item: T, index: number) => string | number; children?: (item: Signal, index: Signal, arr: SignalLike) => Template; }) => Template; /** * `If` is a component that can be used to render conditionally. */ declare const If: FunctionalComponent<{ condition?: MaybeSignal; children?: Children; }>; /** * `ElseIf` serves as an `else if` block for {@link If}. It can also be chained * multiple times. */ declare const ElseIf: FunctionalComponent<{ condition?: MaybeSignal; children?: Children; }>; /** * `Else` indicates the `else` block for {@link If} and {@link ElseIf}. */ declare const Else: FunctionalComponent<{ children?: Children; }>; declare const Portal: FunctionalComponent<{ mount: Node; children?: Children; }>; declare const Style: FunctionalComponent<{ light?: boolean; children?: MaybeSignal; }>; declare const css: (strings: TemplateStringsArray, ...values: MaybeSignal[]) => MaybeSignal; /** @ignore */ declare const jsx: (type: any, props?: object & { key?: unknown; }, key?: unknown) => Template; /** @ignore */ declare namespace JSX { type Element = Template; type ElementClass = Omit; interface ElementAttributesProperty { [jsxPropsSym]: {}; } interface ElementChildrenAttribute { children: {}; } type IntrinsicElements = DomIntrinsicElements; interface IntrinsicClassAttributes extends DomProps, DomEventProps { } } export { Component, Else, ElseIf, For, Fragment, If, JSX, MaybeSignal, Portal, Style, TemplateNodes, _ComponentInner, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope }; export type { AttributeOptions, Children, Cleanup, ComponentConstructor, ComponentOptions, Context, DangerousHtml, EventConstructor, EventMeta, FunctionalComponent, Metadata, PropMeta, PropOptions, RefSignal, RefSignalSetter, SetSignalOptions, Signal, SignalLike, SignalSetter, Styles, SubscopeOptions, Template };