rasti 2.0.0-alpha.4 → 2.0.0-alpha.6

package/lib/Component.js

@@ -21,7 +21,7 @@ var componentOptions = {
  * @param text {string} html text
  * @return {object} Object with keys / values representing attributes.
  */
-var getAttributes = function getAttributes(text) {
+var extractAttributes = function extractAttributes(text) {
   var attributes = {};
   var re = /(\w+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
   var result;
@@ -113,29 +113,79 @@ var Component = /*#__PURE__*/function (_View) {
   _proto.ensureElement = function ensureElement() {
     // If el is provided, delegate events.
     if (this.el) this.delegateEvents();
-  };
+  }
+
+  /*
+   * Find view's element on parent node, using id.
+   */;
   _proto.findElement = function findElement(parent) {
     return (parent || document).querySelector("#" + this.id);
   }
 
   /*
-   * Used internally on the render process. Attach the view to the dom element.
+   * Eval attributes expressions.
    */;
-  _proto.hydrate = function hydrate(parent) {
+  _proto.getAttributes = function getAttributes() {
     var _this2 = this;
+    var add = {};
+    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);
+      // Transform bool attribute values
+      if (value === false) {
+        remove[key] = true;
+      } else if (value === true) {
+        add[key] = '';
+        attrs.push(key);
+      } else {
+        add[key] = value;
+        attrs.push(key + "=\"" + value + "\"");
+      }
+    });
+    add.id = this.id;
+    attrs.push("id=\"" + this.id + "\"");
+    return {
+      add: add,
+      remove: remove,
+      html: attrs.join(' ')
+    };
+  }
+
+  /*
+   * Used internally on the render process.
+   * Attach the view to the dom element.
+   */;
+  _proto.hydrate = function hydrate(parent) {
+    var _this3 = this;
     this.el = this.findElement(parent);
     this.delegateEvents();
     this.children.forEach(function (child) {
-      return child.hydrate(_this2.el);
+      return child.hydrate(_this3.el);
     });
-    this.onRender.call(this);
+    this.onRender.call(this, 'hydrate');
+  }
+
+  /*
+   * Used internally on the render process.
+   * Reuse a view that has `key` when its parent is rendered.
+   */;
+  _proto.recycle = function recycle(parent) {
+    // Find element to be replaced. It has same id.
+    var toBeReplaced = this.findElement(parent);
+    // Replace it with this.el.
+    toBeReplaced.replaceWith(this.el);
+    // Call `onRender` lifecycle method.
+    this.onRender.call(this, 'recycle');
   }
 
   /*
    * Override. Add some custom logic to super `destroy` method.
    */;
-  _proto.destroy = function destroy(options) {
-    _View.prototype.destroy.call(this, options);
+  _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);
@@ -155,9 +205,9 @@ var Component = /*#__PURE__*/function (_View) {
    * This method should be extended with custom logic.
    * Maybe comparing new attributes with previous ones and calling
    * render when needed. Or doing some dom transformation.
-   * @param model {Rasti.Model}
-   * @param key {string}
-   * @param value {any}
+   * @param model {Rasti.Model} The model that emitted the event.
+   * @param key {string} The key that changed.
+   * @param value {any} The new value.
    */;
   _proto.onChange = function onChange() {
     this.render();
@@ -165,11 +215,13 @@ var Component = /*#__PURE__*/function (_View) {
 
   /**
    * Lifecycle method. Called when the view is rendered.
+   * @param type {string} The render type. Can be `render`, `hydrate` or `recycle`.
    */;
   _proto.onRender = function onRender() {}
 
   /**
    * Lifecycle method. Called when the view is destroyed.
+   * @param {object} options Options object or any arguments passed to `destroy` method.
    */;
   _proto.onDestroy = function onDestroy() {}
 
@@ -177,11 +229,11 @@ var Component = /*#__PURE__*/function (_View) {
    * Replace expressions.
    */;
   _proto.replaceExpressions = function replaceExpressions(string, addChild) {
-    var _this3 = this;
+    var _this4 = this;
     return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\d+)'), 'g'), function (match) {
-      var expression = getExpression(match, _this3.template.expressions);
+      var expression = getExpression(match, _this4.template.expressions);
       // Eval expression. Pass view as argument.
-      var result = evalExpression(expression, _this3, _this3);
+      var result = evalExpression(expression, _this4, _this4);
       // Treat all expressions as arrays.
       var results = result instanceof Array ? result : [result];
       // Replace expression with the result of the evaluation.
@@ -213,58 +265,49 @@ var Component = /*#__PURE__*/function (_View) {
    * Treat the whole view as a HTML string.
    */;
   _proto.toString = function toString() {
-    var _this4 = this;
+    var _this5 = this;
     // Normally there won't be any children, but if there are, destroy them.
     this.destroyChildren();
-    // Add id to template including root element (this.el) as part of it.
-    var tpl = this.attributes.id ? this.template.outer : this.template.outer.replace(/^<([a-z]+)/, "<$1 id=\"" + this.id + "\"");
     // Replace expressions.
-    return this.replaceExpressions(tpl, function (component) {
+    var inner = this.template.inner && this.replaceExpressions(this.template.inner, function (component) {
       // Add child component.
-      return _this4.addChild(component);
+      return _this5.addChild(component);
     });
+    // Generate outer template.
+    return inner ? "<" + this.tag + " " + this.getAttributes().html + ">" + inner + "</" + this.tag + ">" : "<" + this.tag + " " + this.getAttributes().html + " />";
   }
 
   /*
    * View render method.
    */;
   _proto.render = function render() {
-    var _this5 = this;
+    var _this6 = this;
     // Prevent a last re render if view is already destroyed.
     if (this.destroyed) return this;
-    // If "this.el" is not present,
-    // create a new element according "this.tag"
-    // and "this.attributes".
+    // If `this.el` is not present, create a new `this.tag` element.
     if (!this.el) {
       this.el = this.createElement(this.tag);
       this.delegateEvents();
     }
     // Set `this.el` attributes.
-    Object.keys(this.attributes).forEach(function (key) {
-      // Omit changing id.
-      if (key === 'id') return;
-      // Evaluate attribute value.
-      var value = evalExpression(_this5.attributes[key], _this5, _this5);
-      // Transform bool attribute values
-      if (value === false) {
-        // Remove false attributes.
-        _this5.el.removeAttribute(key);
-      } else {
-        if (value === true) value = '';
-        _this5.el.setAttribute(key, value);
-      }
+    var attributes = this.getAttributes();
+    // Remove attributes.
+    Object.keys(attributes.remove).forEach(function (key) {
+      _this6.el.removeAttribute(key);
     });
-
-    // Check for `template.inner`.
-    // Root element may be a self enclosed tag element without innerHTML.
+    // Add attributes.
+    Object.keys(attributes.add).forEach(function (key) {
+      _this6.el.setAttribute(key, attributes.add[key]);
+    });
+    // Check for `template.inner` to see if view has innerHTML.
     if (this.template.inner) {
       var previousChildren = this.children;
       this.children = [];
       var nextChildren = [];
       var recycledChildren = [];
-
-      // Replace expressions.
-      // Set html text inside `this.el`. Make it part of the dom.
+      // Store active element.
+      var activeElement = document.activeElement;
+      // Replace expressions. Set html inside of `this.el`.
       this.el.innerHTML = this.replaceExpressions(this.template.inner, function (component) {
         var out = component;
         // Check if child already exists.
@@ -287,20 +330,24 @@ var Component = /*#__PURE__*/function (_View) {
       });
       // Add new children. Hydrate them.
       nextChildren.forEach(function (nextChild) {
-        _this5.addChild(nextChild).hydrate(_this5.el);
+        _this6.addChild(nextChild).hydrate(_this6.el);
       });
       // Replace children root elements with recycled components.
       recycledChildren.forEach(function (recycledChild) {
-        _this5.el.replaceChild(_this5.addChild(recycledChild).el, recycledChild.findElement(_this5.el));
+        _this6.addChild(recycledChild).recycle(_this6.el);
       });
       // Destroy unused children.
       previousChildren.forEach(function (previousChild) {
         var 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);
+    this.onRender.call(this, 'render');
     // Return this for chaining.
     return this;
   }
@@ -340,7 +387,6 @@ var Component = /*#__PURE__*/function (_View) {
     var hydrate = arguments.length > 2 ? arguments[2] : undefined;
     // Instantiate view.
     var view = new this(options);
-
     // If `el` is passed, mount component.
     if (el) {
       if (hydrate) {
@@ -354,6 +400,7 @@ var Component = /*#__PURE__*/function (_View) {
       }
       view.hydrate(el);
     }
+    // Return view instance.
     return view;
   }
   /**
@@ -390,10 +437,8 @@ var Component = /*#__PURE__*/function (_View) {
     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]+)(.*?)\/>$/);
-    // Remove events listeners.
-    var string = main.replace(/on([A-Z]{1}[a-z]+)+=[^>\s]+/g, '');
     // Parse attributes from html text into an object.
-    var attributes = getAttributes(result[2]);
+    var attributes = extractAttributes(result[2]);
     // Events to be delegated.
     var events = {};
     // Filter events. To generate events object.
@@ -423,10 +468,8 @@ var Component = /*#__PURE__*/function (_View) {
       events: events,
       // Set attributes.
       attributes: attributes,
-      // Set template data.
+      // Set template.
       template: {
-        // Template including root element (this.el) as part of the template.
-        outer: string,
         // Template for innerHTML of root element.
         inner: result[3],
         // Template expressions.

package/lib/View.js

@@ -72,7 +72,7 @@ var View = /*#__PURE__*/function (_Emitter) {
     // Useful to generate elements ids.
     _this.uid = "uid" + ++View.uid;
     // Store delegated events listeners,
-    // so they can be unbinded later.
+    // so they can be unbound later.
     _this.delegatedEventListeners = [];
     // Store child views,
     // so they can be destroyed.
@@ -116,27 +116,24 @@ var View = /*#__PURE__*/function (_Emitter) {
   /**
    * Destroy the view.
    * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.
-   * Pass options.remove as true to remove the view's root element (`this.el`) from the DOM.
-   * @param {object} options.remove Remove the view's root element (`this.el`) from the DOM.
    */;
   _proto.destroy = function destroy() {
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      remove = _ref.remove;
     // Call destroy on children.
     this.destroyChildren();
     // Undelegate `this.el` event listeners
     this.undelegateEvents();
     // Unbind `this` events.
     this.off();
-    // Remove `this.el` if "options.remove" is true.
-    if (remove) this.removeElement();
     // Call onDestroy lifecycle method
     this.onDestroy.apply(this, arguments);
+    // Return `this` for chaining.
+    return this;
   }
 
   /**
    * `onDestroy` lifecycle method is called after 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.
    */;
   _proto.onDestroy = function onDestroy() {}
 
@@ -226,10 +223,12 @@ var View = /*#__PURE__*/function (_Emitter) {
     // Store events by type i.e.: "click", "submit", etc.
     var eventTypes = {};
     Object.keys(events).forEach(function (key) {
-      var keyParts = key.split(' '),
-        type = keyParts.shift(),
-        selector = keyParts.join(' '),
-        listener = events[key];
+      var keyParts = key.split(' ');
+      var type = keyParts.shift();
+      var selector = keyParts.join(' ');
+      var listener = events[key];
+      // Listener may be a string representing a method name on the view,
+      // or a function.
       listener = (typeof listener === 'string' ? _this2[listener] : listener).bind(_this2);
       if (!eventTypes[type]) eventTypes[type] = [];
       eventTypes[type].push({
@@ -237,16 +236,14 @@ var View = /*#__PURE__*/function (_Emitter) {
         listener: listener
       });
     });
-    var indexOf = Array.prototype.indexOf;
     Object.keys(eventTypes).forEach(function (type) {
-      var self = _this2;
+      // Listener for the type of event.
       var typeListener = function typeListener(event) {
-        eventTypes[type].forEach(function (_ref2) {
-          var selector = _ref2.selector,
-            listener = _ref2.listener;
-          if (indexOf.call(selector ? self.el.querySelectorAll(selector) : [self.el], event.target) > -1) {
-            listener(event, self);
-          }
+        // Iterate and run every individual listener if the selector matches.
+        eventTypes[type].forEach(function (_ref) {
+          var selector = _ref.selector,
+            listener = _ref.listener;
+          if (!selector || event.target.closest(selector)) listener(event, _this2);
         });
       };
       _this2.delegatedEventListeners.push({
@@ -255,6 +252,7 @@ var View = /*#__PURE__*/function (_Emitter) {
       });
       _this2.el.addEventListener(type, typeListener);
     });
+    // Return `this` for chaining.
     return this;
   }
 
@@ -264,12 +262,13 @@ var View = /*#__PURE__*/function (_Emitter) {
    */;
   _proto.undelegateEvents = function undelegateEvents() {
     var _this3 = this;
-    this.delegatedEventListeners.forEach(function (_ref3) {
-      var type = _ref3.type,
-        listener = _ref3.listener;
+    this.delegatedEventListeners.forEach(function (_ref2) {
+      var type = _ref2.type,
+        listener = _ref2.listener;
       _this3.el.removeEventListener(type, listener);
     });
     this.delegatedEventListeners = [];
+    // Return `this` for chaining.
     return this;
   }
 
@@ -284,6 +283,7 @@ var View = /*#__PURE__*/function (_Emitter) {
    */;
   _proto.render = function render() {
     if (this.template) this.el.innerHTML = this.template(this.model);
+    // Return `this` for chaining.
     return this;
   };
   return View;

package/package.json

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

package/src/Component.js

@@ -14,7 +14,7 @@ const componentOptions = {
  * @param text {string} html text
  * @return {object} Object with keys / values representing attributes.
  */
-const getAttributes = text => {
+const extractAttributes = text => {
     const attributes = {};
     const re = /(\w+)(?:=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?)?/g;
 
@@ -106,25 +106,72 @@ export default class Component extends View {
         if (this.el) this.delegateEvents();
     }
 
+    /*
+     * Find view's element on parent node, using id.
+     */
     findElement(parent) {
         return (parent || document).querySelector(`#${this.id}`);
     }
 
     /*
-     * Used internally on the render process. Attach the view to the dom element.
+     * Eval attributes expressions.
+     */
+    getAttributes() {
+        const add = {};
+        const remove = {};
+        const attrs = [];
+
+        Object.keys(this.attributes).forEach(key => {
+            if (key === 'id') return;
+            // Evaluate attribute value.
+            let value = evalExpression(this.attributes[key], this, this);
+            // Transform bool attribute values
+            if (value === false) {
+                remove[key] = true;
+            } else if (value === true) {
+                add[key] = '';
+                attrs.push(key);
+            } else {
+                add[key] = value;
+                attrs.push(`${key}="${value}"`);
+            }
+        });
+
+        add.id = this.id;
+        attrs.push(`id="${this.id}"`);
+
+        return { add, remove, html : attrs.join(' ') };
+    }
+
+    /*
+     * Used internally on the render process.
+     * Attach the view to the dom element.
      */
     hydrate(parent) {
         this.el = this.findElement(parent);
         this.delegateEvents();
         this.children.forEach(child => child.hydrate(this.el));
-        this.onRender.call(this);
+        this.onRender.call(this, 'hydrate');
+    }
+
+    /*
+     * Used internally on the render process.
+     * Reuse a view that has `key` when its parent is rendered.
+     */
+    recycle(parent) {
+        // Find element to be replaced. It has same id.
+        const toBeReplaced = this.findElement(parent);
+        // Replace it with this.el.
+        toBeReplaced.replaceWith(this.el);
+        // Call `onRender` lifecycle method.
+        this.onRender.call(this, 'recycle');
     }
 
     /*
      * Override. Add some custom logic to super `destroy` method.
      */
-    destroy(options) {
-        super.destroy(options);
+    destroy() {
+        super.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);
@@ -144,9 +191,9 @@ export default class Component extends View {
      * This method should be extended with custom logic.
      * Maybe comparing new attributes with previous ones and calling
      * render when needed. Or doing some dom transformation.
-     * @param model {Rasti.Model}
-     * @param key {string}
-     * @param value {any}
+     * @param model {Rasti.Model} The model that emitted the event.
+     * @param key {string} The key that changed.
+     * @param value {any} The new value.
      */
     onChange() {
         this.render();
@@ -154,11 +201,13 @@ export default class Component extends View {
 
     /**
      * 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() {}
 
@@ -205,15 +254,15 @@ export default class Component extends View {
     toString() {
         // Normally there won't be any children, but if there are, destroy them.
         this.destroyChildren();
-        // Add id to template including root element (this.el) as part of it.
-        const tpl = this.attributes.id ?
-            this.template.outer :
-            this.template.outer.replace(/^<([a-z]+)/, `<$1 id="${this.id}"`);
         // Replace expressions.
-        return this.replaceExpressions(tpl, (component) => {
+        const inner = this.template.inner && this.replaceExpressions(this.template.inner, (component) => {
             // Add child component.
             return this.addChild(component);
         });
+        // Generate outer template.
+        return inner ?
+            `<${this.tag} ${this.getAttributes().html}>${inner}</${this.tag}>` :
+            `<${this.tag} ${this.getAttributes().html} />`;
     }
 
     /*
@@ -222,40 +271,32 @@ export default class Component extends View {
     render() {
         // Prevent a last re render if view is already destroyed.
         if (this.destroyed) return this;
-        // If "this.el" is not present,
-        // create a new element according "this.tag"
-        // and "this.attributes".
+        // If `this.el` is not present, create a new `this.tag` element.
         if (!this.el) {
             this.el = this.createElement(this.tag);
             this.delegateEvents();
         }
         // Set `this.el` attributes.
-        Object.keys(this.attributes).forEach(key => {
-            // Omit changing id.
-            if (key === 'id') return;
-            // Evaluate attribute value.
-            let value = evalExpression(this.attributes[key], this, this);
-            // Transform bool attribute values
-            if (value === false) {
-                // Remove false attributes.
-                this.el.removeAttribute(key);
-            } else {
-                if (value === true) value = '';
-                this.el.setAttribute(key, value);
-            }
+        const attributes = this.getAttributes();
+        // Remove attributes.
+        Object.keys(attributes.remove).forEach(key => {
+            this.el.removeAttribute(key);
         });
-
-        // Check for `template.inner`.
-        // Root element may be a self enclosed tag element without innerHTML.
+        // Add attributes.
+        Object.keys(attributes.add).forEach(key => {
+            this.el.setAttribute(key, attributes.add[key]);
+        });
+        // Check for `template.inner` to see if view has innerHTML.
         if (this.template.inner) {
             const previousChildren = this.children;
+
             this.children = [];
 
             const nextChildren = [];
             const recycledChildren = [];
-
-            // Replace expressions.
-            // Set html text inside `this.el`. Make it part of the dom.
+            // Store active element.
+            const activeElement = document.activeElement;
+            // Replace expressions. Set html inside of `this.el`.
             this.el.innerHTML = this.replaceExpressions(this.template.inner, (component) => {
                 let out = component;
                 // Check if child already exists.
@@ -283,16 +324,20 @@ export default class Component extends View {
             });
             // Replace children root elements with recycled components.
             recycledChildren.forEach(recycledChild => {
-                this.el.replaceChild(this.addChild(recycledChild).el, recycledChild.findElement(this.el));
+                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);
+        this.onRender.call(this, 'render');
         // Return this for chaining.
         return this;
     }
@@ -329,7 +374,6 @@ export default class Component extends View {
     static mount(options = {}, el, hydrate) {
         // Instantiate view.
         const view = new this(options);
-
         // If `el` is passed, mount component.
         if (el) {
             if (hydrate) {
@@ -343,7 +387,7 @@ export default class Component extends View {
             }
             view.hydrate(el);
         }
-
+        // Return view instance.
         return view;
     }
     /**
@@ -381,10 +425,8 @@ export default class Component extends View {
         const main = parts.join('').trim().replace(/\n/g, '');
         // Extract outer tag, attributes and inner html.
         const result = main.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/) || main.match(/^<([a-z]+)(.*?)\/>$/);
-        // Remove events listeners.
-        const string = main.replace(/on([A-Z]{1}[a-z]+)+=[^>\s]+/g, '');
         // Parse attributes from html text into an object.
-        let attributes = getAttributes(result[2]);
+        let attributes = extractAttributes(result[2]);
         // Events to be delegated.
         let events = {};
         // Filter events. To generate events object.
@@ -415,12 +457,10 @@ export default class Component extends View {
             events,
             // Set attributes.
             attributes,
-            // Set template data.
+            // Set template.
             template : {
-                // Template including root element (this.el) as part of the template.
-                outer: string,
                 // Template for innerHTML of root element.
-                inner: result[3],
+                inner : result[3],
                 // Template expressions.
                 expressions,
             },