clapton 0.0.17 → 0.0.18

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>`)
   })
 })

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

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

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

@@ -3,6 +3,6 @@ import { Embed } from "./embed"
 
 describe("Embed", () => {
   it("returns empty string if no params", () => {
-    expect(new Embed("<blockquote></blockquote>").render).toBe("<blockquote></blockquote>")
+    expect(new Embed("<blockquote></blockquote>").renderWrapper).toBe("<blockquote></blockquote>")
   })
 })

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

@@ -5,7 +5,7 @@ export class Embed {
     this.html = html;
   }
 
-  get render(): string {
+  get renderWrapper(): string {
     return this.html;
   }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,10 +3,10 @@ import { Image } from "./image"
 
 describe("Image", () => {
   it("returns empty string if no params", () => {
-    expect(new Image("https://example.com/image.png", "").render).toBe("<img src='https://example.com/image.png' alt='' />")
+    expect(new Image("https://example.com/image.png", "").renderWrapper).toBe("<img src='https://example.com/image.png' alt='' />")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Image("https://example.com/image.png", "test", { id: "1", "data-foo": "bar" }).render).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
+    expect(new Image("https://example.com/image.png", "test", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
   })
 })

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

@@ -13,7 +13,7 @@ export class Image {
     this.alt = alt;
   }
 
-  get render(): string {
+  get renderWrapper(): string {
     return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
   }
 }

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

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

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

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

data/lib/clapton/javascripts/src/components/list-item.spec.ts

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

data/lib/clapton/javascripts/src/components/list-item.ts

@@ -14,7 +14,7 @@ export class ListItem {
     return this;
   }
 
-  get render(): string {
-    return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
+  get renderWrapper(): string {
+    return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
   }
 }