rasti 2.0.0 → 2.1.0-alpha.0

package/src/Component.js

@@ -91,6 +91,21 @@ export default class Component extends View {
         this.onCreate.apply(this, arguments);
     }
 
+    /*
+    * 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}
+    */
+    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.
@@ -102,7 +117,7 @@ export default class Component extends 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) :
@@ -113,6 +128,8 @@ export default class Component extends View {
 
     /*
      * Find view's element on parent node, using id.
+     * @param parent {node} The parent node.
+     * @return {node} The component's element.
      */
     findElement(parent) {
         return (parent || document).querySelector(`#${this.id}`);
@@ -120,6 +137,7 @@ export default class Component extends View {
 
     /*
      * Eval attributes expressions.
+     * @return {object} Object containing add, remove and html properties.
      */
     getAttributes() {
         const add = { id : this.id };
@@ -153,37 +171,56 @@ export default class Component extends 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.
      */
     hydrate(parent) {
-        this.el = this.findElement(parent);
-        this.delegateEvents();
-        this.children.forEach(child => child.hydrate(this.el));
+        if (!this.isContainer()) {
+            this.el = this.findElement(parent);
+            this.delegateEvents();
+            this.children.forEach(child => child.hydrate(this.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.
      */
     recycle(parent) {
         // Find element to be replaced. It has same id.
-        const toBeReplaced = this.findElement(parent);
+        const 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.
      */
     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) 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;
     }
 
     /**
@@ -247,12 +284,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'), '');
     }
 
     /*
@@ -261,19 +299,21 @@ export default class Component extends View {
     toString() {
         // Normally there won't be any children, but if there are, destroy them.
         this.destroyChildren();
-        // Get tag name.
-        const tag = this.tag || 'div';
-        // Get attributes.
-        const attributes = this.getAttributes().html;
         // Replace expressions of inner template.
-        const inner = this.template &&
-            this.template.inner &&
+        const close = this.template && this.template.inner; 
+        const inner = close &&
             this.replaceExpressions(this.template.inner, (component) => {
                 // Add child component.
                 return this.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.
+        const tag = this.tag || 'div';
+        // Get attributes.
+        const attributes = this.getAttributes().html;
         // Generate outer template.
-        return inner ?
+        return close ?
             `<${tag} ${attributes}>${inner}</${tag}>` :
             `<${tag} ${attributes} />`;
     }
@@ -284,33 +324,36 @@ export default class Component extends View {
     render() {
         // 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.
+            const attributes = this.getAttributes();
+            // Remove attributes.
+            Object.keys(attributes.remove).forEach(key => {
+                this.el.removeAttribute(key);
+            });
+            // Add attributes.
+            Object.keys(attributes.add).forEach(key => {
+                this.el.setAttribute(key, attributes.add[key]);
+            });
         }
-        // Set `this.el` attributes.
-        const attributes = this.getAttributes();
-        // Remove attributes.
-        Object.keys(attributes.remove).forEach(key => {
-            this.el.removeAttribute(key);
-        });
-        // Add attributes.
-        Object.keys(attributes.add).forEach(key => {
-            this.el.setAttribute(key, attributes.add[key]);
-        });
         // Check for `template.inner` to see if view has innerHTML.
         if (this.template && this.template.inner) {
-            const previousChildren = this.children;
-
-            this.children = [];
+            // Store active element.
+            const activeElement = document.activeElement;
 
             const nextChildren = [];
             const recycledChildren = [];
-            // Store active element.
-            const activeElement = document.activeElement;
+
+            const previousChildren = this.children;
+            this.children = [];
             // Replace expressions. Set html inside of `this.el`.
-            this.el.innerHTML = this.replaceExpressions(this.template.inner, (component) => {
+            const inner = this.replaceExpressions(this.template.inner, (component) => {
                 let out = component;
                 // Check if child already exists.
                 const found = component.key && previousChildren.find(
@@ -333,14 +376,33 @@ export default class Component extends View {
                 // Component html.
                 return out;
             });
-            // Add new children. Hydrate them.
-            nextChildren.forEach(nextChild => {
-                this.addChild(nextChild).hydrate(this.el);
-            });
-            // Replace children root elements with recycled components.
-            recycledChildren.forEach(recycledChild => {
-                this.addChild(recycledChild).recycle(this.el);
-            });
+
+            if (this.isContainer()) {
+                if (nextChildren[0]) {
+                    const 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.
+                    const 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(nextChild => {
+                    this.addChild(nextChild).hydrate(this.el);
+                });
+                // Replace children root elements with recycled components.
+                recycledChildren.forEach(recycledChild => {
+                    this.addChild(recycledChild).recycle(this.el);
+                });
+            }
             // Destroy unused children.
             previousChildren.forEach(previousChild => {
                 const found = recycledChildren.indexOf(previousChild) > -1;
@@ -394,11 +456,11 @@ export default class Component extends View {
             if (hydrate) {
                 view.toString();
             } else {
-                const fragment = document.createElement('template');
+                const 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);
         }
@@ -418,10 +480,18 @@ export default class Component extends 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}
      */
     static create(strings, ...expressions) {
+        // Containers can be created using create as a functions instead of a tagged template.
+        if (typeof strings === 'function') {
+            expressions = [strings];
+            strings = ['', ''];
+        }
+
+        let tag, attributes, inner, events;
+
         const parts = [];
         // Replace functions and objects interpolations with `{number}`.
         // Where `number` is the index on expressions array.
@@ -440,31 +510,37 @@ 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]+)(.*?)\/>$/);
-        // Parse attributes from html text into an object.
-        let attributes = extractAttributes(result[2]);
-        // Events to be delegated.
-        let events = {};
-        // Filter events. To generate events object.
-        // Generate attributes object, replace placeholders with expressions.
-        attributes = Object.keys(attributes).reduce((out, key) => {
-            // Is Event?
-            const matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);
-            // Is placeholder for function or object?
-            // Get expression or value.
-            const value = getExpression(attributes[key], expressions);
-            // Is event handler. Add to events object.
-            if (matchKey && matchKey[1]) {
-                const eventType = matchKey[1].toLowerCase();
-                Object.keys(value).forEach(
-                    selector => events[`${eventType}${selector === '&' ? '' : ` ${selector}`}`] = value[selector]
-                );
+        const 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((out, key) => {
+                // Is Event?
+                const matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);
+                // Is placeholder for function or object?
+                // Get expression or value.
+                const value = getExpression(attributes[key], expressions);
+                // Is event handler. Add to events object.
+                if (matchKey && matchKey[1]) {
+                    const eventType = matchKey[1].toLowerCase();
+                    Object.keys(value).forEach(
+                        selector => 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;
 
         const Current = this;
         // Create subclass for this component.
@@ -476,12 +552,12 @@ export default class Component extends View {
             // Set template.
             template : {
                 // Template for innerHTML of root element.
-                inner : result[3],
+                inner,
                 // Template expressions.
                 expressions,
             },
             // Set root element tag.
-            tag : result[1]
+            tag
         });
     }
 }

package/src/View.js

@@ -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.
+     * @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.
      */
     destroy() {