clapton 0.0.17 → 0.0.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f88a3c4f18d2b7b88414e36366129851c5edf38ce1fdefb0ff17b81a34ff1f1
-  data.tar.gz: 7fa52de397a29a416b48cdc1a50d291618546ba38e0adf014b2907c57eff6982
+  metadata.gz: eef5820604c561e4e740eb50620f88cfc0b9466517ad9e3f5da364a1d923356d
+  data.tar.gz: a1ce6f1bbc737affe77cdf3cb8370722c6fb169c6b4b386bb17fa53ed3799f47
 SHA512:
-  metadata.gz: 55b858f91dc9bef90d79e8ea714ece958e85af9dacb2e6d99a1f3e79e146f2c612c8536d615b21b8fe6d87b3a31f7acfb07f5f9d0c3650f91b3bc0eb57d3b7d6
-  data.tar.gz: 9c2f938f18a19c296bc3d2c2ea513ca8f1f964266c377d00e28c8a51676fbf4dae33c9ef42d5b2a97ba15159e2496bbf4480e54ccd605c030446c19a2835c6c3
+  metadata.gz: b36f22c1f26313d9aabe6e67844df736302c92b4f42805b09be40dca60b3ddab9c8a7b40a70dbab3c55ee7baa9ec508820342d4f4e296b16ca053721cff598ad
+  data.tar.gz: dd95168998ca12d46b7eb164698f918b6a8f0575e7a8be435a2943054a4a0407209758a834514719c11f496424ec29a1bcb4701a0d05ceb625e35b07d468789b

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
 ```
@@ -349,6 +349,18 @@ module ApplicationCable
 end
 ```
 
+### Events
+
+#### clapton:render
+
+The `clapton:render` event is a custom event that is triggered when the component is rendered.
+
+```javascript
+document.addEventListener("clapton:render", () => {
+  console.log("clapton:render");
+});
+```
+
 ### Testing
 
 #### RSpec

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,17 +1424,27 @@ 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 () => {
     await initializeComponents();
     initializeActions();
     initializeInputs();
+    const event = new Event('clapton:render');
+    document.dispatchEvent(event);
 });

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,20 @@ 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;
+            if (root.attributes) {
+                root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+            }
+            else {
+                root.attributes = { data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+            }
+            return root.renderWrapper;
         }
     }