On Friday, I published my first addon. It’s called ember-container-query. Becoming an addon author was one of my goals for 2020, so I’m especially proud of it and hope that you will find a good use.
Container queries aren’t new in Ember. My addon is based on Chad Carbert’s ember-fill-up from 2019. That, in turn, credits Andrey Mikhaylov’s ember-element-query from 2017. I even found a blog post from 2015, by Greg Babiars!
Simplicity is what makes
ember-container-query different from the previous tries. I combined 2 atomic solutions (modifiers, introduced in Ember Octane) to arrive at the atomic solution to container queries.
Because I practiced code composition and provided the minimum necessary API, the benefits are twofold. I have fewer code to maintain, while you have a choice to build your code on top of my addon or another with a similar API.
Testing is the second differentiator. With every code change, the CI checks that my addon and demo app work no matter the window size. Testing multiple windows is kinda important for container queries.
To my knowledge, no Ember app or addon has tried testing multiple windows and publicly released their solution. In the next article, I will go over how you can update the default test setup to achieve this feat.