clapton 0.0.18 → 0.0.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75a7ef3678828970fe19e84f474a8480a2b3aef73bb7cad48d771952560dc26f
-  data.tar.gz: d183141896d4742b8481d03db28e1d38d1b0ba3d447c8a0c4444d46fa06cec72
+  metadata.gz: 81cd4cda35f3f05f9df998b38741783474c8ec88120fc4115bba162595299449
+  data.tar.gz: 281d54281936bcfd3f35136419f4ebadbc051809efa38749d60859032eeb4f4b
 SHA512:
-  metadata.gz: d22f7c4bd63092f2f1e701f91d8e86d19bd7a7b1f2ea0fe2bc42709d94b84737e34eaacad59b3c58485407932c372b9535cf2649905f81c8a8e2f17b8bfcba3c
-  data.tar.gz: ea1047109748b7b047c96823727fc3d681d74463d04ca97bb28bac3b354c1b4d3474a9ab001fb03be1029f769cf6fa0ccc69536b24131f75481ae673bd2b08b9
+  metadata.gz: bbcd0a11b60e9bae0c2e5e14332d3db99438dae9a1d97731bcb93c7ccd2757653ee1ac4e017864dbf4a90619b48e06817659d1051ebe87d2b28eeeeb074acd33
+  data.tar.gz: 02d6310b781922e927a83908aa1238790a63c745d2900990b74c6a1ef7c9ead4a9194826a38db6d9f86155e631a4d2f1008a64c0f0a2fbca90fa323d8f29d791

data/README.md

@@ -34,12 +34,12 @@ To use a Clapton component in your view:
 # app/components/task_list_component.rb
 class TaskListComponent < Clapton::Component
   def render
-    box = c.box
+    box = c(:box)
     @state.tasks.each do |task|
       box.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 = c(:button)
+    btn.add(c(:text, "Add Task"))
     btn.add_action(:click, :TaskListState, :add_task)
     box.add(btn)
   end
@@ -51,15 +51,15 @@ end
 # app/components/task_item_component.rb
 class TaskItemComponent < Clapton::Component
   def render
-    box = c.box
-    btn = c.button
-    btn.add(c.text(@state.done ? "✅" : "🟩"))
+    box = c(:box)
+    btn = c(:button)
+    btn.add(c(:text, @state.done ? "✅" : "🟩"))
     btn.add_action(:click, :TaskListState, :toggle_done)
 
-    tf = c.input(@state, :title)
+    tf = c(:input, @state, :title)
     tf.add_action(:input, :TaskListState, :update_title)
 
-    dt = c.datetime(@state, :due)
+    dt = c(:datetime, @state, :due)
     dt.add_action(:input, :TaskListState, :update_due)
 
     box.add(btn).add(tf).add(dt)
@@ -171,7 +171,7 @@ 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 = c(:box)
     box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
   end
 end
@@ -256,31 +256,31 @@ 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)
+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
@@ -349,6 +349,18 @@ module ApplicationCable
 end
 ```
 
+### Events
+
+#### clapton:render
+
+The `clapton:render` event is a custom event that is triggered when the component is rendered.
+
+```javascript
+document.addEventListener("clapton:render", () => {
+  console.log("clapton:render");
+});
+```
+
 ### Testing
 
 #### RSpec

data/app/helpers/clapton/clapton_helper.rb

@@ -9,6 +9,7 @@ module Clapton
             "imports": {
               "client": "/clapton/client.js",
               "components": "/clapton/components.js",
+              "c": "/clapton/c.js",
               #{ all_components.map do
                |component| "\"#{File.basename(component, ".rb").camelize}\": \"/clapton/#{File.basename(component, ".rb").camelize}.js\""
               end.join(",\n") }

data/lib/clapton/engine.rb

@@ -24,6 +24,7 @@ module Clapton
         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")))
+        File.write(Rails.root.join("public", "clapton", "c.js"), File.read(File.join(__dir__, "javascripts", "dist", "c.js")))
 
         compile_components
 
@@ -44,6 +45,8 @@ module Clapton
         js = ""
         js += "import { Clapton } from 'components';"
         js += "\n"
+        js += "import { c } from 'c';"
+        js += "\n"
         code.scan(/(\w+)Component\.new/).each do |match|
           js += "import { #{match[0]}Component } from '#{match[0]}Component';"
           js += "\n"