stimulus_reflex 2.0.1 → 2.0.2
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.
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
|
-
|