Merge branch 'next'

# Conflicts: # package-lock.json # package.json
usebedrock · Nov 5, 2020 · e826498 · e826498
2 parents 2209649 + 1278eeb
commit e826498
Show file tree

Hide file tree

Showing 22 changed files with 4,197 additions and 2,945 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-10.15.1
+14.15.0
diff --git a/content/js/index.js b/content/js/index.js
@@ -1 +1 @@
-require('../../core/js/index');
+import '../../core/js/index';
diff --git a/core/discovery/colors.js b/core/discovery/colors.js
@@ -3,7 +3,7 @@
 const fs = require('fs');
 const _ = require('lodash');
 const paths = require('../paths');
-const config = require('../../bedrock.config');
+const config = require('./config');
 
 function discover() {
 

diff --git a/core/discovery/components.js b/core/discovery/components.js
@@ -7,7 +7,7 @@ const fs = require('fs');
 const frontMatter = require('front-matter');
 const marked = require('marked');
 const chalk = require('chalk');
-const config = require('../../bedrock.config');
+const config = require('./config');
 const paths = require('../paths');
 
 const TEMPLATES_BASE_DIRECTORY = paths.content.templates.components;

diff --git a/core/discovery/config.js b/core/discovery/config.js
@@ -0,0 +1,48 @@
+const DEFAULT_CONFIG = {
+  styleguide: {
+    search: true,
+    colors: './content/scss/_colors.scss',
+    categoryOrder: [
+      'Style guide',
+      'Design patterns',
+      'Components'
+    ],
+    componentCategories: {
+      aov: 'Overviews',
+      c: 'Components',
+    }
+  },
+  icons: {
+    generateIconFont: false,
+    iconFontPath: "./content/scss/_icon-font.scss",
+    svgIconClassPrefix: 'o-svg-icon',
+    iconFontClassPrefix: 'if'
+  },
+  pug: {
+    pretty: true,
+    basedir: "./content"
+  },
+  prettify: {
+    indentWithTabs: true,
+    preserveNewlines: true,
+    inline: '',
+    logSuccess: false,
+    indentSize: 2,
+    unformatted: ['pre', 'textarea'],
+    extraLiners: ['body']
+  },
+
+  express: {
+    port: 8000,
+  },
+};
+const config = Object.assign({}, DEFAULT_CONFIG);
+
+try {
+  const projectConfig = require('../../bedrock.config');
+  Object.assign(config, projectConfig);
+} catch (err) {
+  console.log('No `bedrock.config.js` file was found at the root of your project. Using default configuration.');
+}
+
+module.exports = config;
diff --git a/core/discovery/docs.js b/core/discovery/docs.js
@@ -9,7 +9,7 @@ const _ = require('lodash');
 const paths = require('../paths');
 const pug = require('pug');
 const beautify = require('js-beautify').html;
-const config = require('../../bedrock.config');
+const config = require('./config');
 const locals = require('../templates/locals');
 
 module.exports = {

diff --git a/core/discovery/pages.js b/core/discovery/pages.js
@@ -10,6 +10,7 @@ const TEMPLATES_MODULE_DIRECTORY = paths.content.templates.modulesPath;
 
 function mapChildren(children, parent) {
   children = children.map((obj) => {
+    obj.path = obj.path.replace(TEMPLATES_BASE_DIRECTORY, '');
     obj = addPageInfo(obj, parent);
 
     if (obj.children) {
@@ -72,11 +73,14 @@ function movePageStatesToParentPage(obj, index, collection) {
 }
 
 function discover() {
-  const pagesAndFoldersSortedByType = _.chain(dirTree.directoryTree(TEMPLATES_BASE_DIRECTORY, ['.pug']).children)
-    .filter(obj => obj.path.charAt(0) !== '_')
+  const pagesAndFoldersSortedByType = _.chain(dirTree(TEMPLATES_BASE_DIRECTORY, {
+    extensions: /.pug/
+  }).children)
+    .filter(obj => !obj.name.startsWith('_'))
     .map(obj => {
       // Root item
       obj.parents = []
+      obj.path = obj.path.replace(TEMPLATES_BASE_DIRECTORY, '');
       obj = addPageInfo(obj, obj);
 
       if (obj.children) {

diff --git a/core/js/index.js b/core/js/index.js
@@ -1,10 +1,11 @@
-const $ = require('jquery');
-window.$ = $;
+import $ from 'jquery';
+
+import './prototype-nav';
+import './styleguide-code-samples';
+import './styleguide-typography';
+import './styleguide-search';
 
-require('./prototype-nav');
-require('./styleguide-code-samples');
-require('./styleguide-typography');
-require('./styleguide-search');
+window.$ = $;
 
 const rememberScroll = require('./styleguide-remember-scroll');
 

diff --git a/core/js/prototype-nav.js b/core/js/prototype-nav.js
@@ -1,6 +1,6 @@
 const $ = require('jquery');
 const packageJson = require('../../package.json');
-const config = require('../../bedrock.config');
+const config = require('../discovery/config');
 
 const ACTIVATION_KEYCODE = 77; // 'M' key or 'B' key for Windows
 const ACTIVATION_KEYCODE_WINDOWS = 66; // 'M' key or 'B' key for Windows

diff --git a/core/js/styleguide-code-samples.js b/core/js/styleguide-code-samples.js
@@ -1,7 +1,7 @@
 const $ = require('jquery');
 const Clipboard = require('clipboard');
 const Codemirror = require('codemirror');
-const config = require('../../bedrock.config');
+const config = require('../discovery/config');
 //require('codemirror/mode/javascript/javascript');
 require('codemirror/mode/pug/pug');
 require('codemirror/mode/xml/xml');
@@ -72,4 +72,4 @@ if (config.styleguide) {
     }
   });
 
-}
+}
diff --git a/core/paths.js b/core/paths.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const path = require('path');
-const config = require('./../bedrock.config');
+const config = require('./discovery/config');
 
 const contentPath = 'content/';
 const corePath = 'core/';
@@ -39,7 +39,8 @@ module.exports = {
       data: path.join(contentPath, 'data/*')
     },
     js: {
-      entryFile: path.join(contentPath, 'js/index.js')
+      entryFile: path.join(contentPath, 'js/index.js'),
+      allFiles: path.join(contentPath, 'js/**/*.js'),
     },
     icons: {
       sourceDirectory: path.join(contentPath, 'icons'),

diff --git a/core/tasks/browser-sync.js b/core/tasks/browser-sync.js
@@ -1,7 +1,7 @@
 const browserSync = require('browser-sync');
 const path = require('path');
 const paths = require('../paths');
-const config = require('../../bedrock.config');
+const config = require('../discovery/config');
 
 module.exports = function () {
   return browserSync.init({

diff --git a/core/tasks/bundle.js b/core/tasks/bundle.js
@@ -1,53 +1,18 @@
-const watchify = require('watchify');
-const browserify = require('browserify');
 const gulp = require('gulp');
-const source = require('vinyl-source-stream');
-const buffer = require('vinyl-buffer');
-const gutil = require('gulp-util');
-const sourcemaps = require('gulp-sourcemaps');
+const bro = require('gulp-bro');
+const rename = require('gulp-rename');
 const babelify = require('babelify');
-const _ = require('lodash');
-const paths = require('../paths');
-const errors = require('../util/errors');
-
-const opts = _.assign({}, watchify.args, {
-  entries: [paths.content.js.entryFile],
-  debug: true
-});
-
-function bundler() {
-  var bundle = watchify(browserify(opts));
-
-  bundle.transform(babelify, {
-    presets: ['es2015'],
-    plugins: ['transform-decorators-legacy', 'transform-class-properties']
-  });
 
-  bundle.on('update', bundler);
-  bundle.on('log', gutil.log);
-
-  return bundle.bundle()
-    .on('error', function (err) {
-      gutil.log(gutil.colors.red(err));
-      this.err = err;
-      this.emit('end');
-    })
-    .on('end', function () {
-      if (this.err) {
-        errors.updateError('js', {
-          message: this.err.message,
-        });
-      } else {
-        errors.clearError('js');
-      }
-
-      this.err = null;
-    })
-    .pipe(source('bundle.js'))
-    .pipe(buffer())
-    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
-    .pipe(sourcemaps.write('./')) // writes .map file
-    .pipe(gulp.dest(paths.compiled.js));
-}
+const paths = require('../paths');
 
-module.exports = bundler;
+module.exports = function () {
+  return gulp.src(paths.content.js.entryFile)
+    .pipe(bro({
+      debug: true,
+      transform: [
+        babelify.configure({ presets: ['@babel/preset-env'] }),
+      ]
+    }))
+    .pipe(rename('bundle.js'))
+    .pipe(gulp.dest(paths.compiled.js))
+};
diff --git a/core/tasks/icon-font.js b/core/tasks/icon-font.js
@@ -4,9 +4,10 @@ const replace = require('gulp-replace');
 const path = require('path');
 const es = require('event-stream');
 const exec = require('child_process').exec;
-const paths = require('../paths');
-const config = require('../../bedrock.config');
 const browserSync = require('browser-sync');
+const mkdirp = require('mkdirp');
+const paths = require('../paths');
+const config = require('../discovery/config');
 
 const FONT_NAME = 'icon-font';
 const TMP_DIRECTORY = './icon-font-tmp';
@@ -23,6 +24,8 @@ module.exports = function (done) {
     return done();
   }
 
+  mkdirp.sync(TMP_DIRECTORY);
+
   exec(cmd, function (err, stdout, stderr) {
     if (stdout.includes('error')) {
       throw new Error(stdout);

diff --git a/core/tasks/sass.js b/core/tasks/sass.js
@@ -8,7 +8,7 @@ const header = require('gulp-header');
 const autoprefixer = require('autoprefixer');
 const paths = require('../paths');
 const errors = require('../util/errors');
-const config = require('../../bedrock.config');
+const config = require('../discovery/config');
 
 var svgIconClassPrefix = config.icons && config.icons.svgIconClassPrefix || 'svg-icon'
 

diff --git a/core/tasks/server.js b/core/tasks/server.js
@@ -1,15 +1,10 @@
-const glob = require('glob');
 const chalk = require('chalk');
 const path = require('path');
 const express = require('express');
-const portfinder = require('portfinder');
 const beautify = require('js-beautify').html;
-const fs = require('fs');
 const _ = require('lodash');
 
-const config = require('../../bedrock.config');
-const colors = require('../discovery/colors');
-const pages = require('../discovery/pages');
+const config = require('../discovery/config');
 const components = require('../discovery/components');
 const docs = require('../discovery/docs');
 const paths = require('../paths');

diff --git a/core/tasks/templates.js b/core/tasks/templates.js
@@ -13,7 +13,7 @@ const moment = require('moment');
 const marked = require('marked');
 const del = require('del');
 const es = require('event-stream');
-const config = require('../../bedrock.config');
+const config = require('../discovery/config');
 const paths = require('../paths');
 const locals = require('../templates/locals');
 const docs = require('../discovery/docs');
@@ -33,7 +33,7 @@ module.exports = {
     });
   },
   compile: {
-    styleguide() {
+    styleguide(done) {
       const defaultLocals = getDefaultLocals();
 
       const tasks = Object.keys(defaultLocals.components.byGroup).map(componentGroup => {
@@ -68,9 +68,13 @@ module.exports = {
           .pipe(gulp.dest(paths.dist.styleguide))
       );
 
-      return es.merge.apply(null, tasks);
+      const stream = es.merge.apply(null, tasks);
+
+      stream.on('end', done);
+
+      return stream;
     },
-    docs() {
+    docs(done) {
       const defaultLocals = getDefaultLocals();
 
       const tasks = defaultLocals.docs.allDocs.map(doc => {
@@ -89,7 +93,11 @@ module.exports = {
           .pipe(gulp.dest(paths.dist.docs));
       });
 
-      return es.merge.apply(null, tasks);
+      const stream = es.merge.apply(null, tasks);
+
+      stream.on('end', done);
+
+      return stream;
     },
     content() {
       const templateFilter = filter(function (file) {

diff --git a/core/tasks/watch.js b/core/tasks/watch.js
@@ -1,6 +1,5 @@
 const gulp = require('gulp');
 const watch = require('gulp-watch');
-const path = require('path');
 const browserSync = require('browser-sync');
 const paths = require('../paths');
 
@@ -14,4 +13,5 @@ module.exports = function () {
   watch(paths.content.assets.resources, () => gulp.start('copy:resources'));
   watch(paths.content.iconFont.sourceFiles, () => gulp.start('icon-font'));
   watch(paths.content.icons.sourceFiles, () => browserSync.reload());
+  gulp.watch(paths.content.js.allFiles, gulp.series('bundle'));
 };
diff --git a/core/templates/locals.js b/core/templates/locals.js
@@ -3,7 +3,7 @@ const fs = require('fs');
 const pug = require('pug');
 const moment = require('moment');
 const marked = require('marked');
-const config = require('../../bedrock.config');
+const config = require('../discovery/config');
 const paths = require('../paths');
 const beautify = require('js-beautify').html;