Es6 style

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        "stage-1",
+        ["env", {
+            "modules": false
+        }]
+    ],
+    "plugins": [
+
+    ]
+}

.eslintignore

@@ -0,0 +1,3 @@
+webpack.config.js
+Gulpfile.js
+build/**/*

.eslintrc

@@ -0,0 +1,139 @@
+{
+    "extends": ["eslint:recommended"],
+    "env": {
+        "amd": true,
+        "browser": true
+    },
+    "plugins": [],
+    "parserOptions": {
+        "ecmaVersion": 8,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "globalReturn": true
+        }
+    },
+    "globals": {
+        "mendix": true,
+        "mx": true,
+        "logger": true,
+        "mxui": true,
+        "config": true
+    },
+    "rules": {
+        "comma-dangle": [1,"always-multiline"],
+        "no-cond-assign": [2,"except-parens"],
+        "no-console": 0,
+        "no-constant-condition": 1,
+        "no-control-regex": 1,
+        "no-debugger": 2,
+        "no-dupe-args": 2,
+        "no-dupe-keys": 2,
+        "no-duplicate-case": 2,
+        "no-empty-character-class": 2,
+        "no-empty": 1,
+        "no-ex-assign": 2,
+        "no-extra-boolean-cast": 1,
+        "no-extra-parens": [1,"all"],
+        "no-extra-semi": 1,
+        "no-func-assign": 2,
+        "no-inner-declarations": [2,"both"],
+        "no-invalid-regexp": 2,
+        "no-irregular-whitespace": 2,
+        "no-obj-calls": 2,
+        "no-regex-spaces": 1,
+        "no-sparse-arrays": 2,
+        "no-unreachable": 2,
+        "use-isnan": 2,
+        "valid-typeof": 2,
+        "no-unexpected-multiline": 2,
+        "accessor-pairs": [1,{"getWithoutSet":true,"setWithoutGet":true}],
+        "block-scoped-var": 2,
+        "consistent-return": 1,
+        "curly": ["error", "all"],
+        "default-case": 1,
+        "dot-notation": 2,
+        "dot-location": [1,"property"],
+        "eqeqeq": [2,"smart"],
+        "guard-for-in": 1,
+        "no-alert": 2,
+        "no-caller": 2,
+        "no-div-regex": 2,
+        "no-else-return": 1,
+        "no-eq-null": 2,
+        "no-eval": 2,
+        "no-extend-native": 2,
+        "no-extra-bind": 1,
+        "no-fallthrough": 1,
+        "no-floating-decimal": 2,
+        "no-implied-eval": 2,
+        "no-invalid-this": 1,
+        "no-iterator": 1,
+        "no-labels": 2,
+        "no-lone-blocks": 2,
+        "no-loop-func": 2,
+        "no-multi-spaces": 1,
+        "no-multi-str": 1,
+        "no-native-reassign": 2,
+        "no-new-func": 2,
+        "no-new-wrappers": 2,
+        "no-new": 1,
+        "no-octal-escape": 2,
+        "no-octal": 2,
+        "no-param-reassign": [2,{"props":true}],
+        "no-process-env": 0,
+        "no-proto": 2,
+        "no-redeclare": [2,{"builtinGlobals":true}],
+        "no-return-assign": [2,"always"],
+        "no-script-url": 2,
+        "no-self-compare": 1,
+        "no-sequences": 2,
+        "no-throw-literal": 2,
+        "no-useless-call": 2,
+        "no-with": 2,
+        "radix": 1,
+        "wrap-iife": [2,"inside"],
+        "yoda": [1,"always",{}],
+        "strict": [1,"global"],
+        "no-catch-shadow": 2,
+        "no-delete-var": 2,
+        "no-label-var": 2,
+        "no-shadow-restricted-names": 2,
+        "no-shadow": [2,{"builtinGlobals":true,"hoist":"all"}],
+        "no-undef-init": 2,
+        "no-undef": 2,
+        "no-undefined": 2,
+        "no-unused-vars": 2,
+        "no-use-before-define": [2,"nofunc"],
+        "brace-style": [1,"1tbs",{"allowSingleLine":true}],
+        "camelcase": [1,{"properties":"always"}],
+        "comma-spacing": [1,{"after":true}],
+        "comma-style": 1,
+        "computed-property-spacing": [2,"always"],
+        "eol-last": 1,
+        "indent": [1,4],
+        "key-spacing": [1,{"mode":"minimum"}],
+        "new-parens": 2,
+        "no-lonely-if": 1,
+        "no-mixed-spaces-and-tabs": [2,"smart-tabs"],
+        "no-multiple-empty-lines": [1,{"max":4}],
+        "no-new-object": 2,
+        "no-spaced-func": 2,
+        "no-trailing-spaces": 2,
+        "no-unneeded-ternary": 1,
+        "semi": [2,"always"],
+        "space-infix-ops": 1,
+        "arrow-parens": [2,"as-needed"],
+        "arrow-spacing": [2,{"before":true,"after":true}],
+        "constructor-super": 1,
+        "no-class-assign": 2,
+        "no-const-assign": 2,
+        "no-this-before-super": 2,
+        "no-var": 1,
+        "prefer-const": 1,
+        "prefer-spread": 2,
+        "prefer-reflect": 0,
+        "require-yield": 1,
+        "max-len": [1,140,4,{}],
+        "max-statements": [1,40]
+    }
+}

.gitignore

@@ -1,3 +1,6 @@
+build
+package-lock.json
+
 test/javasource/
 test/deployment/
 test/.classpath
@@ -11,8 +14,6 @@ test/.project
 *.lock
 .idea/
 
-dist/
-
 node_modules/
 .editorconfig
 *DS_Store*

Gulpfile.js

@@ -1,93 +1,117 @@
-// Generated on 2016-11-08 using generator-mendix 2.0.1 :: git+https://github.com/mendix/generator-mendix.git
-/*jshint -W069,-W097*/
-"use strict";
-
-// In case you seem to have trouble starting Mendix through `gulp modeler`, you might have to set the path to the Mendix application, otherwise leave both values as they are
-var MODELER_PATH = null;
-var MODELER_ARGS = "/file:{path}";
-
-/********************************************************************************
- * Do not edit anything below, unless you know what you are doing
- ********************************************************************************/
-var gulp = require("gulp"),
-    zip = require("gulp-zip"),
-    del = require("del"),
-    newer = require("gulp-newer"),
-    gutil = require("gulp-util"),
-    gulpif = require("gulp-if"),
-    jsonTransform = require("gulp-json-transform"),
-    intercept = require("gulp-intercept"),
-    argv = require("yargs").argv,
-    widgetBuilderHelper = require("widgetbuilder-gulp-helper");
-
-var pkg = require("./package.json"),
-    paths = widgetBuilderHelper.generatePaths(pkg),
-    xmlversion = widgetBuilderHelper.xmlversion;
-
-gulp.task("default", function() {
-    gulp.watch("./src/**/*", ["compress"]);
-    gulp.watch("./src/**/*.js", ["copy:js"]);
-    gulp.watch("./src/**/*.html", ["copy:html"]);
-});
+const path = require('path');
+const fs = require('fs-extra');
+const gulp = require('gulp-help')(require('gulp'));
+const gutil = require('gulp-util');
+const webpack = require('webpack');
+const watch = require('gulp-watch');
+const gulpCopy = require('gulp-copy');
+const sequence = require('gulp-sequence');
+const del = require('del');
 
-gulp.task("clean", function () {
-    return del([
-        paths.WIDGET_TEST_DEST,
-        paths.WIDGET_DIST_DEST
-    ], { force: true });
-});
+const banner = (color, banner) => gutil.colors[color || 'cyan'](banner ? `[${banner}]` : '[GULP]');
 
-gulp.task("compress", ["clean"], function () {
-    return gulp.src("src/**/*")
-        .pipe(zip(pkg.name + ".mpk"))
-        .pipe(gulp.dest(paths.TEST_WIDGETS_FOLDER))
-        .pipe(gulp.dest("dist"));
-});
+const pkg = require('./package.json');
 
-gulp.task("copy:js", function () {
-    return gulp.src(["./src/**/*.js"])
-        .pipe(newer(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER))
-        .pipe(gulp.dest(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER));
-});
+// Set paths for our project folder
 
-gulp.task("copy:html", function () {
-    return gulp.src(["./src/**/*.html"])
-        .pipe(newer(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER))
-        .pipe(gulp.dest(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER));
-});
+const projectPath = pkg.widget.path ? path.resolve(pkg.widget.path) + '/' : false;
+const widgetsFolder = projectPath ? path.join(projectPath, `/widgets/`) : false;
+const deploymentFolder = projectPath ? path.join(projectPath, `/deployment/web/widgets/`) : false;
+
+// Check if project folder exists and is accessible
+
+let stat = null;
+if (!projectPath) {
+    gutil.log(`${banner()} No testproject defined, only copying files to dist/build folder. Set project path in ${gutil.colors.cyan('widget.path')} in ${gutil.colors.magenta('package.json')}`);
+} else {
+    gutil.log(`${banner()} Testproject defined: ${gutil.colors.magenta(projectPath)}`);
+    try {
+        stat = projectPath ? fs.statSync(projectPath) : null;
+    } catch (e) {
+        gutil.log(`${banner('red')} Error getting project directory:`, e.toString());
+        gutil.log(`${banner('red')} Copying to the project directory has been disabled`);
+        stat = null;
+    }
+}
+
+// Helper functions
 
-gulp.task("version:xml", function () {
-    return gulp.src(paths.PACKAGE_XML)
-        .pipe(xmlversion(argv.n))
-        .pipe(gulp.dest("./src/"));
+const runWebpack = callback => {
+    webpack(require('./webpack.config.js'), function (err, stats) {
+        if (err) throw new gutil.PluginError("webpack", err);
+        gutil.log(banner('cyan', 'WEBPACK'), stats.toString({
+            colors: true,
+            modules: false
+        }));
+        callback && callback();
+    });
+};
+
+const copyFile = paths => {
+    try {
+        fs.copySync(paths.src, paths.dest);
+    } catch (err) {
+        gutil.log(`${banner('red')} Copy fail`, err);
+    }
+};
+
+const getPaths = (file, srcFolder, destFolder) => {
+    return {
+        src: path.join(__dirname, srcFolder, file.relative),
+        dest: path.join(destFolder, file.relative),
+    }
+}
+
+// Base tasks
+
+gulp.task('watch:src', () => {
+    return watch('src/**/*', {
+        verbose: true
+    }, () => {
+        runWebpack();
+    })
 });
 
-gulp.task("version:json", function () {
-    return gulp.src("./package.json")
-        .pipe(gulpif(typeof argv.n !== "undefined", jsonTransform(function(data) {
-            data.version = argv.n;
-            return data;
-        }, 2)))
-        .pipe(gulp.dest("./"));
+gulp.task('watch:build', () => {
+    return watch('build/**/*', {
+        verbose: stat !== null,
+        read: false
+    }, file => {
+        if (stat !== null) {
+            const paths = getPaths(file, 'build', deploymentFolder);
+            if (paths.src.indexOf('package.xml') !== -1) {
+                return;
+            }
+            copyFile(paths);
+        }
+    })
 });
 
-gulp.task("icon", function (cb) {
-    var icon = (typeof argv.file !== "undefined") ? argv.file : "./icon.png";
-    console.log("\nUsing this file to create a base64 string: " + gutil.colors.cyan(icon));
-    gulp.src(icon)
-        .pipe(intercept(function (file) {
-            console.log("\nCopy the following to your " + pkg.name + ".xml (after description):\n\n" + gutil.colors.cyan("<icon>") + file.contents.toString("base64") + gutil.colors.cyan("<\\icon>") + "\n");
-            cb();
-        }));
+gulp.task('watch:dist', () => {
+    return watch(`dist/${pkg.widget.package}.mpk`, {
+        verbose: stat !== null,
+        read: false
+    }, file => {
+        if (stat !== null) {
+            const paths = getPaths(file, 'dist', widgetsFolder);
+            copyFile(paths);
+        }
+    })
 });
 
-gulp.task("folders", function () {
-    paths.showPaths(); return;
+gulp.task('clean', `Cleanup the dist/build`, () => {
+    return del([
+        'dist',
+        'build'
+    ], { force: true });
 });
 
-gulp.task("modeler", function (cb) {
-    widgetBuilderHelper.runmodeler(MODELER_PATH, MODELER_ARGS, paths.TEST_PATH, cb);
+// Final tasks
+
+gulp.task('build', 'Build the widget', done => {
+    sequence('clean', 'build-dist', done);
 });
 
-gulp.task("build", ["compress"]);
-gulp.task("version", ["version:xml", "version:json"]);
+gulp.task('build-dist', callback => { runWebpack(callback); });
+
+gulp.task('default', ['watch:src', 'watch:build', 'watch:dist']);