rasti 2.0.0-alpha.9 → 2.0.1

package/src/Component.js

@@ -47,9 +47,9 @@ const evalExpression = (expression, context, ...args) =>
 
 /**
  * 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 />
+ * making it simple to add child views and build complex user interfaces.  
  * Unlike views, which are render-agnostic, components have a specific set of rendering 
- * guidelines that allow for a more declarative development style.<br />
+ * guidelines that allow for a more declarative development style.  
  * Components are defined with the `create` static method, which takes a tagged template.
  * @module
  * @extends Rasti.View
@@ -74,25 +74,19 @@ const evalExpression = (expression, context, ...args) =>
  */
 export default class Component extends View {
     constructor(options = {}) {
-        super(options);
+        super(...arguments);
         // Extend "this" with options, mapping componentOptions keys.
         Object.keys(options).forEach(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, this, 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(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);
+        if (this.model && this.model.on) this.model.on('change', this.onChange);
+        if (this.state && this.state.on) this.state.on('change', this.onChange);
         // Call life cycle method.
         this.onCreate.apply(this, arguments);
     }
@@ -103,7 +97,18 @@ export default class Component extends View {
      */
     ensureElement() {
         // If el is provided, delegate events.
-        if (this.el) this.delegateEvents();
+        if (this.el) {
+            this.delegateEvents();
+            this.id = this.el.id;
+        }
+        // Ensure id.
+        if (!this.id) {
+            this.id = this.attributes && this.attributes.id ? 
+                // If id is provided, evaluate it.
+                evalExpression(this.attributes.id, this, this) :
+                // Generate a unique id and set it as id attribute.
+                Component.ID_TEMPLATE(this.uid);
+        }
     }
 
     /*
@@ -117,33 +122,32 @@ export default class Component extends View {
      * Eval attributes expressions.
      */
     getAttributes() {
-        const add = {};
+        const add = { id : this.id };
         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 {
-                if (value === null || typeof value === 'undefined') value = '';
-
-                add[key] = value;
-                attrs.push(`${key}="${value}"`);
-            }
-        });
+        const html = [`id="${this.id}"`];
+
+        if (this.attributes) {
+            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] = '';
+                    html.push(key);
+                } else {
+                    if (value === null || typeof value === 'undefined') value = '';
 
-        add.id = this.id;
-        attrs.push(`id="${this.id}"`);
+                    add[key] = value;
+                    html.push(`${key}="${value}"`);
+                }
+            });
+        }
 
-        return { add, remove, html : attrs.join(' ') };
+        return { add, remove, html : html.join(' ') };
     }
 
     /*
@@ -176,10 +180,12 @@ export default class Component extends View {
     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);
-        if (this.state) this.state.off('change', this.onChange);
+        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;
     }
 
     /**
@@ -195,8 +201,8 @@ export default class Component extends View {
      * Maybe comparing new attributes with previous ones and calling
      * render when needed. Or doing some dom transformation.
      * @param model {Rasti.Model} The model that emitted the event.
-     * @param key {string} The key that changed.
-     * @param value {any} The new value.
+     * @param changed {object} Object containing keys and values that has changed.
+     * @param [...args] {any} Any extra arguments passed to set method.
      */
     onChange() {
         this.render();
@@ -243,12 +249,13 @@ export default class Component extends View {
                 }, '');
 
             })
-            // 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'),
+                (match, attribute, quote, placeholder) => 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'), '');
     }
 
     /*
@@ -257,15 +264,21 @@ export default class Component extends View {
     toString() {
         // Normally there won't be any children, but if there are, destroy them.
         this.destroyChildren();
-        // Replace expressions.
-        const inner = this.template.inner && this.replaceExpressions(this.template.inner, (component) => {
-            // Add child component.
-            return this.addChild(component);
-        });
+        // Get tag name.
+        const tag = this.tag || 'div';
+        // Get attributes.
+        const attributes = this.getAttributes().html;
+        // Replace expressions of inner template.
+        const close = this.template && this.template.inner; 
+        const inner = close &&
+            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} />`;
+        return close ?
+            `<${tag} ${attributes}>${inner}</${tag}>` :
+            `<${tag} ${attributes} />`;
     }
 
     /*
@@ -290,7 +303,7 @@ export default class Component extends View {
             this.el.setAttribute(key, attributes.add[key]);
         });
         // Check for `template.inner` to see if view has innerHTML.
-        if (this.template.inner) {
+        if (this.template && this.template.inner) {
             const previousChildren = this.children;
 
             this.children = [];
@@ -308,8 +321,10 @@ export default class Component extends View {
                 );
 
                 if (found) {
+                    const tag = found.el.tagName.toLowerCase();
+                    const id = found.el.id;
                     // If child already exists, replace it html by its root element.
-                    out = `<${found.tag} id="${found.id}"></${found.tag}>`;
+                    out = `<${tag} id="${id}"></${tag}>`;
                     // Add child to recycled children.
                     recycledChildren.push(found);
                     // Destroy new child component. Use recycled one instead.
@@ -374,7 +389,7 @@ export default class Component extends View {
      * @param {boolean} hydrate If true, the view will use existing html.
      * @return {Rasti.Component}
      */
-    static mount(options = {}, el, hydrate) {
+    static mount(options, el, hydrate) {
         // Instantiate view.
         const view = new this(options);
         // If `el` is passed, mount component.
@@ -393,6 +408,7 @@ export default class Component extends View {
         // Return view instance.
         return view;
     }
+
     /**
      * Takes a tagged template containing an HTML string, 
      * and returns a new `Component` class.
@@ -427,7 +443,7 @@ export default class Component extends View {
         // Create output text for main template.
         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]+)(.*?)\/>$/);
+        const result = main.match(/^<([a-z]+[1-6]?)(.*?)>(.*)<\/\1>$/) || main.match(/^<([a-z]+)(.*?)\/>$/);
         // Parse attributes from html text into an object.
         let attributes = extractAttributes(result[2]);
         // Events to be delegated.

package/src/Emitter.js

@@ -1,7 +1,7 @@
 /**
  * `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 /> 
+ * in your applications.  
+ * It can be extended to create new classes that have the ability to emit and bind custom named events.   
  * Emitter is used by `Model` and `View` classes, which inherit from it to implement 
  * event-driven functionality.
  *

package/src/Model.js

@@ -3,10 +3,10 @@ import Emitter from './Emitter.js';
  * - 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 />
+ * A `Model` manages an internal table of data attributes and triggers change events when any of its data is modified.  
  * 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 />
+ * that contain all the necessary functions for manipulating their specific data.  
+ * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.  
  * 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` 
@@ -90,11 +90,13 @@ export default class Model extends Emitter {
     }
 
     /**
-     * Set an attribute into `this.attributes`.
-     * Emit `change` and `change:attribute` if a value change.
+     * Set an attribute into `this.attributes`.  
+     * Emit `change` and `change:attribute` if a value change.  
      * Could be called in two forms, `this.set('key', value)` and
-     * `this.set({ key : value })`.
-     * This method is called internally by generated setters.
+     * `this.set({ key : value })`.  
+     * This method is called internally by generated setters.  
+     * The `change` event listener will receive the model instance, an object containing the changed attributes, and the rest of the arguments passed to `set` method.  
+     * The `change:attribute` event listener will receive the model instance, the new attribute value, and the rest of the arguments passed to `set` method.
      * @param {string} key Attribute key or object containing keys/values.
      * @param [value] Attribute value.
      * @return {this} This model.

package/src/View.js

@@ -17,10 +17,10 @@ const viewOptions = {
  * - Sends captured input to the model.
  *
  * 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 />
+ * However, views can also be independent and have no associated data.  
  * 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 />
+ * emitted by the models to re-render themselves based on changes.  
+ * Each `View` has a root element, `this.el`, which is used for event delegation.  
  * 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
@@ -104,6 +104,7 @@ export default class View extends Emitter {
     /**
      * Destroy the view.
      * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.
+     * @return {Rasti.View} Return `this` for chaining.
      */
     destroy() {
         // Call destroy on children.
@@ -180,18 +181,21 @@ export default class View extends Emitter {
 
     /**
      * Remove `this.el` from DOM.
+     * @return {Rasti.View} Return `this` for chaining.
      */
     removeElement() {
         this.el.parentNode.removeChild(this.el);
+        // Return `this` for chaining.
+        return this;
     }
 
     /**
-     * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, uses `this.events` as the source.<br />
+     * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, uses `this.events` as the source.  
      * Events are written in the format `{'event selector' : 'listener'}`. The listener may be either the name of a method on the view, or a direct function body.
-     * Omitting the selector causes the event to be bound to the view's root element (`this.el`).<br />
+     * Omitting the selector causes the event to be bound to the view's root element (`this.el`).  
      * By default, `delegateEvents` is called within the View's constructor, 
-     * so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself. <br />
-     * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.<br />
+     * so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself.   
+     * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.  
      * When `delegateEvents` is run again, perhaps with a different events hash, all listeners are removed and delegated afresh.
      * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.
      * @return {Rasti.View} Return `this` for chaining.