chore: add support for webpack

Closes angular-ui#5375

.npmignore

@@ -19,8 +19,6 @@ results
 node_modules
 npm-debug.log
 
-template/**/*.js
-
 .git
 docs
 misc

Gruntfile.js

@@ -41,7 +41,7 @@ module.exports = function(grunt) {
         tasks: ['html2js', 'karma:watch:run']
       },
       js: {
-        files: ['src/**/*.js'],
+        files: ['src/**/*.js', '!src/**/index.js'],
         tasks: ['karma:watch:run']
       }
     },
@@ -231,7 +231,7 @@ module.exports = function(grunt) {
       name: name,
       moduleName: enquote(`ui.bootstrap.${name}`),
       displayName: ucwords(breakup(name, ' ')),
-      srcFiles: grunt.file.expand(`src/${name}/*.js`),
+      srcFiles: grunt.file.expand([`src/${name}/*.js`, `!src/${name}/index.js`]),
       cssFiles: grunt.file.expand(`src/${name}/*.css`),
       tplFiles: grunt.file.expand(`template/${name}/*.html`),
       tpljsFiles: grunt.file.expand(`template/${name}/*.html.js`),
@@ -263,7 +263,7 @@ module.exports = function(grunt) {
 
   function dependenciesForModule(name) {
     var deps = [];
-    grunt.file.expand(`src/${name}/*.js`)
+    grunt.file.expand([`src/${name}/*.js`, `!src/${name}/index.js`])
     .map(grunt.file.read)
     .forEach(function(contents) {
       //Strategy: find where module is declared,

README.md

@@ -13,6 +13,7 @@
     - [NuGet](#install-with-nuget)
     - [Custom](#custom-build)
     - [Manual](#manual-download)
+- [Webpack](#webpack)
 - [Support](#support)
     - [FAQ](#faq)
     - [Code of Conduct](#code-of-conduct)
@@ -86,14 +87,29 @@ When you are done downloading all the dependencies and project files the only re
 angular.module('myModule', ['ui.bootstrap']);
 ```
 
-If you're a Browserify or Webpack user, you can do:
+# Webpack
+
+To use this project with webpack, follow the [NPM](#install-with-npm) instructions. Now, if you want to use only the accordion, you can do:
+
+```js
+import accordion from 'angular-ui-bootstrap/src/accordion';
+
+angular.module('myModule', [accordion]);
+```
+
+You can import all the pieces you need in the same way:
 
 ```js
-var uibs = require('angular-ui-bootstrap');
+import accordion from 'angular-ui-bootstrap/src/accordion';
+import datepicker from 'angular-ui-bootstrap/src/datepicker';
 
-angular.module('myModule', [uibs]);
+angular.module('myModule', [accordion, datepicker]);
 ```
 
+This will load all the dependencies (if any) and also the templates (if any).
+
+Be sure to have a loader able to process `css` files like `css-loader`.
+
 # Support
 
 ## FAQ

karma.conf.js

@@ -27,6 +27,7 @@ module.exports = function(config) {
 
     // list of files to exclude
     exclude: [
+      'src/**/index.js',
       'src/**/docs/*'
     ],
 

src/accordion/index.js

@@ -0,0 +1,10 @@
+require('../collapse');
+require('../../template/accordion/accordion-group.html.js');
+require('../../template/accordion/accordion.html.js');
+require('./accordion');
+
+var MODULE_NAME = 'ui.bootstrap.module.accordion';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.accordion', 'uib/template/accordion/accordion.html', 'uib/template/accordion/accordion-group.html']);
+
+module.exports = MODULE_NAME;

src/alert/index.js

@@ -0,0 +1,8 @@
+require('../../template/alert/alert.html.js');
+require('./alert');
+
+var MODULE_NAME = 'ui.bootstrap.module.alert';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.alert', 'uib/template/alert/alert.html']);
+
+module.exports = MODULE_NAME;

src/buttons/index.js

@@ -0,0 +1,7 @@
+require('./buttons');
+
+var MODULE_NAME = 'ui.bootstrap.module.buttons';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.buttons']);
+
+module.exports = MODULE_NAME;

src/carousel/index.js

@@ -0,0 +1,11 @@
+require('../../template/carousel/carousel.html.js');
+require('../../template/carousel/slide.html.js');
+require('./carousel');
+
+require('./carousel.css');
+
+var MODULE_NAME = 'ui.bootstrap.module.carousel';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.carousel', 'uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html']);
+
+module.exports = MODULE_NAME;

src/collapse/index.js

@@ -0,0 +1,7 @@
+require('./collapse');
+
+var MODULE_NAME = 'ui.bootstrap.module.collapse';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.collapse']);
+
+module.exports = MODULE_NAME;

src/dateparser/index.js

@@ -0,0 +1,7 @@
+require('./dateparser');
+
+var MODULE_NAME = 'ui.bootstrap.module.dateparser';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.dateparser']);
+
+module.exports = MODULE_NAME;

src/datepicker/index.js

@@ -0,0 +1,17 @@
+require('../dateparser');
+require('../isClass');
+require('../position');
+require('../../template/datepicker/datepicker.html.js');
+require('../../template/datepicker/day.html.js');
+require('../../template/datepicker/month.html.js');
+require('../../template/datepicker/year.html.js');
+require('../../template/datepicker/popup.html.js');
+require('./datepicker');
+
+require('./datepicker.css');
+
+var MODULE_NAME = 'ui.bootstrap.module.datepicker';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.datepicker', 'uib/template/datepicker/datepicker.html', 'uib/template/datepicker/day.html', 'uib/template/datepicker/month.html', 'uib/template/datepicker/year.html', 'uib/template/datepicker/popup.html']);
+
+module.exports = MODULE_NAME;

src/debounce/index.js

@@ -0,0 +1,7 @@
+require('./debounce');
+
+var MODULE_NAME = 'ui.bootstrap.module.debounce';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.debounce']);
+
+module.exports = MODULE_NAME;

src/dropdown/index.js

@@ -0,0 +1,8 @@
+require('../position');
+require('./dropdown');
+
+var MODULE_NAME = 'ui.bootstrap.module.dropdown';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.dropdown']);
+
+module.exports = MODULE_NAME;

src/isClass/index.js

@@ -0,0 +1,7 @@
+require('./isClass');
+
+var MODULE_NAME = 'ui.bootstrap.module.isClass';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.isClass']);
+
+module.exports = MODULE_NAME;

src/modal/index.js

@@ -0,0 +1,10 @@
+require('../stackedMap');
+require('../../template/modal/backdrop.html.js');
+require('../../template/modal/window.html.js');
+require('./modal');
+
+var MODULE_NAME = 'ui.bootstrap.module.modal';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.modal', 'uib/template/modal/backdrop.html', 'uib/template/modal/window.html']);
+
+module.exports = MODULE_NAME;

src/pager/index.js

@@ -0,0 +1,9 @@
+require('../paging');
+require('../../template/pager/pager.html.js');
+require('./pager');
+
+var MODULE_NAME = 'ui.bootstrap.module.pager';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.pager', 'uib/template/pager/pager.html']);
+
+module.exports = MODULE_NAME;

src/pagination/index.js

@@ -0,0 +1,9 @@
+require('../paging');
+require('../../template/pagination/pagination.html.js');
+require('./pagination');
+
+var MODULE_NAME = 'ui.bootstrap.module.pagination';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.pagination', 'uib/template/pagination/pagination.html']);
+
+module.exports = MODULE_NAME;

src/paging/index.js

@@ -0,0 +1,7 @@
+require('./paging');
+
+var MODULE_NAME = 'ui.bootstrap.module.paging';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.paging']);
+
+module.exports = MODULE_NAME;

src/popover/index.js

@@ -0,0 +1,11 @@
+require('../tooltip');
+require('../../template/popover/popover.html.js');
+require('../../template/popover/popover-html.html.js');
+require('../../template/popover/popover-template.html.js');
+require('./popover');
+
+var MODULE_NAME = 'ui.bootstrap.module.popover';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.popover', 'uib/template/popover/popover.html', 'uib/template/popover/popover-html.html', 'uib/template/popover/popover-template.html']);
+
+module.exports = MODULE_NAME;

src/position/index.js

@@ -0,0 +1,7 @@
+require('./position');
+
+var MODULE_NAME = 'ui.bootstrap.module.position';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.position']);
+
+module.exports = MODULE_NAME;

src/progressbar/index.js

@@ -0,0 +1,10 @@
+require('../../template/progressbar/progressbar.html.js');
+require('../../template/progressbar/progress.html.js');
+require('../../template/progressbar/bar.html.js');
+require('./progressbar');
+
+var MODULE_NAME = 'ui.bootstrap.module.progressbar';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.progressbar', 'uib/template/progressbar/progressbar.html', 'uib/template/progressbar/progress.html', 'uib/template/progressbar/bar.html']);
+
+module.exports = MODULE_NAME;

src/rating/index.js

@@ -0,0 +1,8 @@
+require('../../template/rating/rating.html.js');
+require('./rating');
+
+var MODULE_NAME = 'ui.bootstrap.module.rating';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.rating', 'uib/template/rating/rating.html']);
+
+module.exports = MODULE_NAME;

src/stackedMap/index.js

@@ -0,0 +1,7 @@
+require('./stackedMap');
+
+var MODULE_NAME = 'ui.bootstrap.module.stackedMap';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.stackedMap']);
+
+module.exports = MODULE_NAME;

src/tabs/index.js

@@ -0,0 +1,9 @@
+require('../../template/tabs/tab.html.js');
+require('../../template/tabs/tabset.html.js');
+require('./tabs');
+
+var MODULE_NAME = 'ui.bootstrap.module.tabs';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.tabs', 'uib/template/tabs/tab.html', 'uib/template/tabs/tabset.html']);
+
+module.exports = MODULE_NAME;

src/timepicker/index.js

@@ -0,0 +1,10 @@
+require('../../template/timepicker/timepicker.html.js');
+require('./timepicker');
+
+require('./timepicker.css');
+
+var MODULE_NAME = 'ui.bootstrap.module.timepicker';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.timepicker', 'uib/template/timepicker/timepicker.html']);
+
+module.exports = MODULE_NAME;

src/tooltip/index.js

@@ -0,0 +1,12 @@
+require('../position');
+require('../stackedMap');
+require('../../template/tooltip/tooltip-popup.html.js');
+require('../../template/tooltip/tooltip-html-popup.html.js');
+require('../../template/tooltip/tooltip-template-popup.html.js');
+require('./tooltip');
+
+var MODULE_NAME = 'ui.bootstrap.module.tooltip';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.tooltip', 'uib/template/tooltip/tooltip-popup.html', 'uib/template/tooltip/tooltip-html-popup.html', 'uib/template/tooltip/tooltip-template-popup.html']);
+
+module.exports = MODULE_NAME;

src/typeahead/index.js

@@ -0,0 +1,13 @@
+require('../debounce');
+require('../position');
+require('../../template/typeahead/typeahead-match.html.js');
+require('../../template/typeahead/typeahead-popup.html.js');
+require('./typeahead');
+
+require('./typeahead.css');
+
+var MODULE_NAME = 'ui.bootstrap.module.typeahead';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.typeahead', 'uib/template/typeahead/typeahead-match.html', 'uib/template/typeahead/typeahead-popup.html']);
+
+module.exports = MODULE_NAME;