Feature/webpack (#212)

* Feature/webpack (#211)

* add editorconfig for consistent coding styles

* Set default severity for stylelint so that the build- and linting process does not fail

* use relative paths

* usage of inline maps for welcome page styles

* using webpack alias to resolve popper.js

* webpack config for all scss and js sources
- usage of browser-sync to have live-reload
- stylelint inside build
- copy assets (popper.js) with CopyWebpackPlugin

* adjust webpack build scripts
- remove webpack-dev-server and use watch with browser-sync instead
- install missing dependencies for webpack build

* remove unwanted property to make build fail on lin violations

* expand css output for welcome page styles

* - revert index.html (need these paths for when we deploy to gh-pages)

* insert final new line

* enforce styles with eslint and stylelint, so we should not need this file

* add routes to browserstack for local dev and testing

* Update yarn.lock

* Bump some deps

* Set module to vanilla src version

* Start splitting apart files

* remove yarn docs script

* add cy step and a build for the gh pages

* test:ci already runs cy

* Remove unnecessary global installs

* Further split apart steps and tours

.stylelintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
   extends: 'stylelint-config-ship-shape'
-};
+};

.travis.yml

@@ -15,8 +15,6 @@ cache:
   yarn: true
 
 install:
-  - yarn global add postcss-cli
-  - yarn global add autoprefixer
   - yarn install --ignore-engines
 
 jobs:
@@ -57,7 +55,7 @@ jobs:
           fi
     - stage: gh-pages release
       script:
-        - yarn docs
+        - yarn build
       before_deploy:
         - git add -f --all dist/
       deploy:

package.json

@@ -17,30 +17,28 @@
     "Chuck Carpenter <[email protected]>"
   ],
   "scripts": {
-    "build": "webpack && yarn copy-deps",
+    "build": "yarn clean && webpack --mode production",
+    "postbuild": "rm -f dist/removable-*",
     "clean": "rm -rf dist",
-    "copy-deps": "cp -R ./node_modules/popper.js/dist/umd/. dist/js",
     "cy:open": "./node_modules/.bin/cypress open",
     "cy:run": "./node_modules/.bin/cypress run",
-    "prebuild:css": "node-sass --source-map true ./docs/welcome/sass/*.scss -o ./docs/welcome/css",
-    "prefix:css": "postcss --use autoprefixer -b 'last 2 versions' < ./docs/welcome/css/welcome.css",
-    "docs": "yarn build && yarn prebuild:css && yarn prefix:css",
     "lint:js": "eslint .",
     "lint:styles": "stylelint ./src/css/**/*.scss ./docs/welcome/sass/welcome.scss",
     "lint": "yarn lint:js && yarn lint:styles",
-    "start": "webpack-dev-server --open",
+    "start": "yarn watch",
     "start-test-server": "http-server",
     "test:ci": "yarn test:unit:ci && yarn test:cy:ci",
     "test:cy:ci": "start-server-and-test start-test-server http://localhost:8080 cy:run",
     "test:cy:watch": "start-server-and-test start-test-server http://localhost:8080 cy:open",
     "test:unit:ci": "karma start --single-run --browsers ChromeHeadlessNoSandbox",
     "test:unit:watch": "karma start --browsers Chrome",
     "test": "mocha",
-    "watch": "webpack --watch"
+    "watch": "yarn clean && webpack --watch --mode development"
   },
   "homepage": "http://shipshapecode.github.io/shepherd/docs/welcome/",
   "license": "MIT",
   "main": "dist/js/shepherd.js",
+  "module": "src/js/shepherd.js",
   "spm": {
     "main": "shepherd.js"
   },
@@ -53,18 +51,23 @@
     "babel-loader": "^7.1.4",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-env": "^1.6.1",
+    "browser-sync": "^2.24.6",
+    "browser-sync-webpack-plugin": "^2.2.2",
     "chai": "^4.1.2",
     "codeclimate-test-reporter": "^0.5.0",
+    "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",
     "cypress": "^3.0.3",
     "del": "^3.0.0",
     "eslint": "^5.1.0",
     "eslint-plugin-mocha": "^5.1.0",
     "eslint-plugin-ship-shape": "^0.6.0",
+    "extract-loader": "^2.0.1",
+    "file-loader": "^1.1.11",
     "glob": "^7.1.2",
     "http-server": "^0.11.1",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "karma": "^2.0.5",
+    "karma": "^3.0.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.2",
@@ -73,18 +76,18 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.0",
-    "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^5.2.0",
     "node-sass": "^4.9.2",
     "postcss": "^7.0.2",
-    "postcss-loader": "^2.1.6",
+    "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "source-map-loader": "^0.2.3",
     "start-server-and-test": "^1.7.0",
-    "style-loader": "^0.21.0",
-    "stylelint": "^9.3.0",
+    "style-loader": "^0.22.1",
+    "stylelint": "^9.4.0",
     "stylelint-config-ship-shape": "^0.4.0",
-    "uglifyjs-webpack-plugin": "^1.2.7",
+    "stylelint-webpack-plugin": "^0.10.5",
+    "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^4.16.3",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.5"

src/css/_rounded.scss

@@ -14,4 +14,4 @@
       }
     }
   }
-}
+}

src/css/_square.scss

@@ -30,4 +30,4 @@
 
 .shepherd-start-tour-button.shepherd-element {
   @include start-tour-button;
-}
+}

src/js/evented.js

@@ -0,0 +1,71 @@
+export class Evented {
+  constructor(/* options = {}*/) {
+    // TODO: do we need this empty constructor?
+  }
+
+  on(event, handler, ctx) {
+    const once = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3];
+
+    if (typeof this.bindings === 'undefined') {
+      this.bindings = {};
+    }
+    if (typeof this.bindings[event] === 'undefined') {
+      this.bindings[event] = [];
+    }
+    this.bindings[event].push({ handler, ctx, once });
+  }
+
+  once(event, handler, ctx) {
+    this.on(event, handler, ctx, true);
+  }
+
+  off(event, handler) {
+    if (typeof this.bindings === 'undefined' || typeof this.bindings[event] === 'undefined') {
+      return;
+    }
+
+    if (typeof handler === 'undefined') {
+      delete this.bindings[event];
+    } else {
+      let i = 0;
+      while (i < this.bindings[event].length) {
+        if (this.bindings[event][i].handler === handler) {
+          this.bindings[event].splice(i, 1);
+        } else {
+          ++i;
+        }
+      }
+    }
+  }
+
+  trigger(event) {
+    if (typeof this.bindings !== 'undefined' && this.bindings[event]) {
+      const _len = arguments.length;
+      const args = Array(_len > 1 ? _len - 1 : 0);
+      let i = 0;
+
+      for (let _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      while (i < this.bindings[event].length) {
+        const _bindings$event$i = this.bindings[event][i];
+        const { ctx, handler, once } = _bindings$event$i;
+
+        let context = ctx;
+        if (typeof context === 'undefined') {
+          context = this;
+        }
+
+        handler.apply(context, args);
+
+        if (once) {
+          this.bindings[event].splice(i, 1);
+        } else {
+          ++i;
+        }
+      }
+    }
+  }
+
+}