Types Thunderous is written in TypeScript, and some types are exported for convenience.
  • HTMLCustomElement - A generic type that represents the HTMLElement and additional properties. import { HTMLCustomElement, customElement } from 'thunderous'; // Define properties for your custom element. type MyElementProps = { foo: string; bar: number; }; // Extend the native HTMLElementTagNameMap to include your custom element. declare global { interface HTMLElementTagNameMap { // Pass your props to the HTMLCustomElement type. 'my-element': HTMLCustomElement<MyElementProps>; } } const MyElement = customElement<MyElementProps>(({ propSignals }) => { const [foo] = propSignals.prop.init(''); const [bar] = propSignals.prop.init(0); return html` <p>Foo: ${foo}</p> <p>Bar: ${bar}</p> `; }); MyElement.define('my-element'); // Because we extended the HTMLElementTagNameMap, // the below will automatically be typed accordingly. const myElement = document.createElement('my-element'); myElement.foo = 'Hello'; myElement.bar = 42;
  • Signal, SignalSetter, and SignalGetter - Types that represent the signal and its setter and getter functions. import { Signal, SignalGetter, SignalSetter, createSignal } from 'thunderous'; const signal: Signal<string> = createSignal(''); const foo: SignalGetter<string> = signal[0]; const setFoo: SignalSetter<string> = signal[1];
  • RenderFunction and RenderArgs - Types that represent the render function and its arguments. import { RenderFunction, RenderArgs, html } from 'thunderous'; const renderFunction: RenderFunction = (args: RenderArgs) => { return html`<p>Hello World</p>`; };