rasti 2.0.0-alpha.0 → 2.0.0-alpha.2

package/es/Component.js

@@ -1,7 +1,7 @@
 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';
+import View from './View.js';
 
 // This options keys will be extended on view instance.
 var componentOptions = {
@@ -27,6 +27,14 @@ var getAttributes = function getAttributes(text) {
   return attributes;
 };
 
+/*
+ * Helper function. If first arg is a placeholder for an expression, return the expression.
+ */
+var getExpression = function getExpression(placeholder, expressions) {
+  var match = placeholder.match(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\d+)')));
+  return match && match[1] ? expressions[match[1]] : placeholder;
+};
+
 /*
  * Helper function. If expression is a function, call it with context and args.
  */
@@ -41,14 +49,21 @@ 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 />
  * Unlike views, which are render-agnostic, components have a specific set of rendering 
- * guidelines that allow for a more declarative development style.
+ * guidelines that allow for a more declarative development style.<br />
+ * Components are defined with the `create` static method, which takes a tagged template.
  * @module
+ * @extends Rasti.View
  * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.
+ * @property {string} key A unique key to identify the component. Used to recycle child components.
+ * @property {object} model A `Rasti.Model` or any emitter object containing data and business logic.
+ * @property {object} state A `Rasti.Model` or any emitter object containing data and business logic, to be used as internal state.
  * @example
  * import { Component, Model } from 'rasti';
  * // Create Timer component.
  * const Timer = Component.create`
- *    <div>Seconds: <span>${({ model }) => model.seconds}</span></div>
+ *     <div>
+ *         Seconds: <span>${({ model }) => model.seconds}</span>
+ *     </div>
  * `;
  * // Create model to store seconds.
  * const model = new Model({ seconds: 0 });
@@ -72,8 +87,9 @@ var Component = /*#__PURE__*/function (_View) {
     // 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.
-    "rasti-component-" + _this.uid;
+    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));
@@ -156,26 +172,37 @@ var Component = /*#__PURE__*/function (_View) {
   /*
    * Replace expressions.
    */;
-  _proto.replaceExpressions = function replaceExpressions(string, parseExpressionResult) {
+  _proto.replaceExpressions = function replaceExpressions(string, addChild) {
     var _this3 = this;
-    return string.replace(/{(\d+)}/g, function (match) {
-      // Get expression index.
-      var idx = match.match(/{(\d+)}/)[1];
+    return string.replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\d+)'), 'g'), function (match) {
+      var expression = getExpression(match, _this3.template.expressions);
       // Eval expression. Pass view as argument.
-      var result = _this3.template.expressions[idx].call(_this3, _this3);
+      var result = evalExpression(expression, _this3, _this3);
       // Treat all expressions as arrays.
       var results = result instanceof Array ? result : [result];
       // Replace expression with the result of the evaluation.
-      return results.reduce(function (out, current) {
+      return results.reduce(function (out, result) {
+        var parsed;
+        // If result is true, replace it with a placeholder.
+        if (result === true) parsed = Component.TRUE_PLACEHOLDER;
+        // If result is false, replace it with a placeholder.
+        else if (result === false) parsed = Component.FALSE_PLACEHOLDER;
+        // Replace null or undefined with empty string.
+        else if (result === null || typeof result === 'undefined') parsed = '';
+        // If result is a view, call addChild callback.
+        else if (result && typeof result.render === 'function') parsed = addChild(result);
+        // Return expression itself.
+        else parsed = result;
         // Concatenate expressions.
-        out += parseExpressionResult(current);
-        return out;
+        return out + parsed;
       }, '');
     })
     // Replace `attribute="true"` with `attribute`
-    .replace(/([a-z]+)=["|']true["|']/g, '$1')
-    // Replace `attribute="false"` with ``
-    .replace(/([a-z]+)=["|']false["|']/g, '');
+    .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'), '');
   }
 
   /*
@@ -188,16 +215,9 @@ var Component = /*#__PURE__*/function (_View) {
     // 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 (result) {
-      var out = result;
-      // Return empty string if result is null or undefined.
-      if (result === null || typeof result === 'undefined') out = '';
-      // If result is a view, add it to children array.
-      else if (result && typeof result.render === 'function') {
-        // Add child component.
-        _this4.addChild(result);
-      }
-      return out;
+    return this.replaceExpressions(tpl, function (component) {
+      // Add child component.
+      return _this4.addChild(component);
     });
   }
 
@@ -230,44 +250,51 @@ var Component = /*#__PURE__*/function (_View) {
         _this5.el.setAttribute(key, value);
       }
     });
-    var previousChildren = this.children;
-    this.children = [];
-    var nextChildren = [];
-    var recycledChildren = [];
 
-    // Replace expressions.
-    // Set html text inside `this.el`. Make it part of the dom.
-    this.el.innerHTML = this.replaceExpressions(this.template.inner, function (result) {
-      var out = result;
-      // Return empty string if result is null or undefined.
-      if (result === null || typeof result === 'undefined') out = '';
+    // Check for `template.inner`.
+    // Root element may be a self enclosed tag element without innerHTML.
+    if (this.template.inner) {
+      var previousChildren = this.children;
+      this.children = [];
+      var nextChildren = [];
+      var recycledChildren = [];
 
-      // If result is a view, add it to children array.
-      else if (result && typeof result.render === 'function') {
-        var found = result.key && previousChildren.find(function (previousChild) {
-          return previousChild.key === result.key;
+      // Replace expressions.
+      // Set html text inside `this.el`. Make it part of the dom.
+      this.el.innerHTML = this.replaceExpressions(this.template.inner, function (component) {
+        var out = component;
+        // Check if child already exists.
+        var found = component.key && previousChildren.find(function (previousChild) {
+          return previousChild.key === component.key;
         });
         if (found) {
-          out = "<" + found.tag + " id=\"" + evalExpression(found.id, found, found) + "\"></" + found.tag + ">";
+          // If child already exists, replace it html by its root element.
+          out = "<" + found.tag + " id=\"" + found.id + "\"></" + found.tag + ">";
+          // Add child to recycled children.
           recycledChildren.push(found);
-          result.destroy();
+          // Destroy new child component. Use recycled one instead.
+          component.destroy();
         } else {
-          nextChildren.push(result);
+          // Not found. Add new child component.
+          nextChildren.push(component);
         }
-      }
-      return out;
-    });
-    nextChildren.forEach(function (nextChild) {
-      _this5.addChild(nextChild).hydrate(_this5.el);
-    });
-    recycledChildren.forEach(function (recycledChild) {
-      _this5.el.replaceChild(_this5.addChild(recycledChild).el, recycledChild.findElement(_this5.el));
-    });
-    previousChildren.forEach(function (previousChild) {
-      var found = recycledChildren.indexOf(previousChild) > -1;
-      if (!found) previousChild.destroy();
-    });
-
+        // Component html.
+        return out;
+      });
+      // Add new children. Hydrate them.
+      nextChildren.forEach(function (nextChild) {
+        _this5.addChild(nextChild).hydrate(_this5.el);
+      });
+      // Replace children root elements with recycled components.
+      recycledChildren.forEach(function (recycledChild) {
+        _this5.el.replaceChild(_this5.addChild(recycledChild).el, recycledChild.findElement(_this5.el));
+      });
+      // Destroy unused children.
+      previousChildren.forEach(function (previousChild) {
+        var found = recycledChildren.indexOf(previousChild) > -1;
+        if (!found) previousChild.destroy();
+      });
+    }
     // Call onRender lifecycle method.
     this.onRender.call(this);
     // Return this for chaining.
@@ -301,7 +328,7 @@ var Component = /*#__PURE__*/function (_View) {
    * @param {object} options The view options.
    * @param {node} el Dom element to append the view element.
    * @param {boolean} hydrate If true, the view will use existing html.
-   * @return {Rasti.View}
+   * @return {Rasti.Component}
    */;
   Component.mount = function mount() {
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -326,9 +353,19 @@ var Component = /*#__PURE__*/function (_View) {
     return view;
   }
   /**
-   * Tagged template that receives an HTML string, 
-   * and returns a `Component`.
+   * Takes a tagged template containing an HTML string, 
+   * and returns a new `Component` class.
+   * - The template outer tag and attributes will be used to create the view's root element.
+   * - Boolean attributes should be passed in the form of `attribute="${() => true}"`.
+   * - Event handlers should be passed, at the root element, in the form of `onEventName=${{'selector' : listener }}`. Where `selector` is a css selector. The event will be delegated to the view's root element.
+   * - The template inner HTML will be used as the view's template.
+   * - Template interpolations that are functions will be evaluated on the render process. Receiving the view instance as argument. And being bound to it.
+   * - If the function returns `null`, `undefined`, `false` or empty string, the interpolation won't render any content.
+   * - If the function returns a component instance, it will be added as a child component.
+   * - If the function returns an array, each item will be evaluated as above.
    * @static
+   * @param {string} HTML template for the 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++) {
@@ -342,25 +379,28 @@ var Component = /*#__PURE__*/function (_View) {
       parts.push(string);
       // Add expression placeholder for later or expression eval.
       if (expressions[i]) {
-        parts.push(typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ? "{" + i + "}" : expressions[i]);
+        parts.push(typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ? Component.EXPRESSION_PLACEHOLDER_TEMPLATE(i) : expressions[i]);
       }
     });
     // 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>$/);
+    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]);
+    // Events to be delegated.
     var events = {};
-    // Filter events. Replace placeholders `{number}` with expressions.
+    // Filter events. To generate events object.
+    // Generate attributes object, replace placeholders with expressions.
     attributes = Object.keys(attributes).reduce(function (out, key) {
-      var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/); // Is Event?
-      var matchValue = attributes[key].match(/{(\d+)}/); // Is placeholder for function or object?
+      // Is Event?
+      var matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);
+      // Is placeholder for function or object?
       // Get expression or value.
-      var value = matchValue && matchValue[1] ? expressions[matchValue[1]] : attributes[key];
-      // Is event handler.
+      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) {
@@ -368,12 +408,11 @@ var Component = /*#__PURE__*/function (_View) {
         });
         return out;
       }
-      // Is function expression.
+      // Is attribute. Add to attributes object.
       out[key] = value;
       return out;
     }, {});
     var Current = this;
-
     // Create subclass for this component.
     return Current.extend({
       // Set events.
@@ -395,4 +434,12 @@ var Component = /*#__PURE__*/function (_View) {
   };
   return Component;
 }(View);
-export { Component as default };
+export { Component as default };
+Component.ID_TEMPLATE = function (uid) {
+  return "rasti-component-" + uid;
+};
+Component.EXPRESSION_PLACEHOLDER_TEMPLATE = function (idx) {
+  return "__RASTI_EXPRESSION{" + idx + "}";
+};
+Component.TRUE_PLACEHOLDER = '__RASTI_TRUE';
+Component.FALSE_PLACEHOLDER = '__RASTI_FALSE';

package/es/Model.js

@@ -1,7 +1,7 @@
 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';
+import Emitter from './Emitter.js';
 /**
  * - Orchestrates data and business logic.
  * - Emits events when data changes.
@@ -15,6 +15,7 @@ import Emitter from './Emitter';
  * from `this.attributes`, and a setter is created to set the model property in `this.attributes` and emit `change` 
  * and `change:attribute` events.
  * @module
+ * @extends Rasti.Emitter
  * @param {object} attrs Object containing model attributes to extend `this.attributes`. Getters and setters are generated for `this.attributtes`, in order to emit `change` events.
  * @example
  * import { Model } from 'rasti';

package/es/View.js

@@ -1,7 +1,7 @@
 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';
+import Emitter from './Emitter.js';
 
 // This options keys will be extended on view instance.
 var viewOptions = {
@@ -27,6 +27,7 @@ var viewOptions = {
  * All element lookups are scoped to this element, and any rendering or DOM manipulations should be done inside it. 
  * If `this.el` is not present, an element will be created using `this.tag` (defaulting to div) and `this.attributes`.
  * @module
+ * @extends Rasti.Emitter
  * @param {object} options Object containing options. The following keys will be merged to `this`: el, tag, attributes, events, model, template, onDestroy.
  * @property {node} el Every view has a root element, `this.el`. If not present it will be created.
  * @property {string} tag If `this.el` is not present, an element will be created using `this.tag`. Default is `div`.

package/es/index.js

@@ -1,5 +1,5 @@
-import Emitter from './Emitter';
-import Model from './Model';
-import View from './View';
-import Component from './Component';
+import Emitter from './Emitter.js';
+import Model from './Model.js';
+import View from './View.js';
+import Component from './Component.js';
 export { Emitter, Model, View, Component };