stimulusreflex / stimulus_reflex Goto Github PK
View Code? Open in Web Editor NEWBuild reactive applications with the Rails tooling you already know and love.
Home Page: https://docs.stimulusreflex.com
License: MIT License
Build reactive applications with the Rails tooling you already know and love.
Home Page: https://docs.stimulusreflex.com
License: MIT License
extractElementAttributes
for the moment returns multiple values for select
tags with multiple: true
:
A common scenario is to use a checkbox list for an association collection, as in collection_check_boxes
:
https://devdocs.io/rails~6.0/actionview/helpers/formoptionshelper#method-i-collection_check_boxes
It would be nice if SR supported that out of the box.
The hidden complexity lies in the fact that we'd have to consider multiple elements in extractElementAttributes
, not just the one triggering the reflex. Still I think a library such as SR should take on that complexity instead of imposing it on the back end developer.
Specifically, I discovered this shortage when working on the permalink expo example and trying to employ a button group: https://github.com/hopsoft/stimulus_reflex_expo/pull/26/files#diff-23c58647594fccfb30d0b54554851d59R15
it would be feasible to access the tagname of the DOM element that triggered the reflex (and potentially other properties as well?)
in some context it occured to me that it would be feasible not only to have checked
, selected
and value(s)
attributes, but also to be able to discern between SELECT
, OPTGROUP
etc. etc.
Pass the element tagname through the ActionCable connection up to the reflex
If anyone could point me to the relevant parts of the source, I'd be happy to prepare a PR
Hi π!
Stimulus supports TypeScript, but it appears that StimulusReflex does not. Offering officially supported types would be really great.
I'm creating this issue as a conversation about how involved the library maintainers would want to be in supporting TypeScript.
Here is a summary of the options that I've seen other open source projects explore, based on the general TypeScript community's preference:
@types/stimulus_reflex
Thoughts?
Following the "Setup" and "Quick Start" guide process exactly results in breaking socket is undefined error in the JS console in Firefox, and
Uncaught TypeError: Cannot read property 'removeEventListener' of undefined` in Chrome (both raised by same line of code).
It looks like StimulusReflex is looking for something on the ActionCable JS object that doesn't exist. Is this because of #132 maybe? Or is there another dependency or import missing from the instructions?
Following the setup guide exactly and then using the sample code results in socket is undefined
in the JavaScript console.
# these are the setup instructions
rails new myproject --webpack=stimulus # Rails 6.0.2.2
cd myproject
bundle add stimulus_reflex
bundle exec rails stimulus_reflex:install
# make a controller
bin/rails g controller pages index
Add the sample code from the quickstart guide to the pages/index.html.erb
.
bin/webpack-dev-server
bin/rails s
Finally, load localhost:3000/pages/index
and observe that the JavaScript console says socket is undefined
in Firefox (or the Chrome error).
There's no error and it loads fine.
As the project continues to pick up steam, I suspect that it will become increasingly difficult to manage the flurry of feature, release and hotfix branches without some kind of agreed-upon structure.
I was re-reading the classic A successful Git branching model and would like to propose that we move towards adopting this model, starting with a develop branch. Feature branches are created from develop and merged back into it.
One of the first motivations I have is around our evolving documentation efforts. Right now, GitBook is connected and making commits directly on master. Those commits are live immediately, which causes chronology issues for features that haven't been publicly released yet.
Possibly making the question rhetorical... the best idea I had was to create a 2nd GitBook project and point it to the develop branch. We could continue to do our modifications using the GitBook UI and the results would be a preview of what is soon to be released (hopefully) to master. Of course, once develop is merged into master, GitBook should now reflect up-to-date documentation for the now-current new release.
Anyhow, @hopsoft @andrewmcodes what do you folks feel about this?
After much blinking and head-desking, I finally figured out the linting situation. It wasn't what was happening... it was what isn't happening.
I learned about StandardRB through the actions set up on this project. Not as far along, but promising and I used a post-save hook to set it up to run in VSCode because StandardRB not available as an extension yet. bundle exec standardrb --fix $(file)
for great success.
However, I've been thoroughly flummoxed by the JS lint situation, because StandardJS is so opinionated about (no) semi-colons. What I failed to grok until just now is that my brain assumed two incorrect things: that Prettier only tackled column-width and line-breaking, and that we had StandardJS set up in our post-commit and post-pull-request callbacks on GH.
I was wrong about Prettier - it inserts "missing" semi-colons and, well, I wish you could see my face the moment I realized that when GH's Actions interface said "Run Standard Lints" it meant only StandardRB.
π€
Javascript Standard is a thing of beauty. [I find] Ruby code lends itself to readability, but JS's obsession with using nested object notation (it used to be far, far worse with nested anonymous function hell) makes the Prettier + Standard combo the first thing I set up in any JS project. There are many VS Code plugins; I recommend Prettier-Standard.
Anyhow: can we please, please, pretty please set up StandardJS to run after Prettier? This will, predictably, solve the semi-colon thing.
As we all know, the most important part of developing things the right way is proper testing! From what I could find in the docs, this library doesn't add any test helpers or examples of testing a Reflex
.
I think both test/unit
and rspec
integrations would be useful to and cover the majority of the community
If not, at least some examples in the docs of how to test
NOTE: I am no JS pro, so I may perfectly well be missing something obvious.
After updating my code from stimulus_reflex 3.0.0 to 3.1.0 in both the gem & node, I am getting errors on a page that used to work.
I do not have a clean repro case yet, just stack trace that appears to be entirely in the JS:
TypeError: can't access property "removeEventListener", socket is undefined consumer.js:38
registerConsumer consumer.js:38
createSubscription stimulus_reflex.js:78
register stimulus_reflex.js:191
StimulusReflexController stimulus_reflex.js:214
construct self-hosted:1871
Controller definition.js:43
Context context.js:9
fetchContextForScope module.js:55
connectContextForScope module.js:37
scopeConnected router.js:100
elementMatchedValue scope_observer.js:55
tokenMatched value_list_observer.js:54
tokenMatched token_list_observer.js:82
tokensMatched token_list_observer.js:69
forEach self-hosted:225
tokensMatched token_list_observer.js:68
elementMatchedAttribute token_list_observer.js:49
elementMatched attribute_observer.js:59
addElement element_observer.js:151
processAttributeChange element_observer.js:84
processMutation element_observer.js:67
processMutations element_observer.js:60
mutationObserver element_observer.js:12
(Async: MutationCallback)
ElementObserver element_observer.js:11
AttributeObserver attribute_observer.js:9
TokenListObserver token_list_observer.js:8
ValueListObserver value_list_observer.js:7
ScopeObserver scope_observer.js:11
Router router.js:10
Application application.js:159
start application.js:163
js index.js:8
Webpack 5
The Stimulus Reflex code on the page is very close to the Gravatar example in Expo (just modified to use Libravatar instead). No custom controller involved.
(Repros in both)
The event listener for stimulus-reflex:500
will short-circuit when it receives a broadcast that has no morph operations.
500s do not return any morph operations, but you would still want CableReady to run the dispatchEvent
operation to the error can be trapped.
Cause an error to be raised by the reflex and attempt to trap it in an error event.
The error should cause a stimulus-reflex:500
error event to be dispatched.
Reflexes could support before, around and after actions like controllers. Could help DRY up some reflexes that I set up out in the wild ;-)
Repetitive code in reflex actions.
Take a look at https://github.com/rails/rails/blob/157920aead96865e3135f496c09ace607d5620dc/actionpack/lib/abstract_controller/callbacks.rb
Can anyone provide example of integration activejob in reflex flow? Something as simple as possible. e.g. re-render template in job?
I'm currently trying to get Stimulus Reflex working using AnyCable as a drop-in replacement for ActionCable. I'm running into some nasty worms. Ideas welcomed, especially from @palkan π€
We merge connection.env with our own constructed hash, resulting in us getting an undefined method 'merge' for nil:NilClass
error.
I tried to cheat and just pass our constructed env in to ActionDispatch::Request.new() and it came back with Missing rack.input
when we tell ActionDispatch to process the request.
I temporarily reverted the sample project to use standard ActionCable and normally rack.input contains an instance of Puma::NullIO
. Unfortunately, this is precisely where my troubleshooting capacity tapers off dramatically.
Long story short, if I hard-code a session ID from the database for testing purposes, it seems to work fine. So, we don't have access to the session.id when AnyCable is in the picture.
I don't have a lot of experience with other session stores, but I wonder if it's possible to fix this by switching to using Redis instead of cookies?
I did go through the AnyCable Troubleshooting page and reviewed "From Action to Any" but I could find no reference to these particular issues.
So, not quite drop-in yet but I am optimistic that Vladimir will know what to do!
I think that the current case is that if you opened up several tabs with the same stimulusreflex controller you would end up with multiple websocket connections, this is a bit wasteful. So at some point it might be worth exploring how this can be minimized.
A starting point might be to check out this -> https://blog.pusher.com/reduce-websocket-connections-with-shared-workers/
The controller lifecycle event hooks are nice and developer friendly but sometimes they may not provide enough power. We need the ability to hook into a reflex lifecycle via DOM events.
DOM events are a more powerful abstraction than the current lifecycle callbacks. I think we can build the lifecycle callbacks on top of a new DOM event based lifecycle.
SEE: https://stimulus-reflex.discourse.group/t/global-lifecycle-events-dispatched-on-document/21
The callbacks should feel very similar to what Rails provides for standard controllers. https://api.rubyonrails.org/classes/AbstractController/Callbacks/ClassMethods.html
SEE: https://github.com/hopsoft/stimulus_reflex/blob/master/lib/stimulus_reflex/channel.rb#L43-L52
Recently I have been intensely focused on building a series of increasingly more sophisticated example StimulusReflex applications (hopefully) destined for the Expo site. Aside from (hopefully) being instructive and fun to make, it's very important for library builders to play the role of end-users and dogfood everything on a regular basis. Sometimes you surface issues in the mouthfeel of the API.
One of the most powerful recent additions to StimulusReflex is the callback system. @hopsoft and I worked very hard to make everything behave in a rational, predictable manner even while behind the scenes some aspects of this goal were tricky to implement.
The problem I keep running into starts with good intentions. I'll be designing an interface that has multiple widgets in play, and instead of wrapping the whole body in a giant Stimulus controller, I'll put data-controller
on the parent elements of the appropriate widgets.
Here's the thing: if a data-reflex
occurs inside of the child hierarchy of the parent element that has the data-controller
attribute, you have the opportunity to write callbacks which fire when those reflex events are triggered. But if you want to put a data-reflex
for a controller elsewhere on your interface, StimulusReflex doesn't currently have any mechanism for firing callbacks.
What I've found, as a library user, is that first I'll spend time trying to find an elegant solution; then I'll end up with two separate controllers that, over time, gain more and more identical functionality; finally, I'll just move the controller to the highest point of the DOM I can access and consolidate the code into one controller. I've now created a single working (yay) controller that is likely to only work on a single interface (sigh), instead of two relatively flexible controllers that I can reuse on many pages.
I'm wondering if there's a way that we could opt-in to callbacks even if we're not under the hierarchy of the data-controller
by pointing to an element via a CSS selector. For example:
<div id="example" data-controller="example">
<button data-reflex="click->ExampleReflex#no_problem">No Problem!</button>
</div>
<button data-reflex="click->ExampleReflex#hear_me" data-reflex-controller="#example">I'm a real boy!</button>
In Rails 6, there is no app/assets/javascripts folder, so I can't figure out how to get the dependency on stimulus_reflex properly referenced. What's the best way to import/require from within a gem? I checked and it doesn't seem like there is a stimulus_reflex package on npm, which might be the magic solution.
I could grab the js from the gem and include it directly, but that seems super gauche.
If you have even a single line of require() syntax (including the .start() call, if any) I would be indebted.
Reflex ignores the schema set in Stimulus. It assumes Stimulus will always use the default schema.
Line 220 in javascript/stimulus_reflex.js
if (actionValue) element.setAttribute('data-action', actionValue)
Hardcodes the 'data-action' attribute.
In our project we use a custom schema as follows:
const application = Application.start(document.documentElement, {
controllerAttribute: 'data-controller',
actionAttribute: 'data-do',
targetAttribute: 'data-target'
});
Because we had a conflict with another plugin, cropperjs.
Feedback would be appreciated.
Rails 6.0 renamed the actioncable
npm package to @rails/actioncable
. We experience errors in production when precompiling our assets due to conflicts between these two versions of ActionCable.
The npm package name for ActionCable needs to be updated. Not sure how this is done when it comes to renaming npm packages, as you may want compatibility with both the new @rails/actioncable
package as well as the older actioncable
package.
Use Rails 6 and @rails/actioncable
instead of actioncable
.
Shouldn't bomb out.
N/A
In the quickstart the first example explains how you can introduce stimulusreflex without any javascript. This seems somewhat magical, it would be nice if it was explained somewhere more clearly how the magic works behind the scenes or what assumptions are being made to make this work.
Referring to this https://docs.stimulusreflex.com/quickstart#call-reflex-methods-on-the-server-without-any-javascript
With 150+ stars on this projects it may be worth adding the following to help adoption and maintenance:
Thoughts? Happy to open a PR to add some or all of the above for review.
One thing I learned from this so-so conference talk is that LiveView allows you to scope your MorphDom target to arbitrary elements.
In theory, that means you could have multiple reflex "widgets" going at once on the same page. We already have controller scoped reflexes working (at least in my PR! cough) and it seems like we could pass that context to CableReady instead of assuming that we want to replace the whole body tag.
DHH got everyone obsessed with REST but there's nothing stopping devs from setting up actions that render arbitrary HTML for a widget with render(layout: false).
Hi,
Getting this:
15:21:49 henrik@devbox remit master*$ bundle exec rails stimulus_reflex:install
/home/henrik/.devbox/code/remit/gems/gems/actionpack-6.0.2.1/lib/action_dispatch/middleware/stack.rb:37: warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
/home/henrik/.devbox/code/remit/gems/gems/actionpack-6.0.2.1/lib/action_dispatch/middleware/static.rb:110: warning: The called method `initialize' is defined here
/home/henrik/.devbox/code/remit/gems/gems/actionpack-6.0.2.1/lib/action_dispatch/middleware/stack.rb:37: warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
/home/henrik/.devbox/code/remit/gems/gems/actionpack-6.0.2.1/lib/action_dispatch/middleware/static.rb:110: warning: The called method `initialize' is defined here
Appending Stimulus setup code to /Users/henrik/Projects/barsoom/remit/app/javascript/packs/application.js
File unchanged! The supplied flag value not found! app/javascript/packs/application.js
Creating controllers directory
exist app/javascript/controllers
This is a freshly generated Rails 6.0.2 app on Ruby 2.7.0 (thus the warningsβ¦).
Running on an Ubuntu VM inside macOS.
I may have run the install command more than once if that has any relevance.
Hey not an issue here more of a question.
I was wondering if I could use Reflex to update in realtime my UI when I receive a webhook?
I am working on several Stripe SCA upgrade projects and once the payment is sent then my success page needs to refresh when I receive the Stripe confirmation webhook and that I have fulfilled the order.
Currently, I am doing this with either a simple polling or with action cable.
Would Reflex work for such use case?
Thanks for this promising project
Just found out about this wonderful gem; I'm having some issues understanding how scoping works
this example works perfectly., but given the following :
<div data-controller="example" data-reflex-root=".btn,.output">
<a
href="#" class='btn'
data-count="<%= @count.to_i %>"
data-step="1" data-reflex="click->ExampleReflex#do_stuff">
Increment
</a>
<div class='output' ><%= @count.to_i %></div>
</div>
The expected change happens only once : the .output div content get from 0 to 1 at first click.
Clicking further, the data-count params remains at 0. I'm having hard time understanding how to get it to work; is there an obvious error to correct ?
Going a bit further, how should things be set to make elements independent ? Given this example :
<a href="#" class='btn' data-count="<%= @count1.to_i %>" data-step="1" data-reflex="click->ExampleReflex#counter1">
<%= @count1.to_i %>
</a>
<a href="#" data-count="<%= @count2.to_i %>" data-step="1" data-reflex="click->ExampleReflex#counter2">
<%= @count2.to_i %>
</a>
and without further setup, a click on one element would reset the other, and vice versa. Is such approach available in the context your provide in this gem ? Is persistence the only way to go ? Does it requires extra js setup ?
thx a lot in case you have time claryfying a bit how to use it all
When removing a child record from a form, values sometimes remain in an input field.
I have a form that includes nested child records. Each child record contains a "Remove" button that sets the _destroy
attribute on the record to true
and then sends serialized form data to the server for validation. The server correctly handles the request, and the html coming back from the server is correct. But input fields sometimes appear with data from the deleted child record still showing.
This seems to be a diffing problem. The HTML coming back from the server is right but is not correctly inserted into the page.
Replaced HTML should be faithful to the rendered server response.
Reflex not binding to Ajax loaded content that is loaded onto page from Rails UJS remote call.
Reflex should bind to ajax loaded content
I followed https://docs.stimulusreflex.com/patterns#triggering-custom-events-and-forcing-dom-updates but it took me a while to figure out that since I've set up authentication per https://docs.stimulusreflex.com/authentication#encrypted-session-cookies, no one sees broadcasts to just StimulusReflex::Channel
- I need to broadcast to e.g. StimulusReflex::Channel:abc123
where abc123
is a session ID.
But then I'd presumably need to loop over all sessions to broadcast to all users, which seems messy and a bad pattern.
I was going to make a doc PR, but I'm not sure what a good solution is here. I don't know Action Cable nor StimulusReflex well yet. Could it make sense for SR to (provide instructions to) set up both authed and non-authed channels/streams? Or would it be better if the docs said to set up a custom channel outside of SR for broadcasts to all users?
I want to demonstrate triggering the delivery of a Reflex payload from outside of the request loop. That could be in a few milliseconds or an arbitrary amount of time later. The key detail is that it's generated in response to an external event such as a webhook or notification.
I figured that a good teaching vehicle would be an ActionJob. I can send in the same parameters that are used to call channel.receive() + the stream_name.
Except, wait... you hit logical flaw number one: when you create an instance of StimulusReflex::Channel, you need to pass it a Connection so that the render_page method has a valid ActionDispatch::Request object.
Huh! Okay, what are my other options? Well, I could make use of the new ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message })
thing and then call ActionCable.server.broadcast
directly.
The problem there is that I'd have to call both the reflex action AND the controller action in order to properly replicate the instance variables for the template. eff that
Which brings me full circle to questioning my original premise for wait_for_it. However, maybe the fact that it could serve literally the wrong page (if the user has navigated away) is a sign that this is Not The Right Way To Do This.
Where I landed was a different idea altogether. We're already talking about adding the capacity to do a Turbolinks/classic browser redirect operation. What if we used [the same or a similar mechanism] to send a message to the client that says: hey, if you're still on URL X, there is a potentially newer version of the page which you could refresh.
The advantages of this approach are that it gives implementation flexibility to the developer in terms of handling how/when/if they want to handle out-of-band updates, but also that a request coming from the client over the existing connection is going to have a valid connection + stream_name and all of the other important details otherwise absent.
The only other idea I had was that perhaps there is a unique ID attached to each connection object, and that this ID could be passed into the ActionJob and later used to obtain a reference to the connection for purposes of instantiating a new StimulusReflex::Channel.
Alright, I'm spent. Who has opinions?! π
Holding ActionCable room configuration in the DOM is problematic and may pose a security risk.
Remove the ability to configure rooms via data
attributes in the DOM and make this one of the options supported by register
.
Looks like there are some formatting issues on the README.
ex:
{% code-tabs %} {% code-tabs-item title="app/javascript/controllers/index.js" %}
Maybe we should pull some stuff out of the README now that we are using gitbook. We can move a lot of this into the docs/ folder, which would make updating the gitbook updates easier.
Thoughts @hopsoft?
I have a legacy Rails app running on 5.2.3 that I wanted to try stimulus_reflex on, so I decided to first run a test on a fresh install, but the installer failed.
The installer fails because no index.js
file is present:
Errno::ENOENT: No such file or directory @ rb_sysopen - {...}/stimulus_reflex_test/app/javascript/controllers/index.js
bin/rails:4:in `<main>'
mkdir stimulus_reflex_test
cd stimulus_reflex_test/
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '5.2.3'" >> Gemfile
bundle install
bundle exec rails new . --force --skip-bundle
echo "gem 'webpacker', '~> 3.5'" >> Gemfile
bundle update
bundle exec rails webpacker:install
bundle exec rails webpacker:install:stimulus
bundle add stimulus_reflex
bundle exec rails stimulus_reflex:install
The installer should complete
Output of bin/rails webpacker:info
:
Ruby: ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]
Rails: 5.2.3
Webpacker: 3.6.0
Node: v10.15.3
Yarn: 1.19.1
@rails/webpacker:
stimulus_reflex_test@ {...}/stimulus_reflex_test
βββ @rails/[email protected]
Is bin/webpack present?: true
Is bin/webpack-dev-server present?: true
Is bin/yarn present?: true
I was using StimulusReflex successfully, but it has suddenly started giving me this error in console: "StimulusReflex was unable to register the ActionCable consumer. Don't worry, everything should still work."
I'm worried. Any idea what's going on here?
The demo at http://expo.stimulusreflex.com/ seems to be broken.
If a reflex is scoped to update multiple selectors, the reflexSuccess and afterReflex callbacks are being executed once per morph operation instead of once per cable_ready payload.
Ensure afterReflex writes to the console log. Call a reflex that is scoped to two or more selectors.
Each reflex action should fire callbacks one time.
I'm curious if removing Nokogiri and the code that parses the body before wire transfer is actually worth it. It may be faster to simply send everything, including the HEAD, back over the wire rather than parse the DOM tree simply to extract the body. I want to test this to see which approach is actually faster.
Since there are quite a few moving parts that gets this working I thought that perhaps it would be a good idea to have integration tests using cypress.io. One good reason for considering cypress.io is that you'll write tests against browser behaviour, which means that you'll see how the javascript and ruby code works together.
I wanted to open this issue to collect ideas on things that would need to get tested, edge cases that should work and perhaps haven't at some point etc.
These are some things that I thought of on top of my mind.
When using SR with Stimulus, it should be possible to use scoping to return a portion of the page even if there is only one Stimulus controller in use for the entire page.
I wouldn't call this a bug exactly, but the behavior is unexpected. Say I have a large form with a lot of data, and I want to do server-side validations. I want a single Stimulus controller that will handle field mapping and submission to the validation reflex class, but I don't want to return all the html for the entire form with each validation.
The docs for Scoping indicate that the first place SR looks to determine a root is "Is there a data-reflex-root
on the element with the data-reflex
?"
But when using Stimulus to talk to the Reflex model, there is no element with a data-reflex
to reference. So I am forced to set my root at the element containing the controller, which is at the very top of the form.
I would like the logic that determines scoping to allow me to set a data-reflex-root
on an html element that doesn't necessarily include a Stimulus controller or a data-reflex
action.
I'd like the javascript part of stimulus-reflex to become websocket agnostic. Ie, right now it is coupled with how websockets work for specifically for rails (for good reason, you use rails, and this grew out of that).
I'm primarily working with python and it'd be nice to be able to use the same approach that is used here and use it in the python world.
Do you have any thoughts around this?
This seems tangentially related to #46
Before you go on reading: I'm not even sure stimulus_reflex is intended to be backwards compatible. If that isn't so, feel free to close.
With the temporary fix mentioned in #81 and #82 I was able to install stimulus_reflex,
but the pack couldn't be compiled.
Apparently babel-plugin-transform-object-rest-spread
doesn't like the line
controller.StimulusReflex = { ...options, channel, room }
Output of bin/rails webpacker:compile
ERROR in ./node_modules/stimulus_reflex/stimulus_reflex.js
Module parse failed: Unexpected token (168:32)
You may need an appropriate loader to handle this file type.
| const channel = 'StimulusReflex::Channel'
| const room = options.room || controller.element.dataset.room || ''
| controller.StimulusReflex = { ...options, channel, room }
| extendStimulusController(controller)
| createSubscription(controller)
@ ./app/javascript/packs/application.js 14:0-45
Set up a rails 5.2 application as outlined here: #81 and try to bin/rails webpacker:compile
The pack should compile.
Ruby: ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]
Rails: 5.2.3
Webpacker: 3.6.0
Node: v10.15.3
Yarn: 1.19.1
@rails/webpacker:
stimulus_reflex_test@ {...}/stimulus_reflex_test
βββ @rails/[email protected]
Is bin/webpack present?: true
Is bin/webpack-dev-server present?: true
Is bin/yarn present?: true
The generator should support 2 primary objectives.
bundle exec rails stimulus_reflex:install
This will check for the existence of Stimulus in the project and will also create the following files.
These files will include basic boilerplate and establish some patterns and practices that developers can follow to build their own StimulusReflex features.
NOTE: Generator args should behave similar to other Rails generators.
bundle exec rails generate stimulus_reflex demo
This above command will generate 2 files.
The files will include basic boilerplate to help developers get started.
bundle exec rails generate stimulus_reflex:controller demo
This above command will generate 1 file.
bundle exec rails generate stimulus_reflex:reflex demo
This above command will generate 1 file.
I get the following error using the Generic Lifecycle Methods
beforeReflex
reflexSuccess
reflexError
afterReflex
Error:
stimulus_reflex.js:303 Uncaught TypeError: Cannot read property 'stimulusReflexController' of null
at HTMLDocument. (stimulus_reflex.js:303)
at dispatch (cable_ready.js:17)
at Object.morph (cable_ready.js:53)
at Object.perform (cable_ready.js:184)
at Subscription.received (stimulus_reflex.js:81)
at Subscriptions.notify (action_cable.js:546)
at Connection.message (action_cable.js:381)
The beforeReflex is called correctly, however it doesn't call the other methods (afterReflex and reflexSuccess). It just throws this error.
Because of this, the page spinner invoked in the beforeReflex method never goes away.
The error doesn't happen with selects (drop down list), only with text boxes and date time inputs (Flatpickr). I don't know how that could be related.
Here's a gist with al the code involved in the issue: https://gist.github.com/LuisDeHaro/63956422dd015cddf1f11856a8f8abdd
No error in the JavaScript console and the callbacks being called.
Filtering:
A new feature in LiveView is the equivalent of redirect_to inside of a reflex.
https://dockyard.com/blog/2019/09/06/whats-new-and-next-for-phoenix-liveview
It'd require some fussing with the CableReady implementation, but in theory, this should actually be relatively straight-forward.
One thing I'd love to see, as a Turbolinks fan, is optional detection and support for Turbolinks.visit() instead of window.location.
I saw the closed issue around server-side callbacks, but I'm surprised nothing has been discussed around client callbacks.
In the todomvc sample, when you click on a todo item to initiate an edit there's no way to set the typing focus on the input that is inserted. You effectively have to click twice; I did try to suppress the autofocus attribute on the create new todo textbox, as I was concerned that having two autofocus textboxes would conflict. Unfortunately, even if the todo you clicked on is the only autofocus element, the browser doesn't seem to take action on it after it's been dynamically inserted.
This suggests that there should be a simple way to specify a callback to handle the sorts of visual effects that make no sense or are impossible to render in a template.
I feel pretty strongly that sending arbitrary JS to execute via websockets is almost certainly a major attack vector, and then haven't we just re-invented RJS? Let's not go there.
That means, to me at least, that it would be nice to be able to do two things:
I would love to be able to async/await a JS call to this.stimulate() in the controller for explicit reflex calls. And I would love to be able to specify a data-callback attribute for declarative reflexes that would execute a controller method with the element passed as a parameter.
This means that element.focus() is easily possible, as is those sexy, sexy yellow pulse glow effects that were all the rage when Basecamp came out in 2004. Gosh, don't you just miss Prototype sometimes? ;)
Please create a Slack Community. Would love to join in this wonderful community.
Best Regards
Andrew
One thing I noticed that Phoenix LiveView has implemented is a signed salt to verify the authenticity of requests and prevent bad actors.
https://github.com/phoenixframework/phoenix_live_view/#installation
This seems like something handled by ActionCable, but if not, it's probably a good idea to consider something like this, given that many actions could trigger destructive changes via CRUD-like reflexes.
Failed to re-render URL undefined method 'authenticate' for nil:NilClass
Also reports of issues with the validated?
method.
Attempt to use SR on a URL that is access-controlled by an authenticated route:
# routes.rb
authenticated :user, lambda { |u| u.has_role? :admin } do
get "doh", to: "home#doh"
end
SR should be able to work with devise authenticated routes.
https://docs.stimulusreflex.com/setup#devise
The example formatting is not displaying properly at https://docs.stimulusreflex.com/persistence#instance-variables
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.