JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

JavaScript

let entryComponent;

function handleStateChange() {
  render();
}

function render() {
  console.log('*** rendering app: ', entryComponent.render());
}

function initApp({ entryComponent: _entryComp }) {
  entryComponent = _entryComp;
	render();
}

function createComponent({ render} = {}) {
	return {
  	render,
  };
}

function useState({ val } = {}) {
	let actualVal = val;
  
  function setVal({ newVal } = {}) {
  	actualVal = newVal;
    handleStateChange();
  }
  
  function getVal() {
  	return actualVal;
  }
  
  return { getVal, setVal };
}

function something() {
	const { getVal, setVal } = useState({ val: 1 });
  setTimeout(() => {
  	setVal({ newVal: 2 });
  }, 2000);

	return createComponent({
    render: () => {
    	return 'the value is: ' + getVal();
    },
  });
}

initApp({ entryComponent: something() });