API structuring + webpack config

.babelrc

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

assets/js/src/choices.js

@@ -1,62 +0,0 @@
-'use strict';
-
-class Choices {
-    constructor() {
-        const DEFAULT_CONFIG = {
-            element: '[data-choice]',
-            disabled: false,
-            maxItems: 0,
-            debug: false,
-            callbackOnInit: function(){},
-            callbackOnKeyDown: function(){},
-            callbackOnEnter: function(){},
-            callbackOnSearch: function(){}
-        };
-
-        this.onClick = this.onClick.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onChange.bind(this);
-
-        this.render();
-    }
-
-    onKeyDown() {
-        console.log('Key down');
-    }
-
-    onFocus() {
-        console.log('Focus');
-    }
-
-    onClick() {
-        console.log('Click');
-    }
-
-    onChange() {
-        console.log('Change');
-    }
-
-    addEventListeners() {
-        document.addEventListener('click', this.onClick);
-        document.addEventListener('keydown', this.onKeyDown);
-        document.addEventListener('change', this.onChange);
-        document.addEventListener('focus', this.onFocus);
-        document.addEventListener('blur', this.onBlur);
-    }
-
-    removeEventListeners() {
-        document.removeEventListener('click', this.onClick);
-        document.removeEventListener('keydown', this.onKeyDown);
-        document.removeEventListener('change', this.onChange);
-        document.removeEventListener('focus', this.onFocus);
-        document.removeEventListener('blur', this.onBlur);
-    }
-
-    render(){
-        console.log('Render');
-    }
-}
-
-new Choices();

assets/scripts/dist/bundle.js

@@ -0,0 +1 @@
+!function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="/assets/scripts/dist/",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var i,u=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}();"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(o,u){i=function(){return u(o)}.call(n,t,n,e),!(void 0!==i&&(e.exports=i))}(void 0,function(e){"use strict";var n=function(){function e(){o(this,e);this.onClick=this.onClick.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onChange=this.onChange.bind(this),this.onFocus=this.onFocus.bind(this),this.onBlur=this.onChange.bind(this),this.render()}return u(e,[{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"onKeyDown",value:function(){console.log("Key down")}},{key:"onFocus",value:function(){console.log("Focus")}},{key:"onClick",value:function(){console.log("Click")}},{key:"onChange",value:function(){console.log("Change")}},{key:"addEventListeners",value:function(){document.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("change",this.onChange),document.addEventListener("focus",this.onFocus),document.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(){document.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("change",this.onChange),document.removeEventListener("focus",this.onFocus),document.removeEventListener("blur",this.onBlur)}},{key:"setPlaceholder",value:function(){}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"search",value:function(){}},{key:"addItem",value:function(){}},{key:"removeItem",value:function(){}},{key:"removeAllItems",value:function(){}},{key:"createItemList",value:function(){}},{key:"render",value:function(){console.log("Render")}},{key:"destroy",value:function(){}}]),e}();new n})}]);

assets/scripts/src/choices.js

@@ -0,0 +1,137 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(function() {
+            return factory(root);
+        });
+    } else if (typeof exports === 'object') {
+        module.exports = factory;
+    } else {
+        root.Choices = factory(root);
+    }
+})(this, function (root) {
+
+    'use strict';
+
+    class Choices {
+        constructor() {
+            const DEFAULT_CONFIG = {
+                element: '[data-choice]',
+                disabled: false,
+                maxItems: 0,
+                debug: false,
+                callbackOnInit: function(){},
+                callbackOnRender: function(){},
+                callbackOnKeyUp: function(){},
+                callbackOnKeyDown: function(){},
+                callbackOnEntry: function(){},
+                callbackOnRemove: function(){}
+            };
+
+            this.onClick = this.onClick.bind(this);
+            this.onKeyDown = this.onKeyDown.bind(this);
+            this.onChange = this.onChange.bind(this);
+            this.onFocus = this.onFocus.bind(this);
+            this.onBlur = this.onChange.bind(this);
+
+            this.render();
+        }
+
+        /* State */
+
+        isOpen() {
+                    
+        }
+
+        isDisabled() {
+            
+        }
+
+        isEmpty() {
+
+        }
+
+        /* Event handling */
+
+        onKeyDown() {
+            console.log('Key down');
+        }
+
+        onFocus() {
+            console.log('Focus');
+        }
+
+        onClick() {
+            console.log('Click');
+        }
+
+        onChange() {
+            console.log('Change');
+        }
+
+        /* Event listeners */
+
+        addEventListeners() {
+            document.addEventListener('click', this.onClick);
+            document.addEventListener('keydown', this.onKeyDown);
+            document.addEventListener('change', this.onChange);
+            document.addEventListener('focus', this.onFocus);
+            document.addEventListener('blur', this.onBlur);
+        }
+
+        removeEventListeners() {
+            document.removeEventListener('click', this.onClick);
+            document.removeEventListener('keydown', this.onKeyDown);
+            document.removeEventListener('change', this.onChange);
+            document.removeEventListener('focus', this.onFocus);
+            document.removeEventListener('blur', this.onBlur);
+        }
+
+        /* Methods */
+
+        setPlaceholder() {
+
+        }
+
+        setValue() {
+
+        }
+
+        getValue() {
+
+        }
+
+        getPlaceholder() {
+
+        }
+
+        search() {
+
+        }
+
+        addItem() {
+
+        }
+
+        removeItem() {
+
+        }
+
+        removeAllItems() {
+
+        }
+
+        createItemList() {
+
+        }
+
+        render() {
+            console.log('Render');
+        }
+
+        destroy() {
+
+        }
+    };
+
+    new Choices();
+});

index.html

@@ -6,6 +6,6 @@
 </head>
 <body>
 <input type="text" data-choice>
-<script src="assets/js/src/choices.js"></script>
+<script src="assets/scripts/dist/bundle.js"></script>
 </body>
 </html>

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "choices",
+  "version": "1.0.0",
+  "description": "A vanilla JS customisable select box plugin",
+  "main": "index.js",
+  "scripts": {
+    "start": "node server.js",
+    "lint": "eslint ./assets/scripts/src",
+    "css:watch": "nodemon -e scss -x \"npm run css:build\"",
+    "css:build": "npm run css:sass -s && npm run css:prefix -s && npm run css:min -s",
+    "css:sass": "node-sass --include-path scss assets/styles/scss/main.scss assets/styles/css/main.css",
+    "css:prefix": "postcss --use autoprefixer -b 'last 2 versions' assets/styles/css/*.css -d assets/styles/css/",
+    "css:min": "csso assets/styles/css/main.css assets/styles/css/main.min.css",
+    "js:build": "webpack --config webpack.config.prod.js",
+    "js:test": "./node_modules/karma/bin/karma start --single-run --no-auto-watch tests/karma.config.js",
+    "js:test_watch": "./node_modules/karma/bin/karma start --auto-watch --no-single-run tests/karma.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jshjohnson/Choices.git"
+  },
+  "author": "Josh Johnson",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jshjohnson/Choices/issues"
+  },
+  "homepage": "https://github.com/jshjohnson/Choices#readme",
+  "devDependencies": {
+    "autoprefixer": "^6.3.3",
+    "babel-core": "^6.7.2",
+    "babel-eslint": "^5.0.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "csso": "^1.7.0",
+    "eslint": "^2.4.0",
+    "node-sass": "^3.4.2",
+    "nodemon": "^1.9.1",
+    "opn-cli": "^3.1.0",
+    "postcss-cli": "^2.5.1",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
+  }
+}

server.js

@@ -0,0 +1,13 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config.dev');
+var opn = require('opn');
+
+new WebpackDevServer(webpack(config), {
+    publicPath: config.output.publicPath,
+    historyApiFallback: true,
+}).listen(3000, 'localhost', function (err, result) {
+    if (err) console.log(err);
+    opn('http://localhost:3000');
+    console.log('Listening at localhost:3000');
+});

webpack.config.dev.js

@@ -0,0 +1,32 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    devtool: 'eval',
+    entry: [
+        'webpack-dev-server/client?http://localhost:3000',
+        './assets/scripts/src/choices'
+    ],
+    output: {
+        path: path.join(__dirname, 'dist'),
+        filename: 'bundle.js',
+        publicPath: '/assets/scripts/dist/'
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoErrorsPlugin(),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify('development')
+            }
+        })
+    ],
+    module: {
+        loaders: [{
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            loaders: ['babel'],
+            include: path.join(__dirname, 'assets/scripts/src')
+        }]
+    }
+};

webpack.config.prod.js

@@ -0,0 +1,41 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    devtool: 'cheap-module-source-map',
+    entry: [
+        './assets/scripts/src/choices'
+    ],
+    output: {
+        path: path.join(__dirname, '/assets/scripts/dist'),
+        filename: 'bundle.js',
+        publicPath: '/assets/scripts/dist/'
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            sourceMap: false,
+            mangle: true,
+            output: {
+                comments: false
+            },
+            compress: {
+                warnings: false,
+                screw_ie8: true
+            }
+        }),
+        new webpack.DefinePlugin({
+            'process.env': {
+                // This has effect on the react lib size
+                'NODE_ENV': JSON.stringify('production'),
+            }
+        }),
+    ],
+    module: {
+        loaders: [{
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            loaders: ['babel'],
+            include: path.join(__dirname, 'assets/scripts/src')
+        }]
+    }
+};