clapton 0.0.15 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31438028bfe58d5ce7e560543850167002e53f148784072f20834081c0421b34
-  data.tar.gz: 2509467d610325dbaf0c1a20a953e50ecd568b8722d1b2fd7a1bc1acbb1bd6aa
+  metadata.gz: 9f420efd6abefefc796433bad77369a93a3686057519240abf5a9e118758ade2
+  data.tar.gz: f34d535b066e305f893bd291e464d2dfd231df8fbf837b04668fcbaa0a0b4b84
 SHA512:
-  metadata.gz: c68a61320829b1fcd198c627af8ff48de08479f1a725ebb51c14dfcbfc74277c4c0fec8735c4becf2994ebb1abcb36222a102dc9403d1d581406534a0fc11ca6
-  data.tar.gz: 5500b02be72eb9b161c1882ac913fd48ff6a0114e1bb3aa46b38572eb5885e00a4b2b7a10bc4968b3535331ba67916df292eb65dceff6a203e960d0c46eb47bd
+  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

@@ -48,6 +48,8 @@ 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} };"

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/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/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,3 +1,3 @@
 module Clapton
-  VERSION = '0.0.15'
+  VERSION = '0.0.16'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.15
+  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>/)
-  })
-})