Update to Babel 7, use lodash-es

babel.config.js

@@ -0,0 +1,19 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      ['@babel/preset-env', { targets: { 'node': 6 } }]
+    ],
+    plugins: [
+      'add-module-exports',
+      'lodash',
+      'transform-es2015-modules-commonjs'
+    ],
+    env: {
+      test: {
+        plugins: ['istanbul']
+      }
+    }
+  };
+};

package.json

@@ -50,17 +50,18 @@
   },
   "dependencies": {
     "element-matches": "^0.1.2",
-    "lodash": "^4.17.10",
+    "lodash-es": "^4.17.10",
     "popper.js": "^1.14.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
     "autoprefixer": "^9.1.3",
-    "babel-core": "^6.26.3",
     "babel-loader": "^8.0.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-istanbul": "^5.0.1",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-preset-env": "^1.6.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "browser-sync": "^2.24.7",
     "browser-sync-webpack-plugin": "^2.2.2",
     "chai": "^4.1.2",

src/js/bind.js

@@ -1,5 +1,5 @@
 import { parseShorthand } from './utils.js';
-import _ from 'lodash';
+import { forOwn, isString, isUndefined } from 'lodash';
 
 /**
  * Sets up the handler to determine if we should advance the tour
@@ -9,7 +9,7 @@ function _setupAdvanceOnHandler(selector) {
   return (e) => {
     if (this.isOpen()) {
       const targetIsEl = this.el && e.target === this.el;
-      const targetIsSelector = !_.isUndefined(selector) && e.target.matches(selector);
+      const targetIsSelector = !isUndefined(selector) && e.target.matches(selector);
       if (targetIsSelector || targetIsEl) {
         this.tour.next();
       }
@@ -26,7 +26,7 @@ export function bindAdvance() {
   const handler = _setupAdvanceOnHandler.call(this, selector);
 
   // TODO: this should also bind/unbind on show/hide
-  if (!_.isUndefined(selector)) {
+  if (!isUndefined(selector)) {
     const el = document.querySelector(selector);
     el.addEventListener(event, handler);
   } else {
@@ -44,13 +44,13 @@ export function bindAdvance() {
  */
 export function bindButtonEvents(cfg, el) {
   cfg.events = cfg.events || {};
-  if (!_.isUndefined(cfg.action)) {
+  if (!isUndefined(cfg.action)) {
     // Including both a click event and an action is not supported
     cfg.events.click = cfg.action;
   }
 
-  _.forOwn(cfg.events, (handler, event) => {
-    if (_.isString(handler)) {
+  forOwn(cfg.events, (handler, event) => {
+    if (isString(handler)) {
       const page = handler;
       handler = () => this.tour.show(page);
     }

src/js/evented.js

@@ -1,13 +1,13 @@
-import _ from 'lodash';
+import { drop, isUndefined } from 'lodash';
 
 export class Evented {
   on(event, handler, ctx) {
     const once = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3];
 
-    if (_.isUndefined(this.bindings)) {
+    if (isUndefined(this.bindings)) {
       this.bindings = {};
     }
-    if (_.isUndefined(this.bindings[event])) {
+    if (isUndefined(this.bindings[event])) {
       this.bindings[event] = [];
     }
     this.bindings[event].push({ handler, ctx, once });
@@ -18,11 +18,11 @@ export class Evented {
   }
 
   off(event, handler) {
-    if (_.isUndefined(this.bindings) || _.isUndefined(this.bindings[event])) {
+    if (isUndefined(this.bindings) || isUndefined(this.bindings[event])) {
       return false;
     }
 
-    if (_.isUndefined(handler)) {
+    if (isUndefined(handler)) {
       delete this.bindings[event];
     } else {
       this.bindings[event].forEach((binding, index) => {
@@ -34,8 +34,8 @@ export class Evented {
   }
 
   trigger(event) {
-    if (!_.isUndefined(this.bindings) && this.bindings[event]) {
-      const args = _.drop(arguments);
+    if (!isUndefined(this.bindings) && this.bindings[event]) {
+      const args = drop(arguments);
 
       this.bindings[event].forEach((binding, index) => {
         const { ctx, handler, once } = binding;

src/js/step.js

@@ -1,4 +1,12 @@
-import _ from 'lodash';
+import {
+  forOwn,
+  isElement,
+  isEmpty,
+  isFunction,
+  isPlainObject,
+  isString,
+  isUndefined
+} from 'lodash';
 import { Evented } from './evented.js';
 import 'element-matches';
 import { bindAdvance, bindButtonEvents, bindCancelLink, bindMethods } from './bind.js';
@@ -104,14 +112,14 @@ export class Step extends Evented {
     const text = createFromHTML('<div class="shepherd-text"></div>');
     let paragraphs = this.options.text;
 
-    if (_.isFunction(paragraphs)) {
+    if (isFunction(paragraphs)) {
       paragraphs = paragraphs.call(this, text);
     }
 
     if (paragraphs instanceof HTMLElement) {
       text.appendChild(paragraphs);
     } else {
-      if (_.isString(paragraphs)) {
+      if (isString(paragraphs)) {
         paragraphs = [paragraphs];
       }
 
@@ -136,7 +144,7 @@ export class Step extends Evented {
       if (renderLocation instanceof HTMLElement) {
         return renderLocation.appendChild(element);
       }
-      if (_.isString(renderLocation)) {
+      if (isString(renderLocation)) {
         return document.querySelector(renderLocation).appendChild(element);
       }
     }
@@ -171,7 +179,7 @@ export class Step extends Evented {
       element.appendChild(createFromHTML('<div class="popper__arrow" x-arrow></div>'));
     }
 
-    if (!_.isUndefined(this.options.text)) {
+    if (!isUndefined(this.options.text)) {
       this._addContent(content);
     }
 
@@ -197,7 +205,7 @@ export class Step extends Evented {
     const opts = parsePosition(this.options.attachTo) || {};
     const returnOpts = Object.assign({}, opts);
 
-    if (_.isString(opts.element)) {
+    if (isString(opts.element)) {
       // Can't override the element in user opts reference because we can't
       // guarantee that the element will exist in the future.
       try {
@@ -236,7 +244,7 @@ export class Step extends Evented {
    * Triggers `destroy` event
    */
   destroy() {
-    if (_.isElement(this.el) && this.el.parentNode) {
+    if (isElement(this.el) && this.el.parentNode) {
       this.el.parentNode.removeChild(this.el);
       delete this.el;
     }
@@ -287,7 +295,7 @@ export class Step extends Evented {
    * Create the element and set up the popper instance
    */
   render() {
-    if (!_.isUndefined(this.el)) {
+    if (!isUndefined(this.el)) {
       this.destroy();
     }
     this.el = this._createElement();
@@ -308,9 +316,9 @@ export class Step extends Evented {
   scrollTo() {
     const { element } = this.getAttachTo();
 
-    if (_.isFunction(this.options.scrollToHandler)) {
+    if (isFunction(this.options.scrollToHandler)) {
       this.options.scrollToHandler(element);
-    } else if (_.isElement(element)) {
+    } else if (isElement(element)) {
       element.scrollIntoView();
     }
   }
@@ -326,7 +334,7 @@ export class Step extends Evented {
     this.destroy();
     this.id = this.options.id || `step-${uniqueId()}`;
 
-    _.forOwn(when, (handler, event) => {
+    forOwn(when, (handler, event) => {
       this.on(event, handler, this);
     });
 
@@ -338,9 +346,9 @@ export class Step extends Evented {
    * @return {*|Promise}
    */
   show() {
-    if (_.isFunction(this.options.beforeShowPromise)) {
+    if (isFunction(this.options.beforeShowPromise)) {
       const beforeShowPromise = this.options.beforeShowPromise();
-      if (!_.isUndefined(beforeShowPromise)) {
+      if (!isUndefined(beforeShowPromise)) {
         return beforeShowPromise.then(() => this._show());
       }
     }
@@ -355,15 +363,15 @@ export class Step extends Evented {
   _setUpButtons() {
     const { buttons } = this.options;
     if (buttons) {
-      const buttonsAreDefault = _.isUndefined(buttons) || _.isEmpty(buttons);
+      const buttonsAreDefault = isUndefined(buttons) || isEmpty(buttons);
       if (buttonsAreDefault) {
         this.options.buttons = [{
           text: 'Next',
           action: this.tour.next,
           classes: 'btn'
         }];
       } else {
-        const buttonsAreObject = _.isPlainObject(buttons);
+        const buttonsAreObject = isPlainObject(buttons);
         // Can pass in an object which will assume a single button
         if (buttonsAreObject) {
           this.options.buttons = [this.options.buttons];

src/js/tour.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { isFunction, isNumber, isString, isUndefined } from 'lodash';
 import { Evented } from './evented.js';
 import { Step } from './step.js';
 import { bindMethods } from './bind.js';
@@ -55,7 +55,7 @@ export class Tour extends Evented {
     let name, step;
 
     // If we just have one argument, we can assume it is an object of step options, with an id
-    if (_.isUndefined(arg2)) {
+    if (isUndefined(arg2)) {
       step = arg1;
     } else {
       name = arg1;
@@ -185,7 +185,7 @@ export class Tour extends Evented {
    * @return {Step} The step instance
    */
   setupStep(stepOptions, name) {
-    if (_.isString(name) || _.isNumber(name)) {
+    if (isString(name) || isNumber(name)) {
       stepOptions.id = name.toString();
     }
 
@@ -202,13 +202,13 @@ export class Tour extends Evented {
   show(key = 0, forward = true) {
     this._setupActiveTour();
 
-    const step = _.isString(key) ? this.getById(key) : this.steps[key];
+    const step = isString(key) ? this.getById(key) : this.steps[key];
 
     if (!step) {
       return;
     }
 
-    const shouldSkipStep = _.isFunction(step.options.showOn) && !step.options.showOn();
+    const shouldSkipStep = isFunction(step.options.showOn) && !step.options.showOn();
     // If `showOn` returns false, we want to skip the step, otherwise, show the step like normal
     if (shouldSkipStep) {
       this._skipStep(step, forward);

src/js/utils.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { isObjectLike, isUndefined, zipObject } from 'lodash';
 import Popper from 'popper.js';
 
 /**
@@ -18,7 +18,7 @@ export function createFromHTML(html) {
  * @return {Object} The object with `element` and `on` for the step
  */
 export function parsePosition(position) {
-  if (_.isObjectLike(position)) {
+  if (isObjectLike(position)) {
     if (position.hasOwnProperty('element') && position.hasOwnProperty('on')) {
       return position;
     }
@@ -44,21 +44,21 @@ export function parsePosition(position) {
  * @return {*}
  */
 export function parseShorthand(obj, props) {
-  if (obj === null || _.isUndefined(obj)) {
+  if (obj === null || isUndefined(obj)) {
     return obj;
-  } else if (_.isObjectLike(obj)) {
+  } else if (isObjectLike(obj)) {
     return obj;
   }
 
   const values = obj.split(' ');
-  return _.zipObject(props, values);
+  return zipObject(props, values);
 }
 
 /**
  * Determines options for Popper and initializes the Popper instance
  */
 export function setupPopper() {
-  if (_.isUndefined(Popper)) {
+  if (isUndefined(Popper)) {
     throw new Error('Using the attachment feature of Shepherd requires the Popper.js library');
   }
 
@@ -67,7 +67,7 @@ export function setupPopper() {
   let attachment = opts.on || 'right';
   opts.positionFixed = false;
 
-  if (_.isUndefined(opts.element)) {
+  if (isUndefined(opts.element)) {
     attachment = 'top';
     _setupCenteredPopper(opts);
   }

webpack.config.js

@@ -176,13 +176,7 @@ module.exports.push({
         include: [
           path.resolve(__dirname, 'src/js')
         ],
-        use: [{
-          loader: 'babel-loader',
-          options: {
-            'plugins': ['lodash'],
-            'presets': [['env', { 'modules': false, 'targets': { 'node': 6 } }]]
-          }
-        }]
+        loader: 'babel-loader'
       }
     ]
   },