Just a small town boy living in a ember modifier world

[snewcomer]

This is not the final product, but the start of how one could use a modifier inside a component.
No feature added. Required a slight refactor to the mixin but seems like the easiest path for now if people want to use an element modifier inside a component (w/ or w/o a tagName btw!)

In the example in the dummy app, it uses did-insert from @ember/render-modifiers and adds the specific element to the pool of elements that we watch.

You could possibly use this to watch multiple nodes.

export default Component.extend(InViewportMixin, {
  didInsertHeader() {}
  didInsertFooter() {}
  didInsertHeroImage() {}
});

although for this to work with multiple items, we would need to figure out what to do when triggering didEnterViewport

See dummy/components/my-modifier.js for the example.

close #109 close #177

[snewcomer]

Follow up will include a better manager for the elements on the page.

[mehulkar]

I like that it uses the existing implementation in a clean way, but I wonder if there's a way to write the modifier such that it doesn't need the entire component instance? I had thought that the benefit of modifiers is that they can operate on DOM nodes independently of their associated component classes.

My initial thought at implementing (before i knew about @ember/render-modifiers, was to wire up an IntersectionObserver with the element directly.

I don't quite get how modifier managers work at the moment, so I wasn't able to understand what the did-insert modifier is actually doing under the hood

[snewcomer]

Good point. Added a note about a future add did-enter-viewport modifier + a service (instead of a mixin). Will think about this over the following months. Thanks for taking a look!