diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js index 0601e092f..1dcbbaa21 100644 --- a/frontend/app/components/Session_/Player/Controls/Controls.js +++ b/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'; } diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js index b1cf53dfc..62e9eda19 100644 --- a/frontend/app/components/Session_/Storage/Storage.js +++ b/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 '} Redux{', '} VueX{', '} + {/* ZUSTAND TODO */} MobX{' and '} NgRx.

diff --git a/frontend/app/player/MessageDistributor/Lists.ts b/frontend/app/player/MessageDistributor/Lists.ts index 0173b2667..a65eff52f 100644 --- a/frontend/app/player/MessageDistributor/Lists.ts +++ b/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 => { diff --git a/frontend/app/player/MessageDistributor/MessageDistributor.ts b/frontend/app/player/MessageDistributor/MessageDistributor.ts index 2d73081fb..8c47debe2 100644 --- a/frontend/app/player/MessageDistributor/MessageDistributor.ts +++ b/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) => { if (e.type === EVENT_TYPES.LOCATION) { //TODO type system - this.locationEventManager.append(e); + this.locationEventManager.append(e); } }); this.session.errors.forEach((e: Record) => { @@ -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) diff --git a/frontend/app/player/store/selectors.js b/frontend/app/player/store/selectors.js index 1a6f0dc2d..36750b56d 100644 --- a/frontend/app/player/store/selectors.js +++ b/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 []; -} \ No newline at end of file +}