Move from gulp to webpack and upgrade to version 0.1.0

package.json

@@ -1,9 +1,12 @@
 {
   "name": "riot-mui",
-  "version": "0.0.17",
+  "version": "0.1.0",
   "description": "Set of material ui components for riot js.",
   "main": "build/js/riot-mui-min.js",
   "author": "Anton Miroshnichenko",
+  "scripts": {
+    "build": "./node_modules/webpack/bin/webpack.js"
+  },
   "contributors": [
     "Tim Garthwaite <[email protected]> (https://github.com/mividtim)"
   ],
@@ -12,16 +15,15 @@
   "devDependencies": {
     "babel": "^6.23.0",
     "babel-core": "^6.24.0",
-    "babel-preset-es2015": "^6.24.0",
-    "del": "^2.2.0",
-    "event-stream": "^3.3.2",
-    "gulp": "^3.9.0",
-    "gulp-babel": "^6.1.2",
-    "gulp-concat": "^2.6.1",
-    "gulp-minify": "0.0.15",
-    "gulp-minify-css": "^1.2.4",
-    "gulp-riot": "^1.1.0",
-    "gulp-sass": "^2.0.4",
-    "gulp-sourcemaps": "^1.6.0"
+    "babel-loader": "^7.0.0-beta.1",
+    "babel-preset-es2015-riot": "^1.1.0",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "node-sass": "^4.5.2",
+    "riotjs-loader": "^4.0.0",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "webpack": "^2.3.3",
+    "webpack-dev-server": "^2.3.2"
   }
 }

src/index.js

@@ -0,0 +1,38 @@
+require('./mixins/bound.es6');
+require('./mixins/collection.es6');
+require('./mixins/content.es6');
+require('./mixins/dynamicAttributes.es6');
+require('./mixins/riotHelpers.es6');
+require('./mixins/validate.es6');
+
+require('./material-elements/material-button/material-button.tag');
+require('./material-elements/material-card/material-card.tag');
+require('./material-elements/material-checkbox/material-checkbox.tag');
+require('./material-elements/material-combo/material-combo.tag');
+require('./material-elements/material-dropdown/material-dropdown.tag');
+require('./material-elements/material-dropdown-list/material-dropdown-list.tag');
+require('./material-elements/material-input/material-input.tag');
+require('./material-elements/material-navbar/material-navbar.tag');
+require('./material-elements/material-pane/material-pane.tag');
+require('./material-elements/material-popup/material-popup.tag');
+require('./material-elements/material-snackbar/material-snackbar.tag');
+require('./material-elements/material-spinner/material-spinner.tag');
+require('./material-elements/material-tabs/material-tabs.tag');
+require('./material-elements/material-textarea/material-textarea.tag');
+require('./material-elements/material-waves/material-waves.tag');
+
+require('./material-elements/material-button/material-button.scss');
+require('./material-elements/material-card/material-card.scss');
+require('./material-elements/material-checkbox/material-checkbox.scss');
+require('./material-elements/material-combo/material-combo.scss');
+require('./material-elements/material-dropdown/material-dropdown.scss');
+require('./material-elements/material-dropdown-list/material-dropdown-list.scss');
+require('./material-elements/material-input/material-input.scss');
+require('./material-elements/material-navbar/material-navbar.scss');
+require('./material-elements/material-pane/material-pane.scss');
+require('./material-elements/material-popup/material-popup.scss');
+require('./material-elements/material-snackbar/material-snackbar.scss');
+require('./material-elements/material-spinner/material-spinner.scss');
+require('./material-elements/material-tabs/material-tabs.scss');
+require('./material-elements/material-textarea/material-textarea.scss');
+require('./material-elements/material-waves/material-waves.scss');

src/material-elements/material-waves/material-waves.tag

@@ -1,6 +1,7 @@
 <material-waves>
     <div id="waves" ref="waves"></div>
     <script type="es6">
+        import Bound from '../../mixins/bound.es6'
         /**
          * Wave class. Contain wave node and
          * all of waves logic.

src/mixins/bound.es6

@@ -2,7 +2,7 @@
  * Bound class contain methods for
  * receiving bounds of DOM element.
  */
-class Bound {
+export default class Bound {
     /**
      * Get Bounds
      * @returns {*}

src/mixins/collection.es6

@@ -1,4 +1,4 @@
-let CollectionMixin = {
+export default class CollectionMixin {
     /**
      * Filter collection by criteria
      * @params prop - collection name
@@ -14,7 +14,7 @@ let CollectionMixin = {
             });
             return criteriaPass;
         })
-    },
+    }
     /**
      * Find something in collection
      * @params prop - collection name

src/mixins/dynamicAttributes.es6

@@ -18,7 +18,7 @@
  * will be changed after 1s and we will see following HTML
  * <my-tag disabled="false"></my-tag>
  */
-let DynamicAttributesMixin = {
+export default class DynamicAttributesMixin {
     init(){
         this.on('update', (updated)=>{
             if(updated && this.dynamicAttributes) {

src/mixins/riotHelpers.es6

@@ -1,4 +1,4 @@
-let RiotHelpers = {
+export default class RiotHelpers {
     /**
      * Find tag in pack
      */
@@ -10,7 +10,7 @@ let RiotHelpers = {
              }
          });
          return searched;
-     },
+     }
     /**
      * By the default riot don't support a camel case options
      * but in some cases we just use camel case, like a options

src/mixins/validate.es6

@@ -1,12 +1,12 @@
-let ValidateMixin = {
+export default class ValidateMixin {
     get base(){
       return {
           'email': /^(([\w\.\-_]+)@[\w\-\_]+(\.\w+){1,}|)$/i,
           'number': /^(\d+|)$/i,
           'tel': /^((\+|\d)?([\d\-\(\)\#])|)+$/i,
           'url': /([--:\w?@%&+~#=]*\.[a-z]{2,4}\/{0,2})((?:[?&](?:\w+)=(?:\w+))+|[--:\w?@%&+~#=]+)?/i
       }
-    },
+    }
     init(){
       if(!this.opts) console.debug('Sorry, but for using validate mixin you should add following code in your component: this.opts = opts;')
       if(this.opts && this.opts.valid) {
@@ -21,23 +21,23 @@ let ValidateMixin = {
       }else if(this.opts && Object.keys(this.base).indexOf(this.opts.type)!=-1) {
              this.validationType = 'Type';
       }
-    },
+    }
     validate(value){
         if(this.validationType)  {
             return this['validateBy'+this.validationType](value);
         }
         return null;
-    },
+    }
     validateByFunction(value) {
         if(this.validationFunction) {
             return this.validationFunction(value);
         }
-    },
+    }
     validateByRegexp(value) {
         if(this.validationRegexp) {
             return this.validationRegexp.test(value);
         }
-    },
+    }
     validateByType(value) {
         return this.base[this.opts.type].test(value);
     }

webpack.config.js

@@ -0,0 +1,62 @@
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const extractSass = new ExtractTextPlugin('styles/riot-mui.min.css');
+
+var plugins = [
+  new webpack.optimize.OccurrenceOrderPlugin(),
+  new webpack.optimize.UglifyJsPlugin({
+    test: /-min\.js$/
+  }),
+  extractSass
+];
+
+module.exports = {
+  entry: {
+    'riot-mui': './src/index',
+    'riot-mui-min': './src/index',
+  },
+  output: {
+    path: __dirname + '/build/',
+    filename: 'js/[name].js'
+  },
+  plugins: plugins,
+  devtool: false,
+  module: {
+    rules: [{
+      test: /\.tag$/,
+      enforce: 'pre',
+      exclude: /node_modules/,
+      loader: 'riotjs-loader',
+      query: {
+        type: 'none'
+      }
+    }, {
+      test: /\.js|\.tag|\.es6$/,
+      exclude: /node_modules/,
+      use: [{
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015-riot']
+        }
+      }]
+    }, {
+      test: /\.scss$/,
+      use: extractSass.extract({
+        fallback: 'style-loader',
+        use: [{
+          loader: 'css-loader',
+          query: {
+            minimize: true
+          }
+        }, 'sass-loader']
+      })
+    }]
+  },
+  devServer: {
+    contentBase: './',
+    historyApiFallback: true,
+    hot: true,
+    host: '0.0.0.0',
+    inline: true
+  }
+};