feat: Simplified the example by removing Grunt (#30)

* fix: test suite

This patch updates the build process and fixes the test suite.

Notable changes:

- The "grunt" dependency has been removed (along with `Gruntfile.js`); instead, we just call `browserify` directly.
- Babel is run via the `babelify` transform.
- The CSS (services.css) is now properly included in the build.
- The `webcomponents.js` dependency is now imported into the build rather than arbitrary copied into the `dist/` directory.

This is required before we can tackle #29.

/cc @WilcoFiers

* fix: add missing "babel-core" dep

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "es2015", "react" ]
+}

example/.npmrc

@@ -0,0 +1 @@
+package-lock=false

example/index.html

@@ -27,7 +27,6 @@
 		    margin-bottom:20px;
 		}
 		</style>
-		<script src="dist/webcomponents.min.js"></script>
 		<script src="dist/bundle.js"></script>
 	</body>
-</html>
+</html>

example/package.json

@@ -5,28 +5,40 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "grunt default && http-server -u localhost -p 8888"
+    "prestart": "npm run build",
+    "start": "http-server -u localhost -p 8080",
+    "build": "browserify src/example.js --outfile dist/bundle.js"
   },
   "author": "Dylan Barrell (dylan@barrell.com)",
   "license": "MIT",
   "dependencies": {
     "axe-core": "^3.0.0-beta.1",
-    "browserify": "^16.0.0",
     "create-react-class": "^15.6.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-shadow": "^16.2.0",
     "webcomponents.js": "^0.7.24"
   },
   "devDependencies": {
+    "babel-core": "^6.26.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
+    "babelify": "^8.0.0",
+    "browserify": "^16.1.1",
     "browserify-css": "^0.14.0",
     "envify": "^3.4.0",
-    "grunt": "^1.0.1",
-    "grunt-babel": "^6.0.0",
-    "grunt-browserify": "^5.0.0",
-    "grunt-contrib-copy": "^1.0.0",
     "http-server": "^0.9.0"
+  },
+  "browserify": {
+    "transform": [
+      "babelify",
+      "envify",
+      [
+        "browserify-css",
+        {
+          "global": true
+        }
+      ]
+    ]
   }
 }

example/src/example.js

@@ -1,3 +1,4 @@
+import 'webcomponents.js/webcomponents.min.js'
 import React from 'react';
 import ReactDOM from 'react-dom';
 

example/src/services.css

@@ -13,7 +13,7 @@
   margin-bottom: 3px;
   position: relative;
   cursor: pointer;
-  
+
   transition: 0.3s;
 }
 
@@ -43,4 +43,4 @@
   background: none !important;
   cursor: default !important;
   padding-top: 10px !important;
-}
+}

package.json

@@ -4,8 +4,8 @@
   "description": "Dynamic accessibility analysis for React using axe-core",
   "main": "index.js",
   "scripts": {
-    "eslint": "./node_modules/.bin/eslint *.js",
-    "pretest": "cd example && grunt default && http-server . &",
+    "eslint": "eslint *.js",
+    "pretest": "cd example && npm run start &",
     "test": "eslint index.js && cypress run",
     "test:debug": "cypress open"
   },