rasti 2.1.0-alpha.0 → 3.0.0-alpha.0

package/dist/rasti.js

@@ -1,109 +1,1413 @@
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory();
-	else if(typeof define === 'function' && define.amd)
-		define([], factory);
-	else if(typeof exports === 'object')
-		exports["Rasti"] = factory();
-	else
-		root["Rasti"] = factory();
-})(self, () => {
-return /******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
-
-/***/ "./src/Component.js":
-/*!**************************!*\
-  !*** ./src/Component.js ***!
-  \**************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _View2 = _interopRequireDefault(__webpack_require__(/*! ./View.js */ \"./src/View.js\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\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 componentOptions = {\n  key: true,\n  state: true,\n  onCreate: true,\n  onChange: true,\n  onRender: true\n};\n\n/*\n * Helper function. Extract attributes from html tag\n * @param text {string} html text\n * @return {object} Object with keys / values representing attributes.\n */\nvar extractAttributes = function extractAttributes(text) {\n  var attributes = {};\n  var re = /([\\w|data-]+)(?:=[\"']?((?:.(?![\"']?\\s+(?:\\S+)=|\\s*\\/?[>\"']))+.)[\"']?)?/g;\n  var result;\n  while ((result = re.exec(text)) !== null) {\n    attributes[result[1]] = typeof result[2] === 'undefined' ? true : result[2];\n  }\n  return attributes;\n};\n\n/*\n * Helper function. If first arg is a placeholder for an expression, return the expression.\n */\nvar getExpression = function getExpression(placeholder, expressions) {\n  var match = placeholder && placeholder.match && placeholder.match(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)')));\n  return match && match[1] ? expressions[match[1]] : placeholder;\n};\n\n/*\n * Helper function. If expression is a function, call it with context and args.\n */\nvar evalExpression = function evalExpression(expression, context) {\n  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n    args[_key - 2] = arguments[_key];\n  }\n  return typeof expression === 'function' ? expression.apply(context, args) : expression;\n};\n\n/**\n * Components are a special kind of `View` that is designed to be easily composable, \n * making it simple to add child views and build complex user interfaces.  \n * Unlike views, which are render-agnostic, components have a specific set of rendering \n * guidelines that allow for a more declarative development style.  \n * Components are defined with the `create` static method, which takes a tagged template.\n * @module\n * @extends Rasti.View\n * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.\n * @property {string} key A unique key to identify the component. Used to recycle child components.\n * @property {object} model A `Rasti.Model` or any emitter object containing data and business logic.\n * @property {object} state A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state.\n * @example\n * import { Component, Model } from 'rasti';\n * // Create Timer component.\n * const Timer = Component.create`\n *     <div>\n *         Seconds: <span>${({ model }) => model.seconds}</span>\n *     </div>\n * `;\n * // Create model to store seconds.\n * const model = new Model({ seconds: 0 });\n * // Mount timer on body.\n * Timer.mount({ model }, document.body);\n * // Increment `model.seconds` every second.\n * setInterval(() => model.seconds++, 1000);\n */\nvar Component = exports[\"default\"] = /*#__PURE__*/function (_View) {\n  function Component() {\n    var _this;\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _this = _View.apply(this, arguments) || this;\n    // Extend \"this\" with options, mapping componentOptions keys.\n    Object.keys(options).forEach(function (key) {\n      if (componentOptions[key]) _this[key] = options[key];\n    });\n    // Store options by default.\n    _this.options = options;\n    // Bind onChange to this to be used as listener.\n    // Store bound version, so it can be removed on onDestroy method.\n    _this.onChange = _this.onChange.bind(_this);\n    // Listen to model changes and call onChange.\n    if (_this.model && _this.model.on) _this.model.on('change', _this.onChange);\n    if (_this.state && _this.state.on) _this.state.on('change', _this.onChange);\n    // Call life cycle method.\n    _this.onCreate.apply(_this, arguments);\n    return _this;\n  }\n\n  /*\n  * Tell if component is a container.\n  * In which case, it will not have an element by itself.\n  * It will render a single expression which is expected to return a single component as child.\n  * `this.el` will be a reference to that child component's element.\n  * @return {boolean}\n  */\n  _inheritsLoose(Component, _View);\n  var _proto = Component.prototype;\n  _proto.isContainer = function isContainer() {\n    return !!(!this.tag && this.template && this.template.inner && this.template.expressions && this.template.expressions.length === 1);\n  }\n\n  /*\n   * Override. We don't want to ensure an element on instantiation.\n   * We will provide it later.\n   */;\n  _proto.ensureElement = function ensureElement() {\n    // If el is provided, delegate events.\n    if (this.el) {\n      this.delegateEvents();\n      this.id = this.el.id;\n    }\n    // Ensure id.\n    if (!this.isContainer() && !this.id) {\n      this.id = this.attributes && this.attributes.id ?\n      // If id is provided, evaluate it.\n      evalExpression(this.attributes.id, this, this) :\n      // Generate a unique id and set it as id attribute.\n      Component.ID_TEMPLATE(this.uid);\n    }\n  }\n\n  /*\n   * Find view's element on parent node, using id.\n   * @param parent {node} The parent node.\n   * @return {node} The component's element.\n   */;\n  _proto.findElement = function findElement(parent) {\n    return (parent || document).querySelector(\"#\" + this.id);\n  }\n\n  /*\n   * Eval attributes expressions.\n   * @return {object} Object containing add, remove and html properties.\n   */;\n  _proto.getAttributes = function getAttributes() {\n    var _this2 = this;\n    var add = {\n      id: this.id\n    };\n    var remove = {};\n    var html = [\"id=\\\"\" + this.id + \"\\\"\"];\n    if (this.attributes) {\n      Object.keys(this.attributes).forEach(function (key) {\n        if (key === 'id') return;\n        // Evaluate attribute value.\n        var value = evalExpression(_this2.attributes[key], _this2, _this2);\n\n        // Transform bool attribute values\n        if (value === false) {\n          remove[key] = true;\n        } else if (value === true) {\n          add[key] = '';\n          html.push(key);\n        } else {\n          if (value === null || typeof value === 'undefined') value = '';\n          add[key] = value;\n          html.push(key + \"=\\\"\" + value + \"\\\"\");\n        }\n      });\n    }\n    return {\n      add: add,\n      remove: remove,\n      html: html.join(' ')\n    };\n  }\n\n  /*\n   * Used internally on the render process.\n   * Attach the view to the dom element.\n   * @param parent {node} The parent node.\n   * @return {Rasti.Component} The component instance.\n   */;\n  _proto.hydrate = function hydrate(parent) {\n    var _this3 = this;\n    if (!this.isContainer()) {\n      this.el = this.findElement(parent);\n      this.delegateEvents();\n      this.children.forEach(function (child) {\n        return child.hydrate(_this3.el);\n      });\n    } else {\n      this.children[0].hydrate(parent);\n      this.el = this.children[0].el;\n    }\n    // Call `onRender` lifecycle method.\n    this.onRender.call(this, 'hydrate');\n    // Return `this` for chaining.\n    return this;\n  }\n\n  /*\n   * Used internally on the render process.\n   * Reuse a view that has `key` when its parent is rendered.\n   * @param parent {node} The parent node.\n   * @return {Rasti.Component} The component instance.\n   */;\n  _proto.recycle = function recycle(parent) {\n    // Find element to be replaced. It has same id.\n    var toBeReplaced = (this.isContainer() ? this.children[0] : this).findElement(parent);\n    // Replace it with this.el.\n    toBeReplaced.replaceWith(this.el);\n    // Call `onRender` lifecycle method.\n    this.onRender.call(this, 'recycle');\n    // Return `this` for chaining.\n    return this;\n  }\n\n  /*\n   * Override. Add some custom logic to super `destroy` method.\n   * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.\n   */;\n  _proto.destroy = function destroy() {\n    _View.prototype.destroy.apply(this, arguments);\n    // Stop listening to `change`.\n    if (this.model && this.model.off) this.model.off('change', this.onChange);\n    if (this.state && this.state.off) this.state.off('change', this.onChange);\n    // Set destroyed flag to prevent a last render after destroyed.\n    this.destroyed = true;\n    // Return `this` for chaining.\n    return this;\n  }\n\n  /**\n   * Lifecycle method. Called when the view is created at the end of the constructor.\n   * @param options {object} The view options.\n   */;\n  _proto.onCreate = function onCreate() {}\n\n  /**\n   * Lifecycle method. Called when model emits `change` event.\n   * By default calls render method.\n   * This method should be extended with custom logic.\n   * Maybe comparing new attributes with previous ones and calling\n   * render when needed. Or doing some dom transformation.\n   * @param model {Rasti.Model} The model that emitted the event.\n   * @param changed {object} Object containing keys and values that has changed.\n   * @param [...args] {any} Any extra arguments passed to set method.\n   */;\n  _proto.onChange = function onChange() {\n    this.render();\n  }\n\n  /**\n   * Lifecycle method. Called when the view is rendered.\n   * @param type {string} The render type. Can be `render`, `hydrate` or `recycle`.\n   */;\n  _proto.onRender = function onRender() {}\n\n  /**\n   * Lifecycle method. Called when the view is destroyed.\n   * @param {object} options Options object or any arguments passed to `destroy` method.\n   */;\n  _proto.onDestroy = function onDestroy() {}\n\n  /*\n   * Replace expressions.\n   */;\n  _proto.replaceExpressions = function replaceExpressions(string, addChild) {\n    var _this4 = this;\n    return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)'), 'g'), function (match) {\n      var expression = getExpression(match, _this4.template.expressions);\n      // Eval expression. Pass view as argument.\n      var result = evalExpression(expression, _this4, _this4);\n      // Treat all expressions as arrays.\n      var results = result instanceof Array ? result : [result];\n      // Replace expression with the result of the evaluation.\n      return results.reduce(function (out, result) {\n        var parsed;\n        // If result is true, replace it with a placeholder.\n        if (result === true) parsed = Component.TRUE_PLACEHOLDER;\n        // If result is false, replace it with a placeholder.\n        else if (result === false) parsed = Component.FALSE_PLACEHOLDER;\n        // Replace null or undefined with empty string.\n        else if (result === null || typeof result === 'undefined') parsed = '';\n        // If result is a view, call addChild callback.\n        else if (result && typeof result.render === 'function') parsed = addChild(result);\n        // Return expression itself.\n        else parsed = result;\n        // Concatenate expressions.\n        return out + parsed;\n      }, '');\n    })\n    // Replace `attribute=\"true\"` with `attribute` and `attribute=\"false\"` with empty string.\n    .replace(new RegExp(\"([\\\\w|data-]+)=([\\\"'])?(\" + Component.TRUE_PLACEHOLDER + \"|\" + Component.FALSE_PLACEHOLDER + \")\\\\2\", 'g'), function (match, attribute, quote, placeholder) {\n      return placeholder === Component.TRUE_PLACEHOLDER ? attribute : '';\n    })\n    // Replace rest of true or false expressions with empty string.\n    .replace(new RegExp(Component.TRUE_PLACEHOLDER + \"|\" + Component.FALSE_PLACEHOLDER, 'g'), '');\n  }\n\n  /*\n   * Treat the whole view as a HTML string.\n   */;\n  _proto.toString = function toString() {\n    var _this5 = this;\n    // Normally there won't be any children, but if there are, destroy them.\n    this.destroyChildren();\n    // Replace expressions of inner template.\n    var close = this.template && this.template.inner;\n    var inner = close && this.replaceExpressions(this.template.inner, function (component) {\n      // Add child component.\n      return _this5.addChild(component);\n    });\n    // If component is a container, return inner which will be an expression thats return a single component.\n    if (this.isContainer()) return inner;\n    // Get tag name.\n    var tag = this.tag || 'div';\n    // Get attributes.\n    var attributes = this.getAttributes().html;\n    // Generate outer template.\n    return close ? \"<\" + tag + \" \" + attributes + \">\" + inner + \"</\" + tag + \">\" : \"<\" + tag + \" \" + attributes + \" />\";\n  }\n\n  /*\n   * View render method.\n   */;\n  _proto.render = function render() {\n    var _this6 = this;\n    // Prevent a last re render if view is already destroyed.\n    if (this.destroyed) return this;\n    if (!this.isContainer()) {\n      // If `this.el` is not present, create a new `this.tag` element.\n      if (!this.el) {\n        this.el = this.createElement(this.tag);\n        this.delegateEvents();\n      }\n      // Set `this.el` attributes.\n      var attributes = this.getAttributes();\n      // Remove attributes.\n      Object.keys(attributes.remove).forEach(function (key) {\n        _this6.el.removeAttribute(key);\n      });\n      // Add attributes.\n      Object.keys(attributes.add).forEach(function (key) {\n        _this6.el.setAttribute(key, attributes.add[key]);\n      });\n    }\n    // Check for `template.inner` to see if view has innerHTML.\n    if (this.template && this.template.inner) {\n      // Store active element.\n      var activeElement = document.activeElement;\n      var nextChildren = [];\n      var recycledChildren = [];\n      var previousChildren = this.children;\n      this.children = [];\n      // Replace expressions. Set html inside of `this.el`.\n      var inner = this.replaceExpressions(this.template.inner, function (component) {\n        var out = component;\n        // Check if child already exists.\n        var found = component.key && previousChildren.find(function (previousChild) {\n          return previousChild.key === component.key;\n        });\n        if (found) {\n          var tag = found.el.tagName.toLowerCase();\n          var id = found.el.id;\n          // If child already exists, replace it html by its root element.\n          out = \"<\" + tag + \" id=\\\"\" + id + \"\\\"></\" + tag + \">\";\n          // Add child to recycled children.\n          recycledChildren.push(found);\n          // Destroy new child component. Use recycled one instead.\n          component.destroy();\n        } else {\n          // Not found. Add new child component.\n          nextChildren.push(component);\n        }\n        // Component html.\n        return out;\n      });\n      if (this.isContainer()) {\n        if (nextChildren[0]) {\n          var fragment = this.createElement('template');\n          fragment.innerHTML = inner;\n          // Add new child to dom fragment and hydrate it.\n          this.addChild(nextChildren[0]).hydrate(fragment.content);\n          // Get next child element.\n          var nextEl = fragment.content.children[0];\n          // If `this.el` is present, replace it with nextEl.\n          if (this.el) this.el.replaceWith(nextEl);\n          // Set `this.el` to nextEl.\n          this.el = nextEl;\n        } else if (recycledChildren[0]) {\n          this.addChild(recycledChildren[0]);\n        }\n      } else {\n        this.el.innerHTML = inner;\n        // Add new children. Hydrate them.\n        nextChildren.forEach(function (nextChild) {\n          _this6.addChild(nextChild).hydrate(_this6.el);\n        });\n        // Replace children root elements with recycled components.\n        recycledChildren.forEach(function (recycledChild) {\n          _this6.addChild(recycledChild).recycle(_this6.el);\n        });\n      }\n      // Destroy unused children.\n      previousChildren.forEach(function (previousChild) {\n        var found = recycledChildren.indexOf(previousChild) > -1;\n        if (!found) previousChild.destroy();\n      });\n      // Restore focus.\n      if (this.el.contains(activeElement)) {\n        activeElement.focus();\n      }\n    }\n    // Call onRender lifecycle method.\n    this.onRender.call(this, 'render');\n    // Return this for chaining.\n    return this;\n  }\n\n  /**\n   * Helper method used to extend a `Component`, creating a subclass.\n   * @static\n   * @param {object} object Object containing methods to be added to the new `Component` subclass. Also can be a function that receives the parent prototype and returns an object.\n   */;\n  Component.extend = function extend(object) {\n    var Current = this;\n    var Extended = /*#__PURE__*/function (_Current) {\n      function Extended() {\n        return _Current.apply(this, arguments) || this;\n      }\n      _inheritsLoose(Extended, _Current);\n      return Extended;\n    }(Current);\n    Object.assign(Extended.prototype, typeof object === 'function' ? object(Current.prototype) : object);\n    return Extended;\n  }\n\n  /**\n   * Mount the component into the dom.\n   * It instantiate the Component view using options, \n   * appends its element into the DOM (if `el` is provided).\n   * And returns the view instance.\n   * @static\n   * @param {object} options The view options.\n   * @param {node} el Dom element to append the view element.\n   * @param {boolean} hydrate If true, the view will use existing html.\n   * @return {Rasti.Component}\n   */;\n  Component.mount = function mount(options, el, hydrate) {\n    // Instantiate view.\n    var view = new this(options);\n    // If `el` is passed, mount component.\n    if (el) {\n      if (hydrate) {\n        view.toString();\n      } else {\n        var fragment = this.prototype.createElement('template');\n        // Add html text into element inner html.\n        fragment.innerHTML = view;\n        // Add to dom.\n        el.appendChild(fragment.content.children[0]);\n      }\n      view.hydrate(el);\n    }\n    // Return view instance.\n    return view;\n  }\n\n  /**\n   * Takes a tagged template containing an HTML string, \n   * and returns a new `Component` class.\n   * - The template outer tag and attributes will be used to create the view's root element.\n   * - Boolean attributes should be passed in the form of `attribute=\"${() => true}\"`.\n   * - Event handlers should be passed, at the root element, in the form of `onEventName=${{'selector' : listener }}`. Where `selector` is a css selector. The event will be delegated to the view's root element.\n   * - The template inner HTML will be used as the view's template.\n   * - Template interpolations that are functions will be evaluated on the render process. Receiving the view instance as argument. And being bound to it.\n   * - If the function returns `null`, `undefined`, `false` or empty string, the interpolation won't render any content.\n   * - If the function returns a component instance, it will be added as a child component.\n   * - If the function returns an array, each item will be evaluated as above.\n   * @static\n   * @param {string} HTML template for the component. Or a function that mounts a sub component.\n   * @return {Rasti.Component}\n   */;\n  Component.create = function create(strings) {\n    for (var _len2 = arguments.length, expressions = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n      expressions[_key2 - 1] = arguments[_key2];\n    }\n    // Containers can be created using create as a functions instead of a tagged template.\n    if (typeof strings === 'function') {\n      expressions = [strings];\n      strings = ['', ''];\n    }\n    var tag, attributes, inner, events;\n    var parts = [];\n    // Replace functions and objects interpolations with `{number}`.\n    // Where `number` is the index on expressions array.\n    strings.forEach(function (string, i) {\n      // Add string part.\n      parts.push(string);\n      // Add expression placeholder for later or expression eval.\n      if (expressions[i]) {\n        parts.push(typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ? Component.EXPRESSION_PLACEHOLDER_TEMPLATE(i) : expressions[i]);\n      }\n    });\n    // Create output text for main template.\n    var main = parts.join('').trim().replace(/\\n/g, '');\n    // Extract outer tag, attributes and inner html.\n    var result = main.match(/^<([a-z]+[1-6]?)(.*?)>(.*)<\\/\\1>$/) || main.match(/^<([a-z]+)(.*?)\\/>$/);\n    if (result) {\n      tag = result[1];\n      inner = result[3];\n      // Parse attributes from html text into an object.\n      attributes = extractAttributes(result[2]);\n      // Events to be delegated.\n      events = {};\n      // Filter events. To generate events object.\n      // Generate attributes object, replace placeholders with expressions.\n      attributes = Object.keys(attributes).reduce(function (out, key) {\n        // Is Event?\n        var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);\n        // Is placeholder for function or object?\n        // Get expression or value.\n        var value = getExpression(attributes[key], expressions);\n        // Is event handler. Add to events object.\n        if (matchKey && matchKey[1]) {\n          var eventType = matchKey[1].toLowerCase();\n          Object.keys(value).forEach(function (selector) {\n            return events[\"\" + eventType + (selector === '&' ? '' : \" \" + selector)] = value[selector];\n          });\n          return out;\n        }\n        // Is attribute. Add to attributes object.\n        out[key] = value;\n        return out;\n      }, {});\n    } else inner = main;\n    var Current = this;\n    // Create subclass for this component.\n    return Current.extend({\n      // Set events.\n      events: events,\n      // Set attributes.\n      attributes: attributes,\n      // Set template.\n      template: {\n        // Template for innerHTML of root element.\n        inner: inner,\n        // Template expressions.\n        expressions: expressions\n      },\n      // Set root element tag.\n      tag: tag\n    });\n  };\n  return Component;\n}(_View2[\"default\"]);\nComponent.ID_TEMPLATE = function (uid) {\n  return \"rasti-component-\" + uid;\n};\nComponent.EXPRESSION_PLACEHOLDER_TEMPLATE = function (idx) {\n  return \"__RASTI_EXPRESSION{\" + idx + \"}\";\n};\nComponent.TRUE_PLACEHOLDER = '__RASTI_TRUE';\nComponent.FALSE_PLACEHOLDER = '__RASTI_FALSE';\n\n//# sourceURL=webpack://Rasti/./src/Component.js?");
-
-/***/ }),
-
-/***/ "./src/Emitter.js":
-/*!************************!*\
-  !*** ./src/Emitter.js ***!
-  \************************/
-/***/ ((__unused_webpack_module, exports) => {
-
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\n/**\n * `Emitter` is a class that provides an easy way to implement the observer pattern \n * in your applications.  \n * It can be extended to create new classes that have the ability to emit and bind custom named events.   \n * Emitter is used by `Model` and `View` classes, which inherit from it to implement \n * event-driven functionality.\n *\n * @module\n * @example\n * import { Emitter } from 'rasti';\n * // Custom cart\n * class ShoppingCart extends Emitter {\n *     constructor() {\n *         super();\n *         this.items = [];\n *     }\n *\n *     addItem(item) {\n *         this.items.push(item);\n *         // Emit a custom event called `itemAdded`.\n *         // Pass the added item as an argument to the event listener.\n *         this.emit('itemAdded', item);\n *     }\n * }\n * // Create an instance of ShoppingCart and Logger\n * const cart = new ShoppingCart();\n * // Listen to the `itemAdded` event and log the added item using the logger.\n * cart.on('itemAdded', (item) => {\n *     console.log(`Item added to cart: ${item.name} - Price: $${item.price}`);\n * });\n * // Simulate adding items to the cart\n * const item1 = { name : 'Smartphone', price : 1000 };\n * const item2 = { name : 'Headphones', price : 150 };\n *\n * cart.addItem(item1); // Output: \"Item added to cart: Smartphone - Price: $1000\"\n * cart.addItem(item2); // Output: \"Item added to cart: Headphones - Price: $150\"\n */\nvar Emitter = exports[\"default\"] = /*#__PURE__*/function () {\n  function Emitter() {}\n  var _proto = Emitter.prototype;\n  /**\n   * Adds event listener.\n   * @param {string} type Type of the event (e.g. `change`).\n   * @param {function} listener Callback function to be called when the event is emitted.\n   * @example\n   * this.model.on('change', this.render.bind(this)); // Re render when model changes.\n   */\n  _proto.on = function on(type, listener) {\n    if (typeof listener !== 'function') {\n      throw TypeError('Listener must be a function');\n    }\n    if (!this.listeners) this.listeners = {};\n    if (!this.listeners[type]) this.listeners[type] = [];\n    this.listeners[type].push(listener);\n  }\n\n  /**\n   * Adds event listener that executes once.\n   * @param {string} type Type of the event (e.g. `change`).\n   * @param {function} listener Callback function to be called when the event is emitted.\n   * @example\n   * this.model.once('change', () => console.log('This will happen once'));\n   */;\n  _proto.once = function once(type, _listener2) {\n    if (typeof _listener2 === 'function') {\n      var self = this;\n      var _listener = _listener2;\n      _listener2 = function listener() {\n        _listener.apply(void 0, arguments);\n        self.off(type, _listener2);\n      };\n    }\n    this.on(type, _listener2);\n  }\n\n  /**\n   * Removes event listeners.\n   * @param {string} [type] Type of the event (e.g. `change`). If is not provided, it removes all listeners.\n   * @param {function} [listener] Callback function to be called when the event is emitted. If listener is not provided, it removes all listeners for specified type.\n   * @example\n   * this.model.off('change'); // Stop listening to changes.\n   */;\n  _proto.off = function off(type, listener) {\n    if (!type) {\n      this.listeners = {};\n    } else {\n      if (!listener) {\n        delete this.listeners[type];\n      } else {\n        var listeners = this.listeners[type];\n        if (listeners) {\n          var copy = listeners.slice();\n          copy.forEach(function (fn, idx) {\n            if (fn === listener) listeners.splice(idx, 1);\n          });\n          if (!listeners.length) {\n            delete this.listeners[type];\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * Emits event of specified type. Listeners will receive specified arguments.\n   * @param {string} type Type of the event (e.g. `change`).\n   * @param {any} [...args] Arguments to be passed to listener.\n   * @example\n   * this.emit('invalid'); // Emit validation error event.\n   */;\n  _proto.emit = function emit(type) {\n    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n      args[_key - 1] = arguments[_key];\n    }\n    var listeners = this.listeners && this.listeners[type];\n    if (!listeners || !listeners.length) return;\n    var copy = listeners.slice();\n    copy.forEach(function (fn) {\n      fn.apply(void 0, args);\n    });\n  };\n  return Emitter;\n}();\n\n//# sourceURL=webpack://Rasti/./src/Emitter.js?");
-
-/***/ }),
-
-/***/ "./src/Model.js":
-/*!**********************!*\
-  !*** ./src/Model.js ***!
-  \**********************/
-/***/ ((__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 _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/**\n * - Orchestrates data and business logic.\n * - Emits events when data changes.\n * \n * A `Model` manages an internal table of data attributes and triggers change events when any of its data is modified.  \n * Models may handle syncing data with a persistence layer. To design your models, create atomic, reusable objects \n * that contain all the necessary functions for manipulating their specific data.  \n * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.  \n * Rasti models stores its attributes in `this.attributes`, which is extended from `this.defaults` and the \n * constructor `attrs` parameter. For every attribute, a getter is generated to retrieve the model property \n * from `this.attributes`, and a setter is created to set the model property in `this.attributes` and emit `change` \n * and `change:attribute` events.\n * @module\n * @extends Rasti.Emitter\n * @param {object} attrs Object containing model attributes to extend `this.attributes`. Getters and setters are generated for `this.attributtes`, in order to emit `change` events.\n * @example\n * import { Model } from 'rasti';\n * // Product model\n * class ProductModel extends Model {\n *     preinitialize() {\n *         // The Product model has `name` and `price` default attributes.\n *         // `defaults` will extend `this.attributes`.\n *         // Getters and setters are generated for `this.attributes`,\n *         // in order to emit `change` events.\n *         this.defaults = {\n *             name: '',\n *             price: 0\n *         };\n *     }\n *\n *     setDiscount(discountPercentage) {\n *         // Apply a discount to the price property.\n *         // This will call a setter that will update `price` in `this.attributes`,\n *         // and emit `change` and `change:price` events.\n *         const discount = this.price * (discountPercentage / 100);\n *         this.price -= discount;\n *     }\n * }\n * // Create a product instance with a name and price.\n * const product = new ProductModel({ name: 'Smartphone', price: 1000 });\n * // Listen to the `change:price` event.\n * product.on('change:price', () => console.log('New Price:', product.price));\n * // Apply a 10% discount to the product.\n * product.setDiscount(10); // Output: \"New Price: 900\"\n */\nvar Model = exports[\"default\"] = /*#__PURE__*/function (_Emitter) {\n  function Model() {\n    var _this;\n    var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _this = _Emitter.call(this) || this;\n    // Call preinitialize.\n    _this.preinitialize.apply(_this, arguments);\n    // attributes object.\n    _this.attributes = Object.assign({}, _this.defaults || {}, attrs);\n    // Previous attributes.\n    _this.previous = {};\n    // Generate getters/setters for every attr.\n    Object.keys(_this.attributes).forEach(_this.defineAttribute.bind(_this));\n    return _this;\n  }\n\n  /**\n   * If you define a preinitialize method, it will be invoked when the Model is first created, before any instantiation logic is run for the Model.\n   * @param {object} attrs Object containing model attributes to extend `this.attributes`.\n   */\n  _inheritsLoose(Model, _Emitter);\n  var _proto = Model.prototype;\n  _proto.preinitialize = function preinitialize() {}\n\n  /**\n   * Generate getter/setter for the given key. In order to emit `change` events.\n   * This method is called internally by the constructor\n   * for `this.attributes`.\n   * @param {string} key Attribute key.\n   */;\n  _proto.defineAttribute = function defineAttribute(key) {\n    var _this2 = this;\n    Object.defineProperty(this, key, {\n      get: function get() {\n        return _this2.get(key);\n      },\n      set: function set(value) {\n        _this2.set(key, value);\n      }\n    });\n  }\n\n  /**\n   * Get an attribute from `this.attributes`.\n   * This method is called internally by generated getters.\n   * @param {string} key Attribute key.\n   * @return {any} The attribute value.\n   */;\n  _proto.get = function get(key) {\n    return this.attributes[key];\n  }\n\n  /**\n   * Set an attribute into `this.attributes`.  \n   * Emit `change` and `change:attribute` if a value change.  \n   * Could be called in two forms, `this.set('key', value)` and\n   * `this.set({ key : value })`.  \n   * This method is called internally by generated setters.  \n   * The `change` event listener will receive the model instance, an object containing the changed attributes, and the rest of the arguments passed to `set` method.  \n   * The `change:attribute` event listener will receive the model instance, the new attribute value, and the rest of the arguments passed to `set` method.\n   * @param {string} key Attribute key or object containing keys/values.\n   * @param [value] Attribute value.\n   * @return {this} This model.\n   * @emits change\n   * @emits change:attribute\n   */;\n  _proto.set = function set(key, value) {\n    var _this3 = this;\n    var attrs, args;\n    // Handle both `\"key\", value` and `{key: value}` style arguments.\n    for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n      rest[_key - 2] = arguments[_key];\n    }\n    if (typeof key === 'object') {\n      attrs = key;\n      args = [value].concat(rest);\n    } else {\n      var _attrs;\n      attrs = (_attrs = {}, _attrs[key] = value, _attrs);\n      args = rest;\n    }\n    // Are we in a nested `set` call?\n    // Calling a `set` inside a `change:attribute` or `change` event listener\n    var changing = this._changing;\n    this._changing = true;\n    // Store changed attributes.\n    var changed = {};\n    // Store previous attributes.\n    if (!changing) {\n      this.previous = Object.assign({}, this.attributes);\n    }\n    // Set attributes.\n    Object.keys(attrs).forEach(function (key) {\n      // Use equality to determine if value changed.\n      if (attrs[key] !== _this3.attributes[key]) {\n        changed[key] = attrs[key];\n        _this3.attributes[key] = attrs[key];\n      }\n    });\n    var changedKeys = Object.keys(changed);\n    // Pending `change` event arguments.\n    if (changedKeys.length) this._pending = ['change', this, changed].concat(args);\n    // Emit `change:attribute` events.\n    changedKeys.forEach(function (key) {\n      _this3.emit.apply(_this3, [\"change:\" + key, _this3, attrs[key]].concat(args));\n    });\n    // Don't emit `change` event until the end of the nested \n    // `set` calls inside `change:attribute` event listeners.\n    if (changing) return this;\n    // Emit `change` events, that might be nested.\n    while (this._pending) {\n      var pendingChange = this._pending;\n      this._pending = null;\n      this.emit.apply(this, pendingChange);\n    }\n    // Reset flags.\n    this._pending = null;\n    this._changing = false;\n    return this;\n  }\n\n  /**\n   * Return object representation of the model to be used for JSON serialization.\n   * By default returns `this.attributes`.\n   * @return {object} Object representation of the model to be used for JSON serialization.\n   */;\n  _proto.toJSON = function toJSON() {\n    return this.attributes;\n  };\n  return Model;\n}(_Emitter2[\"default\"]);\n\n//# sourceURL=webpack://Rasti/./src/Model.js?");
-
-/***/ }),
-
-/***/ "./src/View.js":
-/*!*********************!*\
-  !*** ./src/View.js ***!
-  \*********************/
-/***/ ((__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 _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 unit of the user interface that can render the data from a specific model or multiple models.\n * However, views can also be independent and have no associated data.  \n * Models must be unaware of views. Views, on the other hand, may render model data and listen to the change events \n * emitted by the models to re-render themselves based on changes.  \n * Each `View` has a root element, `this.el`, which is used for event delegation.  \n * All element lookups are scoped to this element, and any rendering or DOM manipulations should be done inside it. \n * If `this.el` is not present, an element will be created using `this.tag` (defaulting to div) and `this.attributes`.\n * @module\n * @extends Rasti.Emitter\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 * import { View } from 'rasti';\n * \n * class Timer extends View {\n *     constructor(options) {\n *         super(options);\n *         // Create model to store internal state. Set `seconds` attribute into 0.\n *         this.model = new Model({ seconds : 0 });\n *         // Listen to changes in model `seconds` attribute and re render.\n *         this.model.on('change:seconds', this.render.bind(this));\n *         // Increment model `seconds` attribute every 1000 milliseconds.\n *         this.interval = setInterval(() => this.model.seconds++, 1000);\n *     }\n *\n *     template(model) {\n *         return `Seconds: <span>${model.seconds}</span>`;\n *     }\n * }\n * // Render view and append view's element into body.\n * document.body.appendChild(new Timer().render().el);\n */\nvar View = exports[\"default\"] = /*#__PURE__*/function (_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(_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  _inheritsLoose(View, _Emitter);\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   * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.\n   * @return {Rasti.View} Return `this` for chaining.\n   */;\n  _proto.destroy = function destroy() {\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    // Call onDestroy lifecycle method\n    this.onDestroy.apply(this, arguments);\n    // Return `this` for chaining.\n    return this;\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   * @param {object} options Options object or any arguments passed to `destroy` method.\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   * @return {Rasti.View} Return `this` for chaining.\n   */;\n  _proto.removeElement = function removeElement() {\n    this.el.parentNode.removeChild(this.el);\n    // Return `this` for chaining.\n    return this;\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.  \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`).  \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.   \n   * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.  \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 (_ref) {\n          var selector = _ref.selector,\n            listener = _ref.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` for chaining.\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 (_ref2) {\n      var type = _ref2.type,\n        listener = _ref2.listener;\n      _this3.el.removeEventListener(type, listener);\n    });\n    this.delegatedEventListeners = [];\n    // Return `this` for chaining.\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` for chaining.\n    return this;\n  };\n  return View;\n}(_Emitter2[\"default\"]);\n/*\n * Unique Id\n */\nView.uid = 0;\n\n//# sourceURL=webpack://Rasti/./src/View.js?");
-
-/***/ }),
-
-/***/ "./src/index.js":
-/*!**********************!*\
-  !*** ./src/index.js ***!
-  \**********************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-eval("\n\nexports.__esModule = true;\nvar _Emitter = _interopRequireDefault(__webpack_require__(/*! ./Emitter.js */ \"./src/Emitter.js\"));\nexports.Emitter = _Emitter[\"default\"];\nvar _Model = _interopRequireDefault(__webpack_require__(/*! ./Model.js */ \"./src/Model.js\"));\nexports.Model = _Model[\"default\"];\nvar _View = _interopRequireDefault(__webpack_require__(/*! ./View.js */ \"./src/View.js\"));\nexports.View = _View[\"default\"];\nvar _Component = _interopRequireDefault(__webpack_require__(/*! ./Component.js */ \"./src/Component.js\"));\nexports.Component = _Component[\"default\"];\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\n//# sourceURL=webpack://Rasti/./src/index.js?");
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module can't be inlined because the eval devtool is used.
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.js");
-/******/ 	
-/******/ 	return __webpack_exports__;
-/******/ })()
-;
-});
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Rasti = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * `Emitter` is a class that provides an easy way to implement the observer pattern 
+     * in your applications.  
+     * It can be extended to create new classes that have the ability to emit and bind custom named events.   
+     * Emitter is used by `Model` and `View` classes, which inherit from it to implement 
+     * event-driven functionality.
+     *
+     * @module
+     * @example
+     * import { Emitter } from 'rasti';
+     * // Custom cart
+     * class ShoppingCart extends Emitter {
+     *     constructor() {
+     *         super();
+     *         this.items = [];
+     *     }
+     *
+     *     addItem(item) {
+     *         this.items.push(item);
+     *         // Emit a custom event called `itemAdded`.
+     *         // Pass the added item as an argument to the event listener.
+     *         this.emit('itemAdded', item);
+     *     }
+     * }
+     * // Create an instance of ShoppingCart and Logger
+     * const cart = new ShoppingCart();
+     * // Listen to the `itemAdded` event and log the added item using the logger.
+     * cart.on('itemAdded', (item) => {
+     *     console.log(`Item added to cart: ${item.name} - Price: $${item.price}`);
+     * });
+     * // Simulate adding items to the cart
+     * const item1 = { name : 'Smartphone', price : 1000 };
+     * const item2 = { name : 'Headphones', price : 150 };
+     *
+     * cart.addItem(item1); // Output: "Item added to cart: Smartphone - Price: $1000"
+     * cart.addItem(item2); // Output: "Item added to cart: Headphones - Price: $150"
+     */
+    class Emitter {
+        /**
+         * Adds event listener.
+         * @param {string} type Type of the event (e.g. `change`).
+         * @param {function} listener Callback function to be called when the event is emitted.
+         * @example
+         * this.model.on('change', this.render.bind(this)); // Re render when model changes.
+         */
+        on(type, listener) {
+            // Validate listener.
+            if (typeof listener !== 'function') {
+                throw new TypeError('Listener must be a function');
+            }
+            // Create listeners object if it doesn't exist.
+            if (!this.listeners) this.listeners = {};
+            if (!this.listeners[type]) this.listeners[type] = [];
+            // Add listener.
+            this.listeners[type].push(listener);
+            // Return a function to remove the listener.
+            return () => this.off(type, listener);
+        }
+
+        /**
+         * Adds event listener that executes once.
+         * @param {string} type Type of the event (e.g. `change`).
+         * @param {function} listener Callback function to be called when the event is emitted.
+         * @example
+         * this.model.once('change', () => console.log('This will happen once'));
+         */
+        once(type, listener) {
+            // If listener is a function, wrap it to remove it after it is called.
+            if (typeof listener === 'function') {
+                const self = this;
+                const originalListener = listener;
+
+                listener = function(...args) {
+                    originalListener(...args);
+                    self.off(type, listener);
+                };
+            }
+            // Add listener.
+            return this.on(type, listener);
+        }
+
+        /**
+         * Removes event listeners.
+         * @param {string} [type] Type of the event (e.g. `change`). If is not provided, it removes all listeners.
+         * @param {function} [listener] Callback function to be called when the event is emitted. If listener is not provided, it removes all listeners for specified type.
+         * @example
+         * this.model.off('change'); // Stop listening to changes.
+         */
+        off(type, listener) {
+            // No listeners.
+            if (!this.listeners) return;
+            // No type provided, remove all listeners.
+            if (!type) {
+                delete this.listeners;
+                return;
+            }
+            // No listeners for specified type.
+            if (!this.listeners[type]) return;
+            // No listener provided, remove all listeners for specified type.
+            if (!listener) {
+                delete this.listeners[type];
+            } else {
+                // Remove specific listener.
+                this.listeners[type] = this.listeners[type].filter(fn => fn !== listener);
+                if (!this.listeners[type].length) delete this.listeners[type];
+            }
+            // Remove listeners object if it's empty.
+            if (!Object.keys(this.listeners).length) delete this.listeners;
+        }
+
+        /**
+         * Emits event of specified type. Listeners will receive specified arguments.
+         * @param {string} type Type of the event (e.g. `change`).
+         * @param {any} [...args] Arguments to be passed to listener.
+         * @example
+         * this.emit('invalid'); // Emit validation error event.
+         */
+        emit(type, ...args) {
+            // No listeners.
+            if (!this.listeners || !this.listeners[type]) return;
+            // Call listeners. Use `slice` to make a copy and prevent errors when 
+            // removing listeners inside a listener.
+            this.listeners[type]
+                .slice()
+                .forEach(function(fn) {
+                    fn(...args);
+                });
+        }
+    }
+
+    /*
+     * Evaluate the expression. If it's a function, call it with the provided context and return the result.
+     * Otherwise, return the expression as is.
+     * @param {any} expression Expression to be evaluated.
+     * @param {any} context Context to call the expression.
+     * @param {...any} args Arguments to pass to the expression.
+     * @return {any} The result of the expression.
+     */
+    var getResult = (expression, context, ...args) =>
+        typeof expression !== 'function' ? expression :
+            expression.apply(context, args);
+
+    /**
+     * - Orchestrates data and business logic.
+     * - Emits events when data changes.
+     * 
+     * A `Model` manages an internal table of data attributes and triggers change events when any of its data is modified.  
+     * Models may handle syncing data with a persistence layer. To design your models, create atomic, reusable objects 
+     * that contain all the necessary functions for manipulating their specific data.  
+     * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.  
+     * Rasti models store their attributes in `this.attributes`, which is extended from `this.defaults` and the 
+     * constructor `attrs` parameter. For every attribute, a getter is generated to retrieve the model property 
+     * from `this.attributes`, and a setter is created to set the model property in `this.attributes` and emit `change` 
+     * and `change:attribute` events.
+     * @module
+     * @extends Rasti.Emitter
+     * @param {object} attrs Object containing model attributes to extend `this.attributes`. Getters and setters are generated for `this.attributtes`, in order to emit `change` events.
+     * @property {object} defaults Object containing default attributes for the model. It will extend `this.attributes`. If a function is passed, it will be called to get the defaults. It will be bound to the model instance.
+     * @property {object} previous Object containing previous attributes when a change occurs.
+     * @example
+     * import { Model } from 'rasti';
+     * // Product model
+     * class ProductModel extends Model {
+     *     preinitialize() {
+     *         // The Product model has `name` and `price` default attributes.
+     *         // `defaults` will extend `this.attributes`.
+     *         // Getters and setters are generated for `this.attributes`,
+     *         // in order to emit `change` events.
+     *         this.defaults = {
+     *             name: '',
+     *             price: 0
+     *         };
+     *     }
+     *
+     *     setDiscount(discountPercentage) {
+     *         // Apply a discount to the price property.
+     *         // This will call a setter that will update `price` in `this.attributes`,
+     *         // and emit `change` and `change:price` events.
+     *         const discount = this.price * (discountPercentage / 100);
+     *         this.price -= discount;
+     *     }
+     * }
+     * // Create a product instance with a name and price.
+     * const product = new ProductModel({ name: 'Smartphone', price: 1000 });
+     * // Listen to the `change:price` event.
+     * product.on('change:price', () => console.log('New Price:', product.price));
+     * // Apply a 10% discount to the product.
+     * product.setDiscount(10); // Output: "New Price: 900"
+     */
+    class Model extends Emitter {
+        constructor(attrs = {}) {
+            super();
+            // Call preinitialize.
+            this.preinitialize.apply(this, arguments);
+            // Get defaults. If `this.defaults` is a function, call it.
+            const defaults = getResult(this.defaults, this) || {};
+            // Set attributes object with defaults and passed attributes.
+            this.attributes = Object.assign({}, defaults, attrs);
+            // Object to store previous attributes when a change occurs.
+            this.previous = {};
+            // Generate getters/setters for every attribute.
+            Object.keys(this.attributes).forEach(this.defineAttribute.bind(this));
+        }
+
+        /**
+         * If you define a preinitialize method, it will be invoked when the Model is first created, before any instantiation logic is run for the Model.
+         * @param {object} attrs Object containing model attributes to extend `this.attributes`.
+         */
+        preinitialize() {}
+
+        /**
+         * Generate getter/setter for the given key. In order to emit `change` events.
+         * This method is called internally by the constructor
+         * for `this.attributes`.
+         * @param {string} key Attribute key.
+         */
+        defineAttribute(key) {
+            Object.defineProperty(
+                this,
+                key, {
+                    get : () => this.get(key),
+                    set : (value) => { this.set(key, value); }
+                }
+            );
+        }
+
+        /**
+         * Get an attribute from `this.attributes`.
+         * This method is called internally by generated getters.
+         * @param {string} key Attribute key.
+         * @return {any} The attribute value.
+         */
+        get(key) {
+            return this.attributes[key];
+        }
+
+        /**
+         * Set an attribute into `this.attributes`.  
+         * Emit `change` and `change:attribute` if a value changes.  
+         * Could be called in two forms, `this.set('key', value)` and
+         * `this.set({ key : value })`.  
+         * This method is called internally by generated setters.  
+         * The `change` event listener will receive the model instance, an object containing the changed attributes, and the rest of the arguments passed to `set` method.  
+         * The `change:attribute` event listener will receive the model instance, the new attribute value, and the rest of the arguments passed to `set` method.
+         * @param {string} key Attribute key or object containing keys/values.
+         * @param [value] Attribute value.
+         * @return {this} This model.
+         * @emits change
+         * @emits change:attribute
+         */
+        set(key, value, ...rest) {
+            let attrs, args;
+            // Handle both `"key", value` and `{key: value}` style arguments.
+            if (typeof key === 'object') {
+                attrs = key;
+                args = [value, ...rest];
+            } else {
+                attrs = { [key] : value };
+                args = rest;
+            }
+            // Are we in a nested `set` call?
+            // Calling a `set` inside a `change:attribute` or `change` event listener
+            const changing = this._changing;
+            this._changing = true;
+            // Store changed attributes.
+            const changed = {};
+            // Store previous attributes.
+            if (!changing) {
+                this.previous = Object.assign({}, this.attributes);
+            }
+            // Set attributes.
+            Object.keys(attrs).forEach(key => {
+                // Use equality to determine if value changed.
+                if (attrs[key] !== this.attributes[key]) {
+                    changed[key] = attrs[key];
+                    this.attributes[key] = attrs[key];
+                }
+            });
+
+            const changedKeys = Object.keys(changed);
+            // Pending `change` event arguments.
+            if (changedKeys.length) this._pending = ['change', this, changed, ...args];
+            // Emit `change:attribute` events.
+            changedKeys.forEach(key => {
+                this.emit(`change:${key}`, this, attrs[key], ...args);
+            });
+            // Don't emit `change` event until the end of the nested 
+            // `set` calls inside `change:attribute` event listeners.
+            if (changing) return this;
+            // Emit `change` events, that might be nested.
+            while (this._pending) {
+                const pendingChange = this._pending;
+                this._pending = null;
+                this.emit.apply(this, pendingChange);
+            }
+            // Reset flags.
+            this._pending = null;
+            this._changing = false;
+
+            return this;
+        }
+
+        /**
+         * Return object representation of the model to be used for JSON serialization.
+         * By default returns a copy of `this.attributes`.
+         * @return {object} Object representation of the model to be used for JSON serialization.
+         */
+        toJSON() {
+            return Object.assign({}, this.attributes);
+        }
+    }
+
+    /*
+     * These option keys will be extended on the view instance.
+     */
+    const viewOptions = {
+        el : true,
+        tag : true,
+        attributes : true,
+        events : true,
+        model : true,
+        template : true,
+        onDestroy : true
+    };
+
+    /**
+     * - Listens for changes and renders UI.
+     * - Handles user input and interactivity.
+     * - Sends captured input to the model.
+     *
+     * A `View` is an atomic unit of the user interface that can render data from a specific model or multiple models.
+     * However, views can also be independent and have no associated data.  
+     * Models must be unaware of views. Views, on the other hand, may render model data and listen to the change events 
+     * emitted by the models to re-render themselves based on changes.  
+     * Each `View` has a root element, `this.el`, which is used for event delegation.  
+     * All element lookups are scoped to this element, and any rendering or DOM manipulations should be done inside it. 
+     * If `this.el` is not present, an element will be created using `this.tag` (defaulting to div) and `this.attributes`.
+     * @module
+     * @extends Rasti.Emitter
+     * @param {object} options Object containing options. The following keys will be merged to `this`: el, tag, attributes, events, model, template, onDestroy.
+     * @property {node} el Every view has a root element, `this.el`. If not present it will be created. If a function is passed, it will be called to get the element. It will be bound to the view instance.
+     * @property {string} tag If `this.el` is not present, an element will be created using `this.tag`. Default is `div`. If a function is passed, it will be called to get the tag name. It will be bound to the view instance.
+     * @property {object} attributes If `this.el` is not present, an element will be created using `this.attributes`. If a function is passed, it will be called to get the attributes. It will be bound to the view instance.
+     * @property {object} events Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element. If a function is passed, it will be called to get the events. It will be bound to the view instance.
+     * @property {object} model A `Rasti.Model` or any object containing data and business logic.
+     * @property {function} template A function that receives data and returns a markup string (e.g., HTML).
+     * @example
+     * import { View } from 'rasti';
+     * 
+     * class Timer extends View {
+     *     constructor(options) {
+     *         super(options);
+     *         // Create model to store internal state. Set `seconds` attribute to 0.
+     *         this.model = new Model({ seconds : 0 });
+     *         // Listen to changes in model `seconds` attribute and re-render.
+     *         this.model.on('change:seconds', this.render.bind(this));
+     *         // Increment model `seconds` attribute every 1000 milliseconds.
+     *         this.interval = setInterval(() => this.model.seconds++, 1000);
+     *     }
+     *
+     *     template(model) {
+     *         return `Seconds: <span>${model.seconds}</span>`;
+     *     }
+     * }
+     * // Render view and append view's element into the body.
+     * document.body.appendChild(new Timer().render().el);
+     */
+    class View extends Emitter {
+        constructor(options = {}) {
+            super();
+            // Call preinitialize.
+            this.preinitialize.apply(this, arguments);
+            // Generate unique id.
+            // Useful to generate element ids.
+            this.uid = `uid${++View.uid}`;
+            // Store delegated event listeners,
+            // so they can be unbound later.
+            this.delegatedEventListeners = [];
+            // Store child views,
+            // so they can be destroyed.
+            this.children = [];
+            // Mutable array to store handlers to be called on destroy.
+            this.destroyQueue = [];
+            // Extend "this" with options, mapping viewOptions keys.
+            Object.keys(options).forEach(key => {
+                if (viewOptions[key]) this[key] = options[key];
+            });
+            // Ensure that the view has a root element at `this.el`.
+            this.ensureElement();
+        }
+
+        /**
+         * If you define a preinitialize method, it will be invoked when the view is first created, before any instantiation logic is run.
+         * @param {object} attrs Object containing model attributes to extend `this.attributes`.
+         */
+        preinitialize() {}
+
+        /**
+         * Returns the first element that matches the selector, 
+         * scoped to DOM elements within the current view's root element (`this.el`).
+         * @param {string} selector CSS selector.
+         * @return {node} Element matching selector within the view's root element (`this.el`).
+         */
+        $(selector) {
+            return this.el.querySelector(selector);
+        }
+
+        /**
+         * Returns a list of elements that match the selector, 
+         * scoped to DOM elements within the current view's root element (`this.el`).
+         * @param {string} selector CSS selector.
+         * @return {node[]} List of elements matching selector within the view's root element (`this.el`).
+         */
+        $$(selector) {
+            return this.el.querySelectorAll(selector);
+        }
+
+        /**
+         * Destroy the view.
+         * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.
+         * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.
+         * @return {Rasti.View} Return `this` for chaining.
+         */
+        destroy() {
+            // Call destroy on children.
+            this.destroyChildren();
+            // Undelegate `this.el` event listeners
+            this.undelegateEvents();
+            // Unbind `this` events.
+            this.off();
+            // Call destroy queue.
+            this.destroyQueue.forEach(fn => fn());
+            this.destroyQueue = [];
+            // Call onDestroy lifecycle method
+            this.onDestroy.apply(this, arguments);
+            // Return `this` for chaining.
+            return this;
+        }
+
+        /**
+         * `onDestroy` lifecycle method is called after the view is destroyed.
+         * Override with your code. Useful to stop listening to model's events.
+         * @param {object} options Options object or any arguments passed to `destroy` method.
+         */
+        onDestroy() {}
+
+        /**
+         * Add a view as a child.
+         * Children views are stored at `this.children`, and destroyed when the parent is destroyed.
+         * Returns the child for chaining.
+         * @param {Rasti.View} child
+         * @return {Rasti.View}
+         */
+        addChild(child) {
+            this.children.push(child);
+            return child;
+        }
+
+        /**
+         * Call destroy method on children views.
+         */
+        destroyChildren() {
+            this.children.forEach(child => child.destroy());
+            this.children = [];
+        }
+
+        /**
+         * Ensure that the view has a root element at `this.el`.
+         * You shouldn't call this method directly. It's called from the constructor.
+         * You may override it if you want to use a different logic or to 
+         * postpone element creation.
+         */ 
+        ensureElement() {
+            // Element is already present.
+            if (this.el) {
+                // If "this.el" is a function, call it to get the element.
+                this.el = getResult(this.el, this);
+            } else {
+                // If "this.el" is not present,
+                // create a new element according "this.tag"
+                // and "this.attributes".
+                const tag = getResult(this.tag, this);
+                const attrs = getResult(this.attributes, this);
+                this.el = this.createElement(tag, attrs);
+            }
+            // Delegate events on element.
+            this.delegateEvents();
+        }
+
+        /**
+         * Create an element.
+         * Called from the constructor if `this.el` is undefined, to ensure
+         * the view has a root element.
+         * @param {string} tag Tag for the element. Default to `div`
+         * @param {object} attrs Attributes for the element.
+         * @return {node} The created element.
+         */
+        createElement(tag = 'div', attrs = {}) {
+            // Create DOM element.
+            let el = document.createElement(tag);
+            // Add element attributes.
+            Object.keys(attrs)
+                .forEach(key => el.setAttribute(key, attrs[key]));
+
+            return el;
+        }
+
+        /**
+         * Remove `this.el` from the DOM.
+         * @return {Rasti.View} Return `this` for chaining.
+         */
+        removeElement() {
+            this.el.parentNode.removeChild(this.el);
+            // Return `this` for chaining.
+            return this;
+        }
+
+        /**
+         * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, 
+         * uses `this.events` as the source.  
+         * 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.
+         * Omitting the selector causes the event to be bound to the view's root element (`this.el`).  
+         * By default, `delegateEvents` is called within the View's constructor, 
+         * 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.   
+         * All attached listeners are bound to the view automatically, so when the listeners are invoked, 
+         * `this` continues to refer to the view object.  
+         * When `delegateEvents` is run again, perhaps with a different events hash, all listeners 
+         * are removed and delegated afresh.
+         * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.
+         * @return {Rasti.View} Return `this` for chaining.
+         * @example
+         * MyView.prototype.events = {
+         *      'click button.ok' : 'onClickOkButton',
+         *      'click button.cancel' : function() {}
+         * };
+         */
+        delegateEvents(events) {
+            if (!events) events = getResult(this.events, this);
+            if (!events) return this;
+
+            if (this.delegatedEventListeners.length) this.undelegateEvents();
+
+            // Store events by type i.e.: "click", "submit", etc.
+            let eventTypes = {};
+
+            Object.keys(events).forEach(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' ?
+                        this[listener] :
+                        listener
+                ).bind(this);
+
+                if (!eventTypes[type]) eventTypes[type] = [];
+
+                eventTypes[type].push({ selector, listener });
+            });
+
+            Object.keys(eventTypes).forEach(type => {
+                // 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);
+                    });
+                };
+
+                this.delegatedEventListeners.push({ type, listener : typeListener });
+                this.el.addEventListener(type, typeListener);
+            });
+            // Return `this` for chaining.
+            return this;
+        }
+
+        /**
+         * 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.
+         * @return {Rasti.View} Return `this` for chaining.
+         */
+        undelegateEvents() {
+            this.delegatedEventListeners.forEach(({ type, listener }) => {
+                this.el.removeEventListener(type, listener);
+            });
+
+            this.delegatedEventListeners = [];
+            // Return `this` for chaining.
+            return this;
+        }
+
+        /**
+         * Renders the view.
+         * This method should be overridden with custom logic.
+         * The convention is to only manipulate the DOM within the scope of `this.el`,
+         * and to return `this` for chaining.
+         * If you add any child views, you must call `this.destroyChildren`.
+         * The default implementation sets the innerHTML of `this.el` with the result
+         * of calling `this.template`, passing `this.model` as an argument.
+         * <br><br> &#9888; **Security Notice:** The default implementation utilizes `innerHTML` on the root element
+         * for rendering, which may introduce Cross - Site Scripting (XSS) risks. Ensure that any user-generated 
+         * content is properly sanitized before inserting it into the DOM. For best practices on secure data handling, 
+         * refer to the [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html).<br><br>
+         * @return {Rasti.View} Return `this` for chaining.
+         */
+        render() {
+            if (this.template) this.el.innerHTML = this.template(this.model);
+            // Return `this` for chaining.
+            return this;
+        }
+    }
+
+    /*
+     * Unique Id
+     */
+    View.uid = 0;
+
+    /*
+     * Same as getResult, but pass context as argument to the expression.
+     * Used to evaluate expressions in the context of a component.
+     * @param {any} expression The expression to be evaluated.
+     * @param {any} context The context to call the expression with.
+     * @return {any} The result of the evaluated expression.
+     */
+    const renderExpression = (expression, context) => getResult(expression, context, context);
+
+    /*
+     * Generate string with placeholders for interpolated expressions.
+     * @param strings {array} Array of strings.
+     * @param expressions {array} Array of expressions.
+     * @return {string} String with placeholders.
+     */
+    const addPlaceholders = (strings, expressions) => 
+        strings.reduce((out, string, i) => {
+            // Add string part.
+            out.push(string);
+            // Add expression placeholders.
+            if (typeof expressions[i] !== 'undefined') {
+                out.push(Component.PLACEHOLDER_EXPRESSION(i));
+            }
+            return out;
+        }, []).join('');
+
+    /*
+     * Generate one dimensional array with strings and expressions.
+     * @param main {string} The main template containing placeholders.
+     * @param expressions {array} Array of expressions to replace placeholders.
+     * @return {array} Array containing strings and expressions.
+     */
+    const splitPlaceholders = (main, expressions) => {
+        const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
+        const regExp = new RegExp(`${PH}`, 'g');
+        const out = [];
+        let lastIndex = 0;
+        let match;
+        // Generate one dimensional array with strings and expressions, 
+        // so all the components are added as children by the parent component.
+        while ((match = regExp.exec(main)) !== null) {
+            const before = main.slice(lastIndex, match.index);
+            out.push(before, expressions[match[1]]);
+            lastIndex = match.index + match[0].length;
+        }
+        out.push(main.slice(lastIndex));
+
+        return out;
+    };
+
+    /*
+     * Expand attributes.
+     * @param attributes {array} Array of attributes as key, value pairs.
+     * @param renderExpression {function} Function to render expressions.
+     * @return {object}
+     * @property {object} all All attributes.
+     * @property {object} events Event listeners.
+     * @property {object} attributes Attributes.
+     */
+    const expandAttributes = (attributes, renderExpression) => {
+        const out = attributes.reduce((out, pair) => {
+            const attribute = renderExpression(pair[0]);
+            // Attribute without value. 
+            if (pair.length === 1) {
+                if (typeof attribute === 'object') {
+                    // Expand objects as attributes.
+                    out.all = Object.assign(out.all, attribute);
+                } else if (typeof attribute === 'string') {
+                    // Treat as boolean.
+                    out.all[attribute] = true;
+                }
+            } else {
+                // Attribute with value.
+                const value = renderExpression(pair[1]);
+                out.all[attribute] = value;
+            }
+
+            return out;
+        }, { all : {}, events : {}, attributes : {} });
+
+        Object.keys(out.all).forEach(key => {
+            // Check if key is an event listener.
+            const match = key.match(/on(([A-Z]{1}[a-z]+)+)/);
+            if (match && match[1]) {
+                // Add event listener.
+                out.events[match[1].toLowerCase()] = out.all[key];
+            } else {
+                // Add attribute.
+                out.attributes[key] = out.all[key];
+            }
+        });
+
+        return out;
+    };
+
+    /*
+     * Replace component tags with expressions.
+     * `<${Component} />` or `<${Component}></${Component}>` will be replaced 
+     * by a function that mounts the component.
+     * Returns the template with component tags replaced by expressions placeholders 
+     * modifies the expressions array adding the mount functions.
+     * @param main {string} The main template.
+     * @return {string} The template with components tags replaced by expressions
+     * placeholders.
+     */
+    const expandComponents = (main, expressions) => {
+        const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
+        // Match component tags.
+        return main.replace(
+            new RegExp(`<(${PH})([^>]*)>([\\s\\S]*?)</(${PH})>|<(${PH})([^>]*)/>`,'g'),
+            function() {
+                const { tag, attributes, inner, close, raw } = parseMatch(arguments, expressions);
+                // No component found.
+                if (!(tag.prototype instanceof Component)) return raw;
+
+                let renderChildren;
+                // Non void component.
+                if (close) {
+                    // Close component tag must match open component tag.
+                    if (tag !== close) return raw;
+                    // Recursively expand inner components.
+                    const list = splitPlaceholders(expandComponents(inner, expressions), expressions);
+                    // Create renderChildren function.
+                    renderChildren = function() {
+                        return list.map(item => renderExpression(item, this)).flat();
+                    };
+                }
+                // Create mount function.
+                const mount = function() {
+                    const options = expandAttributes(attributes, value => renderExpression(value, this)).all;
+                    // Add renderChildren function to options.
+                    if (renderChildren) options.renderChildren = renderChildren.bind(this);
+                    // Mount component.
+                    return tag.mount(options);
+                };
+                // Add mount function to expression.
+                expressions.push(mount);
+                // Replace whole string with expression placeholder.
+                return Component.PLACEHOLDER_EXPRESSION(expressions.length - 1);
+            }
+        );
+    };
+
+    /*
+     * Parse match data to get tag, attributes, inner html and close tag.
+     * @param match {array}
+     * @return {object}
+     * @property {string} tag The tag.
+     * @property {string} inner The inner html.
+     * @property {string} close The closing tag.
+     * @property {array} attributes Array of attributes as key, value pairs.
+     * @property {string} raw The whole match.
+     */
+    const parseMatch = (match, expressions) => {
+        const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
+
+        const [all, openTag, openIdx, nonVoidAttrs, inner, closeTag, closeIdx,
+            selfClosingTag, selfClosingIdx, selfClosingAttrs] = match;
+
+        const data = { raw : all, attributes : [] };
+
+        let attributesStr;
+        if (openTag) {
+            // Non void element.
+            data.tag = typeof openIdx !== 'undefined' ? expressions[openIdx] : openTag;
+            data.inner = inner;
+            data.close = typeof closeIdx !== 'undefined' ? expressions[closeIdx] : closeTag;
+            attributesStr = nonVoidAttrs;
+        } else {
+            // Self closing element.
+            data.tag = typeof selfClosingIdx !== 'undefined' ? expressions[selfClosingIdx] : selfClosingTag;
+            attributesStr = selfClosingAttrs;
+        }
+        // Parse attributes.
+        const regExp = new RegExp(`(${PH}|[\\w-]+)(?:=(["']?)(?:${PH}|((?:.?(?!["']?\\s+(?:\\S+)=|\\s*/?[>"']))+.))\\3)?`, 'g');
+
+        let attributeMatch;
+        while ((attributeMatch = regExp.exec(attributesStr)) !== null) {
+            const [, attribute, attributeIdx,, valueIdx, value] = attributeMatch;
+
+            const attr = typeof attributeIdx !== 'undefined' ? expressions[attributeIdx] : attribute;
+            const val = typeof valueIdx !== 'undefined' ? expressions[valueIdx] : value;
+
+            if (typeof val !== 'undefined') {
+                data.attributes.push([attr, val]);
+            } else {
+                data.attributes.push([attr]);
+            }
+        }
+
+        return data;
+    };
+
+    /*
+     * These option keys will be extended on the component instance.
+     */
+    const componentOptions = {
+        key : true,
+        state : true,
+        onCreate : true,
+        onChange : true,
+        onRender : true
+    };
+
+    /*
+     * HTML tags that are self closing.
+     */
+    const selfClosingTags = {
+        area : true, base : true, br : true, col : true, embed : true, hr : true, 
+        img : true, input : true, link : true, meta : true, source : true, track : true, wbr : true
+    };
+
+    /**
+     * Components are a special kind of `View` that is designed to be easily composable, 
+     * making it simple to add child views and build complex user interfaces.  
+     * Unlike views, which are render-agnostic, components have a specific set of rendering 
+     * guidelines that allow for a more declarative development style.  
+     * Components are defined with the `create` static method, which takes a tagged template.
+     * @module
+     * @extends Rasti.View
+     * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.
+     * @property {string} key A unique key to identify the component. Used to recycle child components.
+     * @property {object} model A `Rasti.Model` or any emitter object containing data and business logic. The component will listen to `change` events and call `onChange` lifecycle method.
+     * @property {object} state A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state. The component will listen to `change` events and call `onChange` lifecycle method.
+     * @example
+     * import { Component, Model } from 'rasti';
+     * // Create Timer component.
+     * const Timer = Component.create`
+     *     <div>
+     *         Seconds: <span>${({ model }) => model.seconds}</span>
+     *     </div>
+     * `;
+     * // Create model to store seconds.
+     * const model = new Model({ seconds: 0 });
+     * // Mount timer on body.
+     * Timer.mount({ model }, document.body);
+     * // Increment `model.seconds` every second.
+     * setInterval(() => model.seconds++, 1000);
+     */
+    class Component extends View {
+        constructor(options = {}) {
+            super(...arguments);
+            // Extend "this" with options, mapping componentOptions keys.
+            Object.keys(options).forEach(key => {
+                if (componentOptions[key]) this[key] = options[key];
+            });
+            // Store options by default.
+            this.options = options;
+            // Call lifecycle method.
+            this.onCreate.apply(this, arguments);
+        }
+
+        /**
+         * Listen to `change` event on a model or emitter object and call `onChange` lifecycle method.
+         * The listener will be removed when the component is destroyed.
+         * By default the component will be subscribed to `this.model` and `this.state`.
+         * @param {Rasti.Model} model A model or emitter object to listen to changes.
+         * @return {Rasti.Component} The component instance.
+         */
+        subscribe(model) {
+            // Check if model has `on` method.
+            if (!model.on) return;
+            // Store bound onChange method.
+            const onChange = this.onChange.bind(this);
+            // Listen to model changes and store unbind function.
+            const off = model.on('change', onChange);
+            // Add unbind function to destroy queue.
+            // So the component stops listening to model changes when destroyed.
+            this.destroyQueue.push(
+                // Rasti `on` method returns an unbind function.
+                // But other libraries may return the object itself.
+                typeof off === 'function' ? off : () => model.off('change', onChange)
+            );
+
+            return this;
+        }
+
+        /*
+         * Tell if component is a container.
+         * In which case, it will not have an element by itself.
+         * It will render a single expression which is expected to return a single component as child.
+         * `this.el` will be a reference to that child component's element.
+         * @return {boolean}
+         */
+        isContainer() {
+            return !!(!this.tag && this.template);
+        }
+
+        /*
+         * Override. We don't want to ensure an element on instantiation.
+         * We will provide it later.
+         */
+        ensureElement() {
+            // If el is provided, delegate events.
+            if (this.el) {
+                // If "this.el" is a function, call it to get the element.
+                this.el = getResult(this.el, this);
+                this.delegateEvents();
+            }
+        }
+
+        /*
+         * Find view's element on parent node, using its data attribute.
+         * @param parent {node} The parent node.
+         * @return {node} The component's element.
+         */
+        findElement(parent) {
+            return (parent || document).querySelector(`[${Component.DATA_ATTRIBUTE_UID}="${this.uid}"]`);
+        }
+
+        /*
+         * Eval attributes expressions.
+         * @return {object} Object containing add, remove and html properties.
+         */
+        getAttributes() {
+            const add = {};
+            const remove = {};
+            const html = [];
+
+            const attributes = { [Component.DATA_ATTRIBUTE_UID] : this.uid };
+
+            if (this.attributes) Object.assign(attributes, getResult(this.attributes, this));
+
+            Object.keys(attributes).forEach(key => {
+                // Evaluate attribute value.
+                let value = attributes[key];
+                // Transform bool attribute values
+                if (value === false) {
+                    remove[key] = true;
+                } else if (value === true) {
+                    add[key] = '';
+                    html.push(key);
+                } else {
+                    if (value === null || typeof value === 'undefined') value = '';
+
+                    add[key] = value;
+                    html.push(`${key}="${value}"`);
+                }
+            });
+
+            return { add, remove, html : html.join(' ') };
+        }
+
+        /*
+         * Used internally on the render process.
+         * Attach the view to the dom element.
+         * @param parent {node} The parent node.
+         * @return {Rasti.Component} The component instance.
+         */
+        hydrate(parent) {
+            // Listen to model changes and call onChange.
+            if (this.model) this.subscribe(this.model);
+            // Listen to state changes and call onChange.
+            if (this.state) this.subscribe(this.state);
+
+            if (!this.isContainer()) {
+                this.el = this.findElement(parent);
+                this.delegateEvents();
+                this.children.forEach(child => child.hydrate(this.el));
+            } else {
+                this.children[0].hydrate(parent);
+                this.el = this.children[0].el;
+            }
+            // Call `onRender` lifecycle method.
+            this.onRender.call(this, Component.RENDER_TYPE_HYDRATE);
+            // Return `this` for chaining.
+            return this;
+        }
+
+        /*
+         * Used internally in the render process.
+         * Reuse a view that has `key` when its parent is rendered.
+         * @param parent {node} The parent node.
+         * @return {Rasti.Component} The component instance.
+         */
+        recycle(parent) {
+            // If component is a container, call recycle on its child.
+            if (this.isContainer()) return this.children[0].recycle(parent);
+            // Find placeholder element to be replaced. It has same data attribute as this component.
+            const toBeReplaced = this.findElement(parent);
+            // Replace it with this.el.
+            toBeReplaced.replaceWith(this.el);
+            // Call `onRender` lifecycle method.
+            this.onRender.call(this, Component.RENDER_TYPE_RECYCLE);
+            // Return `this` for chaining.
+            return this;
+        }
+
+        /*
+         * Override. Add some custom logic to super `destroy` method.
+         * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.
+         */
+        destroy() {
+            super.destroy.apply(this, arguments);
+            // Set destroyed flag to prevent a last render after destroyed.
+            this.destroyed = true;
+            // Return `this` for chaining.
+            return this;
+        }
+
+        /**
+         * Lifecycle method. Called when the view is created, at the end of the `constructor`.
+         * @param options {object} The view options.
+         */
+        onCreate() {}
+
+        /**
+         * Lifecycle method. Called when model emits `change` event.
+         * By default calls `render` method.
+         * This method can be extended with custom logic.
+         * Maybe comparing new attributes with previous ones and calling
+         * render when needed.
+         * @param model {Rasti.Model} The model that emitted the event.
+         * @param changed {object} Object containing keys and values that has changed.
+         * @param [...args] {any} Any extra arguments passed to set method.
+         */
+        onChange() {
+            this.render();
+        }
+
+        /**
+         * Lifecycle method. Called when the view is rendered.
+         * @param type {string} The render type. Can be `render`, `hydrate` or `recycle`.
+         */
+        onRender() {}
+
+        /**
+         * Lifecycle method. Called when the view is destroyed.
+         * @param {object} options Options object or any arguments passed to `destroy` method.
+         */
+        onDestroy() {}
+
+        /**
+         * Tagged template helper method.
+         * Used to create a partial template.
+         * It will return a one-dimensional array with strings and expressions.
+         * @param {TemplateStringsArray} strings - Template strings.
+         * @param  {...any} expressions - Template expressions.
+         * @return {Array} Array containing strings and expressions.
+         * @example
+         * import { Component } from 'rasti';
+         * // Create a Title component.
+         * const Title = Component.create`
+         *     <h1>${self => self.renderChildren()}</h1>
+         * `;
+         * // Create Main component.
+         * const Main = Component.create`
+         *     <main>
+         *         ${self => self.renderHeader()}
+         *     </main>
+         * `.extend({
+         *     // Render header method.
+         *     // Use `partial` to render an HTML template adding children components.
+         *     renderHeader() {
+         *         return this.partial`
+         *             <header>
+         *                 <${Title}>${self => self.model.title}</${Title}>
+         *             </header>
+         *         `;
+         *     }
+         * });
+         */
+        partial(strings, ...expressions) {
+            return splitPlaceholders(
+                expandComponents(
+                    addPlaceholders(strings, expressions), expressions
+                ), expressions
+            ).map(item => {
+                return renderExpression(item, this);
+            }).flat();
+        }
+
+        getRecyclePlaceholder() {
+            if (this.isContainer()) return this.children[0].getRecyclePlaceholder();
+            
+            const tag = getResult(this.tag, this) || 'div';
+            const attributes = `${Component.DATA_ATTRIBUTE_UID}="${this.uid}"`;
+
+            return this.template || !selfClosingTags[tag] ?
+                `<${tag} ${attributes}></${tag}>` :
+                `<${tag} ${attributes} />`;
+        }
+
+        /*
+         * Treat the whole view as a HTML string.
+         */
+        toString() {
+            // Normally there won't be any children, but if there are, destroy them.
+            this.destroyChildren();
+            // Container.
+            if (this.isContainer()) return this.template.call(this, this.addChild.bind(this));
+            // Get tag name.
+            const tag = getResult(this.tag, this) || 'div';
+            // Get attributes.
+            const attributes = this.getAttributes().html;
+            // Replace expressions of inner template.
+            const inner = this.template ? this.template.call(this, this.addChild.bind(this)) : '';
+            // Generate outer template.
+            return this.template || !selfClosingTags[tag] ?
+                `<${tag} ${attributes}>${inner}</${tag}>` :
+                `<${tag} ${attributes} />`;
+        }
+
+        /*
+         * View render method.
+         */
+        render() {
+            // Prevent a last re render if view is already destroyed.
+            if (this.destroyed) return this;
+
+            if (!this.isContainer()) {
+                // If `this.el` is not present, render the view as a string and hydrate it.
+                if (!this.el) {
+                    const fragment = this.createElement('template');
+                    fragment.innerHTML = this;
+                    this.hydrate(fragment.content);
+                    return this;
+                }
+                // Set `this.el` attributes.
+                const attributes = this.getAttributes();
+                // Remove attributes.
+                Object.keys(attributes.remove).forEach(key => {
+                    this.el.removeAttribute(key);
+                });
+                // Add attributes.
+                Object.keys(attributes.add).forEach(key => {
+                    this.el.setAttribute(key, attributes.add[key]);
+                });
+            }
+            // Check for `template` to see if view has innerHTML.
+            if (this.template) {
+                // Store active element.
+                const activeElement = document.activeElement;
+
+                const nextChildren = [];
+                const recycledChildren = [];
+
+                const previousChildren = this.children;
+                this.children = [];
+                // Replace expressions. Set html inside of `this.el`.
+                const inner = this.template.call(this, component => {
+                    let out = component;
+                    // Check if child already exists.
+                    const found = component.key && previousChildren.find(
+                        previousChild => previousChild.key === component.key
+                    );
+
+                    if (found) {
+                        // If child already exists, replace it html by its root element.
+                        out = found.getRecyclePlaceholder();
+                        // Add child to recycled children.
+                        recycledChildren.push(found);
+                        // Destroy new child component. Use recycled one instead.
+                        component.destroy();
+                    } else {
+                        // Not found. Add new child component.
+                        nextChildren.push(component);
+                    }
+                    // Component html.
+                    return out;
+                });
+
+                if (this.isContainer()) {
+                    if (nextChildren[0]) {
+                        const fragment = this.createElement('template');
+                        fragment.innerHTML = inner;
+                        // Add new child to dom fragment and hydrate it.
+                        this.addChild(nextChildren[0]).hydrate(fragment.content);
+                        // Get next child element.
+                        const nextEl = fragment.content.children[0];
+                        // If `this.el` is present, replace it with nextEl.
+                        if (this.el) this.el.replaceWith(nextEl);
+                        // Set `this.el` to nextEl.
+                        this.el = nextEl;
+                    } else if (recycledChildren[0]) {
+                        this.addChild(recycledChildren[0]);
+                    } else {
+                        throw new Error('Container component must have a child component');
+                    }
+                } else {
+                    this.el.innerHTML = inner;
+                    // Add new children. Hydrate them.
+                    nextChildren.forEach(nextChild => {
+                        this.addChild(nextChild).hydrate(this.el);
+                    });
+                    // Replace children root elements with recycled components.
+                    recycledChildren.forEach(recycledChild => {
+                        this.addChild(recycledChild).recycle(this.el);
+                    });
+                }
+                // Destroy unused children.
+                previousChildren.forEach(previousChild => {
+                    const found = recycledChildren.indexOf(previousChild) > -1;
+                    if (!found) previousChild.destroy();
+                });
+                // Restore focus.
+                if (this.el.contains(activeElement)) {
+                    activeElement.focus();
+                }
+            }
+            // Call onRender lifecycle method.
+            this.onRender.call(this, Component.RENDER_TYPE_RENDER);
+            // Return this for chaining.
+            return this;
+        }
+
+        /**
+         * Helper method used to extend a `Component`, creating a subclass.
+         * @static
+         * @param {object} object Object containing methods to be added to the new `Component` subclass. Also can be a function that receives the parent prototype and returns an object.
+         */
+        static extend(object) {
+            const Current = this;
+
+            class Component extends Current {}
+
+            Object.assign(
+                Component.prototype,
+                typeof object === 'function' ? object(Current.prototype) : object
+            );
+
+            return Component;
+        }
+
+        /**
+         * Mount the component into the dom.
+         * It instantiate the Component view using options, 
+         * appends its element into the DOM (if `el` is provided).
+         * And returns the view instance.
+         * <br><br> &#9888; **Security Notice:** `Component` utilizes `innerHTML` on a document fragment for rendering, which may introduce Cross - Site Scripting (XSS) risks. Ensure that any user-generated content is properly sanitized before inserting it into the DOM. For best practices on secure data handling, refer to the [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html).<br><br>
+         * @static
+         * @param {object} options The view options.
+         * @param {node} el Dom element to append the view element.
+         * @param {boolean} hydrate If true, the view will hydrate existing DOM.
+         * @return {Rasti.Component}
+         */
+        static mount(options, el, hydrate) {
+            // Instantiate view.
+            const view = new this(options);
+            // If `el` is passed, mount component.
+            if (el) {
+                if (hydrate) {
+                    // Hydrate existing DOM.
+                    view.toString();
+                    view.hydrate(el);
+                } else {
+                    // Append element to the DOM.
+                    el.appendChild(view.render().el);
+                }
+            }
+            // Return view instance.
+            return view;
+        }
+
+        /**
+         * Takes a tagged template containing an HTML string, 
+         * and returns a new `Component` class.
+         * - The template outer tag and attributes will be used to create the view's root element.
+         * - Boolean attributes should be passed in the form of `attribute="${() => true}"`.
+         * - Event handlers should be passed, at the root element, in the form of `onEventName=${{'selector' : listener }}`. Where `selector` is a CSS selector. The event will be delegated to the view's root element.
+         * - The template inner HTML will be used as the view's template.
+         * - Template interpolations that are functions will be evaluated during the render process, receiving the view instance as an argument and being bound to it.
+         * - If the function returns `null`, `undefined`, `false`, or an empty string, the interpolation won't render any content.
+         * - If the function returns a component instance, it will be added as a child component.
+         * - If the function returns an array, each item will be evaluated as above.
+         * - If the tagged template contains only one expression that mounts a component, or the tags are references to a component, the component will be considered a <b>container</b>. It will render a single component as a child. `this.el` will be a reference to that child component's element.
+         * @static
+         * @param {string|function} strings - HTML template for the component or a function that mounts a sub component.
+         * @param {...*} expressions - The expressions to be interpolated within the template.
+         * @return {Rasti.Component} The newly created component class.
+         * @example
+         * import { Component } from 'rasti';
+         * // Create a button component.
+         * const Button = Component.create`
+         *     <button class="${({ options }) => options.className}">
+         *         ${self => self.renderChildren()}
+         *     </button>
+         * `;
+         * // Create a container using the button component
+         * const ButtonOk = Component.create`
+         *     <${Button} className="ok">Ok</${Button}>
+         * `;
+         * // Create a button component using a function
+         * const ButtonCancel = Component.create(() => Button.mount({
+         *     className: 'cancel',
+         *     renderChildren: () => 'Cancel'
+         * }));
+         */
+        static create(strings, ...expressions) {
+            const PH = Component.PLACEHOLDER_EXPRESSION('(\\d+)');
+            // Containers can be created using create as a functions instead of a tagged template.
+            if (typeof strings === 'function') {
+                expressions = [strings];
+                strings = ['', ''];
+            }
+
+            let tag, attributes, events, template;
+            // Create output string for main template. Add placeholders for new lines.
+            const main = expandComponents(addPlaceholders(strings, expressions), expressions);
+
+            let match = main.match(
+                new RegExp(`^\\s*<([a-z]+[1-6]?|${PH})([^>]*)>([\\s\\S]*?)</(\\1|${PH})>\\s*$|^\\s*<([a-z]+[1-6]?|${PH})([^>]*)/>\\s*$`)
+            );
+
+            if (match) {
+                // It's a component with tag.
+                const { tag : tagExpression, attributes : attributesAndEvents, inner, close } = parseMatch(match, expressions);
+                // Get tag, attributes.
+                tag = function() {
+                    return renderExpression(tagExpression, this);
+                };
+                // Get attributes.
+                attributes = function() {
+                    return expandAttributes(attributesAndEvents, value => renderExpression(value, this)).attributes;
+                };
+                // Get events.
+                events = function() {
+                    const onlyEvents = expandAttributes(attributesAndEvents, value => renderExpression(value, this)).events;
+
+                    return Object.keys(onlyEvents).reduce((out, key) => {
+                        const typeListeners = renderExpression(onlyEvents[key], this);
+
+                        Object.keys(typeListeners).forEach(selector => {
+                            out[`${key}${selector === '&' ? '' : ` ${selector}`}`] = typeListeners[selector];
+                        });
+
+                        return out;
+                    }, {});
+                };
+                // If there is a closing tag, get template.
+                if (close) {
+                    const list = inner ? splitPlaceholders(inner, expressions) : [];
+                    template = function(addChild) {
+                        return list.map(item => renderExpression(item, this)).flat().map(item => {
+                            if (typeof item !== 'undefined' && item !== null && item !== false &&  item !== true) {
+                                return item instanceof Component ? addChild(item) : item;
+                            }
+                            return '';
+                        }).join('');
+                    };
+                }
+            } else {
+                // It's a container.
+                match = main.match(new RegExp(`^\\s*${PH}\\s*$`));
+
+                if (match) {
+                    // If there is only one expression and no tag, is a container.
+                    template = function(addChild) {
+                        // Replace expressions.
+                        return addChild(renderExpression(expressions[match[1]], this)).toString();
+                    };
+                } else {
+                    throw new SyntaxError('Invalid component');
+                }
+            }
+
+            const Current = this;
+            // Create subclass for this component.
+            return Current.extend({
+                // Set root element tag.
+                tag,
+                // Set attributes.
+                attributes,
+                // Set events.
+                events,
+                // Set template.
+                template
+            });
+        }
+    }
+
+    Component.PLACEHOLDER_EXPRESSION = (idx) => `__RASTI_{${idx}}__`;
+    Component.DATA_ATTRIBUTE_UID = 'data-rasti-uid';
+    Component.RENDER_TYPE_HYDRATE = 'hydrate';
+    Component.RENDER_TYPE_RECYCLE = 'recycle';
+    Component.RENDER_TYPE_RENDER = 'render';
+
+    exports.Component = Component;
+    exports.Emitter = Emitter;
+    exports.Model = Model;
+    exports.View = View;
+
+}));