vue-preferences - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/index.js

@@ -1,2 +0,2 @@
-var t="vp",e=t+":tracked",r={reactive:!0};function n(t,e,r){var n=r;return"object"==typeof e&&(n=Object.assign({},e[t],r)),n}function i(t,r,i,a){return function(){var o=this||{},u=n(t,o.$preferences,i),c=function(t,e){var r=window.localStorage.getItem(t);if(null===r)return e.defaultValue;try{return JSON.parse(r)}catch(t){return""===r?r:r||e.defaultValue}}(r,u),f=function(t,r){var n=t[e];return n?n[r]:void 0}(o,r);return i.reactive&&a.isReactivitySetup?f:c}}function a(t,r,i,a){return function(o){var u=this||{},c=n(t,u.$preferences,i);!function(t,e){window.localStorage.setItem(t,JSON.stringify(e))}(r,o),c.reactive&&(function(t,r,n){t.$set(t[e],r,n)}(u,r,o),a.isReactivitySetup=!0)}}function o(e,n){void 0===n&&(n={});var o=Object.assign({},r,n),u=function(e,r){return void 0===r&&(r=t),r+":"+e}(e),c={isReactivitySetup:!1};return{get:i(e,u,o,c),set:a(e,u,o,c)}}exports.DEFAULT_STORAGE_PREFIX=t,exports.DEFAULT_REACTIVE_PROPERTIES_PREFIX=e,exports.preference=o,exports.mapPreferences=function(t){var e,r={};return(e=t,Array.isArray(e)?e.map(function(t){return{name:t,options:{}}}):Object.keys(e).map(function(t){return{name:t,options:e[t]}})).forEach(function(t){var e=t.name;r[e]=o(e,t.options)}),r},exports.default={install:function(t){t.prototype.$preferences={},t.mixin({data:function(){return{"vp:tracked":{}}}})}};
+var t={storage:window.localStorage},e="vp",r=e+":tracked",n={reactive:!0};function o(t,e,r){var n=r;return"object"==typeof e&&(n=Object.assign({},e[t],r)),n}function a(e,n,a,i){return function(){var s=this||{},u=o(e,s.$preferences,a),c=function(e,r){var n=t.storage.getItem(e);if(null===n)return r.defaultValue;try{return JSON.parse(n)}catch(t){return""===n?n:n||r.defaultValue}}(n,u),f=function(t,e){var n=t[r];return n?n[e]:void 0}(s,n);return a.reactive&&i.isReactivitySetup?f:c}}function i(e,n,a,i){return function(s){var u=this||{},c=o(e,u.$preferences,a);!function(e,r){t.storage.setItem(e,JSON.stringify(r))}(n,s),c.reactive&&(function(t,e,n){t.$set(t[r],e,n)}(u,n,s),i.isReactivitySetup=!0)}}function s(t,r){void 0===r&&(r={});var o=Object.assign({},n,r),s=function(t,r){return void 0===r&&(r=e),r+":"+t}(t),u={isReactivitySetup:!1};return{get:a(t,s,o,u),set:i(t,s,o,u)}}var u={install:function(e,r){var n,o,a;void 0===r&&(r={}),e.prototype.$preferences={},e.mixin({data:function(){return{"vp:tracked":{}}}}),r.storage&&(o="function"==typeof(n=r.storage).getItem,a="function"==typeof n.setItem,console.assert(o,"You must provide a 'getItem' function as part of the storage"),console.assert(a,"You must provide a 'setItem' function as part of the storage"),o&&a)&&(t.storage=r.storage)}};exports.preference=s,exports.mapPreferences=function(t){var e,r={};return(e=t,Array.isArray(e)?e.map(function(t){return{name:t,options:{}}}):Object.keys(e).map(function(t){return{name:t,options:e[t]}})).forEach(function(t){var e=t.name;r[e]=s(e,t.options)}),r},exports.default=u;
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.vuePreferences={})}(this,function(e){var t="vp",n=t+":tracked",r={reactive:!0};function i(e,t,n){var r=n;return"object"==typeof t&&(r=Object.assign({},t[e],n)),r}function o(e,t,r,o){return function(){var u=this||{},c=i(e,u.$preferences,r),a=function(e,t){var n=window.localStorage.getItem(e);if(null===n)return t.defaultValue;try{return JSON.parse(n)}catch(e){return""===n?n:n||t.defaultValue}}(t,c),f=function(e,t){var r=e[n];return r?r[t]:void 0}(u,t);return r.reactive&&o.isReactivitySetup?f:a}}function u(e,t,r,o){return function(u){var c=this||{},a=i(e,c.$preferences,r);!function(e,t){window.localStorage.setItem(e,JSON.stringify(t))}(t,u),a.reactive&&(function(e,t,r){e.$set(e[n],t,r)}(c,t,u),o.isReactivitySetup=!0)}}function c(e,n){void 0===n&&(n={});var i=Object.assign({},r,n),c=function(e,n){return void 0===n&&(n=t),n+":"+e}(e),a={isReactivitySetup:!1};return{get:o(e,c,i,a),set:u(e,c,i,a)}}e.DEFAULT_STORAGE_PREFIX=t,e.DEFAULT_REACTIVE_PROPERTIES_PREFIX=n,e.preference=c,e.mapPreferences=function(e){var t,n={};return(t=e,Array.isArray(t)?t.map(function(e){return{name:e,options:{}}}):Object.keys(t).map(function(e){return{name:e,options:t[e]}})).forEach(function(e){var t=e.name;n[t]=c(t,e.options)}),n},e.default={install:function(e){e.prototype.$preferences={},e.mixin({data:function(){return{"vp:tracked":{}}}})}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.vuePreferences={})}(this,function(e){var t={storage:window.localStorage},n="vp",r=n+":tracked",o={reactive:!0};function i(e,t,n){var r=n;return"object"==typeof t&&(r=Object.assign({},t[e],n)),r}function a(e,n,o,a){return function(){var u=this||{},s=i(e,u.$preferences,o),c=function(e,n){var r=t.storage.getItem(e);if(null===r)return n.defaultValue;try{return JSON.parse(r)}catch(e){return""===r?r:r||n.defaultValue}}(n,s),f=function(e,t){var n=e[r];return n?n[t]:void 0}(u,n);return o.reactive&&a.isReactivitySetup?f:c}}function u(e,n,o,a){return function(u){var s=this||{},c=i(e,s.$preferences,o);!function(e,n){t.storage.setItem(e,JSON.stringify(n))}(n,u),c.reactive&&(function(e,t,n){e.$set(e[r],t,n)}(s,n,u),a.isReactivitySetup=!0)}}function s(e,t){void 0===t&&(t={});var r=Object.assign({},o,t),i=function(e,t){return void 0===t&&(t=n),t+":"+e}(e),s={isReactivitySetup:!1};return{get:a(e,i,r,s),set:u(e,i,r,s)}}var c={install:function(e,n){var r,o,i;void 0===n&&(n={}),e.prototype.$preferences={},e.mixin({data:function(){return{"vp:tracked":{}}}}),n.storage&&(o="function"==typeof(r=n.storage).getItem,i="function"==typeof r.setItem,console.assert(o,"You must provide a 'getItem' function as part of the storage"),console.assert(i,"You must provide a 'setItem' function as part of the storage"),o&&i)&&(t.storage=n.storage)}};e.preference=s,e.mapPreferences=function(e){var t,n={};return(t=e,Array.isArray(t)?t.map(function(e){return{name:e,options:{}}}):Object.keys(t).map(function(e){return{name:e,options:t[e]}})).forEach(function(e){var t=e.name;n[t]=s(t,e.options)}),n},e.default=c});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "vue-preferences",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "The coolest and easiest way to manage your user's preferences through localStorage and no back-end calls at all.",
@@ -34,7 +34,7 @@ "main": "dist/index.js",
     "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^4.1.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-import": "^2.16.0",
     "jest": "^24.7.1",
     "microbundle": "^0.11.0",
-    "prettier": "1.17.0",
+    "prettier": "1.18.2",
     "vue": "^2.6.10",
@@ -41,0 +41,0 @@ "vue-template-compiler": "^2.6.10"

README.md

@@ -5,3 +5,3 @@ # Vue Preferences
   <img src="https://user-images.githubusercontent.com/11605133/56131403-aec11f00-5f5d-11e9-8df7-ce60eda7dfa7.png" height="150px">
-  <p align="center">The coolest and easiest way to manage your user's preferences on the client side with local storage.<p>
+  <p align="center">The coolest and easiest way to manage your user's preferences on the client side with your preferred storage.<p>
 
@@ -31,3 +31,3 @@ <p align="center">
 
-With `vue-preferences`, you can keep some state of your app on the client side by using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) under the hood. This way you ensure your UX keeps consistent while at the same time avoiding simple but annoying calls to your back-end. You can set some user preferences such as `theme color`, `users' default`, `hidden elements (after user opted-in)`, `table sorting`, and many others you can imagine with great simplicity.
+With `vue-preferences`, you can keep some state of your app on the client side by using any storage strategy you find suitable, as a default we use [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) under the hood. This way you ensure your UX keeps consistent while at the same time avoiding simple but annoying calls to your back-end. You can set some user preferences such as `theme color`, `users' default`, `hidden elements (after user opted-in)`, `table sorting`, and many others you can imagine with great simplicity.
 
@@ -169,3 +169,3 @@ ## Table of content
 
-// obtains the value stored in localStorage under the key "locale" or returns default: "en"
+// obtains the value stored in the storage (by default localStorage) under the key "locale" or returns default: "en"
 console.log('Current locale is:', locale.get());
@@ -182,3 +182,3 @@
 
-If that's the case, you don't have other alternative than using the API to set the new values (in fact you have another alternative: to change localStorage values with its API, but why would you do that? 🤭)
+If that's the case, you don't have other alternative than using the API to set the new values (in fact you have another alternative: to change the storage values with its API, but why would you do that? 🤭)
 
@@ -193,3 +193,3 @@ How to do it?
 
-// obtains the value stored in localStorage under the key "locale" or returns default: "en"
+// obtains the value stored in the storage (by default localStorage) under the key "locale" or returns default: "en"
 console.log('Current locale is:', locale.get());
@@ -202,12 +202,32 @@
 
-### Options
+## Configuration Options
 
 🚀 In the near future, we will be supporting other custom options that will add even more power to the preferences you set. Stay tuned and support!
 
-For now, this is the list of available options:
+### Global library options
 
+The options defined here are global options that will affect **all** the properties in your project.
+
 | Option  | Default Value | Description |
 | ------------- | ------------- | ------------- |
+| `storage`  | `window.localStorage`  | Allows you to set up where the properties will be saved. By default we use `localStorage`, but you can use for example `sessionStorage` or any kind of storage. If you provide an object that has the same `getItem` and `setItem` API that `localStorage` has, then you can use that as a storage. |
+
+Example of global options usage:
+
+```javascript
+import VuePreferences from 'vue-preferences';
+
+Vue.use(VuePreferences, {
+  storage: window.sessionStorage
+});
+```
+
+### Properties
+
+This are the options available for the properties you define, some of them might interact with the global options defined in [Global library options](#global-library-options)
+
+| Option  | Default Value | Description |
+| ------------- | ------------- | ------------- |
 | `defaultValue`  | `undefined`  | Allows you to set up the preference with a custom default value. This allows you to ensures that even the first time the preference is read you will get something. |
-| `reactive`  | `true`  | By default preferences are reactive. This means that if you use the property in your template/code you can expect it to be observed and trigger re-renders, just like normal computed properties while at the same time the values get persisted to `localStorage`. If you disable this behavior the property will not trigger re-renders/re-computation of dependant code |
+| `reactive`  | `true`  | By default preferences are reactive. This means that if you use the property in your template/code you can expect it to be observed and trigger re-renders, just like normal computed properties while at the same time the values get persisted to `localStorage` (or your storage of choice). If you disable this behavior the property will not trigger re-renders/re-computation of dependant code |
 
@@ -214,0 +234,0 @@ ### Notes

No alert changes

Improved metrics

Total package byte prevSize

38459

increased by21.44%

Lines of code

22

increased by10%

Number of lines in readme file

242

increased by9.01%

No dependency changes