@knocklabs/react-core 0.6.10 → 0.6.11

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.6.11
+
+### Patch Changes
+
+- dbbbaf7: Dispose of feed on unmount in `useNotifications` hook
+
+  Previously, the `useNotifications` hook did not clean up old instances of `Feed`
+  on unmount. This has been fixed.
+
 ## 0.6.10
 
 ### Patch Changes

package/dist/cjs/modules/feed/hooks/useNotifications.js

@@ -1,2 +1,2 @@
-"use strict";const i=require("react");require("../../core/context/KnockProvider.js");require("@knocklabs/client");const o=require("../../core/hooks/useStableOptions.js");require("date-fns");function a(r,t,n={}){const e=i.useRef(),s=o(n);return i.useMemo(()=>(e.current&&e.current.dispose(),e.current=r.feeds.initialize(t,s),e.current.store.subscribe(c=>{var u;return(u=e==null?void 0:e.current)==null?void 0:u.store.setState(c)}),e.current.listenForUpdates(),e.current),[r,t,s])}module.exports=a;
+"use strict";const n=require("react");require("../../core/context/KnockProvider.js");require("@knocklabs/client");const p=require("../../core/hooks/useStableOptions.js");require("date-fns");function b(c,s,l={}){const r=n.useCallback((u,f)=>{const i=c.feeds.initialize(u,f);return i.store.subscribe(d=>i.store.setState(d)),i.listenForUpdates(),i},[c]),e=p(l),[t,a]=n.useState(()=>({feedClient:r(s,e),options:e})),o=n.useRef(!1);return n.useEffect(()=>{const u=o.current;if(t.feedClient.feedId!==s||t.options!==e||u){o.current=!1,a({feedClient:r(s,e),options:e});return}return()=>{o.current=!0,t.feedClient.dispose()}},[r,s,e,t]),t.feedClient}module.exports=b;
 //# sourceMappingURL=useNotifications.js.map

package/dist/cjs/modules/feed/hooks/useNotifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNotifications.js","sources":["../../../../../src/modules/feed/hooks/useNotifications.ts"],"sourcesContent":["import Knock, { Feed, FeedClientOptions } from \"@knocklabs/client\";\nimport { useMemo, useRef } from \"react\";\n\nimport { useStableOptions } from \"../../core\";\n\nfunction useNotifications(\n  knock: Knock,\n  feedChannelId: string,\n  options: FeedClientOptions = {},\n) {\n  const feedClientRef = useRef<Feed>();\n  const stableOptions = useStableOptions(options);\n\n  return useMemo(() => {\n    if (feedClientRef.current) {\n      feedClientRef.current.dispose();\n    }\n\n    feedClientRef.current = knock.feeds.initialize(\n      feedChannelId,\n      stableOptions,\n    );\n\n    // In development, we need to introduce this extra set state to force a render\n    // for Zustand as otherwise the state doesn't get reflected correctly\n    feedClientRef.current.store.subscribe((t) =>\n      feedClientRef?.current?.store.setState(t),\n    );\n\n    feedClientRef.current.listenForUpdates();\n\n    return feedClientRef.current;\n  }, [knock, feedChannelId, stableOptions]);\n}\n\nexport default useNotifications;\n"],"names":["useNotifications","knock","feedChannelId","options","feedClientRef","useRef","stableOptions","useStableOptions","useMemo","current","dispose","feeds","initialize","store","subscribe","t","setState","listenForUpdates"],"mappings":"8LAKA,SAASA,EACPC,EACAC,EACAC,EAA6B,CAAA,EAC7B,CACA,MAAMC,EAAgBC,EAAAA,OAAa,EAC7BC,EAAgBC,EAAiBJ,CAAO,EAE9C,OAAOK,UAAQ,KACTJ,EAAcK,SAChBL,EAAcK,QAAQC,QAAQ,EAGhCN,EAAcK,QAAUR,EAAMU,MAAMC,WAClCV,EACAI,CACF,EAIcG,EAAAA,QAAQI,MAAMC,UAAWC,UACrCX,OAAAA,EAAAA,GAAAA,YAAAA,EAAeK,UAAfL,YAAAA,EAAwBS,MAAMG,SAASD,GACzC,EAEAX,EAAcK,QAAQQ,iBAAiB,EAEhCb,EAAcK,SACpB,CAACR,EAAOC,EAAeI,CAAa,CAAC,CAC1C"}
+{"version":3,"file":"useNotifications.js","sources":["../../../../../src/modules/feed/hooks/useNotifications.ts"],"sourcesContent":["import Knock, { Feed, FeedClientOptions } from \"@knocklabs/client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useStableOptions } from \"../../core\";\n\ninterface State {\n  feedClient: Feed;\n  options: FeedClientOptions;\n}\n\nfunction useNotifications(\n  knock: Knock,\n  feedChannelId: string,\n  options: FeedClientOptions = {},\n): Feed {\n  const initFeedClient = useCallback(\n    (feedChannelId: string, options: FeedClientOptions) => {\n      const feedClient = knock.feeds.initialize(feedChannelId, options);\n\n      // In development, we need to introduce this extra set state to force a render\n      // for Zustand as otherwise the state doesn't get reflected correctly\n      feedClient.store.subscribe((t) => feedClient.store.setState(t));\n\n      feedClient.listenForUpdates();\n\n      return feedClient;\n    },\n    [knock],\n  );\n\n  const stableOptions = useStableOptions(options);\n  const [state, setState] = useState<State>(() => ({\n    // FIXME In strict mode, useState initializer functions are called twice,\n    // which results in one extra instance of the feed client being created\n    // and not disposed of. This only affects strict mode.\n    feedClient: initFeedClient(feedChannelId, stableOptions),\n    options: stableOptions,\n  }));\n  const disposedRef = useRef(false);\n\n  useEffect(() => {\n    const isDisposed = disposedRef.current;\n\n    // Initialize a new feed client if the feed ID has changed,\n    // options have changed, or the current feed client has been disposed\n    const needsReinit =\n      state.feedClient.feedId !== feedChannelId ||\n      state.options !== stableOptions ||\n      isDisposed;\n\n    if (needsReinit) {\n      disposedRef.current = false;\n      setState({\n        feedClient: initFeedClient(feedChannelId, stableOptions),\n        options: stableOptions,\n      });\n      return;\n    }\n\n    return () => {\n      disposedRef.current = true;\n      state.feedClient.dispose();\n    };\n  }, [initFeedClient, feedChannelId, stableOptions, state]);\n\n  return state.feedClient;\n}\n\nexport default useNotifications;\n"],"names":["useNotifications","knock","feedChannelId","options","initFeedClient","useCallback","feedClient","feeds","initialize","store","subscribe","t","setState","listenForUpdates","stableOptions","useStableOptions","state","useState","disposedRef","useRef","useEffect","isDisposed","current","feedId","dispose"],"mappings":"8LAUA,SAASA,EACPC,EACAC,EACAC,EAA6B,CAAA,EACvB,CACN,MAAMC,EAAiBC,EAAAA,YACrB,CAACH,EAAuBC,IAA+B,CACrD,MAAMG,EAAaL,EAAMM,MAAMC,WAAWN,EAAeC,CAAO,EAIhEG,OAAAA,EAAWG,MAAMC,UAAWC,GAAML,EAAWG,MAAMG,SAASD,CAAC,CAAC,EAE9DL,EAAWO,iBAAiB,EAErBP,CAAAA,EAET,CAACL,CAAK,CACR,EAEMa,EAAgBC,EAAiBZ,CAAO,EACxC,CAACa,EAAOJ,CAAQ,EAAIK,WAAgB,KAAO,CAI/CX,WAAYF,EAAeF,EAAeY,CAAa,EACvDX,QAASW,CAAAA,EACT,EACII,EAAcC,SAAO,EAAK,EAEhCC,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAaH,EAAYI,QAS/B,GAJEN,EAAMV,WAAWiB,SAAWrB,GAC5Bc,EAAMb,UAAYW,GAClBO,EAEe,CACfH,EAAYI,QAAU,GACbV,EAAA,CACPN,WAAYF,EAAeF,EAAeY,CAAa,EACvDX,QAASW,CAAAA,CACV,EACD,MAAA,CAGF,MAAO,IAAM,CACXI,EAAYI,QAAU,GACtBN,EAAMV,WAAWkB,QAAQ,CAC3B,GACC,CAACpB,EAAgBF,EAAeY,EAAeE,CAAK,CAAC,EAEjDA,EAAMV,UACf"}

package/dist/esm/modules/feed/hooks/useNotifications.mjs

@@ -1,16 +1,34 @@
-import { useRef as n, useMemo as c } from "react";
+import { useCallback as a, useState as d, useRef as m, useEffect as b } from "react";
 import "../../core/context/KnockProvider.mjs";
 import "@knocklabs/client";
-import p from "../../core/hooks/useStableOptions.mjs";
+import C from "../../core/hooks/useStableOptions.mjs";
 import "date-fns";
-function O(r, e, i = {}) {
-  const t = n(), s = p(i);
-  return c(() => (t.current && t.current.dispose(), t.current = r.feeds.initialize(e, s), t.current.store.subscribe((u) => {
-    var o;
-    return (o = t == null ? void 0 : t.current) == null ? void 0 : o.store.setState(u);
-  }), t.current.listenForUpdates(), t.current), [r, e, s]);
+function z(f, s, p = {}) {
+  const o = a((r, u) => {
+    const i = f.feeds.initialize(r, u);
+    return i.store.subscribe((l) => i.store.setState(l)), i.listenForUpdates(), i;
+  }, [f]), e = C(p), [t, c] = d(() => ({
+    // FIXME In strict mode, useState initializer functions are called twice,
+    // which results in one extra instance of the feed client being created
+    // and not disposed of. This only affects strict mode.
+    feedClient: o(s, e),
+    options: e
+  })), n = m(!1);
+  return b(() => {
+    const r = n.current;
+    if (t.feedClient.feedId !== s || t.options !== e || r) {
+      n.current = !1, c({
+        feedClient: o(s, e),
+        options: e
+      });
+      return;
+    }
+    return () => {
+      n.current = !0, t.feedClient.dispose();
+    };
+  }, [o, s, e, t]), t.feedClient;
 }
 export {
-  O as default
+  z as default
 };
 //# sourceMappingURL=useNotifications.mjs.map

package/dist/esm/modules/feed/hooks/useNotifications.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNotifications.mjs","sources":["../../../../../src/modules/feed/hooks/useNotifications.ts"],"sourcesContent":["import Knock, { Feed, FeedClientOptions } from \"@knocklabs/client\";\nimport { useMemo, useRef } from \"react\";\n\nimport { useStableOptions } from \"../../core\";\n\nfunction useNotifications(\n  knock: Knock,\n  feedChannelId: string,\n  options: FeedClientOptions = {},\n) {\n  const feedClientRef = useRef<Feed>();\n  const stableOptions = useStableOptions(options);\n\n  return useMemo(() => {\n    if (feedClientRef.current) {\n      feedClientRef.current.dispose();\n    }\n\n    feedClientRef.current = knock.feeds.initialize(\n      feedChannelId,\n      stableOptions,\n    );\n\n    // In development, we need to introduce this extra set state to force a render\n    // for Zustand as otherwise the state doesn't get reflected correctly\n    feedClientRef.current.store.subscribe((t) =>\n      feedClientRef?.current?.store.setState(t),\n    );\n\n    feedClientRef.current.listenForUpdates();\n\n    return feedClientRef.current;\n  }, [knock, feedChannelId, stableOptions]);\n}\n\nexport default useNotifications;\n"],"names":["useNotifications","knock","feedChannelId","options","feedClientRef","useRef","stableOptions","useStableOptions","useMemo","current","dispose","feeds","initialize","store","subscribe","t","setState","listenForUpdates"],"mappings":";;;;;AAKA,SAASA,EACPC,GACAC,GACAC,IAA6B,CAAA,GAC7B;AACA,QAAMC,IAAgBC,EAAa,GAC7BC,IAAgBC,EAAiBJ,CAAO;AAE9C,SAAOK,EAAQ,OACTJ,EAAcK,WAChBL,EAAcK,QAAQC,QAAQ,GAGhCN,EAAcK,UAAUR,EAAMU,MAAMC,WAClCV,GACAI,CACF,GAIcG,EAAAA,QAAQI,MAAMC,UAAWC,CAAAA;;AACrCX,YAAAA,IAAAA,KAAAA,gBAAAA,EAAeK,YAAfL,gBAAAA,EAAwBS,MAAMG,SAASD;AAAAA,GACzC,GAEAX,EAAcK,QAAQQ,iBAAiB,GAEhCb,EAAcK,UACpB,CAACR,GAAOC,GAAeI,CAAa,CAAC;AAC1C;"}
+{"version":3,"file":"useNotifications.mjs","sources":["../../../../../src/modules/feed/hooks/useNotifications.ts"],"sourcesContent":["import Knock, { Feed, FeedClientOptions } from \"@knocklabs/client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useStableOptions } from \"../../core\";\n\ninterface State {\n  feedClient: Feed;\n  options: FeedClientOptions;\n}\n\nfunction useNotifications(\n  knock: Knock,\n  feedChannelId: string,\n  options: FeedClientOptions = {},\n): Feed {\n  const initFeedClient = useCallback(\n    (feedChannelId: string, options: FeedClientOptions) => {\n      const feedClient = knock.feeds.initialize(feedChannelId, options);\n\n      // In development, we need to introduce this extra set state to force a render\n      // for Zustand as otherwise the state doesn't get reflected correctly\n      feedClient.store.subscribe((t) => feedClient.store.setState(t));\n\n      feedClient.listenForUpdates();\n\n      return feedClient;\n    },\n    [knock],\n  );\n\n  const stableOptions = useStableOptions(options);\n  const [state, setState] = useState<State>(() => ({\n    // FIXME In strict mode, useState initializer functions are called twice,\n    // which results in one extra instance of the feed client being created\n    // and not disposed of. This only affects strict mode.\n    feedClient: initFeedClient(feedChannelId, stableOptions),\n    options: stableOptions,\n  }));\n  const disposedRef = useRef(false);\n\n  useEffect(() => {\n    const isDisposed = disposedRef.current;\n\n    // Initialize a new feed client if the feed ID has changed,\n    // options have changed, or the current feed client has been disposed\n    const needsReinit =\n      state.feedClient.feedId !== feedChannelId ||\n      state.options !== stableOptions ||\n      isDisposed;\n\n    if (needsReinit) {\n      disposedRef.current = false;\n      setState({\n        feedClient: initFeedClient(feedChannelId, stableOptions),\n        options: stableOptions,\n      });\n      return;\n    }\n\n    return () => {\n      disposedRef.current = true;\n      state.feedClient.dispose();\n    };\n  }, [initFeedClient, feedChannelId, stableOptions, state]);\n\n  return state.feedClient;\n}\n\nexport default useNotifications;\n"],"names":["useNotifications","knock","feedChannelId","options","initFeedClient","useCallback","feedClient","feeds","initialize","store","subscribe","t","setState","listenForUpdates","stableOptions","useStableOptions","state","useState","disposedRef","useRef","useEffect","isDisposed","current","feedId","dispose"],"mappings":";;;;;AAUA,SAASA,EACPC,GACAC,GACAC,IAA6B,CAAA,GACvB;AACN,QAAMC,IAAiBC,EACrB,CAACH,GAAuBC,MAA+B;AACrD,UAAMG,IAAaL,EAAMM,MAAMC,WAAWN,GAAeC,CAAO;AAIhEG,WAAAA,EAAWG,MAAMC,UAAWC,CAAAA,MAAML,EAAWG,MAAMG,SAASD,CAAC,CAAC,GAE9DL,EAAWO,iBAAiB,GAErBP;AAAAA,EAAAA,GAET,CAACL,CAAK,CACR,GAEMa,IAAgBC,EAAiBZ,CAAO,GACxC,CAACa,GAAOJ,CAAQ,IAAIK,EAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,IAI/CX,YAAYF,EAAeF,GAAeY,CAAa;AAAA,IACvDX,SAASW;AAAAA,EAAAA,EACT,GACII,IAAcC,EAAO,EAAK;AAEhCC,SAAAA,EAAU,MAAM;AACd,UAAMC,IAAaH,EAAYI;AAS/B,QAJEN,EAAMV,WAAWiB,WAAWrB,KAC5Bc,EAAMb,YAAYW,KAClBO,GAEe;AACfH,MAAAA,EAAYI,UAAU,IACbV,EAAA;AAAA,QACPN,YAAYF,EAAeF,GAAeY,CAAa;AAAA,QACvDX,SAASW;AAAAA,MAAAA,CACV;AACD;AAAA,IAAA;AAGF,WAAO,MAAM;AACXI,MAAAA,EAAYI,UAAU,IACtBN,EAAMV,WAAWkB,QAAQ;AAAA,IAC3B;AAAA,KACC,CAACpB,GAAgBF,GAAeY,GAAeE,CAAK,CAAC,GAEjDA,EAAMV;AACf;"}

package/dist/types/modules/feed/hooks/useNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../../../src/modules/feed/hooks/useNotifications.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAKnE,iBAAS,gBAAgB,CACvB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,iBAAsB,QAyBhC;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../../../src/modules/feed/hooks/useNotifications.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAUnE,iBAAS,gBAAgB,CACvB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,iBAAsB,GAC9B,IAAI,CAoDN;AAED,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@knocklabs/react-core",
   "description": "A set of React components to build notification experiences powered by Knock",
   "author": "@knocklabs",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",
@@ -32,8 +32,6 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
     "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
-    "test": "vitest run",
-    "test:watch": "vitest",
     "type:check": "tsc --noEmit",
     "coverage": "vitest run --coverage",
     "preview": "vite preview"
@@ -61,7 +59,7 @@
     "@testing-library/react": "^16.3.0",
     "@types/react": "^18.3.6",
     "@typescript-eslint/eslint-plugin": "^8.32.0",
-    "@typescript-eslint/parser": "^8.27.0",
+    "@typescript-eslint/parser": "^8.32.1",
     "@vitejs/plugin-react": "^4.4.1",
     "babel-plugin-react-require": "^4.0.3",
     "eslint": "^8.56.0",

package/src/modules/feed/hooks/useNotifications.ts

@@ -1,36 +1,69 @@
 import Knock, { Feed, FeedClientOptions } from "@knocklabs/client";
-import { useMemo, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { useStableOptions } from "../../core";
 
+interface State {
+  feedClient: Feed;
+  options: FeedClientOptions;
+}
+
 function useNotifications(
   knock: Knock,
   feedChannelId: string,
   options: FeedClientOptions = {},
-) {
-  const feedClientRef = useRef<Feed>();
+): Feed {
+  const initFeedClient = useCallback(
+    (feedChannelId: string, options: FeedClientOptions) => {
+      const feedClient = knock.feeds.initialize(feedChannelId, options);
+
+      // In development, we need to introduce this extra set state to force a render
+      // for Zustand as otherwise the state doesn't get reflected correctly
+      feedClient.store.subscribe((t) => feedClient.store.setState(t));
+
+      feedClient.listenForUpdates();
+
+      return feedClient;
+    },
+    [knock],
+  );
+
   const stableOptions = useStableOptions(options);
+  const [state, setState] = useState<State>(() => ({
+    // FIXME In strict mode, useState initializer functions are called twice,
+    // which results in one extra instance of the feed client being created
+    // and not disposed of. This only affects strict mode.
+    feedClient: initFeedClient(feedChannelId, stableOptions),
+    options: stableOptions,
+  }));
+  const disposedRef = useRef(false);
 
-  return useMemo(() => {
-    if (feedClientRef.current) {
-      feedClientRef.current.dispose();
-    }
+  useEffect(() => {
+    const isDisposed = disposedRef.current;
 
-    feedClientRef.current = knock.feeds.initialize(
-      feedChannelId,
-      stableOptions,
-    );
+    // Initialize a new feed client if the feed ID has changed,
+    // options have changed, or the current feed client has been disposed
+    const needsReinit =
+      state.feedClient.feedId !== feedChannelId ||
+      state.options !== stableOptions ||
+      isDisposed;
 
-    // In development, we need to introduce this extra set state to force a render
-    // for Zustand as otherwise the state doesn't get reflected correctly
-    feedClientRef.current.store.subscribe((t) =>
-      feedClientRef?.current?.store.setState(t),
-    );
+    if (needsReinit) {
+      disposedRef.current = false;
+      setState({
+        feedClient: initFeedClient(feedChannelId, stableOptions),
+        options: stableOptions,
+      });
+      return;
+    }
 
-    feedClientRef.current.listenForUpdates();
+    return () => {
+      disposedRef.current = true;
+      state.feedClient.dispose();
+    };
+  }, [initFeedClient, feedChannelId, stableOptions, state]);
 
-    return feedClientRef.current;
-  }, [knock, feedChannelId, stableOptions]);
+  return state.feedClient;
 }
 
 export default useNotifications;