JSFiddle - React, Tailwind, and code Playground

by tonyleeper

JavaScript

var App = function () {
	this.component1 = new Component1({ message: 'foo' }, function (state) {
    	
    }.bind(this));
    
    this.component2 = new Component2({ message: this.component1.state.message }, function (state) {
    	this.component2.update({ message: this.component1.state.message });
    }.bind(this));

	this.render = function (target) {
    	var header = document.createElement('h1');
        header.textContent = 'Demo application';

		var component1Element = document.createElement('component1');
        this.component1.render(component1Element);
        
        var component2Element = document.createElement('component2');
        this.component2.render(component2Element);

		target.appendChild(header);
        target.appendChild(component1Element);
        target.appendChild(component2Element);        
    };
};

var Component1 = function (state, onStateChange) {
	this.state = state;
    
    this.render = function (target) {
    	this.target = target;
        
		var inputElement = document.createElement('input');
        inputElement.setAttribute('type', 'text');
        inputElement.value = state.message;
        inputElement.addEventListener('input', function (event) {
        	state.message = inputElement.value;
            onStateChange(state);
        });
        
        target.appendChild(inputElement);
    };
    
    this.update = function (state) {
    	this.target.querySelector('input').value = state.message;
    };
    
    this.dispose = function () {
    	
    };
};

var Component2 = function (state, onStateChange) {
	this.state = state;
    
    this.render = function (target) {
    	this.target = target;
        target.textContent = state.message;
    };
    
    this.update = function (state) {
    	this.target.textContent = state.message;
    };
    
    this.dispose = function () {
    
    };
};

(new App()).render(document.body);