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

package/src/Component.js

@@ -1,4 +1,4 @@
-import View from './View';
+import View from './View.js';
 
 // This options keys will be extended on view instance.
 const componentOptions = {
@@ -27,6 +27,14 @@ const getAttributes = text => {
     return attributes;
 };
 
+/*
+ * Helper function. If first arg is a placeholder for an expression, return the expression.
+ */
+const getExpression = (placeholder, expressions) => {
+    const 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.
  */
@@ -39,14 +47,21 @@ 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 />
  * 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 });
@@ -69,7 +84,7 @@ export default class Component extends View {
             // If id is provided, evaluate it.
             evalExpression(this.attributes.id, this, this) :
             // Generate a unique id and set it as id attribute.
-            `rasti-component-${this.uid}`;
+            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);
@@ -148,27 +163,38 @@ export default class Component extends View {
     /*
      * Replace expressions.
      */
-    replaceExpressions(string, parseExpressionResult) {
+    replaceExpressions(string, addChild) {
         return string
-            .replace(/{(\d+)}/g, (match) => {
-                // Get expression index.
-                const idx = match.match(/{(\d+)}/)[1];
+            .replace(new RegExp(Component.EXPRESSION_PLACEHOLDER_TEMPLATE('(\\d+)'), 'g'), (match) => {
+                const expression = getExpression(match, this.template.expressions);
                 // Eval expression. Pass view as argument.
-                const result = this.template.expressions[idx].call(this, this);
+                const result = evalExpression(expression, this, this);
                 // Treat all expressions as arrays.
                 const results = result instanceof Array ? result : [result];
                 // Replace expression with the result of the evaluation.
-                return results.reduce((out, current) => {
+                return results.reduce((out, result) => {
+                    let 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'), '');
     }
 
     /*
@@ -182,17 +208,9 @@ export default class Component extends View {
             this.template.outer :
             this.template.outer.replace(/^<([a-z]+)/, `<$1 id="${this.id}"`);
         // Replace expressions.
-        return this.replaceExpressions(tpl, (result) => {
-            let 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.
-                this.addChild(result);
-            }
-
-            return out;
+        return this.replaceExpressions(tpl, (component) => {
+            // Add child component.
+            return this.addChild(component);
         });
     }
 
@@ -225,50 +243,52 @@ export default class Component extends View {
             }
         });
 
-        const previousChildren = this.children;
-        this.children = [];
-
-        const nextChildren = [];
-        const recycledChildren = [];
-
-        // Replace expressions.
-        // Set html text inside `this.el`. Make it part of the dom.
-        this.el.innerHTML = this.replaceExpressions(this.template.inner, (result) => {
-            let 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') {
-                const found = result.key && previousChildren.find(
-                    previousChild => previousChild.key === result.key
+        // Check for `template.inner`.
+        // Root element may be a self enclosed tag element without innerHTML.
+        if (this.template.inner) {
+            const previousChildren = this.children;
+            this.children = [];
+
+            const nextChildren = [];
+            const recycledChildren = [];
+
+            // Replace expressions.
+            // Set html text inside `this.el`. Make it part of the dom.
+            this.el.innerHTML = this.replaceExpressions(this.template.inner, (component) => {
+                let out = component;
+                // Check if child already exists.
+                const found = component.key && previousChildren.find(
+                    previousChild => 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(nextChild => {
-            this.addChild(nextChild).hydrate(this.el);
-        });
-
-        recycledChildren.forEach(recycledChild => {
-            this.el.replaceChild(this.addChild(recycledChild).el, recycledChild.findElement(this.el));
-        });
-
-        previousChildren.forEach(previousChild => {
-            const found = recycledChildren.indexOf(previousChild) > -1;
-            if (!found) previousChild.destroy();
-        });
-
+                // 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.el.replaceChild(this.addChild(recycledChild).el, recycledChild.findElement(this.el));
+            });
+            // Destroy unused children.
+            previousChildren.forEach(previousChild => {
+                const found = recycledChildren.indexOf(previousChild) > -1;
+                if (!found) previousChild.destroy();
+            });
+        }
         // Call onRender lifecycle method.
         this.onRender.call(this);
         // Return this for chaining.
@@ -302,7 +322,7 @@ export default class Component extends 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}
      */
     static mount(options = {}, el, hydrate) {
         // Instantiate view.
@@ -325,9 +345,19 @@ export default class Component extends 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}
      */
     static create(strings, ...expressions) {
         const parts = [];
@@ -340,7 +370,7 @@ export default class Component extends View {
             if (expressions[i]) {
                 parts.push(
                     typeof expressions[i] === 'function' || typeof expressions[i] === 'object' ?
-                        `{${i}}` :
+                        Component.EXPRESSION_PLACEHOLDER_TEMPLATE(i) :
                         expressions[i]
                 );
             }
@@ -348,19 +378,22 @@ 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>$/);
+        const result = main.match(/^<([a-z]+)(.*?)>(.*)<\/\1>$/) || main.match(/^<([a-z]+)(.*?)\/>$/);
         // Remove events listeners.
         const string = main.replace(/on([A-Z]{1}[a-z]+)+=[^>\s]+/g, '');
         // Parse attributes from html text into an object.
         let attributes = getAttributes(result[2]);
+        // Events to be delegated.
         let 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((out, key) => {
-            const matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/); // Is Event?
-            const matchValue = attributes[key].match(/{(\d+)}/); // Is placeholder for function or object?
+            // Is Event?
+            const matchKey = key.match(/on(([A-Z]{1}[a-z]+)+)/);
+            // Is placeholder for function or object?
             // Get expression or value.
-            const value = matchValue && matchValue[1] ? expressions[matchValue[1]] : attributes[key];
-            // Is event handler.
+            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(
@@ -368,13 +401,12 @@ export default class Component extends View {
                 );
                 return out;
             }
-            // Is function expression.
+            // Is attribute. Add to attributes object.
             out[key] = value;
             return out;
         }, {});
 
         const Current = this;
-
         // Create subclass for this component.
         return Current.extend({
             // Set events.
@@ -395,3 +427,8 @@ export default class Component extends View {
         });
     }
 }
+
+Component.ID_TEMPLATE = (uid) => `rasti-component-${uid}`;
+Component.EXPRESSION_PLACEHOLDER_TEMPLATE = (idx) => `__RASTI_EXPRESSION{${idx}}`;
+Component.TRUE_PLACEHOLDER = '__RASTI_TRUE';
+Component.FALSE_PLACEHOLDER = '__RASTI_FALSE';

package/src/Model.js

@@ -1,4 +1,4 @@
-import Emitter from './Emitter';
+import Emitter from './Emitter.js';
 /**
  * - Orchestrates data and business logic.
  * - Emits events when data changes.
@@ -12,6 +12,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/src/View.js

@@ -1,4 +1,4 @@
-import Emitter from './Emitter';
+import Emitter from './Emitter.js';
 
 // This options keys will be extended on view instance.
 const viewOptions = {
@@ -24,6 +24,7 @@ const 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/src/index.js

@@ -1,6 +1,6 @@
-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 };