multi-tab-sync/dist/multi-tab-sync.main.js

A powerful multi-tab data synchronization library for Vue.js and browser extensions

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.MultiTabSync=t():e.MultiTabSync=t()}(this,()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,o(r.key),r)}}function o(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}e.r(t),e.d(t,{BroadcastChannelStrategy:()=>i,ChromeExtensionStrategy:()=>p,LocalStorageStrategy:()=>c,MultiTabSyncMixin:()=>w,MultiTabSyncPlugin:()=>S,SyncManager:()=>g,default:()=>E});const i=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.options=t,this.channel=new BroadcastChannel("multi-tab-sync-channel"),this.listeners=new Set},(t=[{key:"send",value:function(e){this.channel.postMessage(e)}},{key:"onMessage",value:function(e){var t=this,n=function(t){t.data&&"multi-tab-sync"===t.data.source&&e(t.data)};return this.channel.addEventListener("message",n),this.listeners.add(n),function(){t.channel.removeEventListener("message",n),t.listeners.delete(n)}}},{key:"destroy",value:function(){var e=this;this.listeners.forEach(function(t){e.channel.removeEventListener("message",t)}),this.listeners.clear(),this.channel.close()}}])&&r(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,u(r.key),r)}}function u(e){var t=function(e){if("object"!=s(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==s(t)?t:t+""}const c=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.options=t,this.listeners=new Set,this.init()},(t=[{key:"init",value:function(){"undefined"!=typeof window&&window.addEventListener("storage",this.handleStorageEvent.bind(this))}},{key:"handleStorageEvent",value:function(e){if(e.key&&e.key.startsWith(this.options.prefix)){var t={type:null===e.newValue?"REMOVE":"SET",key:e.key,value:e.newValue,source:"multi-tab-sync"};this.listeners.forEach(function(e){return e(t)})}}},{key:"send",value:function(e){"SET"===e.type?localStorage.setItem(e.key,e.value):"REMOVE"===e.type&&localStorage.removeItem(e.key)}},{key:"onMessage",value:function(e){var t=this;return this.listeners.add(e),function(){return t.listeners.delete(e)}}},{key:"destroy",value:function(){"undefined"!=typeof window&&window.removeEventListener("storage",this.handleStorageEvent.bind(this)),this.listeners.clear()}}])&&a(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function f(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,y(r.key),r)}}function y(e){var t=function(e){if("object"!=l(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=l(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==l(t)?t:t+""}const p=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.options=t,this.listeners=new Set,this.init()},(t=[{key:"init",value:function(){"undefined"!=typeof chrome&&chrome.runtime&&chrome.runtime.onMessage&&chrome.runtime.onMessage.addListener(this.handleChromeMessage.bind(this))}},{key:"handleChromeMessage",value:function(e,t,n){e&&"multi-tab-sync"===e.source&&this.listeners.forEach(function(t){return t(e)})}},{key:"send",value:function(e){"undefined"!=typeof chrome&&chrome.runtime&&chrome.runtime.sendMessage&&chrome.runtime.sendMessage(e)}},{key:"onMessage",value:function(e){var t=this;return this.listeners.add(e),function(){return t.listeners.delete(e)}}},{key:"destroy",value:function(){this.listeners.clear()}}])&&f(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function m(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,d(r.key),r)}}function d(e){var t=function(e){if("object"!=h(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=h(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==h(t)?t:t+""}const g=function(){return e=function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.options=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?b(Object(n),!0).forEach(function(t){m(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({prefix:"mts_",useBroadcastChannel:!0,useLocalStorage:!0,useChromeExtension:!1,serialization:{serialize:JSON.stringify,deserialize:JSON.parse}},t),this.strategies=[],this.isSupported=!0,this.supportMessage="",this.eventListeners=new Set,this.init()},t=[{key:"init",value:function(){var e=this;try{if("undefined"==typeof window)throw new Error("Window object is not available");if(this.options.useBroadcastChannel&&"undefined"!=typeof BroadcastChannel&&(this.strategies.push(new i(this.options)),this.supportMessage="Using BroadcastChannel for synchronization"),this.options.useLocalStorage&&"undefined"!=typeof localStorage&&(this.strategies.push(new c(this.options)),this.supportMessage||(this.supportMessage="Using localStorage for synchronization")),this.options.useChromeExtension&&"undefined"!=typeof chrome&&chrome.runtime&&chrome.runtime.sendMessage&&(this.strategies.push(new p(this.options)),this.supportMessage+=" + Chrome Extension API"),0===this.strategies.length)throw new Error("No synchronization strategy available");this.strategies.forEach(function(t){t.onMessage(function(t){e.handleIncomingMessage(t)})})}catch(e){this.isSupported=!1,this.supportMessage="Synchronization not supported: ".concat(e.message),console.warn(this.supportMessage)}}},{key:"handleIncomingMessage",value:function(e){this.eventListeners.forEach(function(t){try{t(e)}catch(e){console.error("Error in event listener:",e)}})}},{key:"on",value:function(e,t){var n=this;return this.eventListeners.add(t),function(){return n.eventListeners.delete(t)}}},{key:"off",value:function(e,t){this.eventListeners.delete(t)}},{key:"set",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!this.isSupported)return!1;var r={type:"SET",key:this.options.prefix+e,value:this.options.serialization.serialize(t),timestamp:Date.now(),expiry:n.expiry?Date.now()+n.expiry:null,source:"multi-tab-sync"};return this.broadcastMessage(r)}},{key:"get",value:function(e){if(!this.isSupported)return null;var t=this.options.prefix+e;try{var n=localStorage.getItem(t);if(!n)return null;var r=this.options.serialization.deserialize(n);return r.expiry&&Date.now()>r.expiry?(this.remove(e),null):r.value}catch(e){return console.error("Failed to get data:",e),null}}},{key:"remove",value:function(e){if(!this.isSupported)return!1;var t={type:"REMOVE",key:this.options.prefix+e,source:"multi-tab-sync"};try{localStorage.removeItem(t.key)}catch(e){console.error("Failed to remove from localStorage:",e)}return this.broadcastMessage(t)}},{key:"clear",value:function(){if(!this.isSupported)return!1;var e={type:"CLEAR",prefix:this.options.prefix,source:"multi-tab-sync"};try{for(var t=[],n=0;n<localStorage.length;n++){var r=localStorage.key(n);r.startsWith(this.options.prefix)&&t.push(r)}t.forEach(function(e){return localStorage.removeItem(e)})}catch(e){console.error("Failed to clear localStorage:",e)}return this.broadcastMessage(e)}},{key:"broadcastMessage",value:function(e){var t=!0;return this.strategies.forEach(function(n){try{n.send(e)}catch(e){console.error("Strategy ".concat(n.constructor.name," failed:"),e),t=!1}}),t}},{key:"getAll",value:function(){if(!this.isSupported)return{};var e={};try{for(var t=0;t<localStorage.length;t++){var n=localStorage.key(t);if(n.startsWith(this.options.prefix))try{var r=localStorage.getItem(n),o=this.options.serialization.deserialize(r);if(o.expiry&&Date.now()>o.expiry){this.remove(n.substring(this.options.prefix.length));continue}e[n.substring(this.options.prefix.length)]=o}catch(e){console.error("Failed to parse data for key:",n,e)}}}catch(e){console.error("Failed to get all data:",e)}return e}}],t&&v(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}(),S={install:function(e){var t=new g(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});e.config.globalProperties.$multiTabSync=t,e.provide("multiTabSync",t),e.config.globalProperties.$isMultiTabSupported=t.isSupported}},w={inject:["multiTabSync"],created:function(){this.$options.multiTabSync&&this.setupMultiTabSync()},methods:{setupMultiTabSync:function(){var e=this;this.$options.multiTabSync.forEach(function(t){var n=e.multiTabSync.get(t);null!=n&&(e[t]=n),e.$watch(t,function(n){e.multiTabSync.set(t,n)}),e.unsubscribe=e.multiTabSync.on(function(n){if("SET"===n.type&&n.key===e.multiTabSync.options.prefix+t){var r=e.multiTabSync.options.serialization.deserialize(n.value);e[t]=r}})})}},beforeUnmount:function(){this.unsubscribe&&this.unsubscribe()}},E=g;return t})());