New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vue-web-storage
Advanced tools
vue-web-storage - npm Package Compare versions
Comparing version 5.0.1 to 6.0.0
| # Changelog | ||
| ## [6.0.0](https://github.com/ankurk91/vue-web-storage/compare/5.0.0...6.0.0) | ||
| * Drop support for Vue 2.x and add support for Vue 3.x | ||
| ## [5.0.0](https://github.com/ankurk91/vue-web-storage/compare/4.0.2...5.0.0) | ||
@@ -4,0 +7,0 @@ * Convert codebase to typescript |
| import WebStorage from './webStorage'; | ||
| import StorageWithEvents from './storageWithEvents'; | ||
| import { arrayify } from './util'; | ||
| var registerInstance = function (Vue, driver, prefix) { | ||
| var instance = new StorageWithEvents(prefix, driver); | ||
| var apiName = '$' + String(driver) + 'Storage'; | ||
| Vue[apiName] = instance; | ||
| Vue.prototype[apiName] = instance; | ||
| }; | ||
| var Plugin = function (Vue, options) { | ||
| if (options === void 0) { options = {}; } | ||
| var safeOptions = Object.assign({}, { | ||
| prefix: 'app_', | ||
| drivers: 'local' | ||
| }, options); | ||
| arrayify(safeOptions.drivers).map(function (driver) { | ||
| registerInstance(Vue, driver, safeOptions.prefix); | ||
| }); | ||
| }; | ||
| export default Plugin; | ||
| export { WebStorage, StorageWithEvents, Plugin }; | ||
| import VueWebStoragePlugin from './vue'; | ||
| export default VueWebStoragePlugin; | ||
| export { WebStorage, StorageWithEvents, VueWebStoragePlugin }; |
@@ -10,94 +10,10 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| root["VueWebStorage"] = factory(); | ||
| })(typeof self !== 'undefined' ? self : this, function() { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
| /******/ // The module cache | ||
| /******/ var installedModules = {}; | ||
| /******/ | ||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
| /******/ | ||
| /******/ // Check if module is in cache | ||
| /******/ if(installedModules[moduleId]) { | ||
| /******/ return installedModules[moduleId].exports; | ||
| /******/ } | ||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = installedModules[moduleId] = { | ||
| /******/ i: moduleId, | ||
| /******/ l: false, | ||
| /******/ exports: {} | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Execute the module function | ||
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
| /******/ | ||
| /******/ // Flag the module as loaded | ||
| /******/ module.l = true; | ||
| /******/ | ||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
| /******/ | ||
| /******/ | ||
| /******/ // expose the modules object (__webpack_modules__) | ||
| /******/ __webpack_require__.m = modules; | ||
| /******/ | ||
| /******/ // expose the module cache | ||
| /******/ __webpack_require__.c = installedModules; | ||
| /******/ | ||
| /******/ // define getter function for harmony exports | ||
| /******/ __webpack_require__.d = function(exports, name, getter) { | ||
| /******/ if(!__webpack_require__.o(exports, name)) { | ||
| /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); | ||
| /******/ } | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // define __esModule on exports | ||
| /******/ __webpack_require__.r = function(exports) { | ||
| /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { | ||
| /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); | ||
| /******/ } | ||
| /******/ Object.defineProperty(exports, '__esModule', { value: true }); | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // create a fake namespace object | ||
| /******/ // mode & 1: value is a module id, require it | ||
| /******/ // mode & 2: merge all properties of value into the ns | ||
| /******/ // mode & 4: return value when already ns object | ||
| /******/ // mode & 8|1: behave like require | ||
| /******/ __webpack_require__.t = function(value, mode) { | ||
| /******/ if(mode & 1) value = __webpack_require__(value); | ||
| /******/ if(mode & 8) return value; | ||
| /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; | ||
| /******/ var ns = Object.create(null); | ||
| /******/ __webpack_require__.r(ns); | ||
| /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); | ||
| /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); | ||
| /******/ return ns; | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // getDefaultExport function for compatibility with non-harmony modules | ||
| /******/ __webpack_require__.n = function(module) { | ||
| /******/ var getter = module && module.__esModule ? | ||
| /******/ function getDefault() { return module['default']; } : | ||
| /******/ function getModuleExports() { return module; }; | ||
| /******/ __webpack_require__.d(getter, 'a', getter); | ||
| /******/ return getter; | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Object.prototype.hasOwnProperty.call | ||
| /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; | ||
| /******/ | ||
| /******/ // __webpack_public_path__ | ||
| /******/ __webpack_require__.p = ""; | ||
| /******/ | ||
| /******/ | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(__webpack_require__.s = 0); | ||
| /******/ }) | ||
| /************************************************************************/ | ||
| /******/ ([ | ||
| /* 0 */ | ||
| /***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
| })(self, function() { | ||
| return /******/ (() => { // webpackBootstrap | ||
| /******/ "use strict"; | ||
| /******/ var __webpack_modules__ = ({ | ||
| "use strict"; | ||
| /***/ 592: | ||
| /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | ||
| // ESM COMPAT FLAG | ||
@@ -107,5 +23,8 @@ __webpack_require__.r(__webpack_exports__); | ||
| // EXPORTS | ||
| __webpack_require__.d(__webpack_exports__, "WebStorage", function() { return /* reexport */ webStorage; }); | ||
| __webpack_require__.d(__webpack_exports__, "StorageWithEvents", function() { return /* reexport */ storageWithEvents; }); | ||
| __webpack_require__.d(__webpack_exports__, "Plugin", function() { return /* binding */ Plugin; }); | ||
| __webpack_require__.d(__webpack_exports__, { | ||
| "StorageWithEvents": () => /* reexport */ storageWithEvents, | ||
| "VueWebStoragePlugin": () => /* reexport */ vue, | ||
| "WebStorage": () => /* reexport */ webStorage, | ||
| "default": () => /* binding */ src | ||
| }); | ||
@@ -125,4 +44,4 @@ // CONCATENATED MODULE: ./src/util.ts | ||
| // CONCATENATED MODULE: ./src/webStorage.ts | ||
| var webStorage_WebStorage = /** @class */ (function () { | ||
| ; | ||
| var WebStorage = /** @class */ (function () { | ||
| function WebStorage(prefix, driver) { | ||
@@ -195,8 +114,8 @@ if (prefix === void 0) { prefix = 'app_'; } | ||
| }()); | ||
| /* harmony default export */ var webStorage = (webStorage_WebStorage); | ||
| /* harmony default export */ const webStorage = (WebStorage); | ||
| // CONCATENATED MODULE: ./src/events.ts | ||
| ; | ||
| var listeners = {}; | ||
| var events_Events = /** @class */ (function () { | ||
| var Events = /** @class */ (function () { | ||
| function Events() { | ||
@@ -251,3 +170,3 @@ window.addEventListener('storage', this.onChange, false); | ||
| }()); | ||
| /* harmony default export */ var events = (events_Events); | ||
| /* harmony default export */ const events = (Events); | ||
@@ -270,3 +189,3 @@ // CONCATENATED MODULE: ./src/storageWithEvents.ts | ||
| var storageWithEvents_StorageWithEvents = /** @class */ (function (_super) { | ||
| var StorageWithEvents = /** @class */ (function (_super) { | ||
| __extends(StorageWithEvents, _super); | ||
@@ -295,15 +214,13 @@ function StorageWithEvents(prefix, driver) { | ||
| }(webStorage)); | ||
| /* harmony default export */ var storageWithEvents = (storageWithEvents_StorageWithEvents); | ||
| /* harmony default export */ const storageWithEvents = (StorageWithEvents); | ||
| // CONCATENATED MODULE: ./src/index.ts | ||
| // CONCATENATED MODULE: ./src/vue.ts | ||
| ; | ||
| var registerInstance = function (Vue, driver, prefix) { | ||
| var registerInstance = function (app, driver, prefix) { | ||
| var instance = new storageWithEvents(prefix, driver); | ||
| var apiName = '$' + String(driver) + 'Storage'; | ||
| Vue[apiName] = instance; | ||
| Vue.prototype[apiName] = instance; | ||
| app.config.globalProperties[apiName] = instance; | ||
| }; | ||
| var Plugin = function (Vue, options) { | ||
| var VueWebStoragePlugin = function (app, options) { | ||
| if (options === void 0) { options = {}; } | ||
@@ -315,11 +232,78 @@ var safeOptions = Object.assign({}, { | ||
| arrayify(safeOptions.drivers).map(function (driver) { | ||
| registerInstance(Vue, driver, safeOptions.prefix); | ||
| registerInstance(app, driver, safeOptions.prefix); | ||
| }); | ||
| }; | ||
| /* harmony default export */ var src = __webpack_exports__["default"] = (Plugin); | ||
| /* harmony default export */ const vue = (VueWebStoragePlugin); | ||
| // CONCATENATED MODULE: ./src/index.ts | ||
| ; | ||
| /* harmony default export */ const src = (vue); | ||
| /***/ }) | ||
| /******/ ]); | ||
| /******/ }); | ||
| /************************************************************************/ | ||
| /******/ // The module cache | ||
| /******/ var __webpack_module_cache__ = {}; | ||
| /******/ | ||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
| /******/ // Check if module is in cache | ||
| /******/ if(__webpack_module_cache__[moduleId]) { | ||
| /******/ return __webpack_module_cache__[moduleId].exports; | ||
| /******/ } | ||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = __webpack_module_cache__[moduleId] = { | ||
| /******/ // no module.id needed | ||
| /******/ // no module.loaded needed | ||
| /******/ exports: {} | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Execute the module function | ||
| /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); | ||
| /******/ | ||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
| /******/ | ||
| /************************************************************************/ | ||
| /******/ /* webpack/runtime/define property getters */ | ||
| /******/ (() => { | ||
| /******/ // define getter functions for harmony exports | ||
| /******/ __webpack_require__.d = (exports, definition) => { | ||
| /******/ for(var key in definition) { | ||
| /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { | ||
| /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); | ||
| /******/ } | ||
| /******/ } | ||
| /******/ }; | ||
| /******/ })(); | ||
| /******/ | ||
| /******/ /* webpack/runtime/hasOwnProperty shorthand */ | ||
| /******/ (() => { | ||
| /******/ __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop) | ||
| /******/ })(); | ||
| /******/ | ||
| /******/ /* webpack/runtime/make namespace object */ | ||
| /******/ (() => { | ||
| /******/ // define __esModule on exports | ||
| /******/ __webpack_require__.r = (exports) => { | ||
| /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { | ||
| /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); | ||
| /******/ } | ||
| /******/ Object.defineProperty(exports, '__esModule', { value: true }); | ||
| /******/ }; | ||
| /******/ })(); | ||
| /******/ | ||
| /************************************************************************/ | ||
| /******/ // module exports must be returned from runtime so entry inlining is disabled | ||
| /******/ // startup | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(592); | ||
| /******/ })() | ||
| ; | ||
| }); |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueWebStorage",[],e):"object"==typeof exports?exports.VueWebStorage=e():t.VueWebStorage=e()}("undefined"!=typeof self?self:this,(function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){"use strict";r.r(e),r.d(e,"WebStorage",(function(){return i})),r.d(e,"StorageWithEvents",(function(){return p})),r.d(e,"Plugin",(function(){return c}));var n,o=function(t){return null===t?t:JSON.parse(t)},i=function(){function t(t,e){void 0===t&&(t="app_"),void 0===e&&(e="local"),this.prefix=t,this.storage=this.resolveDriver(e)}return t.prototype.prefixKey=function(t){return this.prefix+String(t)},t.prototype.set=function(t,e){return this.storage.setItem(this.prefixKey(t),JSON.stringify(e))},t.prototype.get=function(t,e){void 0===e&&(e=null);var r=null,n=this.storage.getItem(this.prefixKey(t));return n&&(r=o(n)),null===r?e:r},t.prototype.remove=function(t){return this.storage.removeItem(this.prefixKey(t))},t.prototype.clear=function(t){var e=this;void 0===t&&(t=!1),t?this.storage.clear():this.keys(!0).map((function(t){e.storage.removeItem(t)}))},t.prototype.keys=function(t){var e=this;void 0===t&&(t=!1);var r=[];return Object.keys(this.storage).forEach((function(n){n.substr(0,e.prefix.length)===e.prefix&&r.push(t?n:n.substring(e.prefix.length))})),r},t.prototype.hasKey=function(t){return-1!==this.keys().indexOf(t)},t.prototype.length=function(){return this.keys().length},t.prototype.resolveDriver=function(t){switch(t){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error("Unknown driver supplied: "+t)}},t}(),u={},f=function(){function t(){window.addEventListener("storage",this.onChange,!1)}return t.prototype.onChange=function(t){var e=this;if(t.key){var r=u[t.key];if(r){var n=o(t.newValue),i=o(t.oldValue);r.map((function(r){r.call(e,n,i,t.url)}))}}},t.prototype.on=function(t,e){u[t]?u[t].push(e):u[t]=[e]},t.prototype.off=function(t,e){var r=u[t];r&&r.length>1?r.splice(r.indexOf(e),1):delete u[t]},t.prototype.clear=function(t){t?delete u[t]:u={}},t.prototype.listeners=function(){return u},t}(),s=(n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])})(t,e)},function(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}),p=function(t){function e(e,r){void 0===e&&(e="app_"),void 0===r&&(r="local");var n=t.call(this,e,r)||this;return n.events=new f,n}return s(e,t),e.prototype.on=function(t,e){return this.events.on(this.prefixKey(t),e),this},e.prototype.off=function(t,e){return this.events.off(this.prefixKey(t),e),this},e.prototype.clearEvents=function(t){var e=!!t&&this.prefixKey(t);return this.events.clear(e),this},e}(i),c=function(t,e){void 0===e&&(e={});var r,n=Object.assign({},{prefix:"app_",drivers:"local"},e);(r=n.drivers,r instanceof Array?r:[r]).map((function(e){!function(t,e,r){var n=new p(r,e),o="$"+String(e)+"Storage";t[o]=n,t.prototype[o]=n}(t,e,n.prefix)}))};e.default=c}])})); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueWebStorage",[],e):"object"==typeof exports?exports.VueWebStorage=e():t.VueWebStorage=e()}(self,(function(){return(()=>{"use strict";var t={592:(t,e,r)=>{r.r(e),r.d(e,{StorageWithEvents:()=>f,VueWebStoragePlugin:()=>a,WebStorage:()=>n,default:()=>c});var o=function(t){return null===t?t:JSON.parse(t)};const n=function(){function t(t,e){void 0===t&&(t="app_"),void 0===e&&(e="local"),this.prefix=t,this.storage=this.resolveDriver(e)}return t.prototype.prefixKey=function(t){return this.prefix+String(t)},t.prototype.set=function(t,e){return this.storage.setItem(this.prefixKey(t),JSON.stringify(e))},t.prototype.get=function(t,e){void 0===e&&(e=null);var r=null,n=this.storage.getItem(this.prefixKey(t));return n&&(r=o(n)),null===r?e:r},t.prototype.remove=function(t){return this.storage.removeItem(this.prefixKey(t))},t.prototype.clear=function(t){var e=this;void 0===t&&(t=!1),t?this.storage.clear():this.keys(!0).map((function(t){e.storage.removeItem(t)}))},t.prototype.keys=function(t){var e=this;void 0===t&&(t=!1);var r=[];return Object.keys(this.storage).forEach((function(o){o.substr(0,e.prefix.length)===e.prefix&&r.push(t?o:o.substring(e.prefix.length))})),r},t.prototype.hasKey=function(t){return-1!==this.keys().indexOf(t)},t.prototype.length=function(){return this.keys().length},t.prototype.resolveDriver=function(t){switch(t){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error("Unknown driver supplied: "+t)}},t}();var i={};const s=function(){function t(){window.addEventListener("storage",this.onChange,!1)}return t.prototype.onChange=function(t){var e=this;if(t.key){var r=i[t.key];if(r){var n=o(t.newValue),s=o(t.oldValue);r.map((function(r){r.call(e,n,s,t.url)}))}}},t.prototype.on=function(t,e){i[t]?i[t].push(e):i[t]=[e]},t.prototype.off=function(t,e){var r=i[t];r&&r.length>1?r.splice(r.indexOf(e),1):delete i[t]},t.prototype.clear=function(t){t?delete i[t]:i={}},t.prototype.listeners=function(){return i},t}();var p,u=(p=function(t,e){return(p=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])})(t,e)},function(t,e){function r(){this.constructor=t}p(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)});const f=function(t){function e(e,r){void 0===e&&(e="app_"),void 0===r&&(r="local");var o=t.call(this,e,r)||this;return o.events=new s,o}return u(e,t),e.prototype.on=function(t,e){return this.events.on(this.prefixKey(t),e),this},e.prototype.off=function(t,e){return this.events.off(this.prefixKey(t),e),this},e.prototype.clearEvents=function(t){var e=!!t&&this.prefixKey(t);return this.events.clear(e),this},e}(n);const a=function(t,e){void 0===e&&(e={});var r,o=Object.assign({},{prefix:"app_",drivers:"local"},e);(r=o.drivers,r instanceof Array?r:[r]).map((function(e){!function(t,e,r){var o=new f(r,e),n="$"+String(e)+"Storage";t.config.globalProperties[n]=o}(t,e,o.prefix)}))},c=a}},e={};function r(o){if(e[o])return e[o].exports;var n=e[o]={exports:{}};return t[o](n,n.exports,r),n.exports}return r.d=(t,e)=>{for(var o in e)r.o(e,o)&&!r.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r(592)})()})); |
| import WebStorage from './webStorage'; | ||
| import StorageWithEvents from './storageWithEvents'; | ||
| import { driverType } from "./interfaces"; | ||
| import { PluginFunction, PluginObject } from 'vue'; | ||
| export interface PluginOptions { | ||
| prefix?: string; | ||
| drivers?: driverType[]; | ||
| } | ||
| declare const Plugin: PluginFunction<PluginOptions>; | ||
| export interface VueWebStoragePlugin extends PluginObject<PluginOptions> { | ||
| install: PluginFunction<PluginOptions>; | ||
| } | ||
| declare module 'vue/types/vue' { | ||
| interface Vue { | ||
| readonly $sessionStorage: StorageWithEvents; | ||
| readonly $localStorage: StorageWithEvents; | ||
| } | ||
| interface VueConstructor { | ||
| readonly $sessionStorage: StorageWithEvents; | ||
| readonly $localStorage: StorageWithEvents; | ||
| } | ||
| } | ||
| export default Plugin; | ||
| export { WebStorage, StorageWithEvents, Plugin }; | ||
| import VueWebStoragePlugin from './vue'; | ||
| export default VueWebStoragePlugin; | ||
| export { WebStorage, StorageWithEvents, VueWebStoragePlugin }; |
| { | ||
| "name": "vue-web-storage", | ||
| "version": "5.0.1", | ||
| "version": "6.0.0", | ||
| "description": "Vue.js plugin for localStorage and sessionStorage", | ||
@@ -39,13 +39,12 @@ "main": "dist/index.umd.js", | ||
| "cross-env": "^7.0.2", | ||
| "jest": "^26.5.2", | ||
| "ts-jest": "^26.4.1", | ||
| "ts-loader": "^8.0.4", | ||
| "typescript": "^4.0.3", | ||
| "unminified-webpack-plugin": "^2.0.0", | ||
| "vue": "^2.6.12", | ||
| "webpack": "^4.44.2", | ||
| "webpack-cli": "^3.3.12" | ||
| "jest": "^26.6.3", | ||
| "ts-jest": "^26.4.3", | ||
| "ts-loader": "^8.0.10", | ||
| "typescript": "^4.0.5", | ||
| "vue": "^3.0.0", | ||
| "webpack": "^5.4.0", | ||
| "webpack-cli": "^4.2.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "vue": "^2.0.0" | ||
| "vue": "^3.0.0" | ||
| }, | ||
@@ -52,0 +51,0 @@ "engines": { |
@@ -13,2 +13,8 @@ # Vue Web Storage | ||
| ### Version matrix | ||
| | Vue.js version | Package version | Branch | | ||
| | :--- | :---: | ---: | | ||
| | 2.x | 5.x | [5.x](https://github.com/ankurk91/vue-web-storage/tree/v5.x) | | ||
| | 3.x | 6.x | master | | ||
| ## Features | ||
@@ -31,7 +37,8 @@ * Choose either `localStorage` or `sessionStorage` or both | ||
| ```js | ||
| import Vue from 'vue'; | ||
| import {createApp} from 'vue'; | ||
| import StoragePlugin from 'vue-web-storage'; | ||
| Vue.use(StoragePlugin); | ||
| const app = createApp({}).mount('#app') | ||
| app.use(StoragePlugin); | ||
| // Use as | ||
| // Vue.$localStorage | ||
| // this.$localStorage | ||
| ``` | ||
@@ -41,3 +48,3 @@ | ||
| ```js | ||
| Vue.use(StoragePlugin, { | ||
| app.use(StoragePlugin, { | ||
| prefix: 'your_app_slug_',// default `app_` | ||
@@ -48,4 +55,4 @@ drivers: ['session', 'local'], // default 'local' | ||
| // This will register two instances | ||
| // Vue.$sessionStorage | ||
| // Vue.$localStorage | ||
| // this.$sessionStorage | ||
| // this.$localStorage | ||
| ``` | ||
@@ -60,6 +67,6 @@ | ||
| ```js | ||
| Vue.$localStorage.set('name', 'john') | ||
| Vue.$localStorage.set('isAdmin', true) | ||
| Vue.$localStorage.set('roles', ['admin', 'sub-admin']) | ||
| Vue.$localStorage.set('permission', {id: 2, slug: 'edit_post'}) | ||
| this.$localStorage.set('name', 'john') | ||
| this.$localStorage.set('isAdmin', true) | ||
| this.$localStorage.set('roles', ['admin', 'sub-admin']) | ||
| this.$localStorage.set('permission', {id: 2, slug: 'edit_post'}) | ||
| ``` | ||
@@ -70,4 +77,4 @@ #### `get(key, ?defaultValue = null)` | ||
| ```js | ||
| Vue.$localStorage.get('name') | ||
| Vue.$localStorage.get('doesNotExistsInStorage','defaultValue') | ||
| this.$localStorage.get('name') | ||
| this.$localStorage.get('doesNotExistsInStorage','defaultValue') | ||
| ``` | ||
@@ -77,3 +84,3 @@ #### `remove(key)` | ||
| ```js | ||
| Vue.$localStorage.remove('name') | ||
| this.$localStorage.remove('name') | ||
| ``` | ||
@@ -83,3 +90,3 @@ #### `clear(?force = false)` | ||
| ```js | ||
| Vue.$localStorage.clear() | ||
| this.$localStorage.clear() | ||
| ``` | ||
@@ -89,3 +96,3 @@ #### `keys(?withPrefix = false)` | ||
| ```js | ||
| Vue.$localStorage.keys() | ||
| this.$localStorage.keys() | ||
| ``` | ||
@@ -95,3 +102,3 @@ #### `hasKey(key)` | ||
| ```js | ||
| Vue.$localStorage.hasKey('name') | ||
| this.$localStorage.hasKey('name') | ||
| ``` | ||
@@ -101,3 +108,3 @@ #### `length()` | ||
| ```js | ||
| Vue.$localStorage.length() | ||
| this.$localStorage.length() | ||
| ``` | ||
@@ -114,4 +121,4 @@ | ||
| }; | ||
| Vue.$localStorage.on('name', onChangeName); | ||
| Vue.$localStorage.on('name', this.anotherMethod) | ||
| this.$localStorage.on('name', onChangeName); | ||
| this.$localStorage.on('name', this.anotherMethod) | ||
| ``` | ||
@@ -121,3 +128,3 @@ #### `off(key,fn)` | ||
| ```js | ||
| Vue.$localStorage.off('name', this.onChangeName) | ||
| this.$localStorage.off('name', this.onChangeName) | ||
| ``` | ||
@@ -127,4 +134,4 @@ #### `clearEvents(?key)` | ||
| ```js | ||
| Vue.$localStorage.clearEvents('name'); | ||
| Vue.$localStorage.clearEvents() | ||
| this.$localStorage.clearEvents('name'); | ||
| this.$localStorage.clearEvents() | ||
| ``` | ||
@@ -135,8 +142,8 @@ | ||
| <!-- Vue js --> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue@3"></script> | ||
| <!-- Lastly add this package --> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue-web-storage@5"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue-web-storage@6"></script> | ||
| <!-- Init the plugin --> | ||
| <script> | ||
| Vue.use(VueWebStorage.default) | ||
| yourApp.use(VueWebStorage.default) | ||
| </script> | ||
@@ -143,0 +150,0 @@ ``` |
| import WebStorage from './webStorage'; | ||
| import StorageWithEvents from './storageWithEvents'; | ||
| import {arrayify} from './util'; | ||
| import {driverType} from "./interfaces"; | ||
| import {Vue, VueConstructor} from 'vue/types/vue' | ||
| import {PluginFunction, PluginObject} from 'vue' | ||
| import VueWebStoragePlugin from './vue'; | ||
| const registerInstance = (Vue: any, driver: driverType, prefix: string) => { | ||
| let instance = new StorageWithEvents(prefix, driver); | ||
| let apiName = '$' + String(driver) + 'Storage'; | ||
| Vue[apiName] = instance; | ||
| Vue.prototype[apiName] = instance; | ||
| }; | ||
| export interface PluginOptions { | ||
| prefix?: string | ||
| drivers?: driverType[] | ||
| } | ||
| const Plugin: PluginFunction<PluginOptions> = (Vue: any, options: PluginOptions = {}) => { | ||
| let safeOptions = Object.assign({}, { | ||
| prefix: 'app_', | ||
| drivers: 'local' | ||
| }, options); | ||
| arrayify(safeOptions.drivers).map((driver) => { | ||
| registerInstance(Vue, driver, safeOptions.prefix); | ||
| }); | ||
| }; | ||
| export interface VueWebStoragePlugin extends PluginObject<PluginOptions> { | ||
| install: PluginFunction<PluginOptions> | ||
| } | ||
| declare module 'vue/types/vue' { | ||
| interface Vue { | ||
| readonly $sessionStorage: StorageWithEvents | ||
| readonly $localStorage: StorageWithEvents | ||
| } | ||
| interface VueConstructor { | ||
| readonly $sessionStorage: StorageWithEvents | ||
| readonly $localStorage: StorageWithEvents | ||
| } | ||
| } | ||
| export default Plugin; | ||
| export {WebStorage, StorageWithEvents, Plugin} | ||
| export default VueWebStoragePlugin; | ||
| export {WebStorage, StorageWithEvents, VueWebStoragePlugin} |
No alert changes
Improved metrics
- Dev dependency count
9
-10%- Number of package files
27
12.5%- Number of lines in readme file
153
4.79%Worsened metrics
- Total package byte prevSize
37700
-3.32%- Lines of code
718
-3.36%No dependency changes