clapton 0.0.23 → 0.0.25

data/lib/clapton/javascripts/dist/components-for-test.js

@@ -43,155 +43,63 @@ var Clapton = (function (exports) {
             .replace(/'/g, "'");
     };
 
-    class BlockQuote {
+    class Base {
         constructor(attributes = {}) {
             this.children = [];
             this.attributes = attributes;
         }
-        get renderWrapper() {
-            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-        }
         add(child) {
             this.children.push(child);
             return this;
         }
-    }
-
-    class Box {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-        get renderWrapper() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-        }
         add_action(eventType, stateName, fnName, options = {}) {
             this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
             return this;
         }
+        get renderWrapper() {
+            return "";
+        }
     }
 
-    class Bold {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class BlockQuote extends Base {
         get renderWrapper() {
-            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
         }
     }
 
-    class Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class Div extends Base {
         get renderWrapper() {
-            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
         }
     }
 
-    class Checkbox {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
+    class Bold extends Base {
         get renderWrapper() {
-            return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
         }
     }
 
-    class Code {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Button extends Base {
         get renderWrapper() {
-            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
         }
     }
 
-    class DateTimeField {
-        constructor(state, attribute, attributes = {}) {
-            this.attributes = {};
-            this.state = state;
-            this.attribute = attribute;
-            this.attributes = attributes;
-            this.attributes["data-attribute"] = attribute;
-        }
+    class Code extends Base {
         get renderWrapper() {
-            const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-            return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-        datetime_local_value(value) {
-            if (!value) {
-                return "";
-            }
-            const date = new Date(value);
-            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-            let month = date.getMonth() + 1;
-            let day = date.getDate();
-            let hours = date.getHours();
-            let minutes = date.getMinutes();
-            if (month < 10) {
-                month = `0${month}`;
-            }
-            if (day < 10) {
-                day = `0${day}`;
-            }
-            if (hours < 10) {
-                hours = `0${hours}`;
-            }
-            if (minutes < 10) {
-                minutes = `0${minutes}`;
-            }
-            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
         }
     }
 
-    class Element {
+    class Element extends Base {
         constructor(type, attributes = {}) {
+            super(attributes);
             this.children = [];
             this.type = type;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
     class Embed {
@@ -203,187 +111,86 @@ var Clapton = (function (exports) {
         }
     }
 
-    class Emphasis {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Emphasis extends Base {
         get renderWrapper() {
             return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Form {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Form extends Base {
         get renderWrapper() {
             return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Heading {
+    class Heading extends Base {
         constructor(level, attributes = {}) {
-            this.children = [];
+            super(attributes);
             this.level = level;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Image {
-        constructor(src, alt, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.src = src;
-            this.alt = alt;
-        }
+    class Image extends Base {
         get renderWrapper() {
-            return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+            return `<img ${htmlAttributes(this.attributes)}/>`;
         }
     }
 
-    class Link {
-        constructor(href, attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-            this.href = href;
-        }
+    class Link extends Base {
         get renderWrapper() {
-            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
+            return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
         }
     }
 
-    class ListItem {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class ListItem extends Base {
         get renderWrapper() {
             return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
         }
     }
 
-    class List {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class List extends Base {
         get renderWrapper() {
             return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
         }
     }
 
-    class OrderedList {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class OrderedList extends Base {
         get renderWrapper() {
             return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
         }
     }
 
-    class Paragraph {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Paragraph extends Base {
         get renderWrapper() {
             return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class Quote {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Quote extends Base {
         get renderWrapper() {
             return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
-    class RadioButton {
-        constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
-            this.attribute = attribute;
-            this.attributes["data-attribute"] = attribute;
-        }
-        get renderWrapper() {
-            return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
-    }
-
-    class Select {
+    class Select extends Base {
         constructor(options = [], state, attribute, attributes = {}) {
-            this.children = [];
+            super(attributes);
             this.options = options;
             this.state = state;
             this.attribute = attribute;
-            this.attributes = attributes;
         }
         get renderWrapper() {
             return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
         }
     }
 
-    class Span {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Span extends Base {
         get renderWrapper() {
             return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
         }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
     }
 
     class Component {
@@ -393,7 +200,7 @@ var Clapton = (function (exports) {
             this._errors = errors;
         }
         get render() {
-            return new Box({});
+            return new Div({});
         }
         get renderWrapper() {
             const root = this.render;
@@ -405,21 +212,66 @@ var Clapton = (function (exports) {
             }
             return root.renderWrapper;
         }
+        static effect(dependencies, callback) {
+            this._effects.push({ dependencies, callback });
+        }
+        get effects() {
+            return this.constructor._effects;
+        }
+        runEffects() {
+            this.effects.forEach((effect) => {
+                if (effect.dependencies.some((dependency) => this._state[dependency] !== undefined)) {
+                    effect.callback(this._state);
+                }
+            });
+        }
+        runEffectOnFirstRender() {
+            this.effects.forEach((effect) => {
+                if (effect.dependencies.length === 0) {
+                    effect.callback(this._state);
+                }
+            });
+        }
     }
+    Component._effects = [];
 
-    class TextField {
+    class Input extends Base {
         constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
+            super(attributes);
             this.attribute = attribute;
+            this.state = state;
             this.attributes["data-attribute"] = attribute;
         }
         get renderWrapper() {
-            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+            let value = this.state[this.attribute];
+            if (this.attributes.type === "datetime-local" && value) {
+                value = this.datetime_local_value(value);
+            }
+            return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
         }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
+        datetime_local_value(value) {
+            if (!value) {
+                return "";
+            }
+            const date = new Date(value);
+            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+            let month = date.getMonth() + 1;
+            let day = date.getDate();
+            let hours = date.getHours();
+            let minutes = date.getMinutes();
+            if (month < 10) {
+                month = `0${month}`;
+            }
+            if (day < 10) {
+                day = `0${day}`;
+            }
+            if (hours < 10) {
+                hours = `0${hours}`;
+            }
+            if (minutes < 10) {
+                minutes = `0${minutes}`;
+            }
+            return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
         }
     }
 
@@ -432,48 +284,41 @@ var Clapton = (function (exports) {
         }
     }
 
-    class TextArea {
+    class TextArea extends Base {
         constructor(state, attribute, attributes = {}) {
-            this.state = state;
-            this.attributes = attributes;
+            super(attributes);
             this.attribute = attribute;
+            this.state = state;
             this.attributes["data-attribute"] = attribute;
         }
         get renderWrapper() {
             return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
         }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
     }
 
     exports.BlockQuote = BlockQuote;
     exports.Bold = Bold;
-    exports.Box = Box;
     exports.Button = Button;
-    exports.Checkbox = Checkbox;
     exports.Code = Code;
     exports.Component = Component;
-    exports.DateTimeField = DateTimeField;
+    exports.Div = Div;
     exports.Element = Element;
     exports.Embed = Embed;
     exports.Emphasis = Emphasis;
     exports.Form = Form;
     exports.Heading = Heading;
     exports.Image = Image;
+    exports.Input = Input;
     exports.Link = Link;
     exports.List = List;
     exports.ListItem = ListItem;
     exports.OrderedList = OrderedList;
     exports.Paragraph = Paragraph;
     exports.Quote = Quote;
-    exports.RadioButton = RadioButton;
     exports.Select = Select;
     exports.Span = Span;
     exports.Text = Text;
     exports.TextArea = TextArea;
-    exports.TextField = TextField;
 
     return exports;