upgrade to latest version of used libraries, rework of some code stan…

…dards

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.idea
+src/assets/fabricator
+src/docs

.eslintrc

@@ -1,11 +1,6 @@
 {
-  "extends": "airbnb-base",
+  "extends": ["airbnb-base", "plugin:prettier/recommended"],
   "rules": {
-    "padded-blocks": 0,
-    "no-console": 0,
-    "arrow-body-style": 0,
-    "quote-props": ["error", "consistent-as-needed"],
-    "comma-dangle": ["error", "always-multiline"],
-    "max-len": 0,
+    "arrow-body-style": 0
   }
 }

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .sass-cache
+.idea

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.travis.yml

@@ -2,8 +2,7 @@ sudo: false
 language: node_js
 
 node_js:
-  - "5"
-  - "4"
+  - "node"
 
 notifications:
   webhooks:

README.md

@@ -1,5 +1,7 @@
 [![GitHub release](https://img.shields.io/github/release/fbrctr/fabricator.svg)]()
-[![Build Status](https://travis-ci.org/fbrctr/fabricator.svg)](https://travis-ci.org/fbrctr/fabricator) [![devDependency Status](https://david-dm.org/fbrctr/fabricator/dev-status.svg)](https://david-dm.org/fbrctr/fabricator#info=devDependencies) [![Join the chat at https://gitter.im/fbrctr/fabricator](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/fbrctr/fabricator?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Build Status](https://travis-ci.org/fbrctr/fabricator.svg)](https://travis-ci.org/fbrctr/fabricator)
+[![devDependency Status](https://david-dm.org/fbrctr/fabricator/dev-status.svg)](https://david-dm.org/fbrctr/fabricator#info=devDependencies)
+[![Join the chat at https://gitter.im/fbrctr/fabricator](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/fbrctr/fabricator?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 <p align="center">
   <img src="http://fbrctr.github.io/assets/toolkit/images/logo.svg" width="500">

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function babelConfig(api) {
+  api.cache.using(() => process.env.NODE_ENV === 'development');
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: false,
+          useBuiltIns: 'usage',
+        },
+      ],
+    ],
+  };
+};

gulpfile.js

@@ -1,24 +1,38 @@
-const assembler = require('fabricator-assemble');
+const fabAssemble = require('fabricator-assemble');
 const browserSync = require('browser-sync');
 const csso = require('gulp-csso');
 const del = require('del');
 const gulp = require('gulp');
-const gutil = require('gulp-util');
+const argv = require('minimist')(process.argv.slice(2));
+const log = require('fancy-log');
 const gulpif = require('gulp-if');
 const imagemin = require('gulp-imagemin');
 const prefix = require('gulp-autoprefixer');
 const rename = require('gulp-rename');
-const reload = browserSync.reload;
-const runSequence = require('run-sequence');
 const sass = require('gulp-sass');
 const sourcemaps = require('gulp-sourcemaps');
 const webpack = require('webpack');
+sass.compiler = require('node-sass');
+
+let server = false;
+function reload(done) {
+  if (server) server.reload();
+  done();
+}
 
 // configuration
 const config = {
-  dev: gutil.env.dev,
+  dev: !!argv.dev,
   styles: {
-    browsers: 'last 1 version',
+    browsers: [
+      'ie 11',
+      'edge >= 16',
+      'chrome >= 70',
+      'firefox >= 63',
+      'safari >= 11',
+      'iOS >= 12',
+      'ChromeAndroid >= 70',
+    ],
     fabricator: {
       src: 'src/assets/fabricator/styles/fabricator.scss',
       dest: 'dist/assets/fabricator/styles',
@@ -55,124 +69,169 @@ const config = {
   dest: 'dist',
 };
 
-
 // clean
-gulp.task('clean', del.bind(null, [config.dest]));
-
+const clean = () => del([config.dest]);
 
 // styles
-gulp.task('styles:fabricator', () => {
-  gulp.src(config.styles.fabricator.src)
-  .pipe(sourcemaps.init())
-  .pipe(sass().on('error', sass.logError))
-  .pipe(prefix(config.styles.browsers))
-  .pipe(gulpif(!config.dev, csso()))
-  .pipe(rename('f.css'))
-  .pipe(sourcemaps.write())
-  .pipe(gulp.dest(config.styles.fabricator.dest))
-  .pipe(gulpif(config.dev, reload({ stream: true })));
-});
-
-gulp.task('styles:toolkit', () => {
-  gulp.src(config.styles.toolkit.src)
-  .pipe(gulpif(config.dev, sourcemaps.init()))
-  .pipe(sass({
-    includePaths: './node_modules',
-  }).on('error', sass.logError))
-  .pipe(prefix(config.styles.browsers))
-  .pipe(gulpif(!config.dev, csso()))
-  .pipe(gulpif(config.dev, sourcemaps.write()))
-  .pipe(gulp.dest(config.styles.toolkit.dest))
-  .pipe(gulpif(config.dev, reload({ stream: true })));
-});
-
-gulp.task('styles', ['styles:fabricator', 'styles:toolkit']);
-
+function stylesFabricator() {
+  return gulp
+    .src(config.styles.fabricator.src)
+    .pipe(sourcemaps.init())
+    .pipe(sass().on('error', sass.logError))
+    .pipe(prefix(config.styles.browsers))
+    .pipe(gulpif(!config.dev, csso()))
+    .pipe(rename('f.css'))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(config.styles.fabricator.dest));
+}
+
+function stylesToolkit() {
+  return gulp
+    .src(config.styles.toolkit.src)
+    .pipe(gulpif(config.dev, sourcemaps.init()))
+    .pipe(
+      sass({
+        includePaths: './node_modules',
+      }).on('error', sass.logError)
+    )
+    .pipe(prefix(config.styles.browsers))
+    .pipe(gulpif(!config.dev, csso()))
+    .pipe(gulpif(config.dev, sourcemaps.write()))
+    .pipe(gulp.dest(config.styles.toolkit.dest));
+}
+
+const styles = gulp.parallel(stylesFabricator, stylesToolkit);
 
 // scripts
 const webpackConfig = require('./webpack.config')(config);
 
-gulp.task('scripts', (done) => {
+function scripts(done) {
   webpack(webpackConfig, (err, stats) => {
     if (err) {
-      gutil.log(gutil.colors.red(err()));
+      log.error(err());
     }
     const result = stats.toJson();
     if (result.errors.length) {
-      result.errors.forEach((error) => {
-        gutil.log(gutil.colors.red(error));
+      result.errors.forEach(error => {
+        log.error(error);
       });
     }
     done();
   });
-});
-
+}
 
 // images
-gulp.task('images', ['favicon'], () => {
-  return gulp.src(config.images.toolkit.src)
+function imgFavicon() {
+  return gulp.src('src/favicon.ico').pipe(gulp.dest(config.dest));
+}
+
+function imgMinification() {
+  return gulp
+    .src(config.images.toolkit.src)
     .pipe(imagemin())
     .pipe(gulp.dest(config.images.toolkit.dest));
-});
-
-gulp.task('favicon', () => {
-  return gulp.src('src/favicon.ico')
-  .pipe(gulp.dest(config.dest));
-});
+}
+const images = gulp.series(imgFavicon, imgMinification);
 
-
-// assembler
-gulp.task('assembler', (done) => {
-  assembler({
+// assembly
+function assembler(done) {
+  fabAssemble({
     logErrors: config.dev,
     dest: config.dest,
+    helpers: {
+      // {{ default description "string of content used if description var is undefined" }}
+      default: function defaultFn(...args) {
+        return args.find(value => !!value);
+      },
+      // {{ concat str1 "string 2" }}
+      concat: function concat(...args) {
+        return args.slice(0, args.length - 1).join('');
+      },
+      // {{> (dynamicPartial name) }} ---- name = 'nameOfComponent'
+      dynamicPartial: function dynamicPartial(name) {
+        return name;
+      },
+      eq: function eq(v1, v2) {
+        return v1 === v2;
+      },
+      ne: function ne(v1, v2) {
+        return v1 !== v2;
+      },
+      and: function and(v1, v2) {
+        return v1 && v2;
+      },
+      or: function or(v1, v2) {
+        return v1 || v2;
+      },
+      not: function not(v1) {
+        return !v1;
+      },
+      gte: function gte(a, b) {
+        return +a >= +b;
+      },
+      lte: function lte(a, b) {
+        return +a <= +b;
+      },
+      plus: function plus(a, b) {
+        return +a + +b;
+      },
+      minus: function minus(a, b) {
+        return +a - +b;
+      },
+      divide: function divide(a, b) {
+        return +a / +b;
+      },
+      multiply: function multiply(a, b) {
+        return +a * +b;
+      },
+      abs: function abs(a) {
+        return Math.abs(a);
+      },
+      mod: function mod(a, b) {
+        return +a % +b;
+      },
+    },
   });
   done();
-});
-
+}
 
 // server
-gulp.task('serve', () => {
-
-  browserSync({
+function serve(done) {
+  server = browserSync.create();
+  server.init({
     server: {
       baseDir: config.dest,
     },
     notify: false,
     logPrefix: 'FABRICATOR',
   });
-
-  gulp.task('assembler:watch', ['assembler'], browserSync.reload);
-  gulp.watch(config.templates.watch, ['assembler:watch']);
-
-  gulp.task('styles:watch', ['styles']);
-  gulp.watch([config.styles.fabricator.watch, config.styles.toolkit.watch], ['styles:watch']);
-
-  gulp.task('scripts:watch', ['scripts'], browserSync.reload);
-  gulp.watch([config.scripts.fabricator.watch, config.scripts.toolkit.watch], ['scripts:watch']);
-
-  gulp.task('images:watch', ['images'], browserSync.reload);
-  gulp.watch(config.images.toolkit.watch, ['images:watch']);
-
-});
-
+  done();
+}
+
+function watch() {
+  gulp.watch(
+    config.templates.watch,
+    { interval: 500 },
+    gulp.series(assembler, reload)
+  );
+  gulp.watch(
+    [config.scripts.fabricator.watch, config.scripts.toolkit.watch],
+    { interval: 500 },
+    gulp.series(scripts, reload)
+  );
+  gulp.watch(
+    config.images.toolkit.watch,
+    { interval: 500 },
+    gulp.series(images, reload)
+  );
+  gulp.watch(
+    [config.styles.fabricator.watch, config.styles.toolkit.watch],
+    { interval: 500 },
+    gulp.series(styles, reload)
+  );
+}
 
 // default build task
-gulp.task('default', ['clean'], () => {
-
-  // define build tasks
-  const tasks = [
-    'styles',
-    'scripts',
-    'images',
-    'assembler',
-  ];
-
-  // run build
-  runSequence(tasks, () => {
-    if (config.dev) {
-      gulp.start('serve');
-    }
-  });
-
-});
+let tasks = [clean, styles, scripts, images, assembler];
+if (config.dev) tasks = tasks.concat([serve, watch]);
+gulp.task('default', gulp.series(tasks));