rasti 1.1.2 → 2.0.0-alpha.0

package/es/Component.js

@@ -0,0 +1,398 @@
+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';
+
+// This options keys will be extended on view instance.
+var componentOptions = {
+  key: true,
+  state: true,
+  onCreate: true,
+  onChange: true,
+  onRender: true
+};
+
+/*
+ * Helper function. Extract attributes from html tag
+ * @param text {string} html text
+ * @return {object} Object with keys / values representing attributes.
+ */
+var getAttributes = function getAttributes(text) {
+  var attributes = {};
+  var re = /([a-z]+)=?(\S+)?/gi;
+  var result;
+  while ((result = re.exec(text)) !== null) {
+    attributes[result[1]] = result[2] ? result[2].replace(/'|"/g, '') : true;
+  }
+  return attributes;
+};
+
+/*
+ * Helper function. If expression is a function, call it with context and args.
+ */
+var evalExpression = function evalExpression(expression, context) {
+  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    args[_key - 2] = arguments[_key];
+  }
+  return typeof expression === 'function' ? expression.apply(context, args) : expression;
+};
+
+/**
+ * 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.
+ * @module
+ * @param {object} options Object containing options. The following keys will be merged to `this`: model, state, key, onDestroy, onRender, onCreate, onChange.
+ * @example
+ * import { Component, Model } from 'rasti';
+ * // Create Timer component.
+ * const Timer = Component.create`
+ *    <div>Seconds: <span>${({ model }) => model.seconds}</span></div>
+ * `;
+ * // Create model to store seconds.
+ * const model = new Model({ seconds: 0 });
+ * // Mount timer on body.
+ * Timer.mount({ model }, document.body);
+ * // Increment `model.seconds` every second.
+ * 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;
+    // 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.
+    "rasti-component-" + _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));
+    // 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);
+    // Call life cycle method.
+    _this.onCreate.apply(_assertThisInitialized(_this), arguments);
+    return _this;
+  }
+
+  /*
+   * Override. We don't want to ensure an element on instantiation.
+   * We will provide it later.
+   */
+  var _proto = Component.prototype;
+  _proto.ensureElement = function ensureElement() {
+    // If el is provided, delegate events.
+    if (this.el) this.delegateEvents();
+  };
+  _proto.findElement = function findElement(parent) {
+    return (parent || document).querySelector("#" + this.id);
+  }
+
+  /*
+   * Used internally on the render process. Attach the view to the dom element.
+   */;
+  _proto.hydrate = function hydrate(parent) {
+    var _this2 = this;
+    this.el = this.findElement(parent);
+    this.delegateEvents();
+    this.children.forEach(function (child) {
+      return child.hydrate(_this2.el);
+    });
+    this.onRender.call(this);
+  }
+
+  /*
+   * Override. Add some custom logic to super `destroy` method.
+   */;
+  _proto.destroy = function destroy(options) {
+    _View.prototype.destroy.call(this, options);
+    // 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);
+    this.destroyed = true;
+  }
+
+  /**
+   * Lifecycle method. Called when the view is created at the end of the constructor.
+   * @param options {object} The view options.
+   */;
+  _proto.onCreate = function onCreate() {}
+
+  /**
+   * Lifecycle method. Called when model emits `change` event.
+   * By default calls render method.
+   * 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}
+   */;
+  _proto.onChange = function onChange() {
+    this.render();
+  }
+
+  /**
+   * Lifecycle method. Called when the view is rendered.
+   */;
+  _proto.onRender = function onRender() {}
+
+  /**
+   * Lifecycle method. Called when the view is destroyed.
+   */;
+  _proto.onDestroy = function onDestroy() {}
+
+  /*
+   * Replace expressions.
+   */;
+  _proto.replaceExpressions = function replaceExpressions(string, parseExpressionResult) {
+    var _this3 = this;
+    return string.replace(/{(\d+)}/g, function (match) {
+      // Get expression index.
+      var idx = match.match(/{(\d+)}/)[1];
+      // Eval expression. Pass view as argument.
+      var result = _this3.template.expressions[idx].call(_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) {
+        // Concatenate expressions.
+        out += parseExpressionResult(current);
+        return out;
+      }, '');
+    })
+    // Replace `attribute="true"` with `attribute`
+    .replace(/([a-z]+)=["|']true["|']/g, '$1')
+    // Replace `attribute="false"` with ``
+    .replace(/([a-z]+)=["|']false["|']/g, '');
+  }
+
+  /*
+   * Treat the whole view as a HTML string.
+   */;
+  _proto.toString = function toString() {
+    var _this4 = 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 (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;
+    });
+  }
+
+  /*
+   * View render method.
+   */;
+  _proto.render = function render() {
+    var _this5 = 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) {
+      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 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 = '';
+
+      // 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;
+        });
+        if (found) {
+          out = "<" + found.tag + " id=\"" + evalExpression(found.id, found, found) + "\"></" + found.tag + ">";
+          recycledChildren.push(found);
+          result.destroy();
+        } else {
+          nextChildren.push(result);
+        }
+      }
+      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();
+    });
+
+    // Call onRender lifecycle method.
+    this.onRender.call(this);
+    // Return this for chaining.
+    return this;
+  }
+
+  /**
+   * Helper method used to extend a `Component`, creating a subclass.
+   * @static
+   * @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.
+   */;
+  Component.extend = function extend(object) {
+    var Current = this;
+    var Extended = /*#__PURE__*/function (_Current) {
+      _inheritsLoose(Extended, _Current);
+      function Extended() {
+        return _Current.apply(this, arguments) || this;
+      }
+      return Extended;
+    }(Current);
+    Object.assign(Extended.prototype, typeof object === 'function' ? object(Current.prototype) : object);
+    return Extended;
+  }
+
+  /**
+   * Mount the component into the dom.
+   * It instantiate the Component view using options, 
+   * appends its element into the DOM (if `el` is provided).
+   * And returns the view instance.
+   * @static
+   * @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}
+   */;
+  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;
+    // Instantiate view.
+    var view = new this(options);
+
+    // If `el` is passed, mount component.
+    if (el) {
+      if (hydrate) {
+        view.toString();
+      } else {
+        var fragment = document.createElement('template');
+        // Add html text into element inner html.
+        fragment.innerHTML = view;
+        // Add to dom.
+        el.appendChild(fragment.content);
+      }
+      view.hydrate(el);
+    }
+    return view;
+  }
+  /**
+   * Tagged template that receives an HTML string, 
+   * and returns a `Component`.
+   * @static
+   */;
+  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];
+    }
+    var parts = [];
+    // Replace functions and objects interpolations with `{number}`.
+    // Where `number` is the index on expressions array.
+    strings.forEach(function (string, i) {
+      // Add string part.
+      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]);
+      }
+    });
+    // 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>$/);
+    // 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 events = {};
+    // Filter events. Replace placeholders `{number}` 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?
+      // Get expression or value.
+      var value = matchValue && matchValue[1] ? expressions[matchValue[1]] : attributes[key];
+      // Is event handler.
+      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 function expression.
+      out[key] = value;
+      return out;
+    }, {});
+    var Current = this;
+
+    // Create subclass for this component.
+    return Current.extend({
+      // Set events.
+      events: events,
+      // Set attributes.
+      attributes: attributes,
+      // Set template data.
+      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.
+        expressions: expressions
+      },
+      // Set root element tag.
+      tag: result[1]
+    });
+  };
+  return Component;
+}(View);
+export { Component as default };

package/es/Emitter.js

@@ -1,21 +1,39 @@
 /**
- * Emitter is a class that can be extended giving the subclass the ability to emit 
- * and bind custom named events. Model and View inherits from it.
+ * `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 /> 
+ * Emitter is used by `Model` and `View` classes, which inherit from it to implement 
+ * event-driven functionality.
+ *
  * @module
  * @example
  * import { Emitter } from 'rasti';
- * // Define App class, inherits from Emitter.
- * class App extends Emitter {
+ * // Custom cart
+ * class ShoppingCart extends Emitter {
  *     constructor() {
- *         super()
- *         // Fetch data and emit `ready` event.
- *         fetch('/api/init').then(() => this.emit('ready')); 
+ *         super();
+ *         this.items = [];
+ *     }
+ *
+ *     addItem(item) {
+ *         this.items.push(item);
+ *         // Emit a custom event called `itemAdded`.
+ *         // Pass the added item as an argument to the event listener.
+ *         this.emit('itemAdded', item);
  *     }
  * }
- * // Instantiate App.
- * const app = new App();
- * // Add event listener to ready event.
- * app.on('ready', () => console.log('app is ready!'));
+ * // Create an instance of ShoppingCart and Logger
+ * const cart = new ShoppingCart();
+ * // Listen to the `itemAdded` event and log the added item using the logger.
+ * cart.on('itemAdded', (item) => {
+ *     console.log(`Item added to cart: ${item.name} - Price: $${item.price}`);
+ * });
+ * // Simulate adding items to the cart
+ * const item1 = { name : 'Smartphone', price : 1000 };
+ * const item2 = { name : 'Headphones', price : 150 };
+ *
+ * cart.addItem(item1); // Output: "Item added to cart: Smartphone - Price: $1000"
+ * cart.addItem(item2); // Output: "Item added to cart: Headphones - Price: $150"
  */
 var Emitter = /*#__PURE__*/function () {
   function Emitter() {}

package/es/Model.js

@@ -6,37 +6,45 @@ import Emitter from './Emitter';
  * - 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 />
- * Models may handle syncing data with a persistence layer.<br />
- * Design your models as the atomic reusable objects containing all of the helpful functions for 
- * manipulating their particular bit of data.<br /> 
- * Models should be able to be passed around throughout your app, and used anywhere that bit of data is needed.<br />
- * Rasti Models stores its attributes in `this.attributes`, which is extended from `this.defaults` and constructor `attrs` parameter.
- * For every attribute, a getter is generated, which retrieve the model property from `this.attributes`.
- * And a setter, which sets the model property in `this.attributes` and emits `change` and `change:attribute` events.
+ * A `Model` manages an internal table of data attributes and triggers change events when any of its data is modified.<br />
+ * 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 />
+ * 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` 
+ * and `change:attribute` events.
  * @module
  * @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
- * // Todo model
- * class TodoModel extends Rasti.Model {
- *     toggle() {
- *         // Set completed property. This will call a setter that will set `completed` 
- *         // in this.attributes, and emit `change` and `change:completed` events.
- *         this.completed = !this.completed; 
+ * import { Model } from 'rasti';
+ * // Product model
+ * class ProductModel extends Model {
+ *     preinitialize() {
+ *         // The Product model has `name` and `price` default attributes.
+ *         // `defaults` will extend `this.attributes`.
+ *         // Getters and setters are generated for `this.attributes`,
+ *         // in order to emit `change` events.
+ *         this.defaults = {
+ *             name: '',
+ *             price: 0
+ *         };
+ *     }
+ *
+ *     setDiscount(discountPercentage) {
+ *         // Apply a discount to the price property.
+ *         // This will call a setter that will update `price` in `this.attributes`,
+ *         // and emit `change` and `change:price` events.
+ *         const discount = this.price * (discountPercentage / 100);
+ *         this.price -= discount;
  *     }
  * }
- * // Todo model has `title` and `completed` default attributes. `defaults` will extend `this.attributes`. Getters and setters are generated for `this.attributtes`, in order to emit `change` events.
- * TodoModel.prototype.defaults = {
- *     title : '',
- *     completed : false
- * };
- * // Create todo. Pass `title` attribute as argument.
- * const todo = new TodoModel({ title : 'Learn Rasti' });
- * // Listen to `change:completed` event.
- * todo.on('change:completed', () => console.log('Completed:', todo.completed));
- * // Complete todo.
- * todo.toggle(); // Completed: true
+ * // Create a product instance with a name and price.
+ * const product = new ProductModel({ name: 'Smartphone', price: 1000 });
+ * // Listen to the `change:price` event.
+ * product.on('change:price', () => console.log('New Price:', product.price));
+ * // Apply a 10% discount to the product.
+ * product.setDiscount(10); // Output: "New Price: 900"
  */
 var Model = /*#__PURE__*/function (_Emitter) {
   _inheritsLoose(Model, _Emitter);

package/es/View.js

@@ -19,12 +19,13 @@ var viewOptions = {
  * - Handles user input and interactivity.
  * - Sends captured input to the model.
  *
- * A View is an atomic chunk of user interface. It often renders the data from a specific model, 
- * or number of models, but views can also be data-less chunks of UI that stand alone.<br /> 
- * Models must be unaware of views. Instead, views listen to the model "change" events, 
- * and react or re-render themselves appropriately.<br />
- * Views has a root element, `this.el`. That element is used for event delegation. Elements lookups are scoped to that element. And render and dom manipulations should be done inside that element. 
- * If `this.el` is not present, an element will be created using `this.tag` (or `div` as default), and `this.attributes`.<br />
+ * 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 />
+ * 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 />
+ * 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
  * @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.
@@ -34,43 +35,25 @@ var viewOptions = {
  * @property {object} model A `Rasti.Model` or any object containing data and business logic.
  * @property {function} template A function that receives data and returns a markup string (html for example).
  * @example
- * // Counter view.
- * class CounterView extends View {
+ * import { View } from 'rasti';
+ * 
+ * class Timer extends View {
  *     constructor(options) {
  *         super(options);
- *         // Bind method to `this`, to be called as listener.
- *         this.render = this.render.bind(this);
- *         // Listen to model change and re render.
- *         this.model.on('change:count', this.render);
+ *         // Create model to store internal state. Set `seconds` attribute into 0.
+ *         this.model = new Model({ seconds : 0 });
+ *         // Listen to changes in model `seconds` attribute and re render.
+ *         this.model.on('change:seconds', this.render.bind(this));
+ *         // Increment model `seconds` attribute every 1000 milliseconds.
+ *         this.interval = setInterval(() => this.model.seconds++, 1000);
  *     }
- *     onDestroy() {
- *         // Unbind events when destroyed.
- *         this.model.off('change:count', this.render);
- *     }
- *     // Listener method. Called when button is clicked.
- *     onClickIncrement() {
- *         // Increment count on model.
- *         this.model.count++;
+ *
+ *     template(model) {
+ *         return `Seconds: <span>${model.seconds}</span>`;
  *     }
  * }
- * Object.assign(CounterView.prototype, {
- *     // Set delegated events.
- *     // Call `onClickIncrement` when button is clicked.
- *     events : {
- *         'click button' : 'onClickIncrement'
- *     },
- *     // View's template.
- *     template : (model) => `
- *         <div>The count is: ${model.count}</div>
- *         <button>Increment</button>
- *     `
- * });
- * // Model.
- * const model = new Model({ count : 0 });
- * // Instantiate CounterView.
- * const counterView = new CounterView({ model });
- * // Add to DOM.
- * document.body.appendChild(counterView.render().el);
+ * // Render view and append view's element into body.
+ * document.body.appendChild(new Timer().render().el);
  */
 var View = /*#__PURE__*/function (_Emitter) {
   _inheritsLoose(View, _Emitter);
@@ -143,7 +126,7 @@ var View = /*#__PURE__*/function (_Emitter) {
     // Remove `this.el` if "options.remove" is true.
     if (remove) this.removeElement();
     // Call onDestroy lifecycle method
-    this.onDestroy();
+    this.onDestroy.apply(this, arguments);
   }
 
   /**

package/es/index.js

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