clapton 0.0.17 → 0.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f88a3c4f18d2b7b88414e36366129851c5edf38ce1fdefb0ff17b81a34ff1f1
-  data.tar.gz: 7fa52de397a29a416b48cdc1a50d291618546ba38e0adf014b2907c57eff6982
+  metadata.gz: 75a7ef3678828970fe19e84f474a8480a2b3aef73bb7cad48d771952560dc26f
+  data.tar.gz: d183141896d4742b8481d03db28e1d38d1b0ba3d447c8a0c4444d46fa06cec72
 SHA512:
-  metadata.gz: 55b858f91dc9bef90d79e8ea714ece958e85af9dacb2e6d99a1f3e79e146f2c612c8536d615b21b8fe6d87b3a31f7acfb07f5f9d0c3650f91b3bc0eb57d3b7d6
-  data.tar.gz: 9c2f938f18a19c296bc3d2c2ea513ca8f1f964266c377d00e28c8a51676fbf4dae33c9ef42d5b2a97ba15159e2496bbf4480e54ccd605c030446c19a2835c6c3
+  metadata.gz: d22f7c4bd63092f2f1e701f91d8e86d19bd7a7b1f2ea0fe2bc42709d94b84737e34eaacad59b3c58485407932c372b9535cf2649905f81c8a8e2f17b8bfcba3c
+  data.tar.gz: ea1047109748b7b047c96823727fc3d681d74463d04ca97bb28bac3b354c1b4d3474a9ab001fb03be1029f769cf6fa0ccc69536b24131f75481ae673bd2b08b9

data/README.md

@@ -34,14 +34,14 @@ To use a Clapton component in your view:
 # app/components/task_list_component.rb
 class TaskListComponent < Clapton::Component
   def render
+    box = c.box
     @state.tasks.each do |task|
-      @root.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
+      box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
     end
     btn = c.button
     btn.add(c.text("Add Task"))
     btn.add_action(:click, :TaskListState, :add_task)
-    @root.add(btn)
-    @root.render
+    box.add(btn)
   end
 end
 
@@ -51,6 +51,7 @@ end
 # app/components/task_item_component.rb
 class TaskItemComponent < Clapton::Component
   def render
+    box = c.box
     btn = c.button
     btn.add(c.text(@state.done ? "✅" : "🟩"))
     btn.add_action(:click, :TaskListState, :toggle_done)
@@ -61,8 +62,7 @@ class TaskItemComponent < Clapton::Component
     dt = c.datetime(@state, :due)
     dt.add_action(:input, :TaskListState, :update_due)
 
-    @root.add(btn).add(tf).add(dt)
-    @root.render
+    box.add(btn).add(tf).add(dt)
   end
 end
 
@@ -171,8 +171,8 @@ The `render` event is a special event that is triggered when the component is re
 class TaskListComponent < Clapton::Component
   def render
     # ...
-    @root.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
-    @root.render
+    box = c.box
+    box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
   end
 end
 ```

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

@@ -1291,7 +1291,7 @@ const updateComponent = async (component, state, property, target) => {
     const module = await import(`${componentName}`);
     const ComponentClass = module[componentName];
     const instance = new ComponentClass(state, component.dataset.id);
-    morphdom(component, instance.render);
+    morphdom(component, instance.renderWrapper);
 };
 
 const initializeInputs = () => {
@@ -1324,7 +1324,7 @@ const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel",
     const component = document.querySelector(`[data-id="${data.component.id}"]`);
     const module = await import(`${data.component.name}`);
     const instance = new module[data.component.name](data.state, data.component.id, errors);
-    morphdom(component, instance.render, {
+    morphdom(component, instance.renderWrapper, {
       onBeforeElUpdated: (_fromEl, toEl) => {
         toEl.setAttribute("data-set-event-handler", "true");
         return true;
@@ -1424,13 +1424,21 @@ const initializeComponents = async () => {
     }
 };
 const createAndAppendComponent = async (component, element) => {
+    if (!element) {
+        return;
+    }
     const componentDom = document.createElement('div');
     const module = await import(`${component.component}`);
     const instance = new module[component.component](component.state);
-    componentDom.innerHTML = instance.render;
+    componentDom.innerHTML = instance.renderWrapper;
     const firstChild = componentDom.firstChild;
     if (firstChild) {
-        element.appendChild(firstChild);
+        if (element.children.length > 0) {
+            element.appendChild(firstChild);
+        }
+        else {
+            element.outerHTML = firstChild.outerHTML;
+        }
     }
 };
 document.addEventListener("DOMContentLoaded", async () => {

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

@@ -48,8 +48,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</blockquote>`;
+        get renderWrapper() {
+            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
         }
         add(child) {
             this.children.push(child);
@@ -66,8 +66,8 @@ var Clapton = (function (exports) {
             this.children.push(child);
             return this;
         }
-        get render() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
+        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}`;
@@ -80,8 +80,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</strong>`;
+        get renderWrapper() {
+            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
         }
         add(child) {
             this.children.push(child);
@@ -98,8 +98,8 @@ var Clapton = (function (exports) {
             this.children.push(child);
             return this;
         }
-        get render() {
-            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
+        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}`;
@@ -114,7 +114,7 @@ var Clapton = (function (exports) {
             this.attribute = attribute;
             this.attributes["data-attribute"] = attribute;
         }
-        get render() {
+        get renderWrapper() {
             return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
         }
         add_action(event, klass, fn, options = {}) {
@@ -128,8 +128,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
+        get renderWrapper() {
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
         }
         add(child) {
             this.children.push(child);
@@ -145,7 +145,7 @@ var Clapton = (function (exports) {
             this.attributes = attributes;
             this.attributes["data-attribute"] = attribute;
         }
-        get render() {
+        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}'/>`;
         }
@@ -185,8 +185,8 @@ var Clapton = (function (exports) {
             this.type = type;
             this.attributes = attributes;
         }
-        get render() {
-            return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</${this.type}>`;
+        get renderWrapper() {
+            return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
         }
         add(child) {
             this.children.push(child);
@@ -198,7 +198,7 @@ var Clapton = (function (exports) {
         constructor(html) {
             this.html = html;
         }
-        get render() {
+        get renderWrapper() {
             return this.html;
         }
     }
@@ -208,8 +208,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</em>`;
+        get renderWrapper() {
+            return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
         }
         add(child) {
             this.children.push(child);
@@ -222,8 +222,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</form>`;
+        get renderWrapper() {
+            return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
         }
         add(child) {
             this.children.push(child);
@@ -237,8 +237,8 @@ var Clapton = (function (exports) {
             this.level = level;
             this.attributes = attributes;
         }
-        get render() {
-            return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</h${this.level}>`;
+        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);
@@ -253,7 +253,7 @@ var Clapton = (function (exports) {
             this.src = src;
             this.alt = alt;
         }
-        get render() {
+        get renderWrapper() {
             return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
         }
     }
@@ -264,8 +264,8 @@ var Clapton = (function (exports) {
             this.attributes = attributes;
             this.href = href;
         }
-        get render() {
-            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
+        get renderWrapper() {
+            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
         }
         add(child) {
             this.children.push(child);
@@ -282,8 +282,8 @@ var Clapton = (function (exports) {
             this.children.push(child);
             return this;
         }
-        get render() {
-            return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
+        get renderWrapper() {
+            return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
         }
     }
 
@@ -296,8 +296,8 @@ var Clapton = (function (exports) {
             this.children.push(child);
             return this;
         }
-        get render() {
-            return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ul>`;
+        get renderWrapper() {
+            return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
         }
     }
 
@@ -310,8 +310,8 @@ var Clapton = (function (exports) {
             this.children.push(child);
             return this;
         }
-        get render() {
-            return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ol>`;
+        get renderWrapper() {
+            return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
         }
     }
 
@@ -320,8 +320,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</p>`;
+        get renderWrapper() {
+            return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
         }
         add(child) {
             this.children.push(child);
@@ -334,8 +334,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</q>`;
+        get renderWrapper() {
+            return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
         }
         add(child) {
             this.children.push(child);
@@ -350,7 +350,7 @@ var Clapton = (function (exports) {
             this.attribute = attribute;
             this.attributes["data-attribute"] = attribute;
         }
-        get render() {
+        get renderWrapper() {
             return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
         }
         add_action(event, klass, fn, options = {}) {
@@ -367,8 +367,8 @@ var Clapton = (function (exports) {
             this.attribute = attribute;
             this.attributes = attributes;
         }
-        get render() {
-            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.render).join("")}</select>`;
+        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>`;
         }
     }
 
@@ -377,8 +377,8 @@ var Clapton = (function (exports) {
             this.children = [];
             this.attributes = attributes;
         }
-        get render() {
-            return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</span>`;
+        get renderWrapper() {
+            return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
         }
         add(child) {
             this.children.push(child);
@@ -393,7 +393,7 @@ var Clapton = (function (exports) {
             this.attribute = attribute;
             this.attributes["data-attribute"] = attribute;
         }
-        get render() {
+        get renderWrapper() {
             return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
         }
         add_action(event, klass, fn, options = {}) {
@@ -406,7 +406,7 @@ var Clapton = (function (exports) {
         constructor(value) {
             this.value = value;
         }
-        get render() {
+        get renderWrapper() {
             return this.value;
         }
     }
@@ -418,7 +418,7 @@ var Clapton = (function (exports) {
             this.attribute = attribute;
             this.attributes["data-attribute"] = attribute;
         }
-        get render() {
+        get renderWrapper() {
             return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
         }
         add_action(event, klass, fn, options = {}) {
@@ -469,7 +469,7 @@ var Clapton = (function (exports) {
             return new Clapton.Heading(props[0], props[1]);
         }
         img(...props) {
-            return new Clapton.Image(props[0], props[1]);
+            return new Clapton.Image(props[0], props[1], props[2]);
         }
         a(...props) {
             return new Clapton.Link(props[0], props[1]);
@@ -514,11 +514,15 @@ var Clapton = (function (exports) {
             this._state = state;
             this.id = id;
             this._errors = errors;
-            this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
             this._c = new Presets();
         }
         get render() {
-            return this._root.render;
+            return new Box({});
+        }
+        get renderWrapper() {
+            const root = this.render;
+            root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+            return root.renderWrapper;
         }
     }
 

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

@@ -45,8 +45,8 @@ class BlockQuote {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</blockquote>`;
+    get renderWrapper() {
+        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
     }
     add(child) {
         this.children.push(child);
@@ -63,8 +63,8 @@ class Box {
         this.children.push(child);
         return this;
     }
-    get render() {
-        return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
+    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}`;
@@ -81,8 +81,8 @@ class Button {
         this.children.push(child);
         return this;
     }
-    get render() {
-        return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
+    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}`;
@@ -95,8 +95,8 @@ class Bold {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</strong>`;
+    get renderWrapper() {
+        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
     }
     add(child) {
         this.children.push(child);
@@ -111,7 +111,7 @@ class Checkbox {
         this.attribute = attribute;
         this.attributes["data-attribute"] = attribute;
     }
-    get render() {
+    get renderWrapper() {
         return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
     }
     add_action(event, klass, fn, options = {}) {
@@ -125,8 +125,8 @@ class Code {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
+    get renderWrapper() {
+        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
     }
     add(child) {
         this.children.push(child);
@@ -142,7 +142,7 @@ class DateTimeField {
         this.attributes = attributes;
         this.attributes["data-attribute"] = attribute;
     }
-    get render() {
+    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}'/>`;
     }
@@ -182,8 +182,8 @@ class Element {
         this.type = type;
         this.attributes = attributes;
     }
-    get render() {
-        return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</${this.type}>`;
+    get renderWrapper() {
+        return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
     }
     add(child) {
         this.children.push(child);
@@ -195,7 +195,7 @@ class Embed {
     constructor(html) {
         this.html = html;
     }
-    get render() {
+    get renderWrapper() {
         return this.html;
     }
 }
@@ -205,8 +205,8 @@ class Emphasis {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</em>`;
+    get renderWrapper() {
+        return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
     }
     add(child) {
         this.children.push(child);
@@ -219,8 +219,8 @@ class Form {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</form>`;
+    get renderWrapper() {
+        return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
     }
     add(child) {
         this.children.push(child);
@@ -234,8 +234,8 @@ class Heading {
         this.level = level;
         this.attributes = attributes;
     }
-    get render() {
-        return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</h${this.level}>`;
+    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);
@@ -250,7 +250,7 @@ class Image {
         this.src = src;
         this.alt = alt;
     }
-    get render() {
+    get renderWrapper() {
         return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
     }
 }
@@ -261,8 +261,8 @@ class Link {
         this.attributes = attributes;
         this.href = href;
     }
-    get render() {
-        return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
+    get renderWrapper() {
+        return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
     }
     add(child) {
         this.children.push(child);
@@ -279,8 +279,8 @@ class ListItem {
         this.children.push(child);
         return this;
     }
-    get render() {
-        return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
+    get renderWrapper() {
+        return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
     }
 }
 
@@ -293,8 +293,8 @@ class List {
         this.children.push(child);
         return this;
     }
-    get render() {
-        return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ul>`;
+    get renderWrapper() {
+        return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
     }
 }
 
@@ -307,8 +307,8 @@ class OrderedList {
         this.children.push(child);
         return this;
     }
-    get render() {
-        return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ol>`;
+    get renderWrapper() {
+        return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
     }
 }
 
@@ -317,8 +317,8 @@ class Paragraph {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</p>`;
+    get renderWrapper() {
+        return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
     }
     add(child) {
         this.children.push(child);
@@ -331,8 +331,8 @@ class Quote {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</q>`;
+    get renderWrapper() {
+        return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
     }
     add(child) {
         this.children.push(child);
@@ -347,7 +347,7 @@ class RadioButton {
         this.attribute = attribute;
         this.attributes["data-attribute"] = attribute;
     }
-    get render() {
+    get renderWrapper() {
         return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
     }
     add_action(event, klass, fn, options = {}) {
@@ -364,8 +364,8 @@ class Select {
         this.attribute = attribute;
         this.attributes = attributes;
     }
-    get render() {
-        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.render).join("")}</select>`;
+    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>`;
     }
 }
 
@@ -374,8 +374,8 @@ class Span {
         this.children = [];
         this.attributes = attributes;
     }
-    get render() {
-        return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</span>`;
+    get renderWrapper() {
+        return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
     }
     add(child) {
         this.children.push(child);
@@ -421,7 +421,7 @@ class Presets {
         return new Clapton.Heading(props[0], props[1]);
     }
     img(...props) {
-        return new Clapton.Image(props[0], props[1]);
+        return new Clapton.Image(props[0], props[1], props[2]);
     }
     a(...props) {
         return new Clapton.Link(props[0], props[1]);
@@ -466,11 +466,15 @@ class Component {
         this._state = state;
         this.id = id;
         this._errors = errors;
-        this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
         this._c = new Presets();
     }
     get render() {
-        return this._root.render;
+        return new Box({});
+    }
+    get renderWrapper() {
+        const root = this.render;
+        root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+        return root.renderWrapper;
     }
 }
 
@@ -481,7 +485,7 @@ class TextField {
         this.attribute = attribute;
         this.attributes["data-attribute"] = attribute;
     }
-    get render() {
+    get renderWrapper() {
         return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
     }
     add_action(event, klass, fn, options = {}) {
@@ -494,7 +498,7 @@ class Text {
     constructor(value) {
         this.value = value;
     }
-    get render() {
+    get renderWrapper() {
         return this.value;
     }
 }
@@ -506,7 +510,7 @@ class TextArea {
         this.attribute = attribute;
         this.attributes["data-attribute"] = attribute;
     }
-    get render() {
+    get renderWrapper() {
         return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
     }
     add_action(event, klass, fn, options = {}) {

data/lib/clapton/javascripts/src/channel/clapton-channel.js

@@ -16,7 +16,7 @@ export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonCha
     const component = document.querySelector(`[data-id="${data.component.id}"]`)
     const module = await import(`${data.component.name}`);
     const instance = new module[data.component.name](data.state, data.component.id, errors);
-    morphdom(component, instance.render, {
+    morphdom(component, instance.renderWrapper, {
       onBeforeElUpdated: (_fromEl, toEl) => {
         toEl.setAttribute("data-set-event-handler", "true");
         return true;