clapton 0.0.17 → 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 +7 -7
- 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 +1 -1
- data/lib/clapton/version.rb +1 -1
- data/lib/rails/generators/clapton_generator.rb +2 -0
- metadata +1 -1
@@ -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
|
})
|
@@ -3,14 +3,14 @@ import { TextField } from "./text-field"
|
|
3
3
|
|
4
4
|
describe("TextField", () => {
|
5
5
|
it("returns empty string if no params", () => {
|
6
|
-
expect(new TextField({}, "foo").
|
6
|
+
expect(new TextField({}, "foo").renderWrapper).toBe("<input type='text' data-attribute='foo' value=''/>")
|
7
7
|
})
|
8
8
|
|
9
9
|
it("returns attributes and data attributes", () => {
|
10
|
-
expect(new TextField({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).
|
10
|
+
expect(new TextField({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='text' 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 TextField({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).
|
14
|
+
expect(new TextField({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='text' 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 TextField {
|
|
12
12
|
this.attributes["data-attribute"] = attribute;
|
13
13
|
}
|
14
14
|
|
15
|
-
get
|
15
|
+
get renderWrapper(): string {
|
16
16
|
return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
|
17
17
|
}
|
18
18
|
|
@@ -3,10 +3,10 @@ import { Text } from "./text"
|
|
3
3
|
|
4
4
|
describe("Text", () => {
|
5
5
|
it("returns empty string if no params", () => {
|
6
|
-
expect(new Text("").
|
6
|
+
expect(new Text("").renderWrapper).toBe("")
|
7
7
|
})
|
8
8
|
|
9
9
|
it("returns value", () => {
|
10
|
-
expect(new Text("bar").
|
10
|
+
expect(new Text("bar").renderWrapper).toBe("bar")
|
11
11
|
})
|
12
12
|
})
|
@@ -6,5 +6,5 @@ export const updateComponent = async (component: HTMLElement, state: any, proper
|
|
6
6
|
const module = await import(`${componentName}`);
|
7
7
|
const ComponentClass = module[componentName] as any;
|
8
8
|
const instance = new ComponentClass(state, component.dataset.id);
|
9
|
-
morphdom(component, instance.
|
9
|
+
morphdom(component, instance.renderWrapper);
|
10
10
|
};
|
@@ -18,7 +18,7 @@ module Clapton
|
|
18
18
|
Box, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
|
19
19
|
};")
|
20
20
|
context = ExecJS.compile(js)
|
21
|
-
html = context.eval("new #{component.name.camelize}(#{params.to_json}).
|
21
|
+
html = context.eval("new #{component.name.camelize}(#{params.to_json}).renderWrapper")
|
22
22
|
@page = Capybara.string(html)
|
23
23
|
end
|
24
24
|
|
data/lib/clapton/version.rb
CHANGED