clapton 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +8 -8
  3. data/lib/clapton/engine.rb +1 -1
  4. data/lib/clapton/javascripts/dist/client.js +12 -4
  5. data/lib/clapton/javascripts/dist/components-for-test.js +49 -45
  6. data/lib/clapton/javascripts/dist/components.js +49 -45
  7. data/lib/clapton/javascripts/src/channel/clapton-channel.js +1 -1
  8. data/lib/clapton/javascripts/src/client.ts +9 -2
  9. data/lib/clapton/javascripts/src/components/block-quote.spec.ts +6 -6
  10. data/lib/clapton/javascripts/src/components/block-quote.ts +2 -2
  11. data/lib/clapton/javascripts/src/components/bold.spec.ts +3 -3
  12. data/lib/clapton/javascripts/src/components/bold.ts +2 -2
  13. data/lib/clapton/javascripts/src/components/box.spec.ts +6 -6
  14. data/lib/clapton/javascripts/src/components/box.ts +2 -2
  15. data/lib/clapton/javascripts/src/components/button.spec.ts +5 -5
  16. data/lib/clapton/javascripts/src/components/button.ts +2 -2
  17. data/lib/clapton/javascripts/src/components/checkbox.spec.ts +3 -3
  18. data/lib/clapton/javascripts/src/components/checkbox.ts +1 -1
  19. data/lib/clapton/javascripts/src/components/code.spec.ts +6 -6
  20. data/lib/clapton/javascripts/src/components/code.ts +2 -2
  21. data/lib/clapton/javascripts/src/components/component.ts +8 -4
  22. data/lib/clapton/javascripts/src/components/datetime-field.spec.ts +3 -3
  23. data/lib/clapton/javascripts/src/components/datetime-field.ts +1 -1
  24. data/lib/clapton/javascripts/src/components/element.spec.ts +6 -6
  25. data/lib/clapton/javascripts/src/components/element.ts +2 -2
  26. data/lib/clapton/javascripts/src/components/embed.spec.ts +1 -1
  27. data/lib/clapton/javascripts/src/components/embed.ts +1 -1
  28. data/lib/clapton/javascripts/src/components/emphasis.spec.ts +6 -6
  29. data/lib/clapton/javascripts/src/components/emphasis.ts +2 -2
  30. data/lib/clapton/javascripts/src/components/form.spec.ts +6 -6
  31. data/lib/clapton/javascripts/src/components/form.ts +2 -2
  32. data/lib/clapton/javascripts/src/components/heading.spec.ts +6 -6
  33. data/lib/clapton/javascripts/src/components/heading.ts +2 -2
  34. data/lib/clapton/javascripts/src/components/image.spec.ts +2 -2
  35. data/lib/clapton/javascripts/src/components/image.ts +1 -1
  36. data/lib/clapton/javascripts/src/components/link.spec.ts +6 -6
  37. data/lib/clapton/javascripts/src/components/link.ts +2 -2
  38. data/lib/clapton/javascripts/src/components/list-item.spec.ts +6 -6
  39. data/lib/clapton/javascripts/src/components/list-item.ts +2 -2
  40. data/lib/clapton/javascripts/src/components/list.spec.ts +6 -6
  41. data/lib/clapton/javascripts/src/components/list.ts +2 -2
  42. data/lib/clapton/javascripts/src/components/ordered-list.spec.ts +6 -6
  43. data/lib/clapton/javascripts/src/components/ordered-list.ts +2 -2
  44. data/lib/clapton/javascripts/src/components/paragraph.spec.ts +6 -6
  45. data/lib/clapton/javascripts/src/components/paragraph.ts +2 -2
  46. data/lib/clapton/javascripts/src/components/presets.ts +1 -1
  47. data/lib/clapton/javascripts/src/components/quote.spec.ts +6 -6
  48. data/lib/clapton/javascripts/src/components/quote.ts +2 -2
  49. data/lib/clapton/javascripts/src/components/radio-button.spec.ts +3 -3
  50. data/lib/clapton/javascripts/src/components/radio-button.ts +1 -1
  51. data/lib/clapton/javascripts/src/components/select.spec.ts +6 -6
  52. data/lib/clapton/javascripts/src/components/select.ts +2 -2
  53. data/lib/clapton/javascripts/src/components/span.spec.ts +6 -6
  54. data/lib/clapton/javascripts/src/components/span.ts +2 -2
  55. data/lib/clapton/javascripts/src/components/text-area.spec.ts +3 -3
  56. data/lib/clapton/javascripts/src/components/text-area.ts +1 -1
  57. data/lib/clapton/javascripts/src/components/text-field.spec.ts +3 -3
  58. data/lib/clapton/javascripts/src/components/text-field.ts +1 -1
  59. data/lib/clapton/javascripts/src/components/text.spec.ts +2 -2
  60. data/lib/clapton/javascripts/src/components/text.ts +1 -1
  61. data/lib/clapton/javascripts/src/dom/update-component.ts +1 -1
  62. data/lib/clapton/test_helper/base.rb +2 -2
  63. data/lib/clapton/version.rb +2 -1
  64. data/lib/rails/generators/clapton_generator.rb +2 -0
  65. metadata +1 -1
@@ -11,8 +11,8 @@ export class Element {
11
11
  this.attributes = attributes;
12
12
  }
13
13
 
14
- get render(): string {
15
- return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</${this.type}>`;
14
+ get renderWrapper(): string {
15
+ return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
16
16
  }
17
17
 
18
18
  add(child: any): Element {
@@ -3,6 +3,6 @@ import { Embed } from "./embed"
3
3
 
4
4
  describe("Embed", () => {
5
5
  it("returns empty string if no params", () => {
6
- expect(new Embed("<blockquote></blockquote>").render).toBe("<blockquote></blockquote>")
6
+ expect(new Embed("<blockquote></blockquote>").renderWrapper).toBe("<blockquote></blockquote>")
7
7
  })
8
8
  })
@@ -5,7 +5,7 @@ export class Embed {
5
5
  this.html = html;
6
6
  }
7
7
 
8
- get render(): string {
8
+ get renderWrapper(): string {
9
9
  return this.html;
10
10
  }
11
11
  }
@@ -4,23 +4,23 @@ import { Text } from "./text"
4
4
 
5
5
  describe("Emphasis", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Emphasis().render).toBe("<em ></em>")
7
+ expect(new Emphasis().renderWrapper).toBe("<em ></em>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Emphasis({ id: "1", "data-foo": "bar" }).render).toBe(`<em id='1' data-foo='bar'></em>`)
11
+ expect(new Emphasis({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<em id='1' data-foo='bar'></em>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Emphasis({ id: "1", data: { foo: "bar" } }).render).toBe(`<em id='1' data-foo='bar'></em>`)
16
- expect(new Emphasis({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<em id='1' data-foo='bar' data-baz='qux'></em>`)
17
- 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>`)
15
+ expect(new Emphasis({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<em id='1' data-foo='bar'></em>`)
16
+ expect(new Emphasis({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<em id='1' data-foo='bar' data-baz='qux'></em>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
21
  const text = new Text("Hello")
22
22
  const emphasis = new Emphasis()
23
23
  emphasis.add(text)
24
- expect(emphasis.render).toBe(`<em >Hello</em>`)
24
+ expect(emphasis.renderWrapper).toBe(`<em >Hello</em>`)
25
25
  })
26
26
  })
@@ -9,8 +9,8 @@ export class Emphasis {
9
9
  this.attributes = attributes;
10
10
  }
11
11
 
12
- get render(): string {
13
- return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</em>`;
12
+ get renderWrapper(): string {
13
+ return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
14
14
  }
15
15
 
16
16
  add(child: any): Emphasis {
@@ -4,23 +4,23 @@ import { Text } from "./text"
4
4
 
5
5
  describe("Form", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Form().render).toBe("<form ></form>")
7
+ expect(new Form().renderWrapper).toBe("<form ></form>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Form({ id: "1", "data-foo": "bar" }).render).toBe(`<form id='1' data-foo='bar'></form>`)
11
+ expect(new Form({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<form id='1' data-foo='bar'></form>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Form({ id: "1", data: { foo: "bar" } }).render).toBe(`<form id='1' data-foo='bar'></form>`)
16
- expect(new Form({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<form id='1' data-foo='bar' data-baz='qux'></form>`)
17
- 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>`)
15
+ expect(new Form({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<form id='1' data-foo='bar'></form>`)
16
+ expect(new Form({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<form id='1' data-foo='bar' data-baz='qux'></form>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
21
  const text = new Text("Hello")
22
22
  const form = new Form()
23
23
  form.add(text)
24
- expect(form.render).toBe(`<form >Hello</form>`)
24
+ expect(form.renderWrapper).toBe(`<form >Hello</form>`)
25
25
  })
26
26
  })
@@ -9,8 +9,8 @@ export class Form {
9
9
  this.attributes = attributes;
10
10
  }
11
11
 
12
- get render(): string {
13
- return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</form>`;
12
+ get renderWrapper(): string {
13
+ return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
14
14
  }
15
15
 
16
16
  add(child: any): Form {
@@ -4,20 +4,20 @@ import { Text } from "./text"
4
4
 
5
5
  describe("Heading", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Heading(1).render).toBe("<h1 ></h1>")
7
+ expect(new Heading(1).renderWrapper).toBe("<h1 ></h1>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Heading(1, { id: "1", "data-foo": "bar" }).render).toBe(`<h1 id='1' data-foo='bar'></h1>`)
11
+ expect(new Heading(1, { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<h1 id='1' data-foo='bar'></h1>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Heading(1, { id: "1", data: { foo: "bar" } }).render).toBe(`<h1 id='1' data-foo='bar'></h1>`)
16
- expect(new Heading(1, { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<h1 id='1' data-foo='bar' data-baz='qux'></h1>`)
17
- 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>`)
15
+ expect(new Heading(1, { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<h1 id='1' data-foo='bar'></h1>`)
16
+ expect(new Heading(1, { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<h1 id='1' data-foo='bar' data-baz='qux'></h1>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
- expect(new Heading(1).add(new Text("Hello")).render).toBe(`<h1 >Hello</h1>`)
21
+ expect(new Heading(1).add(new Text("Hello")).renderWrapper).toBe(`<h1 >Hello</h1>`)
22
22
  })
23
23
  })
@@ -10,8 +10,8 @@ export class Heading {
10
10
  this.attributes = attributes;
11
11
  }
12
12
 
13
- get render(): string {
14
- return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</h${this.level}>`;
13
+ get renderWrapper(): string {
14
+ return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
15
15
  }
16
16
 
17
17
  add(child: any): Heading {
@@ -3,10 +3,10 @@ import { Image } from "./image"
3
3
 
4
4
  describe("Image", () => {
5
5
  it("returns empty string if no params", () => {
6
- expect(new Image("https://example.com/image.png", "").render).toBe("<img src='https://example.com/image.png' alt='' />")
6
+ expect(new Image("https://example.com/image.png", "").renderWrapper).toBe("<img src='https://example.com/image.png' alt='' />")
7
7
  })
8
8
 
9
9
  it("returns attributes and data attributes", () => {
10
- 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'/>`)
10
+ 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'/>`)
11
11
  })
12
12
  })
@@ -13,7 +13,7 @@ export class Image {
13
13
  this.alt = alt;
14
14
  }
15
15
 
16
- get render(): string {
16
+ get renderWrapper(): string {
17
17
  return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
18
18
  }
19
19
  }
@@ -4,20 +4,20 @@ import { Text } from "./text"
4
4
 
5
5
  describe("Link", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Link("").render).toBe("<a href='' ></a>")
7
+ expect(new Link("").renderWrapper).toBe("<a href='' ></a>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Link("#").add(new Text("")).render).toBe(`<a href='#' ></a>`)
11
+ expect(new Link("#").add(new Text("")).renderWrapper).toBe(`<a href='#' ></a>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Link("#", { id: "1", data: { foo: "bar" } }).render).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
16
- expect(new Link("#", { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
17
- 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>`)
15
+ expect(new Link("#", { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
16
+ expect(new Link("#", { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
- expect(new Link("#").add(new Text("Hello")).render).toBe(`<a href='#' >Hello</a>`)
21
+ expect(new Link("#").add(new Text("Hello")).renderWrapper).toBe(`<a href='#' >Hello</a>`)
22
22
  })
23
23
  })
@@ -10,8 +10,8 @@ export class Link {
10
10
  this.href = href;
11
11
  }
12
12
 
13
- get render(): string {
14
- return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
13
+ get renderWrapper(): string {
14
+ return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
15
15
  }
16
16
 
17
17
  add(child: any): Link {
@@ -4,21 +4,21 @@ import { Text } from "./text"
4
4
 
5
5
  describe("ListItem", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new ListItem().render).toBe("<li ></li>")
7
+ expect(new ListItem().renderWrapper).toBe("<li ></li>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new ListItem({ id: "1", "data-foo": "bar" }).render).toBe(`<li id='1' data-foo='bar'></li>`)
11
+ expect(new ListItem({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<li id='1' data-foo='bar'></li>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new ListItem({ id: "1", data: { foo: "bar" } }).render).toBe(`<li id='1' data-foo='bar'></li>`)
16
- expect(new ListItem({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<li id='1' data-foo='bar' data-baz='qux'></li>`)
17
- 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>`)
15
+ expect(new ListItem({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<li id='1' data-foo='bar'></li>`)
16
+ expect(new ListItem({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<li id='1' data-foo='bar' data-baz='qux'></li>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
21
  const text = new Text("Hello, world!")
22
- expect(new ListItem().add(text).render).toBe(`<li >Hello, world!</li>`)
22
+ expect(new ListItem().add(text).renderWrapper).toBe(`<li >Hello, world!</li>`)
23
23
  })
24
24
  })
@@ -14,7 +14,7 @@ export class ListItem {
14
14
  return this;
15
15
  }
16
16
 
17
- get render(): string {
18
- return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
17
+ get renderWrapper(): string {
18
+ return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
19
19
  }
20
20
  }
@@ -5,22 +5,22 @@ import { Text } from "./text"
5
5
 
6
6
  describe("List", () => {
7
7
  it("returns empty string if no params", () => {
8
- expect(new List().render).toBe("<ul ></ul>")
8
+ expect(new List().renderWrapper).toBe("<ul ></ul>")
9
9
  })
10
10
 
11
11
  it("returns attributes and data attributes", () => {
12
- expect(new List({ id: "1", "data-foo": "bar" }).render).toBe(`<ul id='1' data-foo='bar'></ul>`)
12
+ expect(new List({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<ul id='1' data-foo='bar'></ul>`)
13
13
  })
14
14
 
15
15
  it("returns attributes and data attributes with custom data attributes", () => {
16
- expect(new List({ id: "1", data: { foo: "bar" } }).render).toBe(`<ul id='1' data-foo='bar'></ul>`)
17
- expect(new List({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<ul id='1' data-foo='bar' data-baz='qux'></ul>`)
18
- 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>`)
16
+ expect(new List({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<ul id='1' data-foo='bar'></ul>`)
17
+ expect(new List({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<ul id='1' data-foo='bar' data-baz='qux'></ul>`)
18
+ 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>`)
19
19
  })
20
20
 
21
21
  it("adds children", () => {
22
22
  const listItem = new ListItem()
23
23
  listItem.add(new Text("Hello, world!"))
24
- expect(new List().add(listItem).render).toBe(`<ul ><li >Hello, world!</li></ul>`)
24
+ expect(new List().add(listItem).renderWrapper).toBe(`<ul ><li >Hello, world!</li></ul>`)
25
25
  })
26
26
  })
@@ -14,7 +14,7 @@ export class List {
14
14
  return this;
15
15
  }
16
16
 
17
- get render(): string {
18
- return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ul>`;
17
+ get renderWrapper(): string {
18
+ return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
19
19
  }
20
20
  }
@@ -5,22 +5,22 @@ import { Text } from "./text"
5
5
 
6
6
  describe("OrderedList", () => {
7
7
  it("returns empty string if no params", () => {
8
- expect(new OrderedList().render).toBe("<ol ></ol>")
8
+ expect(new OrderedList().renderWrapper).toBe("<ol ></ol>")
9
9
  })
10
10
 
11
11
  it("returns attributes and data attributes", () => {
12
- expect(new OrderedList({ id: "1", "data-foo": "bar" }).render).toBe(`<ol id='1' data-foo='bar'></ol>`)
12
+ expect(new OrderedList({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<ol id='1' data-foo='bar'></ol>`)
13
13
  })
14
14
 
15
15
  it("returns attributes and data attributes with custom data attributes", () => {
16
- expect(new OrderedList({ id: "1", data: { foo: "bar" } }).render).toBe(`<ol id='1' data-foo='bar'></ol>`)
17
- expect(new OrderedList({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<ol id='1' data-foo='bar' data-baz='qux'></ol>`)
18
- 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>`)
16
+ expect(new OrderedList({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<ol id='1' data-foo='bar'></ol>`)
17
+ expect(new OrderedList({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<ol id='1' data-foo='bar' data-baz='qux'></ol>`)
18
+ 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>`)
19
19
  })
20
20
 
21
21
  it("adds children", () => {
22
22
  const listItem = new ListItem()
23
23
  listItem.add(new Text("Hello, world!"))
24
- expect(new OrderedList().add(listItem).render).toBe(`<ol ><li >Hello, world!</li></ol>`)
24
+ expect(new OrderedList().add(listItem).renderWrapper).toBe(`<ol ><li >Hello, world!</li></ol>`)
25
25
  })
26
26
  })
@@ -14,7 +14,7 @@ export class OrderedList {
14
14
  return this;
15
15
  }
16
16
 
17
- get render(): string {
18
- return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ol>`;
17
+ get renderWrapper(): string {
18
+ return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
19
19
  }
20
20
  }
@@ -4,23 +4,23 @@ import { Text } from "./text"
4
4
 
5
5
  describe("Paragraph", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Paragraph().render).toBe("<p ></p>")
7
+ expect(new Paragraph().renderWrapper).toBe("<p ></p>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Paragraph({ id: "1", "data-foo": "bar" }).render).toBe(`<p id='1' data-foo='bar'></p>`)
11
+ expect(new Paragraph({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<p id='1' data-foo='bar'></p>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Paragraph({ id: "1", data: { foo: "bar" } }).render).toBe(`<p id='1' data-foo='bar'></p>`)
16
- expect(new Paragraph({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<p id='1' data-foo='bar' data-baz='qux'></p>`)
17
- 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>`)
15
+ expect(new Paragraph({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<p id='1' data-foo='bar'></p>`)
16
+ expect(new Paragraph({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<p id='1' data-foo='bar' data-baz='qux'></p>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
21
  const text = new Text("Hello")
22
22
  const paragraph = new Paragraph()
23
23
  paragraph.add(text)
24
- expect(paragraph.render).toBe(`<p >Hello</p>`)
24
+ expect(paragraph.renderWrapper).toBe(`<p >Hello</p>`)
25
25
  })
26
26
  })
@@ -9,8 +9,8 @@ export class Paragraph {
9
9
  this.attributes = attributes;
10
10
  }
11
11
 
12
- get render(): string {
13
- return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</p>`;
12
+ get renderWrapper(): string {
13
+ return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
14
14
  }
15
15
 
16
16
  add(child: any): Paragraph {
@@ -50,7 +50,7 @@ export class Presets {
50
50
  }
51
51
 
52
52
  img(...props: any[]) {
53
- return new Clapton.Image(props[0], props[1])
53
+ return new Clapton.Image(props[0], props[1], props[2])
54
54
  }
55
55
 
56
56
  a(...props: any[]) {
@@ -4,23 +4,23 @@ import { Quote } from "./quote"
4
4
 
5
5
  describe("Quote", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Quote().render).toBe("<q ></q>")
7
+ expect(new Quote().renderWrapper).toBe("<q ></q>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Quote({ id: "1", "data-foo": "bar" }).render).toBe(`<q id='1' data-foo='bar'></q>`)
11
+ expect(new Quote({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<q id='1' data-foo='bar'></q>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Quote({ id: "1", data: { foo: "bar" } }).render).toBe(`<q id='1' data-foo='bar'></q>`)
16
- expect(new Quote({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<q id='1' data-foo='bar' data-baz='qux'></q>`)
17
- 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>`)
15
+ expect(new Quote({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<q id='1' data-foo='bar'></q>`)
16
+ expect(new Quote({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<q id='1' data-foo='bar' data-baz='qux'></q>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
21
  const text = new Text("Hello")
22
22
  const quote = new Quote()
23
23
  quote.add(text)
24
- expect(quote.render).toBe(`<q >Hello</q>`)
24
+ expect(quote.renderWrapper).toBe(`<q >Hello</q>`)
25
25
  })
26
26
  })
@@ -9,8 +9,8 @@ export class Quote {
9
9
  this.attributes = attributes;
10
10
  }
11
11
 
12
- get render(): string {
13
- return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</q>`;
12
+ get renderWrapper(): string {
13
+ return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
14
14
  }
15
15
 
16
16
  add(child: any): Quote {
@@ -3,14 +3,14 @@ import { RadioButton } from "./radio-button"
3
3
 
4
4
  describe("RadioButton", () => {
5
5
  it("returns empty string if no params", () => {
6
- expect(new RadioButton({}, "foo").render).toBe("<input type='radio' data-attribute='foo' value=''/>")
6
+ expect(new RadioButton({}, "foo").renderWrapper).toBe("<input type='radio' data-attribute='foo' value=''/>")
7
7
  })
8
8
 
9
9
  it("returns attributes and data attributes", () => {
10
- 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'/>`)
10
+ 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'/>`)
11
11
  })
12
12
 
13
13
  it("returns attributes and data attributes with custom data attributes", () => {
14
- 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'/>`)
14
+ 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'/>`)
15
15
  })
16
16
  })
@@ -12,7 +12,7 @@ export class RadioButton {
12
12
  this.attributes["data-attribute"] = attribute;
13
13
  }
14
14
 
15
- get render(): string {
15
+ get renderWrapper(): string {
16
16
  return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
17
17
  }
18
18
 
@@ -3,20 +3,20 @@ import { Select } from "./select"
3
3
 
4
4
  describe("Select", () => {
5
5
  it("returns empty string if no params", () => {
6
- expect(new Select([], {}, "foo").render).toBe("<select ></select>")
6
+ expect(new Select([], {}, "foo").renderWrapper).toBe("<select ></select>")
7
7
  })
8
8
 
9
9
  it("returns attributes and data attributes", () => {
10
- expect(new Select([], {}, "foo", { id: "1", "data-foo": "bar" }).render).toBe(`<select id='1' data-foo='bar'></select>`)
10
+ expect(new Select([], {}, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<select id='1' data-foo='bar'></select>`)
11
11
  })
12
12
 
13
13
  it("returns attributes and data attributes with custom data attributes", () => {
14
- expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar" } }).render).toBe(`<select id='1' data-foo='bar'></select>`)
15
- expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<select id='1' data-foo='bar' data-baz='qux'></select>`)
16
- 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>`)
14
+ expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<select id='1' data-foo='bar'></select>`)
15
+ expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<select id='1' data-foo='bar' data-baz='qux'></select>`)
16
+ 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>`)
17
17
  })
18
18
 
19
19
  it("returns options", () => {
20
- expect(new Select([{ value: "1", text: "One" }], { foo: "1" }, "foo").render).toBe(`<select ><option value='1' selected>One</option></select>`)
20
+ expect(new Select([{ value: "1", text: "One" }], { foo: "1" }, "foo").renderWrapper).toBe(`<select ><option value='1' selected>One</option></select>`)
21
21
  })
22
22
  })
@@ -20,7 +20,7 @@ export class Select {
20
20
  this.attributes = attributes;
21
21
  }
22
22
 
23
- get render(): string {
24
- 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>`;
23
+ get renderWrapper(): string {
24
+ 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>`;
25
25
  }
26
26
  }
@@ -4,23 +4,23 @@ import { Span } from "./span"
4
4
 
5
5
  describe("Span", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Span().render).toBe("<span ></span>")
7
+ expect(new Span().renderWrapper).toBe("<span ></span>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Span({ id: "1", "data-foo": "bar" }).render).toBe(`<span id='1' data-foo='bar'></span>`)
11
+ expect(new Span({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<span id='1' data-foo='bar'></span>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Span({ id: "1", data: { foo: "bar" } }).render).toBe(`<span id='1' data-foo='bar'></span>`)
16
- expect(new Span({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(`<span id='1' data-foo='bar' data-baz='qux'></span>`)
17
- 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>`)
15
+ expect(new Span({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<span id='1' data-foo='bar'></span>`)
16
+ expect(new Span({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<span id='1' data-foo='bar' data-baz='qux'></span>`)
17
+ 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>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
21
  const text = new Text("Hello")
22
22
  const span = new Span()
23
23
  span.add(text)
24
- expect(span.render).toBe(`<span >Hello</span>`)
24
+ expect(span.renderWrapper).toBe(`<span >Hello</span>`)
25
25
  })
26
26
  })
@@ -9,8 +9,8 @@ export class Span {
9
9
  this.attributes = attributes;
10
10
  }
11
11
 
12
- get render(): string {
13
- return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</span>`;
12
+ get renderWrapper(): string {
13
+ return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
14
14
  }
15
15
 
16
16
  add(child: any): Span {
@@ -3,14 +3,14 @@ import { TextArea } from "./text-area"
3
3
 
4
4
  describe("TextArea", () => {
5
5
  it("returns empty string if no params", () => {
6
- expect(new TextArea({}, "foo").render).toBe("<textarea data-attribute='foo'></textarea>")
6
+ expect(new TextArea({}, "foo").renderWrapper).toBe("<textarea data-attribute='foo'></textarea>")
7
7
  })
8
8
 
9
9
  it("returns attributes and data attributes", () => {
10
- expect(new TextArea({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).render).toBe(`<textarea id='1' data-foo='bar' data-attribute='foo'>bar</textarea>`)
10
+ expect(new TextArea({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<textarea id='1' data-foo='bar' data-attribute='foo'>bar</textarea>`)
11
11
  })
12
12
 
13
13
  it("returns attributes and data attributes with custom data attributes", () => {
14
- expect(new TextArea({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(`<textarea id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge'>bar</textarea>`)
14
+ expect(new TextArea({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<textarea id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge'>bar</textarea>`)
15
15
  })
16
16
  })
@@ -12,7 +12,7 @@ export class TextArea {
12
12
  this.attributes["data-attribute"] = attribute;
13
13
  }
14
14
 
15
- get render(): string {
15
+ get renderWrapper(): string {
16
16
  return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
17
17
  }
18
18