Skip to content

[FE-896] Make executeWithoutPopstateListener asynchronous#14

Merged
zachpwr merged 1 commit into
masterfrom
fe/zachary.power/make-popstate-blocker-async
Apr 5, 2019
Merged

[FE-896] Make executeWithoutPopstateListener asynchronous#14
zachpwr merged 1 commit into
masterfrom
fe/zachary.power/make-popstate-blocker-async

Conversation

@zachpwr
Copy link
Copy Markdown

@zachpwr zachpwr commented Apr 5, 2019

Summary:

The method executeWithoutPopstateListener was introduced in #13 to allow for executing code without the popstate event listener firing in nuclear-router.

After re-examining the use case for this method, it was discovered that events which emit popstate events, such as hitting the "Back" button or calling window.history.back(), almost always queue the page navigation to occur asynchronously. Therefore, this PR changes executeWithoutPopstateListener to accept an asynchronous function. This PR also now returns the Promise chain that is handled in this method.

Test Plan:

This PR modifies the unit test for this method to use Promises rather than synchronous execution.

@zachpwr zachpwr requested a review from a team as a code owner April 5, 2019 00:30
@zachpwr zachpwr removed their assignment Apr 5, 2019
Comment thread src/Router.js
this.__shouldHandlePopstateEvents = true;

// Execute the function, then re-enable the popstate listener
return fn().then((result) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just use .finally? It requires the consumer to pass an ES6 Promise (not a Deferred) but I think thats OK/preferred.

return fn().finally(function() {
  this.__shouldHandlePopstateEvents = true;
});

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea! I can add that in instead.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay just added in this change

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, had to switch back to the original setup (.then(resolveHander, rejectHandler)). .finally was giving CI some trouble since it requires polyfill.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jamesopti I thought of that too (using .finally) but we might impact other companies that are using nuclear-router without an ES7-spec Promise polyfill that ensures .finally is available.

Copy link
Copy Markdown

@quarklemotion quarklemotion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks sensible to me!

Comment thread src/Router.js
this.__shouldHandlePopstateEvents = true;

// Execute the function, then re-enable the popstate listener
return fn().then((result) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I imagine you are using the two function arguments with .then for best cross compatibility with jQuery Deferreds and Promises? This is probably best since this is a module used by potentially disparate types of FE clients.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True that it would make this more compatible with deferreds, but considering the following reasoning, we can probably go with .finally as James has suggested:

  • In the .then(resolveHander, rejectHandler) setup, I was still returning Promise.<resolve|reject>(), so it would still add some weirdness if using deferreds with this
  • Promises are preferred as we are trying to move away from jQuery deferreds

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we discussed offline, I'm reverting back to the original solution (.then(resolveHander, rejectHandler)) since the lack of .finally polyfill causes CI tests to fail.

@jamesopti jamesopti requested a review from quarklemotion April 5, 2019 01:19
@zachpwr zachpwr force-pushed the fe/zachary.power/make-popstate-blocker-async branch from b6599bf to 8f57ac1 Compare April 5, 2019 15:45
@zachpwr zachpwr force-pushed the fe/zachary.power/make-popstate-blocker-async branch from 8f57ac1 to 5125fc4 Compare April 5, 2019 16:18
@zachpwr zachpwr merged commit 1198f43 into master Apr 5, 2019
@zachpwr zachpwr deleted the fe/zachary.power/make-popstate-blocker-async branch April 5, 2019 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants