Solid.js Counter with Event Dispatcher - Solid-js Typing CST Test
Loading…
Solid.js Counter with Event Dispatcher — Solid-js Code
Dispatches custom events on counter updates.
import { createSignal } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
const dispatchUpdate = () => {
const event = new CustomEvent('counterUpdate', { detail: count() });
document.dispatchEvent(event);
};
return (
<div>
<h2>Counter: {count()}</h2>
<button onClick={() => { setCount(count() + 1); dispatchUpdate(); }}>+</button>
<button onClick={() => { setCount(count() - 1); dispatchUpdate(); }}>-</button>
</div>
);
}
export default Counter;Solid-js Language Guide
SolidJS is a fast, reactive JavaScript library for building user interfaces using fine-grained reactivity and a compile-time optimized rendering model. It emphasizes performance, predictable state updates, and minimal abstraction.
Primary Use Cases
- ▸High-performance web apps
- ▸Highly interactive dashboards
- ▸Dynamic UI widgets and embedded components
- ▸Single-page applications (SPAs)
- ▸Reactive data-driven interfaces
Notable Features
- ▸Fine-grained reactive system
- ▸JSX without VDOM diffing
- ▸Highly optimized compile-time output
- ▸Simple and predictable reactivity model
- ▸Small bundle size (~6-8 KB)
Origin & Creator
Created by Ryan Carniato and released publicly in 2020, inspired by Knockout, React, and fine-grained reactivity systems.
Industrial Note
SolidJS excels in high-performance UI applications, real-time dashboards, embedded widgets, and scenarios requiring extremely fast updates.
More Solid-js Typing Exercises
Solid.js Counter ComponentSolid.js Counter with LocalStorageSolid.js Counter with Computed ParitySolid.js Counter with Signal WatchSolid.js Counter with Conditional ThemeSolid.js Counter with Derived StyleSolid.js Counter with Input BindingSolid.js Counter with Slot ControlsSolid.js Counter with onMount Hook