Looking for the best pattern to integrate UI library with Glimmer components in an Ember app

I need to integrate a UI library in an Ember app which uses Glimmer components. The construction and teardown of the components happens using “did-insert” and “will-destroy” modifiers. This is clean enough. In general, it would be even cleaner if the HTML construction happens purely by binding but given the nature of the UI library I need to use javascript to create and destroy components. The problem is when I need to react to changes in component arguments. There are cases in which I need to detect such changes and again use javascript to apply the corresponding changes to the component using the library’s API. Previously I used “addObserver” method of the classic Ember components. Now migrating to Glimmer components there is no such “addObserver” method.

Any ideas how to solve this problem in a relatively clean way are welcome!

I am adding some sample code below:

Component:

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class Tabs extends Component {
  tabs = null;

  @action
  didInsertEl() {
    this.tabs = $('#my-tabs').tabs();
    this.onTabChange();
  }

  // What is the best way to register this method as a listener on "args.tabIndex" changes?
  // The approach chosen should work with detecting changes in nested properties inside input arguments as well.
  // It needs to be as powerful as the tracking mechanism of computed properties.
  // For example, it should be able to detect changes like "args.items.@each.name".
  onTabChange() {
    if (this.tabs) {
      this.tabs.tabs('option', 'active', this.args.tabIndex);
    }
  }

  @action
  willDestroyEl() {
    this.tabs.tabs('destroy');
  }
}

Template:

<div 
  {{did-insert this.didInsertEl}}
  {{will-destroy this.willDestroyEl}}
>
  <div id="my-tabs">
    <!-- My tabs go here -->
  </div>
</div>

Thanks!

1 post - 1 participant

Read full topic