rasti 2.0.0-alpha.9 → 2.0.1

package/es/Component.js

@@ -1,4 +1,3 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 import View from './View.js';
@@ -47,9 +46,9 @@ var evalExpression = function evalExpression(expression, context) {
 
 /**
  * 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.<br />
+ * 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.<br />
+ * 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
@@ -73,31 +72,24 @@ var evalExpression = function evalExpression(expression, context) {
  * setInterval(() => model.seconds++, 1000);
  */
 var Component = /*#__PURE__*/function (_View) {
-  _inheritsLoose(Component, _View);
   function Component() {
     var _this;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _this = _View.call(this, options) || this;
+    _this = _View.apply(this, arguments) || this;
     // Extend "this" with options, mapping componentOptions keys.
     Object.keys(options).forEach(function (key) {
       if (componentOptions[key]) _this[key] = options[key];
     });
     // Store options by default.
     _this.options = options;
-    // Ensure id.
-    _this.id = _this.attributes.id ?
-    // If id is provided, evaluate it.
-    evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) :
-    // Generate a unique id and set it as id attribute.
-    Component.ID_TEMPLATE(_this.uid);
     // Bind onChange to this to be used as listener.
     // Store bound version, so it can be removed on onDestroy method.
-    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.onChange = _this.onChange.bind(_this);
     // Listen to model changes and call onChange.
-    if (_this.model) _this.model.on('change', _this.onChange);
-    if (_this.state) _this.state.on('change', _this.onChange);
+    if (_this.model && _this.model.on) _this.model.on('change', _this.onChange);
+    if (_this.state && _this.state.on) _this.state.on('change', _this.onChange);
     // Call life cycle method.
-    _this.onCreate.apply(_assertThisInitialized(_this), arguments);
+    _this.onCreate.apply(_this, arguments);
     return _this;
   }
 
@@ -105,10 +97,22 @@ var Component = /*#__PURE__*/function (_View) {
    * Override. We don't want to ensure an element on instantiation.
    * We will provide it later.
    */
+  _inheritsLoose(Component, _View);
   var _proto = Component.prototype;
   _proto.ensureElement = function ensureElement() {
     // If el is provided, delegate events.
-    if (this.el) this.delegateEvents();
+    if (this.el) {
+      this.delegateEvents();
+      this.id = this.el.id;
+    }
+    // Ensure id.
+    if (!this.id) {
+      this.id = this.attributes && this.attributes.id ?
+      // If id is provided, evaluate it.
+      evalExpression(this.attributes.id, this, this) :
+      // Generate a unique id and set it as id attribute.
+      Component.ID_TEMPLATE(this.uid);
+    }
   }
 
   /*
@@ -123,32 +127,34 @@ var Component = /*#__PURE__*/function (_View) {
    */;
   _proto.getAttributes = function getAttributes() {
     var _this2 = this;
-    var add = {};
+    var add = {
+      id: this.id
+    };
     var remove = {};
-    var attrs = [];
-    Object.keys(this.attributes).forEach(function (key) {
-      if (key === 'id') return;
-      // Evaluate attribute value.
-      var value = evalExpression(_this2.attributes[key], _this2, _this2);
+    var html = ["id=\"" + this.id + "\""];
+    if (this.attributes) {
+      Object.keys(this.attributes).forEach(function (key) {
+        if (key === 'id') return;
+        // Evaluate attribute value.
+        var value = evalExpression(_this2.attributes[key], _this2, _this2);
 
-      // Transform bool attribute values
-      if (value === false) {
-        remove[key] = true;
-      } else if (value === true) {
-        add[key] = '';
-        attrs.push(key);
-      } else {
-        if (value === null || typeof value === 'undefined') value = '';
-        add[key] = value;
-        attrs.push(key + "=\"" + value + "\"");
-      }
-    });
-    add.id = this.id;
-    attrs.push("id=\"" + this.id + "\"");
+        // 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: add,
       remove: remove,
-      html: attrs.join(' ')
+      html: html.join(' ')
     };
   }
 
@@ -185,10 +191,12 @@ var Component = /*#__PURE__*/function (_View) {
   _proto.destroy = function destroy() {
     _View.prototype.destroy.apply(this, arguments);
     // Stop listening to `change`.
-    // Set destroyed flag to prevent a last render after destroyed. TODO: Review
-    if (this.model) this.model.off('change', this.onChange);
-    if (this.state) this.state.off('change', this.onChange);
+    if (this.model && this.model.off) this.model.off('change', this.onChange);
+    if (this.state && this.state.off) this.state.off('change', this.onChange);
+    // Set destroyed flag to prevent a last render after destroyed.
     this.destroyed = true;
+    // Return `this` for chaining.
+    return this;
   }
 
   /**
@@ -204,8 +212,8 @@ var Component = /*#__PURE__*/function (_View) {
    * Maybe comparing new attributes with previous ones and calling
    * render when needed. Or doing some dom transformation.
    * @param model {Rasti.Model} The model that emitted the event.
-   * @param key {string} The key that changed.
-   * @param value {any} The new value.
+   * @param changed {object} Object containing keys and values that has changed.
+   * @param [...args] {any} Any extra arguments passed to set method.
    */;
   _proto.onChange = function onChange() {
     this.render();
@@ -251,12 +259,12 @@ var Component = /*#__PURE__*/function (_View) {
         return out + parsed;
       }, '');
     })
-    // Replace `attribute="true"` with `attribute`
-    .replace(new RegExp("([a-z]+)=[\"|']" + Component.TRUE_PLACEHOLDER + "[\"|']", 'g'), '$1')
-    // Replace `attribute="false"` with empty string.
-    .replace(new RegExp("([a-z]+)=[\"|']" + Component.FALSE_PLACEHOLDER + "[\"|']", 'g'), '')
-    // Replace rest of false expressions with empty string.
-    .replace(new RegExp(Component.FALSE_PLACEHOLDER, 'g'), '');
+    // Replace `attribute="true"` with `attribute` and `attribute="false"` with empty string.
+    .replace(new RegExp("([\\w|data-]+)=([\"'])?(" + Component.TRUE_PLACEHOLDER + "|" + Component.FALSE_PLACEHOLDER + ")\\2", 'g'), function (match, attribute, quote, placeholder) {
+      return placeholder === Component.TRUE_PLACEHOLDER ? attribute : '';
+    })
+    // Replace rest of true or false expressions with empty string.
+    .replace(new RegExp(Component.TRUE_PLACEHOLDER + "|" + Component.FALSE_PLACEHOLDER, 'g'), '');
   }
 
   /*
@@ -266,13 +274,18 @@ var Component = /*#__PURE__*/function (_View) {
     var _this5 = this;
     // Normally there won't be any children, but if there are, destroy them.
     this.destroyChildren();
-    // Replace expressions.
-    var inner = this.template.inner && this.replaceExpressions(this.template.inner, function (component) {
+    // Get tag name.
+    var tag = this.tag || 'div';
+    // Get attributes.
+    var attributes = this.getAttributes().html;
+    // Replace expressions of inner template.
+    var close = this.template && this.template.inner;
+    var inner = close && this.replaceExpressions(this.template.inner, function (component) {
       // Add child component.
       return _this5.addChild(component);
     });
     // Generate outer template.
-    return inner ? "<" + this.tag + " " + this.getAttributes().html + ">" + inner + "</" + this.tag + ">" : "<" + this.tag + " " + this.getAttributes().html + " />";
+    return close ? "<" + tag + " " + attributes + ">" + inner + "</" + tag + ">" : "<" + tag + " " + attributes + " />";
   }
 
   /*
@@ -298,7 +311,7 @@ var Component = /*#__PURE__*/function (_View) {
       _this6.el.setAttribute(key, attributes.add[key]);
     });
     // Check for `template.inner` to see if view has innerHTML.
-    if (this.template.inner) {
+    if (this.template && this.template.inner) {
       var previousChildren = this.children;
       this.children = [];
       var nextChildren = [];
@@ -313,8 +326,10 @@ var Component = /*#__PURE__*/function (_View) {
           return previousChild.key === component.key;
         });
         if (found) {
+          var tag = found.el.tagName.toLowerCase();
+          var id = found.el.id;
           // If child already exists, replace it html by its root element.
-          out = "<" + found.tag + " id=\"" + found.id + "\"></" + found.tag + ">";
+          out = "<" + tag + " id=\"" + id + "\"></" + tag + ">";
           // Add child to recycled children.
           recycledChildren.push(found);
           // Destroy new child component. Use recycled one instead.
@@ -358,10 +373,10 @@ var Component = /*#__PURE__*/function (_View) {
   Component.extend = function extend(object) {
     var Current = this;
     var Extended = /*#__PURE__*/function (_Current) {
-      _inheritsLoose(Extended, _Current);
       function Extended() {
         return _Current.apply(this, arguments) || this;
       }
+      _inheritsLoose(Extended, _Current);
       return Extended;
     }(Current);
     Object.assign(Extended.prototype, typeof object === 'function' ? object(Current.prototype) : object);
@@ -379,10 +394,7 @@ var Component = /*#__PURE__*/function (_View) {
    * @param {boolean} hydrate If true, the view will use existing html.
    * @return {Rasti.Component}
    */;
-  Component.mount = function mount() {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var el = arguments.length > 1 ? arguments[1] : undefined;
-    var hydrate = arguments.length > 2 ? arguments[2] : undefined;
+  Component.mount = function mount(options, el, hydrate) {
     // Instantiate view.
     var view = new this(options);
     // If `el` is passed, mount component.
@@ -401,6 +413,7 @@ var Component = /*#__PURE__*/function (_View) {
     // Return view instance.
     return view;
   }
+
   /**
    * Takes a tagged template containing an HTML string, 
    * and returns a new `Component` class.
@@ -434,7 +447,7 @@ var Component = /*#__PURE__*/function (_View) {
     // Create output text for main template.
     var main = parts.join('').trim().replace(/\n/g, '');
     // Extract outer tag, attributes and inner html.
-    var result = main.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/) || main.match(/^<([a-z]+)(.*?)\/>$/);
+    var result = main.match(/^<([a-z]+[1-6]?)(.*?)>(.*)<\/\1>$/) || main.match(/^<([a-z]+)(.*?)\/>$/);
     // Parse attributes from html text into an object.
     var attributes = extractAttributes(result[2]);
     // Events to be delegated.

package/es/Emitter.js

@@ -1,7 +1,7 @@
 /**
  * `Emitter` is a class that provides an easy way to implement the observer pattern 
- * in your applications.<br />
- * It can be extended to create new classes that have the ability to emit and bind custom named events.<br /> 
+ * 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.
  *

package/es/Model.js

@@ -1,4 +1,3 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 import Emitter from './Emitter.js';
@@ -6,10 +5,10 @@ import Emitter from './Emitter.js';
  * - 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.<br />
+ * 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.<br />
- * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.<br />
+ * 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 stores its 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` 
@@ -48,19 +47,18 @@ import Emitter from './Emitter.js';
  * product.setDiscount(10); // Output: "New Price: 900"
  */
 var Model = /*#__PURE__*/function (_Emitter) {
-  _inheritsLoose(Model, _Emitter);
   function Model() {
     var _this;
     var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _this = _Emitter.call(this) || this;
     // Call preinitialize.
-    _this.preinitialize.apply(_assertThisInitialized(_this), arguments);
+    _this.preinitialize.apply(_this, arguments);
     // attributes object.
     _this.attributes = Object.assign({}, _this.defaults || {}, attrs);
     // Previous attributes.
     _this.previous = {};
     // Generate getters/setters for every attr.
-    Object.keys(_this.attributes).forEach(_this.defineAttribute.bind(_assertThisInitialized(_this)));
+    Object.keys(_this.attributes).forEach(_this.defineAttribute.bind(_this));
     return _this;
   }
 
@@ -68,6 +66,7 @@ var Model = /*#__PURE__*/function (_Emitter) {
    * 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`.
    */
+  _inheritsLoose(Model, _Emitter);
   var _proto = Model.prototype;
   _proto.preinitialize = function preinitialize() {}
 
@@ -100,11 +99,13 @@ var Model = /*#__PURE__*/function (_Emitter) {
   }
 
   /**
-   * Set an attribute into `this.attributes`.
-   * Emit `change` and `change:attribute` if a value change.
+   * Set an attribute into `this.attributes`.  
+   * Emit `change` and `change:attribute` if a value change.  
    * Could be called in two forms, `this.set('key', value)` and
-   * `this.set({ key : value })`.
-   * This method is called internally by generated setters.
+   * `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.

package/es/View.js

@@ -1,4 +1,3 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 import Emitter from './Emitter.js';
@@ -20,10 +19,10 @@ var viewOptions = {
  * - Sends captured input to the model.
  *
  * A `View` is an atomic unit of the user interface that can render the data from a specific model or multiple models.
- * However, views can also be independent and have no associated data.<br />
+ * 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.<br />
- * Each `View` has a root element, `this.el`, which is used for event delegation.<br />
+ * 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
@@ -57,13 +56,12 @@ var viewOptions = {
  * document.body.appendChild(new Timer().render().el);
  */
 var View = /*#__PURE__*/function (_Emitter) {
-  _inheritsLoose(View, _Emitter);
   function View() {
     var _this;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _this = _Emitter.call(this) || this;
     // Call preinitialize.
-    _this.preinitialize.apply(_assertThisInitialized(_this), arguments);
+    _this.preinitialize.apply(_this, arguments);
     // Generate unique id.
     // Useful to generate elements ids.
     _this.uid = "uid" + ++View.uid;
@@ -86,6 +84,7 @@ var View = /*#__PURE__*/function (_Emitter) {
    * 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`.
    */
+  _inheritsLoose(View, _Emitter);
   var _proto = View.prototype;
   _proto.preinitialize = function preinitialize() {}
 
@@ -112,6 +111,7 @@ var View = /*#__PURE__*/function (_Emitter) {
   /**
    * Destroy the view.
    * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.
+   * @return {Rasti.View} Return `this` for chaining.
    */;
   _proto.destroy = function destroy() {
     // Call destroy on children.
@@ -189,18 +189,21 @@ var View = /*#__PURE__*/function (_Emitter) {
 
   /**
    * Remove `this.el` from DOM.
+   * @return {Rasti.View} Return `this` for chaining.
    */;
   _proto.removeElement = function 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.<br />
+   * 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`).<br />
+   * 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. <br />
-   * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.<br />
+   * 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.