Refactor plugin

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "safari >= 7"]
+      },
+      "modules": "umd"
+    }]
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": true
+    }]
+  ]
+}

.editorconfig

@@ -1,12 +1,18 @@
+; This file is for unifying the coding style for different editors and IDEs.
+; More information at http://editorconfig.org
+
 root = true
 
 [*]
-indent_style = space
+charset = utf-8
 indent_size = 4
+indent_style = space
 end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{package.json,*.scss,*.css}]
+indent_size = 2
 
 [*.md]
 trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,10 @@
+{
+    "extends": "spatie/vue",
+    "parserOptions": {
+        "ecmaVersion": 8
+    },
+    "env": {
+        "browser": true,
+        "node": true
+    }
+}

.gitignore

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

.npmignore

@@ -0,0 +1,2 @@
+.idea
+__tests__

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+    - 'stable'

CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to `vuebbble` will be documented in this file.
+
+## [2.5.0] - 2018-03-20
+
+### Changed
+- Refactor code/plugin using [spatie/skeleton-vue](https://github.com/spatie/skeleton-vue).

CONTRIBUTING.md

@@ -0,0 +1,24 @@
+# Contributing
+
+Contributions are **welcome** and will be fully **credited**.
+
+We accept contributions via Pull Requests on [Github](https://github.com/robbinfellow/vuebbble).
+
+## Pull Requests
+
+- Use the ES2015 syntax.
+- Your patch won't be accepted if it doesn't pass the tests and lints (`yarn run test`).
+- If there's a `/demo` section, try to add an example.
+- **Document any change in behaviour:** Make sure the `README.md`, `CHANGELOG.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 each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](http://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
+
+## Running Tests
+
+``` bash
+jest
+```
+
+**Happy coding**!

LICENSE → LICENSE.md

@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) 2018 Robbin Johansson <[email protected]>
+Copyright (c) Robbin Johansson <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,10 +1,15 @@
-[![npm](https://img.shields.io/npm/v/vuebbble.svg)](https://www.npmjs.com/package/vuebbble)
-[![npm](https://img.shields.io/npm/dt/vuebbble.svg)](https://www.npmjs.com/package/vuebbble)
-[![npm](https://img.shields.io/npm/l/vuebbble.svg)](https://www.npmjs.com/package/vuebbble)
+[![Latest Version on NPM](https://img.shields.io/npm/v/vuebbble.svg?style=flat-square)](https://npmjs.com/package/vuebbble)
+[![Total Downloads on NPM](https://img.shields.io/npm/dt/vuebbble.svg)](https://www.npmjs.com/package/vuebbble)
+[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
+[![Build Status](https://img.shields.io/travis/robbinfellow/vuebbble/master.svg?style=flat-square)](https://travis-ci.org/robbinfellow/vuebbble)
 
 # Vuebbble
 Vue component to easily display dribbble shots from a user.
 
+## Demo
+
+[Link](https://robbinfellow.github.io/vuebbble)
+
 ## Installation
 ```shell
 $ yarn add vuebbble --dev
@@ -51,10 +56,19 @@ Prop           | Data Type  | Required  | Default   | Description
 `user`         | String     | `true`    |           | User to display shots from
 `count`        | Number     | `false`   | 5         | Number of shots to fetch
 
+## Changelog
+
+Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
+
+## Contributing
+
+Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
+
 ## Credits
 
 * [Robbin Johansson](https://github.com/robbinfellow)
+* [spatie/skeleton-vue](https://github.com/spatie/skeleton-vue)
 
 ## License
 
-Vuebbble is an open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

__tests__/__snapshots__/vuebbbleComponent.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Vuebbble can mount 1`] = `
+"
+            <div id=\\"app\\"><div class=\\"vuebbble\\"> <!----></div></div>
+        "
+`;

__tests__/vuebbbleComponent.test.js

@@ -0,0 +1,30 @@
+import { Vuebbble } from '../src';
+import Vue from 'vue/dist/vue.js';
+
+describe('Vuebbble', () => {
+    Vue.component('vuebbble', Vuebbble);
+
+    beforeEach(() => {
+        document.body.innerHTML = `
+            <div id="app">
+                <vuebbble token="8828b898f4e2cec33f65f5342ba736b5e35e70f03681aa7435ad26c3b1830847" user="robbinfellow"></vuebbble>
+            </div>
+        `;
+    });
+
+    it('can mount', async () => {
+        await createVm();
+
+        expect(document.body.innerHTML).toMatchSnapshot();
+    });
+});
+
+async function createVm() {
+    const vm = new Vue({
+        el: '#app',
+    });
+
+    await Vue.nextTick(() => {});
+
+    return { app: vm, component: vm.$children[0] };
+}