diff --git a/tracker/tracker-vuex/package.json b/tracker/tracker-vuex/package.json index 005a9393c..69f43df64 100644 --- a/tracker/tracker-vuex/package.json +++ b/tracker/tracker-vuex/package.json @@ -1,7 +1,7 @@ { "name": "@openreplay/tracker-vuex", "description": "Tracker plugin for Vuex state recording", - "version": "3.0.0", + "version": "4.0.0", "keywords": [ "vuex", "logging", diff --git a/tracker/tracker-vuex/src/index.ts b/tracker/tracker-vuex/src/index.ts index 30333904e..f8d8c1dba 100644 --- a/tracker/tracker-vuex/src/index.ts +++ b/tracker/tracker-vuex/src/index.ts @@ -1,4 +1,4 @@ -import { App, Messages } from '@openreplay/tracker'; +import { App, Messages } from "@openreplay/tracker"; import { Encoder, sha1 } from "./syncod/index.js"; export interface Options { @@ -7,12 +7,36 @@ export interface Options { mutationTransformer: (mutation: any) => any; } +function processMutationAndState( + app: App, + options: Options, + encoder: Encoder, + mutation: any, + state: any +) { + if (options.filter(mutation, state)) { + try { + const { type } = mutation; + if (typeof type === "string" && type) { + app.send(Messages.StateAction(type)); + } + const _mutation = encoder.encode(options.mutationTransformer(mutation)); + const _state = encoder.encode(options.transformer(state)); + const _table = encoder.commit(); + for (let key in _table) app.send(Messages.OTable(key, _table[key])); + app.send(Messages.Vuex(_mutation, _state)); + } catch { + encoder.clear(); + } + } +} + export default function(opts: Partial = {}) { const options: Options = Object.assign( { filter: () => true, transformer: state => state, - mutationTransformer: mutation => mutation + mutationTransformer: mutation => mutation, }, opts ); @@ -21,26 +45,32 @@ export default function(opts: Partial = {}) { return Function.prototype; } const encoder = new Encoder(sha1, 50); - return store => { - store.subscribe((mutation, state) => { - if (options.filter(mutation, state)) { + const state = {}; + return (storeName: string) => (store) => { + // Vuex + if (store.subscribe) { + const randomId = Math.random().toString(36).substring(2, 9) + store.subscribe((mutation, storeState) => { + state[storeName || randomId] = state + processMutationAndState(app, options, encoder, mutation, storeState); + }); + } + + // Pinia + if (store.$onAction) { + store.$onAction(({ name, store, args }) => { try { - const { type } = mutation; - if (typeof type === 'string' && type) { - app.send(Messages.StateAction(type)); - } - const _mutation = encoder.encode( - options.mutationTransformer(mutation) - ); - const _state = encoder.encode(options.transformer(state)); - const _table = encoder.commit(); - for (let key in _table) app.send(Messages.OTable(key, _table[key])); - app.send(Messages.Vuex(_mutation, _state)); - } catch { - encoder.clear(); + state[storeName || store.$id] = store.$state; + const mutation = { + type: name, + payload: args + }; + processMutationAndState(app, options, encoder, mutation, state); + } catch (e) { + app.debug.error(e) } - } - }); + }); + } }; }; }