Best practices for integrating third party libraries?

@LuisAverhoff wrote:

I’m trying to include this popular third party js tree library called inspire tree(https://github.com/helion3/inspire-tree) and I’m having a hard time integrating this library for the following reason: I don’t know a good way to prevent ember from complaining that the inspire tree was not updated with ember.set. What I have done so far is create a service that holds a reference to the inspired tree

export default class GtOntologyTree extends Service {
  inspiredTree!: InspireTree;

  init() {
    super.init();
    this.set("inspiredTree", new InspireTree({}));
  }

  addEvent(this: GtOntologyTree, eventName: string, listener: Listener) {
    this.inspiredTree.on(eventName, listener);
  }

  addNodes(this: GtOntologyTree, nodes: Array<NodeConfig>) {
    this.inspiredTree.addNodes(nodes);
  }

  getNodes(this: GtOntologyTree) {
   return this.inspiredTree.nodes()
  }
}

Create Several Tree components to manage the rendering of the tree. The GtOntologyTreeNode component is the one with the problem since this is where several properties in the inspire tree node gets mutated by inspire-tree i.e the collapsed property, selected property etc and not by ember. I just don’t know a good way to resolve this issue because of how ember simply works.

export default class GtOntologyTreeNode extends Component {
  node!: TreeNode; // This is a node from inspire tree that is passed in.

  @action
  toggleSelect(this: GtOntologyTreeNode ) {
    this.node.toggleSelect(); // Mutates and will cause an error.
  }

  @action
  toggleCollapse(this: GtOntologyTreeNode ) {
    this.node.toggleCollapse(); // Mutates and will cause an error.
  }
}

import ontologies from "gt-query-ui-ember/data/ontologies"
import { bind } from '@ember/runloop';

export default class GtOntologyTree extends Component {
  nodes!: TreeNodes; 
  @service gtOntologytreeService!: GtOntologyTreeService
 
  didInsertElement(this: GtOntologyTree ) {
    this.gtOntologyTreeService.addNodes(ontologies);
   // Here is where the problem start. I need to be able to render these nodes but by 
   // storing them in this.nodes, ember will now watching for changes to all the objects
   // in this.node.
    this.set("nodes", this.gtOntologyTreeService.getNodes());
    // changes.applied is a event that gets emitted when ever there
    // is a change to the tree.
    this.gtOntologyTreeService.addEvent("changes.applied", bind(this,  this.treeUpdated))
  }

  treeUpdated(this: GtOntologyTree) {
    this.set("nodes", this.gtOntologyTreeService.getNodes());
    this.notifyPropertyChange(this.nodes);
  }
}

Any ideas would be appreciated.

Posts: 1

Participants: 1

Read full topic