view_component_reflex 0.1.0 → 0.2.0
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 +75 -28
- data/app/components/view_component_reflex/component.rb +15 -12
- data/lib/stimulus_reflex/channel.rb +9 -0
- data/lib/view_component_reflex.rb +2 -0
- data/lib/view_component_reflex/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 9c0c42d6658ac5c2c6af6bc78a4de1c04cfaaa38bdf4a206106975cbf7c5c049
|
4
|
+
data.tar.gz: 5bc792233916b8d16dd364eadb02eb9183ede8da619ed67908b47b410a9c80d5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2747491eede7da7ccfab22ec260426755a44ee46a28218da5297ef3b1108cf6fe8c9cb38559f03cc20b68e6f0c00e79d5480fddd5a6595f1e0c979e2f2865e4a
|
7
|
+
data.tar.gz: c979f87cc33842ced72066d2dc262e876ff77cd5b3764052c0e388d5139a060c7b22fdcc9963fef5f8a3a0f2e82c8a6b35ede0feaaca4bdc70f32ffe59a1abee
|
data/README.md
CHANGED
@@ -1,28 +1,75 @@
|
|
1
|
-
# ViewComponentReflex
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
```
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
1
|
+
# ViewComponentReflex
|
2
|
+
|
3
|
+
ViewComponentReflex allows you to write reflexes right in your view component code.
|
4
|
+
|
5
|
+
## Usage
|
6
|
+
|
7
|
+
You can add reflexes to your component by adding inheriting from `ViewComponentReflex::Component`.
|
8
|
+
|
9
|
+
To add a reflex to your component, use the `reflex` method.
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
reflex :my_cool_reflex do
|
13
|
+
# do stuff
|
14
|
+
end
|
15
|
+
```
|
16
|
+
|
17
|
+
This will act as if you created a reflex with the method `my_cool_stuff`. To call this reflex, add `data-reflex="click->MyComponentReflex#my_cool_reflex"`, just like you're
|
18
|
+
using stimulus reflex.
|
19
|
+
|
20
|
+
In addition to calling reflexes, there is a rudimentary state system. You can initialize component-local state with `initialize_state(obj)`, where `obj` is a hash.
|
21
|
+
|
22
|
+
You can access state with the `state` helper. See the code below for an example.
|
23
|
+
|
24
|
+
If you're using state, include `super()` at the beginning of your initialize method, and add `data-key="<%= key %>"` to any html element using a reflex. This
|
25
|
+
lets ViewComponentReflex keep track of which state belongs to which component.
|
26
|
+
|
27
|
+
|
28
|
+
```ruby
|
29
|
+
# counter_component.rb
|
30
|
+
class CounterComponent < ViewComponentReflex::Component
|
31
|
+
|
32
|
+
def initialize
|
33
|
+
super()
|
34
|
+
initialize_state({
|
35
|
+
count: 0
|
36
|
+
})
|
37
|
+
end
|
38
|
+
|
39
|
+
reflex :increment do
|
40
|
+
state[:count] = state[:count] + 1
|
41
|
+
end
|
42
|
+
end
|
43
|
+
```
|
44
|
+
|
45
|
+
```erb
|
46
|
+
# counter_component.html.erb
|
47
|
+
<div data-controller="counter">
|
48
|
+
<p><%= state[:count] %></p>
|
49
|
+
<button type="button" data-reflex="click->CounterComponentReflex#increment" data-key="<%= key %>">Click</button>
|
50
|
+
</div>
|
51
|
+
```
|
52
|
+
|
53
|
+
## Installation
|
54
|
+
Add this line to your application's Gemfile:
|
55
|
+
|
56
|
+
```ruby
|
57
|
+
gem 'view_component_reflex'
|
58
|
+
```
|
59
|
+
|
60
|
+
And then execute:
|
61
|
+
```bash
|
62
|
+
$ bundle
|
63
|
+
```
|
64
|
+
|
65
|
+
Or install it yourself as:
|
66
|
+
```bash
|
67
|
+
$ gem install view_component_reflex
|
68
|
+
```
|
69
|
+
|
70
|
+
## License
|
71
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
72
|
+
|
73
|
+
## Caveats
|
74
|
+
|
75
|
+
State uses session to maintain state as of right now. It also assumes your component view is written with the file extension `.html.erb`
|
@@ -2,17 +2,20 @@ module ViewComponentReflex
|
|
2
2
|
class Component < ViewComponent::Base
|
3
3
|
class << self
|
4
4
|
def reflex(name, &blk)
|
5
|
-
|
5
|
+
stimulus_reflex.reflex(name, &blk)
|
6
6
|
end
|
7
7
|
|
8
|
-
def
|
8
|
+
def stimulus_reflex
|
9
|
+
klass = self
|
9
10
|
@stimulus_reflex ||= Object.const_set(name + "Reflex", Class.new(StimulusReflex::Reflex) {
|
10
|
-
include CableReady::Broadcaster
|
11
|
-
|
12
11
|
def state
|
13
12
|
session[element.dataset[:key]] ||= {}
|
14
13
|
end
|
15
14
|
|
15
|
+
define_method :stimulus_controller do
|
16
|
+
klass.name.chomp("Component").underscore.dasherize
|
17
|
+
end
|
18
|
+
|
16
19
|
define_singleton_method(:reflex) do |name, &blk|
|
17
20
|
define_method(name) do |*args|
|
18
21
|
instance_exec(*args, &blk)
|
@@ -22,21 +25,21 @@ module ViewComponentReflex
|
|
22
25
|
end
|
23
26
|
end
|
24
27
|
|
25
|
-
def initialize
|
26
|
-
@key = caller.find { |p| p.include? ".html.erb" }&.hash.to_s
|
27
|
-
end
|
28
|
-
|
29
28
|
def initialize_state(obj)
|
30
29
|
@state = obj
|
31
|
-
@state.each do |k, v|
|
32
|
-
instance_variable_set("@#{k}", v)
|
33
|
-
end
|
34
30
|
end
|
35
31
|
|
32
|
+
# key is required if you're using state
|
33
|
+
# We can't initialize the session state in the initiale method
|
34
|
+
# because it doesn't have a view_context yet
|
35
|
+
# This is the next best place to do it
|
36
36
|
def key
|
37
|
+
@key ||= caller.find { |p| p.include? ".html.erb" }&.hash.to_s
|
38
|
+
|
39
|
+
# initialize session state
|
37
40
|
if session[@key].nil?
|
38
41
|
session[@key] = {}
|
39
|
-
@state.each do |key, v|
|
42
|
+
(@state ||= {}).each do |key, v|
|
40
43
|
session[@key][key] = v
|
41
44
|
end
|
42
45
|
end
|
@@ -0,0 +1,9 @@
|
|
1
|
+
class StimulusReflex::Channel < ActionCable::Channel::Base
|
2
|
+
def render_page_and_broadcast_morph(reflex, selectors, data = {})
|
3
|
+
html = render_page(reflex)
|
4
|
+
if reflex.respond_to? :stimulus_controller
|
5
|
+
selectors = ["[data-controller=\"#{reflex.stimulus_controller}\"]"]
|
6
|
+
end
|
7
|
+
broadcast_morphs selectors, data, html if html.present?
|
8
|
+
end
|
9
|
+
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: view_component_reflex
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Joshua LeBlanc
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-06-
|
11
|
+
date: 2020-06-04 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -69,6 +69,7 @@ files:
|
|
69
69
|
- README.md
|
70
70
|
- Rakefile
|
71
71
|
- app/components/view_component_reflex/component.rb
|
72
|
+
- lib/stimulus_reflex/channel.rb
|
72
73
|
- lib/view_component_reflex.rb
|
73
74
|
- lib/view_component_reflex/engine.rb
|
74
75
|
- lib/view_component_reflex/version.rb
|