clapton 0.0.23 → 0.0.25

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

@@ -43,155 +43,63 @@ var c = (function () {
             .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 Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
+    class BlockQuote 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 `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
         }
     }
 
-    class Bold {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Div 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 `<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 Button 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 `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
         }
     }
 
-    class Code {
-        constructor(attributes = {}) {
-            this.children = [];
-            this.attributes = attributes;
-        }
+    class Bold 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 `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
         }
     }
 
-    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 c = (function () {
         }
     }
 
-    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 c = (function () {
             this._errors = errors;
         }
         get render() {
-            return new Box({});
+            return new Div({});
         }
         get renderWrapper() {
             const root = this.render;
@@ -405,21 +212,66 @@ var c = (function () {
             }
             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,31 +284,27 @@ var c = (function () {
         }
     }
 
-    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;
-        }
     }
 
     const Clapton = {
-        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+        Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
     };
 
-    const bq = (...props) => {
+    const blockquote = (...props) => {
         return new Clapton.BlockQuote(...props);
     };
-    const box = (...props) => {
-        return new Clapton.Box(...props);
+    const div = (...props) => {
+        return new Clapton.Div(...props);
     };
     const b = (...props) => {
         return new Clapton.Bold(...props);
@@ -464,15 +312,9 @@ var c = (function () {
     const button = (...props) => {
         return new Clapton.Button(...props);
     };
-    const check = (...props) => {
-        return new Clapton.Checkbox(props[0], props[1], props[2]);
-    };
     const code = (...props) => {
         return new Clapton.Code(...props);
     };
-    const datetime = (...props) => {
-        return new Clapton.DateTimeField(props[0], props[1], props[2]);
-    };
     const el = (...props) => {
         return new Clapton.Element(props[0], props[1]);
     };
@@ -485,14 +327,29 @@ var c = (function () {
     const form = (...props) => {
         return new Clapton.Form(...props);
     };
-    const h = (...props) => {
-        return new Clapton.Heading(props[0], props[1]);
+    const h1 = (...props) => {
+        return new Clapton.Heading(1, props[1]);
+    };
+    const h2 = (...props) => {
+        return new Clapton.Heading(2, props[1]);
+    };
+    const h3 = (...props) => {
+        return new Clapton.Heading(3, props[1]);
+    };
+    const h4 = (...props) => {
+        return new Clapton.Heading(4, props[1]);
+    };
+    const h5 = (...props) => {
+        return new Clapton.Heading(5, props[1]);
+    };
+    const h6 = (...props) => {
+        return new Clapton.Heading(6, props[1]);
     };
     const img = (...props) => {
-        return new Clapton.Image(props[0], props[1], props[2]);
+        return new Clapton.Image(props[0]);
     };
     const a = (...props) => {
-        return new Clapton.Link(props[0], props[1]);
+        return new Clapton.Link(props[0]);
     };
     const li = (...props) => {
         return new Clapton.ListItem(...props);
@@ -509,9 +366,6 @@ var c = (function () {
     const q = (...props) => {
         return new Clapton.Quote(...props);
     };
-    const radio = (...props) => {
-        return new Clapton.RadioButton(props[0], props[1], props[2]);
-    };
     const select = (...props) => {
         return new Clapton.Select(props[0], props[1], props[2]);
     };
@@ -522,27 +376,23 @@ var c = (function () {
         return new Clapton.TextArea(props[0], props[1], props[2]);
     };
     const input = (...props) => {
-        return new Clapton.TextField(props[0], props[1], props[2]);
+        return new Clapton.Input(props[0], props[1], props[2]);
     };
     const text = (...props) => {
         return new Clapton.Text(props[0]);
     };
     const c = (name, ...props) => {
         switch (name) {
-            case "bq":
-                return bq(...props);
-            case "box":
-                return box(...props);
+            case "blockquote":
+                return blockquote(...props);
+            case "div":
+                return div(...props);
             case "b":
                 return b(...props);
             case "button":
                 return button(...props);
-            case "check":
-                return check(...props);
             case "code":
                 return code(...props);
-            case "datetime":
-                return datetime(...props);
             case "el":
                 return el(...props);
             case "embed":
@@ -551,8 +401,18 @@ var c = (function () {
                 return em(...props);
             case "form":
                 return form(...props);
-            case "h":
-                return h(...props);
+            case "h1":
+                return h1(...props);
+            case "h2":
+                return h2(...props);
+            case "h3":
+                return h3(...props);
+            case "h4":
+                return h4(...props);
+            case "h5":
+                return h5(...props);
+            case "h6":
+                return h6(...props);
             case "img":
                 return img(...props);
             case "a":
@@ -567,8 +427,6 @@ var c = (function () {
                 return p(...props);
             case "q":
                 return q(...props);
-            case "radio":
-                return radio(...props);
             case "select":
                 return select(...props);
             case "span":
@@ -580,7 +438,7 @@ var c = (function () {
             case "text":
                 return text(...props);
             default:
-                return new Clapton.Component(...props);
+                return new Clapton.Element(name, ...props);
         }
     };