Build with webpack and force style with eslint

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "ie": "11"
+      },
+      "useBuiltIns": "entry"
+    }]
+  ]
+}

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,62 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      jsx: true,
+      modules: true
+    },
+    sourceType: "module"
+  },
+  parser: "babel-eslint",
+  env: {
+    browser: true,
+    es6: true,
+    node: true
+  },
+  globals: {
+    angular: false,
+    define: false,
+    describe: false,
+    document: false,
+    expect: false,
+    it: false,
+    require: false
+  },
+  rules: {
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "object-curly-spacing": ["error", "always"],
+    "max-len": ["warn", { "code": 120, "ignoreComments": true, "ignoreTrailingComments": false }],
+    "no-console": ["warn"],
+    "no-mixed-operators": ["warn", {
+      "groups": [
+        ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+        ["&&", "||"],
+        ["in", "instanceof"]
+      ],
+      "allowSamePrecedence": true
+    }],
+    "no-multi-spaces": ["error"],
+    "no-cond-assign": ["warn"],
+    "no-fallthrough": ["warn"],
+    "no-undef": ["warn"],
+    "no-unused-vars": ["warn", { "args": "none" }],
+    "no-use-before-define": ["warn", { "functions": false, "classes": false, "variables": false }],
+    "no-useless-escape": ["warn"],
+    "no-useless-return": ["warn"],
+    "no-underscore-dangle": ["warn", { "allow": ["_id"] }],
+    "no-redeclare": ["warn"],
+    "no-restricted-syntax": ["warn"],
+    "operator-linebreak": ["warn", "before"],
+    "prefer-promise-reject-errors": ["warn"],
+    "padded-blocks": ["warn", { "blocks": "never", "switches": "never", "classes": "never" }],
+    "semi": ["error", "always"],
+    "valid-typeof": ["warn"],
+    "no-eval": ["error"],
+    "no-implied-eval": ["error"],
+    "no-debugger": ["warn"],
+    "no-mixed-spaces-and-tabs": ["warn"],
+  },
+  extends: [
+    "eslint:recommended"
+  ]
+}

gulpfile.js

@@ -1,105 +1,89 @@
 /* global require process Buffer */
 var gulp = require('gulp');
-var cssnano = require('gulp-cssnano');
 var gutil = require('gulp-util');
-var uglify = require('gulp-uglify');
-var saveLicense = require('uglify-save-license');
 var pkg = require('./package.json');
 var zip = require('gulp-zip');
+var del = require('del');
+var webpackConfig = require('./webpack.config');
+var webpack = require('webpack');
 
 var DIST = './dist',
-	SRC = './src',
-	NAME = pkg.name,
-	VERSION = process.env.VERSION || 'local-dev';
+  NAME = pkg.name,
+  VERSION = process.env.VERSION || 'local-dev';
 
 gulp.task('qext', function () {
-	var qext = {
-		name: 'Date picker',
-		type: 'visualization',
-		description: pkg.description + '\nVersion: ' + VERSION,
-		version: VERSION,
-		icon: 'calendar',
-		preview: 'preview.png',
-		keywords: 'qlik-sense, visualization',
-		author: pkg.author,
-		homepage: pkg.homepage,
-		license: pkg.license,
-		repository: pkg.repository,
-		dependencies: {
-			'qlik-sense': '>=5.5.x'
-		}
-	};
-	if (pkg.contributors) {
-		qext.contributors = pkg.contributors;
-	}
-	var src = require('stream').Readable({
-		objectMode: true
-	});
-	src._read = function () {
-		this.push(new gutil.File({
-			cwd: '',
-			base: '',
-			path: NAME + '.qext',
-			contents: Buffer.from(JSON.stringify(qext, null, 4))
-		}));
-		this.push(null);
-	};
-	return src.pipe(gulp.dest(DIST));
+  var qext = {
+    name: 'Date picker',
+    type: 'visualization',
+    description: pkg.description + '\nVersion: ' + VERSION,
+    version: VERSION,
+    icon: 'calendar',
+    preview: 'preview.png',
+    keywords: 'qlik-sense, visualization',
+    author: pkg.author,
+    homepage: pkg.homepage,
+    license: pkg.license,
+    repository: pkg.repository,
+    dependencies: {
+      'qlik-sense': '>=5.5.x'
+    }
+  };
+  if (pkg.contributors) {
+    qext.contributors = pkg.contributors;
+  }
+  var src = require('stream').Readable({
+    objectMode: true
+  });
+  src._read = function () {
+    this.push(new gutil.File({
+      cwd: '',
+      base: '',
+      path: NAME + '.qext',
+      contents: Buffer.from(JSON.stringify(qext, null, 4))
+    }));
+    this.push(null);
+  };
+  return src.pipe(gulp.dest(DIST));
 });
 
-gulp.task('clean', function (ready) {
-	var del = require('del');
-	del.sync([DIST]);
-	ready();
+gulp.task('clean', function () {
+  return del([DIST], { force: true });
 });
 
-gulp.task('less', function () {
-	var less = require('gulp-less');
-	var LessPluginAutoPrefix = require('less-plugin-autoprefix');
-	var autoprefix = new LessPluginAutoPrefix({
-		browsers: ['last 2 versions']
-	});
-	return gulp.src(SRC + '/**/*.less')
-		.pipe(less({
-			plugins: [autoprefix]
-		}))
-		.pipe(cssnano())
-		.pipe(gulp.dest(DIST));
+gulp.task('zip-build', function () {
+  return gulp.src(DIST + '/**/*')
+    .pipe(zip(`${NAME}_${VERSION}.zip`))
+    .pipe(gulp.dest(DIST));
 });
 
 gulp.task('add-assets', function () {
-	return gulp.src([
-		SRC + '/**/*.png',
-		SRC + '/**/*.txt'
-	])
-		.pipe(gulp.dest(DIST));
+  return gulp.src('./assets/**/*').pipe(gulp.dest(DIST));
 });
 
-gulp.task('add-src', function () {
-	return gulp.src(SRC + '/**/*.js')
-		.pipe(uglify({
-			mangle: false,
-			output: {
-				comments: saveLicense
-			}
-		}))
-		.pipe(gulp.dest(DIST));
-});
+gulp.task('webpack-build', done => {
+  webpack(webpackConfig, (error, statistics) => {
+    const compilationErrors = statistics && statistics.compilation.errors;
+    const hasCompilationErrors = !statistics || (compilationErrors && compilationErrors.length > 0);
 
-gulp.task('zip-build', function () {
-	return gulp.src(DIST + '/**/*')
-		.pipe(zip(`${NAME}_${VERSION}.zip`))
-		.pipe(gulp.dest(DIST));
+    console.log(statistics && statistics.toString({ chunks: false, colors: true })); // eslint-disable-line no-console
+
+    if (error || hasCompilationErrors) {
+      console.log('Build has errors or eslint errors, fail it'); // eslint-disable-line no-console
+      process.exit(1);
+    }
+
+    done();
+  });
 });
 
 gulp.task('build',
-	gulp.series('clean', 'qext', 'less', 'add-assets', 'add-src')
+  gulp.series('clean', 'webpack-build', 'qext', 'add-assets')
 );
 
 gulp.task('zip',
-	gulp.series('build', 'zip-build')
+  gulp.series('build', 'zip-build')
 );
 
 gulp.task('default',
-	gulp.series('build')
+  gulp.series('build')
 );

package.json

@@ -1,38 +1,36 @@
 {
-    "name": "qlik-date-picker",
-    "version": "0.0.1",
-    "description": "A calendar object that allows a user to make selections in a date field.",
-    "private": true,
-    "homepage": "http://branch.qlik.com/#/project/5697a878dcc497f80ed514bf",
-    "repository": "https://github.com/qlik-oss/SenseDateRangePicker/tree/qlik-date-picker",
-    "author": "Nodier Torres",
-    "license": "MIT",
-    "scripts": {
-        "build": "gulp build",
-        "build:zip": "gulp zip",
-        "test:unit": "aw chrome -c ./test/aw.config.js"
-    },
-    "devDependencies": {
-        "after-work.js": "4.3.2",
-        "angular": "1.7.2",
-        "babel": "^6.23.0",
-        "babel-cli": "^6.26.0",
-        "babel-core": "^6.26.3",
-        "babel-plugin-istanbul": "^4.1.6",
-        "del": "^2.0.2",
-        "gulp": "4.0.0",
-        "gulp-cssnano": "^2.1.0",
-        "gulp-dest": "^0.2.3",
-        "gulp-ignore": "^2.0.1",
-        "gulp-less": "^3.0.3",
-        "gulp-replace": "^0.5.4",
-        "gulp-uglify": "^3.0.1",
-        "gulp-util": "^3.0.7",
-        "gulp-zip": "^3.0.2",
-        "jquery": "^3.3.1",
-        "less-plugin-autoprefix": "^1.5.1",
-        "require-css": "^0.1.10",
-        "requirejs": "^2.3.6",
-        "uglify-save-license": "^0.4.1"
-    }
+  "name": "qlik-date-picker",
+  "version": "0.0.1",
+  "description": "A calendar object that allows a user to make selections in a date field.",
+  "private": true,
+  "homepage": "http://branch.qlik.com/#/project/5697a878dcc497f80ed514bf",
+  "repository": "https://github.com/qlik-oss/SenseDateRangePicker/tree/qlik-date-picker",
+  "author": "Nodier Torres",
+  "license": "MIT",
+  "scripts": {
+    "build": "gulp build",
+    "build:zip": "gulp zip",
+    "eslint": "eslint src"
+  },
+  "devDependencies": {
+    "@babel/core": "7.1.2",
+    "@babel/polyfill": "7.0.0",
+    "@babel/preset-env": "7.1.0",
+    "babel-eslint": "10.0.1",
+    "babel-loader": "8.0.4",
+    "css-loader": "1.0.1",
+    "del": "2.0.2",
+    "eslint": "5.7.0",
+    "eslint-loader": "2.1.1",
+    "gulp": "4.0.0",
+    "gulp-util": "^3.0.7",
+    "gulp-zip": "3.0.2",
+    "jquery": "^3.3.1",
+    "less": "3.8.1",
+    "less-loader": "4.1.0",
+    "style-loader": "0.23.1",
+    "stylelint": "8.4.0",
+    "stylelint-webpack-plugin": "0.10.5",
+    "webpack": "4.20.2"
+  }
 }