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.
- checksums.yaml +4 -4
- data/README.md +8 -8
- data/lib/clapton/engine.rb +1 -1
- data/lib/clapton/javascripts/dist/client.js +12 -4
- data/lib/clapton/javascripts/dist/components-for-test.js +49 -45
- data/lib/clapton/javascripts/dist/components.js +49 -45
- data/lib/clapton/javascripts/src/channel/clapton-channel.js +1 -1
- data/lib/clapton/javascripts/src/client.ts +9 -2
- data/lib/clapton/javascripts/src/components/block-quote.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/block-quote.ts +2 -2
- data/lib/clapton/javascripts/src/components/bold.spec.ts +3 -3
- data/lib/clapton/javascripts/src/components/bold.ts +2 -2
- data/lib/clapton/javascripts/src/components/box.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/box.ts +2 -2
- data/lib/clapton/javascripts/src/components/button.spec.ts +5 -5
- data/lib/clapton/javascripts/src/components/button.ts +2 -2
- data/lib/clapton/javascripts/src/components/checkbox.spec.ts +3 -3
- data/lib/clapton/javascripts/src/components/checkbox.ts +1 -1
- data/lib/clapton/javascripts/src/components/code.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/code.ts +2 -2
- data/lib/clapton/javascripts/src/components/component.ts +8 -4
- data/lib/clapton/javascripts/src/components/datetime-field.spec.ts +3 -3
- data/lib/clapton/javascripts/src/components/datetime-field.ts +1 -1
- data/lib/clapton/javascripts/src/components/element.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/element.ts +2 -2
- data/lib/clapton/javascripts/src/components/embed.spec.ts +1 -1
- data/lib/clapton/javascripts/src/components/embed.ts +1 -1
- data/lib/clapton/javascripts/src/components/emphasis.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/emphasis.ts +2 -2
- data/lib/clapton/javascripts/src/components/form.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/form.ts +2 -2
- data/lib/clapton/javascripts/src/components/heading.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/heading.ts +2 -2
- data/lib/clapton/javascripts/src/components/image.spec.ts +2 -2
- data/lib/clapton/javascripts/src/components/image.ts +1 -1
- data/lib/clapton/javascripts/src/components/link.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/link.ts +2 -2
- data/lib/clapton/javascripts/src/components/list-item.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/list-item.ts +2 -2
- data/lib/clapton/javascripts/src/components/list.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/list.ts +2 -2
- data/lib/clapton/javascripts/src/components/ordered-list.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/ordered-list.ts +2 -2
- data/lib/clapton/javascripts/src/components/paragraph.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/paragraph.ts +2 -2
- data/lib/clapton/javascripts/src/components/presets.ts +1 -1
- data/lib/clapton/javascripts/src/components/quote.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/quote.ts +2 -2
- data/lib/clapton/javascripts/src/components/radio-button.spec.ts +3 -3
- data/lib/clapton/javascripts/src/components/radio-button.ts +1 -1
- data/lib/clapton/javascripts/src/components/select.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/select.ts +2 -2
- data/lib/clapton/javascripts/src/components/span.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/span.ts +2 -2
- data/lib/clapton/javascripts/src/components/text-area.spec.ts +3 -3
- data/lib/clapton/javascripts/src/components/text-area.ts +1 -1
- data/lib/clapton/javascripts/src/components/text-field.spec.ts +3 -3
- data/lib/clapton/javascripts/src/components/text-field.ts +1 -1
- data/lib/clapton/javascripts/src/components/text.spec.ts +2 -2
- data/lib/clapton/javascripts/src/components/text.ts +1 -1
- data/lib/clapton/javascripts/src/dom/update-component.ts +1 -1
- data/lib/clapton/test_helper/base.rb +2 -2
- data/lib/clapton/version.rb +2 -1
- data/lib/rails/generators/clapton_generator.rb +2 -0
- metadata +1 -1
@@ -11,8 +11,8 @@ export class Element {
|
|
11
11
|
this.attributes = attributes;
|
12
12
|
}
|
13
13
|
|
14
|
-
get
|
15
|
-
return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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>").
|
6
|
+
expect(new Embed("<blockquote></blockquote>").renderWrapper).toBe("<blockquote></blockquote>")
|
7
7
|
})
|
8
8
|
})
|
@@ -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().
|
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" }).
|
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" } }).
|
16
|
-
expect(new Emphasis({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new Emphasis({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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.
|
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
|
13
|
-
return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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().
|
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" }).
|
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" } }).
|
16
|
-
expect(new Form({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new Form({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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.
|
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
|
13
|
-
return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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).
|
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" }).
|
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" } }).
|
16
|
-
expect(new Heading(1, { id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new Heading(1, { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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")).
|
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
|
14
|
-
return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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", "").
|
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" }).
|
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
|
})
|
@@ -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("").
|
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("")).
|
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" } }).
|
16
|
-
expect(new Link("#", { id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new Link("#", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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")).
|
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
|
14
|
-
return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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().
|
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" }).
|
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" } }).
|
16
|
-
expect(new ListItem({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new ListItem({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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).
|
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
|
18
|
-
return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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().
|
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" }).
|
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" } }).
|
17
|
-
expect(new List({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
18
|
-
expect(new List({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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).
|
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
|
18
|
-
return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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().
|
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" }).
|
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" } }).
|
17
|
-
expect(new OrderedList({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
18
|
-
expect(new OrderedList({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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).
|
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
|
18
|
-
return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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().
|
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" }).
|
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" } }).
|
16
|
-
expect(new Paragraph({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new Paragraph({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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.
|
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
|
13
|
-
return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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 {
|
@@ -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().
|
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" }).
|
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" } }).
|
16
|
-
expect(new Quote({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new Quote({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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.
|
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
|
13
|
-
return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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").
|
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" }).
|
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" } } }).
|
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
|
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").
|
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" }).
|
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" } }).
|
15
|
-
expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar", baz: "qux" } }).
|
16
|
-
expect(new Select([], {}, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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").
|
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
|
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.
|
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().
|
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" }).
|
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" } }).
|
16
|
-
expect(new Span({ id: "1", data: { foo: "bar", baz: "qux" } }).
|
17
|
-
expect(new Span({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
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.
|
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
|
13
|
-
return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.
|
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").
|
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" }).
|
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" } } }).
|
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
|
})
|