JSFiddle - React, Tailwind, and code Playground

by Marcus Feitoza

HTML

<script src="https://cdn.rawgit.com/lhorie/mithril.js/rewrite/mithril.min.js"></script>
<div id="sam">

</div>
<p>
Type <b>one</b> or <b>fail</b>
</p>

Babel + JSX

const model = {
	msg: "One"
};
model.present = (data) => {
	if (data.toLowerCase() != "fail") {
  	model.msg = data
  } else {
  	model.msg = "should not be 'fail'"
  }
  state.representation(model)
}
// VIEW
const view = {}

// INITIAL state
view.init = (model) => {
	return view.ready(model)
}
view.input = {
	view(vnode) {
  	return [
    m("br"),
    m("input[type='text']", {
    	oninput: m.withAttr("value", actions.oninput, model.present)
    })
    ]
  }
}

// States representation
view.ready = (model) => {
	return m("h1", "Initial Component: " + model.msg, m(view.input))
}
view.xyz = (model) => {
	return m("h1", "Other Component: " + model.msg, m(view.input))
}
view.component = {
	oninit(vnode) {
  	view.representation = view.init(model)
  },
	view(vnode) {
  	return view.representation
  }
}



// STATE
const state = {}
state.representation = (model) => {
	var representation = "ivalid state";
  if(state.ready(model)) {
  	view.representation = view.ready(model)
  } else {
  	view.representation = view.xyz(model)
  }
}

state.ready = (model) => {
	return model.msg.toLowerCase() == "one"
}

const actions = {}

actions.oninput = function(data) {
	let present = this || model.present
 	present(data)
}

m.mount(document.getElementById("sam"), view.component)