rasti 2.0.0 → 2.1.0-alpha.0

package/es/Component.js

@@ -94,11 +94,22 @@ var Component = /*#__PURE__*/function (_View) {
   }
 
   /*
-   * Override. We don't want to ensure an element on instantiation.
-   * We will provide it later.
-   */
+  * Tell if component is a container.
+  * In which case, it will not have an element by itself.
+  * It will render a single expression which is expected to return a single component as child.
+  * `this.el` will be a reference to that child component's element.
+  * @return {boolean}
+  */
   _inheritsLoose(Component, _View);
   var _proto = Component.prototype;
+  _proto.isContainer = function isContainer() {
+    return !!(!this.tag && this.template && this.template.inner && this.template.expressions && this.template.expressions.length === 1);
+  }
+
+  /*
+   * Override. We don't want to ensure an element on instantiation.
+   * We will provide it later.
+   */;
   _proto.ensureElement = function ensureElement() {
     // If el is provided, delegate events.
     if (this.el) {
@@ -106,7 +117,7 @@ var Component = /*#__PURE__*/function (_View) {
       this.id = this.el.id;
     }
     // Ensure id.
-    if (!this.id) {
+    if (!this.isContainer() && !this.id) {
       this.id = this.attributes && this.attributes.id ?
       // If id is provided, evaluate it.
       evalExpression(this.attributes.id, this, this) :
@@ -117,6 +128,8 @@ var Component = /*#__PURE__*/function (_View) {
 
   /*
    * Find view's element on parent node, using id.
+   * @param parent {node} The parent node.
+   * @return {node} The component's element.
    */;
   _proto.findElement = function findElement(parent) {
     return (parent || document).querySelector("#" + this.id);
@@ -124,6 +137,7 @@ var Component = /*#__PURE__*/function (_View) {
 
   /*
    * Eval attributes expressions.
+   * @return {object} Object containing add, remove and html properties.
    */;
   _proto.getAttributes = function getAttributes() {
     var _this2 = this;
@@ -161,40 +175,57 @@ var Component = /*#__PURE__*/function (_View) {
   /*
    * Used internally on the render process.
    * Attach the view to the dom element.
+   * @param parent {node} The parent node.
+   * @return {Rasti.Component} The component instance.
    */;
   _proto.hydrate = function hydrate(parent) {
     var _this3 = this;
-    this.el = this.findElement(parent);
-    this.delegateEvents();
-    this.children.forEach(function (child) {
-      return child.hydrate(_this3.el);
-    });
+    if (!this.isContainer()) {
+      this.el = this.findElement(parent);
+      this.delegateEvents();
+      this.children.forEach(function (child) {
+        return child.hydrate(_this3.el);
+      });
+    } else {
+      this.children[0].hydrate(parent);
+      this.el = this.children[0].el;
+    }
+    // Call `onRender` lifecycle method.
     this.onRender.call(this, 'hydrate');
+    // Return `this` for chaining.
+    return this;
   }
 
   /*
    * Used internally on the render process.
    * Reuse a view that has `key` when its parent is rendered.
+   * @param parent {node} The parent node.
+   * @return {Rasti.Component} The component instance.
    */;
   _proto.recycle = function recycle(parent) {
     // Find element to be replaced. It has same id.
-    var toBeReplaced = this.findElement(parent);
+    var toBeReplaced = (this.isContainer() ? this.children[0] : this).findElement(parent);
     // Replace it with this.el.
     toBeReplaced.replaceWith(this.el);
     // Call `onRender` lifecycle method.
     this.onRender.call(this, 'recycle');
+    // Return `this` for chaining.
+    return this;
   }
 
   /*
    * Override. Add some custom logic to super `destroy` method.
+   * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.
    */;
   _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) 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;
   }
 
   /**
@@ -257,12 +288,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'), '');
   }
 
   /*
@@ -272,17 +303,20 @@ var Component = /*#__PURE__*/function (_View) {
     var _this5 = this;
     // Normally there won't be any children, but if there are, destroy them.
     this.destroyChildren();
-    // Get tag name.
-    var tag = this.tag || 'div';
-    // Get attributes.
-    var attributes = this.getAttributes().html;
     // Replace expressions of inner template.
-    var inner = this.template && this.template.inner && this.replaceExpressions(this.template.inner, function (component) {
+    var close = this.template && this.template.inner;
+    var inner = close && this.replaceExpressions(this.template.inner, function (component) {
       // Add child component.
       return _this5.addChild(component);
     });
+    // If component is a container, return inner which will be an expression thats return a single component.
+    if (this.isContainer()) return inner;
+    // Get tag name.
+    var tag = this.tag || 'div';
+    // Get attributes.
+    var attributes = this.getAttributes().html;
     // Generate outer template.
-    return inner ? "<" + tag + " " + attributes + ">" + inner + "</" + tag + ">" : "<" + tag + " " + attributes + " />";
+    return close ? "<" + tag + " " + attributes + ">" + inner + "</" + tag + ">" : "<" + tag + " " + attributes + " />";
   }
 
   /*
@@ -292,31 +326,33 @@ var Component = /*#__PURE__*/function (_View) {
     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 `this.tag` element.
-    if (!this.el) {
-      this.el = this.createElement(this.tag);
-      this.delegateEvents();
+    if (!this.isContainer()) {
+      // 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.
+      var attributes = this.getAttributes();
+      // Remove attributes.
+      Object.keys(attributes.remove).forEach(function (key) {
+        _this6.el.removeAttribute(key);
+      });
+      // Add attributes.
+      Object.keys(attributes.add).forEach(function (key) {
+        _this6.el.setAttribute(key, attributes.add[key]);
+      });
     }
-    // Set `this.el` attributes.
-    var attributes = this.getAttributes();
-    // Remove attributes.
-    Object.keys(attributes.remove).forEach(function (key) {
-      _this6.el.removeAttribute(key);
-    });
-    // 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 && this.template.inner) {
-      var previousChildren = this.children;
-      this.children = [];
-      var nextChildren = [];
-      var recycledChildren = [];
       // Store active element.
       var activeElement = document.activeElement;
+      var nextChildren = [];
+      var recycledChildren = [];
+      var previousChildren = this.children;
+      this.children = [];
       // Replace expressions. Set html inside of `this.el`.
-      this.el.innerHTML = this.replaceExpressions(this.template.inner, function (component) {
+      var inner = this.replaceExpressions(this.template.inner, function (component) {
         var out = component;
         // Check if child already exists.
         var found = component.key && previousChildren.find(function (previousChild) {
@@ -338,14 +374,32 @@ var Component = /*#__PURE__*/function (_View) {
         // Component html.
         return out;
       });
-      // Add new children. Hydrate them.
-      nextChildren.forEach(function (nextChild) {
-        _this6.addChild(nextChild).hydrate(_this6.el);
-      });
-      // Replace children root elements with recycled components.
-      recycledChildren.forEach(function (recycledChild) {
-        _this6.addChild(recycledChild).recycle(_this6.el);
-      });
+      if (this.isContainer()) {
+        if (nextChildren[0]) {
+          var fragment = this.createElement('template');
+          fragment.innerHTML = inner;
+          // Add new child to dom fragment and hydrate it.
+          this.addChild(nextChildren[0]).hydrate(fragment.content);
+          // Get next child element.
+          var nextEl = fragment.content.children[0];
+          // If `this.el` is present, replace it with nextEl.
+          if (this.el) this.el.replaceWith(nextEl);
+          // Set `this.el` to nextEl.
+          this.el = nextEl;
+        } else if (recycledChildren[0]) {
+          this.addChild(recycledChildren[0]);
+        }
+      } else {
+        this.el.innerHTML = inner;
+        // Add new children. Hydrate them.
+        nextChildren.forEach(function (nextChild) {
+          _this6.addChild(nextChild).hydrate(_this6.el);
+        });
+        // Replace children root elements with recycled components.
+        recycledChildren.forEach(function (recycledChild) {
+          _this6.addChild(recycledChild).recycle(_this6.el);
+        });
+      }
       // Destroy unused children.
       previousChildren.forEach(function (previousChild) {
         var found = recycledChildren.indexOf(previousChild) > -1;
@@ -399,11 +453,11 @@ var Component = /*#__PURE__*/function (_View) {
       if (hydrate) {
         view.toString();
       } else {
-        var fragment = document.createElement('template');
+        var fragment = this.prototype.createElement('template');
         // Add html text into element inner html.
         fragment.innerHTML = view;
         // Add to dom.
-        el.appendChild(fragment.content);
+        el.appendChild(fragment.content.children[0]);
       }
       view.hydrate(el);
     }
@@ -423,13 +477,19 @@ var Component = /*#__PURE__*/function (_View) {
    * - If the function returns a component instance, it will be added as a child component.
    * - If the function returns an array, each item will be evaluated as above.
    * @static
-   * @param {string} HTML template for the component.
+   * @param {string} HTML template for the component. Or a function that mounts a sub component.
    * @return {Rasti.Component}
    */;
   Component.create = function create(strings) {
     for (var _len2 = arguments.length, expressions = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       expressions[_key2 - 1] = arguments[_key2];
     }
+    // Containers can be created using create as a functions instead of a tagged template.
+    if (typeof strings === 'function') {
+      expressions = [strings];
+      strings = ['', ''];
+    }
+    var tag, attributes, inner, events;
     var parts = [];
     // Replace functions and objects interpolations with `{number}`.
     // Where `number` is the index on expressions array.
@@ -444,31 +504,35 @@ 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]+)(.*?)\/>$/);
-    // Parse attributes from html text into an object.
-    var attributes = extractAttributes(result[2]);
-    // Events to be delegated.
-    var events = {};
-    // Filter events. To generate events object.
-    // Generate attributes object, replace placeholders with expressions.
-    attributes = Object.keys(attributes).reduce(function (out, key) {
-      // Is Event?
-      var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);
-      // Is placeholder for function or object?
-      // Get expression or value.
-      var value = getExpression(attributes[key], expressions);
-      // Is event handler. Add to events object.
-      if (matchKey && matchKey[1]) {
-        var eventType = matchKey[1].toLowerCase();
-        Object.keys(value).forEach(function (selector) {
-          return events["" + eventType + (selector === '&' ? '' : " " + selector)] = value[selector];
-        });
+    var result = main.match(/^<([a-z]+[1-6]?)(.*?)>(.*)<\/\1>$/) || main.match(/^<([a-z]+)(.*?)\/>$/);
+    if (result) {
+      tag = result[1];
+      inner = result[3];
+      // Parse attributes from html text into an object.
+      attributes = extractAttributes(result[2]);
+      // Events to be delegated.
+      events = {};
+      // Filter events. To generate events object.
+      // Generate attributes object, replace placeholders with expressions.
+      attributes = Object.keys(attributes).reduce(function (out, key) {
+        // Is Event?
+        var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);
+        // Is placeholder for function or object?
+        // Get expression or value.
+        var value = getExpression(attributes[key], expressions);
+        // Is event handler. Add to events object.
+        if (matchKey && matchKey[1]) {
+          var eventType = matchKey[1].toLowerCase();
+          Object.keys(value).forEach(function (selector) {
+            return events["" + eventType + (selector === '&' ? '' : " " + selector)] = value[selector];
+          });
+          return out;
+        }
+        // Is attribute. Add to attributes object.
+        out[key] = value;
         return out;
-      }
-      // Is attribute. Add to attributes object.
-      out[key] = value;
-      return out;
-    }, {});
+      }, {});
+    } else inner = main;
     var Current = this;
     // Create subclass for this component.
     return Current.extend({
@@ -479,12 +543,12 @@ var Component = /*#__PURE__*/function (_View) {
       // Set template.
       template: {
         // Template for innerHTML of root element.
-        inner: result[3],
+        inner: inner,
         // Template expressions.
         expressions: expressions
       },
       // Set root element tag.
-      tag: result[1]
+      tag: tag
     });
   };
   return Component;

package/es/View.js

@@ -111,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.
+   * @param {object} options Options object or any arguments passed to `destroy` method will be passed to `onDestroy` method.
    * @return {Rasti.View} Return `this` for chaining.
    */;
   _proto.destroy = function destroy() {