clapton 0.0.17 → 0.0.18

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 {

data/lib/clapton/javascripts/src/components/text-area.spec.ts

@@ -3,14 +3,14 @@ import { TextArea } from "./text-area"
 
 describe("TextArea", () => {
   it("returns empty string if no params", () => {
-    expect(new TextArea({}, "foo").render).toBe("<textarea data-attribute='foo'></textarea>")
+    expect(new TextArea({}, "foo").renderWrapper).toBe("<textarea data-attribute='foo'></textarea>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new TextArea({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).render).toBe(`<textarea id='1' data-foo='bar' data-attribute='foo'>bar</textarea>`)
+    expect(new TextArea({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<textarea id='1' data-foo='bar' data-attribute='foo'>bar</textarea>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    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>`)
+    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>`)
   })
 })

data/lib/clapton/javascripts/src/components/text-area.ts

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

data/lib/clapton/javascripts/src/components/text-field.spec.ts

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

data/lib/clapton/javascripts/src/components/text-field.ts

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

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

@@ -3,10 +3,10 @@ import { Text } from "./text"
 
 describe("Text", () => {
   it("returns empty string if no params", () => {
-    expect(new Text("").render).toBe("")
+    expect(new Text("").renderWrapper).toBe("")
   })
 
   it("returns value", () => {
-    expect(new Text("bar").render).toBe("bar")
+    expect(new Text("bar").renderWrapper).toBe("bar")
   })
 })

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

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

data/lib/clapton/javascripts/src/dom/update-component.ts

@@ -6,5 +6,5 @@ export const updateComponent = async (component: HTMLElement, state: any, proper
   const module = await import(`${componentName}`);
   const ComponentClass = module[componentName] as any;
   const instance = new ComponentClass(state, component.dataset.id);
-  morphdom(component, instance.render);
+  morphdom(component, instance.renderWrapper);
 };

data/lib/clapton/test_helper/base.rb

@@ -18,7 +18,7 @@ module Clapton
         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
     };")
         context = ExecJS.compile(js)
-        html = context.eval("new #{component.name.camelize}(#{params.to_json}).render")
+        html = context.eval("new #{component.name.camelize}(#{params.to_json}).renderWrapper")
         @page = Capybara.string(html)
       end
 

data/lib/clapton/version.rb

@@ -1,4 +1,4 @@
 module Clapton
-  VERSION = '0.0.17'
+  VERSION = '0.0.18'
 end
 

data/lib/rails/generators/clapton_generator.rb

@@ -7,6 +7,8 @@ module Rails
         create_file "app/components/#{file_name}_component.rb" do
           <<~RUBY
           class #{class_name}Component < Clapton::Component
+            def render
+            end
           end
           RUBY
         end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.17
+  version: 0.0.18
 platform: ruby
 authors:
 - Moeki Kawakami