vue-tidy

A tiny Vue.js mix-in for event handler management and memory leaks prevention. It also provides a simple API for easier debugging and diagnostics.

Processing DOM events or similar in OO code implies correct set-up and releasing of event handlers. Also, cross-referenced class instances and other objects need special care to prevent the dreaded memory leaks.

Installation

npm install -S vue-tidyor yarn add vue-tidy

Usage

<template>
  <div :id="unique"></div>
</template>
<script>
import tidyOwner from 'vue-tidy'

export default {
  data: () => ({ 
    unique: undefined   //  Can be used as element ID if we have many instances.
  }),

  name: 'Funny',

  mixins: [tidyOwner],

  created() {
    this.debugOn(true)  //  In DEV environment, this enables following .debug() calls.
    this.unique = this.ownTag
    //  Everything we do next, will be auto-undone before we vanish.
    this.own.fiend1 = reference_to_some_other_thing
    this.ownOn('resize', 'onResize', window)
    this.debugOn(true)  //  If we need this...
  },

  methods: {
    onResize() { 
      this.debug('onResize')      //  --> 'Funny#1 onResize +0ms' on developer console.
      /* do something smarter */ 
    }
  }
}
</script>

API

The mix-in is the default export.

The mix-in adds the following features to a vue instance:

Lifecycle hooks

• created - sets up the machinery;
• beforeDestroy - calls dispose() method (see below).

Instance methods

• debug(...)outputs coloured and timestamped console messages, when enabled;.
• debugOn([*]): *enables or disables debug method and returns this for chaining, if argument supplied; otherwise returns boolean showing if debugging is enabled.
• dispose()frees up all bound resources, called automatically by beforeDestroy hook. It cleans the own container, firing dispose method of every object instance having it. Then it un-registers all handlers set by ownOn method.
• ownOff(event= : string, emitter= : Object) : this un-registers handlers registered for matching (event, emitter) pairs. It is called by dispose(), so in most cases you don't need to call it explicitly.
• ownOn(event : string, handler, emitter, api=) : this registers event handler with emitter object. If emitter API differs from addEventListener/removeEventListener or $on/$off or on/off, then you need explicitly define the API, like ['listenTo', 'ignore']. The handler parameter can be instance method name or a function.

Instance properties

• own: Objecta keyed container for private data, that should be gracefully cleaned up.
• ownClass: stringclass name (read-only).
• ownId: numberglobally unique class instance number(read-only).
• ownTag: stringis set to ownClass+ '#' +ownId (read-only).

Assigning a value to any instance property will throw TypeError.

Overriding dispose() method

To do something special during beforeDestroy hook, you may define ownDispose() method. If defined, this method will run first and if it returns boolean false, the default dispose() will not be called.

Name guess helper

There is a helper function used internally for initializing the ownClass property.

guess(vm, [tryHarder : boolean]) : {atring | undefined}

This function can work without the mix-in as well. It must be imported separately: import guess from 'vue-tidy/guess'