clapton 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +23 -105
  3. data/lib/clapton/javascripts/dist/c-for-test.js +129 -271
  4. data/lib/clapton/javascripts/dist/c.js +129 -271
  5. data/lib/clapton/javascripts/dist/client.js +3 -0
  6. data/lib/clapton/javascripts/dist/components-for-test.js +90 -245
  7. data/lib/clapton/javascripts/dist/components.js +89 -241
  8. data/lib/clapton/javascripts/src/c-base.ts +45 -33
  9. data/lib/clapton/javascripts/src/channel/clapton-channel.js +1 -0
  10. data/lib/clapton/javascripts/src/client.ts +1 -0
  11. data/lib/clapton/javascripts/src/components/{box.ts → base.ts} +6 -8
  12. data/lib/clapton/javascripts/src/components/block-quote.spec.ts +1 -1
  13. data/lib/clapton/javascripts/src/components/block-quote.ts +2 -14
  14. data/lib/clapton/javascripts/src/components/bold.ts +2 -14
  15. data/lib/clapton/javascripts/src/components/button.ts +2 -19
  16. data/lib/clapton/javascripts/src/components/code.ts +2 -14
  17. data/lib/clapton/javascripts/src/components/component.ts +28 -2
  18. data/lib/clapton/javascripts/src/components/{box.spec.ts → div.spec.ts} +8 -8
  19. data/lib/clapton/javascripts/src/components/div.ts +8 -0
  20. data/lib/clapton/javascripts/src/components/element.ts +3 -9
  21. data/lib/clapton/javascripts/src/components/emphasis.ts +2 -14
  22. data/lib/clapton/javascripts/src/components/form.ts +2 -14
  23. data/lib/clapton/javascripts/src/components/heading.ts +4 -10
  24. data/lib/clapton/javascripts/src/components/image.spec.ts +2 -2
  25. data/lib/clapton/javascripts/src/components/image.ts +3 -14
  26. data/lib/clapton/javascripts/src/components/input.spec.ts +16 -0
  27. data/lib/clapton/javascripts/src/components/{datetime-field.ts → input.ts} +9 -11
  28. data/lib/clapton/javascripts/src/components/link.spec.ts +6 -6
  29. data/lib/clapton/javascripts/src/components/link.ts +3 -16
  30. data/lib/clapton/javascripts/src/components/list-item.ts +2 -14
  31. data/lib/clapton/javascripts/src/components/list.ts +2 -14
  32. data/lib/clapton/javascripts/src/components/ordered-list.ts +2 -14
  33. data/lib/clapton/javascripts/src/components/paragraph.ts +2 -14
  34. data/lib/clapton/javascripts/src/components/quote.ts +2 -14
  35. data/lib/clapton/javascripts/src/components/select.ts +3 -5
  36. data/lib/clapton/javascripts/src/components/span.ts +2 -14
  37. data/lib/clapton/javascripts/src/components/text-area.ts +4 -9
  38. data/lib/clapton/javascripts/src/components-for-test.ts +3 -6
  39. data/lib/clapton/javascripts/src/components.ts +3 -6
  40. data/lib/clapton/javascripts/src/dom/update-component.ts +1 -0
  41. data/lib/clapton/test_helper/base.rb +4 -4
  42. data/lib/clapton/version.rb +1 -1
  43. metadata +7 -14
  44. data/lib/clapton/javascripts/dist/c +0 -559
  45. data/lib/clapton/javascripts/dist/c-base.js +0 -589
  46. data/lib/clapton/javascripts/src/components/checkbox.spec.ts +0 -16
  47. data/lib/clapton/javascripts/src/components/checkbox.ts +0 -23
  48. data/lib/clapton/javascripts/src/components/datetime-field.spec.ts +0 -16
  49. data/lib/clapton/javascripts/src/components/radio-button.spec.ts +0 -16
  50. data/lib/clapton/javascripts/src/components/radio-button.ts +0 -23
  51. data/lib/clapton/javascripts/src/components/text-field.spec.ts +0 -16
  52. data/lib/clapton/javascripts/src/components/text-field.ts +0 -23
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f5a917233f15421e530f894af3f7fa67b46b79c78d8568cd158566610f6c2db5
4
- data.tar.gz: 2935aea66e3fc3e7442606c0fcf55ffcea56b61bb36864c4fc77101680cc29ea
3
+ metadata.gz: 99a804644eba855e4437d0fda777f485e772d6a9d6330509806f1569d5ad09fc
4
+ data.tar.gz: c2b96b526a162c67a948bc95b2dc3f0fcf06a39e0a0330f8433d75da16df6cf8
5
5
  SHA512:
6
- metadata.gz: 458297f32dca2583bfb675fb74bba00b781bef37d825b9a76e9116cea3c3bf0f98b18d1d6867d62b67d47638335c2f99d0ef3885358281f5fad63245e53e6d2f
7
- data.tar.gz: 586febac7acaf53ed42c0dadaa696c5e136bee87de707214343cf36104f2b56625f3aef3cfa4dfd71bd34c8108243813b26f8ea8f8fa7d7aea7ac2b686e9c25a
6
+ metadata.gz: c4bb2828252d78c4983053cc35820879f27a54192eb5bbb8c87f3a7c1948a0205a8298b40f665987473cfc8e8ac1e9f8f5bd083743b8f6fa643d2b4d9b11b91c
7
+ data.tar.gz: 396ff4ac17f4d18451f6f165fc00c5f9808c743cb31fd6ab57d8f75bff6a432c2853b3bc093174923bbd5ee514d10332bcb77df9847e575fff8d014570c2e0d8
data/README.md CHANGED
@@ -34,14 +34,14 @@ To use a Clapton component in your view:
34
34
  # app/components/task_list_component.rb
35
35
  class TaskListComponent < Clapton::Component
36
36
  def render
37
- box = c(:box)
37
+ div = c(:div)
38
38
  @state.tasks.each do |task|
39
- box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
39
+ div.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
40
40
  end
41
41
  btn = c(:button)
42
42
  btn.add(c(:text, "Add Task"))
43
43
  btn.add_action(:click, :TaskListState, :add_task)
44
- box.add(btn)
44
+ div.add(btn)
45
45
  end
46
46
  end
47
47
 
@@ -51,7 +51,7 @@ end
51
51
  # app/components/task_item_component.rb
52
52
  class TaskItemComponent < Clapton::Component
53
53
  def render
54
- box = c(:box)
54
+ div = c(:div)
55
55
  btn = c(:button)
56
56
  btn.add(c(:text, @state.done ? "✅" : "🟩"))
57
57
  btn.add_action(:click, :TaskListState, :toggle_done)
@@ -62,7 +62,7 @@ class TaskItemComponent < Clapton::Component
62
62
  dt = c(:datetime, @state, :due)
63
63
  dt.add_action(:input, :TaskListState, :update_due)
64
64
 
65
- box.add(btn).add(tf).add(dt)
65
+ div.add(btn).add(tf).add(dt)
66
66
  end
67
67
  end
68
68
 
@@ -171,116 +171,34 @@ The `render` event is a special event that is triggered when the component is re
171
171
  class TaskListComponent < Clapton::Component
172
172
  def render
173
173
  # ...
174
- box = c(:box)
175
- box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
174
+ div = c(:div)
175
+ div.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
176
176
  end
177
177
  end
178
178
  ```
179
179
 
180
- ### Preset Components Classes
180
+ ### Effect
181
181
 
182
- ```ruby
183
- block_quote = Clapton::BlockQuote.new
184
- block_quote.add(Clapton::Text.new("Hello"))
185
-
186
- box = Clapton::Box.new
187
- box.add(Clapton::Text.new("Hello"))
188
-
189
- button = Clapton::Button.new
190
- button.add(Clapton::Text.new("Click me"))
191
- button.add_action(:click, :TaskListState, :add_task)
192
-
193
- checkbox = Clapton::Checkbox.new(:ExampleState, :example_attribute, { id: "example-checkbox" })
194
- checkbox.add_action(:change, :ExampleState, :update_example_attribute)
195
-
196
- code = Clapton::Code.new
197
- code.add(Clapton::Text.new("Hello"))
198
-
199
- datetime_field = Clapton::DateTimeField.new(:ExampleState, :example_attribute, { id: "example-datetime-field" })
200
-
201
- element = Clapton::Element.new("div", { id: "example-element" })
202
- element.add(Clapton::Text.new("Hello"))
203
-
204
- embed = Clapton::Embed.new("<blockquote>This is a test</blockquote>")
182
+ The `effect` method is a method that is triggered when the state is changed.
205
183
 
206
- emphasis = Clapton::Emphasis.new
207
- emphasis.add(Clapton::Text.new("Hello"))
208
-
209
- form = Clapton::Form.new
210
- form.add(Clapton::Text.new("Hello"))
211
-
212
- heading = Clapton::Heading.new(1)
213
- heading.add(Clapton::Text.new("Hello"))
214
-
215
- image = Clapton::Image.new("https://example.com/image.png", "Example Image")
216
-
217
- link = Clapton::Link.new("https://example.com")
218
- link.add(Clapton::Text.new("Example Link"))
219
-
220
- list = Clapton::List.new
221
- (1..3).each do
222
- item = Clapton::ListItem.new
223
- item.add(Clapton::Text.new("Item #{i}"))
224
- list.add(item)
225
- end
226
-
227
- ordered_list = Clapton::OrderedList.new
228
- (1..3).each do
229
- item = Clapton::ListItem.new
230
- item.add(Clapton::Text.new("Item #{i}"))
231
- ordered_list.add(item)
184
+ ```ruby
185
+ # app/components/task_list_component.rb
186
+ class TaskListComponent < Clapton::Component
187
+ effect [:tasks] do |state|
188
+ puts state[:tasks]
189
+ end
232
190
  end
233
-
234
- paragraph = Clapton::Paragraph.new
235
- paragraph.add(Clapton::Text.new("Hello"))
236
-
237
- quote = Clapton::Quote.new
238
- quote.add(Clapton::Text.new("Hello"))
239
-
240
- radio_button = Clapton::RadioButton.new(:ExampleState, :example_attribute, { id: "example-radio-button" })
241
- radio_button.add_action(:change, :ExampleState, :update_example_attribute)
242
-
243
- select = Clapton::Select.new([{ value: "1", text: "One" }, { value: "2", text: "Two" }], :ExampleState, :example_attribute, { id: "example-select" })
244
- select.add_action(:change, :ExampleState, :update_example_attribute)
245
-
246
- span = Clapton::Span.new
247
- span.add(Clapton::Text.new("Hello"))
248
-
249
- text_area = Clapton::TextArea.new(:ExampleState, :example_attribute, { id: "example-text-area" })
250
-
251
- text_field = Clapton::TextField.new(:ExampleState, :example_attribute, { id: "example-text-field" })
252
-
253
- text = Clapton::Text.new("Hello")`
254
191
  ```
255
192
 
256
- ### Preset Component Methods
193
+ If dependencies are not specified, the effect will be triggered on the first render.
257
194
 
258
- ```javascript
259
- c(:bq, ...props)
260
- c(:box, ...props)
261
- c(:b, ...props)
262
- c(:button, ...props)
263
- c(:check, ...props)
264
- c(:code, ...props)
265
- c(:datetime, ...props)
266
- c(:el, ...props)
267
- c(:embed, ...props)
268
- c(:em, ...props)
269
- c(:form, ...props)
270
- c(:h, ...props)
271
- c(:img, ...props)
272
- c(:a, ...props)
273
- c(:li, ...props)
274
- c(:ul, ...props)
275
- c(:ol, ...props)
276
- c(:p, ...props)
277
- c(:q, ...props)
278
- c(:radio, ...props)
279
- c(:select, ...props)
280
- c(:span, ...props)
281
- c(:textarea, ...props)
282
- c(:input, ...props)
283
- c(:text, ...props)
195
+ ```ruby
196
+ # app/components/video_player_component.rb
197
+ class VideoPlayerComponent < Clapton::Component
198
+ effect [] do
199
+ puts "First render"
200
+ end
201
+ end
284
202
  ```
285
203
 
286
204
  ### Streaming