JSFiddle - React, Tailwind, and code Playground

by vishwanathsrikanth

Babel + JSX

var i
var stack = []
var id = 0;

//transformer code
function h(tag, props) {
  var node
  var children = []

  for (i = arguments.length; i-- > 2; ) {
    stack.push(arguments[i])
  }

  while (stack.length) {
    if (Array.isArray((node = stack.pop()))) {
      for (i = node.length; i--; ) {
        stack.push(node[i])
      }
    } else if (node != null && node !== true && node !== false) {
      children.push(typeof node === "number" ? (node = node + "") : node)
    }
  }

  return typeof tag === "string"
    ? {
        tag: tag,
        props: props || {},
        children: children,
        generatedId : id++
      }
    : tag(props, children)
}

//small library

function app(props){
	var appView = props.view;
	var appState = props.state;
	var appActions = createActions({}, props.actions)
  var firstRender = false;
  var node = h("p",{},"")
	if(appView){
     requestAnimationFrame(render)
	}

// this function is used to replace the old DOM with new DO
  function render() {
	debugger;
    var doc = patch(node,(node = appView(appState,appActions)))
    if(doc) {
		  var children = document.body.children;
			for(var i = 0; i <= children.length; i++){
					removeElement(document.body, children[i], children[i])
			}
    	document.body.appendChild(doc);
		}
  }

	// remove element
	function removeElement(parent, element, node) {
    function done() {
      parent.removeChild(removeChildren(element, node))
    }

    var cb = node.attributes && node.attributes.onremove
    if (cb) {
      cb(element, done)
    } else {
      done()
    }
}

	// remove children recursively
	function removeChildren(element, node) {
    var attributes = node.attributes
    if (attributes) {
      for (var i = 0; i < node.children.length; i++) {
        removeChildren(element.childNodes[i], node.children[i])
      }
    }
    return element
  }

	// The createActions function creates an array of functions one each for action
  function createActions(actions,withActions){
     ...