vue-data-proxy - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "vue-data-proxy",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Easily create deep object proxy (mainly to map a Vuex nested sub-state to a computed property)",
@@ -33,5 +33,4 @@ "keywords": [
     "rollup": "^0.57.1",
-    "rollup-plugin-buble": "^0.19.2",
-    "rollup-plugin-vue": "^3.0.0"
+    "rollup-plugin-buble": "^0.19.2"
   }
 }

README.md

@@ -5,5 +5,7 @@ vue-data-proxy
 This package provides `vueDataProxy()` to generate a two-way bindable
-computed property from the result of a user\'s `fetch` function (e.g. to
-retrieve the object from a Vuex store), that calls back a user\'s
-`commit` function on any change on the object, even deeply nested.
+computed property from the result of a user's `fetch` function (e.g. to
+retrieve the object from a Vuex store), that calls back a user's
+`commit` function on any change on the object, even deeply nested. Then,
+you get a very simple way of doing two-way binding with Vuex for use
+with `v-model`
 
@@ -13,6 +15,6 @@ Motivation
 
-This package, even if it doesn\'t limit its scope to the Vuejs / Vuex
+This package, even if it doesn't limit its scope to the Vuejs / Vuex
 environment, was initially design to provide a simple way to get deep
 two way binding with Vuex. At the end, it can finally work with any type
-of datastore as long as they use Vue\'s reactivity system.
+of datastore as long as they use Vue's reactivity system.
 
@@ -30,20 +32,18 @@ It can also be used without Vue at all as a starting point of a MVC
 
-``` {.sourceCode .javascript}
-export default new Vuex.Store({
-  state: {
-    users : [
-      { name : 'foo', category : 'bar' },
-      // ...
-    ]
-  },
-  mutations : {
-     updateUser(state, {id, name, category}){
-       state.users[id].name = name;
-       state.users[id].category = category;
-     }
-  }
-```
+    export default new Vuex.Store({
+      state: {
+        users : [
+          { name : 'foo', category : 'bar' },
+          // ...
+        ]
+      },
+      mutations : {
+         updateUser(state, {id, name, category}){
+           state.users[id].name = name;
+           state.users[id].category = category;
+         }
+      }
 
 With the [official
-Vuex\'](https://vuex.vuejs.org/guide/forms.html#two-way-computed-property)
+Vuex'](https://vuex.vuejs.org/guide/forms.html#two-way-computed-property)
 recommended way, you would have to declare two computed property, one
@@ -53,5 +53,5 @@ for `name` and one for `category`, both calling the same mutation to
 
-With [Vuex\'s
+With [Vuex's
 mapState](https://vuex.vuejs.org/guide/state.html#the-mapstate-helper),
-it would be less verbose, but you\'d still have to define a method and
+it would be less verbose, but you'd still have to define a method and
 both the computed properties.
@@ -73,60 +73,57 @@
 providing a function that generate a two-way bound computed property
-definition. Considering the previous example, you would simply wirte the
-following (let\'s suppose you write a .vue component :)
+definition. Considering the previous example, you would simply write the
+following (let's suppose you write a .vue component) :
 
-``` {.sourceCode .xml}
-<template>
-  <input v-model="user.name" placeholder="user's name"/>
-  <input v-model="user.category" placeholder="user's category"/>
-</template>
-```
+    <template>
+      <input v-model="user.name" placeholder="user's name"/>
+      <input v-model="user.category" placeholder="user's category"/>
+    </template>
 
-``` {.sourceCode .javascript}
-import vueDataProxy from 'vue-data-proxy';
-export default {
-  computed : {
-    ...vueDataProxy({
-      user : {
-        fetch() { return this.$store.state.input[this.userId] },
-        commit(newVal){ this.$store.commit('updateUser', {id : this.userId, name : newVal.name, category : newVal.category}) },
+    import vueDataProxy from 'vue-data-proxy';
+    export default {
+      computed : {
+        ...vueDataProxy({
+          user : {
+            fetch() { return this.$store.state.input[this.userId] },
+            commit(newVal){ this.$store.commit('updateUser', {id : this.userId, name : newVal.name, category : newVal.category}) },
+          }
+        }),
       }
-    }),
-  }
-  props : {
-    userId : Number,
-  },
-},
-```
+      props : {
+        userId : Number,
+      },
+    },
 
+On non-object proxied data, this generate a code equivalent to a simple
+two-way bound computed property.
+
 Limitations
 -----------
 
-Since the code is greatly inpired by Vue\'s reactivity system, it does
-have the same limitations. For example, it won\'t detect property
+Since the code is greatly inpired by Vue's reactivity system, it does
+have the same limitations. For example, it won't detect property
 addition nor array `[]` synthax assigment. However, you can use the
-array\'s method that Vue reactvity system is compatible with.
-(`splice()`, `push()`, `pop()`, \[\...\])
+array's method that Vue reactvity system is compatible with.
+(`splice()`, `push()`, `pop()`, \[...\])
 
 Another limitation, if you want the computed property nested attribute
 to be reactive, always access the computed property first. For example,
-the folowing wouldn\'t work :
+the folowing wouldn't work :
 
-``` {.sourceCode .javascript}
-var alias // global scope alias
-//[...]
-  methods : {
-    genAlias(){
-      alias = this.user.name;
-    }
-  computed : {
-    ...vueDataProxy({
-      user : {
-        fetch() { return this.$store.state.input[this.userId] },
-        commit(newVal){ this.$store.commit('updateUser', {id : this.userId, name : newVal.name, category : newVal.category}) },
+    var alias // global scope alias
+    //[...]
+      methods : {
+        genAlias(){
+          alias = this.user.name;
+        }
+      computed : {
+        ...vueDataProxy({
+          user : {
+            fetch() { return this.$store.state.input[this.userId] },
+            commit(newVal){ this.$store.commit('updateUser', {id : this.userId, name : newVal.name, category : newVal.category}) },
+          }
+        }),
+        name() { return alias } // not reactive because user is not a dependency
+        name2() { _ = this.user; return alias } // Reactive because even alias is accessed without accessing this.user, the _ variable marks this.user as a dependency, and force recomputation. (note you'd still need to regenerate the alias...)
       }
-    }),
-    name() { return alias } // not reactive because user is not a dependency
-    name2() { _ = this.user; return alias } // Reactive because even alias is accessed without accessing this.user, the _ variable marks this.user as a dependency, and force recomputation. (note you'd still need to regenerate the alias...)
-  }
-```
 
@@ -139,11 +136,7 @@ Installation
 
-``` {.sourceCode .}
-npm install --save vue-data-proxy
-```
+    npm install --save vue-data-proxy
 
 Wherever you need it:
 
-``` {.sourceCode .javascript}
-import vueDataProxy from 'vue-data-proxy'
-```
+    import vueDataProxy from 'vue-data-proxy'
 
@@ -156,5 +149,3 @@ (Re)build
 
-``` {.sourceCode .}
-npm run build
-```
+    npm run build
 
@@ -164,5 +155,3 @@ Directely in html
 
-``` {.sourceCode .html}
-<script src="vueDataProxy.min.js"></script>
-```
+    <script src="vueDataProxy.min.js"></script>
 
@@ -172,16 +161,10 @@ API
 
-`vueDataProxy(params)`
+`vueDataProxy(params)`  
+`params` is an object. Each key represents a proxy definition (a resulting computed property), and each associated value should be an object with the following fields :  
+-   `fetch` : A function with no arguments, `this` representing the Vue
+    local component instance. Should return the store object value.
+-   `commit` : A function called at each modification (on the returned
+    object from the computed property), taking the new value as
+    parameter, and this representing the Vue local component.
 
-:   
-
-    `params` is an object. Each key represent a proxy definition (a resulting computed property). Each value should be an object with the following fields :
-
-    :   -   `fetch` : A function with no arguments, `this` representing
-            the Vue local component instance. Should return the store
-            object value.
-        -   `commit` : A function called at each modification (on the
-            returned object from the computed property), taking the new
-            value as parameter, and this representing the Vue local
-            component.
-
 License
@@ -188,0 +171,0 @@ -------

src/vue-data-proxy.js

@@ -94,3 +94,3 @@
       set(oldVal, val) {
-        p.commit(val);
+        p.commit.call(this, val);
       }
@@ -97,0 +97,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19443

increased by0.35%

Dev dependency count

2

decreased by-33.33%

Worsened metrics

Number of lines in readme file

169

decreased by-9.14%

No dependency changes