emberjs / ember-render-modifiers

Implements did-insert / did-update / will-destroy modifiers for emberjs/rfcs#415
MIT License
85 stars 34 forks source link

Fix README information clarifying the purpose of `ember-render-modifiers` #53

Closed villander closed 2 years ago

villander commented 2 years ago

I've been using this addon for 2 years not just for migrating old ember apps to octane way, but for some cases that we need modifiers we can use this addon as a useful library to provide a this.element into glimmer component when I have to wait for the element inserted into the DOM. In some cases, we don't want to create a global modifier (because modifiers are global as helpers on the Ember ecosystem) to get some HTML element into the component.

I know this package was created with the purpose to solve some gaps and speed the migration of classic components to glimmer components, but over time it showed very ergonomic when your component require some DOM manipulation.

In this example below, I have to prevent that click on <li/> children created by submenu start to propagate click on <li/>. could I create a modifier? clear! But this addon made it more explicit that I'm waiting for a "did-insert" event and there I have a more readable and flexible code that allows us to manipulate the dom several times without needing to do a premature abstraction creating several modifiers. That's why shouldn't consider anymore it's generally an anti-pattern and put fear in those who read the readme

<li
  local-class="nav-item submenu"
  class="nav-item"
  role="button"
  {{on "click" this.handleClick}}
  {{did-insert (set this "anchorElement")}}
>
  {{yield (hash
    submenu=(component 'nav-bar/submenu' isOpen=this.isOpen)
  )}}
</li>
import Component from '@glimmer/component'
import { tracked } from '@glimmer/tracking'
import { action } from '@ember/object'

export default class ItemComponent extends Component {
  @tracked isOpen = false
  @tracked anchorElement!: HTMLAnchorElement

  @action
  handleClick (event: MouseEvent): void {
    if (event.target !== this.anchorElement) {
      return
    }
    this.isOpen = !this.isOpen
  }
}