├── .babelrc ├── .eslintrc ├── .gitignore ├── .prettierrc.js ├── .travis.yml ├── LICENSE ├── __mocks__ └── envMock.js ├── __test__ └── syncStorage.test.js ├── dist ├── syncState.js ├── syncState.umd.js ├── syncState.umd.js.map ├── syncState.umd.min.js └── syncState.umd.min.js.map ├── example ├── .env ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── actions │ │ └── index.js │ ├── components │ │ ├── App.js │ │ ├── Footer.js │ │ ├── Link.js │ │ ├── Todo.js │ │ └── TodoList.js │ ├── containers │ │ ├── AddTodo.js │ │ ├── FilterLink.js │ │ └── VisibleTodoList.js │ ├── index.css │ ├── index.js │ ├── lib │ │ └── syncState.js │ ├── logo.svg │ ├── reducers │ │ ├── index.js │ │ ├── todo.js │ │ ├── todos.js │ │ └── visibilityFilter.js │ └── registerServiceWorker.js └── yarn.lock ├── example_immutable ├── .env ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── actions │ │ └── index.js │ ├── components │ │ ├── App.js │ │ ├── Footer.js │ │ ├── Link.js │ │ ├── Todo.js │ │ └── TodoList.js │ ├── containers │ │ ├── AddTodo.js │ │ ├── FilterLink.js │ │ └── VisibleTodoList.js │ ├── index.css │ ├── index.js │ ├── lib │ │ └── syncState.js │ ├── logo.svg │ ├── reducers │ │ ├── index.js │ │ ├── todo.js │ │ ├── todos.js │ │ └── visibilityFilter.js │ └── registerServiceWorker.js └── yarn.lock ├── logo.png ├── package-lock.json ├── package.json ├── readme.md ├── redux-state-sync.gif ├── src └── syncState.js ├── webpack.config.babel.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb", "prettier"], 3 | "rules": { 4 | "react/jsx-filename-extension": 0 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | 5 | yarn-error.log* 6 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 4, 7 | }; 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | cache: 4 | directories: 5 | - node_modules 6 | notifications: 7 | email: false 8 | node_js: 9 | - '10' 10 | before_install: 11 | - npm i -g npm@^6.4.1 12 | before_script: 13 | - npm prune 14 | - npm i -g babel-cli 15 | script: 16 | - npm i 17 | - npm run build 18 | - npm run test 19 | after_success: 20 | - npm run semantic-release 21 | branches: 22 | except: 23 | - /^v\d+\.\d+\.\d+$/ 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 MU AOHUA 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /__mocks__/envMock.js: -------------------------------------------------------------------------------- 1 | 2 | /* global window Event*/ 3 | let store = {}; 4 | const localStorageMock = { 5 | getItem(key) { 6 | return store[key]; 7 | }, 8 | setItem(key, value) { 9 | store[key] = value.toString(); 10 | Event.prototype.newValue = value; 11 | window.dispatchEvent(new Event('storage')); 12 | }, 13 | clear() { 14 | store = {}; 15 | }, 16 | }; 17 | 18 | global.localStorage = localStorageMock; 19 | -------------------------------------------------------------------------------- /__test__/syncStorage.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | import { generateUuidForAction, isActionAllowed, createStateSyncMiddleware } from '../dist/syncState'; 3 | 4 | describe('action should have uuid', () => { 5 | it('action should have both $uuid and $wuid', () => { 6 | const action = { type: 'Test', payload: 'Test' }; 7 | const stampedAction = generateUuidForAction(action); 8 | expect(stampedAction.$uuid).toBeDefined(); 9 | expect(stampedAction.$wuid).toBeDefined(); 10 | }); 11 | it('action should have different $uuid and same $wuid', () => { 12 | const action1 = { type: 'Test', payload: 'Test' }; 13 | const action2 = { type: 'Test', payload: 'Test' }; 14 | const stampedAction1 = generateUuidForAction(action1); 15 | const stampedAction2 = generateUuidForAction(action2); 16 | expect(stampedAction1.$uuid === stampedAction2.$uuid).toBeFalsy(); 17 | expect(stampedAction1.$wuid === stampedAction2.$wuid).toBeTruthy(); 18 | }); 19 | }); 20 | 21 | describe('is action allowed', () => { 22 | it('action in blacklist should not be triggered', () => { 23 | const predicate = null; 24 | const blacklist = ['Test']; 25 | const whitelist = []; 26 | const allowed = isActionAllowed({ predicate, blacklist, whitelist }); 27 | const action = { type: 'Test', payload: 'Test' }; 28 | expect(allowed(action)).toBeFalsy(); 29 | }); 30 | it('action in blacklist and whitelist should not be triggered', () => { 31 | const predicate = null; 32 | const blacklist = ['Test']; 33 | const whitelist = ['Test']; 34 | const allowed = isActionAllowed({ predicate, blacklist, whitelist }); 35 | const action = { type: 'Test', payload: 'Test' }; 36 | expect(allowed(action)).toBeFalsy(); 37 | }); 38 | it('action in blacklist and predicate should be triggered', () => { 39 | const predicate = action => action.type === 'Test' || action.payload === 'Test'; 40 | const blacklist = ['Test']; 41 | const whitelist = ['Test']; 42 | const allowed = isActionAllowed({ predicate, blacklist, whitelist }); 43 | const action = { type: 'Test', payload: 'Test' }; 44 | expect(allowed(action)).toBeTruthy(); 45 | const action2 = { type: 'SecondTest', payload: 'Test' }; 46 | expect(allowed(action2)).toBeTruthy(); 47 | }); 48 | }); 49 | 50 | describe('state should be mapped', () => { 51 | it('state mapped to JSON', () => { 52 | const mockState = { 53 | test: 'Test', 54 | }; 55 | const mockStore = { 56 | getState: () => mockState, 57 | dispatch: () => {}, 58 | }; 59 | 60 | const next = action => expect(action.payload).toEqual(JSON.stringify(mockState)); 61 | 62 | createStateSyncMiddleware({ prepareState: JSON.stringify })(mockStore)(next)({ type: '&_SEND_INIT_STATE' }); 63 | }); 64 | }); 65 | -------------------------------------------------------------------------------- /dist/syncState.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.initMessageListener = exports.initStateWithPrevTab = exports.withReduxStateSync = exports.createReduxStateSync = exports.createStateSyncMiddleware = exports.WINDOW_STATE_SYNC_ID = exports.INIT_MESSAGE_LISTENER = exports.RECEIVE_INIT_STATE = exports.SEND_INIT_STATE = exports.GET_INIT_STATE = undefined; 7 | exports.generateUuidForAction = generateUuidForAction; 8 | exports.isActionAllowed = isActionAllowed; 9 | exports.isActionSynced = isActionSynced; 10 | exports.MessageListener = MessageListener; 11 | 12 | var _broadcastChannel = require('broadcast-channel'); 13 | 14 | var lastUuid = 0; 15 | var GET_INIT_STATE = exports.GET_INIT_STATE = '&_GET_INIT_STATE'; 16 | var SEND_INIT_STATE = exports.SEND_INIT_STATE = '&_SEND_INIT_STATE'; 17 | var RECEIVE_INIT_STATE = exports.RECEIVE_INIT_STATE = '&_RECEIVE_INIT_STATE'; 18 | var INIT_MESSAGE_LISTENER = exports.INIT_MESSAGE_LISTENER = '&_INIT_MESSAGE_LISTENER'; 19 | 20 | var defaultConfig = { 21 | channel: 'redux_state_sync', 22 | predicate: null, 23 | blacklist: [], 24 | whitelist: [], 25 | broadcastChannelOption: undefined, 26 | prepareState: function prepareState(state) { 27 | return state; 28 | }, 29 | receiveState: function receiveState(prevState, nextState) { 30 | return nextState; 31 | } 32 | }; 33 | 34 | var getIniteState = function getIniteState() { 35 | return { type: GET_INIT_STATE }; 36 | }; 37 | var sendIniteState = function sendIniteState() { 38 | return { type: SEND_INIT_STATE }; 39 | }; 40 | var receiveIniteState = function receiveIniteState(state) { 41 | return { type: RECEIVE_INIT_STATE, payload: state }; 42 | }; 43 | var initListener = function initListener() { 44 | return { type: INIT_MESSAGE_LISTENER }; 45 | }; 46 | 47 | function s4() { 48 | return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); 49 | } 50 | 51 | function guid() { 52 | return '' + s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); 53 | } 54 | 55 | // generate current window unique id 56 | var WINDOW_STATE_SYNC_ID = exports.WINDOW_STATE_SYNC_ID = guid(); 57 | // export for test 58 | function generateUuidForAction(action) { 59 | var stampedAction = action; 60 | stampedAction.$uuid = guid(); 61 | stampedAction.$wuid = WINDOW_STATE_SYNC_ID; 62 | return stampedAction; 63 | } 64 | // export for test 65 | function isActionAllowed(_ref) { 66 | var predicate = _ref.predicate, 67 | blacklist = _ref.blacklist, 68 | whitelist = _ref.whitelist; 69 | 70 | var allowed = function allowed() { 71 | return true; 72 | }; 73 | 74 | if (predicate && typeof predicate === 'function') { 75 | allowed = predicate; 76 | } else if (Array.isArray(blacklist)) { 77 | allowed = function allowed(action) { 78 | return blacklist.indexOf(action.type) < 0; 79 | }; 80 | } else if (Array.isArray(whitelist)) { 81 | allowed = function allowed(action) { 82 | return whitelist.indexOf(action.type) >= 0; 83 | }; 84 | } 85 | return allowed; 86 | } 87 | // export for test 88 | function isActionSynced(action) { 89 | return !!action.$isSync; 90 | } 91 | // export for test 92 | function MessageListener(_ref2) { 93 | var channel = _ref2.channel, 94 | dispatch = _ref2.dispatch, 95 | allowed = _ref2.allowed; 96 | 97 | var isSynced = false; 98 | var tabs = {}; 99 | this.handleOnMessage = function (stampedAction) { 100 | // Ignore if this action is triggered by this window 101 | if (stampedAction.$wuid === WINDOW_STATE_SYNC_ID) { 102 | return; 103 | } 104 | // IE bug https://stackoverflow.com/questions/18265556/why-does-internet-explorer-fire-the-window-storage-event-on-the-window-that-st 105 | if (stampedAction.type === RECEIVE_INIT_STATE) { 106 | return; 107 | } 108 | // ignore other values that saved to localstorage. 109 | if (stampedAction.$uuid && stampedAction.$uuid !== lastUuid) { 110 | if (stampedAction.type === GET_INIT_STATE && !tabs[stampedAction.$wuid]) { 111 | tabs[stampedAction.$wuid] = true; 112 | dispatch(sendIniteState()); 113 | } else if (stampedAction.type === SEND_INIT_STATE && !tabs[stampedAction.$wuid]) { 114 | if (!isSynced) { 115 | isSynced = true; 116 | dispatch(receiveIniteState(stampedAction.payload)); 117 | } 118 | } else if (allowed(stampedAction)) { 119 | lastUuid = stampedAction.$uuid; 120 | dispatch(Object.assign(stampedAction, { 121 | $isSync: true 122 | })); 123 | } 124 | } 125 | }; 126 | this.messageChannel = channel; 127 | this.messageChannel.onmessage = this.handleOnMessage; 128 | } 129 | 130 | var createStateSyncMiddleware = exports.createStateSyncMiddleware = function createStateSyncMiddleware() { 131 | var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig; 132 | 133 | var allowed = isActionAllowed(config); 134 | var channel = new _broadcastChannel.BroadcastChannel(config.channel, config.broadcastChannelOption); 135 | var prepareState = config.prepareState || defaultConfig.prepareState; 136 | var messageListener = null; 137 | 138 | return function (_ref3) { 139 | var getState = _ref3.getState, 140 | dispatch = _ref3.dispatch; 141 | return function (next) { 142 | return function (action) { 143 | // create message receiver 144 | if (!messageListener) { 145 | messageListener = new MessageListener({ channel: channel, dispatch: dispatch, allowed: allowed }); 146 | } 147 | // post messages 148 | if (action && !action.$uuid) { 149 | var stampedAction = generateUuidForAction(action); 150 | lastUuid = stampedAction.$uuid; 151 | try { 152 | if (action.type === SEND_INIT_STATE) { 153 | if (getState()) { 154 | stampedAction.payload = prepareState(getState()); 155 | channel.postMessage(stampedAction); 156 | } 157 | return next(action); 158 | } 159 | if (allowed(stampedAction) || action.type === GET_INIT_STATE) { 160 | channel.postMessage(stampedAction); 161 | } 162 | } catch (e) { 163 | console.error("Your browser doesn't support cross tab communication"); 164 | } 165 | } 166 | return next(Object.assign(action, { 167 | $isSync: typeof action.$isSync === 'undefined' ? false : action.$isSync 168 | })); 169 | }; 170 | }; 171 | }; 172 | }; 173 | 174 | // eslint-disable-next-line max-len 175 | var createReduxStateSync = exports.createReduxStateSync = function createReduxStateSync(appReducer) { 176 | var receiveState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultConfig.receiveState; 177 | return function (state, action) { 178 | var initState = state; 179 | if (action.type === RECEIVE_INIT_STATE) { 180 | initState = receiveState(state, action.payload); 181 | } 182 | return appReducer(initState, action); 183 | }; 184 | }; 185 | 186 | // init state with other tab's state 187 | var withReduxStateSync = exports.withReduxStateSync = createReduxStateSync; 188 | 189 | var initStateWithPrevTab = exports.initStateWithPrevTab = function initStateWithPrevTab(_ref4) { 190 | var dispatch = _ref4.dispatch; 191 | 192 | dispatch(getIniteState()); 193 | }; 194 | 195 | /* 196 | if don't dispath any action, the store.dispath will not be available for message listener. 197 | therefor need to trigger an empty action to init the messageListener. 198 | 199 | however, if already using initStateWithPrevTab, this function will be redundant 200 | */ 201 | var initMessageListener = exports.initMessageListener = function initMessageListener(_ref5) { 202 | var dispatch = _ref5.dispatch; 203 | 204 | dispatch(initListener()); 205 | }; -------------------------------------------------------------------------------- /dist/syncState.umd.js: -------------------------------------------------------------------------------- 1 | !function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.reduxStateSync=n():e.reduxStateSync=n()}(window,(function(){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=3)}([function(e,n,t){"use strict";(function(e){function r(e){return!(!e||"function"!=typeof e.then)}function o(e){return e||(e=0),new Promise((function(n){return setTimeout(n,e)}))}function i(e,n){return Math.floor(Math.random()*(n-e+1)+e)}function a(){return Math.random().toString(36).substring(2)}t.d(n,"b",(function(){return r})),t.d(n,"f",(function(){return o})),t.d(n,"d",(function(){return i})),t.d(n,"e",(function(){return a})),t.d(n,"c",(function(){return c})),t.d(n,"a",(function(){return l}));var s=0,u=0;function c(){var e=(new Date).getTime();return e===s?1e3*e+ ++u:(s=e,u=0,1e3*e)}var l="[object process]"===Object.prototype.toString.call(void 0!==e?e:0)}).call(this,t(4))},function(e,n){e.exports=!1},function(e,n){},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.initMessageListener=n.initStateWithPrevTab=n.withReduxStateSync=n.createReduxStateSync=n.createStateSyncMiddleware=n.WINDOW_STATE_SYNC_ID=n.INIT_MESSAGE_LISTENER=n.RECEIVE_INIT_STATE=n.SEND_INIT_STATE=n.GET_INIT_STATE=void 0,n.generateUuidForAction=h,n.isActionAllowed=p,n.isActionSynced=function(e){return!!e.$isSync},n.MessageListener=m;var r=t(6),o=0,i=n.GET_INIT_STATE="&_GET_INIT_STATE",a=n.SEND_INIT_STATE="&_SEND_INIT_STATE",s=n.RECEIVE_INIT_STATE="&_RECEIVE_INIT_STATE",u=n.INIT_MESSAGE_LISTENER="&_INIT_MESSAGE_LISTENER",c={channel:"redux_state_sync",predicate:null,blacklist:[],whitelist:[],broadcastChannelOption:void 0,prepareState:function(e){return e},receiveState:function(e,n){return n}};function l(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}function f(){return""+l()+l()+"-"+l()+"-"+l()+"-"+l()+"-"+l()+l()+l()}var d=n.WINDOW_STATE_SYNC_ID=f();function h(e){var n=e;return n.$uuid=f(),n.$wuid=d,n}function p(e){var n=e.predicate,t=e.blacklist,r=e.whitelist,o=function(){return!0};return n&&"function"==typeof n?o=n:Array.isArray(t)?o=function(e){return t.indexOf(e.type)<0}:Array.isArray(r)&&(o=function(e){return r.indexOf(e.type)>=0}),o}function m(e){var n=e.channel,t=e.dispatch,r=e.allowed,u=!1,c={};this.handleOnMessage=function(e){var n;e.$wuid!==d&&(e.type!==s&&e.$uuid&&e.$uuid!==o&&(e.type!==i||c[e.$wuid]?e.type!==a||c[e.$wuid]?r(e)&&(o=e.$uuid,t(Object.assign(e,{$isSync:!0}))):u||(u=!0,t((n=e.payload,{type:s,payload:n}))):(c[e.$wuid]=!0,t({type:a}))))},this.messageChannel=n,this.messageChannel.onmessage=this.handleOnMessage}n.createStateSyncMiddleware=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:c,n=p(e),t=new r.BroadcastChannel(e.channel,e.broadcastChannelOption),s=e.prepareState||c.prepareState,u=null;return function(e){var r=e.getState,c=e.dispatch;return function(e){return function(l){if(u||(u=new m({channel:t,dispatch:c,allowed:n})),l&&!l.$uuid){var f=h(l);o=f.$uuid;try{if(l.type===a)return r()&&(f.payload=s(r()),t.postMessage(f)),e(l);(n(f)||l.type===i)&&t.postMessage(f)}catch(e){console.error("Your browser doesn't support cross tab communication")}}return e(Object.assign(l,{$isSync:void 0!==l.$isSync&&l.$isSync}))}}}};var v=n.createReduxStateSync=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:c.receiveState;return function(t,r){var o=t;return r.type===s&&(o=n(t,r.payload)),e(o,r)}};n.withReduxStateSync=v,n.initStateWithPrevTab=function(e){(0,e.dispatch)({type:i})},n.initMessageListener=function(e){(0,e.dispatch)({type:u})}},function(e,n){var t,r,o=e.exports={};function i(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function s(e){if(t===setTimeout)return setTimeout(e,0);if((t===i||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(n){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:i}catch(e){t=i}try{r="function"==typeof clearTimeout?clearTimeout:a}catch(e){r=a}}();var u,c=[],l=!1,f=-1;function d(){l&&u&&(l=!1,u.length?c=u.concat(c):f=-1,c.length&&h())}function h(){if(!l){var e=s(d);l=!0;for(var n=c.length;n;){for(u=c,c=[];++f1)for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{},n=JSON.parse(JSON.stringify(e));return void 0===n.webWorkerSupport&&(n.webWorkerSupport=!0),n.idb||(n.idb={}),n.idb.ttl||(n.idb.ttl=45e3),n.idb.fallbackInterval||(n.idb.fallbackInterval=150),n.localstorage||(n.localstorage={}),n.localstorage.removeTimeout||(n.localstorage.removeTimeout=6e4),e.methods&&(n.methods=e.methods),n.node||(n.node={}),n.node.ttl||(n.node.ttl=12e4),void 0===n.node.useFastPath&&(n.node.useFastPath=!0),n}var u=r.c;function c(){if("undefined"!=typeof indexedDB)return indexedDB;if("undefined"!=typeof window){if(void 0!==window.mozIndexedDB)return window.mozIndexedDB;if(void 0!==window.webkitIndexedDB)return window.webkitIndexedDB;if(void 0!==window.msIndexedDB)return window.msIndexedDB}return!1}function l(e,n){return function(e,n){var t=(new Date).getTime()-n,r=e.transaction("messages").objectStore("messages"),o=[];return new Promise((function(e){r.openCursor().onsuccess=function(n){var r=n.target.result;if(r){var i=r.value;if(!(i.timee.lastCursorId&&(e.lastCursorId=n.id),n})).filter((function(n){return function(e,n){return e.uuid!==n.uuid&&(!n.eMIs.has(e.id)&&!(e.data.time0||e._addEL.internal.length>0}function M(e,n,t){e._addEL[n].push(t),function(e){if(!e._iL&&C(e)){var n=function(n){e._addEL[n.type].forEach((function(e){n.time>=e.time&&e.fn(n.data)}))},t=e.method.microSeconds();e._prepP?e._prepP.then((function(){e._iL=!0,e.method.onMessage(e._state,n,t)})):(e._iL=!0,e.method.onMessage(e._state,n,t))}}(e)}function O(e,n,t){e._addEL[n]=e._addEL[n].filter((function(e){return e!==t})),function(e){if(e._iL&&!C(e)){e._iL=!1;var n=e.method.microSeconds();e.method.onMessage(e._state,null,n)}}(e)}I._pubkey=!0,I.prototype={postMessage:function(e){if(this.closed)throw new Error("BroadcastChannel.postMessage(): Cannot post message after channel has closed");return P(this,"message",e)},postInternal:function(e){return P(this,"internal",e)},set onmessage(e){var n={time:this.method.microSeconds(),fn:e};O(this,"message",this._onML),e&&"function"==typeof e?(this._onML=n,M(this,"message",n)):this._onML=null},addEventListener:function(e,n){M(this,e,{time:this.method.microSeconds(),fn:n})},removeEventListener:function(e,n){O(this,e,this._addEL[e].find((function(e){return e.fn===n})))},close:function(){var e=this;if(!this.closed){this.closed=!0;var n=this._prepP?this._prepP:Promise.resolve();return this._onML=null,this._addEL.message=[],n.then((function(){return Promise.all(e._befC.map((function(e){return e()})))})).then((function(){return e.method.close(e._state)}))}},get type(){return this.method.type}};var A=t(1),N=t.n(A);var x={add:function(e){if("function"==typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope);else{if("function"!=typeof window.addEventListener)return;window.addEventListener("beforeunload",(function(){e()}),!0),window.addEventListener("unload",(function(){e()}),!0)}}},j=t(2),B=t.n(j),D=N.a?B.a:x,R=new Set,$=!1;function W(){var e=[];return R.forEach((function(n){e.push(n()),R.delete(n)})),Promise.all(e)}var G={add:function(e){if($||($=!0,D.add(W)),"function"!=typeof e)throw new Error("Listener is no function");return R.add(e),{remove:function(){return R.delete(e)},run:function(){return R.delete(e),e()}}},runAll:W,removeAll:function(){R.clear()},getSize:function(){return R.size}},F=function(e,n){this._channel=e,this._options=n,this.isLeader=!1,this.isDead=!1,this.token=Object(r.e)(),this._isApl=!1,this._reApply=!1,this._unl=[],this._lstns=[],this._invs=[]};function J(e,n){var t={context:"leader",action:n,token:e.token};return e._channel.postInternal(t)}function U(e,n){if(e._leaderElector)throw new Error("BroadcastChannel already has a leader-elector");n=function(e,n){return e||(e={}),(e=JSON.parse(JSON.stringify(e))).fallbackInterval||(e.fallbackInterval=3e3),e.responseTime||(e.responseTime=n.method.averageResponseTime(n.options)),e}(n,e);var t=new F(e,n);return e._befC.push((function(){return t.die()})),e._leaderElector=t,t}F.prototype={applyOnce:function(){var e=this;if(this.isLeader)return Promise.resolve(!1);if(this.isDead)return Promise.resolve(!1);if(this._isApl)return this._reApply=!0,Promise.resolve(!1);this._isApl=!0;var n=!1,t=[],o=function(r){"leader"===r.context&&r.token!=e.token&&(t.push(r),"apply"===r.action&&r.token>e.token&&(n=!0),"tell"===r.action&&(n=!0))};return this._channel.addEventListener("internal",o),J(this,"apply").then((function(){return Object(r.f)(e._options.responseTime)})).then((function(){return n?Promise.reject(new Error):J(e,"apply")})).then((function(){return Object(r.f)(e._options.responseTime)})).then((function(){return n?Promise.reject(new Error):J(e)})).then((function(){return function(e){e.isLeader=!0;var n=G.add((function(){return e.die()}));e._unl.push(n);var t=function(n){"leader"===n.context&&"apply"===n.action&&J(e,"tell")};return e._channel.addEventListener("internal",t),e._lstns.push(t),J(e,"tell")}(e)})).then((function(){return!0})).catch((function(){return!1})).then((function(n){return e._channel.removeEventListener("internal",o),e._isApl=!1,!n&&e._reApply?(e._reApply=!1,e.applyOnce()):n}))},awaitLeadership:function(){var e;return this._aLP||(this._aLP=(e=this).isLeader?Promise.resolve():new Promise((function(n){var t=!1,r=function(){t||(t=!0,clearInterval(o),e._channel.removeEventListener("internal",i),n(!0))};e.applyOnce().then((function(){e.isLeader&&r()}));var o=setInterval((function(){e.applyOnce().then((function(){e.isLeader&&r()}))}),e._options.fallbackInterval);e._invs.push(o);var i=function(n){"leader"===n.context&&"death"===n.action&&e.applyOnce().then((function(){e.isLeader&&r()}))};e._channel.addEventListener("internal",i),e._lstns.push(i)}))),this._aLP},die:function(){var e=this;if(!this.isDead)return this.isDead=!0,this._lstns.forEach((function(n){return e._channel.removeEventListener("internal",n)})),this._invs.forEach((function(e){return clearInterval(e)})),this._unl.forEach((function(e){e.remove()})),J(this,"death")}}}])})); 2 | //# sourceMappingURL=syncState.umd.js.map -------------------------------------------------------------------------------- /dist/syncState.umd.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://reduxStateSync/webpack/universalModuleDefinition","webpack://reduxStateSync/webpack/bootstrap","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/util.js","webpack://reduxStateSync/./node_modules/detect-node/browser.js","webpack://reduxStateSync/./src/syncState.js","webpack://reduxStateSync/./node_modules/process/browser.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/methods/native.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/oblivious-set.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/options.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/methods/indexed-db.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/methods/localstorage.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/methods/simulate.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/method-chooser.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/broadcast-channel.js","webpack://reduxStateSync/./node_modules/unload/dist/es/browser.js","webpack://reduxStateSync/./node_modules/unload/dist/es/index.js","webpack://reduxStateSync/./node_modules/broadcast-channel/dist/es/leader-election.js"],"names":["root","factory","exports","module","define","amd","window","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","isPromise","obj","then","sleep","time","Promise","res","setTimeout","randomInt","min","max","Math","floor","random","randomToken","toString","substring","lastMs","additional","microSeconds","ms","Date","getTime","isNode","process","generateUuidForAction","isActionAllowed","isActionSynced","action","$isSync","MessageListener","lastUuid","GET_INIT_STATE","SEND_INIT_STATE","RECEIVE_INIT_STATE","INIT_MESSAGE_LISTENER","defaultConfig","channel","predicate","blacklist","whitelist","broadcastChannelOption","undefined","prepareState","state","receiveState","prevState","nextState","s4","guid","WINDOW_STATE_SYNC_ID","stampedAction","$uuid","$wuid","allowed","Array","isArray","indexOf","type","dispatch","isSynced","tabs","this","handleOnMessage","assign","payload","messageChannel","onmessage","createStateSyncMiddleware","config","messageListener","getState","next","postMessage","e","console","error","createReduxStateSync","appReducer","initState","withReduxStateSync","initStateWithPrevTab","initMessageListener","cachedSetTimeout","cachedClearTimeout","defaultSetTimout","Error","defaultClearTimeout","runTimeout","fun","clearTimeout","currentQueue","queue","draining","queueIndex","cleanUpNextTick","length","concat","drainQueue","timeout","len","run","marker","runClearTimeout","Item","array","noop","nextTick","args","arguments","push","apply","title","browser","env","argv","version","versions","on","addListener","once","off","removeListener","removeAllListeners","emit","prependListener","prependOnceListener","listeners","binding","cwd","chdir","dir","umask","channelName","messagesCallback","bc","BroadcastChannel","subFns","msg","data","close","channelState","onMessage","fn","messageJson","canBeUsed","_pubkey","averageResponseTime","now","ttl","set","Set","timeMap","Map","has","add","olderThen","iterator","_removeTooOldValues","clear","fillOptionsWithDefaults","originalOptions","options","JSON","parse","stringify","webWorkerSupport","idb","fallbackInterval","localstorage","removeTimeout","methods","node","useFastPath","getIdb","indexedDB","mozIndexedDB","webkitIndexedDB","msIndexedDB","cleanOldMessages","db","objectStore","transaction","ret","openCursor","onsuccess","ev","cursor","target","result","msgObk","getOldMessages","tooOld","all","map","msgObj","id","request","removeMessageById","readNewMessages","closed","resolve","lastCursorId","keyRangeValue","IDBKeyRange","bound","Infinity","newerMessages","filter","uuid","eMIs","messagesCallbackTime","_filterMessage","sort","msgObjA","msgObjB","forEach","dbName","openRequest","open","onupgradeneeded","createObjectStore","keyPath","autoIncrement","rej","onerror","createDatabase","writeBlockPromise","readQueuePromises","_readLoop","readerUuid","writeObject","oncomplete","writeMessage","getLocalStorage","localStorage","storageKey","ls","setItem","removeItem","listener","newValue","addEventListener","addStorageEventListener","token","removeEventListener","writeObj","document","createEvent","initEvent","dispatchEvent","userAgent","navigator","toLowerCase","includes","defaultTime","SIMULATE_CHANNELS","from","METHODS","NodeMethod","chooseMethod","chooseMethods","Boolean","find","useMethod","method","ENFORCED_OPTIONS","maybePromise","_iL","_onML","_addEL","message","internal","_befC","_prepP","_state","clearNodeFolder","enforceOptions","_post","broadcastChannel","_hasMessageListeners","_addListenerObject","listenerFn","_startListening","_removeListenerObject","_stopListening","postInternal","listenObj","_this","awaitPrepare","WorkerGlobalScope","self","USE_METHOD","LISTENERS","startedListening","runAll","promises","remove","removeAll","getSize","size","_channel","_options","isLeader","isDead","_isApl","_reApply","_unl","_lstns","_invs","_sendMessage","leaderElector","msgJson","context","createLeaderElection","_leaderElector","responseTime","elector","die","applyOnce","stopCriteria","recieved","handleMessage","reject","unloadFn","isLeaderListener","_beLeader","success","awaitLeadership","_aLP","resolved","finish","clearInterval","interval","whenDeathListener","setInterval","_this2","uFn"],"mappings":"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","file":"syncState.umd.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"reduxStateSync\"] = factory();\n\telse\n\t\troot[\"reduxStateSync\"] = factory();\n})(window, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 3);\n","/**\n * returns true if the given object is a promise\n */\nexport function isPromise(obj) {\n if (obj && typeof obj.then === 'function') {\n return true;\n } else {\n return false;\n }\n}\nexport function sleep(time) {\n if (!time) time = 0;\n return new Promise(function (res) {\n return setTimeout(res, time);\n });\n}\nexport function randomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1) + min);\n}\n/**\n * https://stackoverflow.com/a/8084248\n */\n\nexport function randomToken() {\n return Math.random().toString(36).substring(2);\n}\nvar lastMs = 0;\nvar additional = 0;\n/**\n * returns the current time in micro-seconds,\n * WARNING: This is a pseudo-function\n * Performance.now is not reliable in webworkers, so we just make sure to never return the same time.\n * This is enough in browsers, and this function will not be used in nodejs.\n * The main reason for this hack is to ensure that BroadcastChannel behaves equal to production when it is used in fast-running unit tests.\n */\n\nexport function microSeconds() {\n var ms = new Date().getTime();\n\n if (ms === lastMs) {\n additional++;\n return ms * 1000 + additional;\n } else {\n lastMs = ms;\n additional = 0;\n return ms * 1000;\n }\n}\n/**\n * copied from the 'detect-node' npm module\n * We cannot use the module directly because it causes problems with rollup\n * @link https://github.com/iliakan/detect-node/blob/master/index.js\n */\n\nexport var isNode = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';","module.exports = false;\n\n","import { BroadcastChannel } from 'broadcast-channel';\n\nlet lastUuid = 0;\nexport const GET_INIT_STATE = '&_GET_INIT_STATE';\nexport const SEND_INIT_STATE = '&_SEND_INIT_STATE';\nexport const RECEIVE_INIT_STATE = '&_RECEIVE_INIT_STATE';\nexport const INIT_MESSAGE_LISTENER = '&_INIT_MESSAGE_LISTENER';\n\nconst defaultConfig = {\n channel: 'redux_state_sync',\n predicate: null,\n blacklist: [],\n whitelist: [],\n broadcastChannelOption: undefined,\n prepareState: state => state,\n receiveState: (prevState, nextState) => nextState,\n};\n\nconst getIniteState = () => ({ type: GET_INIT_STATE });\nconst sendIniteState = () => ({ type: SEND_INIT_STATE });\nconst receiveIniteState = state => ({ type: RECEIVE_INIT_STATE, payload: state });\nconst initListener = () => ({ type: INIT_MESSAGE_LISTENER });\n\nfunction s4() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n}\n\nfunction guid() {\n return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;\n}\n\n// generate current window unique id\nexport const WINDOW_STATE_SYNC_ID = guid();\n// export for test\nexport function generateUuidForAction(action) {\n const stampedAction = action;\n stampedAction.$uuid = guid();\n stampedAction.$wuid = WINDOW_STATE_SYNC_ID;\n return stampedAction;\n}\n// export for test\nexport function isActionAllowed({ predicate, blacklist, whitelist }) {\n let allowed = () => true;\n\n if (predicate && typeof predicate === 'function') {\n allowed = predicate;\n } else if (Array.isArray(blacklist)) {\n allowed = action => blacklist.indexOf(action.type) < 0;\n } else if (Array.isArray(whitelist)) {\n allowed = action => whitelist.indexOf(action.type) >= 0;\n }\n return allowed;\n}\n// export for test\nexport function isActionSynced(action) {\n return !!action.$isSync;\n}\n// export for test\nexport function MessageListener({ channel, dispatch, allowed }) {\n let isSynced = false;\n const tabs = {};\n this.handleOnMessage = stampedAction => {\n // Ignore if this action is triggered by this window\n if (stampedAction.$wuid === WINDOW_STATE_SYNC_ID) {\n return;\n }\n // IE bug https://stackoverflow.com/questions/18265556/why-does-internet-explorer-fire-the-window-storage-event-on-the-window-that-st\n if (stampedAction.type === RECEIVE_INIT_STATE) {\n return;\n }\n // ignore other values that saved to localstorage.\n if (stampedAction.$uuid && stampedAction.$uuid !== lastUuid) {\n if (stampedAction.type === GET_INIT_STATE && !tabs[stampedAction.$wuid]) {\n tabs[stampedAction.$wuid] = true;\n dispatch(sendIniteState());\n } else if (stampedAction.type === SEND_INIT_STATE && !tabs[stampedAction.$wuid]) {\n if (!isSynced) {\n isSynced = true;\n dispatch(receiveIniteState(stampedAction.payload));\n }\n } else if (allowed(stampedAction)) {\n lastUuid = stampedAction.$uuid;\n dispatch(\n Object.assign(stampedAction, {\n $isSync: true,\n }),\n );\n }\n }\n };\n this.messageChannel = channel;\n this.messageChannel.onmessage = this.handleOnMessage;\n}\n\nexport const createStateSyncMiddleware = (config = defaultConfig) => {\n const allowed = isActionAllowed(config);\n const channel = new BroadcastChannel(config.channel, config.broadcastChannelOption);\n const prepareState = config.prepareState || defaultConfig.prepareState;\n let messageListener = null;\n\n return ({ getState, dispatch }) => next => action => {\n // create message receiver\n if (!messageListener) {\n messageListener = new MessageListener({ channel, dispatch, allowed });\n }\n // post messages\n if (action && !action.$uuid) {\n const stampedAction = generateUuidForAction(action);\n lastUuid = stampedAction.$uuid;\n try {\n if (action.type === SEND_INIT_STATE) {\n if (getState()) {\n stampedAction.payload = prepareState(getState());\n channel.postMessage(stampedAction);\n }\n return next(action);\n }\n if (allowed(stampedAction) || action.type === GET_INIT_STATE) {\n channel.postMessage(stampedAction);\n }\n } catch (e) {\n console.error(\"Your browser doesn't support cross tab communication\");\n }\n }\n return next(\n Object.assign(action, {\n $isSync: typeof action.$isSync === 'undefined' ? false : action.$isSync,\n }),\n );\n };\n};\n\n// eslint-disable-next-line max-len\nexport const createReduxStateSync = (appReducer, receiveState = defaultConfig.receiveState) => (state, action) => {\n let initState = state;\n if (action.type === RECEIVE_INIT_STATE) {\n initState = receiveState(state, action.payload);\n }\n return appReducer(initState, action);\n};\n\n// init state with other tab's state\nexport const withReduxStateSync = createReduxStateSync;\n\nexport const initStateWithPrevTab = ({ dispatch }) => {\n dispatch(getIniteState());\n};\n\n/*\nif don't dispath any action, the store.dispath will not be available for message listener.\ntherefor need to trigger an empty action to init the messageListener.\n\nhowever, if already using initStateWithPrevTab, this function will be redundant\n*/\nexport const initMessageListener = ({ dispatch }) => {\n dispatch(initListener());\n};\n","// shim for using process in browser\nvar process = module.exports = {};\n\n// cached from whatever global is present so that test runners that stub it\n// don't break things. But we need to wrap it in a try catch in case it is\n// wrapped in strict mode code which doesn't define any globals. It's inside a\n// function because try/catches deoptimize in certain engines.\n\nvar cachedSetTimeout;\nvar cachedClearTimeout;\n\nfunction defaultSetTimout() {\n throw new Error('setTimeout has not been defined');\n}\nfunction defaultClearTimeout () {\n throw new Error('clearTimeout has not been defined');\n}\n(function () {\n try {\n if (typeof setTimeout === 'function') {\n cachedSetTimeout = setTimeout;\n } else {\n cachedSetTimeout = defaultSetTimout;\n }\n } catch (e) {\n cachedSetTimeout = defaultSetTimout;\n }\n try {\n if (typeof clearTimeout === 'function') {\n cachedClearTimeout = clearTimeout;\n } else {\n cachedClearTimeout = defaultClearTimeout;\n }\n } catch (e) {\n cachedClearTimeout = defaultClearTimeout;\n }\n} ())\nfunction runTimeout(fun) {\n if (cachedSetTimeout === setTimeout) {\n //normal enviroments in sane situations\n return setTimeout(fun, 0);\n }\n // if setTimeout wasn't available but was latter defined\n if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {\n cachedSetTimeout = setTimeout;\n return setTimeout(fun, 0);\n }\n try {\n // when when somebody has screwed with setTimeout but no I.E. maddness\n return cachedSetTimeout(fun, 0);\n } catch(e){\n try {\n // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n return cachedSetTimeout.call(null, fun, 0);\n } catch(e){\n // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error\n return cachedSetTimeout.call(this, fun, 0);\n }\n }\n\n\n}\nfunction runClearTimeout(marker) {\n if (cachedClearTimeout === clearTimeout) {\n //normal enviroments in sane situations\n return clearTimeout(marker);\n }\n // if clearTimeout wasn't available but was latter defined\n if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {\n cachedClearTimeout = clearTimeout;\n return clearTimeout(marker);\n }\n try {\n // when when somebody has screwed with setTimeout but no I.E. maddness\n return cachedClearTimeout(marker);\n } catch (e){\n try {\n // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n return cachedClearTimeout.call(null, marker);\n } catch (e){\n // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.\n // Some versions of I.E. have different rules for clearTimeout vs setTimeout\n return cachedClearTimeout.call(this, marker);\n }\n }\n\n\n\n}\nvar queue = [];\nvar draining = false;\nvar currentQueue;\nvar queueIndex = -1;\n\nfunction cleanUpNextTick() {\n if (!draining || !currentQueue) {\n return;\n }\n draining = false;\n if (currentQueue.length) {\n queue = currentQueue.concat(queue);\n } else {\n queueIndex = -1;\n }\n if (queue.length) {\n drainQueue();\n }\n}\n\nfunction drainQueue() {\n if (draining) {\n return;\n }\n var timeout = runTimeout(cleanUpNextTick);\n draining = true;\n\n var len = queue.length;\n while(len) {\n currentQueue = queue;\n queue = [];\n while (++queueIndex < len) {\n if (currentQueue) {\n currentQueue[queueIndex].run();\n }\n }\n queueIndex = -1;\n len = queue.length;\n }\n currentQueue = null;\n draining = false;\n runClearTimeout(timeout);\n}\n\nprocess.nextTick = function (fun) {\n var args = new Array(arguments.length - 1);\n if (arguments.length > 1) {\n for (var i = 1; i < arguments.length; i++) {\n args[i - 1] = arguments[i];\n }\n }\n queue.push(new Item(fun, args));\n if (queue.length === 1 && !draining) {\n runTimeout(drainQueue);\n }\n};\n\n// v8 likes predictible objects\nfunction Item(fun, array) {\n this.fun = fun;\n this.array = array;\n}\nItem.prototype.run = function () {\n this.fun.apply(null, this.array);\n};\nprocess.title = 'browser';\nprocess.browser = true;\nprocess.env = {};\nprocess.argv = [];\nprocess.version = ''; // empty string to avoid regexp issues\nprocess.versions = {};\n\nfunction noop() {}\n\nprocess.on = noop;\nprocess.addListener = noop;\nprocess.once = noop;\nprocess.off = noop;\nprocess.removeListener = noop;\nprocess.removeAllListeners = noop;\nprocess.emit = noop;\nprocess.prependListener = noop;\nprocess.prependOnceListener = noop;\n\nprocess.listeners = function (name) { return [] }\n\nprocess.binding = function (name) {\n throw new Error('process.binding is not supported');\n};\n\nprocess.cwd = function () { return '/' };\nprocess.chdir = function (dir) {\n throw new Error('process.chdir is not supported');\n};\nprocess.umask = function() { return 0; };\n","import { microSeconds as micro, isNode } from '../util';\nexport var microSeconds = micro;\nexport var type = 'native';\nexport function create(channelName) {\n var state = {\n messagesCallback: null,\n bc: new BroadcastChannel(channelName),\n subFns: [] // subscriberFunctions\n\n };\n\n state.bc.onmessage = function (msg) {\n if (state.messagesCallback) {\n state.messagesCallback(msg.data);\n }\n };\n\n return state;\n}\nexport function close(channelState) {\n channelState.bc.close();\n channelState.subFns = [];\n}\nexport function postMessage(channelState, messageJson) {\n channelState.bc.postMessage(messageJson, false);\n}\nexport function onMessage(channelState, fn) {\n channelState.messagesCallback = fn;\n}\nexport function canBeUsed() {\n /**\n * in the electron-renderer, isNode will be true even if we are in browser-context\n * so we also check if window is undefined\n */\n if (isNode && typeof window === 'undefined') return false;\n\n if (typeof BroadcastChannel === 'function') {\n if (BroadcastChannel._pubkey) {\n throw new Error('BroadcastChannel: Do not overwrite window.BroadcastChannel with this module, this is not a polyfill');\n }\n\n return true;\n } else return false;\n}\nexport function averageResponseTime() {\n return 150;\n}\nexport default {\n create: create,\n close: close,\n onMessage: onMessage,\n postMessage: postMessage,\n canBeUsed: canBeUsed,\n type: type,\n averageResponseTime: averageResponseTime,\n microSeconds: microSeconds\n};","/**\n * this is a set which automatically forgets\n * a given entry when a new entry is set and the ttl\n * of the old one is over\n * @constructor\n */\nvar ObliviousSet = function ObliviousSet(ttl) {\n var set = new Set();\n var timeMap = new Map();\n this.has = set.has.bind(set);\n\n this.add = function (value) {\n timeMap.set(value, now());\n set.add(value);\n\n _removeTooOldValues();\n };\n\n this.clear = function () {\n set.clear();\n timeMap.clear();\n };\n\n function _removeTooOldValues() {\n var olderThen = now() - ttl;\n var iterator = set[Symbol.iterator]();\n\n while (true) {\n var value = iterator.next().value;\n if (!value) return; // no more elements\n\n var time = timeMap.get(value);\n\n if (time < olderThen) {\n timeMap[\"delete\"](value);\n set[\"delete\"](value);\n } else {\n // we reached a value that is not old enough\n return;\n }\n }\n }\n};\n\nfunction now() {\n return new Date().getTime();\n}\n\nexport default ObliviousSet;","export function fillOptionsWithDefaults() {\n var originalOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var options = JSON.parse(JSON.stringify(originalOptions)); // main\n\n if (typeof options.webWorkerSupport === 'undefined') options.webWorkerSupport = true; // indexed-db\n\n if (!options.idb) options.idb = {}; // after this time the messages get deleted\n\n if (!options.idb.ttl) options.idb.ttl = 1000 * 45;\n if (!options.idb.fallbackInterval) options.idb.fallbackInterval = 150; // localstorage\n\n if (!options.localstorage) options.localstorage = {};\n if (!options.localstorage.removeTimeout) options.localstorage.removeTimeout = 1000 * 60; // custom methods\n\n if (originalOptions.methods) options.methods = originalOptions.methods; // node\n\n if (!options.node) options.node = {};\n if (!options.node.ttl) options.node.ttl = 1000 * 60 * 2; // 2 minutes;\n\n if (typeof options.node.useFastPath === 'undefined') options.node.useFastPath = true;\n return options;\n}","/**\n * this method uses indexeddb to store the messages\n * There is currently no observerAPI for idb\n * @link https://github.com/w3c/IndexedDB/issues/51\n */\nimport { sleep, randomInt, randomToken, microSeconds as micro, isNode } from '../util.js';\nexport var microSeconds = micro;\nimport ObliviousSet from '../oblivious-set';\nimport { fillOptionsWithDefaults } from '../options';\nvar DB_PREFIX = 'pubkey.broadcast-channel-0-';\nvar OBJECT_STORE_ID = 'messages';\nexport var type = 'idb';\nexport function getIdb() {\n if (typeof indexedDB !== 'undefined') return indexedDB;\n\n if (typeof window !== 'undefined') {\n if (typeof window.mozIndexedDB !== 'undefined') return window.mozIndexedDB;\n if (typeof window.webkitIndexedDB !== 'undefined') return window.webkitIndexedDB;\n if (typeof window.msIndexedDB !== 'undefined') return window.msIndexedDB;\n }\n\n return false;\n}\nexport function createDatabase(channelName) {\n var IndexedDB = getIdb(); // create table\n\n var dbName = DB_PREFIX + channelName;\n var openRequest = IndexedDB.open(dbName, 1);\n\n openRequest.onupgradeneeded = function (ev) {\n var db = ev.target.result;\n db.createObjectStore(OBJECT_STORE_ID, {\n keyPath: 'id',\n autoIncrement: true\n });\n };\n\n var dbPromise = new Promise(function (res, rej) {\n openRequest.onerror = function (ev) {\n return rej(ev);\n };\n\n openRequest.onsuccess = function () {\n res(openRequest.result);\n };\n });\n return dbPromise;\n}\n/**\n * writes the new message to the database\n * so other readers can find it\n */\n\nexport function writeMessage(db, readerUuid, messageJson) {\n var time = new Date().getTime();\n var writeObject = {\n uuid: readerUuid,\n time: time,\n data: messageJson\n };\n var transaction = db.transaction([OBJECT_STORE_ID], 'readwrite');\n return new Promise(function (res, rej) {\n transaction.oncomplete = function () {\n return res();\n };\n\n transaction.onerror = function (ev) {\n return rej(ev);\n };\n\n var objectStore = transaction.objectStore(OBJECT_STORE_ID);\n objectStore.add(writeObject);\n });\n}\nexport function getAllMessages(db) {\n var objectStore = db.transaction(OBJECT_STORE_ID).objectStore(OBJECT_STORE_ID);\n var ret = [];\n return new Promise(function (res) {\n objectStore.openCursor().onsuccess = function (ev) {\n var cursor = ev.target.result;\n\n if (cursor) {\n ret.push(cursor.value); //alert(\"Name for SSN \" + cursor.key + \" is \" + cursor.value.name);\n\n cursor[\"continue\"]();\n } else {\n res(ret);\n }\n };\n });\n}\nexport function getMessagesHigherThen(db, lastCursorId) {\n var objectStore = db.transaction(OBJECT_STORE_ID).objectStore(OBJECT_STORE_ID);\n var ret = [];\n var keyRangeValue = IDBKeyRange.bound(lastCursorId + 1, Infinity);\n return new Promise(function (res) {\n objectStore.openCursor(keyRangeValue).onsuccess = function (ev) {\n var cursor = ev.target.result;\n\n if (cursor) {\n ret.push(cursor.value);\n cursor[\"continue\"]();\n } else {\n res(ret);\n }\n };\n });\n}\nexport function removeMessageById(db, id) {\n var request = db.transaction([OBJECT_STORE_ID], 'readwrite').objectStore(OBJECT_STORE_ID)[\"delete\"](id);\n return new Promise(function (res) {\n request.onsuccess = function () {\n return res();\n };\n });\n}\nexport function getOldMessages(db, ttl) {\n var olderThen = new Date().getTime() - ttl;\n var objectStore = db.transaction(OBJECT_STORE_ID).objectStore(OBJECT_STORE_ID);\n var ret = [];\n return new Promise(function (res) {\n objectStore.openCursor().onsuccess = function (ev) {\n var cursor = ev.target.result;\n\n if (cursor) {\n var msgObk = cursor.value;\n\n if (msgObk.time < olderThen) {\n ret.push(msgObk); //alert(\"Name for SSN \" + cursor.key + \" is \" + cursor.value.name);\n\n cursor[\"continue\"]();\n } else {\n // no more old messages,\n res(ret);\n return;\n }\n } else {\n res(ret);\n }\n };\n });\n}\nexport function cleanOldMessages(db, ttl) {\n return getOldMessages(db, ttl).then(function (tooOld) {\n return Promise.all(tooOld.map(function (msgObj) {\n return removeMessageById(db, msgObj.id);\n }));\n });\n}\nexport function create(channelName, options) {\n options = fillOptionsWithDefaults(options);\n return createDatabase(channelName).then(function (db) {\n var state = {\n closed: false,\n lastCursorId: 0,\n channelName: channelName,\n options: options,\n uuid: randomToken(),\n\n /**\n * emittedMessagesIds\n * contains all messages that have been emitted before\n * @type {ObliviousSet}\n */\n eMIs: new ObliviousSet(options.idb.ttl * 2),\n // ensures we do not read messages in parrallel\n writeBlockPromise: Promise.resolve(),\n messagesCallback: null,\n readQueuePromises: [],\n db: db\n };\n /**\n * if service-workers are used,\n * we have no 'storage'-event if they post a message,\n * therefore we also have to set an interval\n */\n\n _readLoop(state);\n\n return state;\n });\n}\n\nfunction _readLoop(state) {\n if (state.closed) return;\n readNewMessages(state).then(function () {\n return sleep(state.options.idb.fallbackInterval);\n }).then(function () {\n return _readLoop(state);\n });\n}\n\nfunction _filterMessage(msgObj, state) {\n if (msgObj.uuid === state.uuid) return false; // send by own\n\n if (state.eMIs.has(msgObj.id)) return false; // already emitted\n\n if (msgObj.data.time < state.messagesCallbackTime) return false; // older then onMessageCallback\n\n return true;\n}\n/**\n * reads all new messages from the database and emits them\n */\n\n\nfunction readNewMessages(state) {\n // channel already closed\n if (state.closed) return Promise.resolve(); // if no one is listening, we do not need to scan for new messages\n\n if (!state.messagesCallback) return Promise.resolve();\n return getMessagesHigherThen(state.db, state.lastCursorId).then(function (newerMessages) {\n var useMessages = newerMessages\n /**\n * there is a bug in iOS where the msgObj can be undefined some times\n * so we filter them out\n * @link https://github.com/pubkey/broadcast-channel/issues/19\n */\n .filter(function (msgObj) {\n return !!msgObj;\n }).map(function (msgObj) {\n if (msgObj.id > state.lastCursorId) {\n state.lastCursorId = msgObj.id;\n }\n\n return msgObj;\n }).filter(function (msgObj) {\n return _filterMessage(msgObj, state);\n }).sort(function (msgObjA, msgObjB) {\n return msgObjA.time - msgObjB.time;\n }); // sort by time\n\n useMessages.forEach(function (msgObj) {\n if (state.messagesCallback) {\n state.eMIs.add(msgObj.id);\n state.messagesCallback(msgObj.data);\n }\n });\n return Promise.resolve();\n });\n}\n\nexport function close(channelState) {\n channelState.closed = true;\n channelState.db.close();\n}\nexport function postMessage(channelState, messageJson) {\n channelState.writeBlockPromise = channelState.writeBlockPromise.then(function () {\n return writeMessage(channelState.db, channelState.uuid, messageJson);\n }).then(function () {\n if (randomInt(0, 10) === 0) {\n /* await (do not await) */\n cleanOldMessages(channelState.db, channelState.options.idb.ttl);\n }\n });\n return channelState.writeBlockPromise;\n}\nexport function onMessage(channelState, fn, time) {\n channelState.messagesCallbackTime = time;\n channelState.messagesCallback = fn;\n readNewMessages(channelState);\n}\nexport function canBeUsed() {\n if (isNode) return false;\n var idb = getIdb();\n if (!idb) return false;\n return true;\n}\nexport function averageResponseTime(options) {\n return options.idb.fallbackInterval * 2;\n}\nexport default {\n create: create,\n close: close,\n onMessage: onMessage,\n postMessage: postMessage,\n canBeUsed: canBeUsed,\n type: type,\n averageResponseTime: averageResponseTime,\n microSeconds: microSeconds\n};","/**\n * A localStorage-only method which uses localstorage and its 'storage'-event\n * This does not work inside of webworkers because they have no access to locastorage\n * This is basically implemented to support IE9 or your grandmothers toaster.\n * @link https://caniuse.com/#feat=namevalue-storage\n * @link https://caniuse.com/#feat=indexeddb\n */\nimport ObliviousSet from '../oblivious-set';\nimport { fillOptionsWithDefaults } from '../options';\nimport { sleep, randomToken, microSeconds as micro, isNode } from '../util';\nexport var microSeconds = micro;\nvar KEY_PREFIX = 'pubkey.broadcastChannel-';\nexport var type = 'localstorage';\n/**\n * copied from crosstab\n * @link https://github.com/tejacques/crosstab/blob/master/src/crosstab.js#L32\n */\n\nexport function getLocalStorage() {\n var localStorage;\n if (typeof window === 'undefined') return null;\n\n try {\n localStorage = window.localStorage;\n localStorage = window['ie8-eventlistener/storage'] || window.localStorage;\n } catch (e) {// New versions of Firefox throw a Security exception\n // if cookies are disabled. See\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1028153\n }\n\n return localStorage;\n}\nexport function storageKey(channelName) {\n return KEY_PREFIX + channelName;\n}\n/**\n* writes the new message to the storage\n* and fires the storage-event so other readers can find it\n*/\n\nexport function postMessage(channelState, messageJson) {\n return new Promise(function (res) {\n sleep().then(function () {\n var key = storageKey(channelState.channelName);\n var writeObj = {\n token: randomToken(),\n time: new Date().getTime(),\n data: messageJson,\n uuid: channelState.uuid\n };\n var value = JSON.stringify(writeObj);\n getLocalStorage().setItem(key, value);\n /**\n * StorageEvent does not fire the 'storage' event\n * in the window that changes the state of the local storage.\n * So we fire it manually\n */\n\n var ev = document.createEvent('Event');\n ev.initEvent('storage', true, true);\n ev.key = key;\n ev.newValue = value;\n window.dispatchEvent(ev);\n res();\n });\n });\n}\nexport function addStorageEventListener(channelName, fn) {\n var key = storageKey(channelName);\n\n var listener = function listener(ev) {\n if (ev.key === key) {\n fn(JSON.parse(ev.newValue));\n }\n };\n\n window.addEventListener('storage', listener);\n return listener;\n}\nexport function removeStorageEventListener(listener) {\n window.removeEventListener('storage', listener);\n}\nexport function create(channelName, options) {\n options = fillOptionsWithDefaults(options);\n\n if (!canBeUsed()) {\n throw new Error('BroadcastChannel: localstorage cannot be used');\n }\n\n var uuid = randomToken();\n /**\n * eMIs\n * contains all messages that have been emitted before\n * @type {ObliviousSet}\n */\n\n var eMIs = new ObliviousSet(options.localstorage.removeTimeout);\n var state = {\n channelName: channelName,\n uuid: uuid,\n eMIs: eMIs // emittedMessagesIds\n\n };\n state.listener = addStorageEventListener(channelName, function (msgObj) {\n if (!state.messagesCallback) return; // no listener\n\n if (msgObj.uuid === uuid) return; // own message\n\n if (!msgObj.token || eMIs.has(msgObj.token)) return; // already emitted\n\n if (msgObj.data.time && msgObj.data.time < state.messagesCallbackTime) return; // too old\n\n eMIs.add(msgObj.token);\n state.messagesCallback(msgObj.data);\n });\n return state;\n}\nexport function close(channelState) {\n removeStorageEventListener(channelState.listener);\n}\nexport function onMessage(channelState, fn, time) {\n channelState.messagesCallbackTime = time;\n channelState.messagesCallback = fn;\n}\nexport function canBeUsed() {\n if (isNode) return false;\n var ls = getLocalStorage();\n if (!ls) return false;\n\n try {\n var key = '__broadcastchannel_check';\n ls.setItem(key, 'works');\n ls.removeItem(key);\n } catch (e) {\n // Safari 10 in private mode will not allow write access to local\n // storage and fail with a QuotaExceededError. See\n // https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API#Private_Browsing_Incognito_modes\n return false;\n }\n\n return true;\n}\nexport function averageResponseTime() {\n var defaultTime = 120;\n var userAgent = navigator.userAgent.toLowerCase();\n\n if (userAgent.includes('safari') && !userAgent.includes('chrome')) {\n // safari is much slower so this time is higher\n return defaultTime * 2;\n }\n\n return defaultTime;\n}\nexport default {\n create: create,\n close: close,\n onMessage: onMessage,\n postMessage: postMessage,\n canBeUsed: canBeUsed,\n type: type,\n averageResponseTime: averageResponseTime,\n microSeconds: microSeconds\n};","import { microSeconds as micro } from '../util';\nexport var microSeconds = micro;\nexport var type = 'simulate';\nvar SIMULATE_CHANNELS = new Set();\nexport function create(channelName) {\n var state = {\n name: channelName,\n messagesCallback: null\n };\n SIMULATE_CHANNELS.add(state);\n return state;\n}\nexport function close(channelState) {\n SIMULATE_CHANNELS[\"delete\"](channelState);\n}\nexport function postMessage(channelState, messageJson) {\n return new Promise(function (res) {\n return setTimeout(function () {\n var channelArray = Array.from(SIMULATE_CHANNELS);\n channelArray.filter(function (channel) {\n return channel.name === channelState.name;\n }).filter(function (channel) {\n return channel !== channelState;\n }).filter(function (channel) {\n return !!channel.messagesCallback;\n }).forEach(function (channel) {\n return channel.messagesCallback(messageJson);\n });\n res();\n }, 5);\n });\n}\nexport function onMessage(channelState, fn) {\n channelState.messagesCallback = fn;\n}\nexport function canBeUsed() {\n return true;\n}\nexport function averageResponseTime() {\n return 5;\n}\nexport default {\n create: create,\n close: close,\n onMessage: onMessage,\n postMessage: postMessage,\n canBeUsed: canBeUsed,\n type: type,\n averageResponseTime: averageResponseTime,\n microSeconds: microSeconds\n};","import NativeMethod from './methods/native.js';\nimport IndexeDbMethod from './methods/indexed-db.js';\nimport LocalstorageMethod from './methods/localstorage.js';\nimport SimulateMethod from './methods/simulate.js';\nimport { isNode } from './util'; // order is important\n\nvar METHODS = [NativeMethod, // fastest\nIndexeDbMethod, LocalstorageMethod];\n/**\n * The NodeMethod is loaded lazy\n * so it will not get bundled in browser-builds\n */\n\nif (isNode) {\n /**\n * we use the non-transpiled code for nodejs\n * because it runs faster\n */\n var NodeMethod = require('../../src/methods/' + // use this hack so that browserify and others\n // do not import the node-method by default\n // when bundling.\n 'node.js');\n /**\n * this will be false for webpackbuilds\n * which will shim the node-method with an empty object {}\n */\n\n\n if (typeof NodeMethod.canBeUsed === 'function') {\n METHODS.push(NodeMethod);\n }\n}\n\nexport function chooseMethod(options) {\n var chooseMethods = [].concat(options.methods, METHODS).filter(Boolean); // directly chosen\n\n if (options.type) {\n if (options.type === 'simulate') {\n // only use simulate-method if directly chosen\n return SimulateMethod;\n }\n\n var ret = chooseMethods.find(function (m) {\n return m.type === options.type;\n });\n if (!ret) throw new Error('method-type ' + options.type + ' not found');else return ret;\n }\n /**\n * if no webworker support is needed,\n * remove idb from the list so that localstorage is been chosen\n */\n\n\n if (!options.webWorkerSupport && !isNode) {\n chooseMethods = chooseMethods.filter(function (m) {\n return m.type !== 'idb';\n });\n }\n\n var useMethod = chooseMethods.find(function (method) {\n return method.canBeUsed();\n });\n if (!useMethod) throw new Error('No useable methode found:' + JSON.stringify(METHODS.map(function (m) {\n return m.type;\n })));else return useMethod;\n}","import { isPromise } from './util.js';\nimport { chooseMethod } from './method-chooser.js';\nimport { fillOptionsWithDefaults } from './options.js';\nexport var BroadcastChannel = function BroadcastChannel(name, options) {\n this.name = name;\n\n if (ENFORCED_OPTIONS) {\n options = ENFORCED_OPTIONS;\n }\n\n this.options = fillOptionsWithDefaults(options);\n this.method = chooseMethod(this.options); // isListening\n\n this._iL = false;\n /**\n * _onMessageListener\n * setting onmessage twice,\n * will overwrite the first listener\n */\n\n this._onML = null;\n /**\n * _addEventListeners\n */\n\n this._addEL = {\n message: [],\n internal: []\n };\n /**\n * _beforeClose\n * array of promises that will be awaited\n * before the channel is closed\n */\n\n this._befC = [];\n /**\n * _preparePromise\n */\n\n this._prepP = null;\n\n _prepareChannel(this);\n}; // STATICS\n\n/**\n * used to identify if someone overwrites\n * window.BroadcastChannel with this\n * See methods/native.js\n */\n\nBroadcastChannel._pubkey = true;\n/**\n * clears the tmp-folder if is node\n * @return {Promise} true if has run, false if not node\n */\n\nexport function clearNodeFolder(options) {\n options = fillOptionsWithDefaults(options);\n var method = chooseMethod(options);\n\n if (method.type === 'node') {\n return method.clearNodeFolder().then(function () {\n return true;\n });\n } else {\n return Promise.resolve(false);\n }\n}\n/**\n * if set, this method is enforced,\n * no mather what the options are\n */\n\nvar ENFORCED_OPTIONS;\nexport function enforceOptions(options) {\n ENFORCED_OPTIONS = options;\n} // PROTOTYPE\n\nBroadcastChannel.prototype = {\n postMessage: function postMessage(msg) {\n if (this.closed) {\n throw new Error('BroadcastChannel.postMessage(): ' + 'Cannot post message after channel has closed');\n }\n\n return _post(this, 'message', msg);\n },\n postInternal: function postInternal(msg) {\n return _post(this, 'internal', msg);\n },\n\n set onmessage(fn) {\n var time = this.method.microSeconds();\n var listenObj = {\n time: time,\n fn: fn\n };\n\n _removeListenerObject(this, 'message', this._onML);\n\n if (fn && typeof fn === 'function') {\n this._onML = listenObj;\n\n _addListenerObject(this, 'message', listenObj);\n } else {\n this._onML = null;\n }\n },\n\n addEventListener: function addEventListener(type, fn) {\n var time = this.method.microSeconds();\n var listenObj = {\n time: time,\n fn: fn\n };\n\n _addListenerObject(this, type, listenObj);\n },\n removeEventListener: function removeEventListener(type, fn) {\n var obj = this._addEL[type].find(function (obj) {\n return obj.fn === fn;\n });\n\n _removeListenerObject(this, type, obj);\n },\n close: function close() {\n var _this = this;\n\n if (this.closed) return;\n this.closed = true;\n var awaitPrepare = this._prepP ? this._prepP : Promise.resolve();\n this._onML = null;\n this._addEL.message = [];\n return awaitPrepare.then(function () {\n return Promise.all(_this._befC.map(function (fn) {\n return fn();\n }));\n }).then(function () {\n return _this.method.close(_this._state);\n });\n },\n\n get type() {\n return this.method.type;\n }\n\n};\n\nfunction _post(broadcastChannel, type, msg) {\n var time = broadcastChannel.method.microSeconds();\n var msgObj = {\n time: time,\n type: type,\n data: msg\n };\n var awaitPrepare = broadcastChannel._prepP ? broadcastChannel._prepP : Promise.resolve();\n return awaitPrepare.then(function () {\n return broadcastChannel.method.postMessage(broadcastChannel._state, msgObj);\n });\n}\n\nfunction _prepareChannel(channel) {\n var maybePromise = channel.method.create(channel.name, channel.options);\n\n if (isPromise(maybePromise)) {\n channel._prepP = maybePromise;\n maybePromise.then(function (s) {\n // used in tests to simulate slow runtime\n\n /*if (channel.options.prepareDelay) {\n await new Promise(res => setTimeout(res, this.options.prepareDelay));\n }*/\n channel._state = s;\n });\n } else {\n channel._state = maybePromise;\n }\n}\n\nfunction _hasMessageListeners(channel) {\n if (channel._addEL.message.length > 0) return true;\n if (channel._addEL.internal.length > 0) return true;\n return false;\n}\n\nfunction _addListenerObject(channel, type, obj) {\n channel._addEL[type].push(obj);\n\n _startListening(channel);\n}\n\nfunction _removeListenerObject(channel, type, obj) {\n channel._addEL[type] = channel._addEL[type].filter(function (o) {\n return o !== obj;\n });\n\n _stopListening(channel);\n}\n\nfunction _startListening(channel) {\n if (!channel._iL && _hasMessageListeners(channel)) {\n // someone is listening, start subscribing\n var listenerFn = function listenerFn(msgObj) {\n channel._addEL[msgObj.type].forEach(function (obj) {\n if (msgObj.time >= obj.time) {\n obj.fn(msgObj.data);\n }\n });\n };\n\n var time = channel.method.microSeconds();\n\n if (channel._prepP) {\n channel._prepP.then(function () {\n channel._iL = true;\n channel.method.onMessage(channel._state, listenerFn, time);\n });\n } else {\n channel._iL = true;\n channel.method.onMessage(channel._state, listenerFn, time);\n }\n }\n}\n\nfunction _stopListening(channel) {\n if (channel._iL && !_hasMessageListeners(channel)) {\n // noone is listening, stop subscribing\n channel._iL = false;\n var time = channel.method.microSeconds();\n channel.method.onMessage(channel._state, null, time);\n }\n}","/* global WorkerGlobalScope */\nfunction add(fn) {\n if (typeof WorkerGlobalScope === 'function' && self instanceof WorkerGlobalScope) {// this is run inside of a webworker\n } else {\n /**\n * if we are on react-native, there is no window.addEventListener\n * @link https://github.com/pubkey/unload/issues/6\n */\n if (typeof window.addEventListener !== 'function') return;\n /**\n * for normal browser-windows, we use the beforeunload-event\n */\n\n window.addEventListener('beforeunload', function () {\n fn();\n }, true);\n /**\n * for iframes, we have to use the unload-event\n * @link https://stackoverflow.com/q/47533670/3443137\n */\n\n window.addEventListener('unload', function () {\n fn();\n }, true);\n }\n /**\n * TODO add fallback for safari-mobile\n * @link https://stackoverflow.com/a/26193516/3443137\n */\n\n}\n\nexport default {\n add: add\n};","import isNode from 'detect-node';\nimport BrowserMethod from './browser.js';\nimport NodeMethod from './node.js';\nvar USE_METHOD = isNode ? NodeMethod : BrowserMethod;\nvar LISTENERS = new Set();\nvar startedListening = false;\n\nfunction startListening() {\n if (startedListening) return;\n startedListening = true;\n USE_METHOD.add(runAll);\n}\n\nexport function add(fn) {\n startListening();\n if (typeof fn !== 'function') throw new Error('Listener is no function');\n LISTENERS.add(fn);\n var addReturn = {\n remove: function remove() {\n return LISTENERS[\"delete\"](fn);\n },\n run: function run() {\n LISTENERS[\"delete\"](fn);\n return fn();\n }\n };\n return addReturn;\n}\nexport function runAll() {\n var promises = [];\n LISTENERS.forEach(function (fn) {\n promises.push(fn());\n LISTENERS[\"delete\"](fn);\n });\n return Promise.all(promises);\n}\nexport function removeAll() {\n LISTENERS.clear();\n}\nexport function getSize() {\n return LISTENERS.size;\n}\nexport default {\n add: add,\n runAll: runAll,\n removeAll: removeAll,\n getSize: getSize\n};","import { sleep, randomToken } from './util.js';\nimport unload from 'unload';\n\nvar LeaderElection = function LeaderElection(channel, options) {\n this._channel = channel;\n this._options = options;\n this.isLeader = false;\n this.isDead = false;\n this.token = randomToken();\n this._isApl = false; // _isApplying\n\n this._reApply = false; // things to clean up\n\n this._unl = []; // _unloads\n\n this._lstns = []; // _listeners\n\n this._invs = []; // _intervals\n};\n\nLeaderElection.prototype = {\n applyOnce: function applyOnce() {\n var _this = this;\n\n if (this.isLeader) return Promise.resolve(false);\n if (this.isDead) return Promise.resolve(false); // do nothing if already running\n\n if (this._isApl) {\n this._reApply = true;\n return Promise.resolve(false);\n }\n\n this._isApl = true;\n var stopCriteria = false;\n var recieved = [];\n\n var handleMessage = function handleMessage(msg) {\n if (msg.context === 'leader' && msg.token != _this.token) {\n recieved.push(msg);\n\n if (msg.action === 'apply') {\n // other is applying\n if (msg.token > _this.token) {\n // other has higher token, stop applying\n stopCriteria = true;\n }\n }\n\n if (msg.action === 'tell') {\n // other is already leader\n stopCriteria = true;\n }\n }\n };\n\n this._channel.addEventListener('internal', handleMessage);\n\n var ret = _sendMessage(this, 'apply') // send out that this one is applying\n .then(function () {\n return sleep(_this._options.responseTime);\n }) // let others time to respond\n .then(function () {\n if (stopCriteria) return Promise.reject(new Error());else return _sendMessage(_this, 'apply');\n }).then(function () {\n return sleep(_this._options.responseTime);\n }) // let others time to respond\n .then(function () {\n if (stopCriteria) return Promise.reject(new Error());else return _sendMessage(_this);\n }).then(function () {\n return _beLeader(_this);\n }) // no one disagreed -> this one is now leader\n .then(function () {\n return true;\n })[\"catch\"](function () {\n return false;\n }) // apply not successfull\n .then(function (success) {\n _this._channel.removeEventListener('internal', handleMessage);\n\n _this._isApl = false;\n\n if (!success && _this._reApply) {\n _this._reApply = false;\n return _this.applyOnce();\n } else return success;\n });\n\n return ret;\n },\n awaitLeadership: function awaitLeadership() {\n if (\n /* _awaitLeadershipPromise */\n !this._aLP) {\n this._aLP = _awaitLeadershipOnce(this);\n }\n\n return this._aLP;\n },\n die: function die() {\n var _this2 = this;\n\n if (this.isDead) return;\n this.isDead = true;\n\n this._lstns.forEach(function (listener) {\n return _this2._channel.removeEventListener('internal', listener);\n });\n\n this._invs.forEach(function (interval) {\n return clearInterval(interval);\n });\n\n this._unl.forEach(function (uFn) {\n uFn.remove();\n });\n\n return _sendMessage(this, 'death');\n }\n};\n\nfunction _awaitLeadershipOnce(leaderElector) {\n if (leaderElector.isLeader) return Promise.resolve();\n return new Promise(function (res) {\n var resolved = false;\n\n var finish = function finish() {\n if (resolved) return;\n resolved = true;\n clearInterval(interval);\n\n leaderElector._channel.removeEventListener('internal', whenDeathListener);\n\n res(true);\n }; // try once now\n\n\n leaderElector.applyOnce().then(function () {\n if (leaderElector.isLeader) finish();\n }); // try on fallbackInterval\n\n var interval = setInterval(function () {\n leaderElector.applyOnce().then(function () {\n if (leaderElector.isLeader) finish();\n });\n }, leaderElector._options.fallbackInterval);\n\n leaderElector._invs.push(interval); // try when other leader dies\n\n\n var whenDeathListener = function whenDeathListener(msg) {\n if (msg.context === 'leader' && msg.action === 'death') {\n leaderElector.applyOnce().then(function () {\n if (leaderElector.isLeader) finish();\n });\n }\n };\n\n leaderElector._channel.addEventListener('internal', whenDeathListener);\n\n leaderElector._lstns.push(whenDeathListener);\n });\n}\n/**\n * sends and internal message over the broadcast-channel\n */\n\n\nfunction _sendMessage(leaderElector, action) {\n var msgJson = {\n context: 'leader',\n action: action,\n token: leaderElector.token\n };\n return leaderElector._channel.postInternal(msgJson);\n}\n\nfunction _beLeader(leaderElector) {\n leaderElector.isLeader = true;\n var unloadFn = unload.add(function () {\n return leaderElector.die();\n });\n\n leaderElector._unl.push(unloadFn);\n\n var isLeaderListener = function isLeaderListener(msg) {\n if (msg.context === 'leader' && msg.action === 'apply') {\n _sendMessage(leaderElector, 'tell');\n }\n };\n\n leaderElector._channel.addEventListener('internal', isLeaderListener);\n\n leaderElector._lstns.push(isLeaderListener);\n\n return _sendMessage(leaderElector, 'tell');\n}\n\nfunction fillOptionsWithDefaults(options, channel) {\n if (!options) options = {};\n options = JSON.parse(JSON.stringify(options));\n\n if (!options.fallbackInterval) {\n options.fallbackInterval = 3000;\n }\n\n if (!options.responseTime) {\n options.responseTime = channel.method.averageResponseTime(channel.options);\n }\n\n return options;\n}\n\nexport function createLeaderElection(channel, options) {\n if (channel._leaderElector) {\n throw new Error('BroadcastChannel already has a leader-elector');\n }\n\n options = fillOptionsWithDefaults(options, channel);\n var elector = new LeaderElection(channel, options);\n\n channel._befC.push(function () {\n return elector.die();\n });\n\n channel._leaderElector = elector;\n return elector;\n}"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/syncState.umd.min.js: -------------------------------------------------------------------------------- 1 | !function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.reduxStateSync=n():e.reduxStateSync=n()}(window,(function(){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=3)}([function(e,n,t){"use strict";(function(e){function r(e){return!(!e||"function"!=typeof e.then)}function o(e){return e||(e=0),new Promise((function(n){return setTimeout(n,e)}))}function i(e,n){return Math.floor(Math.random()*(n-e+1)+e)}function a(){return Math.random().toString(36).substring(2)}t.d(n,"b",(function(){return r})),t.d(n,"f",(function(){return o})),t.d(n,"d",(function(){return i})),t.d(n,"e",(function(){return a})),t.d(n,"c",(function(){return c})),t.d(n,"a",(function(){return l}));var s=0,u=0;function c(){var e=(new Date).getTime();return e===s?1e3*e+ ++u:(s=e,u=0,1e3*e)}var l="[object process]"===Object.prototype.toString.call(void 0!==e?e:0)}).call(this,t(4))},function(e,n){e.exports=!1},function(e,n){},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.initMessageListener=n.initStateWithPrevTab=n.withReduxStateSync=n.createReduxStateSync=n.createStateSyncMiddleware=n.WINDOW_STATE_SYNC_ID=n.INIT_MESSAGE_LISTENER=n.RECEIVE_INIT_STATE=n.SEND_INIT_STATE=n.GET_INIT_STATE=void 0,n.generateUuidForAction=h,n.isActionAllowed=p,n.isActionSynced=function(e){return!!e.$isSync},n.MessageListener=m;var r=t(6),o=0,i=n.GET_INIT_STATE="&_GET_INIT_STATE",a=n.SEND_INIT_STATE="&_SEND_INIT_STATE",s=n.RECEIVE_INIT_STATE="&_RECEIVE_INIT_STATE",u=n.INIT_MESSAGE_LISTENER="&_INIT_MESSAGE_LISTENER",c={channel:"redux_state_sync",predicate:null,blacklist:[],whitelist:[],broadcastChannelOption:void 0,prepareState:function(e){return e},receiveState:function(e,n){return n}};function l(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}function f(){return""+l()+l()+"-"+l()+"-"+l()+"-"+l()+"-"+l()+l()+l()}var d=n.WINDOW_STATE_SYNC_ID=f();function h(e){var n=e;return n.$uuid=f(),n.$wuid=d,n}function p(e){var n=e.predicate,t=e.blacklist,r=e.whitelist,o=function(){return!0};return n&&"function"==typeof n?o=n:Array.isArray(t)?o=function(e){return t.indexOf(e.type)<0}:Array.isArray(r)&&(o=function(e){return r.indexOf(e.type)>=0}),o}function m(e){var n=e.channel,t=e.dispatch,r=e.allowed,u=!1,c={};this.handleOnMessage=function(e){var n;e.$wuid!==d&&(e.type!==s&&e.$uuid&&e.$uuid!==o&&(e.type!==i||c[e.$wuid]?e.type!==a||c[e.$wuid]?r(e)&&(o=e.$uuid,t(Object.assign(e,{$isSync:!0}))):u||(u=!0,t((n=e.payload,{type:s,payload:n}))):(c[e.$wuid]=!0,t({type:a}))))},this.messageChannel=n,this.messageChannel.onmessage=this.handleOnMessage}n.createStateSyncMiddleware=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:c,n=p(e),t=new r.BroadcastChannel(e.channel,e.broadcastChannelOption),s=e.prepareState||c.prepareState,u=null;return function(e){var r=e.getState,c=e.dispatch;return function(e){return function(l){if(u||(u=new m({channel:t,dispatch:c,allowed:n})),l&&!l.$uuid){var f=h(l);o=f.$uuid;try{if(l.type===a)return r()&&(f.payload=s(r()),t.postMessage(f)),e(l);(n(f)||l.type===i)&&t.postMessage(f)}catch(e){console.error("Your browser doesn't support cross tab communication")}}return e(Object.assign(l,{$isSync:void 0!==l.$isSync&&l.$isSync}))}}}};var v=n.createReduxStateSync=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:c.receiveState;return function(t,r){var o=t;return r.type===s&&(o=n(t,r.payload)),e(o,r)}};n.withReduxStateSync=v,n.initStateWithPrevTab=function(e){(0,e.dispatch)({type:i})},n.initMessageListener=function(e){(0,e.dispatch)({type:u})}},function(e,n){var t,r,o=e.exports={};function i(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function s(e){if(t===setTimeout)return setTimeout(e,0);if((t===i||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(n){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:i}catch(e){t=i}try{r="function"==typeof clearTimeout?clearTimeout:a}catch(e){r=a}}();var u,c=[],l=!1,f=-1;function d(){l&&u&&(l=!1,u.length?c=u.concat(c):f=-1,c.length&&h())}function h(){if(!l){var e=s(d);l=!0;for(var n=c.length;n;){for(u=c,c=[];++f1)for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{},n=JSON.parse(JSON.stringify(e));return void 0===n.webWorkerSupport&&(n.webWorkerSupport=!0),n.idb||(n.idb={}),n.idb.ttl||(n.idb.ttl=45e3),n.idb.fallbackInterval||(n.idb.fallbackInterval=150),n.localstorage||(n.localstorage={}),n.localstorage.removeTimeout||(n.localstorage.removeTimeout=6e4),e.methods&&(n.methods=e.methods),n.node||(n.node={}),n.node.ttl||(n.node.ttl=12e4),void 0===n.node.useFastPath&&(n.node.useFastPath=!0),n}var u=r.c;function c(){if("undefined"!=typeof indexedDB)return indexedDB;if("undefined"!=typeof window){if(void 0!==window.mozIndexedDB)return window.mozIndexedDB;if(void 0!==window.webkitIndexedDB)return window.webkitIndexedDB;if(void 0!==window.msIndexedDB)return window.msIndexedDB}return!1}function l(e,n){return function(e,n){var t=(new Date).getTime()-n,r=e.transaction("messages").objectStore("messages"),o=[];return new Promise((function(e){r.openCursor().onsuccess=function(n){var r=n.target.result;if(r){var i=r.value;if(!(i.timee.lastCursorId&&(e.lastCursorId=n.id),n})).filter((function(n){return function(e,n){return e.uuid!==n.uuid&&(!n.eMIs.has(e.id)&&!(e.data.time0||e._addEL.internal.length>0}function M(e,n,t){e._addEL[n].push(t),function(e){if(!e._iL&&C(e)){var n=function(n){e._addEL[n.type].forEach((function(e){n.time>=e.time&&e.fn(n.data)}))},t=e.method.microSeconds();e._prepP?e._prepP.then((function(){e._iL=!0,e.method.onMessage(e._state,n,t)})):(e._iL=!0,e.method.onMessage(e._state,n,t))}}(e)}function O(e,n,t){e._addEL[n]=e._addEL[n].filter((function(e){return e!==t})),function(e){if(e._iL&&!C(e)){e._iL=!1;var n=e.method.microSeconds();e.method.onMessage(e._state,null,n)}}(e)}I._pubkey=!0,I.prototype={postMessage:function(e){if(this.closed)throw new Error("BroadcastChannel.postMessage(): Cannot post message after channel has closed");return P(this,"message",e)},postInternal:function(e){return P(this,"internal",e)},set onmessage(e){var n={time:this.method.microSeconds(),fn:e};O(this,"message",this._onML),e&&"function"==typeof e?(this._onML=n,M(this,"message",n)):this._onML=null},addEventListener:function(e,n){M(this,e,{time:this.method.microSeconds(),fn:n})},removeEventListener:function(e,n){O(this,e,this._addEL[e].find((function(e){return e.fn===n})))},close:function(){var e=this;if(!this.closed){this.closed=!0;var n=this._prepP?this._prepP:Promise.resolve();return this._onML=null,this._addEL.message=[],n.then((function(){return Promise.all(e._befC.map((function(e){return e()})))})).then((function(){return e.method.close(e._state)}))}},get type(){return this.method.type}};var A=t(1),N=t.n(A);var x={add:function(e){if("function"==typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope);else{if("function"!=typeof window.addEventListener)return;window.addEventListener("beforeunload",(function(){e()}),!0),window.addEventListener("unload",(function(){e()}),!0)}}},j=t(2),B=t.n(j),D=N.a?B.a:x,R=new Set,$=!1;function W(){var e=[];return R.forEach((function(n){e.push(n()),R.delete(n)})),Promise.all(e)}var G={add:function(e){if($||($=!0,D.add(W)),"function"!=typeof e)throw new Error("Listener is no function");return R.add(e),{remove:function(){return R.delete(e)},run:function(){return R.delete(e),e()}}},runAll:W,removeAll:function(){R.clear()},getSize:function(){return R.size}},F=function(e,n){this._channel=e,this._options=n,this.isLeader=!1,this.isDead=!1,this.token=Object(r.e)(),this._isApl=!1,this._reApply=!1,this._unl=[],this._lstns=[],this._invs=[]};function J(e,n){var t={context:"leader",action:n,token:e.token};return e._channel.postInternal(t)}function U(e,n){if(e._leaderElector)throw new Error("BroadcastChannel already has a leader-elector");n=function(e,n){return e||(e={}),(e=JSON.parse(JSON.stringify(e))).fallbackInterval||(e.fallbackInterval=3e3),e.responseTime||(e.responseTime=n.method.averageResponseTime(n.options)),e}(n,e);var t=new F(e,n);return e._befC.push((function(){return t.die()})),e._leaderElector=t,t}F.prototype={applyOnce:function(){var e=this;if(this.isLeader)return Promise.resolve(!1);if(this.isDead)return Promise.resolve(!1);if(this._isApl)return this._reApply=!0,Promise.resolve(!1);this._isApl=!0;var n=!1,t=[],o=function(r){"leader"===r.context&&r.token!=e.token&&(t.push(r),"apply"===r.action&&r.token>e.token&&(n=!0),"tell"===r.action&&(n=!0))};return this._channel.addEventListener("internal",o),J(this,"apply").then((function(){return Object(r.f)(e._options.responseTime)})).then((function(){return n?Promise.reject(new Error):J(e,"apply")})).then((function(){return Object(r.f)(e._options.responseTime)})).then((function(){return n?Promise.reject(new Error):J(e)})).then((function(){return function(e){e.isLeader=!0;var n=G.add((function(){return e.die()}));e._unl.push(n);var t=function(n){"leader"===n.context&&"apply"===n.action&&J(e,"tell")};return e._channel.addEventListener("internal",t),e._lstns.push(t),J(e,"tell")}(e)})).then((function(){return!0})).catch((function(){return!1})).then((function(n){return e._channel.removeEventListener("internal",o),e._isApl=!1,!n&&e._reApply?(e._reApply=!1,e.applyOnce()):n}))},awaitLeadership:function(){var e;return this._aLP||(this._aLP=(e=this).isLeader?Promise.resolve():new Promise((function(n){var t=!1,r=function(){t||(t=!0,clearInterval(o),e._channel.removeEventListener("internal",i),n(!0))};e.applyOnce().then((function(){e.isLeader&&r()}));var o=setInterval((function(){e.applyOnce().then((function(){e.isLeader&&r()}))}),e._options.fallbackInterval);e._invs.push(o);var i=function(n){"leader"===n.context&&"death"===n.action&&e.applyOnce().then((function(){e.isLeader&&r()}))};e._channel.addEventListener("internal",i),e._lstns.push(i)}))),this._aLP},die:function(){var e=this;if(!this.isDead)return this.isDead=!0,this._lstns.forEach((function(n){return e._channel.removeEventListener("internal",n)})),this._invs.forEach((function(e){return clearInterval(e)})),this._unl.forEach((function(e){e.remove()})),J(this,"death")}}}])})); 2 | //# sourceMappingURL=syncState.umd.min.js.map -------------------------------------------------------------------------------- /example/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | yarn-error.log 23 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | Example For Redux-State-Sync 2 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.13.0", 7 | "react-dom": "^16.13.0", 8 | "react-redux": "^7.2.0", 9 | "react-scripts": "^3.4.0", 10 | "redux": "^4.0.5" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | }, 18 | "browserslist": { 19 | "production": [ 20 | ">0.2%", 21 | "not dead", 22 | "not op_mini all" 23 | ], 24 | "development": [ 25 | "last 1 chrome version", 26 | "last 1 firefox version", 27 | "last 1 safari version" 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aohua/redux-state-sync/afb4fb7b3bb5b8d51331c0be382f028df43ec81e/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /example/src/actions/index.js: -------------------------------------------------------------------------------- 1 | export const addTodo = text => ({ 2 | type: 'ADD_TODO', 3 | id: Date.now(), 4 | text, 5 | }); 6 | export const setVisibilityFilter = filter => ({ 7 | type: 'SET_VISIBILITY_FILTER', 8 | filter, 9 | }); 10 | export const toggleTodo = id => ({ 11 | type: 'TOGGLE_TODO', 12 | id, 13 | }); 14 | 15 | export const todoOnChange = todo => ({ 16 | type: 'TODO_ON_CHANGE', 17 | todo, 18 | }); 19 | export const VisibilityFilters = { 20 | SHOW_ALL: 'SHOW_ALL', 21 | SHOW_COMPLETED: 'SHOW_COMPLETED', 22 | SHOW_ACTIVE: 'SHOW_ACTIVE', 23 | }; 24 | -------------------------------------------------------------------------------- /example/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Footer from './Footer' 3 | import AddTodo from '../containers/AddTodo' 4 | import VisibleTodoList from '../containers/VisibleTodoList' 5 |   6 | const App = () => ( 7 |
8 | 9 | 10 |
11 |
12 | ) 13 |   14 | export default App 15 | -------------------------------------------------------------------------------- /example/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import FilterLink from '../containers/FilterLink' 3 | import { VisibilityFilters } from '../actions' 4 |   5 | const Footer = () => ( 6 |
7 | Show: 8 | 9 | All 10 | 11 | 12 | Active 13 | 14 | 15 | Completed 16 | 17 |
18 | ) 19 |   20 | export default Footer 21 | -------------------------------------------------------------------------------- /example/src/components/Link.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 |   4 | const Link = ({ active, children, onClick }) => ( 5 | 14 | ) 15 |   16 | Link.propTypes = { 17 | active: PropTypes.bool.isRequired, 18 | children: PropTypes.node.isRequired, 19 | onClick: PropTypes.func.isRequired 20 | } 21 |   22 | export default Link 23 | -------------------------------------------------------------------------------- /example/src/components/Todo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 |   4 | const Todo = ({ onClick, completed, text }) => ( 5 |
  • 11 | {text} 12 |
    • 13 | ) 14 |   15 | Todo.propTypes = { 16 | onClick: PropTypes.func.isRequired, 17 | completed: PropTypes.bool.isRequired, 18 | text: PropTypes.string.isRequired 19 | } 20 |   21 | export default Todo 22 | -------------------------------------------------------------------------------- /example/src/components/TodoList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Todo from './Todo' 4 |   5 | const TodoList = ({ todos, toggleTodo }) => ( 6 |
      7 | {todos.map(todo => 8 | toggleTodo(todo.id)} 12 | /> 13 | )} 14 |
    15 | ) 16 |   17 | TodoList.propTypes = { 18 | todos: PropTypes.arrayOf( 19 | PropTypes.shape({ 20 | id: PropTypes.number.isRequired, 21 | completed: PropTypes.bool.isRequired, 22 | text: PropTypes.string.isRequired 23 | }).isRequired 24 | ).isRequired, 25 | toggleTodo: PropTypes.func.isRequired 26 | } 27 |   28 | export default TodoList 29 | -------------------------------------------------------------------------------- /example/src/containers/AddTodo.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-shadow */ 2 | /* eslint-disable react/prop-types */ 3 | /* eslint-disable react/jsx-filename-extension */ 4 | import React, { Component } from 'react'; 5 | import { connect } from 'react-redux'; 6 | import { addTodo, todoOnChange } from '../actions'; 7 | 8 | class AddTodo extends Component { 9 | render() { 10 | const { todoOnChange, addTodo, todo } = this.props; 11 | return ( 12 |
    13 |
    { 15 | e.preventDefault(); 16 | if (!todo.trim()) { 17 | return; 18 | } 19 | addTodo(todo); 20 | todoOnChange(''); 21 | }} 22 | > 23 | { 25 | todoOnChange(e.target.value); 26 | }} 27 | value={todo} 28 | /> 29 | 30 |
    31 |
    32 | ); 33 | } 34 | } 35 | 36 | const mapStateToProps = state => ({ 37 | todo: state.todo, 38 | }); 39 | const mapDispatchToProps = dispatch => ({ 40 | addTodo: todo => dispatch(addTodo(todo)), 41 | todoOnChange: todo => dispatch(todoOnChange(todo)), 42 | }); 43 | export default connect(mapStateToProps, mapDispatchToProps)(AddTodo); 44 | -------------------------------------------------------------------------------- /example/src/containers/FilterLink.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { setVisibilityFilter } from '../actions'; 3 | import Link from '../components/Link'; 4 | 5 | const mapStateToProps = (state, ownProps) => ({ 6 | active: ownProps.filter === state.visibilityFilter, 7 | }); 8 | const mapDispatchToProps = (dispatch, ownProps) => ({ 9 | onClick: () => dispatch(setVisibilityFilter(ownProps.filter)), 10 | }); 11 | export default connect(mapStateToProps, mapDispatchToProps)(Link); 12 | -------------------------------------------------------------------------------- /example/src/containers/VisibleTodoList.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { toggleTodo } from '../actions'; 3 | import TodoList from '../components/TodoList'; 4 | 5 | const getVisibleTodos = (todos, filter) => { 6 | switch (filter) { 7 | case 'SHOW_COMPLETED': 8 | return todos.filter(t => t.completed); 9 | case 'SHOW_ACTIVE': 10 | return todos.filter(t => !t.completed); 11 | case 'SHOW_ALL': 12 | default: 13 | return todos; 14 | } 15 | }; 16 | const mapStateToProps = state => ({ 17 | todos: getVisibleTodos(state.todos, state.visibilityFilter), 18 | }); 19 | const mapDispatchToProps = dispatch => ({ 20 | toggleTodo: id => dispatch(toggleTodo(id)), 21 | }); 22 | export default connect(mapStateToProps, mapDispatchToProps)(TodoList); 23 | -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | /* eslint-disable react/jsx-filename-extension */ 3 | import React from 'react'; 4 | import { render } from 'react-dom'; 5 | import { Provider } from 'react-redux'; 6 | import { createStore, applyMiddleware } from 'redux'; 7 | import rootReducer from './reducers'; 8 | import App from './components/App'; 9 | import registerServiceWorker from './registerServiceWorker'; 10 | import { createStateSyncMiddleware, initStateWithPrevTab } from './lib/syncState'; 11 | 12 | const middlewares = [ 13 | // TOGGLE_TODO will not be triggered 14 | createStateSyncMiddleware({ 15 | predicate: action => action.type !== 'TOGGLE_TODO', 16 | }), 17 | ]; 18 | const store = createStore(rootReducer, {}, applyMiddleware(...middlewares)); 19 | 20 | initStateWithPrevTab(store); 21 | // initMessageListener(store); 22 | 23 | render( 24 | 25 | 26 | , 27 | document.getElementById('root'), 28 | ); 29 | 30 | registerServiceWorker(); 31 | -------------------------------------------------------------------------------- /example/src/lib/syncState.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Object.defineProperty(exports, '__esModule', { 4 | value: true, 5 | }); 6 | exports.initMessageListener = exports.initStateWithPrevTab = exports.withReduxStateSync = exports.createReduxStateSync = exports.createStateSyncMiddleware = undefined; 7 | exports.generateUuidForAction = generateUuidForAction; 8 | exports.isActionAllowed = isActionAllowed; 9 | exports.isActionSynced = isActionSynced; 10 | exports.MessageListener = MessageListener; 11 | 12 | const _broadcastChannel = require('broadcast-channel'); 13 | 14 | let lastUuid = 0; 15 | const GET_INIT_STATE = '&_GET_INIT_STATE'; 16 | const SEND_INIT_STATE = '&_SEND_INIT_STATE'; 17 | const RECEIVE_INIT_STATE = '&_RECEIVE_INIT_STATE'; 18 | const INIT_MESSAGE_LISTENER = '&_INIT_MESSAGE_LISTENER'; 19 | 20 | const defaultConfig = { 21 | channel: 'redux_state_sync', 22 | predicate: null, 23 | blacklist: [], 24 | whitelist: [], 25 | broadcastChannelOption: null, 26 | prepareState: function prepareState(state) { 27 | return state; 28 | }, 29 | }; 30 | 31 | const getIniteState = function getIniteState() { 32 | return { type: GET_INIT_STATE }; 33 | }; 34 | const sendIniteState = function sendIniteState() { 35 | return { type: SEND_INIT_STATE }; 36 | }; 37 | const receiveIniteState = function receiveIniteState(state) { 38 | return { type: RECEIVE_INIT_STATE, payload: state }; 39 | }; 40 | const initListener = function initListener() { 41 | return { type: INIT_MESSAGE_LISTENER }; 42 | }; 43 | 44 | function s4() { 45 | return Math.floor((1 + Math.random()) * 0x10000) 46 | .toString(16) 47 | .substring(1); 48 | } 49 | 50 | function guid() { 51 | return `${ s4() }${s4() }-${ s4() }-${ s4() }-${ s4() }-${ s4() }${s4() }${s4()}`; 52 | } 53 | 54 | // generate current window unique id 55 | const WINDOW_STATE_SYNC_ID = guid(); 56 | // export for test 57 | function generateUuidForAction(action) { 58 | const stampedAction = action; 59 | stampedAction.$uuid = guid(); 60 | stampedAction.$wuid = WINDOW_STATE_SYNC_ID; 61 | return stampedAction; 62 | } 63 | // export for test 64 | function isActionAllowed(_ref) { 65 | const {predicate} = _ref; 66 | const {blacklist} = _ref; 67 | const {whitelist} = _ref; 68 | 69 | let allowed = function allowed() { 70 | return true; 71 | }; 72 | 73 | if (predicate && typeof predicate === 'function') { 74 | allowed = predicate; 75 | } else if (Array.isArray(blacklist)) { 76 | allowed = function allowed(action) { 77 | return blacklist.indexOf(action.type) < 0; 78 | }; 79 | } else if (Array.isArray(whitelist)) { 80 | allowed = function allowed(action) { 81 | return whitelist.indexOf(action.type) >= 0; 82 | }; 83 | } 84 | return allowed; 85 | } 86 | // export for test 87 | function isActionSynced(action) { 88 | return !!action.$isSync; 89 | } 90 | // export for test 91 | function MessageListener(_ref2) { 92 | const {channel} = _ref2; 93 | const {dispatch} = _ref2; 94 | const {allowed} = _ref2; 95 | 96 | let isSynced = false; 97 | const tabs = {}; 98 | this.handleOnMessage = function(stampedAction) { 99 | // Ignore if this action is triggered by this window 100 | if (stampedAction.$wuid === WINDOW_STATE_SYNC_ID) { 101 | return; 102 | } 103 | // IE bug https://stackoverflow.com/questions/18265556/why-does-internet-explorer-fire-the-window-storage-event-on-the-window-that-st 104 | if (stampedAction.type === RECEIVE_INIT_STATE) { 105 | return; 106 | } 107 | // ignore other values that saved to localstorage. 108 | if (stampedAction.$uuid && stampedAction.$uuid !== lastUuid) { 109 | if (stampedAction.type === GET_INIT_STATE && !tabs[stampedAction.$wuid]) { 110 | tabs[stampedAction.$wuid] = true; 111 | dispatch(sendIniteState()); 112 | } else if (stampedAction.type === SEND_INIT_STATE && !tabs[stampedAction.$wuid]) { 113 | if (!isSynced) { 114 | isSynced = true; 115 | dispatch(receiveIniteState(stampedAction.payload)); 116 | } 117 | } else if (allowed(stampedAction)) { 118 | lastUuid = stampedAction.$uuid; 119 | dispatch( 120 | Object.assign(stampedAction, { 121 | $isSync: true, 122 | }), 123 | ); 124 | } 125 | } 126 | }; 127 | this.messageChannel = channel; 128 | this.messageChannel.onmessage = this.handleOnMessage; 129 | } 130 | 131 | const createStateSyncMiddleware = (exports.createStateSyncMiddleware = function createStateSyncMiddleware() { 132 | const config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig; 133 | 134 | const allowed = isActionAllowed(config); 135 | const channel = new _broadcastChannel.BroadcastChannel(config.channel, config.broadcastChannelOption); 136 | const prepareState = config.prepareState || defaultConfig.prepareState; 137 | let messageListener = null; 138 | 139 | return function(_ref3) { 140 | const {getState} = _ref3; 141 | const {dispatch} = _ref3; 142 | return function(next) { 143 | return function(action) { 144 | // create message receiver 145 | if (!messageListener) { 146 | messageListener = new MessageListener({ channel, dispatch, allowed }); 147 | } 148 | // post messages 149 | if (action && !action.$uuid) { 150 | const stampedAction = generateUuidForAction(action); 151 | lastUuid = stampedAction.$uuid; 152 | try { 153 | if (action.type === SEND_INIT_STATE) { 154 | if (getState()) { 155 | stampedAction.payload = prepareState(getState()); 156 | channel.postMessage(stampedAction); 157 | } 158 | return next(action); 159 | } 160 | if (allowed(stampedAction) || action.type === GET_INIT_STATE) { 161 | channel.postMessage(stampedAction); 162 | } 163 | } catch (e) { 164 | console.error("Your browser doesn't support cross tab communication"); 165 | } 166 | } 167 | return next( 168 | Object.assign(action, { 169 | $isSync: typeof action.$isSync === 'undefined' ? false : action.$isSync, 170 | }), 171 | ); 172 | }; 173 | }; 174 | }; 175 | }); 176 | 177 | // eslint-disable-next-line max-len 178 | const createReduxStateSync = (exports.createReduxStateSync = function createReduxStateSync(appReducer) { 179 | const prepareState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultConfig.prepareState; 180 | return function(state, action) { 181 | let initState = state; 182 | if (action.type === RECEIVE_INIT_STATE) { 183 | initState = prepareState(action.payload); 184 | } 185 | return appReducer(initState, action); 186 | }; 187 | }); 188 | 189 | // init state with other tab's state 190 | const withReduxStateSync = (exports.withReduxStateSync = createReduxStateSync); 191 | 192 | const initStateWithPrevTab = (exports.initStateWithPrevTab = function initStateWithPrevTab(_ref4) { 193 | const {dispatch} = _ref4; 194 | 195 | dispatch(getIniteState()); 196 | }); 197 | 198 | /* 199 | if don't dispath any action, the store.dispath will not be available for message listener. 200 | therefor need to trigger an empty action to init the messageListener. 201 | 202 | however, if already using initStateWithPrevTab, this function will be redundant 203 | */ 204 | const initMessageListener = (exports.initMessageListener = function initMessageListener(_ref5) { 205 | const {dispatch} = _ref5; 206 | 207 | dispatch(initListener()); 208 | }); 209 | -------------------------------------------------------------------------------- /example/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import todo from './todo'; 3 | import todos from './todos'; 4 | import visibilityFilter from './visibilityFilter'; 5 | import { withReduxStateSync } from '../lib/syncState'; 6 | 7 | const appReducer = combineReducers({ 8 | todo, 9 | todos, 10 | visibilityFilter, 11 | }); 12 | 13 | export default withReduxStateSync(appReducer); 14 | -------------------------------------------------------------------------------- /example/src/reducers/todo.js: -------------------------------------------------------------------------------- 1 | const todo = (state = '', action) => { 2 | switch (action.type) { 3 | case 'TODO_ON_CHANGE': 4 | return action.todo; 5 | default: 6 | return state; 7 | } 8 | }; 9 | export default todo; 10 | -------------------------------------------------------------------------------- /example/src/reducers/todos.js: -------------------------------------------------------------------------------- 1 | const todos = (state = [], action) => { 2 | switch (action.type) { 3 | case 'ADD_TODO': 4 | return [ 5 | ...state, 6 | { 7 | id: action.id, 8 | text: action.text, 9 | completed: false, 10 | }, 11 | ]; 12 | case 'TOGGLE_TODO': 13 | return state.map(todo => (todo.id === action.id ? { ...todo, completed: !todo.completed } : todo)); 14 | default: 15 | return state; 16 | } 17 | }; 18 | export default todos; 19 | -------------------------------------------------------------------------------- /example/src/reducers/visibilityFilter.js: -------------------------------------------------------------------------------- 1 | const visibilityFilter = (state = 'SHOW_ALL', action) => { 2 | switch (action.type) { 3 | case 'SET_VISIBILITY_FILTER': 4 | return action.filter; 5 | default: 6 | return state; 7 | } 8 | }; 9 | export default visibilityFilter; 10 | -------------------------------------------------------------------------------- /example/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /example_immutable/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example_immutable/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | yarn-error.log 23 | -------------------------------------------------------------------------------- /example_immutable/README.md: -------------------------------------------------------------------------------- 1 | Example For Redux-State-Sync 2 | -------------------------------------------------------------------------------- /example_immutable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "eslint": "^6.8.0", 7 | "immutable": "^4.0.0-rc.12", 8 | "prop-types": "^15.7.2", 9 | "react": "^16.13.0", 10 | "react-dom": "^16.13.0", 11 | "react-redux": "^7.2.0", 12 | "react-scripts": "^3.4.0", 13 | "redux": "^4.0.5", 14 | "redux-immutable": "^4.0.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | }, 34 | "devDependencies": {} 35 | } 36 | -------------------------------------------------------------------------------- /example_immutable/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aohua/redux-state-sync/afb4fb7b3bb5b8d51331c0be382f028df43ec81e/example_immutable/public/favicon.ico -------------------------------------------------------------------------------- /example_immutable/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /example_immutable/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example_immutable/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /example_immutable/src/actions/index.js: -------------------------------------------------------------------------------- 1 | export const addTodo = text => ({ 2 | type: 'ADD_TODO', 3 | id: Date.now(), 4 | text, 5 | }); 6 | 7 | export const setVisibilityFilter = filter => ({ 8 | type: 'SET_VISIBILITY_FILTER', 9 | filter, 10 | }); 11 | 12 | export const toggleTodo = id => ({ 13 | type: 'TOGGLE_TODO', 14 | id, 15 | }); 16 | 17 | export const todoOnChange = todo => ({ 18 | type: 'TODO_ON_CHANGE', 19 | todo, 20 | }); 21 | 22 | export const VisibilityFilters = { 23 | SHOW_ALL: 'SHOW_ALL', 24 | SHOW_COMPLETED: 'SHOW_COMPLETED', 25 | SHOW_ACTIVE: 'SHOW_ACTIVE', 26 | }; 27 | -------------------------------------------------------------------------------- /example_immutable/src/components/App.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | import React from 'react'; 3 | import Footer from './Footer'; 4 | import AddTodo from '../containers/AddTodo'; 5 | import VisibleTodoList from '../containers/VisibleTodoList'; 6 | 7 | const App = () => ( 8 |
    9 | 10 | 11 |
    12 |
    13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /example_immutable/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | import React from 'react'; 3 | import FilterLink from '../containers/FilterLink'; 4 | import { VisibilityFilters } from '../actions'; 5 | 6 | const Footer = () => ( 7 |
    8 | Show: 9 | All 10 | Active 11 | Completed 12 |
    13 | ); 14 | 15 | export default Footer; 16 | -------------------------------------------------------------------------------- /example_immutable/src/components/Link.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | /* eslint-disable react/button-has-type */ 3 | import React from 'react'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const Link = ({ active, children, onClick }) => ( 7 | 16 | ); 17 | 18 | Link.propTypes = { 19 | active: PropTypes.bool.isRequired, 20 | children: PropTypes.node.isRequired, 21 | onClick: PropTypes.func.isRequired, 22 | }; 23 | 24 | export default Link; 25 | -------------------------------------------------------------------------------- /example_immutable/src/components/Todo.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ 3 | /* eslint-disable jsx-a11y/click-events-have-key-events */ 4 | import React from 'react'; 5 | import PropTypes from 'prop-types'; 6 | 7 | const Todo = ({ onClick, completed, text }) => ( 8 |
  • 14 | {text} 15 |
    • 16 | ); 17 | 18 | Todo.propTypes = { 19 | onClick: PropTypes.func.isRequired, 20 | completed: PropTypes.bool.isRequired, 21 | text: PropTypes.string.isRequired, 22 | }; 23 | 24 | export default Todo; 25 | -------------------------------------------------------------------------------- /example_immutable/src/components/TodoList.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/forbid-prop-types */ 2 | /* eslint-disable react/jsx-props-no-spreading */ 3 | /* eslint-disable react/jsx-filename-extension */ 4 | import React from 'react'; 5 | import PropTypes from 'prop-types'; 6 | import Todo from './Todo'; 7 | 8 | const TodoList = ({ todos, toggleTodo }) => ( 9 |
      10 | {todos.map(todo => ( 11 | toggleTodo(todo.get('id'))} 16 | /> 17 | ))} 18 |
    19 | ); 20 | 21 | TodoList.propTypes = { 22 | todos: PropTypes.object.isRequired, 23 | toggleTodo: PropTypes.func.isRequired, 24 | }; 25 | 26 | export default TodoList; 27 | -------------------------------------------------------------------------------- /example_immutable/src/containers/AddTodo.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-shadow */ 2 | /* eslint-disable react/prop-types */ 3 | /* eslint-disable react/jsx-filename-extension */ 4 | import React, { Component } from 'react'; 5 | import { connect } from 'react-redux'; 6 | import { addTodo, todoOnChange } from '../actions'; 7 | 8 | class AddTodo extends Component { 9 | render() { 10 | const { todoOnChange, addTodo, todo } = this.props; 11 | return ( 12 |
    13 |
    { 15 | e.preventDefault(); 16 | if (!todo.trim()) { 17 | return; 18 | } 19 | addTodo(todo); 20 | todoOnChange(''); 21 | }} 22 | > 23 | { 25 | todoOnChange(e.target.value); 26 | }} 27 | value={todo} 28 | /> 29 | 30 |
    31 |
    32 | ); 33 | } 34 | } 35 | 36 | const mapStateToProps = state => ({ 37 | todo: state.get('todo'), 38 | }); 39 | 40 | const mapDispatchToProps = dispatch => ({ 41 | addTodo: todo => dispatch(addTodo(todo)), 42 | todoOnChange: todo => dispatch(todoOnChange(todo)), 43 | }); 44 | 45 | export default connect(mapStateToProps, mapDispatchToProps)(AddTodo); 46 | -------------------------------------------------------------------------------- /example_immutable/src/containers/FilterLink.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { setVisibilityFilter } from '../actions'; 3 | import Link from '../components/Link'; 4 | 5 | const mapStateToProps = (state, ownProps) => ({ 6 | active: ownProps.filter === state.get('visibilityFilter'), 7 | }); 8 | 9 | const mapDispatchToProps = (dispatch, ownProps) => ({ 10 | onClick: () => dispatch(setVisibilityFilter(ownProps.filter)), 11 | }); 12 | 13 | export default connect(mapStateToProps, mapDispatchToProps)(Link); 14 | -------------------------------------------------------------------------------- /example_immutable/src/containers/VisibleTodoList.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { toggleTodo } from '../actions'; 3 | import TodoList from '../components/TodoList'; 4 | 5 | const getVisibleTodos = (todos, filter) => { 6 | switch (filter) { 7 | case 'SHOW_COMPLETED': 8 | return todos.filter(t => t.get('completed')); 9 | case 'SHOW_ACTIVE': 10 | return todos.filter(t => !t.get('completed')); 11 | case 'SHOW_ALL': 12 | default: 13 | return todos; 14 | } 15 | }; 16 | 17 | const mapStateToProps = state => ({ 18 | todos: getVisibleTodos(state.get('todos'), state.get('visibilityFilter')), 19 | }); 20 | 21 | const mapDispatchToProps = dispatch => ({ 22 | toggleTodo: id => dispatch(toggleTodo(id)), 23 | }); 24 | 25 | export default connect(mapStateToProps, mapDispatchToProps)(TodoList); 26 | -------------------------------------------------------------------------------- /example_immutable/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example_immutable/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Immutable from 'immutable'; 3 | import { render } from 'react-dom'; 4 | import { Provider } from 'react-redux'; 5 | import { createStore, applyMiddleware } from 'redux'; 6 | import rootReducer from './reducers'; 7 | import App from './components/App'; 8 | import registerServiceWorker from './registerServiceWorker'; 9 | import { 10 | createStateSyncMiddleware, 11 | // initMessageListener, 12 | initStateWithPrevTab, 13 | } from './lib/syncState'; 14 | 15 | const initialState = Immutable.Map(); 16 | 17 | const middlewares = [ 18 | // TOGGLE_TODO will not be triggered 19 | createStateSyncMiddleware({ 20 | prepareState: state => state.toJS(), 21 | // predicate: (action) => action.type !== 'TOGGLE_TODO', 22 | }), 23 | ]; 24 | 25 | const store = createStore(rootReducer, initialState, applyMiddleware(...middlewares)); 26 | // initMessageListener(store); 27 | initStateWithPrevTab(store); 28 | render( 29 | 30 | 31 | , 32 | // eslint-disable-next-line no-undef 33 | document.getElementById('root'), 34 | ); 35 | 36 | registerServiceWorker(); 37 | -------------------------------------------------------------------------------- /example_immutable/src/lib/syncState.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Object.defineProperty(exports, '__esModule', { 4 | value: true, 5 | }); 6 | exports.initMessageListener = exports.initStateWithPrevTab = exports.withReduxStateSync = exports.createReduxStateSync = exports.createStateSyncMiddleware = undefined; 7 | exports.generateUuidForAction = generateUuidForAction; 8 | exports.isActionAllowed = isActionAllowed; 9 | exports.isActionSynced = isActionSynced; 10 | exports.MessageListener = MessageListener; 11 | 12 | const _broadcastChannel = require('broadcast-channel'); 13 | 14 | let lastUuid = 0; 15 | const GET_INIT_STATE = '&_GET_INIT_STATE'; 16 | const SEND_INIT_STATE = '&_SEND_INIT_STATE'; 17 | const RECEIVE_INIT_STATE = '&_RECEIVE_INIT_STATE'; 18 | const INIT_MESSAGE_LISTENER = '&_INIT_MESSAGE_LISTENER'; 19 | 20 | const defaultConfig = { 21 | channel: 'redux_state_sync', 22 | predicate: null, 23 | blacklist: [], 24 | whitelist: [], 25 | broadcastChannelOption: null, 26 | prepareState: function prepareState(state) { 27 | return state; 28 | }, 29 | }; 30 | 31 | const getIniteState = function getIniteState() { 32 | return { type: GET_INIT_STATE }; 33 | }; 34 | const sendIniteState = function sendIniteState() { 35 | return { type: SEND_INIT_STATE }; 36 | }; 37 | const receiveIniteState = function receiveIniteState(state) { 38 | return { type: RECEIVE_INIT_STATE, payload: state }; 39 | }; 40 | const initListener = function initListener() { 41 | return { type: INIT_MESSAGE_LISTENER }; 42 | }; 43 | 44 | function s4() { 45 | return Math.floor((1 + Math.random()) * 0x10000) 46 | .toString(16) 47 | .substring(1); 48 | } 49 | 50 | function guid() { 51 | return `${ s4() }${s4() }-${ s4() }-${ s4() }-${ s4() }-${ s4() }${s4() }${s4()}`; 52 | } 53 | 54 | // generate current window unique id 55 | const WINDOW_STATE_SYNC_ID = guid(); 56 | // export for test 57 | function generateUuidForAction(action) { 58 | const stampedAction = action; 59 | stampedAction.$uuid = guid(); 60 | stampedAction.$wuid = WINDOW_STATE_SYNC_ID; 61 | return stampedAction; 62 | } 63 | // export for test 64 | function isActionAllowed(_ref) { 65 | const {predicate} = _ref; 66 | const {blacklist} = _ref; 67 | const {whitelist} = _ref; 68 | 69 | let allowed = function allowed() { 70 | return true; 71 | }; 72 | 73 | if (predicate && typeof predicate === 'function') { 74 | allowed = predicate; 75 | } else if (Array.isArray(blacklist)) { 76 | allowed = function allowed(action) { 77 | return blacklist.indexOf(action.type) < 0; 78 | }; 79 | } else if (Array.isArray(whitelist)) { 80 | allowed = function allowed(action) { 81 | return whitelist.indexOf(action.type) >= 0; 82 | }; 83 | } 84 | return allowed; 85 | } 86 | // export for test 87 | function isActionSynced(action) { 88 | return !!action.$isSync; 89 | } 90 | // export for test 91 | function MessageListener(_ref2) { 92 | const {channel} = _ref2; 93 | const {dispatch} = _ref2; 94 | const {allowed} = _ref2; 95 | 96 | let isSynced = false; 97 | const tabs = {}; 98 | this.handleOnMessage = function(stampedAction) { 99 | // Ignore if this action is triggered by this window 100 | if (stampedAction.$wuid === WINDOW_STATE_SYNC_ID) { 101 | return; 102 | } 103 | // IE bug https://stackoverflow.com/questions/18265556/why-does-internet-explorer-fire-the-window-storage-event-on-the-window-that-st 104 | if (stampedAction.type === RECEIVE_INIT_STATE) { 105 | return; 106 | } 107 | // ignore other values that saved to localstorage. 108 | if (stampedAction.$uuid && stampedAction.$uuid !== lastUuid) { 109 | if (stampedAction.type === GET_INIT_STATE && !tabs[stampedAction.$wuid]) { 110 | tabs[stampedAction.$wuid] = true; 111 | dispatch(sendIniteState()); 112 | } else if (stampedAction.type === SEND_INIT_STATE && !tabs[stampedAction.$wuid]) { 113 | if (!isSynced) { 114 | isSynced = true; 115 | dispatch(receiveIniteState(stampedAction.payload)); 116 | } 117 | } else if (allowed(stampedAction)) { 118 | lastUuid = stampedAction.$uuid; 119 | dispatch( 120 | Object.assign(stampedAction, { 121 | $isSync: true, 122 | }), 123 | ); 124 | } 125 | } 126 | }; 127 | this.messageChannel = channel; 128 | this.messageChannel.onmessage = this.handleOnMessage; 129 | } 130 | 131 | const createStateSyncMiddleware = (exports.createStateSyncMiddleware = function createStateSyncMiddleware() { 132 | const config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig; 133 | 134 | const allowed = isActionAllowed(config); 135 | const channel = new _broadcastChannel.BroadcastChannel(config.channel, config.broadcastChannelOption); 136 | const prepareState = config.prepareState || defaultConfig.prepareState; 137 | let messageListener = null; 138 | 139 | return function(_ref3) { 140 | const {getState} = _ref3; 141 | const {dispatch} = _ref3; 142 | return function(next) { 143 | return function(action) { 144 | // create message receiver 145 | if (!messageListener) { 146 | messageListener = new MessageListener({ channel, dispatch, allowed }); 147 | } 148 | // post messages 149 | if (action && !action.$uuid) { 150 | const stampedAction = generateUuidForAction(action); 151 | lastUuid = stampedAction.$uuid; 152 | try { 153 | if (action.type === SEND_INIT_STATE) { 154 | if (getState()) { 155 | stampedAction.payload = prepareState(getState()); 156 | channel.postMessage(stampedAction); 157 | } 158 | return next(action); 159 | } 160 | if (allowed(stampedAction) || action.type === GET_INIT_STATE) { 161 | channel.postMessage(stampedAction); 162 | } 163 | } catch (e) { 164 | console.error("Your browser doesn't support cross tab communication"); 165 | } 166 | } 167 | return next( 168 | Object.assign(action, { 169 | $isSync: typeof action.$isSync === 'undefined' ? false : action.$isSync, 170 | }), 171 | ); 172 | }; 173 | }; 174 | }; 175 | }); 176 | 177 | // eslint-disable-next-line max-len 178 | const createReduxStateSync = (exports.createReduxStateSync = function createReduxStateSync(appReducer) { 179 | const prepareState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultConfig.prepareState; 180 | return function(state, action) { 181 | let initState = state; 182 | if (action.type === RECEIVE_INIT_STATE) { 183 | initState = prepareState(action.payload); 184 | } 185 | return appReducer(initState, action); 186 | }; 187 | }); 188 | 189 | // init state with other tab's state 190 | const withReduxStateSync = (exports.withReduxStateSync = createReduxStateSync); 191 | 192 | const initStateWithPrevTab = (exports.initStateWithPrevTab = function initStateWithPrevTab(_ref4) { 193 | const {dispatch} = _ref4; 194 | 195 | dispatch(getIniteState()); 196 | }); 197 | 198 | /* 199 | if don't dispath any action, the store.dispath will not be available for message listener. 200 | therefor need to trigger an empty action to init the messageListener. 201 | 202 | however, if already using initStateWithPrevTab, this function will be redundant 203 | */ 204 | const initMessageListener = (exports.initMessageListener = function initMessageListener(_ref5) { 205 | const {dispatch} = _ref5; 206 | 207 | dispatch(initListener()); 208 | }); 209 | -------------------------------------------------------------------------------- /example_immutable/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example_immutable/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux-immutable'; 2 | import Immutable from 'immutable'; 3 | import todo from './todo'; 4 | import todos from './todos'; 5 | import visibilityFilter from './visibilityFilter'; 6 | import { withReduxStateSync } from '../lib/syncState'; 7 | 8 | const appReducer = combineReducers({ 9 | todo, 10 | todos, 11 | visibilityFilter, 12 | }); 13 | 14 | export default withReduxStateSync(appReducer, state => Immutable.fromJS(state)); 15 | -------------------------------------------------------------------------------- /example_immutable/src/reducers/todo.js: -------------------------------------------------------------------------------- 1 | const todo = (state = '', action) => { 2 | switch (action.type) { 3 | case 'TODO_ON_CHANGE': 4 | return action.todo; 5 | default: 6 | return state; 7 | } 8 | }; 9 | 10 | export default todo; 11 | -------------------------------------------------------------------------------- /example_immutable/src/reducers/todos.js: -------------------------------------------------------------------------------- 1 | import { List, Map } from 'immutable'; 2 | 3 | const todos = (state = List(), action) => { 4 | switch (action.type) { 5 | case 'ADD_TODO': 6 | return state.push( 7 | Map({ 8 | id: action.id, 9 | text: action.text, 10 | completed: false, 11 | }), 12 | ); 13 | case 'TOGGLE_TODO': 14 | return state.map(todo => 15 | todo.get('id') === action.id ? todo.set('completed', !todo.get('completed')) : todo, 16 | ); 17 | default: 18 | return state; 19 | } 20 | }; 21 | 22 | export default todos; 23 | -------------------------------------------------------------------------------- /example_immutable/src/reducers/visibilityFilter.js: -------------------------------------------------------------------------------- 1 | const visibilityFilter = (state = 'SHOW_ALL', action) => { 2 | switch (action.type) { 3 | case 'SET_VISIBILITY_FILTER': 4 | return action.filter; 5 | default: 6 | return state; 7 | } 8 | }; 9 | 10 | export default visibilityFilter; 11 | -------------------------------------------------------------------------------- /example_immutable/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' 13 | // [::1] is the IPv6 localhost address. 14 | || window.location.hostname === '[::1]' 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | || window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/, 18 | ), 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' 44 | + 'worker. To learn more, visit https://goo.gl/SC7cgQ', 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then((registration) => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch((error) => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then((response) => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 91 | || response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then((registration) => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.', 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then((registration) => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aohua/redux-state-sync/afb4fb7b3bb5b8d51331c0be382f028df43ec81e/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-state-sync", 3 | "version": "3.1.4", 4 | "description": "A middleware for redux to sync state in different tabs", 5 | "main": "dist/syncState.js", 6 | "scripts": { 7 | "test": "jest", 8 | "commit": "git-cz", 9 | "prebuild": "rimraf dist", 10 | "build": "npm-run-all --parallel build:*", 11 | "build:main": "babel --copy-files --out-dir dist --ignore *.test.js src", 12 | "build:umd": "webpack --output-filename syncState.umd.js", 13 | "build:umd.min": "webpack --output-filename syncState.umd.min.js -p", 14 | "semantic-release": "semantic-release pre && npm publish && semantic-release post" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/AOHUA/redux-state-sync.git" 19 | }, 20 | "keywords": [ 21 | "redux", 22 | "react", 23 | "localstorage", 24 | "crosstab", 25 | "sync", 26 | "tabs", 27 | "middleware" 28 | ], 29 | "author": "AOHUA", 30 | "license": "ISC", 31 | "bugs": { 32 | "url": "https://github.com/AOHUA/redux-state-sync/issues" 33 | }, 34 | "homepage": "https://github.com/AOHUA/redux-state-sync#readme", 35 | "devDependencies": { 36 | "babel-cli": "^6.26.0", 37 | "babel-jest": "^25.1.0", 38 | "babel-loader": "^7.0.0", 39 | "babel-polyfill": "^6.16.0", 40 | "babel-preset-es2015": "^6.18.0", 41 | "babel-register": "^6.18.0", 42 | "commitizen": "^2.8.6", 43 | "cz-conventional-changelog": "^1.2.0", 44 | "eslint": "^6.8.0", 45 | "eslint-config-airbnb": "^18.0.1", 46 | "eslint-config-prettier": "^6.10.0", 47 | "eslint-plugin-import": "^2.20.1", 48 | "eslint-plugin-jsx-a11y": "^6.2.3", 49 | "eslint-plugin-react": "^7.19.0", 50 | "jest": "^23.6.0", 51 | "npm-run-all": "^4.1.5", 52 | "prettier": "1.19.1", 53 | "prettier-eslint": "^9.0.1", 54 | "rimraf": "^3.0.2", 55 | "semantic-release": "^17.0.4", 56 | "webpack": "^4.42.0", 57 | "webpack-cli": "^3.3.11" 58 | }, 59 | "dependencies": { 60 | "broadcast-channel": "^3.1.0" 61 | }, 62 | "jest": { 63 | "setupFiles": [ 64 | "./__mocks__/envMock.js" 65 | ], 66 | "verbose": true 67 | }, 68 | "czConfig": { 69 | "path": "node_modules/cz-conventional-changelog" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

    2 | 3 | 4 | 5 |

    6 | 7 | # Redux-State-Sync 3 8 | 9 | A lightweight middleware to sync your redux state across browser tabs. It will listen to the Broadcast Channel and dispatch exactly the same actions dispatched in other tabs to keep the redux state in sync. 10 | 11 | [](https://travis-ci.org/AOHUA/redux-state-sync) 12 | [](https://www.npmjs.com/package/redux-state-sync) 13 | 14 | ### Why Redux-State-Sync? 15 | 16 | ![](redux-state-sync.gif) 17 | 18 | It syncs your redux store across tabs with very minimal configuration. 19 | 20 | Thanks to [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API), we now have a more efficient way to communicate between tabs instead of using any type of local storage. However, Not all the browsers support BroadcastChannel API for now. So I used [pubkey's BroadcastChannel](https://github.com/pubkey/broadcast-channel) to find the best way to communicate between tabs for redux-state-sync. [pubkey's BroadcastChannel](https://github.com/pubkey/broadcast-channel) will make sure that the communication between tabs always works. 21 | 22 | ### How to install 23 | 24 | Install with npm. 25 | 26 | ``` 27 | npm install --save redux-state-sync 28 | ``` 29 | 30 | Install with yarn 31 | 32 | ``` 33 | yarn add redux-state-sync 34 | ``` 35 | 36 | ### TypeScript support 37 | 38 | Install with npm. 39 | 40 | ``` 41 | npm install --save-dev @types/redux-state-sync 42 | ``` 43 | 44 | Install with yarn 45 | 46 | ``` 47 | yarn add --dev @types/redux-state-sync 48 | ``` 49 | 50 | Types are defined [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e6e55443f88128b6393105407c8e8239cb10509b/types/redux-state-sync/index.d.ts) 51 | 52 | ### Before you use 53 | 54 | Please take note that BroadcastChannel can only send data that is supported by the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) (Strings, Objects, Arrays, Blobs, ArrayBuffer, Map), so you need to make sure that the actions that you wanna send to other tabs doesn't include any functions in the payload. 55 | 56 | If you are using redux-persist, you may need to blacklist some of the actions that is triggered by redux-persist. e.g. persist/PERSIST, persist/REHYDRATE, etc. 57 | 58 | ### How to use 59 | 60 | Create the state sync middleware with config: 61 | 62 | ```javascript 63 | import { createStore, applyMiddleware } from 'redux'; 64 | import { createStateSyncMiddleware, initMessageListener } from 'redux-state-sync'; 65 | 66 | const config = { 67 | // TOGGLE_TODO will not be triggered in other tabs 68 | blacklist: ['TOGGLE_TODO'], 69 | }; 70 | const middlewares = [createStateSyncMiddleware(config)]; 71 | const store = createStore(rootReducer, {}, applyMiddleware(...middlewares)); 72 | // this is used to pass store.dispatch to the message listener 73 | initMessageListener(store); 74 | ``` 75 | 76 | ##### initMessageListener is a new function to fix the bug that if the other tab not triggering any action on first load, it cannot receive any messages. 77 | 78 | Init new tabs with existing state: 79 | 80 | 1. Use initStateWithPrevTab to get existing state from other tabs 81 | 82 | ```javascript 83 | import { createStore, applyMiddleware } from 'redux'; 84 | import { createStateSyncMiddleware, initStateWithPrevTab } from 'redux-state-sync'; 85 | 86 | const config = { 87 | // TOGGLE_TODO will not be triggered in other tabs 88 | blacklist: ['TOGGLE_TODO'], 89 | }; 90 | const middlewares = [createStateSyncMiddleware(config)]; 91 | const store = createStore(rootReducer, {}, applyMiddleware(...middlewares)); 92 | // init state with other tabs 93 | initStateWithPrevTab(store); 94 | // initMessageListener(store); 95 | ``` 96 | 97 | ##### Note: if you are already using initStateWithPrevTab, you don't need to initMessageListener anymore. 98 | 99 | 2. Wrap your root reducer with `withReduxStateSync` 100 | 101 | ```javascript 102 | import { withReduxStateSync } from 'redux-state-sync'; 103 | const rootReducer = combineReducers({ 104 | todos, 105 | visibilityFilter, 106 | }); 107 | 108 | export default withReduxStateSync(rootReducer); 109 | ``` 110 | 111 | ##### Note: ignore this if you are using `redux-persist`, because you will always inite your app with the state in the storage. However, if you don't want to persist the state in the storage and still want to init new tabs with opening tabs' state, you can follow the example above. 112 | 113 | ### Config 114 | 115 | #### channel 116 | 117 | Unique name for Broadcast Channel 118 | 119 | type: `String` 120 | 121 | default: "redux_state_sync" 122 | 123 | ```javascript 124 | const config = { 125 | channel: 'my_broadcast_channel', 126 | }; 127 | const middlewares = [createStateSyncMiddleware(config)]; 128 | ``` 129 | 130 | #### predicate 131 | 132 | A function to let you filter the actions as you wanted. 133 | 134 | ##### Note: Since version 3.0 the function receives the action itself and not only the action type. 135 | 136 | type: `Function` 137 | 138 | default: null 139 | 140 | ```javascript 141 | const config = { 142 | // All actions will be triggered in other tabs except 'TOGGLE_TODO' 143 | predicate: action => action.type !== 'TOGGLE_TODO', 144 | }; 145 | const middlewares = [createStateSyncMiddleware(config)]; 146 | ``` 147 | 148 | #### blacklist 149 | 150 | A list of action types that you don't want to be triggered in other tabs. 151 | 152 | type: `ArrayOf()` 153 | 154 | default: [] 155 | 156 | ```javascript 157 | const config = { 158 | // All actions will be triggered in other tabs except 'TOGGLE_TODO' 159 | blacklist: ['TOGGLE_TODO'], 160 | }; 161 | const middlewares = [createStateSyncMiddleware(config)]; 162 | ``` 163 | 164 | #### whitelist 165 | 166 | Only actions in this list will be triggered in other tabs. 167 | 168 | type: `ArrayOf()` 169 | 170 | default: [] 171 | 172 | ```javascript 173 | const config = { 174 | // Only 'TOGGLE_TODO' will be triggered in other tabs 175 | whitelist: ['TOGGLE_TODO'], 176 | }; 177 | const middlewares = [createStateSyncMiddleware(config)]; 178 | ``` 179 | 180 | ##### Warning: You should only use one of the option to filter your actions. if you have all 3 options predicate, blacklist, and whitelist, only one will be effective and the priority is predicate > blacklist > whitelist. 181 | 182 | #### broadcastChannelOption 183 | 184 | Redux-state-sync is using [BroadcastChannel](https://github.com/pubkey/broadcast-channel) to comunicate between tabs. broadcastChannelOption is the option passed to broadcastChannel when we creating the channel. 185 | 186 | type: `Object` 187 | 188 | default: null 189 | 190 | ```javascript 191 | const config = { 192 | // Only 'TOGGLE_TODO' will be triggered in other tabs 193 | whitelist: ['TOGGLE_TODO'], 194 | // enforce a type, oneOf['native', 'idb', 'localstorage', 'node'] 195 | broadcastChannelOption: { type: 'localstorage' }, 196 | }; 197 | const middlewares = [createStateSyncMiddleware(config)]; 198 | ``` 199 | 200 | ### Working with immutable.js 201 | 202 | Please check the example_immutable folder. 203 | 204 | #### prepareState 205 | 206 | Prepare the initial state for sending to other tabs. 207 | 208 | type: `Function` 209 | 210 | default: state => state 211 | 212 | ```javascript 213 | const config = { 214 | // Map immutable object to js 215 | prepareState: state => state.toJS(), 216 | }; 217 | const middlewares = [createStateSyncMiddleware(config)]; 218 | ``` 219 | 220 | #### receiveState 221 | 222 | Reconcile the incoming state from other tabs with the existing state. 223 | 224 | type: `Function` 225 | 226 | default: (prevState, nextState) => nextState 227 | 228 | ```javascript 229 | const config = { 230 | // Overwrite existing state with incoming state 231 | receiveState: (prevState, nextState) => nextState, 232 | }; 233 | const middlewares = [createStateSyncMiddleware(config)]; 234 | ``` 235 | 236 | ```javascript 237 | import { combineReducers } from 'redux-immutable'; 238 | import { withReduxStateSync } from 'redux-state-sync'; 239 | const rootReducer = combineReducers({ 240 | todos, 241 | visibilityFilter, 242 | }); 243 | 244 | // Overwrite existing state with incoming state 245 | export default withReduxStateSync(appReducer, (prevState, nextState) => nextState); 246 | ``` 247 | -------------------------------------------------------------------------------- /redux-state-sync.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aohua/redux-state-sync/afb4fb7b3bb5b8d51331c0be382f028df43ec81e/redux-state-sync.gif -------------------------------------------------------------------------------- /src/syncState.js: -------------------------------------------------------------------------------- 1 | import { BroadcastChannel } from 'broadcast-channel'; 2 | 3 | let lastUuid = 0; 4 | export const GET_INIT_STATE = '&_GET_INIT_STATE'; 5 | export const SEND_INIT_STATE = '&_SEND_INIT_STATE'; 6 | export const RECEIVE_INIT_STATE = '&_RECEIVE_INIT_STATE'; 7 | export const INIT_MESSAGE_LISTENER = '&_INIT_MESSAGE_LISTENER'; 8 | 9 | const defaultConfig = { 10 | channel: 'redux_state_sync', 11 | predicate: null, 12 | blacklist: [], 13 | whitelist: [], 14 | broadcastChannelOption: undefined, 15 | prepareState: state => state, 16 | receiveState: (prevState, nextState) => nextState, 17 | }; 18 | 19 | const getIniteState = () => ({ type: GET_INIT_STATE }); 20 | const sendIniteState = () => ({ type: SEND_INIT_STATE }); 21 | const receiveIniteState = state => ({ type: RECEIVE_INIT_STATE, payload: state }); 22 | const initListener = () => ({ type: INIT_MESSAGE_LISTENER }); 23 | 24 | function s4() { 25 | return Math.floor((1 + Math.random()) * 0x10000) 26 | .toString(16) 27 | .substring(1); 28 | } 29 | 30 | function guid() { 31 | return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`; 32 | } 33 | 34 | // generate current window unique id 35 | export const WINDOW_STATE_SYNC_ID = guid(); 36 | // export for test 37 | export function generateUuidForAction(action) { 38 | const stampedAction = action; 39 | stampedAction.$uuid = guid(); 40 | stampedAction.$wuid = WINDOW_STATE_SYNC_ID; 41 | return stampedAction; 42 | } 43 | // export for test 44 | export function isActionAllowed({ predicate, blacklist, whitelist }) { 45 | let allowed = () => true; 46 | 47 | if (predicate && typeof predicate === 'function') { 48 | allowed = predicate; 49 | } else if (Array.isArray(blacklist)) { 50 | allowed = action => blacklist.indexOf(action.type) < 0; 51 | } else if (Array.isArray(whitelist)) { 52 | allowed = action => whitelist.indexOf(action.type) >= 0; 53 | } 54 | return allowed; 55 | } 56 | // export for test 57 | export function isActionSynced(action) { 58 | return !!action.$isSync; 59 | } 60 | // export for test 61 | export function MessageListener({ channel, dispatch, allowed }) { 62 | let isSynced = false; 63 | const tabs = {}; 64 | this.handleOnMessage = stampedAction => { 65 | // Ignore if this action is triggered by this window 66 | if (stampedAction.$wuid === WINDOW_STATE_SYNC_ID) { 67 | return; 68 | } 69 | // IE bug https://stackoverflow.com/questions/18265556/why-does-internet-explorer-fire-the-window-storage-event-on-the-window-that-st 70 | if (stampedAction.type === RECEIVE_INIT_STATE) { 71 | return; 72 | } 73 | // ignore other values that saved to localstorage. 74 | if (stampedAction.$uuid && stampedAction.$uuid !== lastUuid) { 75 | if (stampedAction.type === GET_INIT_STATE && !tabs[stampedAction.$wuid]) { 76 | tabs[stampedAction.$wuid] = true; 77 | dispatch(sendIniteState()); 78 | } else if (stampedAction.type === SEND_INIT_STATE && !tabs[stampedAction.$wuid]) { 79 | if (!isSynced) { 80 | isSynced = true; 81 | dispatch(receiveIniteState(stampedAction.payload)); 82 | } 83 | } else if (allowed(stampedAction)) { 84 | lastUuid = stampedAction.$uuid; 85 | dispatch( 86 | Object.assign(stampedAction, { 87 | $isSync: true, 88 | }), 89 | ); 90 | } 91 | } 92 | }; 93 | this.messageChannel = channel; 94 | this.messageChannel.onmessage = this.handleOnMessage; 95 | } 96 | 97 | export const createStateSyncMiddleware = (config = defaultConfig) => { 98 | const allowed = isActionAllowed(config); 99 | const channel = new BroadcastChannel(config.channel, config.broadcastChannelOption); 100 | const prepareState = config.prepareState || defaultConfig.prepareState; 101 | let messageListener = null; 102 | 103 | return ({ getState, dispatch }) => next => action => { 104 | // create message receiver 105 | if (!messageListener) { 106 | messageListener = new MessageListener({ channel, dispatch, allowed }); 107 | } 108 | // post messages 109 | if (action && !action.$uuid) { 110 | const stampedAction = generateUuidForAction(action); 111 | lastUuid = stampedAction.$uuid; 112 | try { 113 | if (action.type === SEND_INIT_STATE) { 114 | if (getState()) { 115 | stampedAction.payload = prepareState(getState()); 116 | channel.postMessage(stampedAction); 117 | } 118 | return next(action); 119 | } 120 | if (allowed(stampedAction) || action.type === GET_INIT_STATE) { 121 | channel.postMessage(stampedAction); 122 | } 123 | } catch (e) { 124 | console.error("Your browser doesn't support cross tab communication"); 125 | } 126 | } 127 | return next( 128 | Object.assign(action, { 129 | $isSync: typeof action.$isSync === 'undefined' ? false : action.$isSync, 130 | }), 131 | ); 132 | }; 133 | }; 134 | 135 | // eslint-disable-next-line max-len 136 | export const createReduxStateSync = (appReducer, receiveState = defaultConfig.receiveState) => (state, action) => { 137 | let initState = state; 138 | if (action.type === RECEIVE_INIT_STATE) { 139 | initState = receiveState(state, action.payload); 140 | } 141 | return appReducer(initState, action); 142 | }; 143 | 144 | // init state with other tab's state 145 | export const withReduxStateSync = createReduxStateSync; 146 | 147 | export const initStateWithPrevTab = ({ dispatch }) => { 148 | dispatch(getIniteState()); 149 | }; 150 | 151 | /* 152 | if don't dispath any action, the store.dispath will not be available for message listener. 153 | therefor need to trigger an empty action to init the messageListener. 154 | 155 | however, if already using initStateWithPrevTab, this function will be redundant 156 | */ 157 | export const initMessageListener = ({ dispatch }) => { 158 | dispatch(initListener()); 159 | }; 160 | -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import { join } from 'path'; 2 | 3 | const include = join(__dirname, 'src'); 4 | 5 | export default { 6 | entry: './src/syncState', 7 | output: { 8 | path: join(__dirname, 'dist'), 9 | libraryTarget: 'umd', 10 | library: 'reduxStateSync', 11 | }, 12 | devtool: 'source-map', 13 | module: { 14 | rules: [ 15 | { test: /\.js$/, loader: 'babel-loader', include }, 16 | ], 17 | }, 18 | }; 19 | --------------------------------------------------------------------------------