initial commit

.babelrc

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    [
+      "env",
+    {
+      "targets": {
+        "browsers": [
+          "last 2 versions"
+        ]
+      }
+    }
+    ]
+  ],
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-object-rest-spread"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "istanbul"
+      ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1 @@
+dist/*.js

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  extends: 'vue',
+  // add your custom rules here
+  'rules': {
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  },
+  globals: {
+    requestAnimationFrame: true,
+    performance: true
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules/
+npm-debug.log
+test/coverage
+dist
+yarn-error.log
+reports

.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "processors": ["stylelint-processor-html"],
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "no-empty-source": null
+  }
+}

CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing
+
+Contributions are **welcome** and will be fully **credited**.
+
+We accept contributions via Pull Requests on [Github](https://github.com/dustin-h/vue-fela).
+
+
+## Pull Requests
+
+- **Keep the same style** - eslint will automatically be ran before committing
+
+- **Tip** to pass lint tests easier use the `npm run lint:fix` command
+
+- **Add tests!** - Your patch won't be accepted if it doesn't have tests.
+
+- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
+
+- **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
+
+- **Create feature branches** - Don't ask us to pull from your master branch.
+
+- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
+
+- **Send coherent history** - Make sure your commits message means something
+
+
+## Running Tests
+
+Launch visual tests and watch the components at the same time
+
+``` bash
+$ npm run dev
+```
+
+
+**Happy coding**!

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Dustin Hoffn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,79 @@
+# vue-fela
+
+[![npm](https://img.shields.io/npm/v/vue-fela.svg)](https://www.npmjs.com/package/vue-fela) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
+
+> Fela bindings for vue
+
+## Installation
+
+```bash
+npm install --save vue-fela
+```
+
+## Usage
+
+### Bundler (Webpack, Rollup)
+
+```js
+import Vue from 'vue'
+import vue-fela from 'vue-fela'
+// You need a specific loader for CSS files like https://github.com/webpack/css-loader
+import 'vue-fela/dist/vue-fela.css'
+
+Vue.use(vue-fela)
+```
+
+### Browser
+
+```html
+<!-- Include after Vue -->
+<!-- Local files -->
+<link rel="stylesheet" href="vue-fela/dist/vue-fela.css"></link>
+<script src="vue-fela/dist/vue-fela.js"></script>
+
+<!-- From CDN -->
+<link rel="stylesheet" href="https://unpkg.com/vue-fela/dist/vue-fela.css"></link>
+<script src="https://unpkg.com/vue-fela"></script>
+```
+
+## Development
+
+### Launch visual tests
+
+```bash
+npm run dev
+```
+
+### Launch Karma with coverage
+
+```bash
+npm run dev:coverage
+```
+
+### Build
+
+Bundle the js and css of to the `dist` folder:
+
+```bash
+npm run build
+```
+
+
+## Publishing
+
+The `prepublish` hook will ensure dist files are created before publishing. This
+way you don't need to commit them in your repository.
+
+```bash
+# Bump the version first
+# It'll also commit it and create a tag
+npm version
+# Push the bumped package and tags
+git push --follow-tags
+# Ship it 🚀
+npm publish
+```
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

build/build.js

@@ -0,0 +1,121 @@
+const mkdirp = require('mkdirp')
+const rollup = require('rollup').rollup
+const vue = require('rollup-plugin-vue')
+const jsx = require('rollup-plugin-jsx')
+const buble = require('rollup-plugin-buble')
+const replace = require('rollup-plugin-replace')
+const cjs = require('rollup-plugin-commonjs')
+const node = require('rollup-plugin-node-resolve')
+const uglify = require('uglify-js')
+const CleanCSS = require('clean-css')
+
+// Make sure dist dir exists
+mkdirp('dist')
+
+const {
+  logError,
+  write,
+  banner,
+  name,
+  moduleName,
+  version,
+  processStyle
+} = require('./utils')
+
+function rollupBundle ({ env }) {
+  return rollup({
+    entry: 'src/index.js',
+    plugins: [
+      node({
+        extensions: ['.js', '.jsx', '.vue']
+      }),
+      cjs(),
+      vue({
+        compileTemplate: true,
+        css (styles, stylesNodes) {
+          // Only generate the styles once
+          if (env['process.env.NODE_ENV'] === '"production"') {
+            Promise.all(
+              stylesNodes.map(processStyle)
+            ).then(css => {
+              const result = css.map(c => c.css).join('')
+              // write the css for every component
+              // TODO add it back if we extract all components to individual js
+              // files too
+              // css.forEach(writeCss)
+              write(`dist/${name}.css`, result)
+              write(`dist/${name}.min.css`, new CleanCSS().minify(result).styles)
+            }).catch(logError)
+          }
+        }
+      }),
+      jsx({ factory: 'h' }),
+      replace(Object.assign({
+        __VERSION__: version
+      }, env)),
+      buble({
+        objectAssign: 'Object.assign'
+      })
+    ]
+  })
+}
+
+const bundleOptions = {
+  banner,
+  exports: 'named',
+  format: 'umd',
+  moduleName
+}
+
+function createBundle ({ name, env, format }) {
+  return rollupBundle({
+    env
+  }).then(function (bundle) {
+    const options = Object.assign({}, bundleOptions)
+    if (format) options.format = format
+    const code = bundle.generate(options).code
+    if (/min$/.test(name)) {
+      const minified = uglify.minify(code, {
+        output: {
+          preamble: banner,
+          ascii_only: true // eslint-disable-line camelcase
+        }
+      }).code
+      return write(`dist/${name}.js`, minified)
+    } else {
+      return write(`dist/${name}.js`, code)
+    }
+  }).catch(logError)
+}
+
+// Browser bundle (can be used with script)
+createBundle({
+  name: `${name}`,
+  env: {
+    'process.env.NODE_ENV': '"development"'
+  }
+})
+
+// Commonjs bundle (preserves process.env.NODE_ENV) so
+// the user can replace it in dev and prod mode
+createBundle({
+  name: `${name}.common`,
+  env: {},
+  format: 'cjs'
+})
+
+// uses export and import syntax. Should be used with modern bundlers
+// like rollup and webpack 2
+createBundle({
+  name: `${name}.esm`,
+  env: {},
+  format: 'es'
+})
+
+// Minified version for browser
+createBundle({
+  name: `${name}.min`,
+  env: {
+    'process.env.NODE_ENV': '"production"'
+  }
+})