clapton 0.0.23 → 0.0.25

data/lib/clapton/javascripts/dist/c.js

@@ -40,155 +40,63 @@ const escapeHtml = (unsafe) => {
         .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 {
@@ -200,187 +108,86 @@ class Embed {
     }
 }
 
-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 {
@@ -390,7 +197,7 @@ class Component {
         this._errors = errors;
     }
     get render() {
-        return new Box({});
+        return new Div({});
     }
     get renderWrapper() {
         const root = this.render;
@@ -402,21 +209,66 @@ class Component {
         }
         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}`;
     }
 }
 
@@ -429,31 +281,27 @@ class Text {
     }
 }
 
-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);
@@ -461,15 +309,9 @@ const b = (...props) => {
 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]);
 };
@@ -482,14 +324,29 @@ const em = (...props) => {
 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);
@@ -506,9 +363,6 @@ const p = (...props) => {
 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]);
 };
@@ -519,27 +373,23 @@ const textarea = (...props) => {
     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":
@@ -548,8 +398,18 @@ const c = (name, ...props) => {
             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":
@@ -564,8 +424,6 @@ const c = (name, ...props) => {
             return p(...props);
         case "q":
             return q(...props);
-        case "radio":
-            return radio(...props);
         case "select":
             return select(...props);
         case "span":
@@ -577,7 +435,7 @@ const c = (name, ...props) => {
         case "text":
             return text(...props);
         default:
-            return new Clapton.Component(...props);
+            return new Clapton.Element(name, ...props);
     }
 };
 

data/lib/clapton/javascripts/dist/client.js

@@ -1292,6 +1292,7 @@ const updateComponent = async (component, state, property, target) => {
     const ComponentClass = module[componentName];
     const instance = new ComponentClass(state, component.dataset.id);
     morphdom(component, instance.renderWrapper);
+    instance.runEffects();
 };
 
 const initializeInputs = () => {
@@ -1333,6 +1334,7 @@ const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel",
 
     initializeInputs();
     initializeActions();
+    instance.runEffects();
   }
 });
 
@@ -1440,6 +1442,7 @@ const createAndAppendComponent = async (component, element) => {
             element.outerHTML = firstChild.outerHTML;
         }
     }
+    instance.runEffects();
 };
 document.addEventListener("DOMContentLoaded", async () => {
     await initializeComponents();