From e645ab78a26381231b1c152c42c2ac7f3a2071e4 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Mon, 1 Feb 2016 15:37:54 +0100 Subject: [PATCH] chore: add support for webpack Closes #5375 --- .npmignore | 2 -- Gruntfile.js | 6 +++--- README.md | 22 +++++++++++++++++++--- karma.conf.js | 1 + src/accordion/index.js | 10 ++++++++++ src/alert/index.js | 8 ++++++++ src/buttons/index.js | 7 +++++++ src/carousel/index.js | 11 +++++++++++ src/collapse/index.js | 7 +++++++ src/dateparser/index.js | 7 +++++++ src/datepicker/index.js | 17 +++++++++++++++++ src/debounce/index.js | 7 +++++++ src/dropdown/index.js | 8 ++++++++ src/isClass/index.js | 7 +++++++ src/modal/index.js | 10 ++++++++++ src/pager/index.js | 9 +++++++++ src/pagination/index.js | 9 +++++++++ src/paging/index.js | 7 +++++++ src/popover/index.js | 11 +++++++++++ src/position/index.js | 7 +++++++ src/progressbar/index.js | 10 ++++++++++ src/rating/index.js | 8 ++++++++ src/stackedMap/index.js | 7 +++++++ src/tabs/index.js | 9 +++++++++ src/timepicker/index.js | 10 ++++++++++ src/tooltip/index.js | 12 ++++++++++++ src/typeahead/index.js | 13 +++++++++++++ 27 files changed, 234 insertions(+), 8 deletions(-) create mode 100644 src/accordion/index.js create mode 100644 src/alert/index.js create mode 100644 src/buttons/index.js create mode 100644 src/carousel/index.js create mode 100644 src/collapse/index.js create mode 100644 src/dateparser/index.js create mode 100644 src/datepicker/index.js create mode 100644 src/debounce/index.js create mode 100644 src/dropdown/index.js create mode 100644 src/isClass/index.js create mode 100644 src/modal/index.js create mode 100644 src/pager/index.js create mode 100644 src/pagination/index.js create mode 100644 src/paging/index.js create mode 100644 src/popover/index.js create mode 100644 src/position/index.js create mode 100644 src/progressbar/index.js create mode 100644 src/rating/index.js create mode 100644 src/stackedMap/index.js create mode 100644 src/tabs/index.js create mode 100644 src/timepicker/index.js create mode 100644 src/tooltip/index.js create mode 100644 src/typeahead/index.js diff --git a/.npmignore b/.npmignore index 58f2fe8a01..925a2cd919 100644 --- a/.npmignore +++ b/.npmignore @@ -19,8 +19,6 @@ results node_modules npm-debug.log -template/**/*.js - .git docs misc diff --git a/Gruntfile.js b/Gruntfile.js index f4ecc787e4..f1fb3c01dd 100644 --- a/Gruntfile.js +++ b/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, diff --git a/README.md b/README.md index 873d3f0e5a..5d96bcf51c 100644 --- a/README.md +++ b/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 diff --git a/karma.conf.js b/karma.conf.js index b53f7d382b..2178a55536 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -27,6 +27,7 @@ module.exports = function(config) { // list of files to exclude exclude: [ + 'src/**/index.js', 'src/**/docs/*' ], diff --git a/src/accordion/index.js b/src/accordion/index.js new file mode 100644 index 0000000000..0209794844 --- /dev/null +++ b/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; diff --git a/src/alert/index.js b/src/alert/index.js new file mode 100644 index 0000000000..f5a50975d1 --- /dev/null +++ b/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; diff --git a/src/buttons/index.js b/src/buttons/index.js new file mode 100644 index 0000000000..181f258adc --- /dev/null +++ b/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; diff --git a/src/carousel/index.js b/src/carousel/index.js new file mode 100644 index 0000000000..03872ffaf4 --- /dev/null +++ b/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; diff --git a/src/collapse/index.js b/src/collapse/index.js new file mode 100644 index 0000000000..b720e842c4 --- /dev/null +++ b/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; diff --git a/src/dateparser/index.js b/src/dateparser/index.js new file mode 100644 index 0000000000..2320dec7d8 --- /dev/null +++ b/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; diff --git a/src/datepicker/index.js b/src/datepicker/index.js new file mode 100644 index 0000000000..3020420699 --- /dev/null +++ b/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; diff --git a/src/debounce/index.js b/src/debounce/index.js new file mode 100644 index 0000000000..a398c57165 --- /dev/null +++ b/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; diff --git a/src/dropdown/index.js b/src/dropdown/index.js new file mode 100644 index 0000000000..6c0c1affe4 --- /dev/null +++ b/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; diff --git a/src/isClass/index.js b/src/isClass/index.js new file mode 100644 index 0000000000..3d7d33860b --- /dev/null +++ b/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; diff --git a/src/modal/index.js b/src/modal/index.js new file mode 100644 index 0000000000..73d393b8a3 --- /dev/null +++ b/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; diff --git a/src/pager/index.js b/src/pager/index.js new file mode 100644 index 0000000000..57cd4e36fc --- /dev/null +++ b/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; diff --git a/src/pagination/index.js b/src/pagination/index.js new file mode 100644 index 0000000000..0262f24388 --- /dev/null +++ b/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; diff --git a/src/paging/index.js b/src/paging/index.js new file mode 100644 index 0000000000..5564c7a750 --- /dev/null +++ b/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; diff --git a/src/popover/index.js b/src/popover/index.js new file mode 100644 index 0000000000..479d6d309b --- /dev/null +++ b/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; diff --git a/src/position/index.js b/src/position/index.js new file mode 100644 index 0000000000..10b8e9e506 --- /dev/null +++ b/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; diff --git a/src/progressbar/index.js b/src/progressbar/index.js new file mode 100644 index 0000000000..f93ca97422 --- /dev/null +++ b/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; diff --git a/src/rating/index.js b/src/rating/index.js new file mode 100644 index 0000000000..8d7aa8751b --- /dev/null +++ b/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; diff --git a/src/stackedMap/index.js b/src/stackedMap/index.js new file mode 100644 index 0000000000..85b9b4a65d --- /dev/null +++ b/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; diff --git a/src/tabs/index.js b/src/tabs/index.js new file mode 100644 index 0000000000..b511806126 --- /dev/null +++ b/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; diff --git a/src/timepicker/index.js b/src/timepicker/index.js new file mode 100644 index 0000000000..14d8b17447 --- /dev/null +++ b/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; diff --git a/src/tooltip/index.js b/src/tooltip/index.js new file mode 100644 index 0000000000..c3d461e5ef --- /dev/null +++ b/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; diff --git a/src/typeahead/index.js b/src/typeahead/index.js new file mode 100644 index 0000000000..a9b889e910 --- /dev/null +++ b/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;