Crearing JavaScript Package

To add bower or npm package to widgets, this package should be added to application bower.json, and then simple PHP class defining this package need to be created.

Creating bower loading class

To create bower package loading class, it should extend from BowerPackage class. The only required method to implement is getName(), however this will not add any files yet.

To add CSS or JavaScript files from package, this can be done by using addCss() and addJs() respectively. This should be done in class constructor to ensure that packages are loaded when creating instance of this class. Note that parent constructor must be called too. Both methods accept path relative to package root.

Example with D3Package class:

/**
     * Load d3 main JavaScript file
     */
private function init()
{
    if(YII_DEBUG)
    {
        $this->addJs('d3.js');
    }
    else
    {
        $this->addJs('d3.min.js');
    }
}

The init() method is called in class constructor, and it adds d3 main file.

The other required method is getName():

/**
     * Get package name
     * @return string
     */
public function getName()
{
    return 'd3';
}

Which simply return bower package name.