stagfoo/index.html

## index.html
<html>
  <head>

  </head>
  <body>
    <div id="ancient"></div>
    <script src="index.js"></script>
  </body>
</html>

## index.js
function ancient() {
  this.state = [];
  this.currentView;
  this.errorView;
  this.calls;
  this.updated;
  function cevent(name) { var ev = document.createEvent('Event'); ev.initEvent(name, true, true); return ev }
  this.events = {
    view: cevent('VIEW'),
    render: cevent('RENDER'),
    mutate: cevent('MUTATE'),
    callAPI: cevent('CALL_API'),
    storeAPI: cevent('STORE_API'),
  };
  this.dispatch = function(event){
    console.log('DISPATCH: '+event)
    document.querySelector(this.anchor).dispatchEvent(this.events[event]);
  }
  this.anchor = false;
  this.get = function (tag) {
    return document.querySelector(this.anchor + ' ' + tag);
  };
}
ancient.prototype.view = function (name) {
  this.currentView = this.templates[name];
  if (this.anchor !== false) {
    this.render();
    this.dispatch('view')
  }
};

ancient.prototype.bind = function (type, target, callback) {
  if (this.get(target)) {
    this.get(target).addEventListener(type, callback);
  } else {
    setTimeout(function () {
      this.get(target).addEventListener(type, callback);
    }, 3000);
  }
};
ancient.prototype.use = function (settings) {
  this.state = settings.state;
  this.templates = settings.templates;
  this.errorView = settings.templates.error;
  this.calls = settings.network;
};
ancient.prototype.callAPI = function (name, callback) {
  var set = this.calls[name];
  var xhr = new XMLHttpRequest();
  xhr.addEventListener('load', callback);
  xhr.open(set.method, set.url, true);
  xhr.withCredentials = true;
  xhr.send(null);
  this.dispatch('callAPI')
};
ancient.prototype.mutate = function (l, d) {
  this.state[l] = d;
  this.dispatch('mutate')
};
ancient.prototype.render = function (l) {
  if (this.anchor === false) {
    this.anchor = l;
  }
  if (this.currentView) {
    document.querySelector(this.anchor).innerHTML = this.currentView(this.state);
  } else {
    document.querySelector(this.anchor).innerHTML = this.errorView(this.state);
  }
};
ancient.prototype.storeAPI = function (respond, namespace) {
  if (typeof this.state.respond !== 'object') {
    this.state.respond = {}
  }
  if (this.calls[namespace] !== true) {
    this.state.respond[namespace] = JSON.parse(respond);
    // document.querySelector(this.anchor).dispatchEvent(this.events.storeAPI);
    this.dispatch('storeAPI')
    this.calls[namespace] = true;
    console.log(namespace, 'UPDATED', this.state);
  }
};

function remove(element) {
  element.parentNode.removeChild(element);
}
function removeAll(target) {
  target.forEach(function (element) {
    remove(element);
  }, this);
}

var app = new ancient();
function exampleView() {
  function afterCall() {
    app.storeAPI(this.responseText, 'example')
    //State Mutation
    var exampleState = app.state.respond['example']
    app.mutate('example', exampleState.example)
    app.view('member');
    //Display Changes
    // eg error or hide elements

    // Button Binding
    app.bind(
      'click',
      '.example-button',
      function () { anotherView(); }
    );
  }
  app.calls['example'] !== true ? app.callAPI('example', afterCall) : afterCall()
}


          var s = []
          var t = {
            'default': topTemplate,
            'top': topTemplate,
            'member': memberTemplate,
            'discover': discoverTemplate,
            'error': function() { return null }
          }
          var n = {
          'top': {
            "url": "",
            "method": "GET",
            'xhrFields': {
              'withCredentials': true
            }
          },
          'member':  {
            "url": "",
            "method": "POST",
            'xhrFields': {
              'withCredentials': true
            }
          },
          'discover': {},
          }

          app.use({
            'state':s,
            'templates':t,
            'network':n,
          })
          app.render('#ancient');
          exampleView();
	<html>
	<head>

	</head>
	<body>
	<div id="ancient"></div>
	<script src="index.js"></script>
	</body>
	</html>
	function ancient() {
	this.state = [];
	this.currentView;
	this.errorView;
	this.calls;
	this.updated;
	function cevent(name) { var ev = document.createEvent('Event'); ev.initEvent(name, true, true); return ev }
	this.events = {
	view: cevent('VIEW'),
	render: cevent('RENDER'),
	mutate: cevent('MUTATE'),
	callAPI: cevent('CALL_API'),
	storeAPI: cevent('STORE_API'),
	};
	this.dispatch = function(event){
	console.log('DISPATCH: '+event)
	document.querySelector(this.anchor).dispatchEvent(this.events[event]);
	}
	this.anchor = false;
	this.get = function (tag) {
	return document.querySelector(this.anchor + ' ' + tag);
	};
	}
	ancient.prototype.view = function (name) {
	this.currentView = this.templates[name];
	if (this.anchor !== false) {
	this.render();
	this.dispatch('view')
	}
	};

	ancient.prototype.bind = function (type, target, callback) {
	if (this.get(target)) {
	this.get(target).addEventListener(type, callback);
	} else {
	setTimeout(function () {
	this.get(target).addEventListener(type, callback);
	}, 3000);
	}
	};
	ancient.prototype.use = function (settings) {
	this.state = settings.state;
	this.templates = settings.templates;
	this.errorView = settings.templates.error;
	this.calls = settings.network;
	};
	ancient.prototype.callAPI = function (name, callback) {
	var set = this.calls[name];
	var xhr = new XMLHttpRequest();
	xhr.addEventListener('load', callback);
	xhr.open(set.method, set.url, true);
	xhr.withCredentials = true;
	xhr.send(null);
	this.dispatch('callAPI')
	};
	ancient.prototype.mutate = function (l, d) {
	this.state[l] = d;
	this.dispatch('mutate')
	};
	ancient.prototype.render = function (l) {
	if (this.anchor === false) {
	this.anchor = l;
	}
	if (this.currentView) {
	document.querySelector(this.anchor).innerHTML = this.currentView(this.state);
	} else {
	document.querySelector(this.anchor).innerHTML = this.errorView(this.state);
	}
	};
	ancient.prototype.storeAPI = function (respond, namespace) {
	if (typeof this.state.respond !== 'object') {
	this.state.respond = {}
	}
	if (this.calls[namespace] !== true) {
	this.state.respond[namespace] = JSON.parse(respond);
	// document.querySelector(this.anchor).dispatchEvent(this.events.storeAPI);
	this.dispatch('storeAPI')
	this.calls[namespace] = true;
	console.log(namespace, 'UPDATED', this.state);
	}
	};

	function remove(element) {
	element.parentNode.removeChild(element);
	}
	function removeAll(target) {
	target.forEach(function (element) {
	remove(element);
	}, this);
	}

	var app = new ancient();
	function exampleView() {
	function afterCall() {
	app.storeAPI(this.responseText, 'example')
	//State Mutation
	var exampleState = app.state.respond['example']
	app.mutate('example', exampleState.example)
	app.view('member');
	//Display Changes
	// eg error or hide elements

	// Button Binding
	app.bind(
	'click',
	'.example-button',
	function () { anotherView(); }
	);
	}
	app.calls['example'] !== true ? app.callAPI('example', afterCall) : afterCall()
	}


	var s = []
	var t = {
	'default': topTemplate,
	'top': topTemplate,
	'member': memberTemplate,
	'discover': discoverTemplate,
	'error': function() { return null }
	}
	var n = {
	'top': {
	"url": "",
	"method": "GET",
	'xhrFields': {
	'withCredentials': true
	}
	},
	'member': {
	"url": "",
	"method": "POST",
	'xhrFields': {
	'withCredentials': true
	}
	},
	'discover': {},
	}

	app.use({
	'state':s,
	'templates':t,
	'network':n,
	})
	app.render('#ancient');
	exampleView();