remove axios dependencies, update readme, git ignore files

Author: ytbryan

.gitignore

@@ -1,4 +1,12 @@
-yarn-error.log
-/node_modules
+.DS_Store
+node_modules
+npm-debug.log
+.vscode
+.coveralls.yml
+dist/build.js
+dist/build.js.map
+test/unit/coverage
 yarn-debug.log*
-.yarn-integrity
+yarn-error.log*
+.idea
+src/todos

.npmignore

@@ -10,4 +10,14 @@
 config.gypi
 CVS
 npm-debug.log
-
+.DS_Store
+node_modules
+npm-debug.log
+.vscode
+.coveralls.yml
+dist/build.js
+dist/build.js.map
+test/unit/coverage
+yarn-debug.log*
+yarn-error.log*
+.idea

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "vue-autorequest",
-  "version": "1.0.0",
-  "description": "Self-loading Vue Component",
+  "version": "1.1.0",
+  "description": "Self-loading Vue Component with zero dependencies",
   "main": "vue-autorequest.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
     "vue",
-    "axios",
+    "rails",
+    "webpacker",
     "component",
     "vue-component",
     "vue-on-rails"
@@ -18,8 +19,7 @@
   "email": "[email protected]",
   "url": "http://github.com/ytbryan/vue-autorequest",
   "dependencies": {
-    "axios": "^0.18.0",
-    "vue": "^2.5.16"
+    "vue": "^2.5.17"
   },
   "devDependencies": {
     "babel-helper-vue-jsx-merge-props": "^2.0.3",

package.json

@@ -1,10 +1,12 @@
-# Vue-Autorequest
+# Welcome to Vue-Autorequest
 
-`vue-autorequest` is a Vue plugin that enables the automatic loading feature of the component and reduces duplicates of `axios.get` across your Vue instance's life-cycle hooks. It is designed to simplify small to medium components. It is created with [Vue on Rails](vueonrails.com) in mind. 
+Autorequest is a Vue component plugin to load the component part with initial data. It uses XMLHttpRequest. It is created with [Vue on Rails](http://vueonrails.com) in mind.
 
-`vue-autorequest` is not meant for complex components with multiple endpoints. 
+> `vue-autorequest` is designed for a single endpoint. And it is probably not for complex components with multiple endpoints. 
 
-Instead of writing the following `axios.get` request at `mounted` function:
+### Lesser `axios.get` on more component parts
+
+One of autorequest's goals is to reduce the `axios.get` spinkles and give you a smaller component part. A common axios.get spinkle is like the one below.
 
 ```javascript
 mounted: function(){
@@ -18,9 +20,10 @@ mounted: function(){
 }
 ```
 
-We could simply set the endpoint at Vue's `data` at the `this.mounted.url`
+Autorequest allows me to write the same data loading code like this: 
 
 ```javascript
+//1
 data: function(){
   return {
     mounted: { url: 'https://yesno.wtf/api'}
@@ -29,11 +32,13 @@ data: function(){
 ```
 > Replace `mounted` with `created` or `updated`
 
-Receive response or catch error at its corresponding `watch` method onMounted().
+At the `watch` method, receive response or catch error. 
+
 ```javascript
+//2
 watch: {
   onMounted:function(res){
-    console.log(res.data)
+    console.log({res})
   }
 }
 ```

readme.md

@@ -1,11 +1,9 @@
 /*!
 * Vue-Autorequest.js
-* v1.0.0
+* v1.1.0
 * (c) Bryan Lim; MIT License
 */
 
-import axios from 'axios'
-
 const Autorequest = {
   install(Vue) {
     Vue.mixin({
@@ -20,41 +18,47 @@ const Autorequest = {
         }
       }, 
       updated: function(){
-        var appl = this
-        if(this.updated.url != ""){
-          axios.get(this.updated.url)
-          .then(function(response){
-            appl.onUpdated = response
-          })
-          .catch(function(err){
-            appl.onUpdated = err
-          })
-        }
+        this.request_for("updated", this.updated.url)
       },
       mounted: function(){
-        var appl = this
-        if(this.mounted.url != ""){
-          axios.get(this.mounted.url)
-          .then(function(response){
-            appl.onMounted = response
-          })
-          .catch(function(err){
-            appl.onMounted = err
-          })
-        }
+        this.request_for("mounted", this.mounted.url)
       },
       created: function(){
-        var appl = this
-        if(this.created.url != ""){
-          axios.get(this.created.url)
-          .then(function(response){
-            appl.onCreated = response
-          })
-          .catch(function(err){
-            appl.onCreated = err
-          })
+        this.request_for("created", this.created.url)
+      }, 
+      methods: {
+        request_for: function(stage, endpoint){
+          if(endpoint == "") return
+          var appl = this
+          var request = new XMLHttpRequest();
+          request.open("GET", endpoint, true)
+          request.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+              if(this.response == undefined) return
+              var reply = JSON.parse(this.response)
+              if(stage == "updated"){
+                appl.onUpdated = reply
+              }else if(stage == "mounted"){
+                appl.onMounted = reply
+              } else if(stage == "created") {
+                appl.onCreated = reply
+              }
+            } 
+          }
+          request.onerror = function () {
+            if(this.err == undefined) return
+            var err = JSON.parse(this.err)
+            if(stage == "updated"){
+              appl.onUpdated = err
+            } else if(stage == "mounted"){
+              appl.onMounted = err
+            } else if(stage == "created") {
+              appl.onCreated = err
+            }
+          }
+          request.send()
         }
-      }    
+      }
     })
   }
 };