rasti 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/rasti.js

@@ -26,7 +26,7 @@ return /******/ (() => { // webpackBootstrap
   \**************************/
 /***/ ((__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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n// This options keys will be extended on view instance.\nvar 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 getAttributes = function getAttributes(text) {\n  var attributes = {};\n  var re = /([a-z]+)=?(\\S+)?/gi;\n  var result;\n  while ((result = re.exec(text)) !== null) {\n    attributes[result[1]] = result[2] ? result[2].replace(/'|\"/g, '') : true;\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.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.<br />\n * Unlike views, which are render-agnostic, components have a specific set of rendering \n * guidelines that allow for a more declarative development style.<br />\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 = /*#__PURE__*/function (_View) {\n  _inheritsLoose(Component, _View);\n  function Component() {\n    var _this;\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _this = _View.call(this, options) || 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    // Ensure id.\n    _this.id = _this.attributes.id ?\n    // If id is provided, evaluate it.\n    evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) :\n    // Generate a unique id and set it as id attribute.\n    Component.ID_TEMPLATE(_this.uid);\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(_assertThisInitialized(_this));\n    // Listen to model changes and call onChange.\n    if (_this.model) _this.model.on('change', _this.onChange);\n    if (_this.state) _this.state.on('change', _this.onChange);\n    // Call life cycle method.\n    _this.onCreate.apply(_assertThisInitialized(_this), arguments);\n    return _this;\n  }\n\n  /*\n   * Override. We don't want to ensure an element on instantiation.\n   * We will provide it later.\n   */\n  var _proto = Component.prototype;\n  _proto.ensureElement = function ensureElement() {\n    // If el is provided, delegate events.\n    if (this.el) this.delegateEvents();\n  };\n  _proto.findElement = function findElement(parent) {\n    return (parent || document).querySelector(\"#\" + this.id);\n  }\n\n  /*\n   * Used internally on the render process. Attach the view to the dom element.\n   */;\n  _proto.hydrate = function hydrate(parent) {\n    var _this2 = this;\n    this.el = this.findElement(parent);\n    this.delegateEvents();\n    this.children.forEach(function (child) {\n      return child.hydrate(_this2.el);\n    });\n    this.onRender.call(this);\n  }\n\n  /*\n   * Override. Add some custom logic to super `destroy` method.\n   */;\n  _proto.destroy = function destroy(options) {\n    _View.prototype.destroy.call(this, options);\n    // Stop listening to `change`.\n    // Set destroyed flag to prevent a last render after destroyed. TODO: Review\n    if (this.model) this.model.off('change', this.onChange);\n    if (this.state) this.state.off('change', this.onChange);\n    this.destroyed = true;\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}\n   * @param key {string}\n   * @param value {any}\n   */;\n  _proto.onChange = function onChange() {\n    this.render();\n  }\n\n  /**\n   * Lifecycle method. Called when the view is rendered.\n   */;\n  _proto.onRender = function onRender() {}\n\n  /**\n   * Lifecycle method. Called when the view is destroyed.\n   */;\n  _proto.onDestroy = function onDestroy() {}\n\n  /*\n   * Replace expressions.\n   */;\n  _proto.replaceExpressions = function replaceExpressions(string, addChild) {\n    var _this3 = this;\n    return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)'), 'g'), function (match) {\n      var expression = getExpression(match, _this3.template.expressions);\n      // Eval expression. Pass view as argument.\n      var result = evalExpression(expression, _this3, _this3);\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`\n    .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.TRUE_PLACEHOLDER + \"[\\\"|']\", 'g'), '$1')\n    // Replace `attribute=\"false\"` with empty string.\n    .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.FALSE_PLACEHOLDER + \"[\\\"|']\", 'g'), '')\n    // Replace rest of false expressions with empty string.\n    .replace(new RegExp(Component.FALSE_PLACEHOLDER, 'g'), '');\n  }\n\n  /*\n   * Treat the whole view as a HTML string.\n   */;\n  _proto.toString = function toString() {\n    var _this4 = this;\n    // Normally there won't be any children, but if there are, destroy them.\n    this.destroyChildren();\n    // Add id to template including root element (this.el) as part of it.\n    var tpl = this.attributes.id ? this.template.outer : this.template.outer.replace(/^<([a-z]+)/, \"<$1 id=\\\"\" + this.id + \"\\\"\");\n    // Replace expressions.\n    return this.replaceExpressions(tpl, function (component) {\n      // Add child component.\n      return _this4.addChild(component);\n    });\n  }\n\n  /*\n   * View render method.\n   */;\n  _proto.render = function render() {\n    var _this5 = this;\n    // Prevent a last re render if view is already destroyed.\n    if (this.destroyed) return this;\n    // If \"this.el\" is not present,\n    // create a new element according \"this.tag\"\n    // and \"this.attributes\".\n    if (!this.el) {\n      this.el = this.createElement(this.tag);\n      this.delegateEvents();\n    }\n    // Set `this.el` attributes.\n    Object.keys(this.attributes).forEach(function (key) {\n      // Omit changing id.\n      if (key === 'id') return;\n      // Evaluate attribute value.\n      var value = evalExpression(_this5.attributes[key], _this5, _this5);\n      // Transform bool attribute values\n      if (value === false) {\n        // Remove false attributes.\n        _this5.el.removeAttribute(key);\n      } else {\n        if (value === true) value = '';\n        _this5.el.setAttribute(key, value);\n      }\n    });\n\n    // Check for `template.inner`.\n    // Root element may be a self enclosed tag element without innerHTML.\n    if (this.template.inner) {\n      var previousChildren = this.children;\n      this.children = [];\n      var nextChildren = [];\n      var recycledChildren = [];\n\n      // Replace expressions.\n      // Set html text inside `this.el`. Make it part of the dom.\n      this.el.innerHTML = 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          // If child already exists, replace it html by its root element.\n          out = \"<\" + found.tag + \" id=\\\"\" + found.id + \"\\\"></\" + found.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      // Add new children. Hydrate them.\n      nextChildren.forEach(function (nextChild) {\n        _this5.addChild(nextChild).hydrate(_this5.el);\n      });\n      // Replace children root elements with recycled components.\n      recycledChildren.forEach(function (recycledChild) {\n        _this5.el.replaceChild(_this5.addChild(recycledChild).el, recycledChild.findElement(_this5.el));\n      });\n      // Destroy unused children.\n      previousChildren.forEach(function (previousChild) {\n        var found = recycledChildren.indexOf(previousChild) > -1;\n        if (!found) previousChild.destroy();\n      });\n    }\n    // Call onRender lifecycle method.\n    this.onRender.call(this);\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      _inheritsLoose(Extended, _Current);\n      function Extended() {\n        return _Current.apply(this, arguments) || this;\n      }\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() {\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    var el = arguments.length > 1 ? arguments[1] : undefined;\n    var hydrate = arguments.length > 2 ? arguments[2] : undefined;\n    // Instantiate view.\n    var view = new this(options);\n\n    // If `el` is passed, mount component.\n    if (el) {\n      if (hydrate) {\n        view.toString();\n      } else {\n        var fragment = document.createElement('template');\n        // Add html text into element inner html.\n        fragment.innerHTML = view;\n        // Add to dom.\n        el.appendChild(fragment.content);\n      }\n      view.hydrate(el);\n    }\n    return view;\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.\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    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>$/) || main.match(/^<([a-z]+)(.*?)\\/>$/);\n    // Remove events listeners.\n    var string = main.replace(/on([A-Z]{1}[a-z]+)+=[^>\\s]+/g, '');\n    // Parse attributes from html text into an object.\n    var attributes = getAttributes(result[2]);\n    // Events to be delegated.\n    var 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    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 data.\n      template: {\n        // Template including root element (this.el) as part of the template.\n        outer: string,\n        // Template for innerHTML of root element.\n        inner: result[3],\n        // Template expressions.\n        expressions: expressions\n      },\n      // Set root element tag.\n      tag: result[1]\n    });\n  };\n  return Component;\n}(_View2[\"default\"]);\nexports[\"default\"] = Component;\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?");
+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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n// This options keys will be extended on view instance.\nvar 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 getAttributes = function getAttributes(text) {\n  var attributes = {};\n  var re = /(\\w+)=[\"']?((?:.(?![\"']?\\s+(?:\\S+)=|\\s*\\/?[>\"']))+.)[\"']?/gi;\n  var result;\n  while ((result = re.exec(text)) !== null) {\n    attributes[result[1]] = result[2] ? result[2].replace(/'|\"/g, '') : true;\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.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.<br />\n * Unlike views, which are render-agnostic, components have a specific set of rendering \n * guidelines that allow for a more declarative development style.<br />\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 = /*#__PURE__*/function (_View) {\n  _inheritsLoose(Component, _View);\n  function Component() {\n    var _this;\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _this = _View.call(this, options) || 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    // Ensure id.\n    _this.id = _this.attributes.id ?\n    // If id is provided, evaluate it.\n    evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) :\n    // Generate a unique id and set it as id attribute.\n    Component.ID_TEMPLATE(_this.uid);\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(_assertThisInitialized(_this));\n    // Listen to model changes and call onChange.\n    if (_this.model) _this.model.on('change', _this.onChange);\n    if (_this.state) _this.state.on('change', _this.onChange);\n    // Call life cycle method.\n    _this.onCreate.apply(_assertThisInitialized(_this), arguments);\n    return _this;\n  }\n\n  /*\n   * Override. We don't want to ensure an element on instantiation.\n   * We will provide it later.\n   */\n  var _proto = Component.prototype;\n  _proto.ensureElement = function ensureElement() {\n    // If el is provided, delegate events.\n    if (this.el) this.delegateEvents();\n  };\n  _proto.findElement = function findElement(parent) {\n    return (parent || document).querySelector(\"#\" + this.id);\n  }\n\n  /*\n   * Used internally on the render process. Attach the view to the dom element.\n   */;\n  _proto.hydrate = function hydrate(parent) {\n    var _this2 = this;\n    this.el = this.findElement(parent);\n    this.delegateEvents();\n    this.children.forEach(function (child) {\n      return child.hydrate(_this2.el);\n    });\n    this.onRender.call(this);\n  }\n\n  /*\n   * Override. Add some custom logic to super `destroy` method.\n   */;\n  _proto.destroy = function destroy(options) {\n    _View.prototype.destroy.call(this, options);\n    // Stop listening to `change`.\n    // Set destroyed flag to prevent a last render after destroyed. TODO: Review\n    if (this.model) this.model.off('change', this.onChange);\n    if (this.state) this.state.off('change', this.onChange);\n    this.destroyed = true;\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}\n   * @param key {string}\n   * @param value {any}\n   */;\n  _proto.onChange = function onChange() {\n    this.render();\n  }\n\n  /**\n   * Lifecycle method. Called when the view is rendered.\n   */;\n  _proto.onRender = function onRender() {}\n\n  /**\n   * Lifecycle method. Called when the view is destroyed.\n   */;\n  _proto.onDestroy = function onDestroy() {}\n\n  /*\n   * Replace expressions.\n   */;\n  _proto.replaceExpressions = function replaceExpressions(string, addChild) {\n    var _this3 = this;\n    return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\\\d+)'), 'g'), function (match) {\n      var expression = getExpression(match, _this3.template.expressions);\n      // Eval expression. Pass view as argument.\n      var result = evalExpression(expression, _this3, _this3);\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`\n    .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.TRUE_PLACEHOLDER + \"[\\\"|']\", 'g'), '$1')\n    // Replace `attribute=\"false\"` with empty string.\n    .replace(new RegExp(\"([a-z]+)=[\\\"|']\" + Component.FALSE_PLACEHOLDER + \"[\\\"|']\", 'g'), '')\n    // Replace rest of false expressions with empty string.\n    .replace(new RegExp(Component.FALSE_PLACEHOLDER, 'g'), '');\n  }\n\n  /*\n   * Treat the whole view as a HTML string.\n   */;\n  _proto.toString = function toString() {\n    var _this4 = this;\n    // Normally there won't be any children, but if there are, destroy them.\n    this.destroyChildren();\n    // Add id to template including root element (this.el) as part of it.\n    var tpl = this.attributes.id ? this.template.outer : this.template.outer.replace(/^<([a-z]+)/, \"<$1 id=\\\"\" + this.id + \"\\\"\");\n    // Replace expressions.\n    return this.replaceExpressions(tpl, function (component) {\n      // Add child component.\n      return _this4.addChild(component);\n    });\n  }\n\n  /*\n   * View render method.\n   */;\n  _proto.render = function render() {\n    var _this5 = this;\n    // Prevent a last re render if view is already destroyed.\n    if (this.destroyed) return this;\n    // If \"this.el\" is not present,\n    // create a new element according \"this.tag\"\n    // and \"this.attributes\".\n    if (!this.el) {\n      this.el = this.createElement(this.tag);\n      this.delegateEvents();\n    }\n    // Set `this.el` attributes.\n    Object.keys(this.attributes).forEach(function (key) {\n      // Omit changing id.\n      if (key === 'id') return;\n      // Evaluate attribute value.\n      var value = evalExpression(_this5.attributes[key], _this5, _this5);\n      // Transform bool attribute values\n      if (value === false) {\n        // Remove false attributes.\n        _this5.el.removeAttribute(key);\n      } else {\n        if (value === true) value = '';\n        _this5.el.setAttribute(key, value);\n      }\n    });\n\n    // Check for `template.inner`.\n    // Root element may be a self enclosed tag element without innerHTML.\n    if (this.template.inner) {\n      var previousChildren = this.children;\n      this.children = [];\n      var nextChildren = [];\n      var recycledChildren = [];\n\n      // Replace expressions.\n      // Set html text inside `this.el`. Make it part of the dom.\n      this.el.innerHTML = 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          // If child already exists, replace it html by its root element.\n          out = \"<\" + found.tag + \" id=\\\"\" + found.id + \"\\\"></\" + found.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      // Add new children. Hydrate them.\n      nextChildren.forEach(function (nextChild) {\n        _this5.addChild(nextChild).hydrate(_this5.el);\n      });\n      // Replace children root elements with recycled components.\n      recycledChildren.forEach(function (recycledChild) {\n        _this5.el.replaceChild(_this5.addChild(recycledChild).el, recycledChild.findElement(_this5.el));\n      });\n      // Destroy unused children.\n      previousChildren.forEach(function (previousChild) {\n        var found = recycledChildren.indexOf(previousChild) > -1;\n        if (!found) previousChild.destroy();\n      });\n    }\n    // Call onRender lifecycle method.\n    this.onRender.call(this);\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      _inheritsLoose(Extended, _Current);\n      function Extended() {\n        return _Current.apply(this, arguments) || this;\n      }\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() {\n    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    var el = arguments.length > 1 ? arguments[1] : undefined;\n    var hydrate = arguments.length > 2 ? arguments[2] : undefined;\n    // Instantiate view.\n    var view = new this(options);\n\n    // If `el` is passed, mount component.\n    if (el) {\n      if (hydrate) {\n        view.toString();\n      } else {\n        var fragment = document.createElement('template');\n        // Add html text into element inner html.\n        fragment.innerHTML = view;\n        // Add to dom.\n        el.appendChild(fragment.content);\n      }\n      view.hydrate(el);\n    }\n    return view;\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.\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    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>$/) || main.match(/^<([a-z]+)(.*?)\\/>$/);\n    // Remove events listeners.\n    var string = main.replace(/on([A-Z]{1}[a-z]+)+=[^>\\s]+/g, '');\n    // Parse attributes from html text into an object.\n    var attributes = getAttributes(result[2]);\n    // Events to be delegated.\n    var 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    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 data.\n      template: {\n        // Template including root element (this.el) as part of the template.\n        outer: string,\n        // Template for innerHTML of root element.\n        inner: result[3],\n        // Template expressions.\n        expressions: expressions\n      },\n      // Set root element tag.\n      tag: result[1]\n    });\n  };\n  return Component;\n}(_View2[\"default\"]);\nexports[\"default\"] = Component;\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?");
 
 /***/ }),
 

package/dist/rasti.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Rasti=t():e.Rasti=t()}(self,(()=>(()=>{"use strict";var e={252:(e,t,n)=>{t.__esModule=!0,t.default=void 0;var r,i=(r=n(789))&&r.__esModule?r:{default:r};function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,a(e,t)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}var u={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0},c=function(e,t){var n=e.match(new RegExp(h.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)")));return n&&n[1]?t[n[1]]:e},l=function(e,t){for(var n=arguments.length,r=new Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];return"function"==typeof e?e.apply(t,r):e},h=function(e){function t(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return n=e.call(this,r)||this,Object.keys(r).forEach((function(e){u[e]&&(n[e]=r[e])})),n.options=r,n.id=n.attributes.id?l(n.attributes.id,o(n),o(n)):t.ID_TEMPLATE(n.uid),n.onChange=n.onChange.bind(o(n)),n.model&&n.model.on("change",n.onChange),n.state&&n.state.on("change",n.onChange),n.onCreate.apply(o(n),arguments),n}s(t,e);var n=t.prototype;return n.ensureElement=function(){this.el&&this.delegateEvents()},n.findElement=function(e){return(e||document).querySelector("#"+this.id)},n.hydrate=function(e){var t=this;this.el=this.findElement(e),this.delegateEvents(),this.children.forEach((function(e){return e.hydrate(t.el)})),this.onRender.call(this)},n.destroy=function(t){e.prototype.destroy.call(this,t),this.model&&this.model.off("change",this.onChange),this.state&&this.state.off("change",this.onChange),this.destroyed=!0},n.onCreate=function(){},n.onChange=function(){this.render()},n.onRender=function(){},n.onDestroy=function(){},n.replaceExpressions=function(e,n){var r=this;return e.replace(new RegExp(t.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)"),"g"),(function(e){var i=c(e,r.template.expressions),o=l(i,r,r);return(o instanceof Array?o:[o]).reduce((function(e,r){return e+(!0===r?t.TRUE_PLACEHOLDER:!1===r?t.FALSE_PLACEHOLDER:null==r?"":r&&"function"==typeof r.render?n(r):r)}),"")})).replace(new RegExp("([a-z]+)=[\"|']"+t.TRUE_PLACEHOLDER+"[\"|']","g"),"$1").replace(new RegExp("([a-z]+)=[\"|']"+t.FALSE_PLACEHOLDER+"[\"|']","g"),"").replace(new RegExp(t.FALSE_PLACEHOLDER,"g"),"")},n.toString=function(){var e=this;this.destroyChildren();var t=this.attributes.id?this.template.outer:this.template.outer.replace(/^<([a-z]+)/,'<$1 id="'+this.id+'"');return this.replaceExpressions(t,(function(t){return e.addChild(t)}))},n.render=function(){var e=this;if(this.destroyed)return this;if(this.el||(this.el=this.createElement(this.tag),this.delegateEvents()),Object.keys(this.attributes).forEach((function(t){if("id"!==t){var n=l(e.attributes[t],e,e);!1===n?e.el.removeAttribute(t):(!0===n&&(n=""),e.el.setAttribute(t,n))}})),this.template.inner){var t=this.children;this.children=[];var n=[],r=[];this.el.innerHTML=this.replaceExpressions(this.template.inner,(function(e){var i=e,o=e.key&&t.find((function(t){return t.key===e.key}));return o?(i="<"+o.tag+' id="'+o.id+'"></'+o.tag+">",r.push(o),e.destroy()):n.push(e),i})),n.forEach((function(t){e.addChild(t).hydrate(e.el)})),r.forEach((function(t){e.el.replaceChild(e.addChild(t).el,t.findElement(e.el))})),t.forEach((function(e){r.indexOf(e)>-1||e.destroy()}))}return this.onRender.call(this),this},t.extend=function(e){var t=function(e){function t(){return e.apply(this,arguments)||this}return s(t,e),t}(this);return Object.assign(t.prototype,"function"==typeof e?e(this.prototype):e),t},t.mount=function(){var e=arguments.length>1?arguments[1]:void 0,t=arguments.length>2?arguments[2]:void 0,n=new this(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{});if(e){if(t)n.toString();else{var r=document.createElement("template");r.innerHTML=n,e.appendChild(r.content)}n.hydrate(e)}return n},t.create=function(e){for(var n=arguments.length,r=new Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];var o=[];e.forEach((function(e,n){o.push(e),r[n]&&o.push("function"==typeof r[n]||"object"==typeof r[n]?t.EXPRESSION_PLACEHOLDER_TEMPLATE(n):r[n])}));var s=o.join("").trim().replace(/\n/g,""),a=s.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/)||s.match(/^<([a-z]+)(.*?)\/>$/),u=s.replace(/on([A-Z]{1}[a-z]+)+=[^>\s]+/g,""),l=function(e){for(var t,n={},r=/([a-z]+)=?(\S+)?/gi;null!==(t=r.exec(e));)n[t[1]]=!t[2]||t[2].replace(/'|"/g,"");return n}(a[2]),h={};return l=Object.keys(l).reduce((function(e,t){var n=t.match(/on(([A-Z]{1}[a-z]+)+)/),i=c(l[t],r);if(n&&n[1]){var o=n[1].toLowerCase();return Object.keys(i).forEach((function(e){return h[o+("&"===e?"":" "+e)]=i[e]})),e}return e[t]=i,e}),{}),this.extend({events:h,attributes:l,template:{outer:u,inner:a[3],expressions:r},tag:a[1]})},t}(i.default);t.default=h,h.ID_TEMPLATE=function(e){return"rasti-component-"+e},h.EXPRESSION_PLACEHOLDER_TEMPLATE=function(e){return"__RASTI_EXPRESSION{"+e+"}"},h.TRUE_PLACEHOLDER="__RASTI_TRUE",h.FALSE_PLACEHOLDER="__RASTI_FALSE"},30:(e,t)=>{t.__esModule=!0,t.default=void 0;var n=function(){function e(){}var t=e.prototype;return t.on=function(e,t){if("function"!=typeof t)throw TypeError("Listener must be a function");this.listeners||(this.listeners={}),this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.once=function(e,t){if("function"==typeof t){var n=this,r=t;t=function(){r.apply(void 0,arguments),n.off(e,t)}}this.on(e,t)},t.off=function(e,t){if(e)if(t){var n=this.listeners[e];n&&(n.slice().forEach((function(e,r){e===t&&n.splice(r,1)})),n.length||delete this.listeners[e])}else delete this.listeners[e];else this.listeners={}},t.emit=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var i=this.listeners&&this.listeners[e];i&&i.length&&i.slice().forEach((function(e){e.apply(void 0,n)}))},e}();t.default=n},289:(e,t,n)=>{var r;function i(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},o(e,t)}t.__esModule=!0,t.default=void 0;var s=function(e){var t,n;function r(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(i(t),arguments),t.attributes=Object.assign({},t.defaults||{},n),t.previous={},Object.keys(t.attributes).forEach(t.defineAttribute.bind(i(t))),t}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,o(t,n);var s=r.prototype;return s.preinitialize=function(){},s.defineAttribute=function(e){var t=this;Object.defineProperty(this,e,{get:function(){return t.get(e)},set:function(n){t.set(e,n)}})},s.get=function(e){return this.attributes[e]},s.set=function(e,t){var n,r=this,i="object"==typeof e?e:((n={})[e]=t,n);return Object.keys(i).forEach((function(e){var t=e in r.attributes&&i[e]!==r.attributes[e];r.previous[e]=r.attributes[e],r.attributes[e]=i[e],t&&(r.emit("change",r,e,i[e]),r.emit("change:"+e,r,i[e]))})),this},s.toJSON=function(){return this.attributes},r}(((r=n(30))&&r.__esModule?r:{default:r}).default);t.default=s},789:(e,t,n)=>{t.__esModule=!0,t.default=void 0;var r,i=(r=n(30))&&r.__esModule?r:{default:r};function o(e,t){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},o(e,t)}var s={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0},a=function(e){var t,n;function r(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t),arguments),t.uid="uid"+ ++r.uid,t.delegatedEventListeners=[],t.children=[],Object.keys(n).forEach((function(e){s[e]&&(t[e]=n[e])})),t.ensureElement(),t}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,o(t,n);var i=r.prototype;return i.preinitialize=function(){},i.$=function(e){return this.el.querySelector(e)},i.$$=function(e){return this.el.querySelectorAll(e)},i.destroy=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).remove;this.destroyChildren(),this.undelegateEvents(),this.off(),e&&this.removeElement(),this.onDestroy.apply(this,arguments)},i.onDestroy=function(){},i.addChild=function(e){return this.children.push(e),e},i.destroyChildren=function(){for(;this.children.length;)this.children.shift().destroy()},i.ensureElement=function(){this.el||(this.el=this.createElement(this.tag,this.attributes)),this.delegateEvents()},i.createElement=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=document.createElement(e);return Object.keys(t).forEach((function(e){return n.setAttribute(e,t[e])})),n},i.removeElement=function(){this.el.parentNode.removeChild(this.el)},i.delegateEvents=function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.events;if(!t)return this;this.delegatedEventListeners.length&&this.undelegateEvents();var n={};Object.keys(t).forEach((function(r){var i=r.split(" "),o=i.shift(),s=i.join(" "),a=t[r];a=("string"==typeof a?e[a]:a).bind(e),n[o]||(n[o]=[]),n[o].push({selector:s,listener:a})}));var r=Array.prototype.indexOf;return Object.keys(n).forEach((function(t){var i=e,o=function(e){n[t].forEach((function(t){var n=t.selector,o=t.listener;r.call(n?i.el.querySelectorAll(n):[i.el],e.target)>-1&&o(e,i)}))};e.delegatedEventListeners.push({type:t,listener:o}),e.el.addEventListener(t,o)})),this},i.undelegateEvents=function(){var e=this;return this.delegatedEventListeners.forEach((function(t){var n=t.type,r=t.listener;e.el.removeEventListener(n,r)})),this.delegatedEventListeners=[],this},i.render=function(){return this.template&&(this.el.innerHTML=this.template(this.model)),this},r}(i.default);t.default=a,a.uid=0}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}var r={};return(()=>{var e=r;e.__esModule=!0;var t=a(n(30));e.Emitter=t.default;var i=a(n(289));e.Model=i.default;var o=a(n(789));e.View=o.default;var s=a(n(252));function a(e){return e&&e.__esModule?e:{default:e}}e.Component=s.default})(),r})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Rasti=t():e.Rasti=t()}(self,(()=>(()=>{"use strict";var e={252:(e,t,n)=>{t.__esModule=!0,t.default=void 0;var r,i=(r=n(789))&&r.__esModule?r:{default:r};function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,a(e,t)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}var u={key:!0,state:!0,onCreate:!0,onChange:!0,onRender:!0},c=function(e,t){var n=e.match(new RegExp(h.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)")));return n&&n[1]?t[n[1]]:e},l=function(e,t){for(var n=arguments.length,r=new Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];return"function"==typeof e?e.apply(t,r):e},h=function(e){function t(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return n=e.call(this,r)||this,Object.keys(r).forEach((function(e){u[e]&&(n[e]=r[e])})),n.options=r,n.id=n.attributes.id?l(n.attributes.id,o(n),o(n)):t.ID_TEMPLATE(n.uid),n.onChange=n.onChange.bind(o(n)),n.model&&n.model.on("change",n.onChange),n.state&&n.state.on("change",n.onChange),n.onCreate.apply(o(n),arguments),n}s(t,e);var n=t.prototype;return n.ensureElement=function(){this.el&&this.delegateEvents()},n.findElement=function(e){return(e||document).querySelector("#"+this.id)},n.hydrate=function(e){var t=this;this.el=this.findElement(e),this.delegateEvents(),this.children.forEach((function(e){return e.hydrate(t.el)})),this.onRender.call(this)},n.destroy=function(t){e.prototype.destroy.call(this,t),this.model&&this.model.off("change",this.onChange),this.state&&this.state.off("change",this.onChange),this.destroyed=!0},n.onCreate=function(){},n.onChange=function(){this.render()},n.onRender=function(){},n.onDestroy=function(){},n.replaceExpressions=function(e,n){var r=this;return e.replace(new RegExp(t.EXPRESSION_PLACEHOLDER_TEMPLATE("(\\d+)"),"g"),(function(e){var i=c(e,r.template.expressions),o=l(i,r,r);return(o instanceof Array?o:[o]).reduce((function(e,r){return e+(!0===r?t.TRUE_PLACEHOLDER:!1===r?t.FALSE_PLACEHOLDER:null==r?"":r&&"function"==typeof r.render?n(r):r)}),"")})).replace(new RegExp("([a-z]+)=[\"|']"+t.TRUE_PLACEHOLDER+"[\"|']","g"),"$1").replace(new RegExp("([a-z]+)=[\"|']"+t.FALSE_PLACEHOLDER+"[\"|']","g"),"").replace(new RegExp(t.FALSE_PLACEHOLDER,"g"),"")},n.toString=function(){var e=this;this.destroyChildren();var t=this.attributes.id?this.template.outer:this.template.outer.replace(/^<([a-z]+)/,'<$1 id="'+this.id+'"');return this.replaceExpressions(t,(function(t){return e.addChild(t)}))},n.render=function(){var e=this;if(this.destroyed)return this;if(this.el||(this.el=this.createElement(this.tag),this.delegateEvents()),Object.keys(this.attributes).forEach((function(t){if("id"!==t){var n=l(e.attributes[t],e,e);!1===n?e.el.removeAttribute(t):(!0===n&&(n=""),e.el.setAttribute(t,n))}})),this.template.inner){var t=this.children;this.children=[];var n=[],r=[];this.el.innerHTML=this.replaceExpressions(this.template.inner,(function(e){var i=e,o=e.key&&t.find((function(t){return t.key===e.key}));return o?(i="<"+o.tag+' id="'+o.id+'"></'+o.tag+">",r.push(o),e.destroy()):n.push(e),i})),n.forEach((function(t){e.addChild(t).hydrate(e.el)})),r.forEach((function(t){e.el.replaceChild(e.addChild(t).el,t.findElement(e.el))})),t.forEach((function(e){r.indexOf(e)>-1||e.destroy()}))}return this.onRender.call(this),this},t.extend=function(e){var t=function(e){function t(){return e.apply(this,arguments)||this}return s(t,e),t}(this);return Object.assign(t.prototype,"function"==typeof e?e(this.prototype):e),t},t.mount=function(){var e=arguments.length>1?arguments[1]:void 0,t=arguments.length>2?arguments[2]:void 0,n=new this(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{});if(e){if(t)n.toString();else{var r=document.createElement("template");r.innerHTML=n,e.appendChild(r.content)}n.hydrate(e)}return n},t.create=function(e){for(var n=arguments.length,r=new Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];var o=[];e.forEach((function(e,n){o.push(e),r[n]&&o.push("function"==typeof r[n]||"object"==typeof r[n]?t.EXPRESSION_PLACEHOLDER_TEMPLATE(n):r[n])}));var s=o.join("").trim().replace(/\n/g,""),a=s.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/)||s.match(/^<([a-z]+)(.*?)\/>$/),u=s.replace(/on([A-Z]{1}[a-z]+)+=[^>\s]+/g,""),l=function(e){for(var t,n={},r=/(\w+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gi;null!==(t=r.exec(e));)n[t[1]]=!t[2]||t[2].replace(/'|"/g,"");return n}(a[2]),h={};return l=Object.keys(l).reduce((function(e,t){var n=t.match(/on(([A-Z]{1}[a-z]+)+)/),i=c(l[t],r);if(n&&n[1]){var o=n[1].toLowerCase();return Object.keys(i).forEach((function(e){return h[o+("&"===e?"":" "+e)]=i[e]})),e}return e[t]=i,e}),{}),this.extend({events:h,attributes:l,template:{outer:u,inner:a[3],expressions:r},tag:a[1]})},t}(i.default);t.default=h,h.ID_TEMPLATE=function(e){return"rasti-component-"+e},h.EXPRESSION_PLACEHOLDER_TEMPLATE=function(e){return"__RASTI_EXPRESSION{"+e+"}"},h.TRUE_PLACEHOLDER="__RASTI_TRUE",h.FALSE_PLACEHOLDER="__RASTI_FALSE"},30:(e,t)=>{t.__esModule=!0,t.default=void 0;var n=function(){function e(){}var t=e.prototype;return t.on=function(e,t){if("function"!=typeof t)throw TypeError("Listener must be a function");this.listeners||(this.listeners={}),this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},t.once=function(e,t){if("function"==typeof t){var n=this,r=t;t=function(){r.apply(void 0,arguments),n.off(e,t)}}this.on(e,t)},t.off=function(e,t){if(e)if(t){var n=this.listeners[e];n&&(n.slice().forEach((function(e,r){e===t&&n.splice(r,1)})),n.length||delete this.listeners[e])}else delete this.listeners[e];else this.listeners={}},t.emit=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var i=this.listeners&&this.listeners[e];i&&i.length&&i.slice().forEach((function(e){e.apply(void 0,n)}))},e}();t.default=n},289:(e,t,n)=>{var r;function i(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},o(e,t)}t.__esModule=!0,t.default=void 0;var s=function(e){var t,n;function r(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(i(t),arguments),t.attributes=Object.assign({},t.defaults||{},n),t.previous={},Object.keys(t.attributes).forEach(t.defineAttribute.bind(i(t))),t}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,o(t,n);var s=r.prototype;return s.preinitialize=function(){},s.defineAttribute=function(e){var t=this;Object.defineProperty(this,e,{get:function(){return t.get(e)},set:function(n){t.set(e,n)}})},s.get=function(e){return this.attributes[e]},s.set=function(e,t){var n,r=this,i="object"==typeof e?e:((n={})[e]=t,n);return Object.keys(i).forEach((function(e){var t=e in r.attributes&&i[e]!==r.attributes[e];r.previous[e]=r.attributes[e],r.attributes[e]=i[e],t&&(r.emit("change",r,e,i[e]),r.emit("change:"+e,r,i[e]))})),this},s.toJSON=function(){return this.attributes},r}(((r=n(30))&&r.__esModule?r:{default:r}).default);t.default=s},789:(e,t,n)=>{t.__esModule=!0,t.default=void 0;var r,i=(r=n(30))&&r.__esModule?r:{default:r};function o(e,t){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},o(e,t)}var s={el:!0,tag:!0,attributes:!0,events:!0,model:!0,template:!0,onDestroy:!0},a=function(e){var t,n;function r(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(t=e.call(this)||this).preinitialize.apply(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t),arguments),t.uid="uid"+ ++r.uid,t.delegatedEventListeners=[],t.children=[],Object.keys(n).forEach((function(e){s[e]&&(t[e]=n[e])})),t.ensureElement(),t}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,o(t,n);var i=r.prototype;return i.preinitialize=function(){},i.$=function(e){return this.el.querySelector(e)},i.$$=function(e){return this.el.querySelectorAll(e)},i.destroy=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).remove;this.destroyChildren(),this.undelegateEvents(),this.off(),e&&this.removeElement(),this.onDestroy.apply(this,arguments)},i.onDestroy=function(){},i.addChild=function(e){return this.children.push(e),e},i.destroyChildren=function(){for(;this.children.length;)this.children.shift().destroy()},i.ensureElement=function(){this.el||(this.el=this.createElement(this.tag,this.attributes)),this.delegateEvents()},i.createElement=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=document.createElement(e);return Object.keys(t).forEach((function(e){return n.setAttribute(e,t[e])})),n},i.removeElement=function(){this.el.parentNode.removeChild(this.el)},i.delegateEvents=function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.events;if(!t)return this;this.delegatedEventListeners.length&&this.undelegateEvents();var n={};Object.keys(t).forEach((function(r){var i=r.split(" "),o=i.shift(),s=i.join(" "),a=t[r];a=("string"==typeof a?e[a]:a).bind(e),n[o]||(n[o]=[]),n[o].push({selector:s,listener:a})}));var r=Array.prototype.indexOf;return Object.keys(n).forEach((function(t){var i=e,o=function(e){n[t].forEach((function(t){var n=t.selector,o=t.listener;r.call(n?i.el.querySelectorAll(n):[i.el],e.target)>-1&&o(e,i)}))};e.delegatedEventListeners.push({type:t,listener:o}),e.el.addEventListener(t,o)})),this},i.undelegateEvents=function(){var e=this;return this.delegatedEventListeners.forEach((function(t){var n=t.type,r=t.listener;e.el.removeEventListener(n,r)})),this.delegatedEventListeners=[],this},i.render=function(){return this.template&&(this.el.innerHTML=this.template(this.model)),this},r}(i.default);t.default=a,a.uid=0}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}var r={};return(()=>{var e=r;e.__esModule=!0;var t=a(n(30));e.Emitter=t.default;var i=a(n(289));e.Model=i.default;var o=a(n(789));e.View=o.default;var s=a(n(252));function a(e){return e&&e.__esModule?e:{default:e}}e.Component=s.default})(),r})()));

package/es/Component.js

@@ -19,7 +19,7 @@ var componentOptions = {
  */
 var getAttributes = function getAttributes(text) {
   var attributes = {};
-  var re = /([a-z]+)=?(\S+)?/gi;
+  var re = /(\w+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gi;
   var result;
   while ((result = re.exec(text)) !== null) {
     attributes[result[1]] = result[2] ? result[2].replace(/'|"/g, '') : true;

package/lib/Component.js

@@ -23,7 +23,7 @@ var componentOptions = {
  */
 var getAttributes = function getAttributes(text) {
   var attributes = {};
-  var re = /([a-z]+)=?(\S+)?/gi;
+  var re = /(\w+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gi;
   var result;
   while ((result = re.exec(text)) !== null) {
     attributes[result[1]] = result[2] ? result[2].replace(/'|"/g, '') : true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rasti",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "Minimalistic, ultra-lightweight JavaScript library for building user interfaces.",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",

package/src/Component.js

@@ -16,7 +16,7 @@ const componentOptions = {
  */
 const getAttributes = text => {
     const attributes = {};
-    const re = /([a-z]+)=?(\S+)?/gi;
+    const re = /(\w+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gi;
 
     let result;
     while ((result = re.exec(text)) !== null) {