Creating an ember cli component addon for javascript library

Create addon with generator command

ember addon <addon-name>

example:

ember addon ember-cli-holderjs

Add bower dependency

 create blueprint to install dependency

 ember g blueprint <addon-name>

example:

ember g blueprint ember-cli-holderjs

Two files will be created

installing blueprint

  create blueprints/.jshintrc
  create blueprints/ember-cli-holderjs/index.js

Edit blueprints/<addon-name>/index.js

Add afterInstall hook to add javascript library package to bower.json

afterInstall: function(options) {
    return this.addBowerPackageToProject('holderjs', '2.9.0');
  }

Generate component

ember g component <addon-name>

example:

ember g component ember-cli-holderjs

This will create following files

installing component
  create addon/components/ember-cli-holderjs.js
  create addon/templates/components/ember-cli-holderjs.hbs
installing component-test
  create tests/integration/components/ember-cli-holderjs-test.js
installing component-addon
  create app/components/ember-cli-holderjs.js

Edit addon/components/<addon-name> according to your need.

Example:

import Ember from 'ember';
import layout from '../templates/components/ember-cli-holderjs';

export default Ember.Component.extend({
 layout: layout,
 didInsertElement: function() {
   Ember.run.next(function() {
     Holder.run();
   });
 }
});

Edit  addon/templates/components/<addon-name>

Example:

<img data-src={{src_url}} alt='holderjs image' class={{class}} />

update package.json dependencies

"dependencies": {
    "ember-cli-babel": "^5.1.3",
   // Add ember-cli-htmlbars for compiling templates
    "ember-cli-htmlbars": "0.7.9"
  }

Add dummy app

update index.js

/* jshint node: true */

'use strict';


module.exports = {
  name: 'ember-cli-holderjs',


  included: function(app){
    this._super.included(app);
    // Include library js file
    this.app.import(app.bowerDirectory + '/holderjs/holder.min.js');
  }
};

update bower.json, add devDependencies

"devDependencies": {
    "holderjs": "2.9.0" // Javascript library 
  }

update tests/dummy/app/templates/application.hbs

Example:

{{ember-cli-holderjs src_url="holder.js/132x128?text=Upload Photo"}}

Check if addon is working properly

Run server:

ember server

Browse : localhost://4200

Checkout https://github.com/anilmaurya/ember-cli-holderjs for example code