clapton 0.0.14 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7def55e21b26dedfd8843c9ace0bf4db854abf18205de4dea7c3a203d06130f6
-  data.tar.gz: 743f8549cd8a901f2f1c76a4807f05ccace77d58e9665ad35c02626df555a08a
+  metadata.gz: 9f420efd6abefefc796433bad77369a93a3686057519240abf5a9e118758ade2
+  data.tar.gz: f34d535b066e305f893bd291e464d2dfd231df8fbf837b04668fcbaa0a0b4b84
 SHA512:
-  metadata.gz: b05ba6c72f46212b628cee66c18e01644e285e6380862669eb7de55174338b4b9109ebf69505d398227c85f0a19a6e55580e6cf760951fad573bc13d78c73845
-  data.tar.gz: 2359db5b15a7ef59f43dc61d2bcb96609858cc0a19c996e9b18288046fe739a3d68bf5868f221c97c349af8781ff8483c979199e3c1c27914f617e8912555aba
+  metadata.gz: '08125a3863fc85cae262381041e72fdacdfc1fe8dd4f677cd4f5f55e658b713b3c8fa6238289c2b0fc1b5e4cc1bbb4e9ead48179eee8af6cde67b26fe5293e30'
+  data.tar.gz: 6e9a70c6be7c02f4642d44ce4f766ea8a72460962e8a0437f71bafbdaad11df2f0cfbe6fd4c10953a63ab0d324c5720286a17edc5dc66a59ca4637c5ef239258

data/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,13 +177,13 @@ class TaskListComponent < Clapton::Component
 end
 ```
 
-### Preset Components
+### Preset Components Classes
 
 ```ruby
 block_quote = Clapton::BlockQuote.new
 block_quote.add(Clapton::Text.new("Hello"))
 
-box = Clapton::Box.new
+box = **Clapton**::Box.new
 box.add(Clapton::Text.new("Hello"))
 
 button = Clapton::Button.new
@@ -253,6 +253,72 @@ 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.
+
+```ruby
+# app/states/chat_state.rb
+class ChatState < Clapton::State
+  attribute :messages
+
+  def send(params)
+    self.messages << { role: "user", content: params[:content] }
+    yield continue: true # Continue the streaming
+
+    client = OpenAI::Client.new(
+      access_token: ENV.fetch("OPENAI_ACCESS_TOKEN"),
+      log_errors: true
+    )
+    self.messages << { role: "assistant", content: "" }
+    client.chat(
+      parameters: {
+        model: "gpt-4o-mini",
+        messages: messages,
+        stream: proc do |chunk, _bytesize|
+          if chunk.dig("choices", 0, "finish_reason") == "stop"
+            yield continue: false # Stop the streaming
+          end
+
+          self.messages.last[:content] << chunk.dig("choices", 0, "delta", "content")
+          yield continue: true
+        end
+      }
+    )
+  end
+end
+```
+
 ### Optional
 
 #### Action Cable

data/lib/clapton/engine.rb

@@ -21,6 +21,10 @@ module Clapton
         FileUtils.mkdir_p(components_path) unless components_path.exist?
         FileUtils.touch(components_path.join(".keep"))
 
+        FileUtils.mkdir_p(Rails.root.join("public", "clapton")) unless Rails.root.join("public", "clapton").exist?
+        File.write(Rails.root.join("public", "clapton", "components.js"), File.read(File.join(__dir__, "javascripts", "dist", "components.js")))
+        File.write(Rails.root.join("public", "clapton", "client.js"), File.read(File.join(__dir__, "javascripts", "dist", "client.js")))
+
         compile_components
 
         listener = Listen.to(Rails.root.join("app", "components")) do |modified, added, removed|
@@ -32,9 +36,9 @@ module Clapton
     end
 
     def compile_components
-      FileUtils.mkdir_p(Rails.root.join("public", "clapton")) unless Rails.root.join("public", "clapton").exist?
-      File.write(Rails.root.join("public", "clapton", "components.js"), File.read(File.join(__dir__, "javascripts", "dist", "components.js")))
-      File.write(Rails.root.join("public", "clapton", "client.js"), File.read(File.join(__dir__, "javascripts", "dist", "client.js")))
+      puts "Clapton: Compiling components"
+      
+      start_time = Time.now
       Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
         code = File.read(file)
         js = ""
@@ -44,12 +48,16 @@ module Clapton
           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} };"
         js += "\n"
         File.write(Rails.root.join("public", "clapton", "#{File.basename(file, ".rb").camelize}.js"), js)
       end
+      end_time = Time.now
+      puts "Clapton: Component compilation took #{end_time - start_time} seconds"
     end
   end
 end

data/lib/clapton/javascripts/dist/client.js

@@ -1287,8 +1287,7 @@ function getConfig(name) {
 
 const updateComponent = async (component, state, property, target) => {
     state[property] = target.value;
-    component.setAttribute("data-state", JSON.stringify(state));
-    const componentName = component.getAttribute("data-component");
+    const componentName = component.dataset.component;
     const module = await import(`${componentName}`);
     const ComponentClass = module[componentName];
     const instance = new ComponentClass(state, component.dataset.id);
@@ -1348,26 +1347,26 @@ const handleAction = async (target, stateName, fn) => {
     if (!targetComponent)
         return;
     const component = target.closest(`[data-component]`);
-    const attribute = target.getAttribute("data-attribute");
+    const attribute = target.dataset.attribute;
     if (attribute) {
-        const state = JSON.parse(component.getAttribute("data-state") || "{}");
+        const state = JSON.parse(component.dataset.state || "{}");
         if (target.tagName === "INPUT") {
             state[attribute] = target.value;
-            component.setAttribute("data-state", JSON.stringify(state));
+            component.dataset.state = JSON.stringify(state);
         }
     }
     claptonChannel.perform("action", {
         data: {
             component: {
                 name: stateName.replace("State", "Component"),
-                id: targetComponent.getAttribute("data-id"),
+                id: targetComponent.dataset.id,
             },
             state: {
                 name: stateName,
                 action: fn,
-                attributes: JSON.parse(targetComponent.getAttribute("data-state") || "{}"),
+                attributes: JSON.parse(targetComponent.dataset.state || "{}"),
             },
-            params: JSON.parse(component.getAttribute("data-state") || "{}")
+            params: JSON.parse(component.dataset.state || "{}")
         }
     });
 };

data/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;

data/lib/clapton/javascripts/dist/components.js

@@ -90,6 +90,20 @@ class Button {
     }
 }
 
+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 Checkbox {
     constructor(state, attribute, attributes = {}) {
         this.state = state;
@@ -369,12 +383,91 @@ class Span {
     }
 }
 
+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;
@@ -406,8 +499,24 @@ class Text {
     }
 }
 
+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
+    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
 };
 
 export { Clapton };

data/lib/clapton/javascripts/src/actions/handle-action.ts

@@ -9,12 +9,12 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
   }
   if (!targetComponent) return;
   const component = target.closest(`[data-component]`) as HTMLElement;
-  const attribute = target.getAttribute("data-attribute");
+  const attribute = target.dataset.attribute;
   if (attribute) {  
-    const state = JSON.parse(component.getAttribute("data-state") || "{}");
+    const state = JSON.parse(component.dataset.state || "{}");
     if (target.tagName === "INPUT") {
       state[attribute] = (target as HTMLInputElement).value;
-      component.setAttribute("data-state", JSON.stringify(state));
+      component.dataset.state = JSON.stringify(state);
     }
   };
   claptonChannel.perform(
@@ -23,14 +23,14 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
       data: {
         component: {
           name: stateName.replace("State", "Component"),
-          id: targetComponent.getAttribute("data-id"),
+          id: targetComponent.dataset.id,
         },
         state: {
           name: stateName,
           action: fn,
-          attributes: JSON.parse(targetComponent.getAttribute("data-state") || "{}"),
+          attributes: JSON.parse(targetComponent.dataset.state || "{}"),
         },
-        params: JSON.parse(component.getAttribute("data-state") || "{}")
+        params: JSON.parse(component.dataset.state || "{}")
       }
     }
   );

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

@@ -0,0 +1,21 @@
+import { describe, it, expect } from "vitest"
+import { Text } from "./text"
+import { Bold } from "./bold"
+
+describe("Bold", () => {
+  it("returns empty string if no params", () => {
+    expect(new Bold().render).toBe("<strong ></strong>")
+  })
+
+  it("returns attributes and data attributes", () => {
+    expect(new Bold({ id: "1", "data-foo": "bar" }).render).toBe(`<strong id='1' data-foo='bar'></strong>`)
+  })
+
+
+  it("adds children", () => {
+    const text = new Text("Hello")
+    const bold = new Bold()
+    bold.add(text)
+    expect(bold.render).toBe(`<strong >Hello</strong>`)
+  })
+})

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

@@ -0,0 +1,20 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Bold {
+  attributes: Record<string, any>;
+  children: any[];
+
+  constructor(attributes: Record<string, any> = {}) {
+    this.children = [];
+    this.attributes = attributes;
+  }
+
+  get render(): string {
+    return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</strong>`;
+  }
+
+  add(child: any): Bold {
+    this.children.push(child);
+    return this;
+  }
+}

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

@@ -1,16 +1,19 @@
 import { Box } from "./box";
+import { Presets } from "./presets";
 
 export class Component {
   id: string;
   _state: any;
   _errors: any[];
   _root: Box;
+  _c: Presets;
 
   constructor(state: any = {}, id: string = Math.random().toString(36).substring(2, 10), errors: any[] = []) {
     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(): string {

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

@@ -0,0 +1,105 @@
+import { Clapton } from "components";
+
+export class Presets {
+  bq(...props: any[]) {
+    return new Clapton.BlockQuote(...props)
+  }
+
+  box(...props: any[]) {
+    return new Clapton.Box(...props)
+  }
+
+  b(...props: any[]) {
+    return new Clapton.Bold(...props)
+  }
+
+  button(...props: any[]) {
+    return new Clapton.Button(...props)
+  }
+
+  check(...props: any[]) {
+    return new Clapton.Checkbox(props[0], props[1], props[2])
+  }
+
+  code(...props: any[]) {
+    return new Clapton.Code(...props)
+  }
+
+  datetime(...props: any[]) {
+    return new Clapton.DateTimeField(props[0], props[1], props[2])
+  }
+
+  el(...props: any[]) {
+    return new Clapton.Element(props[0], props[1])
+  }
+
+  embed(...props: any[]) {
+    return new Clapton.Embed(props[0])
+  }
+
+  em(...props: any[]) {
+    return new Clapton.Emphasis(...props)
+  }
+
+  form(...props: any[]) {
+    return new Clapton.Form(...props)
+  }
+
+  h(...props: any[]) {
+    return new Clapton.Heading(props[0], props[1])
+  }
+
+  img(...props: any[]) {
+    return new Clapton.Image(props[0], props[1])
+  }
+
+  a(...props: any[]) {
+    return new Clapton.Link(props[0], props[1])
+  }
+  
+  li(...props: any[]) {
+    return new Clapton.ListItem(...props)
+  }
+
+  ul(...props: any[]) {
+    return new Clapton.List(...props)
+  }
+
+  ol(...props: any[]) {
+    return new Clapton.OrderedList(...props)
+  }
+
+  
+  p(...props: any[]) {
+    return new Clapton.Paragraph(...props)
+  }
+  
+  q(...props: any[]) {
+    return new Clapton.Quote(...props)
+  }
+
+  radio(...props: any[]) {
+    return new Clapton.RadioButton(props[0], props[1], props[2])
+  }
+  
+  select(...props: any[]) {
+    return new Clapton.Select(props[0], props[1], props[2])
+  }
+  
+  
+  span(...props: any[]) {
+    return new Clapton.Span(...props)
+  }
+  
+  textarea(...props: any[]) {
+    return new Clapton.TextArea(props[0], props[1], props[2])
+  }
+  
+  input(...props: any[]) {
+    return new Clapton.TextField(props[0], props[1], props[2])
+  }
+
+  text(...props: any[]) {
+    return new Clapton.Text(props[0])
+  }
+}

data/lib/clapton/javascripts/src/components-for-test.ts

@@ -1,5 +1,6 @@
 import { BlockQuote } from "./components/block-quote"
 import { Box } from "./components/box"
+import { Bold } from "./components/bold"
 import { Button } from "./components/button"
 import { Checkbox } from "./components/checkbox"
 import { Code } from "./components/code"
@@ -22,8 +23,8 @@ import { Span } from "./components/span"
 import { Component } from "./components/component"
 import { TextField } from "./components/text-field"
 import { Text } from "./components/text"
-
+import { TextArea } from "./components/text-area"
 
 export {
-  Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed
+  Component, 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
 };

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

@@ -1,6 +1,7 @@
 import { BlockQuote } from "./components/block-quote"
 import { Box } from "./components/box"
 import { Button } from "./components/button"
+import { Bold } from "./components/bold"
 import { Checkbox } from "./components/checkbox"
 import { Code } from "./components/code"
 import { DateTimeField } from "./components/datetime-field"
@@ -22,8 +23,8 @@ import { Span } from "./components/span"
 import { Component } from "./components/component"
 import { TextField } from "./components/text-field"
 import { Text } from "./components/text"
-
+import { TextArea } from "./components/text-area"
 
 export 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
+  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
 };

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

@@ -2,8 +2,7 @@ import morphdom from "morphdom";
 
 export const updateComponent = async (component: HTMLElement, state: any, property: string, target: HTMLInputElement) => {
   state[property] = target.value;
-  component.setAttribute("data-state", JSON.stringify(state));
-  const componentName = component.getAttribute("data-component") as string;
+  const componentName = component.dataset.component as string;
   const module = await import(`${componentName}`);
   const ComponentClass = module[componentName] as any;
   const instance = new ComponentClass(state, component.dataset.id);

data/lib/clapton/test_helper/base.rb

@@ -3,14 +3,22 @@ module Clapton
     module Base
       require "execjs"
 
-      def render_component(component, **kwargs)
+      def render_component(component, params)
         js = File.read(File.join(__dir__, "..", "javascripts", "dist", "components-for-test.js"))
         Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
-          js += Ruby2JS.convert(File.read(file), preset: true)
+          code = File.read(file)
+          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"
         end
+        js = js.sub("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
+    };", "const 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}(#{kwargs.to_json}).render")
+        html = context.eval("new #{component.name.camelize}(#{params.to_json}).render")
         @page = Capybara.string(html)
       end
 

data/lib/clapton/version.rb

@@ -1,4 +1,3 @@
 module Clapton
-  VERSION = '0.0.14'
+  VERSION = '0.0.16'
 end
-

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.14
+  version: 0.0.16
 platform: ruby
 authors:
 - Moeki Kawakami
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-15 00:00:00.000000000 Z
+date: 2024-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -6708,6 +6708,8 @@ files:
 - lib/clapton/javascripts/src/components.ts
 - lib/clapton/javascripts/src/components/block-quote.spec.ts
 - lib/clapton/javascripts/src/components/block-quote.ts
+- lib/clapton/javascripts/src/components/bold.spec.ts
+- lib/clapton/javascripts/src/components/bold.ts
 - lib/clapton/javascripts/src/components/box.spec.ts
 - lib/clapton/javascripts/src/components/box.ts
 - lib/clapton/javascripts/src/components/button.spec.ts
@@ -6716,7 +6718,6 @@ files:
 - lib/clapton/javascripts/src/components/checkbox.ts
 - lib/clapton/javascripts/src/components/code.spec.ts
 - lib/clapton/javascripts/src/components/code.ts
-- lib/clapton/javascripts/src/components/component.spec.ts
 - lib/clapton/javascripts/src/components/component.ts
 - lib/clapton/javascripts/src/components/datetime-field.spec.ts
 - lib/clapton/javascripts/src/components/datetime-field.ts
@@ -6742,6 +6743,7 @@ files:
 - lib/clapton/javascripts/src/components/ordered-list.ts
 - lib/clapton/javascripts/src/components/paragraph.spec.ts
 - lib/clapton/javascripts/src/components/paragraph.ts
+- lib/clapton/javascripts/src/components/presets.ts
 - lib/clapton/javascripts/src/components/quote.spec.ts
 - lib/clapton/javascripts/src/components/quote.ts
 - lib/clapton/javascripts/src/components/radio-button.spec.ts

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

@@ -1,16 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { Component } from "./component"
-import { Text } from "./text"
-
-class TestComponent extends Component {
-  get render() {
-    this._root.add(new Text("Hello, world!"))
-    return this._root.render
-  }
-}
-
-describe("Component", () => {
-  it("returns empty string if no params", () => {
-    expect(new TestComponent().render).toMatch(/<div data-component='TestComponent' data-state='{}' data-id='.{8}'>Hello, world!<\/div>/)
-  })
-})