When integrating with 3rd party libraries, AppRun components create the 3rd party classes in the AppRun lifecycle function, the rendered function.

import app, { Component } from 'apprun';
import Test from './TestClass'

export default class extends Component {
  state = {}
  view = () => <div/>
  update = {}
  rendered = ()=> new Test(document.querySelector('input'))
}

Sometimes the 3rd party creates objects in the window object,in the DOM element or in the class itself. We can mimic the scenarios using the _TestClass below, which creates objects from the Leak class.

class Leak { }
export default class TestClass {

  _leak: Leak;

  constructor(el: HTMLInputElement) {
    window['_leak'] = new Leak();
    el['_leak'] = new Leak();
    this._leak = new Leak();
    el.addEventListener('input', _ => {
      console.log(el.value);
    });
  }

  destroy() {
    this._leak = null;
    window['_leak'] = null;
    console.log('TestClass.destroy');
  }
}

You can see the _leak object in the Chrome Developer Tools on the Home page.

When switch from the Home page to the About page, the _leak object stays in the window object.

If the 3rd party class provides a function to clean up the resource like the _destroy _function in the TestClass, we can use the AppRun lifecycle function unload to call the function.

export default class extends Component {

  test: Test;

  /* ... ... */

  rendered = () => {
    const input = document.querySelector('input')
    this.test = new Test(input);
  }

  unload = () => {
    this.test.destroy();
    this.test = null;
  }
}

Then, the _leak objects are cleared.

• Use npm start to start the dev server
• Use npm test to run unit tests
• Use npm run build to build for production

This is an application built with AppRun.