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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve DX around version mismatch warnings #641

Merged
merged 3 commits into from
Mar 15, 2023

Conversation

marcoroth
Copy link
Member

@marcoroth marcoroth commented Mar 5, 2023

Type of PR

Enhancement

Description

This pull request enhances the developer experience when the StimulusReflex client- and server-side versions mismatch. It will show a toast message in the lower right corner of the screen if there's a version mismatch. Previously it would just show it in the Rails server log.

It will only show the toasts if you try to trigger a reflex action, it won't complain earlier, which is also much friendlier, because in previous versions of StimulusReflex it wouldn't even let you start the Rails server.

This is what happens now if you try to trigger a reflex:

  • on :exit it will show a red error toast message and won't execute the trigged reflex:
    Screenshot 2023-03-13 at 15 43 43

  • on :warn it will show a yellow warning toast message but will still execute the triggered reflex:
    Screenshot 2023-03-13 at 15 43 28

  • on :ignore it won't show anything and also will also regularly execute the triggered reflex.

Note: the toastify-js dependency will be bundled up with the built JavaScript version of the package, so it won't show up as a runtime dependency in applications running the stimulus_reflex npm package.

The toasts are currently not disabled in production environments, but I'm also not sure if we should. Any opinions on this?

Why should this be added

Improves the developer experience and makes it easier to noticed/work with.

Checklist

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

@netlify
Copy link

netlify bot commented Mar 5, 2023

Deploy Preview for stimulusreflex ready!

Name Link
🔨 Latest commit 0f1b45d
🔍 Latest deploy log https://app.netlify.com/sites/stimulusreflex/deploys/6410999c772fb0000711eb27
😎 Deploy Preview https://deploy-preview-641--stimulusreflex.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link
Contributor

@andrewmcodes andrewmcodes left a comment

Choose a reason for hiding this comment

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

someone other than me will want to give an approval bc this is the first PR I've looked at in awhile but only one thing came to mind. this is pretty slick 👏 Whish rails had done this with webpacker.

javascript/version_checker.js Outdated Show resolved Hide resolved
@hopsoft
Copy link
Contributor

hopsoft commented Mar 7, 2023

Still need to review the code, but this is lovely.

Copy link
Contributor

@hopsoft hopsoft left a comment

Choose a reason for hiding this comment

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

👏🏻 Love it! I'm not the biggest fan of adding more dependencies but agree that it's worth it in this case to enhance DX given that it's so minimal.

@marcoroth marcoroth force-pushed the better-version-mismatch-warnings branch from f1eba2d to a35fa9a Compare March 13, 2023 14:49
@marcoroth marcoroth merged commit 754beae into main Mar 15, 2023
@marcoroth marcoroth deleted the better-version-mismatch-warnings branch March 15, 2023 16:33
marcoroth added a commit that referenced this pull request Mar 27, 2023
#651)

Following up on #641 and #650, this pull request also shows version
mismatch toasts when the CableReady versions don't match. Perviously it
would just show toast messages when the StimulusReflex versions didn't
match.

## Why should this be added

Previously this just showed a console error message when the user
enabled the client-side `debug` option to `true`. Now this message is
always printed, regular of the option. But additionally it now shows a
version mismatch toast message when the `debug` option is set to `true`:
![Screenshot 2023-03-27 at 21 10
36](https://user-images.githubusercontent.com/6411752/228042658-ed9523cc-575d-47b3-aaf0-6ab33a47b140.png)

This helps to know what's up and why a reflex action might not have
worked. If you didn't have the console open you wouldn't know why the
reflex action didn't work.
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.

4 participants