From 7261ff45f4fe92dc1b3bf5e5ffceb4c2744330a7 Mon Sep 17 00:00:00 2001 From: christianacca Date: Sat, 30 Jul 2016 11:24:20 +0100 Subject: [PATCH] feat(ng-table.js): support the CommonJS module format ng-table.js is now output in UMD format and thus supports the following module formats: * global script tag * AMD (eg RequireJS) * CommonJS BREAKING CHANGE: 1) The AMD (RequireJS) module returned by ng-table.js is now an object that references the angular module. Previously, the module returned *was* the angular module. Note: this will only affect apps that are using RequireJS to load ng-table.js. Those apps that are loading ng-table.js as a script tag will be unaffected. 2) Replaced LESS with SASS This will only affect the minority of apps that are using the ng-table.less file in the dist folder. Those apps that are using the ng-table.css will be unaffected. --- .gitignore | 2 + .travis.yml | 2 +- circle.yml | 2 +- index.js | 41 +++++ package.json | 21 ++- src/scripts/ngTable.directive.js | 6 +- src/scripts/ngTableColumn.js | 7 +- .../ngTableColumnsBinding.directive.js | 7 +- src/scripts/ngTableController.js | 8 +- src/scripts/ngTableDefaultGetData.js | 8 +- src/scripts/ngTableDefaults.js | 6 +- src/scripts/ngTableDynamic.directive.js | 8 +- src/scripts/ngTableEventsChannel.js | 7 +- src/scripts/ngTableFilterConfig.js | 7 +- src/scripts/ngTableFilterRow.directive.js | 9 +- src/scripts/ngTableFilterRowController.js | 7 +- src/scripts/ngTableGroupRow.directive.js | 9 +- src/scripts/ngTableGroupRowController.js | 8 +- src/scripts/ngTablePagination.directive.js | 8 +- src/scripts/ngTableParams.js | 13 +- .../ngTableSelectFilterDs.directive.js | 9 +- src/scripts/ngTableSorterRow.directive.js | 9 +- src/scripts/ngTableSorterRowController.js | 7 +- src/styles/{ng-table.less => ng-table.scss} | 14 +- webpack.config.js | 20 +++ webpack/libParts.js | 167 ++++++++++++++++++ webpack/multiConfig.js | 18 ++ 27 files changed, 356 insertions(+), 74 deletions(-) create mode 100644 index.js rename src/styles/{ng-table.less => ng-table.scss} (94%) create mode 100644 webpack.config.js create mode 100644 webpack/libParts.js create mode 100644 webpack/multiConfig.js diff --git a/.gitignore b/.gitignore index 74c84dd1..27c024e6 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ out typings npm-debug.log test/*.js +# redundant webpack build artifacts produced by ExtractTextPlugin +dist/styles.* diff --git a/.travis.yml b/.travis.yml index 3a8093f0..6626f68f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ before_install: install: - npm prune && npm install - npm run setup - - grunt + - npm run build script: - npm test diff --git a/circle.yml b/circle.yml index d288b002..31726e19 100644 --- a/circle.yml +++ b/circle.yml @@ -9,7 +9,7 @@ dependencies: - npm install -g karma-cli - npm prune && npm install - npm run setup - - grunt + - npm run build cache_directories: - node_modules - bower_components diff --git a/index.js b/index.js new file mode 100644 index 00000000..ae1f0484 --- /dev/null +++ b/index.js @@ -0,0 +1,41 @@ +import angular from 'angular'; +import { ngTable } from './src/scripts/ngTable.directive'; +import { ngTableColumn } from './src/scripts/ngTableColumn'; +import { ngTableColumnsBinding } from './src/scripts/ngTableColumnsBinding.directive'; +import { ngTableController } from './src/scripts/ngTableController'; +import { ngTableDefaultGetDataProvider } from './src/scripts/ngTableDefaultGetData'; +import { ngTableDefaults } from './src/scripts/ngTableDefaults'; +import { ngTableDynamic } from './src/scripts/ngTableDynamic.directive'; +import { ngTableEventsChannel } from './src/scripts/ngTableEventsChannel'; +import { ngTableFilterConfigProvider } from './src/scripts/ngTableFilterConfig'; +import { ngTableFilterRow } from './src/scripts/ngTableFilterRow.directive'; +import { ngTableFilterRowController } from './src/scripts/ngTableFilterRowController'; +import { ngTableGroupRow } from './src/scripts/ngTableGroupRow.directive'; +import { ngTableGroupRowController } from './src/scripts/ngTableGroupRowController'; +import { ngTablePagination } from './src/scripts/ngTablePagination.directive'; +import { ngTableParamsFactory } from './src/scripts/ngTableParams'; +import { ngTableSelectFilterDs } from './src/scripts/ngTableSelectFilterDs.directive'; +import { ngTableSorterRow } from './src/scripts/ngTableSorterRow.directive'; +import { ngTableSorterRowController } from './src/scripts/ngTableSorterRowController'; + +var module = angular.module('ngTable', []) + .directive('ngTable', ngTable) + .factory('ngTableColumn', ngTableColumn) + .directive('ngTableColumnsBinding', ngTableColumnsBinding) + .controller('ngTableController', ngTableController) + .provider('ngTableDefaultGetData', ngTableDefaultGetDataProvider) + .value('ngTableDefaults',ngTableDefaults) + .directive('ngTableDynamic', ngTableDynamic) + .factory('ngTableEventsChannel', ngTableEventsChannel) + .provider('ngTableFilterConfig', ngTableFilterConfigProvider) + .directive('ngTableFilterRow', ngTableFilterRow) + .controller('ngTableFilterRowController', ngTableFilterRowController) + .directive('ngTableGroupRow', ngTableGroupRow) + .controller('ngTableGroupRowController', ngTableGroupRowController) + .directive('ngTablePagination', ngTablePagination) + .factory('NgTableParams', ngTableParamsFactory) + .directive('ngTableSelectFilterDs', ngTableSelectFilterDs) + .directive('ngTableSorterRow', ngTableSorterRow) + .controller('ngTableSorterRowController', ngTableSorterRowController); + +export { module as default }; \ No newline at end of file diff --git a/package.json b/package.json index 77f2fcfd..53a419ec 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,10 @@ }, "main": "dist/ng-table.js", "devDependencies": { + "angular": "^1.5.8", "coveralls": "~2.11.0", + "css-loader": "^0.23.1", + "extract-text-webpack-plugin": "^2.0.0-beta.3", "grunt": "~0.4.2", "grunt-contrib-clean": "~0.4.0", "grunt-contrib-concat": "~0.3.0", @@ -20,6 +23,7 @@ "grunt-contrib-uglify": "0.8.x", "grunt-contrib-watch": "~0.6.x", "grunt-hustler": "0.11.2", + "html-loader": "^0.4.3", "jasmine-core": "^2.3.4", "karma": "0.13.22", "karma-chrome-launcher": "1.0.1", @@ -30,16 +34,29 @@ "karma-phantomjs-launcher": "1.0.0", "load-grunt-tasks": "~0.2.0", "lodash": "~3.7.0", + "ngtemplate-loader": "github:wearymonkey/ngtemplate-loader#63e3461d8b1298de913e3528766068260915ae1f", + "node-sass": "^3.8.0", "phantomjs-prebuilt": "2.1.7", + "sass-loader": "^4.0.0", + "style-loader": "^0.13.1", "typescript": "1.8.10", - "typings": "^1.2.0" + "typings": "^1.2.0", + "webpack": "^2.1.0-beta.20", + "webpack-dev-server": "^2.1.0-beta.0", + "webpack-merge": "^0.14.1" }, "scripts": { + "build": "webpack --env.debug", + "build:prod": "webpack --env.prod", + "build:full": "webpack --env.prod --env.debug", "setup": "bower prune && bower install && npm run typings", "test": "npm run tsc && karma start --single-run --no-auto-watch", "tsc": "tsc", "tsc:w": "tsc -w", - "typings": "typings install" + "typings": "typings install", + "watch:debug": "webpack --watch --env.debug", + "watch": "webpack --watch", + "webpack": "webpack" }, "dependencies": {}, "peerDependencies": { diff --git a/src/scripts/ngTable.directive.js b/src/scripts/ngTable.directive.js index c138ca1b..7afc73d9 100644 --- a/src/scripts/ngTable.directive.js +++ b/src/scripts/ngTable.directive.js @@ -5,7 +5,7 @@ * @url https://github.com/esvit/ng-table/ * @license New BSD License */ - +import angular from 'angular'; /** * @ngdoc directive @@ -16,8 +16,6 @@ * @description * Directive that instantiates {@link ngTableController ngTableController}. */ -angular.module('ngTable').directive('ngTable', ngTable); - ngTable.$inject = ['$q', '$parse']; function ngTable($q, $parse) { @@ -129,3 +127,5 @@ function ngTable($q, $parse) { } } } + +export { ngTable }; \ No newline at end of file diff --git a/src/scripts/ngTableColumn.js b/src/scripts/ngTableColumn.js index 7b5fb10e..1a547695 100644 --- a/src/scripts/ngTableColumn.js +++ b/src/scripts/ngTableColumn.js @@ -6,6 +6,7 @@ * @license New BSD License */ +import angular from 'angular'; /** * @ngdoc service @@ -14,8 +15,6 @@ * @description * Service to construct a $column definition used by {@link ngTable ngTable} directive */ -angular.module('ngTable').factory('ngTableColumn', ngTableColumn); - ngTableColumn.$inject = []; function ngTableColumn() { @@ -121,4 +120,6 @@ function ngTableColumn() { function isScopeLike(object){ return object != null && angular.isFunction(object.$new); } -} \ No newline at end of file +} + +export { ngTableColumn }; \ No newline at end of file diff --git a/src/scripts/ngTableColumnsBinding.directive.js b/src/scripts/ngTableColumnsBinding.directive.js index 930948d3..4979c4ac 100644 --- a/src/scripts/ngTableColumnsBinding.directive.js +++ b/src/scripts/ngTableColumnsBinding.directive.js @@ -6,9 +6,6 @@ * @license New BSD License */ -angular.module('ngTable') - .directive('ngTableColumnsBinding', ngTableColumnsBinding); - ngTableColumnsBinding.$inject = ["$parse"]; /** @@ -36,4 +33,6 @@ function ngTableColumnsBinding($parse){ }); } } -} \ No newline at end of file +} + +export { ngTableColumnsBinding }; \ No newline at end of file diff --git a/src/scripts/ngTableController.js b/src/scripts/ngTableController.js index 54aab41c..206587f4 100644 --- a/src/scripts/ngTableController.js +++ b/src/scripts/ngTableController.js @@ -6,6 +6,8 @@ * @license New BSD License */ +import angular from 'angular'; + /** * @ngdoc object * @name ngTableController @@ -13,8 +15,6 @@ * @description * Each {@link ngTable ngTable} directive creates an instance of `ngTableController` */ -angular.module('ngTable').controller('ngTableController', ngTableController); - ngTableController.$inject = [ '$scope', 'NgTableParams', '$timeout', '$parse', '$compile', '$attrs', '$element', 'ngTableColumn', 'ngTableEventsChannel' ]; @@ -270,4 +270,6 @@ function ngTableController($scope, NgTableParams, $timeout, $parse, $compile, $a } commonInit(); -} \ No newline at end of file +} + +export { ngTableController }; \ No newline at end of file diff --git a/src/scripts/ngTableDefaultGetData.js b/src/scripts/ngTableDefaultGetData.js index f6753a67..623aecde 100644 --- a/src/scripts/ngTableDefaultGetData.js +++ b/src/scripts/ngTableDefaultGetData.js @@ -6,9 +6,7 @@ * @license New BSD License */ - -angular.module('ngTable') - .provider('ngTableDefaultGetData', ngTableDefaultGetDataProvider); +import angular from 'angular'; ngTableDefaultGetDataProvider.$inject = []; @@ -127,4 +125,6 @@ function ngTableDefaultGetDataProvider(){ return ret; } } -} \ No newline at end of file +} + +export { ngTableDefaultGetDataProvider }; \ No newline at end of file diff --git a/src/scripts/ngTableDefaults.js b/src/scripts/ngTableDefaults.js index f30413e7..05c16843 100644 --- a/src/scripts/ngTableDefaults.js +++ b/src/scripts/ngTableDefaults.js @@ -12,7 +12,9 @@ * @module ngTable * @description Default Parameters for ngTable */ -angular.module('ngTable').value('ngTableDefaults',{ +var ngTableDefaults = { params: {}, settings: {} -}); \ No newline at end of file +}; + +export { ngTableDefaults }; \ No newline at end of file diff --git a/src/scripts/ngTableDynamic.directive.js b/src/scripts/ngTableDynamic.directive.js index 18f3329d..7bc11cda 100644 --- a/src/scripts/ngTableDynamic.directive.js +++ b/src/scripts/ngTableDynamic.directive.js @@ -6,6 +6,8 @@ * @license New BSD License */ +import angular from 'angular'; + /** * @ngdoc directive * @name ngTableDynamic @@ -16,8 +18,6 @@ * A dynamic version of the {@link ngTable ngTable} directive that accepts a dynamic list of columns * definitions to render */ -angular.module('ngTable').directive('ngTableDynamic', ngTableDynamic); - ngTableDynamic.$inject = []; function ngTableDynamic(){ @@ -70,4 +70,6 @@ function ngTableDynamic(){ }; } }; -} \ No newline at end of file +} + +export { ngTableDynamic }; \ No newline at end of file diff --git a/src/scripts/ngTableEventsChannel.js b/src/scripts/ngTableEventsChannel.js index 1803bdab..b216c430 100644 --- a/src/scripts/ngTableEventsChannel.js +++ b/src/scripts/ngTableEventsChannel.js @@ -6,8 +6,7 @@ * @license New BSD License */ -angular.module('ngTable') - .factory('ngTableEventsChannel', ngTableEventsChannel); +import angular from 'angular'; ngTableEventsChannel.$inject = ['$rootScope']; @@ -90,4 +89,6 @@ function ngTableEventsChannel($rootScope){ function rest(array, n) { return Array.prototype.slice.call(array, n == null ? 1 : n); } -} \ No newline at end of file +} + +export { ngTableEventsChannel }; \ No newline at end of file diff --git a/src/scripts/ngTableFilterConfig.js b/src/scripts/ngTableFilterConfig.js index 894e0b5b..6ab7e0b2 100644 --- a/src/scripts/ngTableFilterConfig.js +++ b/src/scripts/ngTableFilterConfig.js @@ -6,8 +6,7 @@ * @license New BSD License */ -angular.module('ngTable') - .provider('ngTableFilterConfig', ngTableFilterConfigProvider); +import angular from 'angular'; ngTableFilterConfigProvider.$inject = []; @@ -80,4 +79,6 @@ function ngTableFilterConfigProvider(){ return config.aliasUrls[aliasName] || config.defaultBaseUrl + aliasName + config.defaultExt; } } -} \ No newline at end of file +} + +export { ngTableFilterConfigProvider }; \ No newline at end of file diff --git a/src/scripts/ngTableFilterRow.directive.js b/src/scripts/ngTableFilterRow.directive.js index b824928e..b3cfb5aa 100644 --- a/src/scripts/ngTableFilterRow.directive.js +++ b/src/scripts/ngTableFilterRow.directive.js @@ -6,8 +6,7 @@ * @license New BSD License */ -angular.module('ngTable') - .directive('ngTableFilterRow', ngTableFilterRow); +import templateUrl from '../ng-table/filterRow.html'; ngTableFilterRow.$inject = []; @@ -15,9 +14,11 @@ function ngTableFilterRow(){ var directive = { restrict: 'E', replace: true, - templateUrl: 'ng-table/filterRow.html', + templateUrl: templateUrl, scope: true, controller: 'ngTableFilterRowController' }; return directive; -} \ No newline at end of file +} + +export { ngTableFilterRow }; \ No newline at end of file diff --git a/src/scripts/ngTableFilterRowController.js b/src/scripts/ngTableFilterRowController.js index 4d6ed64a..ae85d60d 100644 --- a/src/scripts/ngTableFilterRowController.js +++ b/src/scripts/ngTableFilterRowController.js @@ -6,8 +6,7 @@ * @license New BSD License */ -angular.module('ngTable') - .controller('ngTableFilterRowController', ngTableFilterRowController); +import angular from 'angular'; ngTableFilterRowController.$inject = ['$scope', 'ngTableFilterConfig']; @@ -32,4 +31,6 @@ function ngTableFilterRowController($scope, ngTableFilterConfig){ return ''; } }; -} \ No newline at end of file +} + +export { ngTableFilterRowController }; \ No newline at end of file diff --git a/src/scripts/ngTableGroupRow.directive.js b/src/scripts/ngTableGroupRow.directive.js index ba42ba07..a49f8cb8 100644 --- a/src/scripts/ngTableGroupRow.directive.js +++ b/src/scripts/ngTableGroupRow.directive.js @@ -6,8 +6,7 @@ * @license New BSD License */ -angular.module('ngTable') - .directive('ngTableGroupRow', ngTableGroupRow); +import templateUrl from '../ng-table/groupRow.html'; ngTableGroupRow.$inject = []; @@ -15,10 +14,12 @@ function ngTableGroupRow(){ var directive = { restrict: 'E', replace: true, - templateUrl: 'ng-table/groupRow.html', + templateUrl: templateUrl, scope: true, controller: 'ngTableGroupRowController', controllerAs: 'dctrl' }; return directive; -} \ No newline at end of file +} + +export { ngTableGroupRow }; \ No newline at end of file diff --git a/src/scripts/ngTableGroupRowController.js b/src/scripts/ngTableGroupRowController.js index d23ecb20..f1f3e8aa 100644 --- a/src/scripts/ngTableGroupRowController.js +++ b/src/scripts/ngTableGroupRowController.js @@ -6,8 +6,8 @@ * @license New BSD License */ -angular.module('ngTable') - .controller('ngTableGroupRowController', ngTableGroupRowController); +import angular from 'angular'; + ngTableGroupRowController.$inject = ['$scope']; @@ -110,4 +110,6 @@ function ngTableGroupRowController($scope){ $scope.params.settings().groupOptions.isExpanded = !$scope.params.settings().groupOptions.isExpanded; return $scope.params.reload(); } -} \ No newline at end of file +} + +export { ngTableGroupRowController }; \ No newline at end of file diff --git a/src/scripts/ngTablePagination.directive.js b/src/scripts/ngTablePagination.directive.js index 1c6843b6..911f03d2 100644 --- a/src/scripts/ngTablePagination.directive.js +++ b/src/scripts/ngTablePagination.directive.js @@ -6,14 +6,14 @@ * @license New BSD License */ +import angular from 'angular'; + /** * @ngdoc directive * @name ngTablePagination * @module ngTable * @restrict A */ -angular.module('ngTable').directive('ngTablePagination', ngTablePagination); - ngTablePagination.$inject = ['$compile', 'ngTableEventsChannel']; function ngTablePagination($compile, ngTableEventsChannel) { @@ -46,4 +46,6 @@ function ngTablePagination($compile, ngTableEventsChannel) { }); } }; -} \ No newline at end of file +} + +export { ngTablePagination }; \ No newline at end of file diff --git a/src/scripts/ngTableParams.js b/src/scripts/ngTableParams.js index b0d26230..82840c5c 100644 --- a/src/scripts/ngTableParams.js +++ b/src/scripts/ngTableParams.js @@ -6,18 +6,17 @@ * @license New BSD License */ +import angular from 'angular'; + /** * @ngdoc service * @name NgTableParams * @module ngTable * @description Parameters manager for ngTable */ +ngTableParamsFactory.$inject = ['$q', '$log', '$filter', 'ngTableDefaults', 'ngTableDefaultGetData', 'ngTableEventsChannel']; -angular.module('ngTable').factory('NgTableParams', factory); - -factory.$inject = ['$q', '$log', '$filter', 'ngTableDefaults', 'ngTableDefaultGetData', 'ngTableEventsChannel']; - -function factory($q, $log, $filter, ngTableDefaults, ngTableDefaultGetData, ngTableEventsChannel) { +function ngTableParamsFactory($q, $log, $filter, ngTableDefaults, ngTableDefaultGetData, ngTableEventsChannel) { return NgTableParams; @@ -775,4 +774,6 @@ function factory($q, $log, $filter, ngTableDefaults, ngTableDefaultGetData, ngTa return this; } -} \ No newline at end of file +} + +export { ngTableParamsFactory }; \ No newline at end of file diff --git a/src/scripts/ngTableSelectFilterDs.directive.js b/src/scripts/ngTableSelectFilterDs.directive.js index d6233c34..8df11b8e 100644 --- a/src/scripts/ngTableSelectFilterDs.directive.js +++ b/src/scripts/ngTableSelectFilterDs.directive.js @@ -6,6 +6,8 @@ * @license New BSD License */ +import angular from 'angular'; + /** * @ngdoc directive * @name ngTableSelectFilterDs @@ -20,9 +22,6 @@ * * This directive is is focused on providing a datasource to an `ngOptions` directive */ -angular.module('ngTable') - .directive('ngTableSelectFilterDs', ngTableSelectFilterDs); - ngTableSelectFilterDs.$inject = []; function ngTableSelectFilterDs(){ @@ -75,4 +74,6 @@ function ngTableSelectFilterDsController($scope, $parse, $attrs, $q){ var data = angular.isFunction($column.data) ? $column.data() : $column.data; return $q.when(data); } -} \ No newline at end of file +} + +export { ngTableSelectFilterDs }; \ No newline at end of file diff --git a/src/scripts/ngTableSorterRow.directive.js b/src/scripts/ngTableSorterRow.directive.js index 44a42944..a7596a00 100644 --- a/src/scripts/ngTableSorterRow.directive.js +++ b/src/scripts/ngTableSorterRow.directive.js @@ -6,8 +6,7 @@ * @license New BSD License */ -angular.module('ngTable') - .directive('ngTableSorterRow', ngTableSorterRow); +import templateUrl from '../ng-table/sorterRow.html'; ngTableSorterRow.$inject = []; @@ -15,9 +14,11 @@ function ngTableSorterRow(){ var directive = { restrict: 'E', replace: true, - templateUrl: 'ng-table/sorterRow.html', + templateUrl: templateUrl, scope: true, controller: 'ngTableSorterRowController' }; return directive; -} \ No newline at end of file +} + +export { ngTableSorterRow }; \ No newline at end of file diff --git a/src/scripts/ngTableSorterRowController.js b/src/scripts/ngTableSorterRowController.js index 3326aaa3..6e960a79 100644 --- a/src/scripts/ngTableSorterRowController.js +++ b/src/scripts/ngTableSorterRowController.js @@ -6,9 +6,6 @@ * @license New BSD License */ -angular.module('ngTable') - .controller('ngTableSorterRowController', ngTableSorterRowController); - ngTableSorterRowController.$inject = ['$scope']; function ngTableSorterRowController($scope){ @@ -31,4 +28,6 @@ function ngTableSorterRowController($scope){ sorting: sortingParams }); } -} \ No newline at end of file +} + +export { ngTableSorterRowController }; \ No newline at end of file diff --git a/src/styles/ng-table.less b/src/styles/ng-table.scss similarity index 94% rename from src/styles/ng-table.less rename to src/styles/ng-table.scss index 11839eec..f6cf51c1 100644 --- a/src/styles/ng-table.less +++ b/src/styles/ng-table.scss @@ -1,5 +1,5 @@ -@table-border-color: #999; -@cell-border-color: #eee; +$table-border-color: #999; +$cell-border-color: #eee; .ng-table { th { @@ -107,11 +107,11 @@ @media only screen and (max-width: 800px) { .ng-table-responsive { - border-bottom: 1px solid @table-border-color; + border-bottom: 1px solid $table-border-color; tr { - border-top: 1px solid @table-border-color; - border-left: 1px solid @table-border-color; - border-right: 1px solid @table-border-color; + border-top: 1px solid $table-border-color; + border-left: 1px solid $table-border-color; + border-right: 1px solid $table-border-color; } td:before { position: absolute; @@ -141,7 +141,7 @@ } td { border: none; - border-bottom: 1px solid @cell-border-color; + border-bottom: 1px solid $cell-border-color; position: relative; padding-left: 50%; white-space: normal; diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 00000000..ab3e6253 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,20 @@ +const path = require('path'); +const merge = require('webpack-merge'); +const partsFactory = require('./webpack/libParts'); +const multiConfig = require('./webpack/multiConfig')(partsFactory); + +module.exports = (env = { prod: false, debug: false }) => { + return multiConfig(__dirname, env, createConfig); +} + +function createConfig(env, parts) { + return merge( + parts.asUmdLibrary(), + parts.excludeAngular(), + parts.inlineHtmlTemplates(), + parts.extractSass([ + path.join(__dirname, 'src', 'styles', 'ng-table.scss') + ]), + parts.forEnvironment() + ); +} \ No newline at end of file diff --git a/webpack/libParts.js b/webpack/libParts.js new file mode 100644 index 00000000..705c4456 --- /dev/null +++ b/webpack/libParts.js @@ -0,0 +1,167 @@ +const fs = require('fs'); +const path = require('path'); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const merge = require('webpack-merge'); +const webpack = require('webpack'); + +module.exports = createLibraryParts; + +function createLibraryParts(rootDir, env = {}) { + const pkg = require(path.join(rootDir, 'package')); + const libraryName = pkg.name; + + return { + asUmdLibrary, + extractSass, + excludeAngular, + forEnvironment, + inlineHtmlTemplates + }; + + ///// + + function asUmdLibrary(entryFiles) { + const filename = env.prod ? `[name].min.js` : `[name].js`; + return { + entry: { + [libraryName]: [ + // todo: use an index.js file to require in the html templates + path.join(rootDir, 'src', 'ng-table', 'header.html'), + path.join(rootDir, 'src', 'ng-table', 'pager.html'), + ...getHtmlFilters(), + path.join(rootDir, 'index.js') + ] + }, + // tells webpack not to include in bundle require'd node specific objects (eg path) + target: 'node', + output: { + path: path.join(rootDir, 'dist'), + filename: filename, + library: libraryName, + libraryTarget: 'umd', + umdNamedDefine: false + } + }; + } + + function excludeAngular() { + return { + externals: { + angular: 'angular' + } + } + } + + /** + * Extracts styles into a seperate bundle + */ + function extractSass(files) { + + // note: The way we're setting up webpack here seems a bit of a hack: + // + // Although the setup creates two bundles seperating the js and css as desired, + // it's also producing an extra styles.js file which we're throwing away/ignoring. + // The alternative, more supported way of things, is to leave the css inline + // within js and let the styles plugin add the css at runtime to the html page. + // At the moment keeping with the extracted css as: + // 1. more familar to angular 1 developers (?) + // 2. maintains backwards compatibility with the existing apps that expects + // the css to be delivered to the browser as a seperate file + + const filename = env.prod ? `${libraryName}.min.css` : `${libraryName}.css`; + const extractor = new ExtractTextPlugin(filename); + let loaders; + if (env.debug || env.prod) { + loaders = 'css?sourceMap!sass?sourceMap'; + } else { + loaders = 'css!sass'; + } + return { + entry: { + styles: files + }, + module: { + loaders: [ + { + test: /\.scss$/, + loader: extractor.extract(loaders), + include: files + } + ] + }, + plugins: [ + extractor + ] + }; + } + + function forEnvironment() { + if (env.prod) { + return merge( + { + devtool: 'source-map', + bail: true + }, + prodOptimize() + ); + } else if (env.debug) { + return { + output: { + pathinfo: true + }, + // note: wanted to use eval-source-map to increase build times, but chrome would not stop on breakpoint + // therefore instead using source-map + devtool: 'source-map' + }; + } else { + return { + devtool: 'eval' + }; + } + } + + + function getHtmlFilters() { + const filtersPath = path.join(rootDir, 'src', 'ng-table', 'filters'); + return fs.readdirSync(filtersPath).map(name => path.join(filtersPath, name)); + } + + function inlineHtmlTemplates() { + return { + module: { + loaders: [ + { + test: /\.html$/, + loader: 'ngtemplate?requireAngular&relativeTo=/src/!html' + } + ] + } + }; + } + + function prodOptimize() { + return { + plugins: [ + // doesn't save anything in this small app. npm@3 mostly takes care of this + new webpack.optimize.DedupePlugin(), + new webpack.LoaderOptionsPlugin({ + minimize: true, + debug: false, + quiet: true, + }), + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"production"', + }, + }), + new webpack.optimize.UglifyJsPlugin({ + compress: { + screw_ie8: true, // eslint-disable-line + warnings: false, + }, + sourceMap: true + }) + ] + }; + } +} \ No newline at end of file diff --git a/webpack/multiConfig.js b/webpack/multiConfig.js new file mode 100644 index 00000000..65cf0279 --- /dev/null +++ b/webpack/multiConfig.js @@ -0,0 +1,18 @@ +module.exports = function (partsFactory) { + return function multiconfig(sourceDir, env, configFactory) { + let configs = []; + if (env.prod) { + let prodEnv = Object.assign({}, env, { debug: false }); + configs.push(configFactory(prodEnv, partsFactory(sourceDir, prodEnv))); + } + if (env.debug) { + let debugEnv = Object.assign({}, env, { prod: false }); + configs.push(configFactory(debugEnv, partsFactory(sourceDir, debugEnv))); + } + if (!env.debug && !env.prod) { + configs.push(configFactory(env, partsFactory(sourceDir, env))); + } + return configs; + } +}; +