varstor 0.0.1 → 0.0.3

package/README.md

@@ -1,2 +1,19 @@
 # Varstor
-Library for managing the state of applications, employing reactivity, and seamless usage of storage with a simple unified interface
+State manager for web applications and webextensions, employing reactivity, wrapping, and uniting the usage of different storages' values and common variables into a simple universal interface.
+
+## How to install and prepare
+Install the library through
+```sh
+npm install varstor
+```
+then import with
+```js
+import varstor from 'varstor'
+```
+
+or, if you are developing a webextension (except content script) 
+
+```js
+import varstor from 'varstor/webextension'
+```
+in your script file.

package/dist/varstor-webextension.js

@@ -0,0 +1,639 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["Varstor"] = factory();
+	else
+		root["Varstor"] = factory();
+})(this, () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./node_modules/webextension-polyfill/dist/browser-polyfill.min.js"
+/*!*************************************************************************!*\
+  !*** ./node_modules/webextension-polyfill/dist/browser-polyfill.min.js ***!
+  \*************************************************************************/
+(module, exports) {
+
+var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function(a,b){if(true)!(__WEBPACK_AMD_DEFINE_ARRAY__ = [module], __WEBPACK_AMD_DEFINE_FACTORY__ = (b),
+		__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
+		(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
+		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));else // removed by dead control flow
+{ var c; }})("undefined"==typeof globalThis?"undefined"==typeof self?this:self:globalThis,function(a){"use strict";if(!(globalThis.chrome&&globalThis.chrome.runtime&&globalThis.chrome.runtime.id))throw new Error("This script should only be loaded in a browser extension.");if(!(globalThis.browser&&globalThis.browser.runtime&&globalThis.browser.runtime.id)){a.exports=(a=>{const b={alarms:{clear:{minArgs:0,maxArgs:1},clearAll:{minArgs:0,maxArgs:0},get:{minArgs:0,maxArgs:1},getAll:{minArgs:0,maxArgs:0}},bookmarks:{create:{minArgs:1,maxArgs:1},get:{minArgs:1,maxArgs:1},getChildren:{minArgs:1,maxArgs:1},getRecent:{minArgs:1,maxArgs:1},getSubTree:{minArgs:1,maxArgs:1},getTree:{minArgs:0,maxArgs:0},move:{minArgs:2,maxArgs:2},remove:{minArgs:1,maxArgs:1},removeTree:{minArgs:1,maxArgs:1},search:{minArgs:1,maxArgs:1},update:{minArgs:2,maxArgs:2}},browserAction:{disable:{minArgs:0,maxArgs:1,fallbackToNoCallback:!0},enable:{minArgs:0,maxArgs:1,fallbackToNoCallback:!0},getBadgeBackgroundColor:{minArgs:1,maxArgs:1},getBadgeText:{minArgs:1,maxArgs:1},getPopup:{minArgs:1,maxArgs:1},getTitle:{minArgs:1,maxArgs:1},openPopup:{minArgs:0,maxArgs:0},setBadgeBackgroundColor:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setBadgeText:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setIcon:{minArgs:1,maxArgs:1},setPopup:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setTitle:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0}},browsingData:{remove:{minArgs:2,maxArgs:2},removeCache:{minArgs:1,maxArgs:1},removeCookies:{minArgs:1,maxArgs:1},removeDownloads:{minArgs:1,maxArgs:1},removeFormData:{minArgs:1,maxArgs:1},removeHistory:{minArgs:1,maxArgs:1},removeLocalStorage:{minArgs:1,maxArgs:1},removePasswords:{minArgs:1,maxArgs:1},removePluginData:{minArgs:1,maxArgs:1},settings:{minArgs:0,maxArgs:0}},commands:{getAll:{minArgs:0,maxArgs:0}},contextMenus:{remove:{minArgs:1,maxArgs:1},removeAll:{minArgs:0,maxArgs:0},update:{minArgs:2,maxArgs:2}},cookies:{get:{minArgs:1,maxArgs:1},getAll:{minArgs:1,maxArgs:1},getAllCookieStores:{minArgs:0,maxArgs:0},remove:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}},devtools:{inspectedWindow:{eval:{minArgs:1,maxArgs:2,singleCallbackArg:!1}},panels:{create:{minArgs:3,maxArgs:3,singleCallbackArg:!0},elements:{createSidebarPane:{minArgs:1,maxArgs:1}}}},downloads:{cancel:{minArgs:1,maxArgs:1},download:{minArgs:1,maxArgs:1},erase:{minArgs:1,maxArgs:1},getFileIcon:{minArgs:1,maxArgs:2},open:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},pause:{minArgs:1,maxArgs:1},removeFile:{minArgs:1,maxArgs:1},resume:{minArgs:1,maxArgs:1},search:{minArgs:1,maxArgs:1},show:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0}},extension:{isAllowedFileSchemeAccess:{minArgs:0,maxArgs:0},isAllowedIncognitoAccess:{minArgs:0,maxArgs:0}},history:{addUrl:{minArgs:1,maxArgs:1},deleteAll:{minArgs:0,maxArgs:0},deleteRange:{minArgs:1,maxArgs:1},deleteUrl:{minArgs:1,maxArgs:1},getVisits:{minArgs:1,maxArgs:1},search:{minArgs:1,maxArgs:1}},i18n:{detectLanguage:{minArgs:1,maxArgs:1},getAcceptLanguages:{minArgs:0,maxArgs:0}},identity:{launchWebAuthFlow:{minArgs:1,maxArgs:1}},idle:{queryState:{minArgs:1,maxArgs:1}},management:{get:{minArgs:1,maxArgs:1},getAll:{minArgs:0,maxArgs:0},getSelf:{minArgs:0,maxArgs:0},setEnabled:{minArgs:2,maxArgs:2},uninstallSelf:{minArgs:0,maxArgs:1}},notifications:{clear:{minArgs:1,maxArgs:1},create:{minArgs:1,maxArgs:2},getAll:{minArgs:0,maxArgs:0},getPermissionLevel:{minArgs:0,maxArgs:0},update:{minArgs:2,maxArgs:2}},pageAction:{getPopup:{minArgs:1,maxArgs:1},getTitle:{minArgs:1,maxArgs:1},hide:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setIcon:{minArgs:1,maxArgs:1},setPopup:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setTitle:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},show:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0}},permissions:{contains:{minArgs:1,maxArgs:1},getAll:{minArgs:0,maxArgs:0},remove:{minArgs:1,maxArgs:1},request:{minArgs:1,maxArgs:1}},runtime:{getBackgroundPage:{minArgs:0,maxArgs:0},getPlatformInfo:{minArgs:0,maxArgs:0},openOptionsPage:{minArgs:0,maxArgs:0},requestUpdateCheck:{minArgs:0,maxArgs:0},sendMessage:{minArgs:1,maxArgs:3},sendNativeMessage:{minArgs:2,maxArgs:2},setUninstallURL:{minArgs:1,maxArgs:1}},sessions:{getDevices:{minArgs:0,maxArgs:1},getRecentlyClosed:{minArgs:0,maxArgs:1},restore:{minArgs:0,maxArgs:1}},storage:{local:{clear:{minArgs:0,maxArgs:0},get:{minArgs:0,maxArgs:1},getBytesInUse:{minArgs:0,maxArgs:1},remove:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}},managed:{get:{minArgs:0,maxArgs:1},getBytesInUse:{minArgs:0,maxArgs:1}},sync:{clear:{minArgs:0,maxArgs:0},get:{minArgs:0,maxArgs:1},getBytesInUse:{minArgs:0,maxArgs:1},remove:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}}},tabs:{captureVisibleTab:{minArgs:0,maxArgs:2},create:{minArgs:1,maxArgs:1},detectLanguage:{minArgs:0,maxArgs:1},discard:{minArgs:0,maxArgs:1},duplicate:{minArgs:1,maxArgs:1},executeScript:{minArgs:1,maxArgs:2},get:{minArgs:1,maxArgs:1},getCurrent:{minArgs:0,maxArgs:0},getZoom:{minArgs:0,maxArgs:1},getZoomSettings:{minArgs:0,maxArgs:1},goBack:{minArgs:0,maxArgs:1},goForward:{minArgs:0,maxArgs:1},highlight:{minArgs:1,maxArgs:1},insertCSS:{minArgs:1,maxArgs:2},move:{minArgs:2,maxArgs:2},query:{minArgs:1,maxArgs:1},reload:{minArgs:0,maxArgs:2},remove:{minArgs:1,maxArgs:1},removeCSS:{minArgs:1,maxArgs:2},sendMessage:{minArgs:2,maxArgs:3},setZoom:{minArgs:1,maxArgs:2},setZoomSettings:{minArgs:1,maxArgs:2},update:{minArgs:1,maxArgs:2}},topSites:{get:{minArgs:0,maxArgs:0}},webNavigation:{getAllFrames:{minArgs:1,maxArgs:1},getFrame:{minArgs:1,maxArgs:1}},webRequest:{handlerBehaviorChanged:{minArgs:0,maxArgs:0}},windows:{create:{minArgs:0,maxArgs:1},get:{minArgs:1,maxArgs:2},getAll:{minArgs:0,maxArgs:1},getCurrent:{minArgs:0,maxArgs:1},getLastFocused:{minArgs:0,maxArgs:1},remove:{minArgs:1,maxArgs:1},update:{minArgs:2,maxArgs:2}}};if(0===Object.keys(b).length)throw new Error("api-metadata.json has not been included in browser-polyfill");class c extends WeakMap{constructor(a,b=void 0){super(b),this.createItem=a}get(a){return this.has(a)||this.set(a,this.createItem(a)),super.get(a)}}const d=a=>a&&"object"==typeof a&&"function"==typeof a.then,e=(b,c)=>(...d)=>{a.runtime.lastError?b.reject(new Error(a.runtime.lastError.message)):c.singleCallbackArg||1>=d.length&&!1!==c.singleCallbackArg?b.resolve(d[0]):b.resolve(d)},f=a=>1==a?"argument":"arguments",g=(a,b)=>function(c,...d){if(d.length<b.minArgs)throw new Error(`Expected at least ${b.minArgs} ${f(b.minArgs)} for ${a}(), got ${d.length}`);if(d.length>b.maxArgs)throw new Error(`Expected at most ${b.maxArgs} ${f(b.maxArgs)} for ${a}(), got ${d.length}`);return new Promise((f,g)=>{if(b.fallbackToNoCallback)try{c[a](...d,e({resolve:f,reject:g},b))}catch(e){console.warn(`${a} API method doesn't seem to support the callback parameter, `+"falling back to call it without a callback: ",e),c[a](...d),b.fallbackToNoCallback=!1,b.noCallback=!0,f()}else b.noCallback?(c[a](...d),f()):c[a](...d,e({resolve:f,reject:g},b))})},h=(a,b,c)=>new Proxy(b,{apply(b,d,e){return c.call(d,a,...e)}});let i=Function.call.bind(Object.prototype.hasOwnProperty);const j=(a,b={},c={})=>{let d=Object.create(null),e=Object.create(a);return new Proxy(e,{has(b,c){return c in a||c in d},get(e,f){if(f in d)return d[f];if(!(f in a))return;let k=a[f];if("function"==typeof k){if("function"==typeof b[f])k=h(a,a[f],b[f]);else if(i(c,f)){let b=g(f,c[f]);k=h(a,a[f],b)}else k=k.bind(a);}else if("object"==typeof k&&null!==k&&(i(b,f)||i(c,f)))k=j(k,b[f],c[f]);else if(i(c,"*"))k=j(k,b[f],c["*"]);else return Object.defineProperty(d,f,{configurable:!0,enumerable:!0,get(){return a[f]},set(b){a[f]=b}}),k;return d[f]=k,k},set(b,c,e){return c in d?d[c]=e:a[c]=e,!0},defineProperty(a,b,c){return Reflect.defineProperty(d,b,c)},deleteProperty(a,b){return Reflect.deleteProperty(d,b)}})},k=a=>({addListener(b,c,...d){b.addListener(a.get(c),...d)},hasListener(b,c){return b.hasListener(a.get(c))},removeListener(b,c){b.removeListener(a.get(c))}}),l=new c(a=>"function"==typeof a?function(b){const c=j(b,{},{getContent:{minArgs:0,maxArgs:0}});a(c)}:a),m=new c(a=>"function"==typeof a?function(b,c,e){let f,g,h=!1,i=new Promise(a=>{f=function(b){h=!0,a(b)}});try{g=a(b,c,f)}catch(a){g=Promise.reject(a)}const j=!0!==g&&d(g);if(!0!==g&&!j&&!h)return!1;const k=a=>{a.then(a=>{e(a)},a=>{let b;b=a&&(a instanceof Error||"string"==typeof a.message)?a.message:"An unexpected error occurred",e({__mozWebExtensionPolyfillReject__:!0,message:b})}).catch(a=>{console.error("Failed to send onMessage rejected reply",a)})};return j?k(g):k(i),!0}:a),n=({reject:b,resolve:c},d)=>{a.runtime.lastError?a.runtime.lastError.message==="The message port closed before a response was received."?c():b(new Error(a.runtime.lastError.message)):d&&d.__mozWebExtensionPolyfillReject__?b(new Error(d.message)):c(d)},o=(a,b,c,...d)=>{if(d.length<b.minArgs)throw new Error(`Expected at least ${b.minArgs} ${f(b.minArgs)} for ${a}(), got ${d.length}`);if(d.length>b.maxArgs)throw new Error(`Expected at most ${b.maxArgs} ${f(b.maxArgs)} for ${a}(), got ${d.length}`);return new Promise((a,b)=>{const e=n.bind(null,{resolve:a,reject:b});d.push(e),c.sendMessage(...d)})},p={devtools:{network:{onRequestFinished:k(l)}},runtime:{onMessage:k(m),onMessageExternal:k(m),sendMessage:o.bind(null,"sendMessage",{minArgs:1,maxArgs:3})},tabs:{sendMessage:o.bind(null,"sendMessage",{minArgs:2,maxArgs:3})}},q={clear:{minArgs:1,maxArgs:1},get:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}};return b.privacy={network:{"*":q},services:{"*":q},websites:{"*":q}},j(a,p,b)})(chrome)}else a.exports=globalThis.browser});
+//# sourceMappingURL=browser-polyfill.min.js.map
+
+// webextension-polyfill v.0.12.0 (https://github.com/mozilla/webextension-polyfill)
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+/***/ },
+
+/***/ "./src/error.js"
+/*!**********************!*\
+  !*** ./src/error.js ***!
+  \**********************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   isKeyPresent: () => (/* binding */ isKeyPresent)
+/* harmony export */ });
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! . */ "./src/index.js");
+/* harmony import */ var _namespace__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./namespace */ "./src/namespace.js");
+
+
+
+const isKeyPresent = (fullKey, obj) => {
+  if (!___WEBPACK_IMPORTED_MODULE_0__.ACCESSORS[fullKey]) {
+    const [key, namespace] = (0,_namespace__WEBPACK_IMPORTED_MODULE_1__.splitFullKey)(fullKey);
+    throw new Error (`Trying to access "${key}" key in "${namespace}" namespace, but it doesn't exist`);
+  }
+
+  return true;
+}
+
+
+/***/ },
+
+/***/ "./src/helpers.js"
+/*!************************!*\
+  !*** ./src/helpers.js ***!
+  \************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   getKeys: () => (/* binding */ getKeys),
+/* harmony export */   getParamNames: () => (/* binding */ getParamNames),
+/* harmony export */   isArray: () => (/* binding */ isArray),
+/* harmony export */   isFunction: () => (/* binding */ isFunction),
+/* harmony export */   isObject: () => (/* binding */ isObject),
+/* harmony export */   isString: () => (/* binding */ isString),
+/* harmony export */   toCamelCase: () => (/* binding */ toCamelCase)
+/* harmony export */ });
+const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
+const ARGUMENT_NAMES = /([^\s,]+)/g;
+
+function isFunction(x) {
+  return typeof x === "function";
+}
+
+function isObject(x) {
+  return typeof x === "object";
+}
+
+function isString(x) {
+  return typeof x === "string";
+}
+
+function isArray(x) {
+  return Array.isArray(x);
+}
+
+function getParamNames(fn) {
+  const fnStr = fn.toString().replace(STRIP_COMMENTS, "");
+  const names = fnStr
+    .slice(fnStr.indexOf("(") + 1, fnStr.indexOf(")"))
+    .match(ARGUMENT_NAMES);
+
+  if (names === null) {
+    return [];
+  }
+
+  return names;
+}
+
+function getKeys(obj, key) {
+  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, v[key]]));
+}
+
+function toCamelCase(str, delimiter) {
+  const strArr = str.split(delimiter);
+  return `${strArr[0]}${strArr.slice(1).reduce((a, c) => `${a}${c.charAt(0).toUpperCase()}${c.slice(1)}`, "")}`;
+}
+
+
+/***/ },
+
+/***/ "./src/index.js"
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ACCESSORS: () => (/* binding */ ACCESSORS),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./storage */ "./src/storage.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers */ "./src/helpers.js");
+/* harmony import */ var _namespace__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./namespace */ "./src/namespace.js");
+/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./error */ "./src/error.js");
+
+
+
+
+
+
+
+
+const STATE = {};
+const ACCESSORS = {};
+const COMPUTED_DEPENDENCIES = {};
+const COMPUTED_ARGUMENTS = {};
+
+const STORAGE = {
+  GET_TYPE: null,
+  IS_AVAILABE: null,
+  UPDATE_STATE: null,
+  SET_VALUE: null
+};
+
+setStorageUtils(_storage__WEBPACK_IMPORTED_MODULE_0__["default"]);
+
+async function addState (namespace, initialState, isPersistent) {
+  const storageType = STORAGE.GET_TYPE(isPersistent);
+  const defaultValues = Object.assign({}, initialState);
+  const namespacedValues = (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.namespacify)(namespace(), initialState);
+
+  if (STORAGE.IS_AVAILABE(storageType)) {
+    await STORAGE.UPDATE_STATE(namespacedValues, storageType);
+  }
+
+  const accessors = {};
+  for (const key in initialState) {
+    accessors[namespace(key)] = setupValue(
+      namespace(key),
+      namespacedValues[namespace(key)],
+      defaultValues[key],
+      storageType,
+    );
+  }
+
+  Object.assign(ACCESSORS, accessors);
+  return createStore(namespace());
+}
+
+function setupValue (key, value, defaultValue, storageType) {
+  const isComputedValue = (0,_helpers__WEBPACK_IMPORTED_MODULE_1__.isFunction)(value);
+
+  if (isComputedValue) {
+    setupDependencies(key, value);
+  }
+
+  STATE[key] = {
+    value: isComputedValue ? value.apply(null, getArguments(key)) : value,
+    computeFn: value,
+    listeners: [],
+    defaultValue,
+  };
+
+  return createAccessor(key, value, storageType);
+}
+
+function setupDependencies(computedValueName, computeFn) {
+  const [, namespace] = (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.splitFullKey)(computedValueName);
+  const paramNames = (0,_helpers__WEBPACK_IMPORTED_MODULE_1__.getParamNames)(computeFn).map((name) => (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.addNamespace)(namespace, name));
+  COMPUTED_ARGUMENTS[computedValueName] = paramNames;
+
+  paramNames.forEach((param) => {
+    if (COMPUTED_DEPENDENCIES[param]) {
+      COMPUTED_DEPENDENCIES[param].push(computedValueName);
+    } else {
+      COMPUTED_DEPENDENCIES[param] = [computedValueName];
+    }
+  });
+}
+
+function getArguments(computedName) {
+  const values = getNamespaceValues(computedName);
+  
+  return COMPUTED_ARGUMENTS[computedName]
+    .map((name) => values[(0,_namespace__WEBPACK_IMPORTED_MODULE_2__.splitFullKey)(name)[0]])
+    .concat(values);
+}
+
+function createAccessor(key, value, storageType) {
+  const accessor = () => STATE[key].value;
+
+  Object.assign(accessor, {
+    valueOf: () => STATE[key].value,
+    toString: () => STATE[key].value,
+    set: (value) => setValue(key, value, storageType),
+    onChange: (cb) => STATE[key].listeners.push(cb),
+    removeListener: (removeCb) =>
+      (STATE[key].listeners = STATE[key].listeners.filter(
+        (cb) => cb !== removeCb,
+      )),
+    reset: () => setValue(key, STATE[key].defaultValue, storageType),
+  });
+
+  return new Proxy(accessor, {
+    get: (target, prop) => {
+      if (Object.keys(accessor).includes(prop)) {
+        return target[prop];
+      }
+
+      return STATE[key].value[prop];
+    },
+  });
+}
+
+function setValue (key, value, storageType) {
+  if (STORAGE.IS_AVAILABE(storageType)) {
+    const isAutoUpdate = STORAGE.SET_VALUE(storageType, key, value);
+    if (isAutoUpdate) {
+      return;
+    }
+  }
+
+  onStateChange({ [key]: { newValue: value } });
+}
+
+function onStateChange (changes) {
+  const realChanges = {};
+
+  for (const key in changes) {
+    const prevValue = STATE[key].value;
+    const newValue = changes[key].newValue;
+
+    if (prevValue !== newValue) {
+      STATE[key].value = newValue;
+      realChanges[key] = { newValue, prevValue };
+
+      updateDependencies(key, realChanges);
+    }
+  }
+
+  for (const key in realChanges) {
+    STATE[key].listeners.forEach((cb) => cb(STATE[key].value, getNamespaceValues(key), realChanges[key]));
+  }
+}
+
+function updateDependencies (key, realChanges) {
+  const computedDependencies = COMPUTED_DEPENDENCIES[key];
+  if (computedDependencies) {
+    computedDependencies.forEach((name) => {
+      const prevValue = STATE[name].value;
+      const newValue = STATE[name].computeFn.apply(null, getArguments(name));
+      if (prevValue !== newValue) {
+        STATE[name].value = newValue;
+        realChanges[name] = { newValue, prevValue };
+        updateDependencies(name, realChanges);
+      }
+    });
+  }
+}
+
+function getState(namespace, arg) {
+  if ((0,_helpers__WEBPACK_IMPORTED_MODULE_1__.isString)(arg)) {
+    return createStore(arg);
+  }
+
+  if ((0,_helpers__WEBPACK_IMPORTED_MODULE_1__.isFunction)(arg)) {
+    return getNamespaceAccessors(namespace(""), arg);
+  }
+
+  return getNamespaceValues(namespace(""));
+}
+
+function getNamespaceValues(namespace) {
+  return (0,_helpers__WEBPACK_IMPORTED_MODULE_1__.getKeys)((0,_namespace__WEBPACK_IMPORTED_MODULE_2__.getByNamespace)(namespace, STATE), "value");
+}
+
+function getNamespaceAccessors (namespace, cb) {
+  const accessors = (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.getByNamespace)(namespace, ACCESSORS);
+  return cb.call(null, accessors, createStore(namespace()));
+}
+
+function setState (namespace, changes) {
+  const noKeys = !Object.keys(changes).length;
+
+  if (noKeys) {
+    resetAllState();
+  } else {
+    for (const [k,v] of Object.entries(changes)) {
+      (0,_error__WEBPACK_IMPORTED_MODULE_3__.isKeyPresent)(namespace(k)) && ACCESSORS[namespace(k)].set(v);
+    };
+  }
+
+  return createStore(namespace());
+}
+
+function resetAllState (namespace) {
+  Object.entries(ACCESSORS)
+    .filter(([k]) => k.startsWith(namespace()))
+    .forEach((k, { reset }) => reset());
+
+  return createStore(namespace());
+}
+
+function addStateLitener (namespace, observables, cb) {
+  observables.forEach((key) => ACCESSORS[namespace(key)].onChange(cb));
+
+  return createStore(namespace());
+}
+
+function removeStateListener(namespace, observables, cb) {
+  observables.forEach((key) =>
+    ACCESSORS[namespace(key)].removeListener(cb),
+  );
+
+  return createStore(namespace());
+}
+
+function main () {
+  const arg1 = arguments[1];
+
+  if (!arg1 || (0,_helpers__WEBPACK_IMPORTED_MODULE_1__.isFunction)(arg1) || (0,_helpers__WEBPACK_IMPORTED_MODULE_1__.isString)(arg1)) {
+    return getState.apply(null, arguments);
+  }
+
+  if (Array.isArray(arg1)) {
+    return addStateLitener.apply(null, arguments);
+  }
+
+  if ((0,_helpers__WEBPACK_IMPORTED_MODULE_1__.isObject)(arg1)) {
+    return setState.apply(null, arguments);
+  }
+}
+
+function setStorageUtils(storageUtils) {
+  Object.assign(STORAGE, storageUtils);
+}
+
+function createStore (_namespace) {
+  const namespace = (key) => (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.addNamespace)(_namespace, key);
+
+  return Object.assign(main.bind(null, namespace), {
+    add: (state) => addState(namespace, state, false),
+    addPersistent: (state) => addState(namespace, state, true),
+    get: (arg) => getState(namespace, arg),
+    set: (changes) => setState(namespace, changes),
+    resetAll: () => resetAllState(namespace),
+    onChange: (keys, cb) => addStateLitener(namespace, keys, cb),
+    removeListener: (keys, cb) => removeStateListener(namespace, keys, cb),
+    setStorageUtils,
+    onStateChange,
+  });
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (createStore(""));
+
+
+/***/ },
+
+/***/ "./src/namespace.js"
+/*!**************************!*\
+  !*** ./src/namespace.js ***!
+  \**************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   NAMESPACE_DELIMITER: () => (/* binding */ NAMESPACE_DELIMITER),
+/* harmony export */   addNamespace: () => (/* binding */ addNamespace),
+/* harmony export */   getByNamespace: () => (/* binding */ getByNamespace),
+/* harmony export */   namespacify: () => (/* binding */ namespacify),
+/* harmony export */   splitFullKey: () => (/* binding */ splitFullKey)
+/* harmony export */ });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers */ "./src/helpers.js");
+
+
+const NAMESPACE_DELIMITER = ":";
+
+function addNamespace(namespace, str) {
+  return `${namespace}${(0,_helpers__WEBPACK_IMPORTED_MODULE_0__.isString)(str) && NAMESPACE_DELIMITER || ""}${str || ""}`;
+}
+
+function splitFullKey (str) {
+  const segments = str.split(NAMESPACE_DELIMITER);
+
+  return [
+    segments.slice(-1)[0],
+    segments.slice(0, -1).join(NAMESPACE_DELIMITER),
+  ];
+}
+
+function getByNamespace(str, obj) {
+  const namespace = splitFullKey(str)[1] + NAMESPACE_DELIMITER;
+
+  return Object.fromEntries(
+    Object.entries(obj)
+      .filter(([k, v]) => k.startsWith(namespace))
+      .map(([k, v]) => [k.slice(namespace.length), v]),
+  );
+}
+
+function namespacify (namespace, obj) {
+  return Object.fromEntries(
+    Object.entries(obj)
+      .map(([k,v]) => [addNamespace(namespace, k), v]
+  ));
+}
+
+
+/***/ },
+
+/***/ "./src/storage.js"
+/*!************************!*\
+  !*** ./src/storage.js ***!
+  \************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+function updateFromLocalStorage(state) {
+  const stored = {};
+  for (const key in state) {
+    const value = localStorage.getItem(key);
+    if (value !== null) {
+      stored[key] = value;
+    }
+  }
+
+  return Object.assign(state, stored);
+}
+
+function getStorageType(isPersistent) {
+  return isPersistent && "localStorage";
+}
+
+function isStorageAvailable(storageType) {
+  return storageType;
+}
+
+function setStorageValue(storageType, key, value) {
+  window.localStorage.setItem(key, value);
+  return false;
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  GET_TYPE: getStorageType,
+  IS_AVAILABE: isStorageAvailable,
+  UPDATE_STATE: updateFromLocalStorage,
+  SET_VALUE: setStorageValue,
+});
+
+
+/***/ }
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	const __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		const cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		const module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		if (!(moduleId in __webpack_modules__)) {
+/******/ 			delete __webpack_module_cache__[moduleId];
+/******/ 			const e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			e.code = 'MODULE_NOT_FOUND';
+/******/ 			throw e;
+/******/ 		}
+/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter/value functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			if(Array.isArray(definition)) {
+/******/ 				var i = 0;
+/******/ 				while(i < definition.length) {
+/******/ 					var key = definition[i++];
+/******/ 					var binding = definition[i++];
+/******/ 					if(!__webpack_require__.o(exports, key)) {
+/******/ 						if(binding === 0) {
+/******/ 							Object.defineProperty(exports, key, { enumerable: true, value: definition[i++] });
+/******/ 						} else {
+/******/ 							Object.defineProperty(exports, key, { enumerable: true, get: binding });
+/******/ 						}
+/******/ 					} else if(binding === 0) { i++; }
+/******/ 				}
+/******/ 			} else {
+/******/ 				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(Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+let __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be in strict mode.
+(() => {
+"use strict";
+/*!*****************************!*\
+  !*** ./src/webextension.js ***!
+  \*****************************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! . */ "./src/index.js");
+const browser = __webpack_require__(/*! webextension-polyfill/dist/browser-polyfill.min */ "./node_modules/webextension-polyfill/dist/browser-polyfill.min.js");
+
+
+
+const { onStateChange, setStorageUtils } = ___WEBPACK_IMPORTED_MODULE_0__["default"];
+
+if (isBackgroundScript()) {
+  browser.storage.local.onChanged.addListener(onStateChange);
+  isSessionStorageSupport() &&
+    browser.storage.session.onChanged.addListener(onStateChange);
+}
+
+setStorageUtils({
+  GET_TYPE: getStorageType,
+  IS_AVAILABE: isStorageAvailable,
+  UPDATE_STATE: updateStateFromStorage,
+  SET_VALUE: setStorageValue,
+});
+
+function getStorageType (isPersistent) {
+  return isBackgroundScript() && isPersistent && "local" || "session";
+}
+
+function isStorageAvailable (storageType) {
+  return storageType === "local" ||
+    (storageType === "session" && isSessionStorageSupport());
+}
+
+async function updateStateFromStorage (state, type) {
+  return Object.assign(state, await browser.storage[type].get());
+}
+
+function setStorageValue (type, key, value) {
+  browser.storage[type].set({ [key]: value });
+  return true;
+}
+
+function isSessionStorageSupport () {
+  return !!browser.storage.session;
+}
+
+function isBackgroundScript() {
+  return (
+    window.location.protocol === "chrome-extension:" ||
+    window.location.protocol === "moz-extension:"
+  );
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___WEBPACK_IMPORTED_MODULE_0__["default"]);
+
+})();
+
+__webpack_exports__ = __webpack_exports__["default"];
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/dist/varstor-webextension.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see varstor-webextension.min.js.LICENSE.txt */
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define([],r):"object"==typeof exports?exports.Varstor=r():e.Varstor=r()}(this,()=>(()=>{var e={"./node_modules/webextension-polyfill/dist/browser-polyfill.min.js"(e,r){var s,n,t;"undefined"==typeof globalThis?"undefined"==typeof self||self:globalThis,n=[e],void 0===(t="function"==typeof(s=function(e){"use strict";if(!(globalThis.chrome&&globalThis.chrome.runtime&&globalThis.chrome.runtime.id))throw new Error("This script should only be loaded in a browser extension.");globalThis.browser&&globalThis.browser.runtime&&globalThis.browser.runtime.id?e.exports=globalThis.browser:e.exports=(e=>{const r={alarms:{clear:{minArgs:0,maxArgs:1},clearAll:{minArgs:0,maxArgs:0},get:{minArgs:0,maxArgs:1},getAll:{minArgs:0,maxArgs:0}},bookmarks:{create:{minArgs:1,maxArgs:1},get:{minArgs:1,maxArgs:1},getChildren:{minArgs:1,maxArgs:1},getRecent:{minArgs:1,maxArgs:1},getSubTree:{minArgs:1,maxArgs:1},getTree:{minArgs:0,maxArgs:0},move:{minArgs:2,maxArgs:2},remove:{minArgs:1,maxArgs:1},removeTree:{minArgs:1,maxArgs:1},search:{minArgs:1,maxArgs:1},update:{minArgs:2,maxArgs:2}},browserAction:{disable:{minArgs:0,maxArgs:1,fallbackToNoCallback:!0},enable:{minArgs:0,maxArgs:1,fallbackToNoCallback:!0},getBadgeBackgroundColor:{minArgs:1,maxArgs:1},getBadgeText:{minArgs:1,maxArgs:1},getPopup:{minArgs:1,maxArgs:1},getTitle:{minArgs:1,maxArgs:1},openPopup:{minArgs:0,maxArgs:0},setBadgeBackgroundColor:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setBadgeText:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setIcon:{minArgs:1,maxArgs:1},setPopup:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setTitle:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0}},browsingData:{remove:{minArgs:2,maxArgs:2},removeCache:{minArgs:1,maxArgs:1},removeCookies:{minArgs:1,maxArgs:1},removeDownloads:{minArgs:1,maxArgs:1},removeFormData:{minArgs:1,maxArgs:1},removeHistory:{minArgs:1,maxArgs:1},removeLocalStorage:{minArgs:1,maxArgs:1},removePasswords:{minArgs:1,maxArgs:1},removePluginData:{minArgs:1,maxArgs:1},settings:{minArgs:0,maxArgs:0}},commands:{getAll:{minArgs:0,maxArgs:0}},contextMenus:{remove:{minArgs:1,maxArgs:1},removeAll:{minArgs:0,maxArgs:0},update:{minArgs:2,maxArgs:2}},cookies:{get:{minArgs:1,maxArgs:1},getAll:{minArgs:1,maxArgs:1},getAllCookieStores:{minArgs:0,maxArgs:0},remove:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}},devtools:{inspectedWindow:{eval:{minArgs:1,maxArgs:2,singleCallbackArg:!1}},panels:{create:{minArgs:3,maxArgs:3,singleCallbackArg:!0},elements:{createSidebarPane:{minArgs:1,maxArgs:1}}}},downloads:{cancel:{minArgs:1,maxArgs:1},download:{minArgs:1,maxArgs:1},erase:{minArgs:1,maxArgs:1},getFileIcon:{minArgs:1,maxArgs:2},open:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},pause:{minArgs:1,maxArgs:1},removeFile:{minArgs:1,maxArgs:1},resume:{minArgs:1,maxArgs:1},search:{minArgs:1,maxArgs:1},show:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0}},extension:{isAllowedFileSchemeAccess:{minArgs:0,maxArgs:0},isAllowedIncognitoAccess:{minArgs:0,maxArgs:0}},history:{addUrl:{minArgs:1,maxArgs:1},deleteAll:{minArgs:0,maxArgs:0},deleteRange:{minArgs:1,maxArgs:1},deleteUrl:{minArgs:1,maxArgs:1},getVisits:{minArgs:1,maxArgs:1},search:{minArgs:1,maxArgs:1}},i18n:{detectLanguage:{minArgs:1,maxArgs:1},getAcceptLanguages:{minArgs:0,maxArgs:0}},identity:{launchWebAuthFlow:{minArgs:1,maxArgs:1}},idle:{queryState:{minArgs:1,maxArgs:1}},management:{get:{minArgs:1,maxArgs:1},getAll:{minArgs:0,maxArgs:0},getSelf:{minArgs:0,maxArgs:0},setEnabled:{minArgs:2,maxArgs:2},uninstallSelf:{minArgs:0,maxArgs:1}},notifications:{clear:{minArgs:1,maxArgs:1},create:{minArgs:1,maxArgs:2},getAll:{minArgs:0,maxArgs:0},getPermissionLevel:{minArgs:0,maxArgs:0},update:{minArgs:2,maxArgs:2}},pageAction:{getPopup:{minArgs:1,maxArgs:1},getTitle:{minArgs:1,maxArgs:1},hide:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setIcon:{minArgs:1,maxArgs:1},setPopup:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},setTitle:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0},show:{minArgs:1,maxArgs:1,fallbackToNoCallback:!0}},permissions:{contains:{minArgs:1,maxArgs:1},getAll:{minArgs:0,maxArgs:0},remove:{minArgs:1,maxArgs:1},request:{minArgs:1,maxArgs:1}},runtime:{getBackgroundPage:{minArgs:0,maxArgs:0},getPlatformInfo:{minArgs:0,maxArgs:0},openOptionsPage:{minArgs:0,maxArgs:0},requestUpdateCheck:{minArgs:0,maxArgs:0},sendMessage:{minArgs:1,maxArgs:3},sendNativeMessage:{minArgs:2,maxArgs:2},setUninstallURL:{minArgs:1,maxArgs:1}},sessions:{getDevices:{minArgs:0,maxArgs:1},getRecentlyClosed:{minArgs:0,maxArgs:1},restore:{minArgs:0,maxArgs:1}},storage:{local:{clear:{minArgs:0,maxArgs:0},get:{minArgs:0,maxArgs:1},getBytesInUse:{minArgs:0,maxArgs:1},remove:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}},managed:{get:{minArgs:0,maxArgs:1},getBytesInUse:{minArgs:0,maxArgs:1}},sync:{clear:{minArgs:0,maxArgs:0},get:{minArgs:0,maxArgs:1},getBytesInUse:{minArgs:0,maxArgs:1},remove:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}}},tabs:{captureVisibleTab:{minArgs:0,maxArgs:2},create:{minArgs:1,maxArgs:1},detectLanguage:{minArgs:0,maxArgs:1},discard:{minArgs:0,maxArgs:1},duplicate:{minArgs:1,maxArgs:1},executeScript:{minArgs:1,maxArgs:2},get:{minArgs:1,maxArgs:1},getCurrent:{minArgs:0,maxArgs:0},getZoom:{minArgs:0,maxArgs:1},getZoomSettings:{minArgs:0,maxArgs:1},goBack:{minArgs:0,maxArgs:1},goForward:{minArgs:0,maxArgs:1},highlight:{minArgs:1,maxArgs:1},insertCSS:{minArgs:1,maxArgs:2},move:{minArgs:2,maxArgs:2},query:{minArgs:1,maxArgs:1},reload:{minArgs:0,maxArgs:2},remove:{minArgs:1,maxArgs:1},removeCSS:{minArgs:1,maxArgs:2},sendMessage:{minArgs:2,maxArgs:3},setZoom:{minArgs:1,maxArgs:2},setZoomSettings:{minArgs:1,maxArgs:2},update:{minArgs:1,maxArgs:2}},topSites:{get:{minArgs:0,maxArgs:0}},webNavigation:{getAllFrames:{minArgs:1,maxArgs:1},getFrame:{minArgs:1,maxArgs:1}},webRequest:{handlerBehaviorChanged:{minArgs:0,maxArgs:0}},windows:{create:{minArgs:0,maxArgs:1},get:{minArgs:1,maxArgs:2},getAll:{minArgs:0,maxArgs:1},getCurrent:{minArgs:0,maxArgs:1},getLastFocused:{minArgs:0,maxArgs:1},remove:{minArgs:1,maxArgs:1},update:{minArgs:2,maxArgs:2}}};if(0===Object.keys(r).length)throw new Error("api-metadata.json has not been included in browser-polyfill");class s extends WeakMap{constructor(e,r=void 0){super(r),this.createItem=e}get(e){return this.has(e)||this.set(e,this.createItem(e)),super.get(e)}}const n=e=>e&&"object"==typeof e&&"function"==typeof e.then,t=(r,s)=>(...n)=>{e.runtime.lastError?r.reject(new Error(e.runtime.lastError.message)):s.singleCallbackArg||1>=n.length&&!1!==s.singleCallbackArg?r.resolve(n[0]):r.resolve(n)},a=e=>1==e?"argument":"arguments",g=(e,r)=>function(s,...n){if(n.length<r.minArgs)throw new Error(`Expected at least ${r.minArgs} ${a(r.minArgs)} for ${e}(), got ${n.length}`);if(n.length>r.maxArgs)throw new Error(`Expected at most ${r.maxArgs} ${a(r.maxArgs)} for ${e}(), got ${n.length}`);return new Promise((a,g)=>{if(r.fallbackToNoCallback)try{s[e](...n,t({resolve:a,reject:g},r))}catch(t){console.warn(`${e} API method doesn't seem to support the callback parameter, falling back to call it without a callback: `,t),s[e](...n),r.fallbackToNoCallback=!1,r.noCallback=!0,a()}else r.noCallback?(s[e](...n),a()):s[e](...n,t({resolve:a,reject:g},r))})},o=(e,r,s)=>new Proxy(r,{apply:(r,n,t)=>s.call(n,e,...t)});let i=Function.call.bind(Object.prototype.hasOwnProperty);const m=(e,r={},s={})=>{let n=Object.create(null),t=Object.create(e);return new Proxy(t,{has:(r,s)=>s in e||s in n,get(t,a){if(a in n)return n[a];if(!(a in e))return;let l=e[a];if("function"==typeof l)if("function"==typeof r[a])l=o(e,e[a],r[a]);else if(i(s,a)){let r=g(a,s[a]);l=o(e,e[a],r)}else l=l.bind(e);else if("object"==typeof l&&null!==l&&(i(r,a)||i(s,a)))l=m(l,r[a],s[a]);else{if(!i(s,"*"))return Object.defineProperty(n,a,{configurable:!0,enumerable:!0,get:()=>e[a],set(r){e[a]=r}}),l;l=m(l,r[a],s["*"])}return n[a]=l,l},set:(r,s,t)=>(s in n?n[s]=t:e[s]=t,!0),defineProperty:(e,r,s)=>Reflect.defineProperty(n,r,s),deleteProperty:(e,r)=>Reflect.deleteProperty(n,r)})},l=e=>({addListener(r,s,...n){r.addListener(e.get(s),...n)},hasListener:(r,s)=>r.hasListener(e.get(s)),removeListener(r,s){r.removeListener(e.get(s))}}),A=new s(e=>"function"==typeof e?function(r){const s=m(r,{},{getContent:{minArgs:0,maxArgs:0}});e(s)}:e),c=new s(e=>"function"==typeof e?function(r,s,t){let a,g,o=!1,i=new Promise(e=>{a=function(r){o=!0,e(r)}});try{g=e(r,s,a)}catch(e){g=Promise.reject(e)}const m=!0!==g&&n(g);if(!0!==g&&!m&&!o)return!1;const l=e=>{e.then(e=>{t(e)},e=>{let r;r=e&&(e instanceof Error||"string"==typeof e.message)?e.message:"An unexpected error occurred",t({__mozWebExtensionPolyfillReject__:!0,message:r})}).catch(e=>{console.error("Failed to send onMessage rejected reply",e)})};return l(m?g:i),!0}:e),u=({reject:r,resolve:s},n)=>{e.runtime.lastError?"The message port closed before a response was received."===e.runtime.lastError.message?s():r(new Error(e.runtime.lastError.message)):n&&n.__mozWebExtensionPolyfillReject__?r(new Error(n.message)):s(n)},x=(e,r,s,...n)=>{if(n.length<r.minArgs)throw new Error(`Expected at least ${r.minArgs} ${a(r.minArgs)} for ${e}(), got ${n.length}`);if(n.length>r.maxArgs)throw new Error(`Expected at most ${r.maxArgs} ${a(r.maxArgs)} for ${e}(), got ${n.length}`);return new Promise((e,r)=>{const t=u.bind(null,{resolve:e,reject:r});n.push(t),s.sendMessage(...n)})},f={devtools:{network:{onRequestFinished:l(A)}},runtime:{onMessage:l(c),onMessageExternal:l(c),sendMessage:x.bind(null,"sendMessage",{minArgs:1,maxArgs:3})},tabs:{sendMessage:x.bind(null,"sendMessage",{minArgs:2,maxArgs:3})}},d={clear:{minArgs:1,maxArgs:1},get:{minArgs:1,maxArgs:1},set:{minArgs:1,maxArgs:1}};return r.privacy={network:{"*":d},services:{"*":d},websites:{"*":d}},m(e,f,r)})(chrome)})?s.apply(r,n):s)||(e.exports=t)},"./src/error.js"(e,r,s){"use strict";s.r(r),s.d(r,{isKeyPresent:()=>a});var n=s("./src/index.js"),t=s("./src/namespace.js");const a=(e,r)=>{if(!n.ACCESSORS[e]){const[r,s]=(0,t.splitFullKey)(e);throw new Error(`Trying to access "${r}" key in "${s}" namespace, but it doesn't exist`)}return!0}},"./src/helpers.js"(e,r,s){"use strict";s.r(r),s.d(r,{getKeys:()=>l,getParamNames:()=>m,isArray:()=>i,isFunction:()=>a,isObject:()=>g,isString:()=>o,toCamelCase:()=>A});const n=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,t=/([^\s,]+)/g;function a(e){return"function"==typeof e}function g(e){return"object"==typeof e}function o(e){return"string"==typeof e}function i(e){return Array.isArray(e)}function m(e){const r=e.toString().replace(n,""),s=r.slice(r.indexOf("(")+1,r.indexOf(")")).match(t);return null===s?[]:s}function l(e,r){return Object.fromEntries(Object.entries(e).map(([e,s])=>[e,s[r]]))}function A(e,r){const s=e.split(r);return`${s[0]}${s.slice(1).reduce((e,r)=>`${e}${r.charAt(0).toUpperCase()}${r.slice(1)}`,"")}`}},"./src/index.js"(e,r,s){"use strict";s.r(r),s.d(r,{ACCESSORS:()=>i,default:()=>k});var n=s("./src/storage.js"),t=s("./src/helpers.js"),a=s("./src/namespace.js"),g=s("./src/error.js");const o={},i={},m={},l={},A={GET_TYPE:null,IS_AVAILABE:null,UPDATE_STATE:null,SET_VALUE:null};async function c(e,r,s){const n=A.GET_TYPE(s),t=Object.assign({},r),g=(0,a.namespacify)(e(),r);A.IS_AVAILABE(n)&&await A.UPDATE_STATE(g,n);const o={};for(const s in r)o[e(s)]=u(e(s),g[e(s)],t[s],n);return Object.assign(i,o),j(e())}function u(e,r,s,n){const g=(0,t.isFunction)(r);return g&&function(e,r){const[,s]=(0,a.splitFullKey)(e),n=(0,t.getParamNames)(r).map(e=>(0,a.addNamespace)(s,e));l[e]=n,n.forEach(r=>{m[r]?m[r].push(e):m[r]=[e]})}(e,r),o[e]={value:g?r.apply(null,x(e)):r,computeFn:r,listeners:[],defaultValue:s},function(e,r,s){const n=()=>o[e].value;return Object.assign(n,{valueOf:()=>o[e].value,toString:()=>o[e].value,set:r=>f(e,r,s),onChange:r=>o[e].listeners.push(r),removeListener:r=>o[e].listeners=o[e].listeners.filter(e=>e!==r),reset:()=>f(e,o[e].defaultValue,s)}),new Proxy(n,{get:(r,s)=>Object.keys(n).includes(s)?r[s]:o[e].value[s]})}(e,0,n)}function x(e){const r=h(e);return l[e].map(e=>r[(0,a.splitFullKey)(e)[0]]).concat(r)}function f(e,r,s){if(A.IS_AVAILABE(s)){if(A.SET_VALUE(s,e,r))return}d({[e]:{newValue:r}})}function d(e){const r={};for(const s in e){const n=o[s].value,t=e[s].newValue;n!==t&&(o[s].value=t,r[s]={newValue:t,prevValue:n},p(s,r))}for(const e in r)o[e].listeners.forEach(s=>s(o[e].value,h(e),r[e]))}function p(e,r){const s=m[e];s&&s.forEach(e=>{const s=o[e].value,n=o[e].computeFn.apply(null,x(e));s!==n&&(o[e].value=n,r[e]={newValue:n,prevValue:s},p(e,r))})}function b(e,r){return(0,t.isString)(r)?j(r):(0,t.isFunction)(r)?function(e,r){const s=(0,a.getByNamespace)(e,i);return r.call(null,s,j(e()))}(e(""),r):h(e(""))}function h(e){return(0,t.getKeys)((0,a.getByNamespace)(e,o),"value")}function y(e,r){if(!Object.keys(r).length)v();else for(const[s,n]of Object.entries(r))(0,g.isKeyPresent)(e(s))&&i[e(s)].set(n);return j(e())}function v(e){return Object.entries(i).filter(([r])=>r.startsWith(e())).forEach((e,{reset:r})=>r()),j(e())}function w(e,r,s){return r.forEach(r=>i[e(r)].onChange(s)),j(e())}function E(){const e=arguments[1];return!e||(0,t.isFunction)(e)||(0,t.isString)(e)?b.apply(null,arguments):Array.isArray(e)?w.apply(null,arguments):(0,t.isObject)(e)?y.apply(null,arguments):void 0}function T(e){Object.assign(A,e)}function j(e){const r=r=>(0,a.addNamespace)(e,r);return Object.assign(E.bind(null,r),{add:e=>c(r,e,!1),addPersistent:e=>c(r,e,!0),get:e=>b(r,e),set:e=>y(r,e),resetAll:()=>v(r),onChange:(e,s)=>w(r,e,s),removeListener:(e,s)=>function(e,r,s){return r.forEach(r=>i[e(r)].removeListener(s)),j(e())}(r,e,s),setStorageUtils:T,onStateChange:d})}T(n.default);const k=j("")},"./src/namespace.js"(e,r,s){"use strict";s.r(r),s.d(r,{NAMESPACE_DELIMITER:()=>t,addNamespace:()=>a,getByNamespace:()=>o,namespacify:()=>i,splitFullKey:()=>g});var n=s("./src/helpers.js");const t=":";function a(e,r){return`${e}${(0,n.isString)(r)&&t||""}${r||""}`}function g(e){const r=e.split(t);return[r.slice(-1)[0],r.slice(0,-1).join(t)]}function o(e,r){const s=g(e)[1]+t;return Object.fromEntries(Object.entries(r).filter(([e,r])=>e.startsWith(s)).map(([e,r])=>[e.slice(s.length),r]))}function i(e,r){return Object.fromEntries(Object.entries(r).map(([r,s])=>[a(e,r),s]))}},"./src/storage.js"(e,r,s){"use strict";s.r(r),s.d(r,{default:()=>n});const n={GET_TYPE:function(e){return e&&"localStorage"},IS_AVAILABE:function(e){return e},UPDATE_STATE:function(e){const r={};for(const s in e){const e=localStorage.getItem(s);null!==e&&(r[s]=e)}return Object.assign(e,r)},SET_VALUE:function(e,r,s){return window.localStorage.setItem(r,s),!1}}}};const r={};function s(n){const t=r[n];if(void 0!==t)return t.exports;const a=r[n]={exports:{}};if(!(n in e)){delete r[n];const e=new Error("Cannot find module '"+n+"'");throw e.code="MODULE_NOT_FOUND",e}return e[n].call(a.exports,a,a.exports,s),a.exports}s.d=(e,r)=>{if(Array.isArray(r))for(var n=0;n<r.length;){var t=r[n++],a=r[n++];s.o(e,t)?0===a&&n++:0===a?Object.defineProperty(e,t,{enumerable:!0,value:r[n++]}):Object.defineProperty(e,t,{enumerable:!0,get:a})}else for(var t in r)s.o(r,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},s.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),s.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let n={};return(()=>{"use strict";s.r(n),s.d(n,{default:()=>i});var e=s("./src/index.js");const r=s("./node_modules/webextension-polyfill/dist/browser-polyfill.min.js"),{onStateChange:t,setStorageUtils:a}=e.default;function g(){return!!r.storage.session}function o(){return"chrome-extension:"===window.location.protocol||"moz-extension:"===window.location.protocol}o()&&(r.storage.local.onChanged.addListener(t),g()&&r.storage.session.onChanged.addListener(t)),a({GET_TYPE:function(e){return o()&&e?"local":"session"},IS_AVAILABE:function(e){return"local"===e||"session"===e&&g()},UPDATE_STATE:async function(e,s){return Object.assign(e,await r.storage[s].get())},SET_VALUE:function(e,s,n){return r.storage[e].set({[s]:n}),!0}});const i=e.default})(),n=n.default,n})());

package/dist/varstor.js

@@ -27,9 +27,9 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const isKeyPresent = (fullKey) => {
+const isKeyPresent = (fullKey, obj) => {
   if (!___WEBPACK_IMPORTED_MODULE_0__.ACCESSORS[fullKey]) {
-    const [key, namespace] = fullKey.split(_namespace__WEBPACK_IMPORTED_MODULE_1__.NAMESPACE_DELIMITER);
+    const [key, namespace] = (0,_namespace__WEBPACK_IMPORTED_MODULE_1__.splitFullKey)(fullKey);
     throw new Error (`Trying to access "${key}" key in "${namespace}" namespace, but it doesn't exist`);
   }
 
@@ -177,7 +177,7 @@ function setupValue (key, value, defaultValue, storageType) {
 }
 
 function setupDependencies(computedValueName, computeFn) {
-  const namespace = (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.getNamespace)(computedValueName);
+  const [, namespace] = (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.splitFullKey)(computedValueName);
   const paramNames = (0,_helpers__WEBPACK_IMPORTED_MODULE_1__.getParamNames)(computeFn).map((name) => (0,_namespace__WEBPACK_IMPORTED_MODULE_2__.addNamespace)(namespace, name));
   COMPUTED_ARGUMENTS[computedValueName] = paramNames;
 
@@ -194,7 +194,7 @@ function getArguments(computedName) {
   const values = getNamespaceValues(computedName);
   
   return COMPUTED_ARGUMENTS[computedName]
-    .map((name) => values[(0,_namespace__WEBPACK_IMPORTED_MODULE_2__.getKey)(name)])
+    .map((name) => values[(0,_namespace__WEBPACK_IMPORTED_MODULE_2__.splitFullKey)(name)[0]])
     .concat(values);
 }
 
@@ -379,9 +379,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   NAMESPACE_DELIMITER: () => (/* binding */ NAMESPACE_DELIMITER),
 /* harmony export */   addNamespace: () => (/* binding */ addNamespace),
 /* harmony export */   getByNamespace: () => (/* binding */ getByNamespace),
-/* harmony export */   getKey: () => (/* binding */ getKey),
-/* harmony export */   getNamespace: () => (/* binding */ getNamespace),
-/* harmony export */   namespacify: () => (/* binding */ namespacify)
+/* harmony export */   namespacify: () => (/* binding */ namespacify),
+/* harmony export */   splitFullKey: () => (/* binding */ splitFullKey)
 /* harmony export */ });
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers */ "./src/helpers.js");
 
@@ -392,18 +391,17 @@ function addNamespace(namespace, str) {
   return `${namespace}${(0,_helpers__WEBPACK_IMPORTED_MODULE_0__.isString)(str) && NAMESPACE_DELIMITER || ""}${str || ""}`;
 }
 
-function getNamespace(str) {
-  return (
-    str.split(NAMESPACE_DELIMITER).slice(0, -1).join(NAMESPACE_DELIMITER)
-  );
-}
+function splitFullKey (str) {
+  const segments = str.split(NAMESPACE_DELIMITER);
 
-function  getKey (str) {
-  return str.split(NAMESPACE_DELIMITER).slice(-1)[0];
+  return [
+    segments.slice(-1)[0],
+    segments.slice(0, -1).join(NAMESPACE_DELIMITER),
+  ];
 }
 
 function getByNamespace(str, obj) {
-  const namespace = getNamespace(str) + NAMESPACE_DELIMITER;
+  const namespace = splitFullKey(str)[1] + NAMESPACE_DELIMITER;
 
   return Object.fromEntries(
     Object.entries(obj)
@@ -435,7 +433,10 @@ __webpack_require__.r(__webpack_exports__);
 function updateFromLocalStorage(state) {
   const stored = {};
   for (const key in state) {
-    stored[key] = localStorage.getItem(key);
+    const value = localStorage.getItem(key);
+    if (value !== null) {
+      stored[key] = value;
+    }
   }
 
   return Object.assign(state, stored);

package/dist/varstor.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see varstor.min.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Varstor=t():e.Varstor=t()}(this,()=>(()=>{"use strict";var e={"./src/error.js"(e,t,n){n.r(t),n.d(t,{isKeyPresent:()=>o});var r=n("./src/index.js"),s=n("./src/namespace.js");const o=e=>{if(!r.ACCESSORS[e]){const[t,n]=e.split(s.NAMESPACE_DELIMITER);throw new Error(`Trying to access "${t}" key in "${n}" namespace, but it doesn't exist`)}return!0}},"./src/helpers.js"(e,t,n){n.r(t),n.d(t,{getKeys:()=>l,getParamNames:()=>u,isArray:()=>a,isFunction:()=>o,isObject:()=>c,isString:()=>i,toCamelCase:()=>f});const r=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,s=/([^\s,]+)/g;function o(e){return"function"==typeof e}function c(e){return"object"==typeof e}function i(e){return"string"==typeof e}function a(e){return Array.isArray(e)}function u(e){const t=e.toString().replace(r,""),n=t.slice(t.indexOf("(")+1,t.indexOf(")")).match(s);return null===n?[]:n}function l(e,t){return Object.fromEntries(Object.entries(e).map(([e,n])=>[e,n[t]]))}function f(e,t){const n=e.split(t);return`${n[0]}${n.slice(1).reduce((e,t)=>`${e}${t.charAt(0).toUpperCase()}${t.slice(1)}`,"")}`}},"./src/index.js"(e,t,n){n.r(t),n.d(t,{ACCESSORS:()=>a,default:()=>P});var r=n("./src/storage.js"),s=n("./src/helpers.js"),o=n("./src/namespace.js"),c=n("./src/error.js");const i={},a={},u={},l={},f={GET_TYPE:null,IS_AVAILABE:null,UPDATE_STATE:null,SET_VALUE:null};async function p(e,t,n){const r=f.GET_TYPE(n),s=Object.assign({},t),c=(0,o.namespacify)(e(),t);f.IS_AVAILABE(r)&&await f.UPDATE_STATE(c,r);const i={};for(const n in t)i[e(n)]=d(e(n),c[e(n)],s[n],r);return Object.assign(a,i),T(e())}function d(e,t,n,r){const c=(0,s.isFunction)(t);return c&&function(e,t){const n=(0,o.getNamespace)(e),r=(0,s.getParamNames)(t).map(e=>(0,o.addNamespace)(n,e));l[e]=r,r.forEach(t=>{u[t]?u[t].push(e):u[t]=[e]})}(e,t),i[e]={value:c?t.apply(null,g(e)):t,computeFn:t,listeners:[],defaultValue:n},function(e,t,n){const r=()=>i[e].value;return Object.assign(r,{valueOf:()=>i[e].value,toString:()=>i[e].value,set:t=>m(e,t,n),onChange:t=>i[e].listeners.push(t),removeListener:t=>i[e].listeners=i[e].listeners.filter(e=>e!==t),reset:()=>m(e,i[e].defaultValue,n)}),new Proxy(r,{get:(t,n)=>Object.keys(r).includes(n)?t[n]:i[e].value[n]})}(e,0,r)}function g(e){const t=A(e);return l[e].map(e=>t[(0,o.getKey)(e)]).concat(t)}function m(e,t,n){if(f.IS_AVAILABE(n)){if(f.SET_VALUE(n,e,t))return}y({[e]:{newValue:t}})}function y(e){const t={};for(const n in e){const r=i[n].value,s=e[n].newValue;r!==s&&(i[n].value=s,t[n]={newValue:s,prevValue:r},E(n,t))}for(const e in t)i[e].listeners.forEach(n=>n(i[e].value,A(e),t[e]))}function E(e,t){const n=u[e];n&&n.forEach(e=>{const n=i[e].value,r=i[e].computeFn.apply(null,g(e));n!==r&&(i[e].value=r,t[e]={newValue:r,prevValue:n},E(e,t))})}function j(e,t){return(0,s.isString)(t)?T(t):(0,s.isFunction)(t)?function(e,t){const n=(0,o.getByNamespace)(e,a);return t.call(null,n,T(e()))}(e(""),t):A(e(""))}function A(e){return(0,s.getKeys)((0,o.getByNamespace)(e,i),"value")}function b(e,t){if(!Object.keys(t).length)S();else for(const[n,r]of Object.entries(t))(0,c.isKeyPresent)(e(n))&&a[e(n)].set(r);return T(e())}function S(e){return Object.entries(a).filter(([t])=>t.startsWith(e())).forEach((e,{reset:t})=>t()),T(e())}function O(e,t,n){return t.forEach(t=>a[e(t)].onChange(n)),T(e())}function v(){const e=arguments[1];return!e||(0,s.isFunction)(e)||(0,s.isString)(e)?j.apply(null,arguments):Array.isArray(e)?O.apply(null,arguments):(0,s.isObject)(e)?b.apply(null,arguments):void 0}function h(e){Object.assign(f,e)}function T(e){const t=t=>(0,o.addNamespace)(e,t);return Object.assign(v.bind(null,t),{add:e=>p(t,e,!1),addPersistent:e=>p(t,e,!0),get:e=>j(t,e),set:e=>b(t,e),resetAll:()=>S(t),onChange:(e,n)=>O(t,e,n),removeListener:(e,n)=>function(e,t,n){return t.forEach(t=>a[e(t)].removeListener(n)),T(e())}(t,e,n),setStorageUtils:h,onStateChange:y})}h(r.default);const P=T("")},"./src/namespace.js"(e,t,n){n.r(t),n.d(t,{NAMESPACE_DELIMITER:()=>s,addNamespace:()=>o,getByNamespace:()=>a,getKey:()=>i,getNamespace:()=>c,namespacify:()=>u});var r=n("./src/helpers.js");const s=":";function o(e,t){return`${e}${(0,r.isString)(t)&&s||""}${t||""}`}function c(e){return e.split(s).slice(0,-1).join(s)}function i(e){return e.split(s).slice(-1)[0]}function a(e,t){const n=c(e)+s;return Object.fromEntries(Object.entries(t).filter(([e,t])=>e.startsWith(n)).map(([e,t])=>[e.slice(n.length),t]))}function u(e,t){return Object.fromEntries(Object.entries(t).map(([t,n])=>[o(e,t),n]))}},"./src/storage.js"(e,t,n){n.r(t),n.d(t,{default:()=>r});const r={GET_TYPE:function(e){return e&&"localStorage"},IS_AVAILABE:function(e){return e},UPDATE_STATE:function(e){const t={};for(const n in e)t[n]=localStorage.getItem(n);return Object.assign(e,t)},SET_VALUE:function(e,t,n){return window.localStorage.setItem(t,n),!1}}}};const t={};function n(r){const s=t[r];if(void 0!==s)return s.exports;const o=t[r]={exports:{}};if(!(r in e)){delete t[r];const e=new Error("Cannot find module '"+r+"'");throw e.code="MODULE_NOT_FOUND",e}return e[r](o,o.exports,n),o.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var r=0;r<t.length;){var s=t[r++],o=t[r++];n.o(e,s)?0===o&&r++:0===o?Object.defineProperty(e,s,{enumerable:!0,value:t[r++]}):Object.defineProperty(e,s,{enumerable:!0,get:o})}else for(var s in t)n.o(t,s)&&!n.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let r=n("./src/index.js");return r=r.default,r})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Varstor=t():e.Varstor=t()}(this,()=>(()=>{"use strict";var e={"./src/error.js"(e,t,n){n.r(t),n.d(t,{isKeyPresent:()=>o});var r=n("./src/index.js"),s=n("./src/namespace.js");const o=(e,t)=>{if(!r.ACCESSORS[e]){const[t,n]=(0,s.splitFullKey)(e);throw new Error(`Trying to access "${t}" key in "${n}" namespace, but it doesn't exist`)}return!0}},"./src/helpers.js"(e,t,n){n.r(t),n.d(t,{getKeys:()=>l,getParamNames:()=>u,isArray:()=>a,isFunction:()=>o,isObject:()=>c,isString:()=>i,toCamelCase:()=>f});const r=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,s=/([^\s,]+)/g;function o(e){return"function"==typeof e}function c(e){return"object"==typeof e}function i(e){return"string"==typeof e}function a(e){return Array.isArray(e)}function u(e){const t=e.toString().replace(r,""),n=t.slice(t.indexOf("(")+1,t.indexOf(")")).match(s);return null===n?[]:n}function l(e,t){return Object.fromEntries(Object.entries(e).map(([e,n])=>[e,n[t]]))}function f(e,t){const n=e.split(t);return`${n[0]}${n.slice(1).reduce((e,t)=>`${e}${t.charAt(0).toUpperCase()}${t.slice(1)}`,"")}`}},"./src/index.js"(e,t,n){n.r(t),n.d(t,{ACCESSORS:()=>a,default:()=>P});var r=n("./src/storage.js"),s=n("./src/helpers.js"),o=n("./src/namespace.js"),c=n("./src/error.js");const i={},a={},u={},l={},f={GET_TYPE:null,IS_AVAILABE:null,UPDATE_STATE:null,SET_VALUE:null};async function p(e,t,n){const r=f.GET_TYPE(n),s=Object.assign({},t),c=(0,o.namespacify)(e(),t);f.IS_AVAILABE(r)&&await f.UPDATE_STATE(c,r);const i={};for(const n in t)i[e(n)]=d(e(n),c[e(n)],s[n],r);return Object.assign(a,i),T(e())}function d(e,t,n,r){const c=(0,s.isFunction)(t);return c&&function(e,t){const[,n]=(0,o.splitFullKey)(e),r=(0,s.getParamNames)(t).map(e=>(0,o.addNamespace)(n,e));l[e]=r,r.forEach(t=>{u[t]?u[t].push(e):u[t]=[e]})}(e,t),i[e]={value:c?t.apply(null,y(e)):t,computeFn:t,listeners:[],defaultValue:n},function(e,t,n){const r=()=>i[e].value;return Object.assign(r,{valueOf:()=>i[e].value,toString:()=>i[e].value,set:t=>g(e,t,n),onChange:t=>i[e].listeners.push(t),removeListener:t=>i[e].listeners=i[e].listeners.filter(e=>e!==t),reset:()=>g(e,i[e].defaultValue,n)}),new Proxy(r,{get:(t,n)=>Object.keys(r).includes(n)?t[n]:i[e].value[n]})}(e,0,r)}function y(e){const t=b(e);return l[e].map(e=>t[(0,o.splitFullKey)(e)[0]]).concat(t)}function g(e,t,n){if(f.IS_AVAILABE(n)){if(f.SET_VALUE(n,e,t))return}m({[e]:{newValue:t}})}function m(e){const t={};for(const n in e){const r=i[n].value,s=e[n].newValue;r!==s&&(i[n].value=s,t[n]={newValue:s,prevValue:r},j(n,t))}for(const e in t)i[e].listeners.forEach(n=>n(i[e].value,b(e),t[e]))}function j(e,t){const n=u[e];n&&n.forEach(e=>{const n=i[e].value,r=i[e].computeFn.apply(null,y(e));n!==r&&(i[e].value=r,t[e]={newValue:r,prevValue:n},j(e,t))})}function E(e,t){return(0,s.isString)(t)?T(t):(0,s.isFunction)(t)?function(e,t){const n=(0,o.getByNamespace)(e,a);return t.call(null,n,T(e()))}(e(""),t):b(e(""))}function b(e){return(0,s.getKeys)((0,o.getByNamespace)(e,i),"value")}function A(e,t){if(!Object.keys(t).length)O();else for(const[n,r]of Object.entries(t))(0,c.isKeyPresent)(e(n))&&a[e(n)].set(r);return T(e())}function O(e){return Object.entries(a).filter(([t])=>t.startsWith(e())).forEach((e,{reset:t})=>t()),T(e())}function S(e,t,n){return t.forEach(t=>a[e(t)].onChange(n)),T(e())}function v(){const e=arguments[1];return!e||(0,s.isFunction)(e)||(0,s.isString)(e)?E.apply(null,arguments):Array.isArray(e)?S.apply(null,arguments):(0,s.isObject)(e)?A.apply(null,arguments):void 0}function h(e){Object.assign(f,e)}function T(e){const t=t=>(0,o.addNamespace)(e,t);return Object.assign(v.bind(null,t),{add:e=>p(t,e,!1),addPersistent:e=>p(t,e,!0),get:e=>E(t,e),set:e=>A(t,e),resetAll:()=>O(t),onChange:(e,n)=>S(t,e,n),removeListener:(e,n)=>function(e,t,n){return t.forEach(t=>a[e(t)].removeListener(n)),T(e())}(t,e,n),setStorageUtils:h,onStateChange:m})}h(r.default);const P=T("")},"./src/namespace.js"(e,t,n){n.r(t),n.d(t,{NAMESPACE_DELIMITER:()=>s,addNamespace:()=>o,getByNamespace:()=>i,namespacify:()=>a,splitFullKey:()=>c});var r=n("./src/helpers.js");const s=":";function o(e,t){return`${e}${(0,r.isString)(t)&&s||""}${t||""}`}function c(e){const t=e.split(s);return[t.slice(-1)[0],t.slice(0,-1).join(s)]}function i(e,t){const n=c(e)[1]+s;return Object.fromEntries(Object.entries(t).filter(([e,t])=>e.startsWith(n)).map(([e,t])=>[e.slice(n.length),t]))}function a(e,t){return Object.fromEntries(Object.entries(t).map(([t,n])=>[o(e,t),n]))}},"./src/storage.js"(e,t,n){n.r(t),n.d(t,{default:()=>r});const r={GET_TYPE:function(e){return e&&"localStorage"},IS_AVAILABE:function(e){return e},UPDATE_STATE:function(e){const t={};for(const n in e){const e=localStorage.getItem(n);null!==e&&(t[n]=e)}return Object.assign(e,t)},SET_VALUE:function(e,t,n){return window.localStorage.setItem(t,n),!1}}}};const t={};function n(r){const s=t[r];if(void 0!==s)return s.exports;const o=t[r]={exports:{}};if(!(r in e)){delete t[r];const e=new Error("Cannot find module '"+r+"'");throw e.code="MODULE_NOT_FOUND",e}return e[r](o,o.exports,n),o.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var r=0;r<t.length;){var s=t[r++],o=t[r++];n.o(e,s)?0===o&&r++:0===o?Object.defineProperty(e,s,{enumerable:!0,value:t[r++]}):Object.defineProperty(e,s,{enumerable:!0,get:o})}else for(var s in t)n.o(t,s)&&!n.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let r=n("./src/index.js");return r=r.default,r})());

package/package.json

@@ -1,20 +1,36 @@
 {
   "name": "varstor",
-  "version": "0.0.1",
-  "description": "Library for managing the state of applications, employing reactivity, and seamless usage of storage with a simple unified interface",
+  "version": "0.0.3",
+  "description": "State manager for web applications and webextensions, employing reactivity, wrapping, and uniting the usage of different storages' values and common variables into a simple universal interface",
   "license": "MIT",
   "author": "Igor Morozov <ismorozs@gmail.com>",
   "main": "./dist/varstor.js",
+  "exports": {
+    ".": "./dist/varstor.js",
+    "./webextension": "./dist/varstor-webextension.js"
+  },
   "scripts": {
     "start": "webpack",
     "build": "webpack --env production"
   },
   "devDependencies": {
     "minimizer-webpack-plugin": "5.6.1",
+    "webextension-polyfill": "0.12.0",
     "webpack": "5.108.4",
     "webpack-cli": "7.2.1"
   },
   "homepage": "https://github.com/ismorozs/varstor",
   "repository": "https://github.com/ismorozs/varstor.git",
-  "bugs": "https://github.com/ismorozs/varstor/issues"
+  "bugs": "https://github.com/ismorozs/varstor/issues",
+  "keywords": [
+    "webextension",
+    "extension",
+    "reactivity",
+    "state",
+    "store",
+    "storage",
+    "reactive",
+    "management",
+    "development"
+  ]
 }

package/src/error.js

@@ -1,9 +1,9 @@
 import { ACCESSORS } from "."
-import { NAMESPACE_DELIMITER } from "./namespace";
+import { splitFullKey } from "./namespace";
 
-export const isKeyPresent = (fullKey) => {
+export const isKeyPresent = (fullKey, obj) => {
   if (!ACCESSORS[fullKey]) {
-    const [key, namespace] = fullKey.split(NAMESPACE_DELIMITER);
+    const [key, namespace] = splitFullKey(fullKey);
     throw new Error (`Trying to access "${key}" key in "${namespace}" namespace, but it doesn't exist`);
   }
 

package/src/index.js

@@ -8,8 +8,7 @@ import {
 
 import {
   addNamespace,
-  getNamespace,
-  getKey,
+  splitFullKey,
   namespacify,
   getByNamespace,
 } from "./namespace";
@@ -73,7 +72,7 @@ function setupValue (key, value, defaultValue, storageType) {
 }
 
 function setupDependencies(computedValueName, computeFn) {
-  const namespace = getNamespace(computedValueName);
+  const [, namespace] = splitFullKey(computedValueName);
   const paramNames = getParamNames(computeFn).map((name) => addNamespace(namespace, name));
   COMPUTED_ARGUMENTS[computedValueName] = paramNames;
 
@@ -90,7 +89,7 @@ function getArguments(computedName) {
   const values = getNamespaceValues(computedName);
   
   return COMPUTED_ARGUMENTS[computedName]
-    .map((name) => values[getKey(name)])
+    .map((name) => values[splitFullKey(name)[0]])
     .concat(values);
 }
 

package/src/namespace.js

@@ -8,18 +8,17 @@ export function addNamespace(namespace, str) {
   return `${namespace}${isString(str) && NAMESPACE_DELIMITER || ""}${str || ""}`;
 }
 
-export function getNamespace(str) {
-  return (
-    str.split(NAMESPACE_DELIMITER).slice(0, -1).join(NAMESPACE_DELIMITER)
-  );
-}
+export function splitFullKey (str) {
+  const segments = str.split(NAMESPACE_DELIMITER);
 
-export function  getKey (str) {
-  return str.split(NAMESPACE_DELIMITER).slice(-1)[0];
+  return [
+    segments.slice(-1)[0],
+    segments.slice(0, -1).join(NAMESPACE_DELIMITER),
+  ];
 }
 
 export function getByNamespace(str, obj) {
-  const namespace = getNamespace(str) + NAMESPACE_DELIMITER;
+  const namespace = splitFullKey(str)[1] + NAMESPACE_DELIMITER;
 
   return Object.fromEntries(
     Object.entries(obj)

package/src/storage.js

@@ -1,7 +1,10 @@
 function updateFromLocalStorage(state) {
   const stored = {};
   for (const key in state) {
-    stored[key] = localStorage.getItem(key);
+    const value = localStorage.getItem(key);
+    if (value !== null) {
+      stored[key] = value;
+    }
   }
 
   return Object.assign(state, stored);

package/src/webextension.js

@@ -0,0 +1,49 @@
+const browser = require("webextension-polyfill/dist/browser-polyfill.min");
+
+import main from '.';
+
+const { onStateChange, setStorageUtils } = main;
+
+if (isBackgroundScript()) {
+  browser.storage.local.onChanged.addListener(onStateChange);
+  isSessionStorageSupport() &&
+    browser.storage.session.onChanged.addListener(onStateChange);
+}
+
+setStorageUtils({
+  GET_TYPE: getStorageType,
+  IS_AVAILABE: isStorageAvailable,
+  UPDATE_STATE: updateStateFromStorage,
+  SET_VALUE: setStorageValue,
+});
+
+function getStorageType (isPersistent) {
+  return isBackgroundScript() && isPersistent && "local" || "session";
+}
+
+function isStorageAvailable (storageType) {
+  return storageType === "local" ||
+    (storageType === "session" && isSessionStorageSupport());
+}
+
+async function updateStateFromStorage (state, type) {
+  return Object.assign(state, await browser.storage[type].get());
+}
+
+function setStorageValue (type, key, value) {
+  browser.storage[type].set({ [key]: value });
+  return true;
+}
+
+function isSessionStorageSupport () {
+  return !!browser.storage.session;
+}
+
+function isBackgroundScript() {
+  return (
+    window.location.protocol === "chrome-extension:" ||
+    window.location.protocol === "moz-extension:"
+  );
+}
+
+export default main;

package/webpack.config.js

@@ -2,9 +2,12 @@ const MinimizerPlugin = require("minimizer-webpack-plugin");
 
 module.exports = (env) => {
   const options = {
-    entry: "./src/index.js",
+    entry: {
+      varstor: "./src/index.js",
+      "varstor-webextension": "./src/webextension.js",
+    },
     output: {
-      filename: "varstor.js",
+      filename: ({ chunk }) => `./${chunk.name}.js`,
       library: "Varstor",
       libraryTarget: "umd",
       libraryExport: "default",
@@ -25,7 +28,7 @@ module.exports = (env) => {
       minimize: true,
       minimizer: [new MinimizerPlugin()],
     };
-    options.output.filename = "varstor.min.js";
+    options.output.filename = ({ chunk }) => `./${chunk.name}.min.js`;
   }
 
   return options;