From 78165262d1ac4457843e5b2909108a0b1324ff33 Mon Sep 17 00:00:00 2001 From: Benoit Tremblay Date: Mon, 21 Aug 2023 23:25:16 -0400 Subject: [PATCH] Automatically detect changes from the browser (#384) * Automatically detect changes from the browser * Update size limits --- package.json | 6 ++-- .../react-cookie-demo/src/components/App.js | 5 +-- packages/react-cookie/README.md | 2 +- packages/react-cookie/package.json | 2 +- .../universal-cookie-express/package.json | 2 +- packages/universal-cookie-koa/package.json | 2 +- packages/universal-cookie/README.md | 2 +- packages/universal-cookie/package.json | 2 +- packages/universal-cookie/src/Cookies.ts | 31 +++++++++++++++++-- 9 files changed, 39 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index ea1d21f..ecb12d9 100644 --- a/package.json +++ b/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", diff --git a/packages/react-cookie-demo/src/components/App.js b/packages/react-cookie-demo/src/components/App.js index 84f85cd..82ed9ac 100644 --- a/packages/react-cookie-demo/src/components/App.js +++ b/packages/react-cookie-demo/src/components/App.js @@ -4,9 +4,7 @@ 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: '/' }); @@ -14,7 +12,6 @@ function App() { function onExternalCall() { document.cookie = 'name=Meow; path=/'; - updateCookies(); } function onClear() { diff --git a/packages/react-cookie/README.md b/packages/react-cookie/README.md index d7aed5d..aa81e76 100644 --- a/packages/react-cookie/README.md +++ b/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)` diff --git a/packages/react-cookie/package.json b/packages/react-cookie/package.json index 08d5e30..f51378e 100644 --- a/packages/react-cookie/package.json +++ b/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", diff --git a/packages/universal-cookie-express/package.json b/packages/universal-cookie-express/package.json index 859263f..ffb71b0 100644 --- a/packages/universal-cookie-express/package.json +++ b/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", diff --git a/packages/universal-cookie-koa/package.json b/packages/universal-cookie-koa/package.json index d6c7d1e..c93beea 100644 --- a/packages/universal-cookie-koa/package.json +++ b/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", diff --git a/packages/universal-cookie/README.md b/packages/universal-cookie/README.md index f156eaa..44c4c5e 100644 --- a/packages/universal-cookie/README.md +++ b/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 diff --git a/packages/universal-cookie/package.json b/packages/universal-cookie/package.json index 2656140..995ba50 100644 --- a/packages/universal-cookie/package.json +++ b/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", diff --git a/packages/universal-cookie/src/Cookies.ts b/packages/universal-cookie/src/Cookies.ts index 95aa78e..8449198 100644 --- a/packages/universal-cookie/src/Cookies.ts +++ b/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(name: string, options?: CookieGetOptions): T; public get(name: string, options: CookieGetOptions = {}) { @@ -111,7 +122,7 @@ export default class Cookies { this._emitChange({ name, value: undefined, options }); } - public update() { + public update = () => { if (!this.HAS_DOCUMENT_COOKIE) { return; } @@ -119,10 +130,18 @@ export default class Cookies { 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) { @@ -130,5 +149,13 @@ export default class Cookies { 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(); + } + } } }