How to utilize external libraries w/ Maquette.js?

Question

Question: How do I use an external library like tether.js with Maquette.js?

My main issue is if I initialize it somewhere in my render function I don't know where I could tear it down, causing a memory leak over time as elements are re-rendered.

I experimented with using enterAnimation and exitAnimation as lifecycle hooks, but quickly ran into the cannot change event handler error, as I need to access a specific instance of Tether that is unique to that item.

Thoughts? Help? Thanks!

Background:

I have very much enjoyed beginning to use Maquette.js the past week. I have a fairly large AngularJS v1 application that makes use of tooltips in many places.

The main thing holding me back from creating more Maquette.js-rendered views is my reliance on Angular tooltip directives.

So, I started playing with tether.js and drop.js in order to utilize their dropdown positioning capabilities so that I don't have to rewrite them.

Answer 1

The easiest thing to solve is adding the tooltip right after the DOM is rendered, maquette provides the afterCreate callback to do this (you will get the element as its first argument).

More challenging is when to destroy a tooltip. Maquette deliberately does not tell you when DOM nodes are removed, that would hurt performance too much.

Maquette lets you in control of managing your components lifecycle, so a good pattern would be the following:

let createPage = () => {
  let tooltips = [];

  let initializeTooltip = (element) => {
    tooltips.push(createTooltip(element));
  }

  return {

    renderMaquette: () => {
      return h('div.page', [
        'some content', 
        h('div.with.tooltip', {afterCreate: initializeTooltip})
      ])
    },

    destroy: () => {
      tooltips.forEach((tooltip) => {tooltip.destroy()});
    }

  }
}

When you use this pattern, your components need to propagate the destroy() invocations to subcomponents and eventually clean up the tooltips used.

We use the same pattern to destroy CKEditor instances.