clapton 0.0.23 → 0.0.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5a917233f15421e530f894af3f7fa67b46b79c78d8568cd158566610f6c2db5
-  data.tar.gz: 2935aea66e3fc3e7442606c0fcf55ffcea56b61bb36864c4fc77101680cc29ea
+  metadata.gz: 99a804644eba855e4437d0fda777f485e772d6a9d6330509806f1569d5ad09fc
+  data.tar.gz: c2b96b526a162c67a948bc95b2dc3f0fcf06a39e0a0330f8433d75da16df6cf8
 SHA512:
-  metadata.gz: 458297f32dca2583bfb675fb74bba00b781bef37d825b9a76e9116cea3c3bf0f98b18d1d6867d62b67d47638335c2f99d0ef3885358281f5fad63245e53e6d2f
-  data.tar.gz: 586febac7acaf53ed42c0dadaa696c5e136bee87de707214343cf36104f2b56625f3aef3cfa4dfd71bd34c8108243813b26f8ea8f8fa7d7aea7ac2b686e9c25a
+  metadata.gz: c4bb2828252d78c4983053cc35820879f27a54192eb5bbb8c87f3a7c1948a0205a8298b40f665987473cfc8e8ac1e9f8f5bd083743b8f6fa643d2b4d9b11b91c
+  data.tar.gz: 396ff4ac17f4d18451f6f165fc00c5f9808c743cb31fd6ab57d8f75bff6a432c2853b3bc093174923bbd5ee514d10332bcb77df9847e575fff8d014570c2e0d8

data/README.md

@@ -34,14 +34,14 @@ To use a Clapton component in your view:
 # app/components/task_list_component.rb
 class TaskListComponent < Clapton::Component
   def render
-    box = c(:box)
+    div = c(:div)
     @state.tasks.each do |task|
-      box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
+      div.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
     end
     btn = c(:button)
     btn.add(c(:text, "Add Task"))
     btn.add_action(:click, :TaskListState, :add_task)
-    box.add(btn)
+    div.add(btn)
   end
 end
 
@@ -51,7 +51,7 @@ end
 # app/components/task_item_component.rb
 class TaskItemComponent < Clapton::Component
   def render
-    box = c(:box)
+    div = c(:div)
     btn = c(:button)
     btn.add(c(:text, @state.done ? "✅" : "🟩"))
     btn.add_action(:click, :TaskListState, :toggle_done)
@@ -62,7 +62,7 @@ class TaskItemComponent < Clapton::Component
     dt = c(:datetime, @state, :due)
     dt.add_action(:input, :TaskListState, :update_due)
 
-    box.add(btn).add(tf).add(dt)
+    div.add(btn).add(tf).add(dt)
   end
 end
 
@@ -171,116 +171,34 @@ The `render` event is a special event that is triggered when the component is re
 class TaskListComponent < Clapton::Component
   def render
     # ...
-    box = c(:box)
-    box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
+    div = c(:div)
+    div.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
   end
 end
 ```
 
-### Preset Components Classes
+### Effect
 
-```ruby
-block_quote = Clapton::BlockQuote.new
-block_quote.add(Clapton::Text.new("Hello"))
-
-box = Clapton::Box.new
-box.add(Clapton::Text.new("Hello"))
-
-button = Clapton::Button.new
-button.add(Clapton::Text.new("Click me"))
-button.add_action(:click, :TaskListState, :add_task)
-
-checkbox = Clapton::Checkbox.new(:ExampleState, :example_attribute, { id: "example-checkbox" })
-checkbox.add_action(:change, :ExampleState, :update_example_attribute)
-
-code = Clapton::Code.new
-code.add(Clapton::Text.new("Hello"))
-
-datetime_field = Clapton::DateTimeField.new(:ExampleState, :example_attribute, { id: "example-datetime-field" })
-
-element = Clapton::Element.new("div", { id: "example-element" })
-element.add(Clapton::Text.new("Hello"))
-
-embed = Clapton::Embed.new("<blockquote>This is a test</blockquote>")
+The `effect` method is a method that is triggered when the state is changed.
 
-emphasis = Clapton::Emphasis.new
-emphasis.add(Clapton::Text.new("Hello"))
-
-form = Clapton::Form.new
-form.add(Clapton::Text.new("Hello"))
-
-heading = Clapton::Heading.new(1)
-heading.add(Clapton::Text.new("Hello"))
-
-image = Clapton::Image.new("https://example.com/image.png", "Example Image")
-
-link = Clapton::Link.new("https://example.com")
-link.add(Clapton::Text.new("Example Link"))
-
-list = Clapton::List.new
-(1..3).each do
-  item = Clapton::ListItem.new
-  item.add(Clapton::Text.new("Item #{i}"))
-  list.add(item)
-end
-
-ordered_list = Clapton::OrderedList.new
-(1..3).each do
-  item = Clapton::ListItem.new
-  item.add(Clapton::Text.new("Item #{i}"))
-  ordered_list.add(item)
+```ruby
+# app/components/task_list_component.rb
+class TaskListComponent < Clapton::Component
+  effect [:tasks] do |state|
+    puts state[:tasks]
+  end
 end
-
-paragraph = Clapton::Paragraph.new
-paragraph.add(Clapton::Text.new("Hello"))
-
-quote = Clapton::Quote.new
-quote.add(Clapton::Text.new("Hello"))
-
-radio_button = Clapton::RadioButton.new(:ExampleState, :example_attribute, { id: "example-radio-button" })
-radio_button.add_action(:change, :ExampleState, :update_example_attribute)
-
-select = Clapton::Select.new([{ value: "1", text: "One" }, { value: "2", text: "Two" }], :ExampleState, :example_attribute, { id: "example-select" })
-select.add_action(:change, :ExampleState, :update_example_attribute)
-
-span = Clapton::Span.new
-span.add(Clapton::Text.new("Hello"))
-
-text_area = Clapton::TextArea.new(:ExampleState, :example_attribute, { id: "example-text-area" })
-
-text_field = Clapton::TextField.new(:ExampleState, :example_attribute, { id: "example-text-field" })
-
-text = Clapton::Text.new("Hello")`
 ```
 
-### Preset Component Methods
+If dependencies are not specified, the effect will be triggered on the first render.
 
-```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)
+```ruby
+# app/components/video_player_component.rb
+class VideoPlayerComponent < Clapton::Component
+  effect [] do
+    puts "First render"
+  end
+end
 ```
 
 ### Streaming