JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<input type="number" value="0"/>

<p>
Counter: <span>0</span>
</p>

TypeScript

class Reactive {
    constructor(state, lifeCycle) {
        this._state = state;
        this._lifeCycle = lifeCycle;
    }

    get state() {
        return this._state;
    }

    set state(state) {
		
		let canChangeState = true;
		if(this._lifeCycle.shouldChangeState) {
			canChangeState = this._lifeCycle.shouldChangeState(this._state, state);
		}
		
		if(canChangeState) {
			const oldState = this._state
					
			if(this._lifeCycle.beforeChangeState) {
				this._lifeCycle.beforeChangeState(this._state, state);
			}
			
			this._state = state;

			if(this._lifeCycle.onStateChanged) {
				this._lifeCycle.onStateChanged(oldState, this._state)
			}
		}
    }
}

const lifeCycle = {
	beforeChangeState: (state, nextState) => {
		console.log('Before change state:', state)
	},
	onStateChanged: (prevState, state) => {
		console.log({prevState,state})
		const span = document.querySelector('span')
		span.textContent = state.value;
	},
	shouldChangeState: (state, nextState) => {
		return (Number(state.value) < Number(nextState.value)) || (Number(nextState.value) < 0);
	}
}

const reactive = new Reactive({ value: 0 }, lifeCycle);


const input = document.querySelector('input');

input.addEventListener('change', (e) => {
	reactive.state = { ...reactive.state, value: e.target.value }; // Non notifica più gli ascoltatori
})