Re-init plugin: 2.2.0

First official release 🚀
robbinjohansson · Oct 25, 2017 · 6cafe0e · 6cafe0e
1 parent 5bdab55
commit 6cafe0e
Show file tree

Hide file tree

Showing 19 changed files with 2,292 additions and 3,425 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-2"],
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,9 @@
+{
+  "extends": "standard",
+  "plugins": [
+    "html"
+  ],
+  "env": {
+    "jasmine": true
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,13 @@
-node_modules/
-npm-debug.log
+.DS_Store
+node_modules
+dist/build.js
+dist/build.css
+yarn-error.log
+npm-debug.log
+
+# Editor directories and files
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/LICENSE.md → LICENSE b/LICENSE.md → LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Robbin Johansson
+Copyright (c) 2017 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
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,30 +1,45 @@
-## Vuebbble
+# Vuebbble
 Simple vue component displaying shots from a user using the dribbble api.
 
-### Getting started
-```bash
+[![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)
+
+## Getting started
+``` bash
 $ yarn add vuebbble --dev
 # or ...
 $ npm i vuebbble --save-dev
 ```
 
-### Usage
-##### 1. [Register](https://dribbble.com/account/applications/new) your dribbble application
+## Usage
+#### 1. [Register](https://dribbble.com/account/applications/new) your dribbble application
+
+#### 2. Require/import vuebbble
 
-##### 2. Require vuebbble
-```javascript
+##### Require
+
+``` javascript
+var Vue = require('vue');
 var Vuebbble = require('vuebbble');
 Vue.use(Vuebbble);
 ```
 
-##### 3. Display the component
-```html
+##### Import
+
+``` javascript
+import Vuebbble from 'vuebbble';
+```
+
+#### 3. Display the component
+
+``` html
 <vuebbble token="CLIENT_ACCESS_TOKEN" user="USERNAME"></vuebbble>
 ```
 
-### Available properties
+## Available properties
 
 Prop           | Data Type  | Required  | Default   | Description
 -------------- | ---------- | --------- | -------   | -----------
 `token`        | String     | `true`    |           | Application client access token
-`user`         | String     | `true`    |           | User to display shots from
+`user`         | String     | `true`    |           | User to display shots from
diff --git a/dist/.gitkeep b/dist/.gitkeep
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
diff --git a/dist/vuebbble.js b/dist/vuebbble.js
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-template</title>
+    <link rel="stylesheet" href="dist/build.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="dist/build.js"></script>
+  </body>
+</html>
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,20 @@
+// https://github.com/Nikku/karma-browserify
+module.exports = function (config) {
+  config.set({
+    browsers: ['PhantomJS'],
+    frameworks: ['browserify', 'jasmine'],
+    files: ['test/unit/**/*.js'],
+    reporters: ['spec'],
+    preprocessors: {
+      'test/unit/**/*.js': ['browserify']
+    },
+    browserify: {
+      debug: true,
+      // needed to enable mocks
+      plugin: [require('proxyquireify').plugin]
+    },
+    // if you want to continuously re-run tests on file-save,
+    // replace the following line with `autoWatch: true`
+    singleRun: true
+  })
+}
diff --git a/package.json b/package.json
@@ -1,8 +1,14 @@
 {
   "name": "vuebbble",
-  "version": "2.1.14",
+  "version": "2.2.0",
   "description": "Simple vue component displaying shots from a user using the dribbble api",
   "main": "dist/vuebbble.js",
+  "author": "Robbin Johansson <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/robbinfellow/vuebbble/issues"
+  },
+  "homepage": "https://github.com/robbinfellow/vuebbble#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/robbinfellow/vuebbble.git"
@@ -14,22 +20,49 @@
     "api",
     "shots"
   ],
-  "author": "Robbin Johansson <[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/robbinfellow/vuebbble/issues"
-  },
-  "homepage": "https://github.com/robbinfellow/vuebbble#readme",
   "scripts": {
-    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "rmdist": "rimraf dist"
+    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
+    "serve": "http-server -o -c 1 -a localhost",
+    "dev": "npm-run-all --parallel watchify serve",
+    "test": "karma start karma.conf.js",
+    "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/index.js | uglifyjs -c warnings=false -m > dist/vuebbble.js"
+  },
+  "browserify": {
+    "transform": [
+      "babelify",
+      "vueify"
+    ]
+  },
+  "browser": {
+    "vue": "vue/dist/vue.common.js"
   },
   "dependencies": {
-    "axios": "^0.16.1",
-    "laravel-mix": "^0.*",
-    "vue": "^2.0.1",
-    "vue-axios": "^2.0.2"
+    "vue": "^2.0.1"
+  },
+  "devDependencies": {
+    "axios": "^0.17.0",
+    "babel-core": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "babel-runtime": "^6.0.0",
+    "babelify": "^7.2.0",
+    "browserify": "^13.1.0",
+    "browserify-hmr": "^0.3.1",
+    "cross-env": "^2.0.0",
+    "envify": "^3.4.1",
+    "http-server": "^0.9.0",
+    "jasmine-core": "^2.4.1",
+    "karma": "^1.2.0",
+    "karma-browserify": "^5.1.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-spec-reporter": "0.0.26",
+    "npm-run-all": "^2.3.0",
+    "phantomjs-prebuilt": "^2.1.3",
+    "proxyquireify": "^3.0.1",
+    "uglify-js": "^2.5.0",
+    "vueify": "^9.0.0",
+    "watchify": "^3.4.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <vuebbble token="ac522ca5908d196031bba38306459d5cb341e7511c60ddd8dd668d2d4c1748f5" user="robbinfellow"></vuebbble>
+  </div>
+</template>
+
+<script>
+import Vuebbble from './components/Vuebbble.vue'
+
+export default {
+  name: 'app',
+  components: {
+    Vuebbble
+  }
+}
+</script>
diff --git a/src/bootstrap.js b/src/bootstrap.js
diff --git a/src/components/Vuebbble.vue b/src/components/Vuebbble.vue
@@ -1,49 +1,54 @@
 <template>
-<div>
-    <ul class="shots">
-    	<li v-for="shot in shots" class="shot">
-    		<img :src="shot.images.hidpi">
-    		<h2>{{ shot.title }}</h2>
-    		<div class="description" v-html="shot.description"></div>
-    		<div class="likes">{{ shot.likes_count }} likes</div>
-    		<div class="views">{{ shot.views_count }} views</div>
-    		<div class="tags">
-    			<span v-for="tag in shot.tags" class="tag">{{ tag }} </span>
-    		</div>
-    	</li>
-    </ul>
-</div>
+    <div class="vuebbble">
+        <div v-for="shot in shots" class="shot">
+            <img :src="shot.images.hidpi">
+            <h2>{{ shot.title }}</h2>
+            <div class="description" v-html="shot.description"></div>
+            <div class="likes">
+                <p>{{ shot.likes_count }} likes</p>
+            </div>
+            <div class="views">
+                <p>{{ shot.views_count }} views</p>
+            </div>
+            <div class="tags">
+                <div v-for="tag in shot.tags" class="tag">{{ tag }}</div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+let axios = require('axios');
+
 export default {
+    name: 'vuebbble',
+
     mounted(){
         this.get();
     },
-
     data() {
         return {
             shots: [],
             url: ''
         }
     },
-
     props: {
-    	token: {
-			required: true
-		},
-		user: {
-			required: true
-		}
+        token: {
+            type: String,
+            required: true
+        },
+        user: {
+            type: String,
+            required: true
+        }
     },
-
     methods: {
         get(){
-        	var url = 'https://api.dribbble.com/v1/users/'+this.user+'/shots/?access_token='+this.token;
-        	axios.get(url).then(response => {
+            this.url = 'https://api.dribbble.com/v1/users/'+this.user+'/shots/?access_token='+this.token;
+            axios.get(this.url).then(response => {
                 this.shots = response.data;
             });
         }
     }
 }
-</script>
+</script>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,18 @@
+import Vuebbble from './components/Vuebbble.vue';
+
+function plugin (Vue) {
+    Vue.component('vuebbble', Vuebbble)
+}
+
+// Install by default if using the script tag
+if (typeof window !== 'undefined' && window.Vue) {
+    window.Vue.use(plugin)
+}
+
+export default plugin
+const version = '__VERSION__'
+// Export all components too
+export {
+    Vuebbble,
+    version
+}
diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,10 @@
-require('./bootstrap');
-
-Vue.component('vuebbble', require('./components/Vuebbble.vue'));
+// The following line loads the standalone build of Vue instead of the runtime-only build,
+// so you don't have to do: import Vue from 'vue/dist/vue'
+// This is done with the browser options. For the config, see package.json
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({ // eslint-disable-line no-new
+  el: '#app',
+  render: (h) => h(App)
+})
diff --git a/test/unit/Hello.spec.js b/test/unit/Hello.spec.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Hello from '../../src/components/Hello.vue'
+
+describe('Hello.vue', () => {
+  it('should render correct contents', () => {
+    const vm = new Vue({
+      el: document.createElement('div'),
+      render: (h) => h(Hello)
+    })
+    expect(vm.$el.querySelector('h1').textContent).toBe('Welcome to Your Vue.js App')
+  })
+})
+
+// also see example testing a component with mocks at
+// https://github.com/vuejs/vueify-example/blob/master/test/unit/a.spec.js#L22-L43
diff --git a/webpack.mix.js b/webpack.mix.js