function store (data = {}, name = 'store') {

	/**
	 * Emit a custom event
	 * @param  {String} type   The event type
	 * @param  {*}      detail Any details to pass along with the event
	 */
	function emit (type, detail) {

		// Create a new event
		let event = new CustomEvent(type, {
			bubbles: true,
			cancelable: true,
			detail: detail
		});

		// Dispatch the event
		return document.dispatchEvent(event);

	}

	function handler (name, data) {
		return {
			get: function (obj, prop) {
				if (prop === '_isProxy') return true;
				if (['object', 'array'].includes(Object.prototype.toString.call(obj[prop]).slice(8, -1).toLowerCase()) && !obj[prop]._isProxy) {
					obj[prop] = new Proxy(obj[prop], handler(name, data));
				}
				return obj[prop];
			},
			set: function (obj, prop, value) {
				if (obj[prop] === value) return true;
				obj[prop] = value;
				emit(name, data);
				return true;
			},
			deleteProperty: function (obj, prop) {
				delete obj[prop];
				emit(name, data);
				return true;
			}
		};
	}

	return new Proxy(data, handler(name, data));

}

// The element to inject our UI into
let app = document.querySelector('#app');

// Create reactive data store
let wizards = store(['Gandalf', 'Merlin'], 'wizards');

// The template
function template (props) {
	return `
		<ul>
			${props.map(function (wizard) {
				return `<li>${wizard}</li>`;
			}).join('')}
		</ul>`;
}

// Render the UI
app.innerHTML = template(wizards);

// Reactively update the UI
document.addEventListener('wizards', function (event) {
	app.innerHTML = template(event.detail);
});

// This will automatically update the UI
setTimeout(function () {
  wizards.push('Ursula');
}, 3000);