fix(kno-7523): fixes separation of zustand vanilla and react (#429)

* fixes type handling

* testing new behavior

* lint and format

* Removes upgrade guide and validated store

* remove console logs

* removes test data

Author: MikeCarbone

examples/client-example/src/App.js

@@ -1,5 +1,5 @@
 import Knock from "@knocklabs/client";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import "./App.css";
 
@@ -16,10 +16,10 @@ const useNotificationFeed = (knockClient, feedId) => {
       auto_manage_socket_connection: true,
       auto_manage_socket_connection_delay: 500,
     });
-    const notificationStore = notificationFeed.store;
+
     notificationFeed.fetch();
 
-    return [notificationFeed, notificationStore];
+    return [notificationFeed, notificationFeed.store];
   }, [knockClient, feedId]);
 };
 
@@ -28,6 +28,7 @@ function App() {
     knockClient,
     process.env.REACT_APP_KNOCK_CHANNEL_ID,
   );
+  const [feedState, setFeedState] = useState(feedStore.getState());
 
   useEffect(() => {
     knockClient.preferences
@@ -40,6 +41,20 @@ function App() {
       });
   }, []);
 
+  // Consume the store
+  useEffect(() => {
+    // What to do on updates
+    const render = (state) => {
+      setFeedState(state);
+    };
+
+    // What to do on initial load
+    render(feedStore.getInitialState());
+
+    // Subscribe to updates
+    feedStore.subscribe(render);
+  }, [feedStore]);
+
   useEffect(() => {
     const teardown = feedClient.listenForUpdates();
 
@@ -58,7 +73,7 @@ function App() {
     return () => teardown?.();
   }, [feedClient]);
 
-  const { loading, items, pageInfo } = feedStore((state) => state);
+  const { loading, items, pageInfo } = feedState;
 
   return (
     <div className="App">

packages/client/src/clients/feed/feed.ts

@@ -1,7 +1,7 @@
 import { GenericData } from "@knocklabs/types";
 import EventEmitter from "eventemitter2";
 import { Channel } from "phoenix";
-import type { StoreApi, UseBoundStore } from "zustand";
+import type { StoreApi } from "zustand";
 
 import Knock from "../../knock";
 import { NetworkStatus, isRequestInFlight } from "../../networkStatus";
@@ -48,7 +48,7 @@ class Feed {
   private visibilityChangeListenerConnected: boolean = false;
 
   // The raw store instance, used for binding in React and other environments
-  public store: UseBoundStore<StoreApi<FeedStoreState>>;
+  public store: StoreApi<FeedStoreState>;
 
   constructor(
     readonly knock: Knock,
@@ -577,7 +577,6 @@ class Feed {
     metadata,
   }: FeedMessagesReceivedPayload) {
     this.knock.log("[Feed] Received new real-time message");
-
     // Handle the new message coming in
     const { items, ...state } = this.store.getState();
     const currentHead: FeedItem | undefined = items[0];

packages/client/src/clients/feed/store.ts

@@ -1,5 +1,5 @@
 import { GenericData } from "@knocklabs/types";
-import { create } from "zustand";
+import { createStore as createVanillaZustandStore } from "zustand";
 
 import { NetworkStatus } from "../../networkStatus";
 
@@ -34,7 +34,7 @@ const initialStoreState = {
 };
 
 export default function createStore() {
-  return create<FeedStoreState>((set) => ({
+  return createVanillaZustandStore<FeedStoreState>()((set) => ({
     // Keeps track of all of the items loaded
     ...initialStoreState,
     // The network status indicates what's happening with the request

packages/client/upgrade-guides/to-v0.12.0.md

@@ -1,33 +1,31 @@
 import { Feed, type FeedStoreState } from "@knocklabs/client";
+import { type StoreApi, type UseBoundStore, useStore } from "zustand";
 
 // A hook designed to create a `UseBoundStore` instance.
-// We used to have to do some extra work to do this, but
-// with zustand updated we can just use the feedClient.store
-// directly.
-function useCreateNotificationStore(feedClient: Feed) {
-  return feedClient.store;
-}
-
+// https://zustand.docs.pmnd.rs/guides/typescript#bounded-usestore-hook-for-vanilla-stores
+function useCreateNotificationStore(
+  feedClient: Feed,
+): UseBoundStore<StoreApi<FeedStoreState>>;
+function useCreateNotificationStore<T, U = T>(
+  feedClient: Feed,
+  externalSelector: (state: FeedStoreState) => U,
+): U;
 /**
- * Below we do some typing to specify that if a selector is provided,
- * the return type will be the type returned by the selector.
- *
- * This is important because the store state type is not always the same as the
- * return type of the selector.
- *
+ * Access a Bounded Store instance
+ * Allow passing a selector down from useCreateNotificationStore OR useNotificationStore
+ * We'll favor the the one passed later outside of useCreateNotificationStore instantiation
  */
-
-type StateSelector<T, U> = (state: T) => U;
-type FeedStoreStateSelector<T> = StateSelector<FeedStoreState, T>;
-
-// Function overload for when no selector is provided
-function useNotificationStore(feedClient: Feed): FeedStoreState;
-
-// Function overload for when a selector is provided
-function useNotificationStore<T>(
+function useCreateNotificationStore<T, U = T>(
   feedClient: Feed,
-  selector: FeedStoreStateSelector<T>,
-): T;
+  externalSelector?: (state: FeedStoreState) => U,
+) {
+  const store = useStore(feedClient.store);
+
+  return (selector?: (state: FeedStoreState) => U) => {
+    const innerSelector = selector ?? externalSelector;
+    return innerSelector ? innerSelector(store) : store;
+  };
+}
 
 /**
  * A hook used to access content within the notification store.
@@ -43,13 +41,18 @@ function useNotificationStore<T>(
  * }));
  * ```
  */
+function useNotificationStore(
+  feedClient: Feed,
+): UseBoundStore<StoreApi<FeedStoreState>>;
 function useNotificationStore<T>(
   feedClient: Feed,
-  selector?: FeedStoreStateSelector<T>,
-): T | FeedStoreState {
-  const useStore = useCreateNotificationStore(feedClient);
-  const storeState = useStore();
-  return selector ? selector(storeState) : storeState;
+  selector: (state: FeedStoreState) => T,
+): T;
+function useNotificationStore<T, U = T>(
+  feedClient: Feed,
+  selector?: (state: FeedStoreState) => U,
+) {
+  return useCreateNotificationStore(feedClient, selector!);
 }
 
 export { useCreateNotificationStore };