Merge pull request #8 from GavinJoyce/gj/api-docs

`{{did-insert}}`, `{{did-update}}` and `{{will-destroy}}` API docs

Author: rwjblue

addon/modifiers/did-insert.js

@@ -1,5 +1,49 @@
 import Ember from 'ember';
 
+/**
+  The `{{did-insert}}` element modifier is activated when an element is
+  inserted into the DOM.
+
+  In this example, the `fadeIn` function receives the `div` DOM element as its
+  first argument and is executed after the element is inserted into the DOM.
+
+  ```handlebars
+  <div {{did-insert this.fadeIn}} class="alert">
+    {{yield}}
+  </div>
+  ```
+
+  ```js
+  export default Component.extend({
+    fadeIn(element) {
+      element.classList.add('fade-in');
+    }
+  });
+  ```
+
+  By default, the executed function will be unbound. If you would like to access
+  the component context in your function, use the `action` helper as follows:
+
+  ```handlebars
+  <div {{did-insert (action this.incrementCount)}}>first</div>
+  <div {{did-insert (action this.incrementCount)}}>second</div>
+
+  <p>{{this.count}} elements were rendered</p>
+  ```
+
+    ```js
+  export default Component.extend({
+    @tracked count = 0;
+
+    incrementCount() {
+      this.count++;
+    }
+  });
+  ```
+
+  @method did-insert
+  @public
+*/
 export default Ember._setModifierManager(
   () => ({
     createModifier() {},

addon/modifiers/did-update.js

@@ -1,5 +1,53 @@
 import Ember from 'ember';
 
+/**
+  The `{{did-update}}` element modifier is activated when any of its arguments
+  are updated. It does not run on initial render.
+
+  In this example, the `resize` function receives the `textarea` DOM element as its
+  first argument and is executed anytime the `@text` argument changes.
+
+  ```handlebars
+  <textarea {{did-update this.resize @text}} readonly style="padding: 0px;">
+    {{@text}}
+  </textarea>
+  ```
+
+  ```js
+  export default Component.extend({
+    resize(element) {
+      element.style.height = `${element.scrollHeight}px`;
+    }
+  });
+  ```
+
+  In addition to the `element`, both named and positional arguments are passed to the
+  executed function:
+
+  ```handlebars
+  <div {{did-update this.logArguments @first @second third=@third}} />
+  ```
+
+  ```js
+  export default Component.extend({
+    logArguments(element, [first, second], { third }) {
+      console.log('element', element);
+      console.log('positional args', first, second);
+      console.log('names args', third);
+    }
+  });
+  ```
+
+  By default, the executed function will be unbound. If you would like to access
+  the component context in your function, use the `action` helper as follows:
+
+  ```handlebars
+  <div {{did-update (action this.someFunction) @someArg} />
+  ```
+
+  @method did-update
+  @public
+*/
 export default Ember._setModifierManager(
   () => ({
     createModifier() {

addon/modifiers/will-destroy.js

@@ -1,5 +1,35 @@
 import Ember from 'ember';
 
+/**
+  The `{{will-destroy}}` element modifier is activated immediately before the element
+  is removed from the DOM.
+
+  ```handlebars
+  <div {{will-destroy this.teardownPlugin}}>
+    {{yield}}
+  </div>
+  ```
+
+  ```js
+  export default Component.extend({
+    teardownPlugin(element) {
+      // teardown logic here
+    }
+  });
+  ```
+
+  By default, the executed function will be unbound. If you would like to access
+  the component context in your function, use the `action` helper as follows:
+
+    ```handlebars
+  <div {{will-destroy (action this.teardownPlugin)}}>
+    {{yield}}
+  </div>
+  ```
+
+  @method will-destroy
+  @public
+*/
 export default Ember._setModifierManager(
   () => ({
     createModifier() {