clapton 0.0.24 → 0.0.26

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

@@ -40,21 +40,7 @@ const escapeHtml = (unsafe) => {
         .replace(/'/g, "'");
 };
 
-class BlockQuote {
-    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 {
+class Base {
     constructor(attributes = {}) {
         this.children = [];
         this.attributes = attributes;
@@ -63,132 +49,54 @@ class Box {
         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;
@@ -425,19 +232,47 @@ class Component {
 }
 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;
+        this.attributes["data-id"] = Math.random().toString(36).substring(2, 10);
     }
     get renderWrapper() {
-        return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        let value = this.state[this.attribute];
+        if (!this.attributes.type) {
+            this.attributes.type = "text";
+        }
+        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}`;
     }
 }
 
@@ -450,31 +285,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);
@@ -482,15 +313,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]);
 };
@@ -503,14 +328,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);
@@ -527,9 +367,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]);
 };
@@ -540,7 +377,7 @@ 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]);
@@ -548,19 +385,19 @@ const text = (...props) => {
 const c = (name, ...props) => {
     switch (name) {
         case "bq":
-            return bq(...props);
+            return blockquote(...props);
         case "box":
-            return box(...props);
+            return div(...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":
@@ -570,7 +407,19 @@ const c = (name, ...props) => {
         case "form":
             return form(...props);
         case "h":
-            return h(...props);
+            return h1(...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":
@@ -585,8 +434,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":
@@ -597,8 +444,17 @@ const c = (name, ...props) => {
             return input(...props);
         case "text":
             return text(...props);
+        case "radio":
+            props[3].type = "radio";
+            return input(...props);
+        case "datetime":
+            props[3].type = "datetime-local";
+            return input(...props);
+        case "check":
+            props[3].type = "checkbox";
+            return input(...props);
         default:
-            return new Clapton.Component(...props);
+            return new Clapton.Element(name, ...props);
     }
 };
 

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

@@ -1285,32 +1285,6 @@ function getConfig(name) {
   }
 }
 
-const updateComponent = async (component, state, property, target) => {
-    state[property] = target.value;
-    const componentName = component.dataset.component;
-    const module = await import(`${componentName}`);
-    const ComponentClass = module[componentName];
-    const instance = new ComponentClass(state, component.dataset.id);
-    morphdom(component, instance.renderWrapper);
-    instance.runEffects();
-};
-
-const initializeInputs = () => {
-    const inputElements = document.querySelectorAll("[data-attribute]");
-    inputElements.forEach((element) => {
-        const attribute = element.getAttribute("data-attribute");
-        const component = element.closest(`[data-component]`);
-        const state = JSON.parse(component.getAttribute("data-state") || "{}");
-        if (!attribute || !component)
-            return;
-        if (element.tagName === "INPUT") {
-            element.addEventListener("input", async (event) => {
-                await updateComponent(component, state, attribute, event.target);
-            });
-        }
-    });
-};
-
 const consumer = createConsumer();
 
 const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
@@ -1327,12 +1301,14 @@ const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel",
     const instance = new module[data.component.name](data.state, data.component.id, errors);
     morphdom(component, instance.renderWrapper, {
       onBeforeElUpdated: (_fromEl, toEl) => {
+        if (_fromEl.dataset.id === data.focus) {
+          return false;
+        }
         toEl.setAttribute("data-set-event-handler", "true");
         return true;
       }
     });
 
-    initializeInputs();
     initializeActions();
     instance.runEffects();
   }
@@ -1352,7 +1328,7 @@ const handleAction = async (target, stateName, fn) => {
     const attribute = target.dataset.attribute;
     if (attribute) {
         const state = JSON.parse(component.dataset.state || "{}");
-        if (target.tagName === "INPUT") {
+        if (target.dataset.attribute) {
             state[attribute] = target.value;
             component.dataset.state = JSON.stringify(state);
         }
@@ -1368,7 +1344,8 @@ const handleAction = async (target, stateName, fn) => {
                 action: fn,
                 attributes: JSON.parse(targetComponent.dataset.state || "{}"),
             },
-            params: JSON.parse(component.dataset.state || "{}")
+            params: JSON.parse(component.dataset.state || "{}"),
+            focus: target.dataset.id,
         }
     });
 };
@@ -1447,14 +1424,12 @@ const createAndAppendComponent = async (component, element) => {
 document.addEventListener("DOMContentLoaded", async () => {
     await initializeComponents();
     initializeActions();
-    initializeInputs();
     const event = new Event('clapton:render');
     document.dispatchEvent(event);
 });
 document.addEventListener("turbo:render", async () => {
     await initializeComponents();
     initializeActions();
-    initializeInputs();
     const event = new Event('clapton:render');
     document.dispatchEvent(event);
 });