app-decorators/lib/decorators/view.js

Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps

System.register(['app-decorators/src/libs/element-to-function', '../libs/view', '../helpers/extract-dom-properties', '../datas/init-maps', '../libs/random-storage', '../libs/dependencies'], function (_export, _context) {
	"use strict";

	var _elementToFunc, View, extractDomProperties, initCoreMap, initViewMap, storage, HandlebarsRuntime, _slicedToArray;

	/*****************************************
  * ######### Public Decorators ###########
  *****************************************/

	/**
  * Register View
  * @param  {String} template
  * @param  {Object<templateName, renderedFlag} templateName
  * @return {Function}
  */
	function view(template) {
		var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};


		if (!template) {
			throw new Exception('Please pass a template!');
		}

		return function (Class) {

			var renderedFlag = !(options.renderedFlag === false);

			initCoreMap(storage, Class);
			initViewMap(storage, Class);

			var map = storage.get(Class);

			/**
    * Its required when we use @style multiple times!
    * Only once registration!
    */
			if (map.get('@view').get('callbacksDefined')) {
				return;
			}

			map.get('@callbacks').get('created').push(function (domNode) {
				var createVars = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};


				// get and merge dom view var attributes
				var domViewAttributes = extractDomProperties(domNode, /^@view\.bind\.(\S+)$/i, true);

				// get the restof regular attributes
				var regularDomAttributes = extractDomProperties(domNode);

				var viewBinds = {};
				var entries = map.get('@view').get('bind');
				entries.forEach(function (_ref) {
					var _ref2 = _slicedToArray(_ref, 2),
					    key = _ref2[0],
					    value = _ref2[1];

					return viewBinds[key] = value;
				});

				var viewVars = Object.assign({}, viewBinds, domViewAttributes, createVars, regularDomAttributes);

				// initialize view
				var $view = new View({
					prerenderer: HandlebarsRuntime.template,
					rootNode: domNode,
					vars: viewVars,
					template: template
				});

				view.helper.registerSetGet(domNode, Object.assign({}, viewBinds, domViewAttributes));

				// render view
				$view.render(null, {
					renderedFlag: renderedFlag
				});

				domNode.$view = $view;
			});

			map.get('@callbacks').get('attached').push(function (domNode) {

				if (domNode.$view.initialized()) {
					return;
				}

				/**
     * Using the same instance is 30% faster in
     * (Chrome, Opera) and no difference in Firefox
     * @see: https://jsperf.com/new-class-vs-singleton
     */
				domNode.$view.reinit({
					rootNode: domNode,
					prerenderer: HandlebarsRuntime.template
				});
			});

			map.get('@callbacks').get('detached').push(function (domNode) {
				domNode.$view.destroy();
			});

			map.get('@view').set('callbacksDefined', true);
		};
	}

	/**
  * Register view vars
  * @param  {Object} target
  * @param  {String} property
  * @param  {Object} descriptor
  * @return {undefined}
  */
	return {
		setters: [function (_appDecoratorsSrcLibsElementToFunction) {
			_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
		}, function (_libsView) {
			View = _libsView.View;
		}, function (_helpersExtractDomProperties) {
			extractDomProperties = _helpersExtractDomProperties.extractDomProperties;
		}, function (_datasInitMaps) {
			initCoreMap = _datasInitMaps.initCoreMap;
			initViewMap = _datasInitMaps.initViewMap;
		}, function (_libsRandomStorage) {
			storage = _libsRandomStorage.storage;
		}, function (_libsDependencies) {
			HandlebarsRuntime = _libsDependencies.HandlebarsRuntime;
		}],
		execute: function () {
			_slicedToArray = function () {
				function sliceIterator(arr, i) {
					var _arr = [];
					var _n = true;
					var _d = false;
					var _e = undefined;

					try {
						for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
							_arr.push(_s.value);

							if (i && _arr.length === i) break;
						}
					} catch (err) {
						_d = true;
						_e = err;
					} finally {
						try {
							if (!_n && _i["return"]) _i["return"]();
						} finally {
							if (_d) throw _e;
						}
					}

					return _arr;
				}

				return function (arr, i) {
					if (Array.isArray(arr)) {
						return arr;
					} else if (Symbol.iterator in Object(arr)) {
						return sliceIterator(arr, i);
					} else {
						throw new TypeError("Invalid attempt to destructure non-iterable instance");
					}
				};
			}();

			view.bind = function (target, property, descriptor) {

				var Class = target.constructor;

				initCoreMap(storage, Class);
				initViewMap(storage, Class);

				// get default value
				var value = descriptor.initializer ? descriptor.initializer() : '';

				// register view binds
				var map = storage.get(Class);
				map.get('@view').get('bind').push([property, value]);
			};

			/*****************************************
    * ########## Decorator Helper ###########
    *****************************************/

			view.helper = {
				registerSetGet: function registerSetGet(target, viewBinds) {

					// make viewBinds immutable
					viewBinds = JSON.parse(JSON.stringify(viewBinds));

					// prepare property proxy setter
					var properties = {};

					var _loop = function _loop(property) {
						properties[property] = {
							set: function set(newValue) {
								this.$view.set(property, newValue);
								this.$view.render(null, { force: true });
							},
							get: function get() {
								return this.$view.get(property);
							}
						};
					};

					for (var property in viewBinds) {
						_loop(property);
					}

					// prepare render proxy to $.view
					properties.render = {
						value: function value() {
							var _$view;

							(_$view = this.$view).set.apply(_$view, arguments);
							this.$view.render(null, { force: true });
						}
					};

					Object.defineProperties(target, properties);

					return target;
				}
			};

			_export('view', view);
		}
	};
});
//# sourceMappingURL=view.js.map