Build-time highlighting
Server component parses the code at build time and passes the ranges array across the client boundary as a plain object. The parser never ships to the browser.
Short
function greet(name) {
return `Hello, ${name}!`;
}
const people = ['Alice', 'Bob', 'Carol'];
for (const p of people) console.log(greet(p));
Medium
// Tiny reactive store
class Store {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter = new Store(0);
counter.subscribe((next) => console.log('count:', next));
counter.set((n) => n + 1);
Enhanced (links + regions)
// The Lezer parser docs live at https://lezer.codemirror.net
// Anchor above is a real clickable link inside the code block.
import { parser } from '@lezer/javascript';
const tree = parser.parse('const x = 42');
console.log(tree.toString());
const nodeCount = tree.length;
console.log(`parsed ${nodeCount} characters`);
CSS
/* A small CSS snippet */
:root {
--accent: #4f46e5;
--radius: 8px;
}
.card {
padding: 1rem 1.25rem;
border-radius: var(--radius);
background: color-mix(in srgb, var(--accent) 10%, white);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.card:hover {
transform: translateY(-1px);
transition: transform 120ms ease;
}
@media (prefers-color-scheme: dark) {
.card {
background: color-mix(in srgb, var(--accent) 20%, black);
}
}
Long
// --- section 0 ---
// Tiny reactive store
class Store0 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter0 = new Store0(0);
counter0.subscribe((next) => console.log('count:', next));
counter0.set((n) => n + 1);
// --- section 1 ---
// Tiny reactive store
class Store1 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter1 = new Store1(0);
counter1.subscribe((next) => console.log('count:', next));
counter1.set((n) => n + 1);
// --- section 2 ---
// Tiny reactive store
class Store2 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter2 = new Store2(0);
counter2.subscribe((next) => console.log('count:', next));
counter2.set((n) => n + 1);
// --- section 3 ---
// Tiny reactive store
class Store3 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter3 = new Store3(0);
counter3.subscribe((next) => console.log('count:', next));
counter3.set((n) => n + 1);
// --- section 4 ---
// Tiny reactive store
class Store4 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter4 = new Store4(0);
counter4.subscribe((next) => console.log('count:', next));
counter4.set((n) => n + 1);
// --- section 5 ---
// Tiny reactive store
class Store5 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter5 = new Store5(0);
counter5.subscribe((next) => console.log('count:', next));
counter5.set((n) => n + 1);
// --- section 6 ---
// Tiny reactive store
class Store6 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter6 = new Store6(0);
counter6.subscribe((next) => console.log('count:', next));
counter6.set((n) => n + 1);
// --- section 7 ---
// Tiny reactive store
class Store7 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter7 = new Store7(0);
counter7.subscribe((next) => console.log('count:', next));
counter7.set((n) => n + 1);
// --- section 8 ---
// Tiny reactive store
class Store8 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter8 = new Store8(0);
counter8.subscribe((next) => console.log('count:', next));
counter8.set((n) => n + 1);
// --- section 9 ---
// Tiny reactive store
class Store9 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter9 = new Store9(0);
counter9.subscribe((next) => console.log('count:', next));
counter9.set((n) => n + 1);
// --- section 10 ---
// Tiny reactive store
class Store10 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter10 = new Store10(0);
counter10.subscribe((next) => console.log('count:', next));
counter10.set((n) => n + 1);
// --- section 11 ---
// Tiny reactive store
class Store11 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter11 = new Store11(0);
counter11.subscribe((next) => console.log('count:', next));
counter11.set((n) => n + 1);
// --- section 12 ---
// Tiny reactive store
class Store12 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter12 = new Store12(0);
counter12.subscribe((next) => console.log('count:', next));
counter12.set((n) => n + 1);
// --- section 13 ---
// Tiny reactive store
class Store13 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter13 = new Store13(0);
counter13.subscribe((next) => console.log('count:', next));
counter13.set((n) => n + 1);
// --- section 14 ---
// Tiny reactive store
class Store14 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter14 = new Store14(0);
counter14.subscribe((next) => console.log('count:', next));
counter14.set((n) => n + 1);
// --- section 15 ---
// Tiny reactive store
class Store15 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter15 = new Store15(0);
counter15.subscribe((next) => console.log('count:', next));
counter15.set((n) => n + 1);
// --- section 16 ---
// Tiny reactive store
class Store16 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter16 = new Store16(0);
counter16.subscribe((next) => console.log('count:', next));
counter16.set((n) => n + 1);
// --- section 17 ---
// Tiny reactive store
class Store17 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter17 = new Store17(0);
counter17.subscribe((next) => console.log('count:', next));
counter17.set((n) => n + 1);
// --- section 18 ---
// Tiny reactive store
class Store18 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter18 = new Store18(0);
counter18.subscribe((next) => console.log('count:', next));
counter18.set((n) => n + 1);
// --- section 19 ---
// Tiny reactive store
class Store19 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter19 = new Store19(0);
counter19.subscribe((next) => console.log('count:', next));
counter19.set((n) => n + 1);
// --- section 20 ---
// Tiny reactive store
class Store20 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter20 = new Store20(0);
counter20.subscribe((next) => console.log('count:', next));
counter20.set((n) => n + 1);
// --- section 21 ---
// Tiny reactive store
class Store21 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter21 = new Store21(0);
counter21.subscribe((next) => console.log('count:', next));
counter21.set((n) => n + 1);
// --- section 22 ---
// Tiny reactive store
class Store22 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter22 = new Store22(0);
counter22.subscribe((next) => console.log('count:', next));
counter22.set((n) => n + 1);
// --- section 23 ---
// Tiny reactive store
class Store23 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter23 = new Store23(0);
counter23.subscribe((next) => console.log('count:', next));
counter23.set((n) => n + 1);
// --- section 24 ---
// Tiny reactive store
class Store24 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter24 = new Store24(0);
counter24.subscribe((next) => console.log('count:', next));
counter24.set((n) => n + 1);
// --- section 25 ---
// Tiny reactive store
class Store25 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter25 = new Store25(0);
counter25.subscribe((next) => console.log('count:', next));
counter25.set((n) => n + 1);
// --- section 26 ---
// Tiny reactive store
class Store26 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter26 = new Store26(0);
counter26.subscribe((next) => console.log('count:', next));
counter26.set((n) => n + 1);
// --- section 27 ---
// Tiny reactive store
class Store27 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter27 = new Store27(0);
counter27.subscribe((next) => console.log('count:', next));
counter27.set((n) => n + 1);
// --- section 28 ---
// Tiny reactive store
class Store28 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter28 = new Store28(0);
counter28.subscribe((next) => console.log('count:', next));
counter28.set((n) => n + 1);
// --- section 29 ---
// Tiny reactive store
class Store29 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter29 = new Store29(0);
counter29.subscribe((next) => console.log('count:', next));
counter29.set((n) => n + 1);
// --- section 30 ---
// Tiny reactive store
class Store30 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter30 = new Store30(0);
counter30.subscribe((next) => console.log('count:', next));
counter30.set((n) => n + 1);
// --- section 31 ---
// Tiny reactive store
class Store31 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter31 = new Store31(0);
counter31.subscribe((next) => console.log('count:', next));
counter31.set((n) => n + 1);
// --- section 32 ---
// Tiny reactive store
class Store32 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter32 = new Store32(0);
counter32.subscribe((next) => console.log('count:', next));
counter32.set((n) => n + 1);
// --- section 33 ---
// Tiny reactive store
class Store33 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter33 = new Store33(0);
counter33.subscribe((next) => console.log('count:', next));
counter33.set((n) => n + 1);
// --- section 34 ---
// Tiny reactive store
class Store34 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter34 = new Store34(0);
counter34.subscribe((next) => console.log('count:', next));
counter34.set((n) => n + 1);
// --- section 35 ---
// Tiny reactive store
class Store35 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter35 = new Store35(0);
counter35.subscribe((next) => console.log('count:', next));
counter35.set((n) => n + 1);
// --- section 36 ---
// Tiny reactive store
class Store36 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter36 = new Store36(0);
counter36.subscribe((next) => console.log('count:', next));
counter36.set((n) => n + 1);
// --- section 37 ---
// Tiny reactive store
class Store37 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter37 = new Store37(0);
counter37.subscribe((next) => console.log('count:', next));
counter37.set((n) => n + 1);
// --- section 38 ---
// Tiny reactive store
class Store38 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter38 = new Store38(0);
counter38.subscribe((next) => console.log('count:', next));
counter38.set((n) => n + 1);
// --- section 39 ---
// Tiny reactive store
class Store39 {
#state;
#listeners = new Set();
constructor(initial) {
this.#state = initial;
}
get() {
return this.#state;
}
set(next) {
const prev = this.#state;
this.#state = typeof next === 'function' ? next(prev) : next;
if (!Object.is(this.#state, prev)) {
for (const listen of this.#listeners) listen(this.#state, prev);
}
}
subscribe(fn) {
this.#listeners.add(fn);
return () => this.#listeners.delete(fn);
}
}
const counter39 = new Store39(0);
counter39.subscribe((next) => console.log('count:', next));
counter39.set((n) => n + 1);