Merge pull request #704 from openreplay/pinia-support

feat(tracker): capture pinia state updates; add multi store naming

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",

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<Options> = {}) {
   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<Options> = {}) {
       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)
           }
-        }
-      });
+        });
+      }
     };
   };
 }