add support for filtering displayed state props when tracking state

Author: patinthehat

src/shared/helpers.ts

@@ -1,4 +1,5 @@
 import { PackageInfo } from './PackageInfo';
+import multimatch from 'multimatch';
 
 // @ts-ignore
 export const createPackageMetaProperty = obj => {
@@ -25,3 +26,15 @@ export const encodeHtmlEntities = (str: string) => {
 
     return str.replace(regex, m => `&${escapeChars[m]};`);
 };
+
+export const filterObjectByKeys = (obj: any, includeKeyPatterns: string[]) => {
+    const result: any = {};
+
+    Object.keys(obj).forEach(key => {
+        multimatch(key, includeKeyPatterns).forEach(match => {
+            result[match] = obj[match];
+        });
+    });
+
+    return result;
+};

src/vuex/VuexPlugin.ts

@@ -1,14 +1,15 @@
 /* eslint-disable no-unused-vars */
 
+import { filterObjectByKeys } from '../shared/helpers';
 import { ray } from '../shared/VueRay';
 
 export let vuexStateRay: any = null;
 
 class VuexState {
     public state: any;
 
-    constructor(state: any) {
-        this.state = state;
+    constructor(state: any, options: RayVuexPluginOptions = {}) {
+        this.state = filterObjectByKeys(Object.assign({}, state), options.trackingOptions?.propNames ?? ['one']);
     }
 }
 
@@ -26,6 +27,10 @@ export interface RayVuexPluginOptions {
     logActions?: boolean;
     loggedMutationColor?: RayVuexPluginLogColor;
     loggedActionColor?: RayVuexPluginLogColor;
+    trackingOptions?: {
+        moduleNames?: string[];
+        propNames?: string[];
+    };
 }
 
 const DefaultVuexPluginOptions: RayVuexPluginOptions = {
@@ -34,6 +39,10 @@ const DefaultVuexPluginOptions: RayVuexPluginOptions = {
     logActions: false,
     loggedMutationColor: 'none',
     loggedActionColor: 'none',
+    trackingOptions: {
+        moduleNames: ['*'],
+        propNames: ['*'],
+    },
 };
 
 const decorateEventType = (name: RayVuexPluginEventType, color: string) => {
@@ -78,7 +87,7 @@ export const VuexPlugin = (
                     vuexStateRay = rayInstance();
                 }
 
-                vuexStateRay = vuexStateRay.send(new VuexState(copiedState));
+                vuexStateRay = vuexStateRay.send(new VuexState(copiedState, options));
             });
         }