Change all webpack tasks

.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["es2015", "stage-0"],
-  "plugins": ["transform-runtime"]
+  "presets": ["es2015", "stage-0"]
 }

.eslintignore

@@ -1,2 +0,0 @@
-build/*.js
-config/*.js

.eslintrc

@@ -28,9 +28,9 @@
     "arguments": true,
     "window": true
   },
-  root: true,
-  parserOptions: {
-    sourceType: 'module'
+  "root": true,
+  "parserOptions": {
+    "sourceType": "module"
   },
   "parser": "babel-eslint",
   "rules": {

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules/
-dist/
 npm-debug.log
 selenium-debug.log
 test/unit/coverage

TODO.md

@@ -1,3 +0,0 @@
-## TODO LIST
-
-Moved to GitHub Projects

build/build.js

@@ -1,34 +0,0 @@
-// https://github.com/shelljs/shelljs
-require('shelljs/global')
-env.NODE_ENV = 'production'
-
-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
-
-console.log(
-  '  Tip:\n' +
-  '  Built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-)
-
-var spinner = ora('building for production...')
-spinner.start()
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
-})

build/config.js

@@ -0,0 +1,34 @@
+import path from 'path';
+
+const config = {
+  projectRoot: path.resolve(__dirname, '../'),
+  rootPath: path.resolve(__dirname, '../dist'),
+  nodePath: path.resolve(__dirname, '../node_modules'),
+  docsPath: 'docs',
+  indexPath: 'docs/index.html',
+  publicPath: '/',
+  assetsPath: '/'
+};
+
+let dev = {
+  server: {
+    port: process.env.PORT || '8080'
+  },
+  env: {
+    NODE_ENV: '"development"'
+  }
+};
+
+let prod = {
+  env: {
+    NODE_ENV: '"production"'
+  }
+};
+
+if (config.env === 'production') {
+  Object.assign(config, prod);
+} else {
+  Object.assign(config, dev);
+}
+
+export default config;

build/dev-client.js

@@ -1,9 +0,0 @@
-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})

build/dev-server.js

@@ -1,65 +0,0 @@
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var config = require('../config')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  console.log('Listening at http://localhost:' + port + '\n')
-})

build/server/build-docs.js

@@ -0,0 +1,5 @@
+import webpack from 'webpack';
+import build from './build';
+import webpackConfig from '../webpack/prod-docs';
+
+webpack(webpackConfig, build);

build/server/build-lib.js

@@ -0,0 +1,5 @@
+import webpack from 'webpack';
+import build from './build';
+import webpackConfig from '../webpack/prod-lib';
+
+webpack(webpackConfig, build);

build/server/build.js

@@ -0,0 +1,25 @@
+import ora from 'ora';
+
+const spinner = ora({
+  text: 'Building...',
+  spinner: 'circleQuarters',
+  color: 'green'
+});
+
+spinner.start();
+
+export default function done(error, stats) {
+  if (error) {
+    throw error;
+  }
+
+  process.stdout.write('\n\n' + stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n');
+
+  spinner.stop();
+}

build/server/client.js

@@ -0,0 +1,8 @@
+import 'eventsource-polyfill';
+import hotClient from 'webpack-hot-middleware/client?noInfo=true&reload=true';
+
+hotClient.subscribe((event) => {
+  if (event.action === 'reload') {
+    window.location.reload();
+  }
+});

build/server/index.js

@@ -0,0 +1,51 @@
+import path from 'path';
+import express from 'express';
+import chalk from 'chalk';
+import webpack from 'webpack';
+import devMiddleware from 'webpack-dev-middleware';
+import hotMiddleware from 'webpack-hot-middleware';
+import historyApiFallback from 'connect-history-api-fallback';
+import config from '../config';
+import webpackConfig from '../webpack/dev';
+
+
+const app = express();
+const compiler = webpack(webpackConfig);
+const devMiddlewareInstance = devMiddleware(compiler, {
+  publicPath: config.publicPath,
+  index: config.indexPath,
+  stats: {
+    colors: true,
+    chunks: false
+  }
+});
+
+const hotMiddlewareInstance = hotMiddleware(compiler);
+
+compiler.plugin('compilation', (compilation) => {
+  compilation.plugin('html-webpack-plugin-after-emit', (data, done) => {
+    hotMiddlewareInstance.publish({ action: 'reload' });
+    done();
+  });
+});
+
+app.use(historyApiFallback());
+app.use(devMiddlewareInstance);
+app.use(hotMiddlewareInstance);
+app.use(express.static(__dirname + config.devPath));
+
+app.get('*', function(req, res) {
+  res.sendFile(path.join(__dirname, 'index.html'));
+});
+
+export default app.listen(config.server.port, (error) => {
+  let uri = 'http://localhost:' + config.server.port;
+
+  if (error) {
+    console.log(chalk.red(error));
+
+    return;
+  }
+
+  console.log(chalk.blue('Listening at ' + uri + '\n'));
+});

build/utils.js

@@ -1,56 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-exports.assetsPath = function (_path) {
-  return path.posix.join(config.build.assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
-    var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
-      if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
-      } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
-      }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
-
-    if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
-    } else {
-      return ['vue-style-loader', sourceLoader].join('!')
-    }
-  }
-
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
-  return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      loader: loader
-    })
-  }
-  return output
-}

build/webpack.base.conf.js

@@ -1,90 +0,0 @@
-var path = require('path');
-var config = require('../config');
-var utils = require('./utils');
-var projectRoot = path.resolve(__dirname, '../');
-
-module.exports = {
-  entry: {
-    app: './src/docs/index.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
-    filename: '[name].js'
-  },
-  resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [path.join(__dirname, '../node_modules')],
-    alias: {
-      src: path.resolve(__dirname, '../src'),
-      assets: path.resolve(__dirname, '../src/assets'),
-      components: path.resolve(__dirname, '../src/components')
-    }
-  },
-  resolveLoader: {
-    fallback: [path.join(__dirname, '../node_modules')]
-  },
-  module: {
-    preLoaders: [
-      {
-        test: /\.vue$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        include: projectRoot,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.json$/,
-        loader: 'json'
-      },
-      {
-        test: /\.theme$/,
-        loaders: ['raw', 'sass']
-      },
-      {
-        test: /\.html$/,
-        loader: 'vue-html'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  eslint: {
-    fix: true,
-    formatter: require('eslint-friendly-formatter')
-  },
-  vue: {
-    loaders: utils.cssLoaders()
-  }
-};

build/webpack.dev.conf.js

@@ -1,34 +0,0 @@
-var config = require('../config');
-var webpack = require('webpack');
-var merge = require('webpack-merge');
-var utils = require('./utils');
-var baseWebpackConfig = require('./webpack.base.conf');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-
-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function(name) {
-  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]);
-});
-
-module.exports = merge(baseWebpackConfig, {
-  module: {
-    loaders: utils.styleLoaders()
-  },
-  // eval-source-map is faster for development
-  devtool: '#inline-source-map',
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': config.dev.env
-    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true
-    })
-  ]
-});

build/webpack.prod.conf.js

@@ -1,98 +0,0 @@
-var path = require('path');
-var config = require('../config');
-var utils = require('./utils');
-var webpack = require('webpack');
-var merge = require('webpack-merge');
-var baseWebpackConfig = require('./webpack.base.conf');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env;
-
-var webpackConfig = merge(baseWebpackConfig, {
-  module: {
-    loaders: utils.styleLoaders({
-      extract: true
-    })
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('[name].min.js'),
-    chunkFilename: utils.assetsPath('[id].min.js')
-  },
-  vue: {
-    loaders: utils.cssLoaders({
-      extract: true
-    })
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    // extract css into its own file
-    new ExtractTextPlugin(utils.assetsPath('[name].min.css')),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function(module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          (/\.js$/).test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        );
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    })
-  ]
-});
-
-if (config.build.productionGzip) {
-  var CompressionWebpackPlugin = require('compression-webpack-plugin');
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  );
-}
-
-module.exports = webpackConfig;

build/webpack/base.js

@@ -0,0 +1,103 @@
+import path from 'path';
+import webpack from 'webpack';
+import autoprefixer from 'autoprefixer';
+import eslintFormatter from 'eslint-friendly-formatter';
+import config from '../config';
+
+
+const buildAssetsPath = (_path) => {
+  return path.posix.join(_path);
+};
+
+export default {
+  entry: {
+    'docs/docs': './docs/src/index.js'
+  },
+  output: {
+    path: config.rootPath,
+    publicPath: config.publicPath,
+    filename: '[name].js'
+  },
+  resolve: {
+    extensions: ['', '.js', '.vue'],
+    fallback: [config.nodePath],
+    alias: {
+      vue: 'vue/dist/vue.common.js'
+    }
+  },
+  resolveLoader: {
+    fallback: [config.nodePath]
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: config.projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: config.projectRoot,
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        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'
+      },
+      {
+        test: /\.theme$/,
+        loaders: ['raw', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'vue-html'
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: buildAssetsPath('img/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  eslint: {
+    fix: true,
+    formatter: eslintFormatter
+  },
+  vue: {
+    loaders: {
+      css: 'vue-style-loader!css-loader',
+      scss: 'vue-style-loader!css-loader!sass-loader'
+    },
+    postcss: [
+      autoprefixer({
+        browsers: ['last 2 versions']
+      })
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.env
+    })
+  ]
+};

build/webpack/dev.js

@@ -0,0 +1,21 @@
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import baseWebpackConfig from './base';
+
+Object.keys(baseWebpackConfig.entry).forEach((name) => {
+  baseWebpackConfig.entry[name] = ['./build/server/client'].concat(baseWebpackConfig.entry[name]);
+});
+
+export default merge(baseWebpackConfig, {
+  devtool: '#inline-source-map',
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'docs/index.html',
+      inject: true
+    })
+  ]
+});

build/webpack/prod-docs.js

@@ -0,0 +1,47 @@
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import config from '../config';
+import baseWebpackConfig from './base';
+
+export default merge(baseWebpackConfig, {
+  vue: {
+    loaders: {
+      css: ExtractTextPlugin.extract('css'),
+      scss: ExtractTextPlugin.extract(['css', 'sass'])
+    }
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new ExtractTextPlugin('[name].css'),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: config.indexPath,
+      inject: true,
+      minify: {
+        caseSensitive: true,
+        collapseBooleanAttributes: true,
+        collapseWhitespace: true,
+        minifyCSS: true,
+        minifyJS: true,
+        preventAttributesEscaping: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+        removeCommentsFromCDATA: true,
+        removeEmptyAttributes: true,
+        removeOptionalTags: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true
+      },
+      chunksSortMode: 'dependency'
+    })
+  ]
+});

build/webpack/prod-lib.js

@@ -0,0 +1,49 @@
+import fs from 'fs';
+import path from 'path';
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import config from '../config';
+import baseConfig from './base';
+
+function getDirectories(src) {
+  return fs.readdirSync(src).filter((file) => {
+    return fs.statSync(path.join(src, file)).isDirectory();
+  });
+}
+
+const componentsPath = 'src/components';
+const components = getDirectories(path.resolve(__dirname, '../../', componentsPath));
+
+baseConfig.entry = {
+  'vue-material': ['./src/index.js'],
+  'components/mdCore/index': ['./src/core']
+};
+
+components.forEach((component) => {
+  baseConfig.entry[path.join('components', component, 'index')] = ['./' + path.join(componentsPath, component)];
+});
+
+export default merge(baseConfig, {
+  output: {
+    path: config.rootPath,
+    filename: '[name].js',
+    library: 'VueMaterial',
+    libraryTarget: 'umd'
+  },
+  vue: {
+    loaders: {
+      css: ExtractTextPlugin.extract('css'),
+      scss: ExtractTextPlugin.extract(['css', 'sass'])
+    }
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new ExtractTextPlugin('[name].css')
+  ]
+});

config/dev.env.js

@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
-})

config/index.js

@@ -1,22 +0,0 @@
-// see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
-
-module.exports = {
-  build: {
-    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: '',
-    assetsPublicPath: '/',
-    productionSourceMap: true,
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css']
-  },
-  dev: {
-    env: require('./dev.env'),
-    port: 8080,
-    assetsSubDirectory: '',
-    assetsPublicPath: '/',
-    proxyTable: {}
-  }
-}

config/prod.env.js

@@ -1,3 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"'
-}

config/test.env.js

@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var devEnv = require('./dev.env')
-
-module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
-})

docs/README.md

@@ -0,0 +1,27 @@
+# Vue.js Material Docs
+
+> Material Design for Vue.js
+
+## Build Setup
+
+``` bash
+### install dependencies
+npm install
+
+### serve with hot reload at localhost:8080
+npm run dev
+
+### build for production with minification
+npm run build
+
+### run unit tests
+npm run unit
+
+### run e2e tests
+npm run e2e
+
+### run all tests
+npm test
+```
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

docs/src/App.vue

@@ -148,7 +148,7 @@
 </template>
 
 <style lang="scss">
-  @import '../core/stylesheets/variables.scss';
+  @import '../../src/core/stylesheets/variables.scss';
 
   $sizebar-size: 280px;
 

docs/src/components/code-block.vue

@@ -5,7 +5,7 @@
 </template>
 
 <style lang="scss">
-  @import '../../core/stylesheets/variables.scss';
+  @import '../../../src/core/stylesheets/variables.scss';
 
   .code-block {
     width: auto;

docs/src/components/demo-page.vue

@@ -31,7 +31,7 @@
 </template>
 
 <style lang="scss">
-  @import '../../core/stylesheets/variables.scss';
+  @import '../../../src/core/stylesheets/variables.scss';
 
   .demo-page {
     display: flex;

docs/src/components/single-page-banner.vue

@@ -15,7 +15,7 @@
 </template>
 
 <style lang="scss">
-  @import '../../core/stylesheets/variables.scss';
+  @import '../../../src/core/stylesheets/variables.scss';
 
   .single-page-banner {
     min-height: 256px;

docs/src/components/single-page-section.vue

@@ -7,7 +7,7 @@
 </template>
 
 <style lang="scss">
-  @import '../../core/stylesheets/variables.scss';
+  @import '../../../src/core/stylesheets/variables.scss';
 
   .single-page-section {
     + .single-page-section {

docs/src/components/single-page.vue

@@ -19,7 +19,7 @@
 </template>
 
 <style lang="scss">
-  @import '../../core/stylesheets/variables.scss';
+  @import '../../../src/core/stylesheets/variables.scss';
 
   .single-page-content {
     width: 100%;

docs/src/config.js

@@ -1,9 +1,9 @@
 import Vue from 'vue';
-import VueMaterial from '../vue-material';
+import VueMaterial from '../../src';
 
-VueMaterial.enableAll(Vue);
+Vue.use(VueMaterial);
 
-Vue.use(VueMaterial.MdTheme, {
+Vue.material.theme.registerAll({
   default: {
     primary: 'cyan',
     accent: 'pink'

docs/src/pages/GettingStarted.vue

@@ -30,17 +30,11 @@ var VueMaterial = require('../vue-material');
     <single-page-section label="Usage">
       <p>Enable Vue Material in your application using enableAll method. If you want to enable only some components you can enable them using <code>Vue.use()</code>:</p>
       <code-block lang="javascript">
-VueMaterial.enableAll(Vue);
+Vue.use(VueMaterial);
 
 // OR
 
-Vue.use(VueMaterial.MdTheme, {
-  default: {
-    primary: 'cyan',
-    accent: 'pink'
-  }
-});
-Vue.use(VueMaterial.MdInkRipple);
+Vue.use(VueMaterial.MdCore); //This is required to boot Vue Material
 Vue.use(VueMaterial.MdButton);
 Vue.use(VueMaterial.MdIcon);
 Vue.use(VueMaterial.MdSidenav);

docs/src/pages/components/List.vue

@@ -630,7 +630,7 @@
 </template>
 
 <style lang="scss">
-  @import '../../../core/stylesheets/variables.scss';
+  @import '../../../../src/core/stylesheets/variables.scss';
 
   .phone-viewport {
     width: 360px;

package.json

@@ -1,16 +1,19 @@
 {
-  "name": "vuejs-material",
+  "name": "vue-material",
   "description": "Material Design for Vue.js",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Marcos Moura <marcosvmmoura@gmail.com>",
   "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/marcosmoura/vue-material.git"
   },
+  "main": "dist/vue-material.js",
   "scripts": {
-    "dev": "node build/dev-server.js",
-    "build": "node build/build.js",
+    "dev": "babel-node build/server/index.js --presets es2015,stage-0",
+    "build:docs": "babel-node build/server/build-docs.js --presets es2015,stage-0",
+    "build:lib": "babel-node build/server/build-lib.js --presets es2015,stage-0",
+    "build": "rm -rf dist && npm run build:docs && npm run build:lib",
     "lint": "eslint --ext .js,.vue --fix src"
   },
   "dependencies": {
@@ -21,13 +24,15 @@
     "vue": "^2.0.1"
   },
   "devDependencies": {
+    "autoprefixer": "^6.5.0",
     "babel-core": "^6.17.0",
     "babel-eslint": "^7.0.0",
     "babel-loader": "^6.2.5",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
-    "babel-runtime": "^6.11.6",
+    "babili-webpack-plugin": "^0.0.5",
+    "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "css-loader": "^0.25.0",
     "eslint": "^3.7.1",
@@ -38,16 +43,11 @@
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
-    "function-bind": "^1.1.0",
-    "highlightjs": "^8.7.0",
     "html-webpack-plugin": "^2.22.0",
-    "http-proxy-middleware": "^0.17.2",
-    "json-loader": "^0.5.4",
     "node-sass": "^3.10.1",
     "ora": "^0.3.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^4.0.2",
-    "shelljs": "^0.7.4",
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
@@ -55,8 +55,8 @@
     "vue-router": "^2.0.0",
     "vue-style-loader": "^1.0.0",
     "vue-template-compiler": "^2.0.1",
-    "webpack": "^1.13.1",
-    "webpack-dev-middleware": "^1.8.3",
+    "webpack": "^1.13.2",
+    "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"
   }

src/components/mdAvatar/index.js

@@ -4,5 +4,5 @@ import mdAvatarTheme from './mdAvatar.theme';
 export default function install(Vue) {
   Vue.component('md-avatar', Vue.extend(mdAvatar));
 
-  window.VueMaterial.styles.push(mdAvatarTheme);
+  Vue.material.styles.push(mdAvatarTheme);
 }

src/components/mdBottomBar/index.js

@@ -6,5 +6,5 @@ export default function install(Vue) {
   Vue.component('md-bottom-bar', Vue.extend(MdBottomBar));
   Vue.component('md-bottom-bar-item', Vue.extend(MdBottomBarItem));
 
-  window.VueMaterial.styles.push(MdBottomBarTheme);
+  Vue.material.styles.push(MdBottomBarTheme);
 }

src/components/mdButton/index.js

@@ -4,5 +4,5 @@ import MdButtonTheme from './mdButton.theme';
 export default function install(Vue) {
   Vue.component('md-button', Vue.extend(MdButton));
 
-  window.VueMaterial.styles.push(MdButtonTheme);
+  Vue.material.styles.push(MdButtonTheme);
 }

src/components/mdButtonToggle/index.js

@@ -4,5 +4,5 @@ import mdButtonToggleTheme from './mdButtonToggle.theme';
 export default function install(Vue) {
   Vue.component('md-button-toggle', Vue.extend(mdButtonToggle));
 
-  window.VueMaterial.styles.push(mdButtonToggleTheme);
+  Vue.material.styles.push(mdButtonToggleTheme);
 }

src/components/mdCheckbox/index.js

@@ -4,5 +4,5 @@ import mdCheckboxTheme from './mdCheckbox.theme';
 export default function install(Vue) {
   Vue.component('md-checkbox', Vue.extend(mdCheckbox));
 
-  window.VueMaterial.styles.push(mdCheckboxTheme);
+  Vue.material.styles.push(mdCheckboxTheme);
 }

src/components/mdIcon/index.js

@@ -4,5 +4,5 @@ import mdIconTheme from './mdIcon.theme';
 export default function install(Vue) {
   Vue.component('md-icon', Vue.extend(mdIcon));
 
-  window.VueMaterial.styles.push(mdIconTheme);
+  Vue.material.styles.push(mdIconTheme);
 }

src/components/mdInputContainer/index.js

@@ -8,5 +8,5 @@ export default function install(Vue) {
   Vue.component('md-input', mdInput);
   Vue.component('md-textarea', mdTextarea);
 
-  window.VueMaterial.styles.push(mdInputContainerTheme);
+  Vue.material.styles.push(mdInputContainerTheme);
 }

src/components/mdList/index.js

@@ -8,5 +8,5 @@ export default function install(Vue) {
   Vue.component('md-list-item', Vue.extend(mdListItem));
   Vue.component('md-list-expand', Vue.extend(mdListExpand));
 
-  window.VueMaterial.styles.push(mdListTheme);
+  Vue.material.styles.push(mdListTheme);
 }

src/components/mdList/mdList.scss

@@ -247,11 +247,11 @@
       }
     }
 
-    .md-list-expand-indicator {
+    > .md-list-item-container .md-list-expand-indicator {
       transform: rotateZ(180deg) translate3D(0, 0, 0);
     }
 
-    .md-list-expand {
+    > .md-list-expand {
       margin-bottom: 0 !important;
     }
   }

src/components/mdRadio/index.js

@@ -4,5 +4,5 @@ import mdRadioTheme from './mdRadio.theme';
 export default function install(Vue) {
   Vue.component('md-radio', Vue.extend(mdRadio));
 
-  window.VueMaterial.styles.push(mdRadioTheme);
+  Vue.material.styles.push(mdRadioTheme);
 }

src/components/mdSelect/index.js

@@ -8,5 +8,5 @@ export default function install(Vue) {
   Vue.component('md-option', Vue.extend(mdOption));
   Vue.component('md-optgroup', Vue.extend(mdOptgroup));
 
-  window.VueMaterial.styles.push(mdSelectTheme);
+  Vue.material.styles.push(mdSelectTheme);
 }

src/components/mdSidenav/index.js

@@ -4,5 +4,5 @@ import mdSidenavTheme from './mdSidenav.theme';
 export default function install(Vue) {
   Vue.component('md-sidenav', Vue.extend(mdSidenav));
 
-  window.VueMaterial.styles.push(mdSidenavTheme);
+  Vue.material.styles.push(mdSidenavTheme);
 }

src/components/mdSubheader/index.js

@@ -4,5 +4,5 @@ import mdSubheaderTheme from './mdSubheader.theme';
 export default function install(Vue) {
   Vue.component('md-subheader', Vue.extend(mdSubheader));
 
-  window.VueMaterial.styles.push(mdSubheaderTheme);
+  Vue.material.styles.push(mdSubheaderTheme);
 }

src/components/mdSwitch/index.js

@@ -4,5 +4,5 @@ import mdSwitchTheme from './mdSwitch.theme';
 export default function install(Vue) {
   Vue.component('md-switch', Vue.extend(mdSwitch));
 
-  window.VueMaterial.styles.push(mdSwitchTheme);
+  Vue.material.styles.push(mdSwitchTheme);
 }

src/components/mdTabs/index.js

@@ -6,5 +6,5 @@ export default function install(Vue) {
   Vue.component('md-tabs', Vue.extend(mdTabs));
   Vue.component('md-tab', Vue.extend(mdTab));
 
-  window.VueMaterial.styles.push(mdTabsTheme);
+  Vue.material.styles.push(mdTabsTheme);
 }

src/components/mdTabs/mdTabs.vue

@@ -31,8 +31,6 @@
 <style lang="scss" src="./mdTabs.scss"></style>
 
 <script>
-  import Vue from 'vue';
-
   export default {
     props: {
       mdFixed: Boolean,
@@ -108,7 +106,7 @@
           indicator.classList.add('md-transition-off');
         }
 
-        Vue.nextTick(() => {
+        this.$nextTick(() => {
           let activeTab = this.$refs.tabHeader[this.activeTabNumber];
           let left = activeTab.offsetLeft;
           let right = tabsWidth - left - activeTab.offsetWidth;
@@ -141,7 +139,7 @@
         this.activeTab = id;
         this.activeTabNumber = index;
 
-        Vue.nextTick(() => {
+        this.$nextTick(() => {
           this.calculateIndicatorPos();
           this.calculateTabPos(this.tabs[id].ref, index);
           this.setVisibleTab(this.tabs[id].ref);

src/components/mdToolbar/index.js

@@ -4,5 +4,5 @@ import mdToolbarTheme from './mdToolbar.theme';
 export default function install(Vue) {
   Vue.component('md-toolbar', Vue.extend(mdToolbar));
 
-  window.VueMaterial.styles.push(mdToolbarTheme);
+  Vue.material.styles.push(mdToolbarTheme);
 }

src/core/components/mdInkRipple/mdInkRipple.scss

@@ -1,4 +1,4 @@
-@import '../../core/stylesheets/variables.scss';
+@import '../../../core/stylesheets/variables.scss';
 
 .md-ink-ripple {
   pointer-events: none;

src/core/components/mdTheme/index.js

@@ -38,7 +38,7 @@ const createNewStyleElement = (style, name) => {
   }
 };
 
-let registedThemes = [];
+let registeredThemes = [];
 
 const parseStyle = (style, theme) => {
   VALID_THEME_TYPE.forEach((type) => {
@@ -94,8 +94,7 @@ const parseStyle = (style, theme) => {
   return style;
 };
 
-const registerTheme = (theme, name) => {
-  let themeStyles = window.VueMaterial.styles;
+const registerTheme = (theme, name, themeStyles) => {
   let parsedStyle = [];
 
   themeStyles.forEach((style) => {
@@ -105,17 +104,17 @@ const registerTheme = (theme, name) => {
   createNewStyleElement(parsedStyle.join('\n'), name);
 };
 
-const registerInitialThemes = (themes) => {
+const registerAllThemes = (themes, themeStyles) => {
   let themeNames = themes ? Object.keys(themes) : [];
 
   if (themeNames.indexOf('default') === -1) {
-    registerTheme(DEFAULT_THEME_COLORS, 'default');
-    registedThemes.push('default');
+    registerTheme(DEFAULT_THEME_COLORS, 'default', themeStyles);
+    registeredThemes.push('default');
   }
 
   themeNames.forEach((name) => {
-    registerTheme(themes[name], name);
-    registedThemes.push(name);
+    registerTheme(themes[name], name, themeStyles);
+    registeredThemes.push(name);
   });
 };
 
@@ -127,7 +126,7 @@ const registerDirective = (element, { value, oldValue }) => {
   if (!element.classList.contains(newClass)) {
     element.classList.remove(oldClass);
 
-    if (theme && registedThemes.indexOf(theme) >= 0) {
+    if (theme && registeredThemes.indexOf(theme) >= 0) {
       element.classList.add(newClass);
     } else {
       element.classList.add(oldClass);
@@ -136,7 +135,28 @@ const registerDirective = (element, { value, oldValue }) => {
   }
 };
 
-export default function install(Vue, themes) {
-  registerInitialThemes(themes);
+export default function install(Vue) {
   Vue.directive('mdTheme', registerDirective);
+  Vue.material.theme = {
+    register(name, theme) {
+      let currentThemes = Vue.material.theme.registeredThemes;
+
+      currentThemes[name] = theme;
+
+      Vue.material.theme.registeredThemes = currentThemes;
+    },
+    registerAll(themes) {
+      Vue.material.theme.registeredThemes = themes;
+    }
+  };
+
+  Object.defineProperty(Vue.material.theme, 'registeredThemes', {
+    get() {
+      return this.themes;
+    },
+    set(themes) {
+      this.themes = themes;
+      registerAllThemes(themes, Vue.material.styles);
+    }
+  });
 }

src/core/core.vue

@@ -1,25 +0,0 @@
-<script>
-  import CoreTheme from './stylesheets/core.theme';
-
-  window.VueMaterial = {
-    styles: [CoreTheme]
-  };
-</script>
-
-<style lang="sass">
-  /* Common mixins */
-  @import './stylesheets/utils/mixins';
-
-
-  /* Commons */
-  @import './stylesheets/utils/commons';
-
-
-  /* Variables */
-  @import './stylesheets/variables';
-
-
-  /* Core Styles */
-  @import './stylesheets/structure';
-  @import './stylesheets/type';
-</style>

src/core/index.js

@@ -0,0 +1,24 @@
+/* Code Components */
+import MdTheme from './components/mdTheme';
+import MdInkRipple from './components/mdInkRipple';
+import CoreTheme from './stylesheets/core.theme';
+
+/* Core Stylesheets */
+import './stylesheets/core.scss';
+
+export default function install(Vue) {
+  if (install.installed) {
+    console.warn('Vue Material is already installed.');
+
+    return;
+  }
+
+  install.installed = true;
+
+  Vue.material = {
+    styles: [CoreTheme]
+  };
+
+  Vue.use(MdTheme);
+  Vue.use(MdInkRipple);
+}

src/core/stylesheets/base.scss

@@ -0,0 +1,56 @@
+/*  Structure
+   ========================================================================== */
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  color: rgba(#000, .87);
+  font-family: $font-roboto;
+  @extend .md-body-1;
+}
+
+
+/*  Fluid Media
+   ========================================================================== */
+
+audio,
+img,
+svg,
+object,
+embed,
+canvas,
+video,
+iframe {
+  max-width: 100%;
+  height: auto;
+  font-style: italic;
+  vertical-align: middle;
+}
+
+
+/*  Suppress the focus outline on links that cannot be accessed via keyboard.
+    This prevents an unwanted focus outline from appearing around elements
+    that might still respond to pointer events.
+   ========================================================================== */
+
+[tabindex="-1"]:focus {
+  outline: none !important;
+}

src/core/stylesheets/core.scss

@@ -0,0 +1,4 @@
+@import './variables';
+@import './base';
+@import './scrollbar';
+@import './typography';

src/core/stylesheets/core.theme

@@ -1,7 +1,4 @@
 .THEME_NAME {
-  color: #{'BACKGROUND-CONTRAST-0.87'};
-  background-color: #{'BACKGROUND-COLOR-50'};
-
   :not(input):not(textarea)::selection {
     background: #{'ACCENT-COLOR'};
     color: #{'ACCENT-CONTRAST'};
@@ -16,6 +13,10 @@
   }
 }
 
+body.THEME_NAME {
+  color: #{'BACKGROUND-CONTRAST-0.87'};
+  background-color: #{'BACKGROUND-COLOR-50'};
+}
 
 /* Typography */
 

src/core/stylesheets/scrollbar.scss

@@ -0,0 +1,28 @@
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  box-shadow: inset 1px 1px 0 rgba(#000, .12);
+  transition: $swift-ease-in-out;
+  background-color: rgba(#000, .05);
+
+  &:hover {
+    box-shadow: inset 1px 1px 0 rgba(#000, .054),
+                inset 0 -1px 0 rgba(#000, .038);
+    background-color: rgba(#000, .087);
+  }
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(#000, .26);
+  box-shadow: inset 1px 1px 0 rgba(#000, .054),
+              inset 0 -1px 0 rgba(#000, .087);
+  transition: $swift-ease-in-out;
+}

src/core/stylesheets/structure.scss

@@ -1,43 +0,0 @@
-body {
-  min-height: 100%;
-  margin: 0;
-  position: relative;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  color: rgba(#000, .87);
-  font-family: $font-roboto;
-  @extend .md-body-1;
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  box-shadow: inset 1px 1px 0 rgba(#000, .1);
-  transition: $swift-ease-in-out;
-  background-color: rgba(#000, .05);
-
-  &:hover {
-    box-shadow: inset 1px 1px 0 rgba(#000, .05),
-                inset 0 -1px 0 rgba(#000, .03);
-    background-color: rgba(#000, .08);
-  }
-}
-
-::-webkit-scrollbar-button {
-  display: none;
-}
-
-::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(#000, .2);
-  box-shadow: inset 1px 1px 0 rgba(#000, .05),
-              inset 0 -1px 0 rgba(#000, .07);
-  transition: $swift-ease-in-out;
-}

src/core/stylesheets/utils/commons.scss

@@ -1,96 +0,0 @@
-/*  Apply the border-box box model to HTML and inheriting
-    to all children elements
-   ========================================================================== */
-
-html {
-  box-sizing: border-box;
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-}
-
-
-
-/*  Always hide an element when it has the `hidden` HTML attribute.
-   ========================================================================== */
-
-[hidden] {
-  display: none !important;
-}
-
-
-
-/*  Fluid Media
-   ========================================================================== */
-
-audio,
-img,
-svg,
-object,
-embed,
-canvas,
-video,
-iframe {
-  max-width: 100%;
-  height: auto;
-  font-style: italic;
-  vertical-align: middle;
-}
-
-
-
-/*  Remove figure extra margin
-   ========================================================================== */
-
-figure {
-  margin-right: auto;
-  margin-left: auto;
-
-  > img {
-    display: block;
-  }
-}
-
-
-
-/*  Remove outline from button
-   ========================================================================== */
-
-button:focus {
-  outline: none;
-}
-
-
-
-/*  Suppress the focus outline on links that cannot be accessed via keyboard.
-    This prevents an unwanted focus outline from appearing around elements
-    that might still respond to pointer events.
-   ========================================================================== */
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
-
-
-
-/*  Remove extra vertical spacing when nesting lists
-   ========================================================================== */
-
-li {
-  > ul,
-  > ol {
-    margin-bottom: 0;
-  }
-}
-
-
-
-/*  Remove spacing between table cells
-   ========================================================================== */
-
-table {
-  empty-cells: show;
-}