add files

Author: kamijin-fanta

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'semi': 0,
+    'comma-dangle': 0,
+    'no-multiple-empty-lines': 0,
+    'quotes': 1,
+  },
+
+  "env": {
+    "jasmine": true
+  },
+  "globals": {
+  },
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+npm-debug.log.*
+coverage/

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 kamijin-fanta
+
+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,70 @@
+# vue-async-data for Vue.js 2.0
+
+**this plugin is experimental!**
+
+Async data loading plugin for Vue.js
+
+### Install
+
+- this plugin is written in ES2015,
+  so recommend compile with babel/babel-polyfill.
+
+``` bash
+npm install kamijin-fanta/vue-async-data
+```
+
+``` js
+// use as global plugin
+import Vue from 'vue';
+import { AsyncDataPlugin } from './utils/asyncdata';
+Vue.use(AsyncDataPlugin);
+```
+
+``` js
+// use as locally mixin
+import { AsyncDataMixin } from './utils/asyncdata';
+
+export default {
+  mixins: [ AsyncDataMixin ],
+}
+```
+
+### Usage
+
+``` html
+<template>
+  <div>
+    <p v-if="userNameLoading">Loading...</p>
+    <p v-else-if="userNameError">Error: {{ userNameError }}</p>
+    <p v-else>Hello {{ userName }} !</p>
+    <button v-on:click="asyncReload('userName')">Reload userName</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'show-data',
+  asyncData: {
+    userName () {
+      return new Promise((resolve, reject) => {
+        setTimeout(_ => {
+          if (Math.random() > 0.5) {
+            resolve('risa');
+          } else {
+            reject('fetch error...');
+          }
+        }, 1000);
+      })
+    },
+  },
+}
+</script>
+```
+
+
+### API
+
+#### this.asyncData: object
+#### this.asyncReload([name])
+#### this.asyncLoading: object
+#### this.asyncError: object

karma.conf.js

@@ -0,0 +1,33 @@
+var webpackConfig = require('./webpack.test.conf');
+
+module.exports = function (config) {
+  config.set({
+    // to run in additional browsers:
+    // 1. install corresponding karma launcher
+    //    http://karma-runner.github.io/0.13/config/browsers.html
+    // 2. add it to the `browsers` array below.
+    browsers: ['PhantomJS'],
+    frameworks: ['jasmine'],
+    reporters: ['spec', 'coverage'],
+    files: [
+      './node_modules/babel-polyfill/dist/polyfill.js',
+      './test.js'
+    ],
+    preprocessors: {
+      './test.js': ['webpack', 'sourcemap']
+      // './test.js': ['sourcemap']
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    },
+    coverageReporter: {
+      dir: './coverage',
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text-summary' }
+      ]
+    },
+    logLevel: config.LOG_INFO,
+  })
+}

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "vue-async-data",
+  "version": "0.0.1-beta.0",
+  "description": "",
+  "main": "src/main.js",
+  "scripts": {
+    "test": "unit",
+    "unit": "karma start karma.conf.js --single-run",
+    "unit:watch": "karma start karma.conf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kamijin-fanta/vue-async-data.git"
+  },
+  "author": "kamijin-fanta <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kamijin-fanta/vue-async-data/issues"
+  },
+  "homepage": "https://github.com/kamijin-fanta/vue-async-data#readme",
+  "devDependencies": {
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-polyfill": "^6.20.0",
+    "babel-preset-es2015": "^6.18.0",
+    "eslint": "^3.12.2",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-friendly-formatter": "^2.0.6",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-html": "^1.7.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^2.0.1",
+    "function-bind": "^1.1.0",
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.3.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^1.8.0",
+    "vue": "^2.1.6",
+    "webpack": "^1.14.0"
+  }
+}

src/main.js

@@ -0,0 +1,87 @@
+var AsyncDataMixin = {
+  created () {
+  },
+  mounted () {
+    this.asyncReload();
+  },
+  methods: {
+    // name args optional
+    asyncReload (name) {
+      let asyncData = this.$options.asyncData;
+      if (asyncData) {
+        let names = Object.keys(asyncData)
+          .filter(s => !s.endsWith('Default'))
+          .filter(s => name === undefined || s === name);
+        for (let prop of names) {
+          // helper
+          let setData = data => { this[prop] = data };
+          let setError = err => {
+            this[prop + 'Error'] = err;
+            if (err) this.asyncError = true;
+            else this.asyncError = !!names.find(n => this[n + 'Error']);
+          };
+          let setLoading = flag => {
+            this[prop + 'Loading'] = flag
+            if (flag) this.asyncLoading = true;
+            else this.asyncLoading = !!names.find(n => this[`${n}Loading`]);
+          };
+
+          setLoading(true);
+          setError(undefined);
+          asyncData[prop].apply(this)
+            .then(res => {
+              setData(res);
+              setLoading(false);
+            })
+            .catch(err => {
+              setError(err);
+              setLoading(false);
+            });
+        }
+      }
+    },
+  },
+  data () {
+    let asyncData = this.$options.asyncData;
+    if (asyncData) {
+      let dataObj = {
+        'asyncLoading': true,
+        'asyncError': false,
+      };
+
+      let names = Object.keys(asyncData)
+        .filter(s => !s.endsWith('Default'));
+      names.forEach(name => {
+        dataObj[name] = asyncData[`${name}Default`];
+      });
+
+      let loadingNames = names.map(s => `${s}Loading`);
+      loadingNames.forEach(name => { dataObj[name] = true });
+
+      let errorNames = names.map(s => `${s}Error`);
+      errorNames.forEach(name => { dataObj[name] = undefined });
+
+      return dataObj;
+    }
+    return {}
+  }
+}
+
+var AsyncDataPlugin = {
+  install (Vue, options) {
+    // console.log('Plugin Install', options);
+    Vue.mixin(AsyncDataMixin)
+  }
+}
+
+var api = {
+  AsyncDataPlugin: AsyncDataPlugin,
+  AsyncDataMixin: AsyncDataMixin,
+}
+
+if (typeof exports === 'object' && typeof module === 'object') {
+  module.exports = api
+} else if (typeof window !== 'undefined') {
+  window.AsyncDataMixin = AsyncDataMixin;
+  window.AsyncDataPlugin = AsyncDataPlugin;
+}

src/main.spec.js

@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import { AsyncDataMixin } from './main';
+
+describe('AsyncData', () => {
+  let resolve = (done) => {
+    return new Vue({
+      template: `<div></div>`,
+      mixins: [ AsyncDataMixin ],
+      asyncData: {
+        sandbox () {
+          return new Promise((resolve, reject) => {
+            this.counter++;
+            resolve('OK!' + this.counter);
+            setTimeout(() => {
+              if (done) done();
+            }, 10)
+          });
+        },
+        sandboxDefault: 'Default!',
+      },
+      data () {
+        return {
+          counter: 0
+        }
+      }
+    }).$mount();
+  };
+  let reject = (done) => {
+    return new Vue({
+      template: `<div></div>`,
+      mixins: [ AsyncDataMixin ],
+      asyncData: {
+        sandbox () {
+          return new Promise((resolve, reject) => {
+            this.counter++;
+            reject('NG!' + this.counter);
+            setTimeout(() => {
+              if (done) done();
+            }, 50)
+          });
+        }
+      },
+      data () {
+        return {
+          counter: 0
+        }
+      }
+    }).$mount();
+  }
+
+  beforeEach(() => {
+  })
+
+  it('If "asyncData" property is not found, mixin does not work.', () => {
+    let emptyVm = new Vue({
+      template: `<div></div>`,
+      mixins: [ AsyncDataMixin ],
+    }).$mount();
+    expect(emptyVm.asyncLoading).toEqual(undefined);
+  })
+
+  it('Default property is set.', () => {
+    let resolveVm = resolve();
+    expect(resolveVm.asyncLoading).toEqual(true);
+    expect(resolveVm.asyncError).toEqual(false);
+    expect(resolveVm.sandbox).toEqual('Default!');
+  })
+
+  it('Resolve promise.', (done) => {
+    let resolveVm = resolve(() => {
+      expect(resolveVm.sandbox).toEqual('OK!1');
+      expect(resolveVm.sandboxLoading).toEqual(false);
+      expect(resolveVm.asyncLoading).toEqual(false);
+      expect(resolveVm.asyncError).toEqual(false);
+      done();
+    });
+    expect(resolveVm.asyncError).toEqual(false);
+  })
+
+  it('Reject promise.', (done) => {
+    let rejectVm = reject(() => {
+      expect(rejectVm.sandboxError).toEqual('NG!1');
+      expect(rejectVm.sandboxLoading).toEqual(false);
+      expect(rejectVm.asyncError).toEqual(true);
+      done();
+    });
+    expect(rejectVm.asyncError).toEqual(false);
+  })
+})