Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

tab isolation mode v2 #335

merged 3 commits into from Oct 31, 2020


Copy link

@leastbad leastbad commented Oct 21, 2020

Type of PR (feature, enhancement, bug fix, etc.)



This PR proposes to return the isolate: true option passed to the SR initializer, with this being set as the default value for new projects.

#317 broke compatibility with previous versions of the library by making it impossible for multiple tabs to be open and receiving the same CableReady operation broadcasts. This is because the promise associated with the Reflex only existed in the tab that created the Reflex. Any additional tabs would show failing reflex messages.

This PR restored the ability for multiple tabs to receive the same updates. I did this by abstracting the promise creation into a function and adding logic to the ActionCable subscriber to create a new proxy promise from the details.stimulusReflex object on the CableReady broadcast.

I had to resurrect my xPath processing code from roughly a year ago! I can use xPath to grab things in this PR because it all happens before any CableReady operations are initiated.

Three things have been added to the Reflex request payload to support this functionality:

  • the identifier of the Stimulus controller that created the Reflex
  • the xpath to the Reflex root element
  • the xpath to the element that holds the Stimulus controller that created the Reflex

Using this data, I was able to dynamically reattach to the correct controller instance for the Reflex. 馃槄

I changed the success/error logging slightly so that on non-originating tabs, the debug output shows CLONED instead of a Reflex duration, because there's no way to know when the request started on the originating tab without sending it to the server, and I thought seeing a visual reminder that this is not the original Reflex would be more useful.

All callback methods and lifecycle events are supported. There is, however, no reasonable or logical way to attach a callback to the cloned promise because the whole point of the promise is that it's initiated by the calling tab. I will need to find a simple way to explain this in the documentation.


  • I added a console warning in debugging mode on line 153 to notify that an invalid numeric input caused the Reflex to abort
  • Inspired by @hopsoft's complaint about the Auth0 naming inconsistency on Discord, I changed permanent_attribute_name to permanentAttributeName

Why should this be added

While most developers will want their Reflex operations contained within the browser tab in which they originate, we want to allow flexibility for those who think a little differently.


  • My code follows the style guidelines of this project
  • Checks (StandardRB & Prettier-Standard) are passing

@leastbad leastbad requested a review from hopsoft October 21, 2020 00:13
@leastbad leastbad added this to the 3.4.0 milestone Oct 21, 2020
@leastbad leastbad added the enhancement New feature or request label Oct 21, 2020
Copy link

@leastbad I can confirm using isolate: false with this PR works as advertised for my use case. 馃憤

@leastbad leastbad merged commit 1257de6 into stimulusreflex:master Oct 31, 2020
@leastbad leastbad deleted the isolation_optional branch October 31, 2020 10:56
@leastbad leastbad restored the isolation_optional branch November 3, 2020 00:08
@leastbad leastbad deleted the isolation_optional branch August 16, 2021 03:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
enhancement New feature or request
None yet

Successfully merging this pull request may close these issues.

Console exception when reflex updates a page that didn't trigger the update
2 participants