rasti 1.1.4 → 1.1.5

package/dist/rasti.js

@@ -46,7 +46,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _Emitt
   \*********************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _Emitter2 = _interopRequireDefault(__webpack_require__(/*! ./Emitter.js */ \"./src/Emitter.js\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n// This options keys will be extended on view instance.\nvar viewOptions = {\n  el: true,\n  tag: true,\n  attributes: true,\n  events: true,\n  model: true,\n  template: true,\n  onDestroy: true\n};\n\n/**\n * - Listens for changes and renders UI.\n * - Handles user input and interactivity.\n * - Sends captured input to the model.\n *\n * A View is an atomic chunk of user interface. It often renders the data from a specific model, \n * or number of models, but views can also be data-less chunks of UI that stand alone.<br /> \n * Models must be unaware of views. Instead, views listen to the model \"change\" events, \n * and react or re-render themselves appropriately.<br />\n * Views has a root element, `this.el`. That element is used for event delegation. Elements lookups are scoped to that element. And render and dom manipulations should be done inside that element. \n * If `this.el` is not present, an element will be created using `this.tag` (or `div` as default), and `this.attributes`.<br />\n * @module\n * @param {object} options Object containing options. The following keys will be merged to `this`: el, tag, attributes, events, model, template, onDestroy.\n * @property {node} el Every view has a root element, `this.el`. If not present it will be created.\n * @property {string} tag If `this.el` is not present, an element will be created using `this.tag`. Default is `div`.\n * @property {object} attributes If `this.el` is not present, an element will be created using `this.attributes`.\n * @property {object} events Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.\n * @property {object} model A `Rasti.Model` or any object containing data and business logic.\n * @property {function} template A function that receives data and returns a markup string (html for example).\n * @example\n * // Counter view.\n * class CounterView extends View {\n *     constructor(options) {\n *         super(options);\n *         // Bind method to `this`, to be called as listener.\n *         this.render = this.render.bind(this);\n *         // Listen to model change and re render.\n *         this.model.on('change:count', this.render);\n *     }\n *     onDestroy() {\n *         // Unbind events when destroyed.\n *         this.model.off('change:count', this.render);\n *     }\n *     // Listener method. Called when button is clicked.\n *     onClickIncrement() {\n *         // Increment count on model.\n *         this.model.count++;\n *     }\n * }\n * Object.assign(CounterView.prototype, {\n *     // Set delegated events.\n *     // Call `onClickIncrement` when button is clicked.\n *     events : {\n *         'click button' : 'onClickIncrement'\n *     },\n *     // View's template.\n *     template : (model) => `\n *         <div>The count is: ${model.count}</div>\n *         <button>Increment</button>\n *     `\n * });\n * // Model.\n * const model = new Model({ count : 0 });\n * // Instantiate CounterView.\n * const counterView = new CounterView({ model });\n * // Add to DOM.\n * document.body.appendChild(counterView.render().el);\n */\nvar View = /*#__PURE__*/function (_Emitter) {\n  _inheritsLoose(View, _Emitter);\n  function View() {\n    var _this;\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _this = _Emitter.call(this) || this;\n    // Call preinitialize.\n    _this.preinitialize.apply(_assertThisInitialized(_this), arguments);\n    // Generate unique id.\n    // Useful to generate elements ids.\n    _this.uid = \"uid\" + ++View.uid;\n    // Store delegated events listeners,\n    // so they can be unbinded later.\n    _this.delegatedEventListeners = [];\n    // Store child views,\n    // so they can be destroyed.\n    _this.children = [];\n    // Extend \"this\" with options, mapping viewOptions keys.\n    Object.keys(options).forEach(function (key) {\n      if (viewOptions[key]) _this[key] = options[key];\n    });\n    // Ensure that the view has a root element at `this.el`.\n    _this.ensureElement();\n    return _this;\n  }\n\n  /**\n   * If you define a preinitialize method, it will be invoked when the view is first created, before any instantiation logic is run.\n   * @param {object} attrs Object containing model attributes to extend `this.attributes`.\n   */\n  var _proto = View.prototype;\n  _proto.preinitialize = function preinitialize() {}\n\n  /**\n   * Returns the first element that match the selector, \n   * scoped to DOM elements within the current view's root element (`this.el`).\n   * @param {string} selector CSS selector.\n   * @return {node} Element matching selector within the view's root element (`this.el`).\n   */;\n  _proto.$ = function $(selector) {\n    return this.el.querySelector(selector);\n  }\n\n  /**\n   * Returns a list of elements that match the selector, \n   * scoped to DOM elements within the current view's root element (`this.el`).\n   * @param {string} selector CSS selector.\n   * @return {node[]} List of elements matching selector within the view's root element (`this.el`).\n   */;\n  _proto.$$ = function $$(selector) {\n    return this.el.querySelectorAll(selector);\n  }\n\n  /**\n   * Destroy the view.\n   * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.\n   * Pass options.remove as true to remove the view's root element (`this.el`) from the DOM.\n   * @param {object} options.remove Remove the view's root element (`this.el`) from the DOM.\n   */;\n  _proto.destroy = function destroy() {\n    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n      remove = _ref.remove;\n    // Call destroy on children.\n    this.destroyChildren();\n    // Undelegate `this.el` event listeners\n    this.undelegateEvents();\n    // Unbind `this` events.\n    this.off();\n    // Remove `this.el` if \"options.remove\" is true.\n    if (remove) this.removeElement();\n    // Call onDestroy lifecycle method\n    this.onDestroy();\n  }\n\n  /**\n   * `onDestroy` lifecycle method is called after view is destroyed.\n   * Override with your code. Useful to stop listening to model's events.\n   */;\n  _proto.onDestroy = function onDestroy() {}\n\n  /**\n   * Add a view as a child.\n   * Children views are stored at `this.children`, and destroyed when the parent is destroyed.\n   * Returns the child for chaining.\n   * @param {Rasti.View} child\n   * @return {Rasti.View}\n   */;\n  _proto.addChild = function addChild(child) {\n    this.children.push(child);\n    return child;\n  }\n\n  /**\n   * Call destroy method on children views.\n   */;\n  _proto.destroyChildren = function destroyChildren() {\n    while (this.children.length) this.children.shift().destroy();\n  }\n\n  /**\n   * Ensure that the view has a root element at `this.el`.\n   * You shouldn't call this method directly. It's called from constructor.\n   * You may override it if you want to use a different logic or to \n   * postpone element creation.\n   */;\n  _proto.ensureElement = function ensureElement() {\n    // If \"this.el\" is not present,\n    // create a new element according \"this.tag\"\n    // and \"this.attributes\".\n    if (!this.el) this.el = this.createElement(this.tag, this.attributes);\n    // Delegate events on element.\n    this.delegateEvents();\n  }\n\n  /**\n   * Create an element.\n   * Called from constructor if `this.el` is undefined, to ensure\n   * the view to have a root element.\n   * @param {string} tag Tag for the element. Default to `div`\n   * @param {object} attrs Attributes for the element.\n   * @return {node} The created element.\n   */;\n  _proto.createElement = function createElement() {\n    var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';\n    var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    // Create dom element.\n    var el = document.createElement(tag);\n    // Add element attributes.\n    Object.keys(attrs).forEach(function (key) {\n      return el.setAttribute(key, attrs[key]);\n    });\n    return el;\n  }\n\n  /**\n   * Remove `this.el` from DOM.\n   */;\n  _proto.removeElement = function removeElement() {\n    this.el.parentNode.removeChild(this.el);\n  }\n\n  /**\n   * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, uses `this.events` as the source.<br />\n   * Events are written in the format `{'event selector' : 'listener'}`. The listener may be either the name of a method on the view, or a direct function body.\n   * Omitting the selector causes the event to be bound to the view's root element (`this.el`).<br />\n   * By default, `delegateEvents` is called within the View's constructor, \n   * so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself. <br />\n   * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.<br />\n   * When `delegateEvents` is run again, perhaps with a different events hash, all listeners are removed and delegated afresh.\n   * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.\n   * @return {Rasti.View} Return `this` for chaining.\n   * @example\n   * MyView.prototype.events = {\n   *      'click button.ok' : 'onClickOkButton',\n   *      'click button.cancel' : function() {}\n   * };\n   */;\n  _proto.delegateEvents = function delegateEvents() {\n    var _this2 = this;\n    var events = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.events;\n    if (!events) return this;\n    if (this.delegatedEventListeners.length) this.undelegateEvents();\n\n    // Store events by type i.e.: \"click\", \"submit\", etc.\n    var eventTypes = {};\n    Object.keys(events).forEach(function (key) {\n      var keyParts = key.split(' '),\n        type = keyParts.shift(),\n        selector = keyParts.join(' '),\n        listener = events[key];\n      listener = (typeof listener === 'string' ? _this2[listener] : listener).bind(_this2);\n      if (!eventTypes[type]) eventTypes[type] = [];\n      eventTypes[type].push({\n        selector: selector,\n        listener: listener\n      });\n    });\n    var indexOf = Array.prototype.indexOf;\n    Object.keys(eventTypes).forEach(function (type) {\n      var self = _this2;\n      var typeListener = function typeListener(event) {\n        eventTypes[type].forEach(function (_ref2) {\n          var selector = _ref2.selector,\n            listener = _ref2.listener;\n          if (indexOf.call(selector ? self.el.querySelectorAll(selector) : [self.el], event.target) > -1) {\n            listener(event, self);\n          }\n        });\n      };\n      _this2.delegatedEventListeners.push({\n        type: type,\n        listener: typeListener\n      });\n      _this2.el.addEventListener(type, typeListener);\n    });\n    return this;\n  }\n\n  /**\n   * Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily. Called automatically when the view is destroyed.\n   * @return {Rasti.View} Return `this` for chaining.\n   */;\n  _proto.undelegateEvents = function undelegateEvents() {\n    var _this3 = this;\n    this.delegatedEventListeners.forEach(function (_ref3) {\n      var type = _ref3.type,\n        listener = _ref3.listener;\n      _this3.el.removeEventListener(type, listener);\n    });\n    this.delegatedEventListeners = [];\n    return this;\n  }\n\n  /**\n   * Render the view.\n   * This method should be overridden with custom logic.\n   * The default implementation sets innerHTML of `this.el` with `this.template`.\n   * Conventions are to only manipulate the dom in the scope of `this.el`, \n   * and to return `this` for chaining.\n   * If you added any child view, you must call `this.destroyChildren`.\n   * @return {Rasti.View} Return `this` for chaining.\n   */;\n  _proto.render = function render() {\n    if (this.template) this.el.innerHTML = this.template(this.model);\n    return this;\n  };\n  return View;\n}(_Emitter2[\"default\"]);\n/*\n * Unique Id\n */\nexports[\"default\"] = View;\nView.uid = 0;\n\n//# sourceURL=webpack://Rasti/./src/View.js?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _Emitter2 = _interopRequireDefault(__webpack_require__(/*! ./Emitter.js */ \"./src/Emitter.js\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n// This options keys will be extended on view instance.\nvar viewOptions = {\n  el: true,\n  tag: true,\n  attributes: true,\n  events: true,\n  model: true,\n  template: true,\n  onDestroy: true\n};\n\n/**\n * - Listens for changes and renders UI.\n * - Handles user input and interactivity.\n * - Sends captured input to the model.\n *\n * A View is an atomic chunk of user interface. It often renders the data from a specific model, \n * or number of models, but views can also be data-less chunks of UI that stand alone.<br /> \n * Models must be unaware of views. Instead, views listen to the model \"change\" events, \n * and react or re-render themselves appropriately.<br />\n * Views has a root element, `this.el`. That element is used for event delegation. Elements lookups are scoped to that element. And render and dom manipulations should be done inside that element. \n * If `this.el` is not present, an element will be created using `this.tag` (or `div` as default), and `this.attributes`.<br />\n * @module\n * @param {object} options Object containing options. The following keys will be merged to `this`: el, tag, attributes, events, model, template, onDestroy.\n * @property {node} el Every view has a root element, `this.el`. If not present it will be created.\n * @property {string} tag If `this.el` is not present, an element will be created using `this.tag`. Default is `div`.\n * @property {object} attributes If `this.el` is not present, an element will be created using `this.attributes`.\n * @property {object} events Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.\n * @property {object} model A `Rasti.Model` or any object containing data and business logic.\n * @property {function} template A function that receives data and returns a markup string (html for example).\n * @example\n * // Counter view.\n * class CounterView extends View {\n *     constructor(options) {\n *         super(options);\n *         // Bind method to `this`, to be called as listener.\n *         this.render = this.render.bind(this);\n *         // Listen to model change and re render.\n *         this.model.on('change:count', this.render);\n *     }\n *     onDestroy() {\n *         // Unbind events when destroyed.\n *         this.model.off('change:count', this.render);\n *     }\n *     // Listener method. Called when button is clicked.\n *     onClickIncrement() {\n *         // Increment count on model.\n *         this.model.count++;\n *     }\n * }\n * Object.assign(CounterView.prototype, {\n *     // Set delegated events.\n *     // Call `onClickIncrement` when button is clicked.\n *     events : {\n *         'click button' : 'onClickIncrement'\n *     },\n *     // View's template.\n *     template : (model) => `\n *         <div>The count is: ${model.count}</div>\n *         <button>Increment</button>\n *     `\n * });\n * // Model.\n * const model = new Model({ count : 0 });\n * // Instantiate CounterView.\n * const counterView = new CounterView({ model });\n * // Add to DOM.\n * document.body.appendChild(counterView.render().el);\n */\nvar View = /*#__PURE__*/function (_Emitter) {\n  _inheritsLoose(View, _Emitter);\n  function View() {\n    var _this;\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _this = _Emitter.call(this) || this;\n    // Call preinitialize.\n    _this.preinitialize.apply(_assertThisInitialized(_this), arguments);\n    // Generate unique id.\n    // Useful to generate elements ids.\n    _this.uid = \"uid\" + ++View.uid;\n    // Store delegated events listeners,\n    // so they can be unbound later.\n    _this.delegatedEventListeners = [];\n    // Store child views,\n    // so they can be destroyed.\n    _this.children = [];\n    // Extend \"this\" with options, mapping viewOptions keys.\n    Object.keys(options).forEach(function (key) {\n      if (viewOptions[key]) _this[key] = options[key];\n    });\n    // Ensure that the view has a root element at `this.el`.\n    _this.ensureElement();\n    return _this;\n  }\n\n  /**\n   * If you define a preinitialize method, it will be invoked when the view is first created, before any instantiation logic is run.\n   * @param {object} attrs Object containing model attributes to extend `this.attributes`.\n   */\n  var _proto = View.prototype;\n  _proto.preinitialize = function preinitialize() {}\n\n  /**\n   * Returns the first element that match the selector, \n   * scoped to DOM elements within the current view's root element (`this.el`).\n   * @param {string} selector CSS selector.\n   * @return {node} Element matching selector within the view's root element (`this.el`).\n   */;\n  _proto.$ = function $(selector) {\n    return this.el.querySelector(selector);\n  }\n\n  /**\n   * Returns a list of elements that match the selector, \n   * scoped to DOM elements within the current view's root element (`this.el`).\n   * @param {string} selector CSS selector.\n   * @return {node[]} List of elements matching selector within the view's root element (`this.el`).\n   */;\n  _proto.$$ = function $$(selector) {\n    return this.el.querySelectorAll(selector);\n  }\n\n  /**\n   * Destroy the view.\n   * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.\n   * Pass options.remove as true to remove the view's root element (`this.el`) from the DOM.\n   * @param {object} options.remove Remove the view's root element (`this.el`) from the DOM.\n   */;\n  _proto.destroy = function destroy() {\n    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n      remove = _ref.remove;\n    // Call destroy on children.\n    this.destroyChildren();\n    // Undelegate `this.el` event listeners\n    this.undelegateEvents();\n    // Unbind `this` events.\n    this.off();\n    // Remove `this.el` if \"options.remove\" is true.\n    if (remove) this.removeElement();\n    // Call onDestroy lifecycle method\n    this.onDestroy();\n  }\n\n  /**\n   * `onDestroy` lifecycle method is called after view is destroyed.\n   * Override with your code. Useful to stop listening to model's events.\n   */;\n  _proto.onDestroy = function onDestroy() {}\n\n  /**\n   * Add a view as a child.\n   * Children views are stored at `this.children`, and destroyed when the parent is destroyed.\n   * Returns the child for chaining.\n   * @param {Rasti.View} child\n   * @return {Rasti.View}\n   */;\n  _proto.addChild = function addChild(child) {\n    this.children.push(child);\n    return child;\n  }\n\n  /**\n   * Call destroy method on children views.\n   */;\n  _proto.destroyChildren = function destroyChildren() {\n    while (this.children.length) this.children.shift().destroy();\n  }\n\n  /**\n   * Ensure that the view has a root element at `this.el`.\n   * You shouldn't call this method directly. It's called from constructor.\n   * You may override it if you want to use a different logic or to \n   * postpone element creation.\n   */;\n  _proto.ensureElement = function ensureElement() {\n    // If \"this.el\" is not present,\n    // create a new element according \"this.tag\"\n    // and \"this.attributes\".\n    if (!this.el) this.el = this.createElement(this.tag, this.attributes);\n    // Delegate events on element.\n    this.delegateEvents();\n  }\n\n  /**\n   * Create an element.\n   * Called from constructor if `this.el` is undefined, to ensure\n   * the view to have a root element.\n   * @param {string} tag Tag for the element. Default to `div`\n   * @param {object} attrs Attributes for the element.\n   * @return {node} The created element.\n   */;\n  _proto.createElement = function createElement() {\n    var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';\n    var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    // Create dom element.\n    var el = document.createElement(tag);\n    // Add element attributes.\n    Object.keys(attrs).forEach(function (key) {\n      return el.setAttribute(key, attrs[key]);\n    });\n    return el;\n  }\n\n  /**\n   * Remove `this.el` from DOM.\n   */;\n  _proto.removeElement = function removeElement() {\n    this.el.parentNode.removeChild(this.el);\n  }\n\n  /**\n   * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, uses `this.events` as the source.<br />\n   * Events are written in the format `{'event selector' : 'listener'}`. The listener may be either the name of a method on the view, or a direct function body.\n   * Omitting the selector causes the event to be bound to the view's root element (`this.el`).<br />\n   * By default, `delegateEvents` is called within the View's constructor, \n   * so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself. <br />\n   * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.<br />\n   * When `delegateEvents` is run again, perhaps with a different events hash, all listeners are removed and delegated afresh.\n   * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.\n   * @return {Rasti.View} Return `this` for chaining.\n   * @example\n   * MyView.prototype.events = {\n   *      'click button.ok' : 'onClickOkButton',\n   *      'click button.cancel' : function() {}\n   * };\n   */;\n  _proto.delegateEvents = function delegateEvents() {\n    var _this2 = this;\n    var events = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.events;\n    if (!events) return this;\n    if (this.delegatedEventListeners.length) this.undelegateEvents();\n\n    // Store events by type i.e.: \"click\", \"submit\", etc.\n    var eventTypes = {};\n    Object.keys(events).forEach(function (key) {\n      var keyParts = key.split(' ');\n      var type = keyParts.shift();\n      var selector = keyParts.join(' ');\n      var listener = events[key];\n      // Listener may be a string representing a method name on the view,\n      // or a function.\n      listener = (typeof listener === 'string' ? _this2[listener] : listener).bind(_this2);\n      if (!eventTypes[type]) eventTypes[type] = [];\n      eventTypes[type].push({\n        selector: selector,\n        listener: listener\n      });\n    });\n    Object.keys(eventTypes).forEach(function (type) {\n      // Listener for the type of event.\n      var typeListener = function typeListener(event) {\n        // Iterate and run every individual listener if the selector matches.\n        eventTypes[type].forEach(function (_ref2) {\n          var selector = _ref2.selector,\n            listener = _ref2.listener;\n          if (!selector || event.target.closest(selector)) listener(event, _this2);\n        });\n      };\n      _this2.delegatedEventListeners.push({\n        type: type,\n        listener: typeListener\n      });\n      _this2.el.addEventListener(type, typeListener);\n    });\n    return this;\n  }\n\n  /**\n   * Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily. Called automatically when the view is destroyed.\n   * @return {Rasti.View} Return `this` for chaining.\n   */;\n  _proto.undelegateEvents = function undelegateEvents() {\n    var _this3 = this;\n    this.delegatedEventListeners.forEach(function (_ref3) {\n      var type = _ref3.type,\n        listener = _ref3.listener;\n      _this3.el.removeEventListener(type, listener);\n    });\n    this.delegatedEventListeners = [];\n    return this;\n  }\n\n  /**\n   * Render the view.\n   * This method should be overridden with custom logic.\n   * The default implementation sets innerHTML of `this.el` with `this.template`.\n   * Conventions are to only manipulate the dom in the scope of `this.el`, \n   * and to return `this` for chaining.\n   * If you added any child view, you must call `this.destroyChildren`.\n   * @return {Rasti.View} Return `this` for chaining.\n   */;\n  _proto.render = function render() {\n    if (this.template) this.el.innerHTML = this.template(this.model);\n    return this;\n  };\n  return View;\n}(_Emitter2[\"default\"]);\n/*\n * Unique Id\n */\nexports[\"default\"] = View;\nView.uid = 0;\n\n//# sourceURL=webpack://Rasti/./src/View.js?");
 
 /***/ }),
 

package/dist/rasti.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Rasti=t():e.Rasti=t()}(self,(()=>(()=>{"use strict";var e={30:(e,t)=>{t.__esModule=!0,t.default=void 0;var n=function(){function e(){}var t=e.prototype;return t.on=function(e,t){if("function"!=typeof t)throw TypeError("Listener must be a function");this.listeners||(this.listeners={}),this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.once=function(e,t){if("function"==typeof t){var n=this,i=t;t=function(){i.apply(void 0,arguments),n.off(e,t)}}this.on(e,t)},t.off=function(e,t){if(e)if(t){var n=this.listeners[e];n&&(n.slice().forEach((function(e,i){e===t&&n.splice(i,1)})),n.length||delete this.listeners[e])}else delete this.listeners[e];else this.listeners={}},t.emit=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];var r=this.listeners&&this.listeners[e];r&&r.length&&r.slice().forEach((function(e){e.apply(void 0,n)}))},e}();t.default=n},289:(e,t,n)=>{var i;function r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}t.__esModule=!0,t.default=void 0;var o=function(e){var t,n;function i(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(r(t),arguments),t.attributes=Object.assign({},t.defaults||{},n),t.previous={},Object.keys(t.attributes).forEach(t.defineAttribute.bind(r(t))),t}n=e,(t=i).prototype=Object.create(n.prototype),t.prototype.constructor=t,s(t,n);var o=i.prototype;return o.preinitialize=function(){},o.defineAttribute=function(e){var t=this;Object.defineProperty(this,e,{get:function(){return t.get(e)},set:function(n){t.set(e,n)}})},o.get=function(e){return this.attributes[e]},o.set=function(e,t){var n,i=this,r="object"==typeof e?e:((n={})[e]=t,n);return Object.keys(r).forEach((function(e){var t=e in i.attributes&&r[e]!==i.attributes[e];i.previous[e]=i.attributes[e],i.attributes[e]=r[e],t&&(i.emit("change",i,e,r[e]),i.emit("change:"+e,i,r[e]))})),this},o.toJSON=function(){return this.attributes},i}(((i=n(30))&&i.__esModule?i:{default:i}).default);t.default=o},789:(e,t,n)=>{t.__esModule=!0,t.default=void 0;var i,r=(i=n(30))&&i.__esModule?i:{default:i};function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}var o={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0},u=function(e){var t,n;function i(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t),arguments),t.uid="uid"+ ++i.uid,t.delegatedEventListeners=[],t.children=[],Object.keys(n).forEach((function(e){o[e]&&(t[e]=n[e])})),t.ensureElement(),t}n=e,(t=i).prototype=Object.create(n.prototype),t.prototype.constructor=t,s(t,n);var r=i.prototype;return r.preinitialize=function(){},r.$=function(e){return this.el.querySelector(e)},r.$$=function(e){return this.el.querySelectorAll(e)},r.destroy=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).remove;this.destroyChildren(),this.undelegateEvents(),this.off(),e&&this.removeElement(),this.onDestroy()},r.onDestroy=function(){},r.addChild=function(e){return this.children.push(e),e},r.destroyChildren=function(){for(;this.children.length;)this.children.shift().destroy()},r.ensureElement=function(){this.el||(this.el=this.createElement(this.tag,this.attributes)),this.delegateEvents()},r.createElement=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=document.createElement(e);return Object.keys(t).forEach((function(e){return n.setAttribute(e,t[e])})),n},r.removeElement=function(){this.el.parentNode.removeChild(this.el)},r.delegateEvents=function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.events;if(!t)return this;this.delegatedEventListeners.length&&this.undelegateEvents();var n={};Object.keys(t).forEach((function(i){var r=i.split(" "),s=r.shift(),o=r.join(" "),u=t[i];u=("string"==typeof u?e[u]:u).bind(e),n[s]||(n[s]=[]),n[s].push({selector:o,listener:u})}));var i=Array.prototype.indexOf;return Object.keys(n).forEach((function(t){var r=e,s=function(e){n[t].forEach((function(t){var n=t.selector,s=t.listener;i.call(n?r.el.querySelectorAll(n):[r.el],e.target)>-1&&s(e,r)}))};e.delegatedEventListeners.push({type:t,listener:s}),e.el.addEventListener(t,s)})),this},r.undelegateEvents=function(){var e=this;return this.delegatedEventListeners.forEach((function(t){var n=t.type,i=t.listener;e.el.removeEventListener(n,i)})),this.delegatedEventListeners=[],this},r.render=function(){return this.template&&(this.el.innerHTML=this.template(this.model)),this},i}(r.default);t.default=u,u.uid=0}},t={};function n(i){var r=t[i];if(void 0!==r)return r.exports;var s=t[i]={exports:{}};return e[i](s,s.exports,n),s.exports}var i={};return(()=>{var e=i;e.__esModule=!0;var t=o(n(30));e.Emitter=t.default;var r=o(n(289));e.Model=r.default;var s=o(n(789));function o(e){return e&&e.__esModule?e:{default:e}}e.View=s.default})(),i})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Rasti=t():e.Rasti=t()}(self,(()=>(()=>{"use strict";var e={30:(e,t)=>{t.__esModule=!0,t.default=void 0;var n=function(){function e(){}var t=e.prototype;return t.on=function(e,t){if("function"!=typeof t)throw TypeError("Listener must be a function");this.listeners||(this.listeners={}),this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.once=function(e,t){if("function"==typeof t){var n=this,i=t;t=function(){i.apply(void 0,arguments),n.off(e,t)}}this.on(e,t)},t.off=function(e,t){if(e)if(t){var n=this.listeners[e];n&&(n.slice().forEach((function(e,i){e===t&&n.splice(i,1)})),n.length||delete this.listeners[e])}else delete this.listeners[e];else this.listeners={}},t.emit=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];var r=this.listeners&&this.listeners[e];r&&r.length&&r.slice().forEach((function(e){e.apply(void 0,n)}))},e}();t.default=n},289:(e,t,n)=>{var i;function r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}t.__esModule=!0,t.default=void 0;var o=function(e){var t,n;function i(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(r(t),arguments),t.attributes=Object.assign({},t.defaults||{},n),t.previous={},Object.keys(t.attributes).forEach(t.defineAttribute.bind(r(t))),t}n=e,(t=i).prototype=Object.create(n.prototype),t.prototype.constructor=t,s(t,n);var o=i.prototype;return o.preinitialize=function(){},o.defineAttribute=function(e){var t=this;Object.defineProperty(this,e,{get:function(){return t.get(e)},set:function(n){t.set(e,n)}})},o.get=function(e){return this.attributes[e]},o.set=function(e,t){var n,i=this,r="object"==typeof e?e:((n={})[e]=t,n);return Object.keys(r).forEach((function(e){var t=e in i.attributes&&r[e]!==i.attributes[e];i.previous[e]=i.attributes[e],i.attributes[e]=r[e],t&&(i.emit("change",i,e,r[e]),i.emit("change:"+e,i,r[e]))})),this},o.toJSON=function(){return this.attributes},i}(((i=n(30))&&i.__esModule?i:{default:i}).default);t.default=o},789:(e,t,n)=>{t.__esModule=!0,t.default=void 0;var i,r=(i=n(30))&&i.__esModule?i:{default:i};function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}var o={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0},u=function(e){var t,n;function i(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t),arguments),t.uid="uid"+ ++i.uid,t.delegatedEventListeners=[],t.children=[],Object.keys(n).forEach((function(e){o[e]&&(t[e]=n[e])})),t.ensureElement(),t}n=e,(t=i).prototype=Object.create(n.prototype),t.prototype.constructor=t,s(t,n);var r=i.prototype;return r.preinitialize=function(){},r.$=function(e){return this.el.querySelector(e)},r.$$=function(e){return this.el.querySelectorAll(e)},r.destroy=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).remove;this.destroyChildren(),this.undelegateEvents(),this.off(),e&&this.removeElement(),this.onDestroy()},r.onDestroy=function(){},r.addChild=function(e){return this.children.push(e),e},r.destroyChildren=function(){for(;this.children.length;)this.children.shift().destroy()},r.ensureElement=function(){this.el||(this.el=this.createElement(this.tag,this.attributes)),this.delegateEvents()},r.createElement=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=document.createElement(e);return Object.keys(t).forEach((function(e){return n.setAttribute(e,t[e])})),n},r.removeElement=function(){this.el.parentNode.removeChild(this.el)},r.delegateEvents=function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.events;if(!t)return this;this.delegatedEventListeners.length&&this.undelegateEvents();var n={};return Object.keys(t).forEach((function(i){var r=i.split(" "),s=r.shift(),o=r.join(" "),u=t[i];u=("string"==typeof u?e[u]:u).bind(e),n[s]||(n[s]=[]),n[s].push({selector:o,listener:u})})),Object.keys(n).forEach((function(t){var i=function(i){n[t].forEach((function(t){var n=t.selector,r=t.listener;n&&!i.target.closest(n)||r(i,e)}))};e.delegatedEventListeners.push({type:t,listener:i}),e.el.addEventListener(t,i)})),this},r.undelegateEvents=function(){var e=this;return this.delegatedEventListeners.forEach((function(t){var n=t.type,i=t.listener;e.el.removeEventListener(n,i)})),this.delegatedEventListeners=[],this},r.render=function(){return this.template&&(this.el.innerHTML=this.template(this.model)),this},i}(r.default);t.default=u,u.uid=0}},t={};function n(i){var r=t[i];if(void 0!==r)return r.exports;var s=t[i]={exports:{}};return e[i](s,s.exports,n),s.exports}var i={};return(()=>{var e=i;e.__esModule=!0;var t=o(n(30));e.Emitter=t.default;var r=o(n(289));e.Model=r.default;var s=o(n(789));function o(e){return e&&e.__esModule?e:{default:e}}e.View=s.default})(),i})()));

package/es/View.js

@@ -84,7 +84,7 @@ var View = /*#__PURE__*/function (_Emitter) {
     // Useful to generate elements ids.
     _this.uid = "uid" + ++View.uid;
     // Store delegated events listeners,
-    // so they can be unbinded later.
+    // so they can be unbound later.
     _this.delegatedEventListeners = [];
     // Store child views,
     // so they can be destroyed.
@@ -238,10 +238,12 @@ var View = /*#__PURE__*/function (_Emitter) {
     // Store events by type i.e.: "click", "submit", etc.
     var eventTypes = {};
     Object.keys(events).forEach(function (key) {
-      var keyParts = key.split(' '),
-        type = keyParts.shift(),
-        selector = keyParts.join(' '),
-        listener = events[key];
+      var keyParts = key.split(' ');
+      var type = keyParts.shift();
+      var selector = keyParts.join(' ');
+      var listener = events[key];
+      // Listener may be a string representing a method name on the view,
+      // or a function.
       listener = (typeof listener === 'string' ? _this2[listener] : listener).bind(_this2);
       if (!eventTypes[type]) eventTypes[type] = [];
       eventTypes[type].push({
@@ -249,16 +251,14 @@ var View = /*#__PURE__*/function (_Emitter) {
         listener: listener
       });
     });
-    var indexOf = Array.prototype.indexOf;
     Object.keys(eventTypes).forEach(function (type) {
-      var self = _this2;
+      // Listener for the type of event.
       var typeListener = function typeListener(event) {
+        // Iterate and run every individual listener if the selector matches.
         eventTypes[type].forEach(function (_ref2) {
           var selector = _ref2.selector,
             listener = _ref2.listener;
-          if (indexOf.call(selector ? self.el.querySelectorAll(selector) : [self.el], event.target) > -1) {
-            listener(event, self);
-          }
+          if (!selector || event.target.closest(selector)) listener(event, _this2);
         });
       };
       _this2.delegatedEventListeners.push({

package/lib/View.js

@@ -88,7 +88,7 @@ var View = /*#__PURE__*/function (_Emitter) {
     // Useful to generate elements ids.
     _this.uid = "uid" + ++View.uid;
     // Store delegated events listeners,
-    // so they can be unbinded later.
+    // so they can be unbound later.
     _this.delegatedEventListeners = [];
     // Store child views,
     // so they can be destroyed.
@@ -242,10 +242,12 @@ var View = /*#__PURE__*/function (_Emitter) {
     // Store events by type i.e.: "click", "submit", etc.
     var eventTypes = {};
     Object.keys(events).forEach(function (key) {
-      var keyParts = key.split(' '),
-        type = keyParts.shift(),
-        selector = keyParts.join(' '),
-        listener = events[key];
+      var keyParts = key.split(' ');
+      var type = keyParts.shift();
+      var selector = keyParts.join(' ');
+      var listener = events[key];
+      // Listener may be a string representing a method name on the view,
+      // or a function.
       listener = (typeof listener === 'string' ? _this2[listener] : listener).bind(_this2);
       if (!eventTypes[type]) eventTypes[type] = [];
       eventTypes[type].push({
@@ -253,16 +255,14 @@ var View = /*#__PURE__*/function (_Emitter) {
         listener: listener
       });
     });
-    var indexOf = Array.prototype.indexOf;
     Object.keys(eventTypes).forEach(function (type) {
-      var self = _this2;
+      // Listener for the type of event.
       var typeListener = function typeListener(event) {
+        // Iterate and run every individual listener if the selector matches.
         eventTypes[type].forEach(function (_ref2) {
           var selector = _ref2.selector,
             listener = _ref2.listener;
-          if (indexOf.call(selector ? self.el.querySelectorAll(selector) : [self.el], event.target) > -1) {
-            listener(event, self);
-          }
+          if (!selector || event.target.closest(selector)) listener(event, _this2);
         });
       };
       _this2.delegatedEventListeners.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rasti",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Minimalistic JavaScript MV library for building user interfaces.",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",

package/src/View.js

@@ -78,7 +78,7 @@ export default class View extends Emitter {
         // Useful to generate elements ids.
         this.uid = `uid${++View.uid}`;
         // Store delegated events listeners,
-        // so they can be unbinded later.
+        // so they can be unbound later.
         this.delegatedEventListeners = [];
         // Store child views,
         // so they can be destroyed.
@@ -227,13 +227,15 @@ export default class View extends Emitter {
         let eventTypes = {};
 
         Object.keys(events).forEach(key => {
-            let keyParts = key.split(' '),
-                type = keyParts.shift(),
-                selector = keyParts.join(' '),
-                listener = events[key];
+            const keyParts = key.split(' ');
+            const type = keyParts.shift();
+            const selector = keyParts.join(' ');
 
+            let listener = events[key];
+            // Listener may be a string representing a method name on the view,
+            // or a function.
             listener = (
-                typeof listener === 'string' ?  
+                typeof listener === 'string' ?
                     this[listener] : 
                     listener
             ).bind(this);
@@ -243,15 +245,12 @@ export default class View extends Emitter {
             eventTypes[type].push({ selector, listener });
         });
 
-        const indexOf = Array.prototype.indexOf;
-
         Object.keys(eventTypes).forEach(type => {
-            let self = this;
-            let typeListener = function (event) {
-                eventTypes[type].forEach(function ({ selector, listener }) {
-                    if (indexOf.call(selector ? self.el.querySelectorAll(selector) : [self.el], event.target) > -1) {
-                        listener(event, self);
-                    }
+            // Listener for the type of event.
+            const typeListener = (event) => {
+                // Iterate and run every individual listener if the selector matches.
+                eventTypes[type].forEach(({ selector, listener }) => {
+                    if (!selector || event.target.closest(selector)) listener(event, this);
                 });
             };