@openreplay/tracker-mobx - npm Package Compare versions

Comparing version 3.0.0 to 3.4.4

cjs/index.d.ts

@@ -0,9 +1,5 @@
+import { IObservableValue, IComputedValue } from 'mobx';
 import { App } from '@openreplay/tracker/cjs';
-export interface Options {
-    predicate: (ev: any) => boolean;
-    action: boolean;
-    reaction: boolean;
-    transaction: boolean;
-    compute: boolean;
-}
-export default function (opts?: Partial<Options>): (app: App | null) => void;
+declare type IObservable = IObservableValue<unknown> | IComputedValue<unknown>;
+export default function (): (app: App | null) => ((obj: IObservable) => void) | undefined;
+export {};

cjs/index.js

@@ -5,12 +5,25 @@ "use strict";
 const tracker_1 = require("@openreplay/tracker/cjs");
-const log_1 = require("./log");
 const syncod_1 = require("./syncod");
-function default_1(opts = {}) {
-    const options = Object.assign({
-        predicate: () => true,
-        action: true,
-        reaction: true,
-        transaction: true,
-        compute: true,
-    }, opts);
+// export interface Options {
+//   observables: Array<IObservable> // | {[key:string]:IObservable}
+// }
+const CH_FIELDS = {
+    type: true,
+    observableKind: true,
+    name: true,
+    newValue: true,
+    oldValue: true,
+    index: true,
+    removedCount: true,
+    added: true,
+    removed: true,
+    addedCount: true,
+};
+function default_1( /*opts: Partial<Options> = {}*/) {
+    // const options: Options = Object.assign(
+    //   {
+    //     //observables: [],
+    //   },
+    //   opts,
+    // );
     return (app) => {
@@ -21,20 +34,33 @@ if (app === null) {
         const encoder = new syncod_1.Encoder(syncod_1.sha1, 50);
-        mobx_1.spy(app.safe(ev => {
-            if (!options.predicate(ev))
-                return;
-            const { type } = ev;
-            ev = options[type] && log_1.default[type] && log_1.default[type](ev);
-            if (!ev)
-                return;
-            if (typeof ev.name === 'string' && ev.name) {
-                app.send(tracker_1.Messages.StateAction(ev.name));
-            }
-            const payload = encoder.encode(ev);
+        const makeObservableChangeHandle = (obj) => {
+            const name = mobx_1.getDebugName(obj);
+            const payload = encoder.encode({ type: "init", value: obj });
             const table = encoder.commit();
             for (let key in table)
                 app.send(tracker_1.Messages.OTable(key, table[key]));
-            app.send(tracker_1.Messages.MobX(type, payload));
-        }));
+            app.send(tracker_1.Messages.MobX(name, payload));
+            return (change) => {
+                const ch = Object.keys(change)
+                    .filter(key => CH_FIELDS[key])
+                    .reduce((obj, key) => {
+                    obj[key] = change[key];
+                    return obj;
+                }, {});
+                //app.send(Messages.StateAction(neme));
+                const payload = encoder.encode(ch);
+                const table = encoder.commit();
+                for (let key in table)
+                    app.send(tracker_1.Messages.OTable(key, table[key]));
+                app.send(tracker_1.Messages.MobX(name, payload));
+            };
+        };
+        return (obj) => {
+            if (!mobx_1.isObservable(obj)) {
+                console.warn("OpenReplay tracker-mobx: ", obj, " is not an observable value");
+                return;
+            }
+            mobx_1.observe(obj, makeObservableChangeHandle(obj));
+        };
     };
 }
 exports.default = default_1;

lib/index.d.ts

@@ -0,9 +1,5 @@
+import { IObservableValue, IComputedValue } from 'mobx';
 import { App } from '@openreplay/tracker';
-export interface Options {
-    predicate: (ev: any) => boolean;
-    action: boolean;
-    reaction: boolean;
-    transaction: boolean;
-    compute: boolean;
-}
-export default function (opts?: Partial<Options>): (app: App | null) => void;
+declare type IObservable = IObservableValue<unknown> | IComputedValue<unknown>;
+export default function (): (app: App | null) => ((obj: IObservable) => void) | undefined;
+export {};

lib/index.js

@@ -1,13 +0,26 @@
-import { spy } from 'mobx';
+import { observe, getDebugName, isObservable } from 'mobx';
 import { Messages } from '@openreplay/tracker';
-import log from './log';
 import { Encoder, sha1 } from './syncod';
-export default function (opts = {}) {
-    const options = Object.assign({
-        predicate: () => true,
-        action: true,
-        reaction: true,
-        transaction: true,
-        compute: true,
-    }, opts);
+// export interface Options {
+//   observables: Array<IObservable> // | {[key:string]:IObservable}
+// }
+const CH_FIELDS = {
+    type: true,
+    observableKind: true,
+    name: true,
+    newValue: true,
+    oldValue: true,
+    index: true,
+    removedCount: true,
+    added: true,
+    removed: true,
+    addedCount: true,
+};
+export default function ( /*opts: Partial<Options> = {}*/) {
+    // const options: Options = Object.assign(
+    //   {
+    //     //observables: [],
+    //   },
+    //   opts,
+    // );
     return (app) => {
@@ -18,19 +31,32 @@ if (app === null) {
         const encoder = new Encoder(sha1, 50);
-        spy(app.safe(ev => {
-            if (!options.predicate(ev))
-                return;
-            const { type } = ev;
-            ev = options[type] && log[type] && log[type](ev);
-            if (!ev)
-                return;
-            if (typeof ev.name === 'string' && ev.name) {
-                app.send(Messages.StateAction(ev.name));
-            }
-            const payload = encoder.encode(ev);
+        const makeObservableChangeHandle = (obj) => {
+            const name = getDebugName(obj);
+            const payload = encoder.encode({ type: "init", value: obj });
             const table = encoder.commit();
             for (let key in table)
                 app.send(Messages.OTable(key, table[key]));
-            app.send(Messages.MobX(type, payload));
-        }));
+            app.send(Messages.MobX(name, payload));
+            return (change) => {
+                const ch = Object.keys(change)
+                    .filter(key => CH_FIELDS[key])
+                    .reduce((obj, key) => {
+                    obj[key] = change[key];
+                    return obj;
+                }, {});
+                //app.send(Messages.StateAction(neme));
+                const payload = encoder.encode(ch);
+                const table = encoder.commit();
+                for (let key in table)
+                    app.send(Messages.OTable(key, table[key]));
+                app.send(Messages.MobX(name, payload));
+            };
+        };
+        return (obj) => {
+            if (!isObservable(obj)) {
+                console.warn("OpenReplay tracker-mobx: ", obj, " is not an observable value");
+                return;
+            }
+            observe(obj, makeObservableChangeHandle(obj));
+        };
     };
 }

package.json

 {
   "name": "@openreplay/tracker-mobx",
   "description": "Tracker plugin for MobX events recording",
-  "version": "3.0.0",
+  "version": "3.4.4",
   "keywords": [
@@ -27,7 +27,7 @@ "mobx",
     "@openreplay/tracker": "^3.0.0",
-    "mobx": "^4.15.7"
+    "mobx": "^6.0.0"
   },
   "devDependencies": {
     "@openreplay/tracker": "^3.0.3",
-    "mobx": "^4.15.7",
+    "mobx": "^6.0.0",
     "prettier": "^1.18.2",
@@ -34,0 +34,0 @@ "replace-in-files-cli": "^1.0.0",

README.md

@@ -11,5 +11,6 @@ # OpenReplay Tracker MobX plugin
 Initialize the `@openreplay/tracker` package as usual and load the plugin into it.
-Then put the generated middleware into your Redux chain.
+Then use returned value to track MobX obervables.
 
 ```js
+import { observable } from 'mobx';
 import Tracker from '@openreplay/tracker';
@@ -22,68 +23,9 @@ import trackerMobX from '@openreplay/tracker-mobx';
 
-tracker.plugin(trackerMobX());
-```
+const observe = tracker.plugin(trackerMobX());
 
-This plugin is inspired by [mobx-logger](https://github.com/winterbe/mobx-logger), hence it has similar configurations.
+const myArray = observable(['foo', 'bar', 42]);
+observe(myArray);
 
-The default configurations are following
 
-```js
-trackerMobX({
-  predicate: () => true,
-  action: true,
-  reaction: true,
-  transaction: true,
-  compute: true
-})
+myArray.push("Hello world"); // This mutation will be tracked
 ```
-
-You can disable logging for actions and computed properties by providing a static `trackerMobXConfig`. This is useful to protect the private user data and keep your logs clean.
-
-Here's an example of how to disable logging for all actions and computed properties for a given class:
-
-```js
-class MyModel {
-  static trackerMobXConfig: {
-    enabled: false
-  };
-
-  // ...
-}
-```
-
-Alternatively you can disable logging for particular class methods:
-
-```js
-class MyStore {
-  static trackerMobXConfig: {
-    methods: {
-      myAction: false
-    }
-  };
-
-  @action myAction() {
-    // calls to this method won't be logged
-  }
-}
-```
-
-You can combine the above examples to whitelist certain actions for being logged:
-
-```js
-class MyStore {
-  static trackerMobXConfig: {
-    enabled: false,
-    methods: {
-      myAction: true
-    }
-  };
-
-  @action myAction() {
-    // only calls to this method are being logged
-  }
-
-  // other methods won't be logged ...
-}
-```
-
-> Please keep in mind that at this point `trackerMobXConfig` is only available for actions (`@action`) and computed properties (`@computed`).

No alert changes

Improved metrics

Total package byte prevSize

39164

increased by28.54%

Number of package files

31

increased by10.71%

Lines of code

1249

increased by36.06%

Worsened metrics

Number of lines in readme file

30

decreased by-65.91%

No dependency changes