🔧 Enable build tooling

.gitignore

@@ -1 +1,3 @@
 node_modules
+reports
+dist

build/utils/index.js

@@ -0,0 +1,21 @@
+const uppercamelcase = require('uppercamelcase')
+
+const {
+  author,
+  name,
+  version
+} = require('../../package.json')
+
+const authorName = author.replace(/\s+<.*/, '')
+const minExt = process.env.NODE_ENV === 'production' ? '.min' : ''
+
+exports.author = authorName
+exports.version = version
+exports.moduleName = uppercamelcase(name)
+exports.filename = name + minExt
+exports.banner = `/*!
+ * ${name} v${version}
+ * (c) ${new Date().getFullYear()} ${authorName}
+ * Released under the MIT License.
+ */
+`

build/webpack.config.base.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const { resolve, join } = require('path')
+
+const {
+  filename,
+  version
+} = require('./utils')
+
+// It'd be better to add a sass property to the vue-loader options
+// but it simply don't work
+const sassOptions = {
+  includePaths: [
+    join(__dirname, '../node_modules')
+  ]
+}
+
+module.exports = {
+  output: {
+    path: './dist',
+    filename: `${filename}.common.js`,
+  },
+  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        use: 'babel-loader',
+        include: [
+          resolve(__dirname, '../node_modules'),
+          resolve(__dirname, '../src'),
+        ],
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract('css-loader'),
+            scss: ExtractTextPlugin.extract(
+              `css-loader!sass-loader?${JSON.stringify(sassOptions)}`
+            ),
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      '__VERSION__': JSON.stringify(version),
+    }),
+    new ExtractTextPlugin(`${filename}.css`),
+  ],
+}

build/webpack.config.browser.js

@@ -0,0 +1,29 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const base = require('./webpack.config.base')
+const { resolve } = require('path')
+const {
+  filename,
+  moduleName
+} = require('./utils')
+
+module.exports = merge(base, {
+  output: {
+    filename: `${filename}.js`,
+    library: moduleName,
+    libraryTarget: 'umd',
+  },
+  externals: {
+    // Put external libraries like lodash here
+    // With their global name
+    // Example: 'lodash': '_'
+  },
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      reportFilename: resolve(__dirname, `../reports/${process.env.NODE_ENV}.html`)
+    }),
+  ],
+})

build/webpack.config.common.js

@@ -0,0 +1,24 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const base = require('./webpack.config.base')
+const { resolve } = require('path')
+
+module.exports = merge(base, {
+  output: {
+    libraryTarget: 'commonjs2',
+  },
+  target: 'node',
+  externals: {
+    // Put external libraries like lodash here
+    // With their package name
+    // Example: 'lodash': 'lodash'
+  },
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      reportFilename: resolve(__dirname, `../reports/${process.env.NODE_ENV}.html`)
+    }),
+  ],
+})

package.json

@@ -2,5 +2,44 @@
   "name": "vue-mdc",
   "version": "1.0.0",
   "main": "index.js",
-  "license": "MIT"
+  "author": "Eduardo San Martin Morote <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "build": "yon run build:common && yon run build:browser && yon run build:browser:min",
+    "build:browser": "cross-env NODE_ENV=browser yon run build:browser:base",
+    "build:browser:base": "webpack --config build/webpack.config.browser.js --progress --hide-modules",
+    "build:browser:min": "cross-env NODE_ENV=production yon build:browser:base -- -p",
+    "build:common": "cross-env NODE_ENV=common webpack --config build/webpack.config.common.js --progress --hide-modules"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-env": "^1.1.8",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
+    "extract-text-webpack-plugin": "beta",
+    "material-components-web": "^0.4.0",
+    "node-sass": "^4.5.0",
+    "sass-loader": "^6.0.1",
+    "uppercamelcase": "^1.1.0",
+    "vue-loader": "^11.0.0",
+    "vue-template-compiler": "^2.1.10",
+    "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.3.0",
+    "webpack-merge": "^2.6.1",
+    "yarn-or-npm": "^2.0.3"
+  },
+  "babel": {
+    "presets": [
+      ["env", {
+        "targets": {
+          "browsers": ["last 2 versions", "ie >= 11"]
+        }
+      }]
+    ],
+    "plugins": [
+      "transform-object-assign"
+    ]
+  }
 }

src/Button.vue

@@ -0,0 +1,14 @@
+<template>
+  <button class="mdc-button">
+    Flat button
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MdcButton',
+}
+</script>
+
+<style lang="scss" src="@material/button/mdc-button.scss">
+</style>

src/Card.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="mdc-card">
+    <section class="mdc-card__primary">
+      <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
+      <h2 class="mdc-card__subtitle">Subtitle here</h2>
+    </section>
+    <section class="mdc-card__supporting-text">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </section>
+    <section class="mdc-card__actions">
+      <button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
+      <button class="mdc-button mdc-button--compact mdc-card__action">Action 2</button>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MdcCard',
+}
+</script>
+
+<style lang="scss" src="@material/card/mdc-card.scss">
+</style>

src/Ripple.vue

@@ -0,0 +1,28 @@
+<script>
+import { MDCRipple } from '@material/ripple'
+
+export default {
+  name: 'MdcRipple',
+
+  render (h) {
+    if (this.$slots.default.length !== 1) {
+      console.error('must have exactly one child')
+    }
+    const child = this.$slots.default[0]
+    child.data = child.data || {}
+    child.data.staticClass =
+      child.data.staticClass
+      ? child.data.staticClass + ' mdc-ripple-surface mdc-ripple-upgraded'
+      : 'mdc-ripple-surface mdc-ripple-upgraded'
+
+    return child
+  },
+
+  mounted () {
+    this._ripple = new MDCRipple(this.$el)
+  }
+}
+</script>
+
+<style src="@material/ripple/dist/mdc.ripple.css">
+</style>

src/index.js

@@ -0,0 +1,22 @@
+import MdcRipple from './Ripple.vue'
+import MdcCard from './Card.vue'
+import MdcButton from './Button.vue'
+
+function plugin (Vue) {
+  Vue.component('mdc-ripple', MdcRipple)
+  Vue.component('mdc-card', MdcCard)
+  Vue.component('mdc-button', MdcButton)
+}
+
+// Install by default if using the script tag
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(plugin)
+}
+
+export default plugin
+// Export all components too
+const version = 2
+export {
+  version,
+  MdcRipple
+}