rasti 1.1.1 → 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,127 +1,124 @@
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 /**
- * 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 = function () {
-    function Emitter() {
-        _classCallCheck(this, Emitter);
+var Emitter = /*#__PURE__*/function () {
+  function Emitter() {}
+  var _proto = Emitter.prototype;
+  /**
+   * Adds event listener.
+   * @param {string} type Type of the event (e.g. `change`).
+   * @param {function} listener Callback function to be called when the event is emitted.
+   * @example
+   * this.model.on('change', this.render.bind(this)); // Re render when model changes.
+   */
+  _proto.on = function on(type, listener) {
+    if (typeof listener !== 'function') {
+      throw TypeError('Listener must be a function');
     }
-
-    /**
-     * Adds event listener.
-     * @param {string} type Type of the event (e.g. `change`).
-     * @param {function} listener Callback function to be called when the event is emitted.
-     * @example
-     * this.model.on('change', this.render.bind(this)); // Re render when model changes.
-     */
-    Emitter.prototype.on = function on(type, listener) {
-        if (typeof listener !== 'function') {
-            throw TypeError('Listener must be a function');
-        }
-
-        if (!this.listeners) this.listeners = {};
-        if (!this.listeners[type]) this.listeners[type] = [];
-
-        this.listeners[type].push(listener);
-    };
-
-    /**
-     * Adds event listener that executes once.
-     * @param {string} type Type of the event (e.g. `change`).
-     * @param {function} listener Callback function to be called when the event is emitted.
-     * @example
-     * this.model.once('change', () => console.log('This will happen once'));
-     */
-
-
-    Emitter.prototype.once = function once(type, _listener2) {
-        if (typeof _listener2 === 'function') {
-            var self = this;
-            var _listener = _listener2;
-
-            _listener2 = function listener() {
-                _listener.apply(undefined, arguments);
-                self.off(type, _listener2);
-            };
-        }
-        this.on(type, _listener2);
-    };
-
-    /**
-     * Removes event listeners.
-     * @param {string} [type] Type of the event (e.g. `change`). If is not provided, it removes all listeners.
-     * @param {function} [listener] Callback function to be called when the event is emitted. If listener is not provided, it removes all listeners for specified type.
-     * @example
-     * this.model.off('change'); // Stop listening to changes.
-     */
-
-
-    Emitter.prototype.off = function off(type, listener) {
-        if (!type) {
-            this.listeners = {};
-        } else {
-            if (!listener) {
-                delete this.listeners[type];
-            } else {
-                var listeners = this.listeners[type];
-                if (listeners) {
-                    var copy = listeners.slice();
-
-                    copy.forEach(function (fn, idx) {
-                        if (fn === listener) listeners.splice(idx, 1);
-                    });
-
-                    if (!listeners.length) {
-                        delete this.listeners[type];
-                    }
-                }
-            }
-        }
-    };
-
-    /**
-     * Emits event of specified type. Listeners will receive specified arguments.
-     * @param {string} type Type of the event (e.g. `change`).
-     * @param {any} [...args] Arguments to be passed to listener.
-     * @example
-     * this.emit('invalid'); // Emit validation error event.
-     */
-
-
-    Emitter.prototype.emit = function emit(type) {
-        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-            args[_key - 1] = arguments[_key];
+    if (!this.listeners) this.listeners = {};
+    if (!this.listeners[type]) this.listeners[type] = [];
+    this.listeners[type].push(listener);
+  }
+
+  /**
+   * Adds event listener that executes once.
+   * @param {string} type Type of the event (e.g. `change`).
+   * @param {function} listener Callback function to be called when the event is emitted.
+   * @example
+   * this.model.once('change', () => console.log('This will happen once'));
+   */;
+  _proto.once = function once(type, _listener2) {
+    if (typeof _listener2 === 'function') {
+      var self = this;
+      var _listener = _listener2;
+      _listener2 = function listener() {
+        _listener.apply(void 0, arguments);
+        self.off(type, _listener2);
+      };
+    }
+    this.on(type, _listener2);
+  }
+
+  /**
+   * Removes event listeners.
+   * @param {string} [type] Type of the event (e.g. `change`). If is not provided, it removes all listeners.
+   * @param {function} [listener] Callback function to be called when the event is emitted. If listener is not provided, it removes all listeners for specified type.
+   * @example
+   * this.model.off('change'); // Stop listening to changes.
+   */;
+  _proto.off = function off(type, listener) {
+    if (!type) {
+      this.listeners = {};
+    } else {
+      if (!listener) {
+        delete this.listeners[type];
+      } else {
+        var listeners = this.listeners[type];
+        if (listeners) {
+          var copy = listeners.slice();
+          copy.forEach(function (fn, idx) {
+            if (fn === listener) listeners.splice(idx, 1);
+          });
+          if (!listeners.length) {
+            delete this.listeners[type];
+          }
         }
-
-        var listeners = this.listeners && this.listeners[type];
-
-        if (!listeners || !listeners.length) return;
-
-        var copy = listeners.slice();
-
-        copy.forEach(function (fn) {
-            fn.apply(undefined, args);
-        });
-    };
-
-    return Emitter;
+      }
+    }
+  }
+
+  /**
+   * Emits event of specified type. Listeners will receive specified arguments.
+   * @param {string} type Type of the event (e.g. `change`).
+   * @param {any} [...args] Arguments to be passed to listener.
+   * @example
+   * this.emit('invalid'); // Emit validation error event.
+   */;
+  _proto.emit = function emit(type) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    var listeners = this.listeners && this.listeners[type];
+    if (!listeners || !listeners.length) return;
+    var copy = listeners.slice();
+    copy.forEach(function (fn) {
+      fn.apply(void 0, args);
+    });
+  };
+  return Emitter;
 }();
-
-export default Emitter;
+export { Emitter as default };