clapton 0.0.18 → 0.0.20
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.
- checksums.yaml +4 -4
- data/README.md +46 -34
- data/app/helpers/clapton/clapton_helper.rb +1 -0
- data/lib/clapton/engine.rb +3 -0
- data/lib/clapton/javascripts/dist/c +559 -0
- data/lib/clapton/javascripts/dist/c-base.js +589 -0
- data/lib/clapton/javascripts/dist/c-for-test.js +589 -0
- data/lib/clapton/javascripts/dist/c.js +584 -0
- data/lib/clapton/javascripts/dist/client.js +2 -0
- data/lib/clapton/javascripts/dist/components-for-test.js +21 -99
- data/lib/clapton/javascripts/dist/components.js +6 -80
- data/lib/clapton/javascripts/rollup.config.mjs +31 -0
- data/lib/clapton/javascripts/src/c-for-test.ts +160 -0
- data/lib/clapton/javascripts/src/c.ts +160 -0
- data/lib/clapton/javascripts/src/client.ts +2 -0
- data/lib/clapton/javascripts/src/components/component.ts +5 -4
- data/lib/clapton/test_helper/base.rb +1 -2
- data/lib/clapton/version.rb +1 -2
- metadata +7 -2
- data/lib/clapton/javascripts/src/components/presets.ts +0 -105
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 81cd4cda35f3f05f9df998b38741783474c8ec88120fc4115bba162595299449
|
4
|
+
data.tar.gz: 281d54281936bcfd3f35136419f4ebadbc051809efa38749d60859032eeb4f4b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bbcd0a11b60e9bae0c2e5e14332d3db99438dae9a1d97731bcb93c7ccd2757653ee1ac4e017864dbf4a90619b48e06817659d1051ebe87d2b28eeeeb074acd33
|
7
|
+
data.tar.gz: 02d6310b781922e927a83908aa1238790a63c745d2900990b74c6a1ef7c9ead4a9194826a38db6d9f86155e631a4d2f1008a64c0f0a2fbca90fa323d8f29d791
|
data/README.md
CHANGED
@@ -34,12 +34,12 @@ 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
|
37
|
+
box = c(:box)
|
38
38
|
@state.tasks.each do |task|
|
39
39
|
box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
|
40
40
|
end
|
41
|
-
btn = c
|
42
|
-
btn.add(c
|
41
|
+
btn = c(:button)
|
42
|
+
btn.add(c(:text, "Add Task"))
|
43
43
|
btn.add_action(:click, :TaskListState, :add_task)
|
44
44
|
box.add(btn)
|
45
45
|
end
|
@@ -51,15 +51,15 @@ end
|
|
51
51
|
# app/components/task_item_component.rb
|
52
52
|
class TaskItemComponent < Clapton::Component
|
53
53
|
def render
|
54
|
-
box = c
|
55
|
-
btn = c
|
56
|
-
btn.add(c
|
54
|
+
box = c(:box)
|
55
|
+
btn = c(:button)
|
56
|
+
btn.add(c(:text, @state.done ? "✅" : "🟩"))
|
57
57
|
btn.add_action(:click, :TaskListState, :toggle_done)
|
58
58
|
|
59
|
-
tf = c
|
59
|
+
tf = c(:input, @state, :title)
|
60
60
|
tf.add_action(:input, :TaskListState, :update_title)
|
61
61
|
|
62
|
-
dt = c
|
62
|
+
dt = c(:datetime, @state, :due)
|
63
63
|
dt.add_action(:input, :TaskListState, :update_due)
|
64
64
|
|
65
65
|
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
|
|
171
171
|
class TaskListComponent < Clapton::Component
|
172
172
|
def render
|
173
173
|
# ...
|
174
|
-
box = c
|
174
|
+
box = c(:box)
|
175
175
|
box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
|
176
176
|
end
|
177
177
|
end
|
@@ -256,31 +256,31 @@ text = Clapton::Text.new("Hello")`
|
|
256
256
|
### Preset Component Methods
|
257
257
|
|
258
258
|
```javascript
|
259
|
-
c
|
260
|
-
c
|
261
|
-
c
|
262
|
-
c
|
263
|
-
c
|
264
|
-
c
|
265
|
-
c
|
266
|
-
c
|
267
|
-
c
|
268
|
-
c
|
269
|
-
c
|
270
|
-
c
|
271
|
-
c
|
272
|
-
c
|
273
|
-
c
|
274
|
-
c
|
275
|
-
c
|
276
|
-
c
|
277
|
-
c
|
278
|
-
c
|
279
|
-
c
|
280
|
-
c
|
281
|
-
c
|
282
|
-
c
|
283
|
-
c
|
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)
|
284
284
|
```
|
285
285
|
|
286
286
|
### Streaming
|
@@ -349,6 +349,18 @@ module ApplicationCable
|
|
349
349
|
end
|
350
350
|
```
|
351
351
|
|
352
|
+
### Events
|
353
|
+
|
354
|
+
#### clapton:render
|
355
|
+
|
356
|
+
The `clapton:render` event is a custom event that is triggered when the component is rendered.
|
357
|
+
|
358
|
+
```javascript
|
359
|
+
document.addEventListener("clapton:render", () => {
|
360
|
+
console.log("clapton:render");
|
361
|
+
});
|
362
|
+
```
|
363
|
+
|
352
364
|
### Testing
|
353
365
|
|
354
366
|
#### RSpec
|
@@ -9,6 +9,7 @@ module Clapton
|
|
9
9
|
"imports": {
|
10
10
|
"client": "/clapton/client.js",
|
11
11
|
"components": "/clapton/components.js",
|
12
|
+
"c": "/clapton/c.js",
|
12
13
|
#{ all_components.map do
|
13
14
|
|component| "\"#{File.basename(component, ".rb").camelize}\": \"/clapton/#{File.basename(component, ".rb").camelize}.js\""
|
14
15
|
end.join(",\n") }
|
data/lib/clapton/engine.rb
CHANGED
@@ -24,6 +24,7 @@ module Clapton
|
|
24
24
|
FileUtils.mkdir_p(Rails.root.join("public", "clapton")) unless Rails.root.join("public", "clapton").exist?
|
25
25
|
File.write(Rails.root.join("public", "clapton", "components.js"), File.read(File.join(__dir__, "javascripts", "dist", "components.js")))
|
26
26
|
File.write(Rails.root.join("public", "clapton", "client.js"), File.read(File.join(__dir__, "javascripts", "dist", "client.js")))
|
27
|
+
File.write(Rails.root.join("public", "clapton", "c.js"), File.read(File.join(__dir__, "javascripts", "dist", "c.js")))
|
27
28
|
|
28
29
|
compile_components
|
29
30
|
|
@@ -44,6 +45,8 @@ module Clapton
|
|
44
45
|
js = ""
|
45
46
|
js += "import { Clapton } from 'components';"
|
46
47
|
js += "\n"
|
48
|
+
js += "import { c } from 'c';"
|
49
|
+
js += "\n"
|
47
50
|
code.scan(/(\w+)Component\.new/).each do |match|
|
48
51
|
js += "import { #{match[0]}Component } from '#{match[0]}Component';"
|
49
52
|
js += "\n"
|