Merge branch 'release/1.4.0'

.gitignore

@@ -1 +1,2 @@
 node_modules/
+*.DS_Store

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Toolbox Utils - CHANGELOG
 
+*1.4.0* (2018-06-15)
+
+  - 🔧 add CustomEvent in js polyfills (c6881ca) 
+  - Update polyfill for IE11 bug. (09e3aef) 
+  - 💄 safer CSS (94a19e3) 
+  - 🐛 fix prepare css/js inclusion (c7e3c2b) 
+  - ⚡️ pre-construct components meta for quicker reader render (51690b3) 
+  - ⚡️ resolve recuring perf issue (5304bb1) 
+  - 📝 add comments (d851af4) 
+  - ✨ dynamic components types (580fc0a) 
+  - ⬆️ re-upgrade all depencies like a guedin (3954461) 
+  - ✨ add update notification (ae8158e) 
+  - ✨ multiple JS/SCSS possible using toolbox.json config (see doc) (227120e) 
+  - ⬆️ Hard upgrade deps, upgrade to Webpack 4, remove fonticons and readd gulp-uglify for JS vendors (a01c6ba)
+
 *1.3.1* (2018-02-06)
   - fix autoprefixer config to prefix CSS Grid layout
 

gulpfile.js

@@ -12,12 +12,10 @@ const single = require('./tasks/single');
 const serve = require('./tasks/serve');
 const prepare = require('./tasks/prepare');
 const deploy = require('./tasks/deploy');
+const icons = require('./tasks/icons');
 
 const config = require('./tasks/config');
 
-const iconSystem = config.fontIcons ? './tasks/font-icons' : './tasks/icons';
-const icons = require(iconSystem);
-
 /**
  * Clean
  *
@@ -51,14 +49,14 @@ const copyPathsDev = [{
   dest: '/docs',
 }];
 
+if (config.dev || config.styleguide) {
+  copyPaths.push(...copyPathsDev);
+}
+
 /**
  * Copy stuff
  */
 const copyAssets = () => {
-  if (config.dev || config.styleguide) {
-    copyPaths.push(...copyPathsDev);
-  }
-
   return merge(copyPaths.map((item) => {
     const baseDir = item.root ? '' : config.src;
     return gulp.src(baseDir + item.src, {cwd: config.project})

index.js

@@ -5,11 +5,32 @@
 const spawn = require('cross-spawn');
 const yargs = require('yargs');
 
+const chalk = require('chalk');
+const latestVersion = require('latest-version');
+const pkg = require('./package.json');
+
+// Display update notification if it's not the last version
+latestVersion('toolbox-utils').then(version => {
+	if (version !== pkg.version) {
+    const msg = ` Version ${version} (current ${pkg.version}) of toolbox-utils is available ! `;
+    console.log(`
+${chalk.white.bgRed.bold(` ${' '.repeat(msg.length)} \n ${msg} \n${' '.repeat(msg.length)}  `)}
+
+To update your beloved builder, do :
+$ ${chalk.green('yarn upgrade toolbox-utils')} (recommended)
+or
+$ ${chalk.green('npm update toolbox-utils')}
+    `);
+  }
+});
+
 const script = process.argv[2];
 const args = process.argv[3] ? '--' + process.argv[3] : process.argv[3];
 
 let env = script === 'build' ? '--production' : '--dev';
 
 const result = spawn(
-  './node_modules/.bin/gulp', [script, '--project', process.cwd(), env, args], { stdio: 'inherit', cwd: './node_modules/toolbox-utils' },
+  './node_modules/.bin/gulp',
+  [script, '--project', process.cwd(), env, args],
+  { stdio: 'inherit', cwd: './node_modules/toolbox-utils' },
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolbox-utils",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Resources for generator-toolbox",
   "license": "MIT",
   "engines": {
@@ -33,58 +33,63 @@
     }
   },
   "dependencies": {
-    "autoprefixer": "^7.1.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "autoprefixer": "^8.4.1",
+    "babel-eslint": "^8.2.3",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-es2015-spread": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "browser-sync": "^2.18.12",
-    "browserify": "^14.4.0",
+    "babel-register": "^6.26.0",
+    "browser-sync": "^2.24.4",
+    "chalk": "^2.4.1",
     "child_process": "^1.0.2",
-    "cross-spawn": "^5.1.0",
+    "cross-spawn": "^6.0.5",
     "cssnano": "^3.10.0",
     "del": "^3.0.0",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.0.1",
-    "eslint-plugin-import": "^2.3.0",
-    "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.1.0",
-    "fs-extra": "^4.0.2",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "fs-extra": "^6.0.0",
     "gulp": "github:gulpjs/gulp#4.0",
-    "gulp-cheerio": "^0.6.2",
+    "gulp-cheerio": "^0.6.3",
     "gulp-concat": "^2.6.1",
     "gulp-consolidate": "^0.2.0",
-    "gulp-iconfont": "^8.0.1",
-    "gulp-cssnano": "^2.1.2",
-    "gulp-eslint": "^4.0.0",
+    "gulp-cssnano": "^2.1.3",
+    "gulp-eslint": "^4.0.2",
     "gulp-gh-pages": "^0.5.4",
     "gulp-load-plugins": "^1.5.0",
-    "gulp-notify": "^3.0.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^7.0.0",
+    "gulp-notify": "^3.2.0",
+    "gulp-plumber": "^1.2.0",
+    "gulp-postcss": "^7.0.1",
     "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
-    "gulp-sass": "^3.1.0",
-    "gulp-size": "^2.1.0",
-    "gulp-sourcemaps": "^2.6.0",
-    "gulp-stylelint": "^3.9.0",
-    "gulp-svgo": "^1.1.1",
-    "gulp-svgstore": "^6.1.0",
+    "gulp-replace": "^0.6.1",
+    "gulp-sass": "^4.0.1",
+    "gulp-size": "^3.0.0",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-stylelint": "^7.0.0",
+    "gulp-svgo": "^1.5.4",
+    "gulp-svgstore": "^6.1.1",
     "gulp-util": "^3.0.8",
+    "jquery": "^3.3.1",
+    "latest-version": "^3.1.0",
     "merge-stream": "^1.0.1",
-    "node-fetch": "^1.7.1",
-    "postcss-reporter": "^4.0.0",
-    "postcss-scss": "^1.0.1",
-    "stylelint": "^7.11.0",
-    "stylelint-config-standard": "^16.0.0",
-    "stylelint-order": "^0.5.0",
-    "webpack": "^2.6.1",
-    "webpack-dev-middleware": "^1.10.2",
-    "webpack-dev-server": "^2.4.5",
-    "webpack-hot-middleware": "^2.18.0",
+    "node-fetch": "^2.1.2",
+    "postcss-reporter": "^5.0.0",
+    "postcss-scss": "^1.0.5",
+    "stylelint": "^9.2.0",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-order": "^0.8.1",
+    "webpack": "^4.8.1",
+    "webpack-dev-middleware": "^3.1.3",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-hot-middleware": "^2.22.1",
     "webpack-module-hot-accept": "^1.0.5",
-    "yargs": "^8.0.1"
+    "yamljs": "^0.3.0",
+    "yargs": "^11.0.0"
+  },
+  "devDependencies": {
+    "gulp-uglify": "^3.0.0"
   }
 }

tasks/prepare.js

@@ -4,17 +4,26 @@ const config = require('./config');
 const fs = require('fs-extra');
 const dirTree = require('./helpers').dirTree;
 const fetch = require('node-fetch');
+const yaml = require('yamljs');
+const pkg = require('./../package.json');
 
 const rawgit = config.reader_path || 'https://rawgit.com/frontend/toolbox-reader/master/build/static';
-const dirs = ['atoms', 'molecules', 'organisms', 'pages'];
+const cssBundles = config.bundles !== undefined && config.bundles.scss !== undefined;
+const jsBundles = config.bundles !== undefined && config.bundles.js !== undefined;
 
 const prepare = async (done) => {
+  // Get local colors and data
   const colors = await fs.readJsonSync(`${config.project}/${config.src}config/colors.json`);
   const data = await fs.readJsonSync(`${config.project}/${config.src}config/data.json`);
 
+  // Set components types from components/ directory structure
+  const types = await dirTree(`${config.project}/${config.src}components`);
+  const dirs = Object.keys(types).slice(1);
+
   const components = {};
   const ignoreFiles = ['.gitkeep', '.DS_Store', 'index.md'];
 
+  // Create component collection object
   dirs.forEach((dir) => {
     let files = null;
     try {
@@ -31,8 +40,13 @@ const prepare = async (done) => {
       }
     });
 
+    const collection = files.map((file) => {
+      const filePath = `${config.project}/${config.src}components/${dir}/${file}/${file}.yml`;
+      return yaml.load(filePath);
+    });
+
     components[dir] = [];
-    files.forEach(file => components[dir].push(file));
+    components[dir].push(...collection);
   });
 
   // Get doc files
@@ -51,10 +65,16 @@ const prepare = async (done) => {
           window.data = ${JSON.stringify(data)};
           window.colors = ${JSON.stringify(colors)};
           window.version = "${config.version}";
+          window.builder = "${pkg.version}";
           ${ config.theme ? `window.theme = ${JSON.stringify(config.theme)};` : '' }
         </script>
-        <link rel="stylesheet" href="css/base.css">
         <link rel="stylesheet" href="${rawgit}/css/main.css">
+        ${ cssBundles
+          ? config.bundles.scss
+            .map(b =>  `<link rel="stylesheet" href="css/${b.name}.css">`)
+            .join('\n')
+          : '<link rel="stylesheet" href="css/base.css">'
+        }
         <link rel="stylesheet" href="css/styleguide.css">
       `).appendTo('head');
 
@@ -68,15 +88,17 @@ const prepare = async (done) => {
         $(`  <script src="js/vendors.min.js"></script>\n`).appendTo('body');
       }
 
-      if (!config.dev) {
-        $(`
-          <script src="js/vendors.bundle.js"></script>
-          <script src="js/app.bundle.js"></script>
-        `).appendTo('body');
+      if (config.dev) {
+        $('<script src="app.bundle.js"></script>').appendTo('body');
       } else {
         $(`
-          <script src="vendors.bundle.js"></script>
-          <script src="app.bundle.js"></script>
+          <script src="js/vendors.bundle.js"></script>
+          ${ jsBundles
+            ? config.bundles.js
+              .map(b =>  `<script src="js/${b.name}.bundle.js"></script>`)
+              .join('\n')
+            : '<script src="js/app.bundle.js"></script>'
+          }
         `).appendTo('body');
       }
 

tasks/scripts.js

@@ -8,6 +8,14 @@ const config = require('./config');
 const loadPlugins = require('gulp-load-plugins');
 const $ = loadPlugins();
 
+// Get javascript bundle config, format and assign it to Webpack entry
+const hasBundleConfig = config.bundles !== undefined && config.bundles.js !== undefined;
+const JSBundle = hasBundleConfig ? config.bundles.js.reduce((acc, val) => {
+  acc[val.name] = `${config.project}/${config.src}${val.src}`;
+  return acc;
+}, {}) : null;
+webpackSettings.entry = JSBundle || webpackSettings.entry;
+
 /**
  * Build JS
  * With error reporting on compiling (so that there's no crash)

tasks/serve.js

@@ -11,6 +11,17 @@ const styles = require('./styles');
 const scripts = require('./scripts');
 const icons = require('./icons');
 
+// Get javascript bundle config, format and assign it to Webpack entry
+const hasBundleConfig = config.bundles !== undefined && config.bundles.js !== undefined;
+let JSBundle = [...webpackSettings.entry.app, `${config.project}/${config.src}components/base.js`];
+if (hasBundleConfig) {
+  config.bundles.js.reduce((acc, val) => {
+    acc[val.name] = `${config.project}/${config.src}${val.src}`;
+    return acc;
+  }, webpackSettings.entry.app)
+}
+webpackSettings.entry.app = JSBundle;
+
 const bundler = webpack(webpackSettings);
 
 /**
@@ -84,7 +95,7 @@ const serve = () => {
     `${pathTo(config.src)}favicons/**/*`,
     `${pathTo(config.src)}fonts/**/*`,
     `${pathTo(config.src)}**/*.{json,md,twig,yml}`,
-    pathTo('docs/**/*.md')
+    pathTo('docs/**/*.{md,html}')
   ], gulp.series(
     'prepare',
     'copy-assets',