sandeep1995/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
// ------------- LifeCycle ----------------- //

'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var lifeCycleInstance = Symbol('LifeCycleInstance');
var singletonEnforcer = Symbol('SingletonEnforcer');

// naming must be like `{componwnt-formal-name}.{action-name}`
var VU_DRAWN_EVT = 'visual-unit.drawn';

var LifeCycleManager = (function () {
	function LifeCycleManager(enforcer) {
		_classCallCheck(this, LifeCycleManager);

		if (enforcer !== singletonEnforcer) {
			throw new Error('Can not construct LifeCycle');
		}

		this._init();
	}

	// ----------- Picasso Library --------------- //

	_createClass(LifeCycleManager, [{
		key: '_init',
		value: function _init() {
			this._notifiers = _defineProperty({}, VU_DRAWN_EVT, function (resolveFn) {
				return function (notifier) {
					return resolveFn(notifier);
				};
			});
			this._initPromises();
		}
	}, {
		key: 'retrieve',
		value: function retrieve(promiseName) {
			return this._promises[promiseName];
		}
	}, {
		key: '_initPromises',
		value: function _initPromises() {
			var _this = this;

			this._promises = _defineProperty({}, VU_DRAWN_EVT, new Promise(function (resolve) {
				_this._notifiers[VU_DRAWN_EVT] = _this._notifiers[VU_DRAWN_EVT](resolve);
			}));
		}
	}, {
		key: 'notify',
		value: function notify(notifier) {
			var formalName = notifier.client.constructor.formalName();
			this._notifiers[formalName + '.' + notifier.action](notifier);
		}
	}], [{
		key: 'instance',
		get: function get() {
			if (!this[lifeCycleInstance]) {
				this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer);
			}

			return this[lifeCycleInstance];
		}
	}]);

	return LifeCycleManager;
})();

var VisualUnit = (function () {
	function VisualUnit() {
		_classCallCheck(this, VisualUnit);

		this.lifeCycleManager = LifeCycleManager.instance;
	}

	_createClass(VisualUnit, [{
		key: 'draw',
		value: function draw() {
			console.log('drawing visual-unit');
			this.lifeCycleManager.notify({ client: this, action: 'drawn', info: 'extra' });
		}
	}], [{
		key: 'formalName',
		value: function formalName() {
			return 'visual-unit';
		}
	}]);

	return VisualUnit;
})();

var Canvas = (function () {
	function Canvas() {
		_classCallCheck(this, Canvas);

		console.log('init canvas');
		this.lifeCycleManager = LifeCycleManager.instance;
	}

	// -------------- User Code ------------ //

	_createClass(Canvas, [{
		key: 'hook',
		value: function hook(hookName) {
			return this.lifeCycleManager.retrieve(hookName);
		}
	}, {
		key: 'mount',
		value: function mount() {
			setTimeout(function () {
				var visualUnit = new VisualUnit();
				visualUnit.draw();
			}, 100);
		}
	}]);

	return Canvas;
})();

var canvas = new Canvas();

canvas.hook(VU_DRAWN_EVT).then(function (d) {
	console.log('after resolving');
	console.log(d);
});

canvas.mount();
</script>


<script id="jsbin-source-javascript" type="text/javascript">// ------------- LifeCycle ----------------- //

const lifeCycleInstance = Symbol('LifeCycleInstance');
const singletonEnforcer = Symbol('SingletonEnforcer');


// naming must be like `{componwnt-formal-name}.{action-name}`
const VU_DRAWN_EVT = 'visual-unit.drawn';

class LifeCycleManager {

	constructor(enforcer) {
		if (enforcer !== singletonEnforcer) {
			throw new Error('Can not construct LifeCycle');
		}

		this._init();
	}


	_init() {
		this._notifiers = {
			[VU_DRAWN_EVT]: resolveFn => (notifier) => resolveFn(notifier),
		}
		this._initPromises();
	}

	retrieve(promiseName) {
		return this._promises[promiseName];
	}


	_initPromises() {
		this._promises = {
			[VU_DRAWN_EVT]: new Promise((resolve) => {
				this._notifiers[VU_DRAWN_EVT] = this._notifiers[VU_DRAWN_EVT](resolve);
			})
		}
	}

	notify(notifier) {
    let formalName = notifier.client.constructor.formalName();
		this._notifiers[`${formalName}.${notifier.action}`](notifier);
	}

	static get instance() {
		if (!this[lifeCycleInstance]) {
			this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer);
		}

		return this[lifeCycleInstance];
	}

}

// ----------- Picasso Library --------------- //

class VisualUnit {

	constructor() {
    this.lifeCycleManager = LifeCycleManager.instance;
	}

	static formalName() {
		return 'visual-unit';
	}

	draw() {
		console.log('drawing visual-unit');
		this.lifeCycleManager.notify({client: this, action: 'drawn', info: 'extra'});
	}
}


class Canvas {
	constructor() {
		console.log('init canvas');
		this.lifeCycleManager = LifeCycleManager.instance;
	}

	hook(hookName) {
		return this.lifeCycleManager.retrieve(hookName);
	}

	mount() {
		setTimeout(() => {
			let visualUnit = new VisualUnit();
			visualUnit.draw();
		}, 100);
	}
}


// -------------- User Code ------------ //

let canvas = new Canvas();

canvas.hook(VU_DRAWN_EVT).then(d => {
  console.log('after resolving');
  console.log(d);
});

canvas.mount();


</script></body>
</html>

## jsbin.deyaboj.js
// ------------- LifeCycle ----------------- //

'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var lifeCycleInstance = Symbol('LifeCycleInstance');
var singletonEnforcer = Symbol('SingletonEnforcer');

// naming must be like `{componwnt-formal-name}.{action-name}`
var VU_DRAWN_EVT = 'visual-unit.drawn';

var LifeCycleManager = (function () {
	function LifeCycleManager(enforcer) {
		_classCallCheck(this, LifeCycleManager);

		if (enforcer !== singletonEnforcer) {
			throw new Error('Can not construct LifeCycle');
		}

		this._init();
	}

	// ----------- Picasso Library --------------- //

	_createClass(LifeCycleManager, [{
		key: '_init',
		value: function _init() {
			this._notifiers = _defineProperty({}, VU_DRAWN_EVT, function (resolveFn) {
				return function (notifier) {
					return resolveFn(notifier);
				};
			});
			this._initPromises();
		}
	}, {
		key: 'retrieve',
		value: function retrieve(promiseName) {
			return this._promises[promiseName];
		}
	}, {
		key: '_initPromises',
		value: function _initPromises() {
			var _this = this;

			this._promises = _defineProperty({}, VU_DRAWN_EVT, new Promise(function (resolve) {
				_this._notifiers[VU_DRAWN_EVT] = _this._notifiers[VU_DRAWN_EVT](resolve);
			}));
		}
	}, {
		key: 'notify',
		value: function notify(notifier) {
			var formalName = notifier.client.constructor.formalName();
			this._notifiers[formalName + '.' + notifier.action](notifier);
		}
	}], [{
		key: 'instance',
		get: function get() {
			if (!this[lifeCycleInstance]) {
				this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer);
			}

			return this[lifeCycleInstance];
		}
	}]);

	return LifeCycleManager;
})();

var VisualUnit = (function () {
	function VisualUnit() {
		_classCallCheck(this, VisualUnit);

		this.lifeCycleManager = LifeCycleManager.instance;
	}

	_createClass(VisualUnit, [{
		key: 'draw',
		value: function draw() {
			console.log('drawing visual-unit');
			this.lifeCycleManager.notify({ client: this, action: 'drawn', info: 'extra' });
		}
	}], [{
		key: 'formalName',
		value: function formalName() {
			return 'visual-unit';
		}
	}]);

	return VisualUnit;
})();

var Canvas = (function () {
	function Canvas() {
		_classCallCheck(this, Canvas);

		console.log('init canvas');
		this.lifeCycleManager = LifeCycleManager.instance;
	}

	// -------------- User Code ------------ //

	_createClass(Canvas, [{
		key: 'hook',
		value: function hook(hookName) {
			return this.lifeCycleManager.retrieve(hookName);
		}
	}, {
		key: 'mount',
		value: function mount() {
			setTimeout(function () {
				var visualUnit = new VisualUnit();
				visualUnit.draw();
			}, 100);
		}
	}]);

	return Canvas;
})();

var canvas = new Canvas();

canvas.hook(VU_DRAWN_EVT).then(function (d) {
	console.log('after resolving');
	console.log(d);
});

canvas.mount();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	// ------------- LifeCycle ----------------- //

	'use strict';

	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

	function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

	var lifeCycleInstance = Symbol('LifeCycleInstance');
	var singletonEnforcer = Symbol('SingletonEnforcer');

	// naming must be like `{componwnt-formal-name}.{action-name}`
	var VU_DRAWN_EVT = 'visual-unit.drawn';

	var LifeCycleManager = (function () {
	function LifeCycleManager(enforcer) {
	_classCallCheck(this, LifeCycleManager);

	if (enforcer !== singletonEnforcer) {
	throw new Error('Can not construct LifeCycle');
	}

	this._init();
	}

	// ----------- Picasso Library --------------- //

	_createClass(LifeCycleManager, [{
	key: '_init',
	value: function _init() {
	this._notifiers = _defineProperty({}, VU_DRAWN_EVT, function (resolveFn) {
	return function (notifier) {
	return resolveFn(notifier);
	};
	});
	this._initPromises();
	}
	}, {
	key: 'retrieve',
	value: function retrieve(promiseName) {
	return this._promises[promiseName];
	}
	}, {
	key: '_initPromises',
	value: function _initPromises() {
	var _this = this;

	this._promises = _defineProperty({}, VU_DRAWN_EVT, new Promise(function (resolve) {
	_this._notifiers[VU_DRAWN_EVT] = _this._notifiers[VU_DRAWN_EVT](resolve);
	}));
	}
	}, {
	key: 'notify',
	value: function notify(notifier) {
	var formalName = notifier.client.constructor.formalName();
	this._notifiers[formalName + '.' + notifier.action](notifier);
	}
	}], [{
	key: 'instance',
	get: function get() {
	if (!this[lifeCycleInstance]) {
	this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer);
	}

	return this[lifeCycleInstance];
	}
	}]);

	return LifeCycleManager;
	})();

	var VisualUnit = (function () {
	function VisualUnit() {
	_classCallCheck(this, VisualUnit);

	this.lifeCycleManager = LifeCycleManager.instance;
	}

	_createClass(VisualUnit, [{
	key: 'draw',
	value: function draw() {
	console.log('drawing visual-unit');
	this.lifeCycleManager.notify({ client: this, action: 'drawn', info: 'extra' });
	}
	}], [{
	key: 'formalName',
	value: function formalName() {
	return 'visual-unit';
	}
	}]);

	return VisualUnit;
	})();

	var Canvas = (function () {
	function Canvas() {
	_classCallCheck(this, Canvas);

	console.log('init canvas');
	this.lifeCycleManager = LifeCycleManager.instance;
	}

	// -------------- User Code ------------ //

	_createClass(Canvas, [{
	key: 'hook',
	value: function hook(hookName) {
	return this.lifeCycleManager.retrieve(hookName);
	}
	}, {
	key: 'mount',
	value: function mount() {
	setTimeout(function () {
	var visualUnit = new VisualUnit();
	visualUnit.draw();
	}, 100);
	}
	}]);

	return Canvas;
	})();

	var canvas = new Canvas();

	canvas.hook(VU_DRAWN_EVT).then(function (d) {
	console.log('after resolving');
	console.log(d);
	});

	canvas.mount();
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// ------------- LifeCycle ----------------- //

	const lifeCycleInstance = Symbol('LifeCycleInstance');
	const singletonEnforcer = Symbol('SingletonEnforcer');


	// naming must be like `{componwnt-formal-name}.{action-name}`
	const VU_DRAWN_EVT = 'visual-unit.drawn';

	class LifeCycleManager {

	constructor(enforcer) {
	if (enforcer !== singletonEnforcer) {
	throw new Error('Can not construct LifeCycle');
	}

	this._init();
	}


	_init() {
	this._notifiers = {
	[VU_DRAWN_EVT]: resolveFn => (notifier) => resolveFn(notifier),
	}
	this._initPromises();
	}

	retrieve(promiseName) {
	return this._promises[promiseName];
	}


	_initPromises() {
	this._promises = {
	[VU_DRAWN_EVT]: new Promise((resolve) => {
	this._notifiers[VU_DRAWN_EVT] = this._notifiers[VU_DRAWN_EVT](resolve);
	})
	}
	}

	notify(notifier) {
	let formalName = notifier.client.constructor.formalName();
	this._notifiers[`${formalName}.${notifier.action}`](notifier);
	}

	static get instance() {
	if (!this[lifeCycleInstance]) {
	this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer);
	}

	return this[lifeCycleInstance];
	}

	}

	// ----------- Picasso Library --------------- //

	class VisualUnit {

	constructor() {
	this.lifeCycleManager = LifeCycleManager.instance;
	}

	static formalName() {
	return 'visual-unit';
	}

	draw() {
	console.log('drawing visual-unit');
	this.lifeCycleManager.notify({client: this, action: 'drawn', info: 'extra'});
	}
	}


	class Canvas {
	constructor() {
	console.log('init canvas');
	this.lifeCycleManager = LifeCycleManager.instance;
	}

	hook(hookName) {
	return this.lifeCycleManager.retrieve(hookName);
	}

	mount() {
	setTimeout(() => {
	let visualUnit = new VisualUnit();
	visualUnit.draw();
	}, 100);
	}
	}


	// -------------- User Code ------------ //

	let canvas = new Canvas();

	canvas.hook(VU_DRAWN_EVT).then(d => {
	console.log('after resolving');
	console.log(d);
	});

	canvas.mount();


	</script></body>
	</html>