Quick Start Install Install Thunderous via NPM: npm install thunderous Usage Thunderous makes it easy to define smaller components with less noise. import { customElement, html, css, createSignal } from 'thunderous'; const MyElement = customElement(({ adoptStyleSheet }) => { const [count, setCount] = createSignal(0); const increment = () => setCount(count() + 1); adoptStyleSheet(myStyleSheet); return html` <button onclick="${increment}">Increment</button> <output>${count}</output> `; }); const myStyleSheet = css` :host { display: block; font-family: sans-serif; } `; MyElement.define('my-element'); What's Exported?
  • customElement - A function for writing custom elements with a more declarative syntax. See Defining Custom Elements.
  • html - A tagged template function for creating HTML templates. Signals can be bound to templates using this function. See Rendering.
  • css - A tagged template function for constructing style sheet objects that can be adopted by shadow roots and documents. See Adopted Style Sheets.
  • createRegistry - A function to create a registry for custom elements and use their associated classes to look up tag names dynamically. See Registries.
  • createSignal - A function for creating signals that can be bound to templates. See Binding Signals.
  • createEffect - A function for creating an effect that subscribes to the signals used within its body. See Effects.
  • derived - A function for creating a derived signal that depends on other signals. See Derived Signals.