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

Update chat messages component to use stimulus 2 syntax #681

Merged
merged 6 commits into from Feb 6, 2021

Conversation

mattwr18
Copy link
Contributor

@mattwr18 mattwr18 commented Feb 6, 2021

Fixes #659

Recently, we upgraded to Stimulus 2.0, and updated our target syntax to get rid of deprecation warnings, but didn't make any other changes to benefit from this major version bump. The main changes in Stimulus 2.0 are related to the additions of the Values/Classes API.

NEW: Values and CSS classes APIs (#202)

Here's a link to the PR with the motivation behind these changes hotwired/stimulus#202

This PR updates the places in our code base which are based on the Data Map API, and migrates the CSS classes to the template to clean up the StimulusJS controllers, in line with the upgrade to 2.0...

Even though our project is small, and we almost exclusively use String for our values, we were able to take advantage of the explicit data type declarations for the allowNewValue ... this is also helpful for avoiding the need to use parseInt when declaring a Number data type.

The CSS classes, I think we don't benefit as much from... It does make the Stimulus controller cleaner by moving the BEM classes out, but it adds that to the template, so not much gained, maybe it's just a personal preference. If we were to reuse the controllers for multiple templates, which would have different class names, then we would benefit more from it, but if that is the direction Stimulus - and therefore the docs - is going, I think we don't lose anything by keeping up with modern syntax.

Copy link
Collaborator

@roschaefer roschaefer left a comment

Choose a reason for hiding this comment

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

looks good

Nice! I learned how to refactor other components to the new API now. Great.

I haven't tested the code but it looks really like a 1:1 refactoring. So, what could possibly go wrong 😉 Approved!

data-request-notification-message-template="<%= t('components.request_notification.message_template').to_json %>"
data-request-notification-id-value="<%= request.id %>"
data-request-notification-last-updated-at-value="<%= last_updated_at %>"
data-request-notification-message-template-value="<%= t('components.request_notification.message_template').to_json %>"
Copy link
Collaborator

Choose a reason for hiding this comment

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

eww, JSON inside HTML attributes. Well it was there before.

@roschaefer roschaefer merged commit 396ed80 into master Feb 6, 2021
@roschaefer roschaefer deleted the 659-refactor-to-use-values-api-stimulus branch February 6, 2021 18:15
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.

Refactor: Use Stimulus 2.x.x API
2 participants