Merge pull request #56 from hegrec/webpack

MERC-409: Utilize standard import style

.eslintrc

@@ -3,7 +3,16 @@
         "indent": [
             2,
             4
-        ]
+        ],
+        "complexity": 1,
+        "no-alert": 0,
+        "consistent-return": 0,
+        "max-len": 0,
+        "prefer-rest-params": 0
+    },
+    "env": {
+        "es6": true,
+        "browser": true
     },
     "extends": "airbnb/base"
 }

.gitignore

@@ -1,3 +1,2 @@
 node_modules/
-jspm_packages/
 .DS_Store

.travis.yml

@@ -1,15 +1,13 @@
 language: node_js
 
 node_js:
-  - 0.12
+  - 4.4.0
 
-sudo: required
-dist: trusty
+sudo: false
 
 install:
   - npm install -g grunt-cli
   - npm install
-  - jspm install
 
 script:
   - grunt eslint

README.md

@@ -9,18 +9,16 @@ https://stencil.bigcommerce.com/docs/the-stencil-utils-package
 
 ### Getting Started
 Stencil Utils is written in ES6 and is currently transpiled to ES5 with babel for running client side within browsers.
-Stencil utils can either be imported to your theme by JSPM as a module for use with the SystemJS loader, or included as a standalone script.
+Stencil utils can either be imported to your theme as a module, or included as a standalone script.
 
 ### Installing Stencil Utils on your theme
 
-#### Using JSPM
-If your theme takes advantage of the JSPM dependency manager you can simply:
-* `cd` to the theme directory.
-* Run `jspm install github:bigcommerce/stencil-utils` to install the latest tagged version of stencil-utils for use with your theme.
+#### As an ES6 module
+* Run `npm install @bigcommerce/stencil-utils` to install the latest tagged version of stencil-utils for use with your theme.
 * Import the library `import utils from 'bigcommerce/stencil-utils';` in modules that depend on it.
 
 #### Using standalone
-If you do not want to use JSPM, Stencil Utils can be included as a normal script:
+If you do not want to support es6 modules, Stencil Utils can be included as a normal script:
 * Copy the bundled script from `dist/stencil-utils.min.js` to your theme.
 * Include the script in your HTML document
 * Access stencil utils from `window.stencilUtils`.

grunt/build.js

@@ -1,27 +1,44 @@
-var Jspm = require('jspm');
 var Fs  = require('fs');
 var Path = require('path');
+var config = require('../webpack.conf.js');
+var webpack = require('webpack');
 var options = {
-    entry: 'src/main',
-    dist: 'dist/stencil-utils.min.js',
-    minify: true,
-    sourceMaps: false
+    entry: './src/main.js',
+    output: {
+        path: Path.resolve(__dirname, '../dist'),
+        filename: 'stencil-utils.min.js',
+        library: ['stencilUtils']
+    },
+    devtool: false
 };
 
 module.exports = function(grunt) {
-    grunt.registerTask('build', 'Builds a self executing bundle with JSPM', function() {
+    grunt.registerTask('build', 'Builds a distributable bundle of stencil utils', function() {
         var done = this.async();
-        try{
-            Fs.statSync(Path.join(process.cwd(), 'jspm_packages'));
-        } catch(err) {
-            grunt.fail.fatal('Folder "jspm_packages" does not exist. Please run "jspm install" first');
-        }
+        var compiler;
+
+        // Don't include source maps for a distributable package
+        config.devtool = options.devtool;
+        config.entry = options.entry;
+        config.output = options.output;
+        config.plugins = [
+            new webpack.optimize.UglifyJsPlugin({
+                output: {
+                    comments: false
+                }
+            })
+        ];
+
+        compiler = webpack(config);
+
+        compiler.run(function(err, stats) {
+            if (err) {
+                throw err;
+            }
+
+            console.log('Distributable bundle created at: ' + Path.join(options.output.path, options.output.filename));
 
-        Jspm.setPackagePath(process.cwd());
-        Jspm.bundleSFX(options.entry, options.dist, {minify: options.minify, sourceMaps: options.sourceMaps}).then(function () {
             done();
-        }).catch(function(err, param2) {
-            grunt.fail.fatal(err);
         });
     });
 };

karma.conf.js

@@ -1,3 +1,7 @@
+var webpackTestConfig = require('./webpack.conf.js');
+
+webpackTestConfig.devtool = "inline-source-map";
+
 module.exports = function (config) {
     config.set({
 
@@ -6,11 +10,15 @@ module.exports = function (config) {
 
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['jspm', 'jasmine', 'es6-shim'],
+        frameworks: ['jasmine', 'es6-shim'],
 
         // start these browsers
         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-        browsers: ['PhantomJS2'],
+        browsers: ['PhantomJS'],
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_ERROR,
 
         // test results reporter to use
         // possible values: 'dots', 'progress'
@@ -25,39 +33,18 @@ module.exports = function (config) {
         colors: true,
 
         // list of files / patterns to load in the browser
-        files: [],
-
-        jspm: {
-            // Edit this to your needs
-            config: 'config.js',
-            loadFiles: [
-                'src/test-unit/**/*.spec.js'
-            ],
-            serveFiles: [
-                'src/api.js',
-                'src/main.js',
-                'src/tools.js',
-                'src/hooks.js',
-                'src/**/*.js'
-            ]
-        },
-
-        proxies: {
-            '/src': '/base/src',
-            '/jspm_packages': '/base/jspm_packages/'
-        },
-
-        // list of files to exclude
-        exclude: [],
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_ERROR,
-
+        files: [
+            {pattern: './src/**/*.spec.js', watched: false }
+        ],
         // preprocess matching files before serving them to the browser
         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
-            'src/**/*.js': ['babel']
+            './src/**/*.spec.js': ['webpack', 'sourcemap']
+        },
+        webpack: webpackTestConfig,
+
+        webpackMiddleware: {
+            noInfo: true
         }
     });
 };

package.json

@@ -1,44 +1,34 @@
 {
   "name": "@bigcommerce/stencil-utils",
   "version": "0.4.0",
-  "main": "dist/stencil-utils.min.js",
+  "main": "src/main.js",
   "license": "BSD-4-Clause",
   "author": "Bigcommerce",
-  "jspm": {
-    "main": "main",
-    "directories": {
-      "lib": "src"
-    },
-    "dependencies": {
-      "asyncly/EventEmitter2": "github:asyncly/[email protected]",
-      "jquery": "github:components/[email protected]"
-    },
-    "devDependencies": {
-      "babel": "npm:[email protected]",
-      "babel-runtime": "npm:[email protected]",
-      "core-js": "npm:[email protected]"
-    }
-  },
   "devDependencies": {
+    "babel-core": "6.5.2",
     "babel-eslint": "4.1.0",
-    "es6-shim": "0.28.1",
-    "eslint": "1.9.0",
-    "eslint-config-airbnb": "1.0.0",
+    "babel-loader": "6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "es6-shim": "^0.35.0",
+    "eslint": "2.4.0",
+    "eslint-config-airbnb": "6.0.2",
+    "eventemitter2": "^0.4.14",
     "grunt": "0.4.5",
-    "grunt-eslint": "17.3.1",
-    "grunt-karma": "0.12.0",
+    "grunt-eslint": "18.0.0",
+    "grunt-karma": "0.12.2",
     "jasmine-core": "2.2.0",
-    "jspm": "0.16.15",
-    "karma": "0.13.9",
-    "karma-babel-preprocessor": "5.2.1",
-    "karma-chrome-launcher": "0.1.7",
+    "jquery": "^2.2.1",
+    "karma": "0.13.22",
+    "karma-babel-preprocessor": "6.0.1",
     "karma-coverage": "0.2.7",
-    "karma-es6-shim": "0.1.3",
-    "karma-jasmine": "0.3.5",
-    "karma-jspm": "2.0.2",
-    "karma-phantomjs2-launcher": "0.3.2",
+    "karma-es6-shim": "^0.2.3",
+    "karma-jasmine": "^0.3.7",
+    "karma-phantomjs-launcher": "1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
     "karma-verbose-reporter": "0.0.2",
+    "karma-webpack": "^1.7.0",
     "load-grunt-config": "0.17.1",
-    "time-grunt": "1.2.2"
+    "time-grunt": "1.2.2",
+    "webpack": "^1.12.14"
   }
 }

src/api.js

@@ -16,7 +16,7 @@ const internals = {};
  * @param options
  * @param callback
  */
-internals.getPage = function(url, options, callback) {
+internals.getPage = function (url, options, callback) {
     request(url, {
         method: 'GET',
         requestOptions: options,

src/api/base.js

@@ -20,8 +20,8 @@ export default class
      */
     makeRequest(url, method, options, remote, callback) {
         request(url, {
-            method: method,
-            remote: remote,
+            method,
+            remote,
             requestOptions: options,
         }, callback);
     }