Custom React

sample.jsx

/** @jsx this */
//classic callback
function clicker(props, children, render) {
  var clicks = 0;
  function clicked(event) {
    event.preventDefault();
    clicks += 1;
    render(); //or render(clicks) to allow caching
  }
  return function() {
    return <p>
      <Gteeting format="large"/>
      <button onClick={clicked}>{clicks}</button>
    </p>
  }
}

function Greeting(props) {
  if (props.format === "large") {
    return <h2>Hello</h2>  
  }
  return <p>Hello</p>
}

new Mount(document.body, clicker);

class Mount {
  constructor(element, render, props, children) {
    //store dynamic nodes here for render updates
    var this.renderTable = {};
    var rootVDOM = this.createElement(render, props, children);
    this.mergeWithDOM(rootVDOM, element);
  }
  
  mergeWithDOM(virtualDOM, toElement) {
    
  }
  
  //createElement is namespaced unlike react
  createElement(tagName, props, children) {
    if (_.isFunction(tagName)) {
      var key = props.id || uuid.v4();
      var result = tagName.call(this, props, children, this.scheduleRender.bind(this, key));
      
      if _.isFunction(result) {
        this.renderTable[key] = {
          render: result,
        }
      }
    } else if (_.isString(tagName) {
      return this.tagFuntions[tagName].call(this);
    }
  }
  
  scheduleRender(element, key, state) {
    //if you want performance, use immutables!
    if (this.renderTable[key].lastState !== state) {
      this.renderTable[key].lastState = state;
      var vDOM = this.renderTable[key].render.call(this);
      this.mergeWithDOM(vDOM, element);
    }
  }
}