Update dependencies and update build

config/webpack.config.demo.js

@@ -11,7 +11,6 @@ const styleFileName = 'driver-demo.min.css';
 module.exports = {
   mode: isProduction ? 'production' : 'development',
   entry: [
-    !isProduction && 'webpack-dev-server/client?http://localhost:3000',
     './demo/styles/demo.scss',
     './demo/scripts/demo.js',
     './src/index.js',
@@ -46,7 +45,7 @@ module.exports = {
         loader: ExtractTextPlugin.extract([
           {
             loader: 'css-loader',
-            options: { minimize: isProduction, url: false },
+            options: { url: false },
           },
           'sass-loader',
         ]),
@@ -73,7 +72,10 @@ module.exports = {
       canPrint: true,
     }),
     new CopyWebpackPlugin([
-      { from: './demo/images/', to: 'images' }
+      {
+        from: './demo/images/',
+        to: 'images',
+      },
     ]),
     new HtmlWebpackPlugin({
       template: 'demo/index.html',

config/webpack.config.prod.js

@@ -38,7 +38,7 @@ module.exports = {
         loader: ExtractTextPlugin.extract([
           {
             loader: 'css-loader',
-            options: { minimize: true, url: false },
+            options: { url: false },
           },
           'sass-loader',
         ]),

demo/scripts/demo.js

@@ -6,7 +6,6 @@ document.addEventListener('DOMContentLoaded', function () {
     {
       element: document.getElementById('driver-demo-head'),
       popover: {
-        className: 'scoped-driver-popover',
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
         nextBtnText: 'Okay, Start!',
@@ -103,7 +102,6 @@ document.addEventListener('DOMContentLoaded', function () {
     opacity: 0.8,
     padding: 5,
     showButtons: true,
-    className: 'boring-scope'
   });
 
   boringTourDriver.defineSteps(tourSteps);
@@ -128,9 +126,10 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
 
-  document.querySelectorAll('pre code').forEach((element) => {
-    hljs.highlightBlock(element);
-  });
+  document.querySelectorAll('pre code')
+    .forEach((element) => {
+      hljs.highlightBlock(element);
+    });
 
 
 /////////////////////////////////////////////
@@ -150,9 +149,10 @@ document.addEventListener('DOMContentLoaded', function () {
   const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
   inputIds.forEach(inputId => {
     // Highlight the section on focus
-    document.getElementById(inputId).addEventListener('focus', () => {
-      focusDriver.highlight(`#${inputId}`);
-    });
+    document.getElementById(inputId)
+      .addEventListener('focus', () => {
+        focusDriver.highlight(`#${inputId}`);
+      });
   });
 
 /////////////////////////////////////////////
@@ -317,10 +317,11 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }]);
 
-  document.querySelector('#run-single-element-no-close').addEventListener('click', function (e) {
-    e.preventDefault();
-    singleNoClose.start();
-  });
+  document.querySelector('#run-single-element-no-close')
+    .addEventListener('click', function (e) {
+      e.preventDefault();
+      singleNoClose.start();
+    });
 
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position

package.json

@@ -18,33 +18,33 @@
   "author": "Kamran Ahmed <kamranahmed.se@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
+    "@babel/preset-env": "^7.3.1",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^1.0.0",
-    "cssnano": "^4.1.4",
-    "eslint": "^5.6.1",
+    "babel-loader": "^8.0.5",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^2.1.0",
+    "cssnano": "^4.1.8",
+    "eslint": "^5.13.0",
     "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-import": "^2.9.0",
-    "eslint-plugin-node": "^7.0.1",
-    "extract-loader": "^3.0.0",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-node": "^8.0.1",
+    "extract-loader": "^3.1.0",
     "extract-text-webpack-plugin": "next",
-    "file-loader": "^2.0.0",
+    "file-loader": "^3.0.1",
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.7.2",
-    "opn": "^5.2.0",
+    "node-sass": "^4.11.0",
+    "opn": "^5.4.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.0.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.0"
+    "webpack": "^4.29.2",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {}
 }

server.js

@@ -6,16 +6,17 @@ const config = require('./config/webpack.config.demo');
 
 const PORT = 3000;
 const HOST = 'localhost';
-const URL = `http://${HOST}:${PORT}/dist/demo`;
+const URL = `http://${HOST}:${PORT}`;
 
-new WebpackDevServer(webpack(config), {
-  publicPath: config.output.publicPath,
-}).listen(PORT, HOST, (error, result) => {
-  if (error) {
-    console.error(error);
-    return;
-  }
+config.entry.unshift(`webpack-dev-server/client?${URL}`);
 
-  opn(URL);
-  console.log(`Listening at ${URL}`);
-});
+new WebpackDevServer(webpack(config))
+  .listen(PORT, HOST, (error) => {
+    if (error) {
+      console.error(error);
+      return;
+    }
+
+    opn(URL);
+    console.log(`Listening at ${URL}`);
+  });

src/driver.scss

@@ -170,7 +170,7 @@ div#driver-popover-item {
 }
 
 div#driver-page-overlay {
-  background: black;
+  background: #000000;
   position: fixed;
   top: 0;
   left: 0;