build(webpack): update build to use webpack in preparation for TS

Author: marcelo-portugal

.gitignore

@@ -171,7 +171,7 @@ packages/**/*.css
 packages/**/ui-grid.*.js
 packages/**/LICENSE.md
 packages/**/.npmignore
-packages/**/index.js
+packages/*/index.js
 
 # Installer logs
 pip-log.txt

grunt/aliases.js

@@ -6,17 +6,16 @@ module.exports = function (grunt, options) {
     // register before and after test tasks so we don't have to change cli
     // options on the CI server
     'before-test': [
-      'clean', 'shell:lint', 'ngtemplates', 'less', 'copy:font_dist','copy:packages_dist'
-    ], // Have to run less so CSS files are present
+      'clean', 'shell:lint', 'ngtemplates'
+    ],
     'after-test': ['build'],
     'default': ['before-test', 'test:single', 'after-test'],
 
     // Build with no testing
     'build': [
-      'ngtemplates', 'concat', 'uglify', 'less', 'uidocs-generator', 'copy:font_dist', 'copy:packages_dist',
+      'shell:build', 'uidocs-generator',
       'copy:site', 'copy:less_customizer',
     ],
-    'build:less_dist': ['copy:less_dist', 'replace:less_dist'],
 
     // Auto-test tasks for development
     'autotest:unit': ['karmangular:start'],
@@ -54,10 +53,10 @@ module.exports = function (grunt, options) {
   var currentTag = semver.clean( util.getCurrentTag() );
 
   if (currentTag) {
-    baseTasks['release'] = ['clean', 'ngtemplates', 'build', 'build:less_dist', 'cut-release', 'gh-pages:ui-grid-site', 'update-bower-json', 'gh-pages:bower', 'npm-publish'];
+    baseTasks['release'] = ['clean', 'build', 'cut-release', 'gh-pages:ui-grid-site', 'update-bower-json', 'gh-pages:bower', 'npm-publish'];
   }
   else {
-    baseTasks['release'] = ['clean', 'ngtemplates', 'build', 'build:less_dist', 'cut-release'];
+    baseTasks['release'] = ['clean', 'build', 'cut-release'];
   }
 
   return baseTasks;

grunt/clean.js

@@ -2,5 +2,5 @@ module.exports =
   // Clean the temp directory
   ['.tmp', '<%= dist %>', 'docs', 'coverage',
   'packages/*/.npmignore', 'packages/*/LICENSE.md',
-  'packages/*/css', 'packages/*/js', 'packages/*/*.js']
+  'packages/*/css', 'packages/*/dist', 'packages/*/js', 'packages/*/index.js']
 ;

grunt/concat.js

@@ -15,6 +15,9 @@ module.exports = function() {
         async: true
       }
     },
+    build: {
+      command: 'npm run build-dx'
+    },
     lint: {
       command: 'npm run lint'
     },

grunt/less.js

@@ -8,11 +8,11 @@ module.exports = {
       versions: {
         stable: [
           { src: '/release/<%= pkg.name %>.js', type: 'script' },
-          { src: '/release/<%= pkg.name %>.css', type: 'css' }
+          { src: '/release/css/<%= pkg.name %>.css', type: 'css' }
         ],
         unstable: [
           { src: '/release/<%= pkg.name %>-unstable.js', type: 'script' },
-          { src: '/release/<%= pkg.name %>-unstable.css', type: 'css' }
+          { src: '/release/css/<%= pkg.name %>-unstable.css', type: 'css' }
         ]
       }
     },

grunt/replace.js

@@ -6,18 +6,18 @@ module.exports = function( grunt, options ){
 
     gruntfile: {
       files: ['packages/*/src/**/*.js', 'packages/*/test/**/*.spec.js', 'test/**/*.spec.js', 'grunt/*.js'],
-      tasks: ['shell:lint', 'uidocs-generator']
+      tasks: ['shell:lint', 'shell:build', 'uidocs-generator']
     },
 
     ngtemplates: {
       // files: ['packages/*/src/templates/**/*.html'],
       files: '<%= ngtemplates.uigrid.src %>',
-      tasks: ['ngtemplates']
+      tasks: ['ngtemplates', 'shell:build']
     },
 
     rebuild: {
       files: util.testFiles.unit,
-      tasks: ['shell:lint', 'karmangular:run', 'concat', 'uglify', 'uidocs-generator'],
+      tasks: ['shell:lint', 'karmangular:run', 'shell:build', 'uidocs-generator'],
     },
 
     protractor: {
@@ -27,7 +27,7 @@ module.exports = function( grunt, options ){
 
     less: {
       files: 'src/**/*.less',
-      tasks: ['less', 'uidocs-generator', 'concat:customizer_less']
+      tasks: ['shell:less', 'uidocs-generator', 'concat:customizer_less']
     },
 
     docs: {

grunt/shell.js

@@ -0,0 +1,21 @@
+require('./packages/core/src/index.js');
+require('./packages/i18n/src/index.js');
+require('./packages/auto-resize/src/index.js');
+require('./packages/cellnav/src/index.js');
+require('./packages/edit/src/index.js');
+require('./packages/empty-base-layer/src/index.js');
+require('./packages/expandable/src/index.js');
+require('./packages/exporter/src/index.js');
+require('./packages/grouping/src/index.js');
+require('./packages/importer/src/index.js');
+require('./packages/infinite-scroll/src/index.js');
+require('./packages/move-columns/src/index.js');
+require('./packages/pagination/src/index.js');
+require('./packages/pinning/src/index.js');
+require('./packages/resize-columns/src/index.js');
+require('./packages/row-edit/src/index.js');
+require('./packages/saveState/src/index.js');
+require('./packages/selection/src/index.js');
+require('./packages/tree-base/src/index.js');
+require('./packages/tree-view/src/index.js');
+require('./packages/validate/src/index.js');

grunt/uglify.js

@@ -4,13 +4,10 @@ var grunt = require('grunt');
 var semver = require('semver');
 var shell = require('shelljs');
 
-// Get the list of angular files (angular.js, angular-mocks.js, etc)
-var cachedAngularFiles = grunt.file.readJSON('lib/test/angular/files.json');
-
 var util = module.exports = {
 
   testDependencies: {
-    unit: ['bower_components/jquery/jquery.min.js', 'lib/test/jquery.simulate.js','lib/test/classList.polyFill.js', 'dist/release/ui-grid.css', 'bower_components/lodash/dist/lodash.min.js', 'bower_components/csv-js/csv.js']
+    unit: ['bower_components/jquery/jquery.min.js', 'lib/test/jquery.simulate.js','lib/test/classList.polyFill.js', 'dist/release/css/ui-grid.css', 'bower_components/lodash/dist/lodash.min.js', 'bower_components/csv-js/csv.js']
   },
 
   testFiles: {
@@ -28,6 +25,9 @@ var util = module.exports = {
 
   // Return a list of angular files for a specific version
   angularFiles: function (version) {
+    // Get the list of angular files (angular.js, angular-mocks.js, etc)
+    var cachedAngularFiles = grunt.file.readJSON('lib/test/angular/files.json');
+
     if (version === 'latest') {
       version = util.latestAngular();
     }

grunt/uidocs-generator.js

@@ -0,0 +1,16 @@
+@import '../../packages/core/less/main.less';
+@import '../../packages/cellnav/less/cellnav.less';
+@import '../../packages/edit/less/edit.less';
+@import '../../packages/empty-base-layer/less/emptyBaseLayer.less';
+@import '../../packages/expandable/less/expandable.less';
+@import '../../packages/exporter/less/exporter.less';
+@import '../../packages/grouping/less/grouping.less';
+@import '../../packages/importer/less/importer.less';
+@import '../../packages/pagination/less/pagination.less';
+@import '../../packages/pinning/less/pinning.less';
+@import '../../packages/resize-columns/less/resizeColumns.less';
+@import '../../packages/row-edit/less/rowEdit.less';
+@import '../../packages/selection/less/selection.less';
+@import '../../packages/tree-base/less/treeBase.less';
+@import '../../packages/tree-view/less/treeView.less';
+@import '../../packages/validate/less/validate.less';

grunt/watch.js

@@ -0,0 +1,60 @@
+const _ = require('lodash');
+const path = require('path');
+const webpack = require('webpack');
+
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const {bannerLoader, terser} = require('./webpack.utils');
+
+module.exports = (dir, hasCss = false) => {
+  const packageName = _.last(dir.split('/'));
+  const mainJs = './src/index.js';
+  const entry = hasCss ? [mainJs, `./less/${_.camelCase(packageName)}.less`] : [mainJs];
+  const htmlLoader = {
+    test: /\.html$/i,
+    include: path.resolve(dir, 'src'),
+    loader: 'text-loader',
+  };
+  const rules = hasCss ? [
+    {
+      test: /\.less$/,
+      include: path.resolve(dir, 'less'),
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+        'less-loader',
+      ]
+    },
+    htmlLoader
+  ] : [htmlLoader];
+  const minimizer = hasCss ? [
+    new CssMinimizerPlugin({
+      test: /\.min.css(\?.*)?$/i
+    }),
+    terser
+  ] : [terser];
+  const plugins = hasCss ? [
+    new MiniCssExtractPlugin(),
+    bannerLoader
+  ] : [bannerLoader];
+
+  return {
+    mode: 'production',
+    entry: {
+      [`ui-grid.${packageName}`]: entry,
+      [`ui-grid.${packageName}.min`]: entry
+    },
+    module: {rules},
+    output: {
+      pathinfo: false,
+      path: path.resolve(dir, 'dist'),
+      filename: '[name].js'
+    },
+    optimization: {
+      minimize: true,
+      minimizer
+    },
+    plugins
+  };
+};