Merge remote-tracking branch 'origin/develop'

* origin/develop: (42 commits)
  remove chunk name
  update supported browsers
  upgrade to webpack 2
  start integration with webpack 2
  add styles for input inside toolbar vuematerial#395
  rename method
  remove custom click bindings
  apply theme-color based on primary theme color
  remove unnecessary Vue.extend on component definition
  deprecated click bubble
  normalize mobile and desktop events on ripple
  prevent ripple from getting undefined when ripple elements doesnt exists
  allow preventDefault in md-switch (vuematerial#435)
  enable swipe to open or close sidenav (vuematerial#429)
  enable multiple expansions in mdList vuematerial#442
  pause snackbar timeout on hover (vuematerial#434)
  fix position of md-list-action as first child vuematerial#408
  force list item to have buttons with type="button"
  recreate list item
  fix overflow button color theme in cards
  ...

Author: marcosmoura

.babelrc

@@ -2,7 +2,15 @@
   "presets": [
     "es2015",
     "es2017",
-    "stage-0"
+    "stage-0",
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 3 versions", "not IE < 11"]
+        }
+      }
+    ]
   ],
   "plugins": [
     "transform-runtime",

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules/
 npm-debug.log
+nbproject

README.md

@@ -20,7 +20,7 @@ Vue Material is lightweight framework built exactly according to the <a href="ht
 
 It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2. 
 
-Build powerful and well-designed web apps that can can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
+Build powerful and well-designed web apps that can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
 
 ## Demo and Documentation
 <a href="https://vuematerial.github.io/" target="_blank">Demo</a>

build/server/index.js

@@ -13,15 +13,14 @@ const app = express();
 const compiler = webpack(webpackConfig);
 const rootPath = path.join(__dirname, '..', '..');
 const devMiddlewareInstance = devMiddleware(compiler, {
+  quiet: true,
   publicPath: config.publicPath,
-  index: config.indexPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
+  index: config.indexPath
 });
 
-const hotMiddlewareInstance = hotMiddleware(compiler);
+const hotMiddlewareInstance = hotMiddleware(compiler, {
+  log() { }
+});
 
 compiler.plugin('compilation', (compilation) => {
   compilation.plugin('html-webpack-plugin-after-emit', (data, done) => {
@@ -36,14 +35,16 @@ app.use(hotMiddlewareInstance);
 app.use('/', express.static(path.join(rootPath, config.docsPath)));
 app.use('/assets', express.static(path.join(rootPath, config.assetsPath)));
 
-export default app.listen(config.server.port, (error) => {
+devMiddlewareInstance.waitUntilValid(() => {
   let uri = 'http://localhost:' + config.server.port;
 
+  console.log(chalk.blue('> Listening at ' + uri + '\n'));
+});
+
+export default app.listen(config.server.port, (error) => {
   if (error) {
     console.log(chalk.red(error));
 
     return;
   }
-
-  console.log(chalk.blue('Listening at ' + uri + '\n'));
 });

build/webpack/base.js

@@ -3,6 +3,10 @@ import webpack from 'webpack';
 import eslintFormatter from 'eslint-friendly-formatter';
 import config from '../config';
 
+const resolvePath = (dir) => {
+  return path.resolve(__dirname, '..', '..', dir);
+};
+
 export default {
   entry: {
     docs: './docs/src/index.js'
@@ -13,81 +17,50 @@ export default {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [config.nodePath],
+    extensions: ['.js', '.vue', '.json'],
     alias: {
-      assets: path.resolve(__dirname, '../../docs/src/assets')
+      assets: resolvePath('docs/src/assets')
     }
   },
-  resolveLoader: {
-    fallback: [config.nodePath]
-  },
   module: {
-    preLoaders: [
-      {
-        test: /\.vue$/,
-        loader: 'eslint',
-        include: config.projectRoot,
-        exclude: /node_modules/
-      },
+    rules: [
       {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: config.projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [
+          resolvePath('build'),
+          resolvePath('src'),
+          resolvePath('docs')
+        ],
+        options: {
+          fix: true,
+          formatter: eslintFormatter
+        }
       },
       {
         test: /\.js$/,
-        loader: 'babel',
-        include: config.projectRoot,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.css$/,
-        loader: 'vue-style-loader!css-loader'
-      },
-      {
-        test: /\.scss$/,
-        loader: 'vue-style-loader!css-loader!sass-loader'
+        loader: 'babel-loader',
+        include: [
+          resolvePath('build'),
+          resolvePath('src'),
+          resolvePath('docs')
+        ]
       },
       {
         test: /\.theme$/,
-        loaders: ['raw', 'sass-loader']
-      },
-      {
-        test: /\.json$/,
-        loaders: ['json-loader']
+        use: ['raw-loader', 'sass-loader']
       },
       {
-        test: /\.(png|jpg|gif|svg)(\?.*)?$/,
-        loader: 'url',
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
         query: {
           limit: 10000,
           name: '/assets/[name].[hash:8].[ext]'
         }
-      },
-      {
-        test: /\.html$/,
-        loader: 'vue-html'
       }
     ]
   },
-  eslint: {
-    fix: true,
-    formatter: eslintFormatter
-  },
-  vue: {
-    loaders: {
-      css: 'vue-style-loader!css-loader',
-      scss: 'vue-style-loader!css-loader!sass-loader'
-    }
-  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.env

build/webpack/debug-lib.js

@@ -1,4 +1,3 @@
-import webpack from 'webpack';
 import merge from 'webpack-merge';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import OptimizeJsPlugin from 'optimize-js-plugin';
@@ -12,11 +11,7 @@ const devConfig = merge(prodConfig, {
 });
 
 devConfig.plugins = [
-  new webpack.optimize.OccurenceOrderPlugin(),
-  new webpack.optimize.DedupePlugin(),
-  new OptimizeJsPlugin({
-    sourceMap: false
-  }),
+  new OptimizeJsPlugin(),
   new ExtractTextPlugin('[name].css')
 ];
 

build/webpack/dev.js

@@ -1,23 +1,47 @@
 import webpack from 'webpack';
 import merge from 'webpack-merge';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
 import baseWebpackConfig from './base';
 import config from '../config';
 
 Object.keys(baseWebpackConfig.entry).forEach((name) => {
-  baseWebpackConfig.entry[name] = ['./build/server/client'].concat(baseWebpackConfig.entry[name]);
+  baseWebpackConfig.entry[name] = ['./build/server/client', ...[baseWebpackConfig.entry[name]]];
 });
 
 export default merge(baseWebpackConfig, {
-  devtool: 'source-map',
+  devtool: '#eval-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: 'vue-style-loader!css-loader',
+            scss: 'vue-style-loader!css-loader!sass-loader'
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['vue-style-loader', 'css-loader']
+      },
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader']
+      }
+    ]
+  },
   plugins: [
     new webpack.WatchIgnorePlugin([config.nodePath]),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'docs/index.html',
       inject: true
-    })
+    }),
+    new FriendlyErrorsPlugin()
   ]
 });

build/webpack/prod-docs.js

@@ -11,31 +11,65 @@ import baseConfig from './base';
 
 const docsPath = path.join(config.rootPath, config.docsPath);
 
-export default merge(baseConfig, {
+const conf = merge(baseConfig, {
   output: {
     path: docsPath,
     publicPath: '',
     filename: '[name].[chunkhash:8].js',
     chunkFilename: '[name].[chunkhash:8].js'
   },
-  vue: {
-    loaders: {
-      css: ExtractTextPlugin.extract('css'),
-      scss: ExtractTextPlugin.extract('css!sass')
-    },
-    postcss: [
-      autoprefixer({
-        browsers: ['last 3 versions']
-      })
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract({
+              use: 'css-loader',
+              fallback: 'vue-style-loader'
+            }),
+            scss: ExtractTextPlugin.extract({
+              use: 'css-loader!sass-loader',
+              fallback: 'vue-style-loader'
+            })
+          },
+          postcss: [
+            autoprefixer({
+              browsers: ['last 3 versions', 'not IE < 11']
+            })
+          ]
+        }
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract({
+          use: 'css-loader',
+          fallback: 'vue-style-loader'
+        })
+      },
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract({
+          use: 'css-loader!sass-loader',
+          fallback: 'vue-style-loader'
+        })
+      }
     ]
   },
   plugins: [
-    new webpack.optimize.DedupePlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: true
+    }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
       },
-      comments: false
+      output: {
+        comments: false
+      },
+      sourceMap: false
     }),
     new OptimizeJsPlugin({
       sourceMap: false
@@ -96,7 +130,8 @@ export default merge(baseConfig, {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor']
-    }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    })
   ]
 });
+
+export default conf;