clapton 0.0.16 → 0.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f420efd6abefefc796433bad77369a93a3686057519240abf5a9e118758ade2
-  data.tar.gz: f34d535b066e305f893bd291e464d2dfd231df8fbf837b04668fcbaa0a0b4b84
+  metadata.gz: 75a7ef3678828970fe19e84f474a8480a2b3aef73bb7cad48d771952560dc26f
+  data.tar.gz: d183141896d4742b8481d03db28e1d38d1b0ba3d447c8a0c4444d46fa06cec72
 SHA512:
-  metadata.gz: '08125a3863fc85cae262381041e72fdacdfc1fe8dd4f677cd4f5f55e658b713b3c8fa6238289c2b0fc1b5e4cc1bbb4e9ead48179eee8af6cde67b26fe5293e30'
-  data.tar.gz: 6e9a70c6be7c02f4642d44ce4f766ea8a72460962e8a0437f71bafbdaad11df2f0cfbe6fd4c10953a63ab0d324c5720286a17edc5dc66a59ca4637c5ef239258
+  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
 ```
@@ -183,7 +183,7 @@ end
 block_quote = Clapton::BlockQuote.new
 block_quote.add(Clapton::Text.new("Hello"))
 
-box = **Clapton**::Box.new
+box = Clapton::Box.new
 box.add(Clapton::Text.new("Hello"))
 
 button = Clapton::Button.new

data/lib/clapton/engine.rb

@@ -49,7 +49,7 @@ module Clapton
           js += "\n"
         end
         code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)\(/, '\1@c.\2(')
-        code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)\./, '\1@c.\2().')
+        code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)(\.|$)/, '\1@c.\2()\3')
         js += Ruby2JS.convert(code, preset: true)
         js += "\n"
         js += "export { #{File.basename(file, ".rb").camelize} };"

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;
         }
     }