Automatically detect changes from the browser

package.json

@@ -48,15 +48,15 @@
   "size-limit": [
     {
       "path": "./packages/universal-cookie/lib/index.js",
-      "limit": "3 KB"
+      "limit": "4 KB"
     },
     {
       "path": "./packages/universal-cookie-express/lib/index.js",
-      "limit": "3 KB"
+      "limit": "4 KB"
     },
     {
       "path": "./packages/universal-cookie-koa/lib/index.js",
-      "limit": "3 KB"
+      "limit": "4 KB"
     },
     {
       "path": "./packages/react-cookie/lib/index.js",

packages/react-cookie-demo/src/components/App.js

@@ -4,17 +4,14 @@ import { useCookies } from 'react-cookie';
 import NameForm from './NameForm';
 
 function App() {
-  const [cookies, setCookie, removeCookie, updateCookies] = useCookies([
-    'name',
-  ]);
+  const [cookies, setCookie, removeCookie] = useCookies(['name']);
 
   function onChange(newName) {
     setCookie('name', newName, { path: '/' });
   }
 
   function onExternalCall() {
     document.cookie = 'name=Meow; path=/';
-    updateCookies();
   }
 
   function onClear() {

packages/react-cookie/README.md

@@ -101,7 +101,7 @@ Remove a cookie
 
 ### `updateCookies()`
 
-Read back the cookies and trigger changes accordingly. Useful is you change cookies server side or with other parties.
+Read back the cookies from the browser and triggers the change listeners. This should normally not be necessary because this library detects cookie changes automatically.
 
 ## `withCookies(Component)`
 

packages/react-cookie/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cookie",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Universal cookies for React",
   "main": "cjs/index.js",
   "module": "es6/index.js",

packages/universal-cookie-express/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universal-cookie-express",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Hook cookies get/set on Express for server-rendering",
   "main": "cjs/index.js",
   "module": "es6/index.js",

packages/universal-cookie-koa/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universal-cookie-koa",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Hook cookies get/set on Koa for server-rendering",
   "main": "cjs/index.js",
   "module": "es6/index.js",

packages/universal-cookie/README.md

@@ -98,7 +98,7 @@ Remove a listener from the change callback.
 
 ### `update()`
 
-Read back the cookies and trigger changes accordingly. Useful is you change cookies server side or with other parties.
+Read back the cookies from the browser and triggers the change listeners. This should normally not be necessary because this library detects cookie changes automatically.
 
 ## Browser Example
 

packages/universal-cookie/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universal-cookie",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Universal cookies for JavaScript",
   "main": "cjs/index.js",
   "module": "es6/index.js",

packages/universal-cookie/src/Cookies.ts

@@ -12,6 +12,7 @@ export default class Cookies {
   private cookies: { [name: string]: Cookie };
   private defaultSetOptions: CookieSetOptions;
   private changeListeners: CookieChangeListener[] = [];
+  private pollingInterval?: NodeJS.Timeout;
 
   private HAS_DOCUMENT_COOKIE: boolean = false;
 
@@ -47,6 +48,16 @@ export default class Cookies {
     });
   }
 
+  private _startPolling() {
+    this.pollingInterval = setInterval(this.update, 300);
+  }
+
+  private _stopPolling() {
+    if (this.pollingInterval) {
+      clearInterval(this.pollingInterval);
+    }
+  }
+
   public get(name: string, options?: CookieGetOptions): any;
   public get<T>(name: string, options?: CookieGetOptions): T;
   public get(name: string, options: CookieGetOptions = {}) {
@@ -111,24 +122,40 @@ export default class Cookies {
     this._emitChange({ name, value: undefined, options });
   }
 
-  public update() {
+  public update = () => {
     if (!this.HAS_DOCUMENT_COOKIE) {
       return;
     }
 
     const previousCookies = this.cookies;
     this.cookies = cookie.parse(document.cookie);
     this._checkChanges(previousCookies);
-  }
+  };
 
   public addChangeListener(callback: CookieChangeListener) {
     this.changeListeners.push(callback);
+
+    if (this.changeListeners.length === 1) {
+      if (typeof window === 'object' && 'cookieStore' in window) {
+        (window.cookieStore as any).addEventListener('change', this.update);
+      } else {
+        this._startPolling();
+      }
+    }
   }
 
   public removeChangeListener(callback: CookieChangeListener) {
     const idx = this.changeListeners.indexOf(callback);
     if (idx >= 0) {
       this.changeListeners.splice(idx, 1);
     }
+
+    if (this.changeListeners.length === 0) {
+      if (typeof window === 'object' && 'cookieStore' in window) {
+        (window.cookieStore as any).removeEventListener('change', this.update);
+      } else {
+        this._stopPolling();
+      }
+    }
   }
 }