clapton 0.0.16 → 0.0.18

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;

data/lib/clapton/javascripts/src/client.ts

@@ -21,13 +21,20 @@ const initializeComponents = async () => {
 };
 
 const createAndAppendComponent = async (component: ComponentDefinition, element: HTMLElement) => {
+  if (!element) {
+    return;
+  }
   const componentDom = document.createElement('div');
   const module = await import(`${component.component}`);
   const instance = new (module[component.component] as any)(component.state);
-  componentDom.innerHTML = instance.render;
+  componentDom.innerHTML = instance.renderWrapper;
   const firstChild = componentDom.firstChild as HTMLElement;
   if (firstChild) {
-    element.appendChild(firstChild);
+    if (element.children.length > 0) {
+      element.appendChild(firstChild);
+    } else {
+      element.outerHTML = firstChild.outerHTML;
+    }
   }
 };
 

data/lib/clapton/javascripts/src/components/block-quote.spec.ts

@@ -4,23 +4,23 @@ import { Text } from "./text"
 
 describe("BlockQuote", () => {
   it("returns empty string if no params", () => {
-    expect(new BlockQuote().render).toBe("<blockquote ></blockquote>")
+    expect(new BlockQuote().renderWrapper).toBe("<blockquote ></blockquote>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new BlockQuote({ id: "1", "data-foo": "bar" }).render).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
+    expect(new BlockQuote({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new BlockQuote({ id: "1", data: { foo: "bar" } }).render).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
-    expect(new BlockQuote({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<blockquote id='1' data-foo='bar' data-baz='qux'></blockquote>`)
-    expect(new BlockQuote({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<blockquote id='1' data-foo-baz='qux' data-foo-quux='corge'></blockquote>`)
+    expect(new BlockQuote({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
+    expect(new BlockQuote({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<blockquote id='1' data-foo='bar' data-baz='qux'></blockquote>`)
+    expect(new BlockQuote({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<blockquote id='1' data-foo-baz='qux' data-foo-quux='corge'></blockquote>`)
   })
 
   it("adds children", () => {
     const text = new Text("Hello")
     const blockQuote = new BlockQuote()
     blockQuote.add(text)
-    expect(blockQuote.render).toBe(`<blockquote >Hello</blockquote>`)
+    expect(blockQuote.renderWrapper).toBe(`<blockquote >Hello</blockquote>`)
   })
 })

data/lib/clapton/javascripts/src/components/block-quote.ts

@@ -9,8 +9,8 @@ export class BlockQuote {
     this.attributes = attributes;
   }
 
-  get render(): string {
-    return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</blockquote>`;
+  get renderWrapper(): string {
+    return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
   }
 
   add(child: any): BlockQuote {

data/lib/clapton/javascripts/src/components/bold.spec.ts

@@ -4,11 +4,11 @@ import { Bold } from "./bold"
 
 describe("Bold", () => {
   it("returns empty string if no params", () => {
-    expect(new Bold().render).toBe("<strong ></strong>")
+    expect(new Bold().renderWrapper).toBe("<strong ></strong>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Bold({ id: "1", "data-foo": "bar" }).render).toBe(`<strong id='1' data-foo='bar'></strong>`)
+    expect(new Bold({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<strong id='1' data-foo='bar'></strong>`)
   })
 
 
@@ -16,6 +16,6 @@ describe("Bold", () => {
     const text = new Text("Hello")
     const bold = new Bold()
     bold.add(text)
-    expect(bold.render).toBe(`<strong >Hello</strong>`)
+    expect(bold.renderWrapper).toBe(`<strong >Hello</strong>`)
   })
 })

data/lib/clapton/javascripts/src/components/bold.ts

@@ -9,8 +9,8 @@ export class Bold {
     this.attributes = attributes;
   }
 
-  get render(): string {
-    return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</strong>`;
+  get renderWrapper(): string {
+    return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
   }
 
   add(child: any): Bold {

data/lib/clapton/javascripts/src/components/box.spec.ts

@@ -4,20 +4,20 @@ import { Text } from "./text"
 
 describe("Box", () => {
   it("returns empty string if no params", () => {
-    expect(new Box().render).toBe("<div ></div>")
+    expect(new Box().renderWrapper).toBe("<div ></div>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Box({ id: "1", "data-foo": "bar" }).render).toBe(`<div id='1' data-foo='bar'></div>`)
+    expect(new Box({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Box({ id: "1", data: { foo: "bar" } }).render).toBe(`<div id='1' data-foo='bar'></div>`)
-    expect(new Box({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
-    expect(new Box({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
+    expect(new Box({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
+    expect(new Box({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
+    expect(new Box({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
   })
 
   it("adds children", () => {
-    expect(new Box().add(new Text("Hello, world!")).render).toBe(`<div >Hello, world!</div>`)
+    expect(new Box().add(new Text("Hello, world!")).renderWrapper).toBe(`<div >Hello, world!</div>`)
   })
 })

data/lib/clapton/javascripts/src/components/box.ts

@@ -14,8 +14,8 @@ export class Box {
     return this;
   }
 
-  get render(): string {
-    return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
+  get renderWrapper(): string {
+    return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
   }
 
   add_action(eventType: string, stateName: string, fnName: string, options: Record<string, any> = {}): this {

data/lib/clapton/javascripts/src/components/button.spec.ts

@@ -3,16 +3,16 @@ import { Button } from "./button"
 
 describe("Button", () => {
   it("returns empty string if no params", () => {
-    expect(new Button().render).toBe("<button ></button>")
+    expect(new Button().renderWrapper).toBe("<button ></button>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Button({ id: "1", "data-foo": "bar" }).render).toBe(`<button id='1' data-foo='bar'></button>`)
+    expect(new Button({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<button id='1' data-foo='bar'></button>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Button({ id: "1", data: { foo: "bar" } }).render).toBe(`<button id='1' data-foo='bar'></button>`)
-    expect(new Button({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<button id='1' data-foo='bar' data-baz='qux'></button>`)
-    expect(new Button({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<button id='1' data-foo-baz='qux' data-foo-quux='corge'></button>`)
+    expect(new Button({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<button id='1' data-foo='bar'></button>`)
+    expect(new Button({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<button id='1' data-foo='bar' data-baz='qux'></button>`)
+    expect(new Button({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<button id='1' data-foo-baz='qux' data-foo-quux='corge'></button>`)
   })
 })

data/lib/clapton/javascripts/src/components/button.ts

@@ -14,8 +14,8 @@ export class Button {
     return this;
   }
 
-  get render(): string {
-    return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
+  get renderWrapper(): string {
+    return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
   }
 
   add_action(event: string, klass: string, fn: string, options: Record<string, any> = {}): Button {

data/lib/clapton/javascripts/src/components/checkbox.spec.ts

@@ -3,14 +3,14 @@ import { Checkbox } from "./checkbox"
 
 describe("Checkbox", () => {
   it("returns empty string if no params", () => {
-    expect(new Checkbox({}, "foo").render).toBe("<input type='checkbox' data-attribute='foo' value=''/>")
+    expect(new Checkbox({}, "foo").renderWrapper).toBe("<input type='checkbox' data-attribute='foo' value=''/>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Checkbox({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).render).toBe(`<input type='checkbox' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
+    expect(new Checkbox({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='checkbox' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Checkbox({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<input type='checkbox' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
+    expect(new Checkbox({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='checkbox' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
   })
 })

data/lib/clapton/javascripts/src/components/checkbox.ts

@@ -12,7 +12,7 @@ export class Checkbox {
     this.attributes["data-attribute"] = attribute;
   }
 
-  get render(): string {
+  get renderWrapper(): string {
     return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
   }
 

data/lib/clapton/javascripts/src/components/code.spec.ts

@@ -4,23 +4,23 @@ import { Text } from "./text"
 
 describe("Code", () => {
   it("returns empty string if no params", () => {
-    expect(new Code().render).toBe("<code ></code>")
+    expect(new Code().renderWrapper).toBe("<code ></code>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Code({ id: "1", "data-foo": "bar" }).render).toBe(`<code id='1' data-foo='bar'></code>`)
+    expect(new Code({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<code id='1' data-foo='bar'></code>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Code({ id: "1", data: { foo: "bar" } }).render).toBe(`<code id='1' data-foo='bar'></code>`)
-    expect(new Code({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<code id='1' data-foo='bar' data-baz='qux'></code>`)
-    expect(new Code({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<code id='1' data-foo-baz='qux' data-foo-quux='corge'></code>`)
+    expect(new Code({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<code id='1' data-foo='bar'></code>`)
+    expect(new Code({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<code id='1' data-foo='bar' data-baz='qux'></code>`)
+    expect(new Code({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<code id='1' data-foo-baz='qux' data-foo-quux='corge'></code>`)
   })
 
   it("adds children", () => {
     const text = new Text("Hello")
     const code = new Code()
     code.add(text)
-    expect(code.render).toBe(`<code >Hello</code>`)
+    expect(code.renderWrapper).toBe(`<code >Hello</code>`)
   })
 })

data/lib/clapton/javascripts/src/components/code.ts

@@ -9,8 +9,8 @@ export class Code {
     this.attributes = attributes;
   }
 
-  get render(): string {
-    return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
+  get renderWrapper(): string {
+    return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
   }
 
   add(child: any): Code {

data/lib/clapton/javascripts/src/components/component.ts

@@ -5,18 +5,22 @@ export class Component {
   id: string;
   _state: any;
   _errors: any[];
-  _root: Box;
   _c: Presets;
 
   constructor(state: any = {}, id: string = Math.random().toString(36).substring(2, 10), errors: any[] = []) {
     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(): string {
-    return this._root.render;
+  get render(): any {
+    return new Box({});
+  }
+
+  get renderWrapper(): string {
+    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/src/components/datetime-field.spec.ts

@@ -3,14 +3,14 @@ import { DateTimeField } from "./datetime-field"
 
 describe("DateTimeField", () => {
   it("returns empty string if no params", () => {
-    expect(new DateTimeField({}, "foo").render).toBe("<input type='datetime-local' data-attribute='foo' value=''/>")
+    expect(new DateTimeField({}, "foo").renderWrapper).toBe("<input type='datetime-local' data-attribute='foo' value=''/>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", "data-foo": "bar" }).render).toMatch(/<input type='datetime-local' id='1' data-foo='bar' data-attribute='foo' value='.+'\/>/)
+    expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toMatch(/<input type='datetime-local' id='1' data-foo='bar' data-attribute='foo' value='.+'\/>/)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toMatch(/<input type='datetime-local' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='.+'\/>/)
+    expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toMatch(/<input type='datetime-local' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='.+'\/>/)
   })
 })

data/lib/clapton/javascripts/src/components/datetime-field.ts

@@ -12,7 +12,7 @@ export class DateTimeField {
     this.attributes["data-attribute"] = attribute;
   }
 
-  get render(): string {
+  get renderWrapper(): string {
     const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
     return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
   }

data/lib/clapton/javascripts/src/components/element.spec.ts

@@ -5,23 +5,23 @@ import { Text } from "./text"
 
 describe("Element", () => {
   it("returns empty string if no params", () => {
-    expect(new Element("blockquote").render).toBe("<blockquote ></blockquote>")
+    expect(new Element("blockquote").renderWrapper).toBe("<blockquote ></blockquote>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Element("blockquote", { id: "1", "data-foo": "bar" }).render).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
+    expect(new Element("blockquote", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Element("blockquote", { id: "1", data: { foo: "bar" } }).render).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
-    expect(new Element("blockquote", { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<blockquote id='1' data-foo='bar' data-baz='qux'></blockquote>`)
-    expect(new Element("blockquote", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<blockquote id='1' data-foo-baz='qux' data-foo-quux='corge'></blockquote>`)
+    expect(new Element("blockquote", { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<blockquote id='1' data-foo='bar'></blockquote>`)
+    expect(new Element("blockquote", { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<blockquote id='1' data-foo='bar' data-baz='qux'></blockquote>`)
+    expect(new Element("blockquote", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<blockquote id='1' data-foo-baz='qux' data-foo-quux='corge'></blockquote>`)
   })
 
   it("adds children", () => {
     const text = new Text("Hello")
     const blockQuote = new Element("blockquote")
     blockQuote.add(text)
-    expect(blockQuote.render).toBe(`<blockquote >Hello</blockquote>`)
+    expect(blockQuote.renderWrapper).toBe(`<blockquote >Hello</blockquote>`)
   })
 })