stimulus_reflex 2.0.1 → 2.0.2
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of stimulus_reflex might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/Gemfile.lock +4 -4
- data/README.md +36 -184
- data/bin/standardize +1 -1
- data/lib/stimulus_reflex/version.rb +1 -1
- metadata +2 -4
- data/README.md.orig +0 -193
- data/SUMMARY.md +0 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f3c225ea9ccdf33b87964486c734e4091e454650c0276c1d000104246e7cd3bc
|
|
4
|
+
data.tar.gz: d38efd762fec5cf27843c64c37959dec9f10167c93a0c4a742e276a5de176853
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 62993d44aaec8ad5805820163927a91c58eb69072bad71e062c23c345b6a2415b4698530838a8b46c85cad4611e23bf56e833f61e91fd80eb302cb5938e5bf69
|
|
7
|
+
data.tar.gz: 9787c3178e523c35bf6d6883c0b8a0bb2e755c5c1e138795ba9bfa1a1fbb66e0e6278119bf343104a5dc731b87d94c554ce3bfb17d21f73fa33bad34b1c1acf0
|
data/Gemfile.lock
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
PATH
|
|
2
2
|
remote: .
|
|
3
3
|
specs:
|
|
4
|
-
stimulus_reflex (2.0.
|
|
4
|
+
stimulus_reflex (2.0.2)
|
|
5
5
|
cable_ready (>= 4.0.3)
|
|
6
6
|
nokogiri
|
|
7
7
|
rack
|
|
@@ -78,7 +78,7 @@ GEM
|
|
|
78
78
|
i18n (1.6.0)
|
|
79
79
|
concurrent-ruby (~> 1.0)
|
|
80
80
|
jaro_winkler (1.5.3)
|
|
81
|
-
loofah (2.
|
|
81
|
+
loofah (2.3.0)
|
|
82
82
|
crass (~> 1.0.2)
|
|
83
83
|
nokogiri (>= 1.5.9)
|
|
84
84
|
mail (2.7.1)
|
|
@@ -89,7 +89,7 @@ GEM
|
|
|
89
89
|
mimemagic (0.3.3)
|
|
90
90
|
mini_mime (1.0.2)
|
|
91
91
|
mini_portile2 (2.4.0)
|
|
92
|
-
minitest (5.12.
|
|
92
|
+
minitest (5.12.2)
|
|
93
93
|
nio4r (2.5.2)
|
|
94
94
|
nokogiri (1.10.4)
|
|
95
95
|
mini_portile2 (~> 2.4.0)
|
|
@@ -131,7 +131,7 @@ GEM
|
|
|
131
131
|
rake (>= 0.8.7)
|
|
132
132
|
thor (>= 0.20.3, < 2.0)
|
|
133
133
|
rainbow (3.0.0)
|
|
134
|
-
rake (
|
|
134
|
+
rake (13.0.0)
|
|
135
135
|
rubocop (0.72.0)
|
|
136
136
|
jaro_winkler (~> 1.5.1)
|
|
137
137
|
parallel (~> 1.10)
|
data/README.md
CHANGED
|
@@ -1,191 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
description: Ensure your projects are fast to market... with a small team
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# StimulusReflex
|
|
6
|
-
|
|
7
|
-
###### Read this document on the [official docs site](https://docs.stimulusreflex.com).
|
|
8
|
-
|
|
9
|
-
[](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)
|
|
1
|
+
[](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)
|
|
10
2
|
[](https://codeclimate.com/github/hopsoft/stimulus_reflex/maintainability)
|
|
11
3
|
|
|
12
4
|
|
|
13
5
|
|
|
6
|
+
# StimulusReflex
|
|
7
|
+
|
|
8
|
+
_reflex_ - an action that is performed as a response to a stimulus
|
|
9
|
+
|
|
14
10
|
**Build reactive applications with the Rails tooling you already know and love.** StimulusReflex is designed to work perfectly with [server rendered HTML](https://guides.rubyonrails.org/action_view_overview.html), [Russian doll caching](https://edgeguides.rubyonrails.org/caching_with_rails.html#russian-doll-caching), [Stimulus](https://stimulusjs.org/), [Turbolinks](https://www.youtube.com/watch?v=SWEts0rlezA), etc... and strives to live up to the vision outlined in [The Rails Doctrine](https://rubyonrails.org/doctrine/).
|
|
15
11
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const context = require.context('controllers', true, /_controller\.js$/)
|
|
47
|
-
application.load(definitionsFromContext(context))
|
|
48
|
-
StimulusReflex.initialize(application)
|
|
49
|
-
```
|
|
50
|
-
{% endcode-tabs-item %}
|
|
51
|
-
{% endcode-tabs %}
|
|
52
|
-
|
|
53
|
-
{% code-tabs %}
|
|
54
|
-
{% code-tabs-item title="Gemfile" %}
|
|
55
|
-
```ruby
|
|
56
|
-
gem "stimulus_reflex"
|
|
57
|
-
```
|
|
58
|
-
{% endcode-tabs-item %}
|
|
59
|
-
{% endcode-tabs %}
|
|
60
|
-
|
|
61
|
-
## Quick Start
|
|
62
|
-
|
|
63
|
-
Here are a few small contrived examples to get you started.
|
|
64
|
-
|
|
65
|
-
### No JavaScript
|
|
66
|
-
|
|
67
|
-
It's possible to build a reactive application without writing any JavaScript. This requires 2 steps.
|
|
68
|
-
|
|
69
|
-
1. Declare the appropriate data attributes in HTML.
|
|
70
|
-
2. Create a server side reflex object with Ruby.
|
|
71
|
-
|
|
72
|
-
This example will automatically update the page with the latest count whenever the anchor is clicked.
|
|
73
|
-
|
|
74
|
-
{% code-tabs %}
|
|
75
|
-
{% code-tabs-item title="app/views/pages/example.html.erb" %}
|
|
76
|
-
```text
|
|
77
|
-
<head></head>
|
|
78
|
-
<body>
|
|
79
|
-
<a href="#"
|
|
80
|
-
data-reflex="click->ExampleReflex#increment"
|
|
81
|
-
data-step="1"
|
|
82
|
-
data-count="<%= @count.to_i %>">
|
|
83
|
-
Increment <%= @count.to_i %>
|
|
84
|
-
</a>
|
|
85
|
-
</body>
|
|
86
|
-
</html>
|
|
87
|
-
```
|
|
88
|
-
{% endcode-tabs-item %}
|
|
89
|
-
{% endcode-tabs %}
|
|
90
|
-
|
|
91
|
-
{% code-tabs %}
|
|
92
|
-
{% code-tabs-item title="app/reflexes/example\_reflex.rb" %}
|
|
93
|
-
```ruby
|
|
94
|
-
class ExampleReflex < StimulusReflex::Reflex
|
|
95
|
-
def increment
|
|
96
|
-
@count = element.dataset[:count].to_i + element.dataset[:step].to_i
|
|
97
|
-
end
|
|
98
|
-
end
|
|
99
|
-
```
|
|
100
|
-
{% endcode-tabs-item %}
|
|
101
|
-
{% endcode-tabs %}
|
|
102
|
-
|
|
103
|
-
{% hint style="success" %}
|
|
104
|
-
**Concerns like managing state and template rendering are handled server side.** This technique works regardless of how complex the UI becomes. For example, we could render multiple instances of `@count` in unrelated sections of the page and they will all update.
|
|
105
|
-
{% endhint %}
|
|
106
|
-
|
|
107
|
-
{% hint style="danger" %}
|
|
108
|
-
Do not create server side reflex methods named `reflex` as this is a reserved word.
|
|
109
|
-
{% endhint %}
|
|
110
|
-
|
|
111
|
-
### Some JavaScript
|
|
112
|
-
|
|
113
|
-
Real world applications typically warrant setting up finer grained control. This requires 3 steps.
|
|
114
|
-
|
|
115
|
-
1. Declare the appropriate data attributes in HTML.
|
|
116
|
-
2. Create a client side StimulusReflex controller with JavaScript.
|
|
117
|
-
3. Create a server side reflex object with Ruby.
|
|
118
|
-
|
|
119
|
-
This example will automatically update the page with the latest count whenever the anchor is clicked.
|
|
120
|
-
|
|
121
|
-
{% code-tabs %}
|
|
122
|
-
{% code-tabs-item title="app/views/pages/example.html.erb" %}
|
|
123
|
-
```text
|
|
124
|
-
<head></head>
|
|
125
|
-
<body>
|
|
126
|
-
<a href="#"
|
|
127
|
-
data-controller="example"
|
|
128
|
-
data-action="click->example#increment">
|
|
129
|
-
Increment <%= @count.to_i %>
|
|
130
|
-
</a>
|
|
131
|
-
</body>
|
|
132
|
-
</html>
|
|
133
|
-
```
|
|
134
|
-
{% endcode-tabs-item %}
|
|
135
|
-
{% endcode-tabs %}
|
|
136
|
-
|
|
137
|
-
```javascript
|
|
138
|
-
import { Controller } from 'stimulus';
|
|
139
|
-
import StimulusReflex from 'stimulus_reflex';
|
|
140
|
-
|
|
141
|
-
export default class extends Controller {
|
|
142
|
-
connect() {
|
|
143
|
-
StimulusReflex.register(this);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
increment() {
|
|
147
|
-
// trigger a server-side reflex and a client-side page update
|
|
148
|
-
// pass the step argument with a value of `1` to the reflex method
|
|
149
|
-
this.stimulate('ExampleReflex#increment', 1);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
{% code-tabs %}
|
|
155
|
-
{% code-tabs-item title="app/reflexes/example\_reflex.rb" %}
|
|
156
|
-
```ruby
|
|
157
|
-
class ExampleReflex < StimulusReflex::Reflex
|
|
158
|
-
def increment(step = 1)
|
|
159
|
-
# In a typical Rails app the Rails controller would set the value of @count
|
|
160
|
-
# after fetching it from a persistent data store
|
|
161
|
-
# @count = @count.to_i + step
|
|
162
|
-
|
|
163
|
-
# To keep this example simple, we use session to store the value
|
|
164
|
-
session[:count] = session[:count].to_i + step
|
|
165
|
-
@count = session[:count]
|
|
166
|
-
end
|
|
167
|
-
end
|
|
168
|
-
```
|
|
169
|
-
{% endcode-tabs-item %}
|
|
170
|
-
{% endcode-tabs %}
|
|
171
|
-
|
|
172
|
-
## How it Works
|
|
173
|
-
|
|
174
|
-
Here's what happens whenever a `StimulusReflex::Reflex` is invoked.
|
|
175
|
-
|
|
176
|
-
1. The page that triggered the reflex is re-rerendered.
|
|
177
|
-
2. The re-rendered HTML is sent to the client over the ActionCable socket.
|
|
178
|
-
3. The page is updated via fast DOM diffing courtesy of morphdom.
|
|
179
|
-
|
|
180
|
-
{% hint style="success" %}
|
|
181
|
-
All instance variables created in the reflex are made available to the Rails controller and view.
|
|
182
|
-
{% endhint %}
|
|
183
|
-
|
|
184
|
-
{% hint style="info" %}
|
|
185
|
-
**The entire body is re-rendered and sent over the socket.** Smaller scoped DOM updates may come in a future release.
|
|
186
|
-
{% endhint %}
|
|
187
|
-
|
|
188
|
-
## Example Applications
|
|
189
|
-
|
|
190
|
-
* [TodoMVC](https://stimulus-reflex-todomvc.herokuapp.com) - An implementation of [TodoMVC](http://todomvc.com/) using [Ruby on Rails](https://rubyonrails.org/), [StimulusJS](https://stimulusjs.org/), and [StimulusReflex](https://github.com/hopsoft/stimulus_reflex). [https://github.com/hopsoft/stimulus\_reflex\_todomvc](https://github.com/hopsoft/stimulus_reflex_todomvc)
|
|
12
|
+
_Inspired by [Phoenix LiveView](https://youtu.be/Z2DU0qLfPIY?t=670)._ 🙌
|
|
13
|
+
|
|
14
|
+
## Docs
|
|
15
|
+
|
|
16
|
+
- [Official Documentation](https://docs.stimulusreflex.com)
|
|
17
|
+
- [Documentation Source Code](https://github.com/hopsoft/stimulus_reflex/tree/master/docs)
|
|
18
|
+
|
|
19
|
+
## Contributing
|
|
20
|
+
|
|
21
|
+
### Code of Conduct
|
|
22
|
+
|
|
23
|
+
Everyone interacting with StimulusReflex is expected to follow the [Code of Conduct](CODE_OF_CONDUCT.md)
|
|
24
|
+
|
|
25
|
+
### Coding Standards
|
|
26
|
+
|
|
27
|
+
This project uses [Standard](https://github.com/testdouble/standard)
|
|
28
|
+
and [Prettier](https://github.com/prettier/prettier) to minimize bike shedding related to code formatting.
|
|
29
|
+
Please run `./bin/standardize` prior submitting pull requests.
|
|
30
|
+
|
|
31
|
+
View the [wiki](https://github.com/hopsoft/stimulus_reflex/wiki/Editor-Configuration) to see recommendations for configuring your editor to work best with the project.
|
|
32
|
+
|
|
33
|
+
### Releasing
|
|
34
|
+
|
|
35
|
+
1. Bump version number at `lib/stimulus_reflex/version.rb`
|
|
36
|
+
1. Run `rake build`
|
|
37
|
+
1. Run `rake release`
|
|
38
|
+
1. Change directories `cd ./javascript`
|
|
39
|
+
1. Run `yarn publish` - NOTE: this will throw a fatal error because the tag already exists but the package will still publish
|
|
40
|
+
|
|
41
|
+
## License
|
|
191
42
|
|
|
43
|
+
StimulusReflex is released under the [MIT License](LICENSE.txt).
|
data/bin/standardize
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: stimulus_reflex
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.0.
|
|
4
|
+
version: 2.0.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Nathan Hopkins
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2019-09-
|
|
12
|
+
date: 2019-09-30 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: rack
|
|
@@ -150,9 +150,7 @@ files:
|
|
|
150
150
|
- Gemfile.lock
|
|
151
151
|
- LICENSE.txt
|
|
152
152
|
- README.md
|
|
153
|
-
- README.md.orig
|
|
154
153
|
- Rakefile
|
|
155
|
-
- SUMMARY.md
|
|
156
154
|
- bin/console
|
|
157
155
|
- bin/setup
|
|
158
156
|
- bin/standardize
|
data/README.md.orig
DELETED
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
<<<<<<< HEAD
|
|
2
|
-
[](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)
|
|
3
|
-
[](https://codeclimate.com/github/hopsoft/stimulus_reflex/maintainability)
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
=======
|
|
7
|
-
---
|
|
8
|
-
description: Ensure your projects are fast to market... with a small team
|
|
9
|
-
---
|
|
10
|
-
>>>>>>> master
|
|
11
|
-
|
|
12
|
-
# StimulusReflex
|
|
13
|
-
|
|
14
|
-
###### Read this document on the [official docs site](https://docs.stimulusreflex.com).
|
|
15
|
-
|
|
16
|
-
**Build reactive applications with the Rails tooling you already know and love.** StimulusReflex is designed to work perfectly with [server rendered HTML](https://guides.rubyonrails.org/action_view_overview.html), [Russian doll caching](https://edgeguides.rubyonrails.org/caching_with_rails.html#russian-doll-caching), [Stimulus](https://stimulusjs.org/), [Turbolinks](https://www.youtube.com/watch?v=SWEts0rlezA), etc... and strives to live up to the vision outlined in [The Rails Doctrine](https://rubyonrails.org/doctrine/).
|
|
17
|
-
|
|
18
|
-
## Before you Begin
|
|
19
|
-
|
|
20
|
-
A great user experience can be created with Rails alone. Tools like [UJS remote elements](https://guides.rubyonrails.org/working_with_javascript_in_rails.html#remote-elements) , [Stimulus](https://stimulusjs.org/), and [Turbolinks](https://github.com/turbolinks/turbolinks) are incredibly powerful when combined. Try building your application using these tools before introducing StimulusReflex.
|
|
21
|
-
|
|
22
|
-
{% hint style="info" %}
|
|
23
|
-
See the [Stimulus TodoMVC](https://github.com/hopsoft/stimulus_todomvc) example application if you are unsure how to do this.
|
|
24
|
-
{% endhint %}
|
|
25
|
-
|
|
26
|
-
## Benefits
|
|
27
|
-
|
|
28
|
-
StimulusReflex offers 3 primary benefits over the traditional Rails request/response cycle.
|
|
29
|
-
|
|
30
|
-
1. **All communication happens via web socket** - avoids the overhead of traditional HTTP connections
|
|
31
|
-
2. **The controller action is invoked directly** - skips framework overhead like the middleware chain
|
|
32
|
-
3. **DOM diffing is used to update the page** - provides faster rendering and less jitter
|
|
33
|
-
|
|
34
|
-
## Setup
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
yarn add stimulus_reflex
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
{% code-tabs %}
|
|
41
|
-
{% code-tabs-item title="app/javascript/controllers/index.js" %}
|
|
42
|
-
```javascript
|
|
43
|
-
import { Application } from 'stimulus'
|
|
44
|
-
import { definitionsFromContext } from 'stimulus/webpack-helpers'
|
|
45
|
-
import StimulusReflex from 'stimulus_reflex'
|
|
46
|
-
|
|
47
|
-
const application = Application.start()
|
|
48
|
-
const context = require.context('controllers', true, /_controller\.js$/)
|
|
49
|
-
application.load(definitionsFromContext(context))
|
|
50
|
-
StimulusReflex.initialize(application)
|
|
51
|
-
```
|
|
52
|
-
{% endcode-tabs-item %}
|
|
53
|
-
{% endcode-tabs %}
|
|
54
|
-
|
|
55
|
-
{% code-tabs %}
|
|
56
|
-
{% code-tabs-item title="Gemfile" %}
|
|
57
|
-
```ruby
|
|
58
|
-
gem "stimulus_reflex"
|
|
59
|
-
```
|
|
60
|
-
{% endcode-tabs-item %}
|
|
61
|
-
{% endcode-tabs %}
|
|
62
|
-
|
|
63
|
-
## Quick Start
|
|
64
|
-
|
|
65
|
-
Here are a few small contrived examples to get you started.
|
|
66
|
-
|
|
67
|
-
### No JavaScript
|
|
68
|
-
|
|
69
|
-
It's possible to build a reactive application without writing any JavaScript. This requires 2 steps.
|
|
70
|
-
|
|
71
|
-
1. Declare the appropriate data attributes in HTML.
|
|
72
|
-
2. Create a server side reflex object with Ruby.
|
|
73
|
-
|
|
74
|
-
This example will automatically update the page with the latest count whenever the anchor is clicked.
|
|
75
|
-
|
|
76
|
-
{% code-tabs %}
|
|
77
|
-
{% code-tabs-item title="app/views/pages/example.html.erb" %}
|
|
78
|
-
```text
|
|
79
|
-
<head></head>
|
|
80
|
-
<body>
|
|
81
|
-
<a href="#"
|
|
82
|
-
data-reflex="click->ExampleReflex#increment"
|
|
83
|
-
data-step="1"
|
|
84
|
-
data-count="<%= @count.to_i %>">
|
|
85
|
-
Increment <%= @count.to_i %>
|
|
86
|
-
</a>
|
|
87
|
-
</body>
|
|
88
|
-
</html>
|
|
89
|
-
```
|
|
90
|
-
{% endcode-tabs-item %}
|
|
91
|
-
{% endcode-tabs %}
|
|
92
|
-
|
|
93
|
-
{% code-tabs %}
|
|
94
|
-
{% code-tabs-item title="app/reflexes/example\_reflex.rb" %}
|
|
95
|
-
```ruby
|
|
96
|
-
class ExampleReflex < StimulusReflex::Reflex
|
|
97
|
-
def increment
|
|
98
|
-
@count = element.dataset[:count].to_i + element.dataset[:step].to_i
|
|
99
|
-
end
|
|
100
|
-
end
|
|
101
|
-
```
|
|
102
|
-
{% endcode-tabs-item %}
|
|
103
|
-
{% endcode-tabs %}
|
|
104
|
-
|
|
105
|
-
{% hint style="success" %}
|
|
106
|
-
**Concerns like managing state and template rendering are handled server side.** This technique works regardless of how complex the UI becomes. For example, we could render multiple instances of `@count` in unrelated sections of the page and they will all update.
|
|
107
|
-
{% endhint %}
|
|
108
|
-
|
|
109
|
-
{% hint style="danger" %}
|
|
110
|
-
Do not create server side reflex methods named `reflex` as this is a reserved word.
|
|
111
|
-
{% endhint %}
|
|
112
|
-
|
|
113
|
-
### Some JavaScript
|
|
114
|
-
|
|
115
|
-
Real world applications typically warrant setting up finer grained control. This requires 3 steps.
|
|
116
|
-
|
|
117
|
-
1. Declare the appropriate data attributes in HTML.
|
|
118
|
-
2. Create a client side StimulusReflex controller with JavaScript.
|
|
119
|
-
3. Create a server side reflex object with Ruby.
|
|
120
|
-
|
|
121
|
-
This example will automatically update the page with the latest count whenever the anchor is clicked.
|
|
122
|
-
|
|
123
|
-
{% code-tabs %}
|
|
124
|
-
{% code-tabs-item title="app/views/pages/example.html.erb" %}
|
|
125
|
-
```text
|
|
126
|
-
<head></head>
|
|
127
|
-
<body>
|
|
128
|
-
<a href="#"
|
|
129
|
-
data-controller="example"
|
|
130
|
-
data-action="click->example#increment">
|
|
131
|
-
Increment <%= @count.to_i %>
|
|
132
|
-
</a>
|
|
133
|
-
</body>
|
|
134
|
-
</html>
|
|
135
|
-
```
|
|
136
|
-
{% endcode-tabs-item %}
|
|
137
|
-
{% endcode-tabs %}
|
|
138
|
-
|
|
139
|
-
```javascript
|
|
140
|
-
import { Controller } from 'stimulus';
|
|
141
|
-
import StimulusReflex from 'stimulus_reflex';
|
|
142
|
-
|
|
143
|
-
export default class extends Controller {
|
|
144
|
-
connect() {
|
|
145
|
-
StimulusReflex.register(this);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
increment() {
|
|
149
|
-
// trigger a server-side reflex and a client-side page update
|
|
150
|
-
// pass the step argument with a value of `1` to the reflex method
|
|
151
|
-
this.stimulate('ExampleReflex#increment', 1);
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
{% code-tabs %}
|
|
157
|
-
{% code-tabs-item title="app/reflexes/example\_reflex.rb" %}
|
|
158
|
-
```ruby
|
|
159
|
-
class ExampleReflex < StimulusReflex::Reflex
|
|
160
|
-
def increment(step = 1)
|
|
161
|
-
# In a typical Rails app the Rails controller would set the value of @count
|
|
162
|
-
# after fetching it from a persistent data store
|
|
163
|
-
# @count = @count.to_i + step
|
|
164
|
-
|
|
165
|
-
# To keep this example simple, we use session to store the value
|
|
166
|
-
session[:count] = session[:count].to_i + step
|
|
167
|
-
@count = session[:count]
|
|
168
|
-
end
|
|
169
|
-
end
|
|
170
|
-
```
|
|
171
|
-
{% endcode-tabs-item %}
|
|
172
|
-
{% endcode-tabs %}
|
|
173
|
-
|
|
174
|
-
## How it Works
|
|
175
|
-
|
|
176
|
-
Here's what happens whenever a `StimulusReflex::Reflex` is invoked.
|
|
177
|
-
|
|
178
|
-
1. The page that triggered the reflex is re-rerendered.
|
|
179
|
-
2. The re-rendered HTML is sent to the client over the ActionCable socket.
|
|
180
|
-
3. The page is updated via fast DOM diffing courtesy of morphdom.
|
|
181
|
-
|
|
182
|
-
{% hint style="success" %}
|
|
183
|
-
All instance variables created in the reflex are made available to the Rails controller and view.
|
|
184
|
-
{% endhint %}
|
|
185
|
-
|
|
186
|
-
{% hint style="info" %}
|
|
187
|
-
**The entire body is re-rendered and sent over the socket.** Smaller scoped DOM updates may come in a future release.
|
|
188
|
-
{% endhint %}
|
|
189
|
-
|
|
190
|
-
## Example Applications
|
|
191
|
-
|
|
192
|
-
* [TodoMVC](https://stimulus-reflex-todomvc.herokuapp.com) - An implementation of [TodoMVC](http://todomvc.com/) using [Ruby on Rails](https://rubyonrails.org/), [StimulusJS](https://stimulusjs.org/), and [StimulusReflex](https://github.com/hopsoft/stimulus_reflex). [https://github.com/hopsoft/stimulus\_reflex\_todomvc](https://github.com/hopsoft/stimulus_reflex_todomvc)
|
|
193
|
-
|