Add shortmethod

README.md

@@ -37,10 +37,10 @@ class TaskListComponent < Clapton::Component
     @state.tasks.each do |task|
       @root.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
     end
-    add_button = Clapton::Button.new
-    add_button.add(Clapton::Text.new("Add Task"))
-    add_button.add_action(:click, :TaskListState, :add_task)
-    @root.add(add_button)
+    btn = c.button
+    btn.add(c.text("Add Task"))
+    btn.add_action(:click, :TaskListState, :add_task)
+    @root.add(btn)
     @root.render
   end
 end
@@ -51,17 +51,17 @@ end
 # app/components/task_item_component.rb
 class TaskItemComponent < Clapton::Component
   def render
-    button = Clapton::Button.new
-    button.add(Clapton::Text.new(@state.done ? "✅" : "🟩"))
-    button.add_action(:click, :TaskListState, :toggle_done)
+    btn = c.button
+    btn.add(c.text(@state.done ? "✅" : "🟩"))
+    btn.add_action(:click, :TaskListState, :toggle_done)
 
-    text_field = Clapton::TextField.new(@state, :title)
-    text_field.add_action(:input, :TaskListState, :update_title)
+    tf = c.input(@state, :title)
+    tf.add_action(:input, :TaskListState, :update_title)
 
-    datetime_field = Clapton::DateTimeField.new(@state, :due)
-    datetime_field.add_action(:input, :TaskListState, :update_due)
+    dt = c.datetime(@state, :due)
+    dt.add_action(:input, :TaskListState, :update_due)
 
-    @root.add(button).add(text_field).add(datetime_field)
+    @root.add(btn).add(tf).add(dt)
     @root.render
   end
 end
@@ -177,7 +177,7 @@ class TaskListComponent < Clapton::Component
 end
 ```
 
-### Preset Components
+### Preset Components Classes
 
 ```ruby
 block_quote = Clapton::BlockQuote.new
@@ -253,6 +253,36 @@ text_field = Clapton::TextField.new(:ExampleState, :example_attribute, { id: "ex
 text = Clapton::Text.new("Hello")`
 ```
 
+### Preset Component Methods
+
+```javascript
+c.bq(...props)
+c.box(...props)
+c.b(...props)
+c.button(...props)
+c.check(...props)
+c.code(...props)
+c.datetime(...props)
+c.el(...props)
+c.embed(...props)
+c.em(...props)
+c.form(...props)
+c.h(...props)
+c.img(...props)
+c.a(...props)
+c.li(...props)
+c.ul(...props)
+c.ol(...props)
+c.p(...props)
+c.q(...props)
+c.radio(...props)
+c.select(...props)
+c.span(...props)
+c.textarea(...props)
+c.input(...props)
+c.text(...props)
+```
+
 ### Streaming
 
 Clapton supports streaming.

lib/clapton/engine.rb

@@ -48,6 +48,8 @@ def compile_components
           js += "import { #{match[0]}Component } from '#{match[0]}Component';"
           js += "\n"
         end
+        code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)\(/, '\1@c.\2(')
+        code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)\./, '\1@c.\2().')
         js += Ruby2JS.convert(code, preset: true)
         js += "\n"
         js += "export { #{File.basename(file, ".rb").camelize} };"

lib/clapton/javascripts/dist/components-for-test.js

@@ -75,6 +75,20 @@ var Clapton = (function (exports) {
         }
     }
 
+    class Bold {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</strong>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
     class Button {
         constructor(attributes = {}) {
             this.attributes = attributes;
@@ -372,18 +386,6 @@ var Clapton = (function (exports) {
         }
     }
 
-    class Component {
-        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
-            this._state = state;
-            this.id = id;
-            this._errors = errors;
-            this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
-        }
-        get render() {
-            return this._root.render;
-        }
-    }
-
     class TextField {
         constructor(state, attribute, attributes = {}) {
             this.state = state;
@@ -409,7 +411,119 @@ var Clapton = (function (exports) {
         }
     }
 
+    class TextArea {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get render() {
+            return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    const Clapton = {
+        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+    };
+
+    class Presets {
+        bq(...props) {
+            return new Clapton.BlockQuote(...props);
+        }
+        box(...props) {
+            return new Clapton.Box(...props);
+        }
+        b(...props) {
+            return new Clapton.Bold(...props);
+        }
+        button(...props) {
+            return new Clapton.Button(...props);
+        }
+        check(...props) {
+            return new Clapton.Checkbox(props[0], props[1], props[2]);
+        }
+        code(...props) {
+            return new Clapton.Code(...props);
+        }
+        datetime(...props) {
+            return new Clapton.DateTimeField(props[0], props[1], props[2]);
+        }
+        el(...props) {
+            return new Clapton.Element(props[0], props[1]);
+        }
+        embed(...props) {
+            return new Clapton.Embed(props[0]);
+        }
+        em(...props) {
+            return new Clapton.Emphasis(...props);
+        }
+        form(...props) {
+            return new Clapton.Form(...props);
+        }
+        h(...props) {
+            return new Clapton.Heading(props[0], props[1]);
+        }
+        img(...props) {
+            return new Clapton.Image(props[0], props[1]);
+        }
+        a(...props) {
+            return new Clapton.Link(props[0], props[1]);
+        }
+        li(...props) {
+            return new Clapton.ListItem(...props);
+        }
+        ul(...props) {
+            return new Clapton.List(...props);
+        }
+        ol(...props) {
+            return new Clapton.OrderedList(...props);
+        }
+        p(...props) {
+            return new Clapton.Paragraph(...props);
+        }
+        q(...props) {
+            return new Clapton.Quote(...props);
+        }
+        radio(...props) {
+            return new Clapton.RadioButton(props[0], props[1], props[2]);
+        }
+        select(...props) {
+            return new Clapton.Select(props[0], props[1], props[2]);
+        }
+        span(...props) {
+            return new Clapton.Span(...props);
+        }
+        textarea(...props) {
+            return new Clapton.TextArea(props[0], props[1], props[2]);
+        }
+        input(...props) {
+            return new Clapton.TextField(props[0], props[1], props[2]);
+        }
+        text(...props) {
+            return new Clapton.Text(props[0]);
+        }
+    }
+
+    class Component {
+        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
+            this._state = state;
+            this.id = id;
+            this._errors = errors;
+            this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
+            this._c = new Presets();
+        }
+        get render() {
+            return this._root.render;
+        }
+    }
+
     exports.BlockQuote = BlockQuote;
+    exports.Bold = Bold;
     exports.Box = Box;
     exports.Button = Button;
     exports.Checkbox = Checkbox;
@@ -432,6 +546,7 @@ var Clapton = (function (exports) {
     exports.Select = Select;
     exports.Span = Span;
     exports.Text = Text;
+    exports.TextArea = TextArea;
     exports.TextField = TextField;
 
     return exports;