feat(ui): zustand support for the replayer

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -48,6 +48,8 @@ function getStorageIconName(type) {
       return 'vendors/vuex';
     case STORAGE_TYPES.NGRX:
       return 'vendors/ngrx';
+    case STORAGE_TYPES.ZUSTAND:
+      return 'vendors/zustand';
     case STORAGE_TYPES.NONE:
       return 'store';
   }
@@ -73,6 +75,8 @@ function getStorageName(type) {
       return 'VUEX';
     case STORAGE_TYPES.NGRX:
       return 'NGRX';
+    case STORAGE_TYPES.ZUSTAND:
+      return 'ZUSTAND';
     case STORAGE_TYPES.NONE:
       return 'STATE';
   }

frontend/app/components/Session_/Storage/Storage.js

@@ -121,6 +121,9 @@ export default class Storage extends React.PureComponent {
 		const { type, listNow, list } = this.props;
 		let src;
 		let name;
+
+		// ZUSTAND TODO
+		console.log(item, type)
 		switch(type) {
 			case STORAGE_TYPES.REDUX:
 			case STORAGE_TYPES.NGRX:
@@ -208,6 +211,7 @@ export default class Storage extends React.PureComponent {
                 	{'Inspect your application state while you’re replaying your users sessions. OpenReplay supports '}
                 	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/redux" target="_blank">Redux</a>{', '}
                 	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/vuex" target="_blank">VueX</a>{', '}
+									{/* ZUSTAND TODO */}
                 	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/mobx" target="_blank">MobX</a>{' and '}
                 	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/ngrx" target="_blank">NgRx</a>.
                 	<br/><br/>

frontend/app/player/MessageDistributor/Lists.ts

@@ -1,7 +1,7 @@
 import type { Message } from './messages'
 import ListWalker from './managers/ListWalker';
 
-export const LIST_NAMES = ["redux", "mobx", "vuex", "ngrx", "graphql", "exceptions", "profiles", "longtasks"] as const;
+export const LIST_NAMES = ["redux", "mobx", "vuex", "zustand", "ngrx", "graphql", "exceptions", "profiles", "longtasks"] as const;
 
 export const INITIAL_STATE = {}
 LIST_NAMES.forEach(name => {

frontend/app/player/MessageDistributor/MessageDistributor.ts

@@ -123,7 +123,7 @@ export default class MessageDistributor extends StatedScreen {
       // TODO: fix types for events, remove immutable js
       eventList.forEach((e: Record<string, string>) => {
         if (e.type === EVENT_TYPES.LOCATION) { //TODO type system
-          this.locationEventManager.append(e); 
+          this.locationEventManager.append(e);
         }
       });
       this.session.errors.forEach((e: Record<string, string>) => {
@@ -233,7 +233,7 @@ export default class MessageDistributor extends StatedScreen {
          this.waitingForFiles = false
          this.setMessagesLoading(false)
         })
-      
+
     })
   }
 
@@ -479,6 +479,12 @@ export default class MessageDistributor extends StatedScreen {
           this.lists.vuex.append(decoded);
         }
         break;
+      case "zustand":
+        decoded = this.decodeMessage(msg, ["state", "mutation"])
+        logger.log(decoded)
+        if (decoded != null) {
+          this.lists.zustand.append(decoded)
+        }
       case "mob_x":
         decoded = this.decodeMessage(msg, ["payload"]);
         logger.log(decoded)

frontend/app/player/store/selectors.js

@@ -2,6 +2,7 @@ const REDUX = "redux";
 const MOBX = "mobx";
 const VUEX = "vuex";
 const NGRX = "ngrx";
+const ZUSTAND = 'zustand';
 const NONE = 0;
 
 
@@ -10,6 +11,7 @@ export const STORAGE_TYPES = {
 	MOBX,
 	VUEX,
 	NGRX,
+	ZUSTAND,
 	NONE,
 };
 
@@ -24,6 +26,8 @@ export function selectStorageType(state) {
 		return MOBX;
 	} else if (state.ngrxList.length > 0) {
 		return NGRX;
+	} else if (state.zustandList.length > 0) {
+		return ZUSTAND;
 	}
 	return NONE;
 }
@@ -41,4 +45,4 @@ export function selectStorageListNow(state) {
 		return state[`${key}ListNow`] || [];
 	}
 	return [];
-}
+}