clapton 0.0.17 → 0.0.19

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -50,7 +50,7 @@ export class Presets {
   }
 
   img(...props: any[]) {
-    return new Clapton.Image(props[0], props[1])
+    return new Clapton.Image(props[0], props[1], props[2])
   }
 
   a(...props: any[]) {

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

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

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

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

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

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

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

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

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

@@ -3,20 +3,20 @@ import { Select } from "./select"
 
 describe("Select", () => {
   it("returns empty string if no params", () => {
-    expect(new Select([], {}, "foo").render).toBe("<select ></select>")
+    expect(new Select([], {}, "foo").renderWrapper).toBe("<select ></select>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Select([], {}, "foo", { id: "1", "data-foo": "bar" }).render).toBe(`<select id='1' data-foo='bar'></select>`)
+    expect(new Select([], {}, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<select id='1' data-foo='bar'></select>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar" } }).render).toBe(`<select id='1' data-foo='bar'></select>`)
-    expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<select id='1' data-foo='bar' data-baz='qux'></select>`)
-    expect(new Select([], {}, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<select id='1' data-foo-baz='qux' data-foo-quux='corge'></select>`)
+    expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<select id='1' data-foo='bar'></select>`)
+    expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<select id='1' data-foo='bar' data-baz='qux'></select>`)
+    expect(new Select([], {}, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<select id='1' data-foo-baz='qux' data-foo-quux='corge'></select>`)
   })
 
   it("returns options", () => {
-    expect(new Select([{ value: "1", text: "One" }], { foo: "1" }, "foo").render).toBe(`<select ><option value='1' selected>One</option></select>`)
+    expect(new Select([{ value: "1", text: "One" }], { foo: "1" }, "foo").renderWrapper).toBe(`<select ><option value='1' selected>One</option></select>`)
   })
 })

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

@@ -20,7 +20,7 @@ export class Select {
     this.attributes = attributes;
   }
 
-  get render(): string {
-    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(): string {
+    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>`;
   }
 }

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

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

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

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