kubk / mobx-log Goto Github PK

Can I use it with mobx-state-tree?

Is it needed? Put 👍 if you think so :)

Is it possible to support marking individual action/observable/computed loggable? This could be combined with the other local store filter request - #23

Ability to apply filters at global store, local store & for individual prop (observable/action/computed) will provide all the required flexibility during development.

Possible API could be similar to mobx's makeObservable:

mobx.makeObservable(this, {
    connectionStatus: observable
})

makeLoggable(this, {
  filters: {
    connectionStatus: true, // connectionStatus is an observable
    computeds: false,
    actions: false,
    observables: false,
  }
})

Thanks again!

It should be enough to just extract this part of code into separate file and function like installMobxFormatters: https://github.com/kubk/mobx-log/blob/master/src/make-loggable.ts#L43+L53

Also it is required to add export here: https://github.com/kubk/mobx-log/blob/master/src/index.ts
It will make this functions available as import { installMobxFormatters } from 'mobx-log';

@inoyakaigor Contributions are welcome!

It's possible to have colorful diff for previous (red) and current (green) values:

console.log('%c before %c after', 'color:red', 'color: green')

Please add an ability to see logging for Map, Set, WeakMap, WeakSet. I suppose those things are missed in implementation.

Thanks

jaredpalmer/tsdx#1065

Nice to have:

• the code should eliminate itself in prod

I'm using applyFormatters to have a better formatting of mobx containers (in Chrome), but I noticed that get properties are no longer shown when I do this. Is it possible to still shows these somehow? E.g. have the "three dots" for get properties that expand to the actual value when you click on it, or any other solution that comes to mind.

I found that class properties that is arrays has incorrect names in logs but not all the time:

I think in case of correct name changed exactly this property (store.arrayField): [] → [{…}, {…}, {…}]
While name is incorrect the changes are taking place within the object: store.arrayField[0].someProp = 1

UPD:
It happens there:

result:

Currently I added mobx-log and got wall of text:

I don't need almost all of this logs exclude few specific so I think it will be better split function makeLoggable to two almost the same:
makeAutoLoggable and makeLoggable. Difference between these is almost the same as makeAutoObservable and makeObservable:

constructor() {
  makeAutoLoggable(this)
}

constructor() {
  makeLoggable(this, [
    'methodName1', 
    'methodName2', 
    'variable1', 
  ])
}

i.e. makeLoggable requires explicit definition of methods/variables that should be logged.

I think it can be handful.

Today I learned mobx-log provide object with all stores into global scope. It's a cool feature but for case when name starts from acronums it is look not great:

Maybe it's better to make this feature optional?

Hi there,

Thanks bunch for the redux-devtools (browser extension) support. It's truly amazing to have both options - devtools support as well as the awesome console logging.

I'm working on a desktop app and I use redux-remotedev (standalone electron version) that I npx execute as a separate process and it listens to port 8000.

I'm my app that uses mobx-store, I have remotedev running at port 8000, and feeds the store changes to the standalone version.

I'm able to currently use this combo, but of course computed properties are not getting fed and doesn't display in the devtools.

Is it possible to use mobx-log with the standalone redux-devtools and get the computed values as well? The current mobx-log logger works great and shows the computed values anyway, so this is really a nice-to-have feature request.

Thanks bunch!

Currently, filters can be applied to show computeds, actions, observables.. but this is set within configureMakeLoggable which applies these filters globally.

Is it possible to override these global filters, locally for specific stores. This is very useful when having multiple stores but when we want to apply different filters to each of them.

Possible API could be when we mark a store loggable:

makeLoggable(this, {
  filters: {
    computeds: true,
    actions: true,
    observables: false,
  }
})

Thanks bunch!

Example store:

export class PanelStore {
  isOpen = false;

  constructor() {
    makeAutoObservable(this, {}, { autoBind: true });
    makeLoggable(this);
  }

  toggleIsOpen() {
    this.isOpen = !this.isOpen;
  }
}

...

const { panelStore: { toggleIsOpen } } = useStore();

...

<button onClick={toggleIsOpen}/>

Hi, thank you for building this useful library. :)

I've been playing with Redux Devtools and mobx-log, see below. Each action has an entry in RD, which is very useful. However, the state associated with each action seems to depend on what's passed in:

• For integers (and likely other primitives), calling the action (e.g. incrementFoo) results in the correct state (e.g. foo = 1).
• However, for objects containing other objects, calling the action (e.g. setTodos) results in a null state for that variable.
• If the object is changed to a primitives-only object, e.g. { someId: 'someValue' }, the state populates the variable.

Here's my store:

import { makeAutoObservable } from 'mobx'

import { makeLoggable } from 'mobx-log'

class MyStore {
  // All 3 properties are observable from makeAutoObservable
  todos: any = null
  foo = 0
  bar = 0

  constructor(rootStore) {
    makeAutoObservable(this)

    // mobx-log
    makeLoggable(this)
  }

  setTodos = (todos) => {
    this.todos = todos
  }

  incrementFoo = () => {
    this.foo = this.foo + 1
  }

  incrementBar = () => {
    this.bar = this.bar + 1
  }

  // Normally this would be an API call with */yield instead of async/await.
  // This is called externally by a React useEffect.
  fetchData = () => {
    // First action called - results in "MyStore@[email protected]" and the state shown below this code
    this.setTodos({
      // 'abc': { id: 'abc', firstName: 'First', lastName: 'Last' }, // Does not work
      'def': { id: 'def' },  // Does not work
      // 'def': 'xyz',  // Works
      // Blank object: Works
    })

    this.incrementFoo()

    this.incrementBar()
  }

}

export default MyStore

I'm using the following:

"mobx": "6.10.2",
"mobx-log": "2.2.1",
"mobx-react-lite": "4.0.5",
Redux Devtools: 3.1.3

Actual:

// In the "MyStore@[email protected]" entry:
{
  todos: null,
  foo: 0,
  bar: 0
}

Expected:

{
  todos: { 'def': { id: 'def' } },
  foo: 0,
  bar: 0
}

If I've missed some configuration or other gotcha, please let me know.

Readme requires update. observables: false instead of observable: false

import { configureMakeLoggable } from 'mobx-log';

configureMakeLoggable({
  filters: {
    computeds: true,
    actions: true,
    observable: false, // change to "observables: false"
  }
});

it happens when a click handler passed directly as a closure: <button onClick={store.close}>...

I get the error "using mobx-log without an initializer function is deprecated" when I do as the README says

Repro MOBX-LOG-TEST-CASE.ZIP

Entrypoint (client.tsx). Pay attention to order of call configureDevtools() and import an App component:

import {render} from 'react-dom'
import {configureDevtools} from 'mobx-log'
configureDevtools()

import {configure} from 'mobx'

import {App} from './App'

configure({
    enforceActions: 'always'
})

render(
    <App />,
    document.getElementById('root')
)

which imports an app (App.tsx):

import React from 'react'
import {formsStore} from './stores/forms'

export const App = () => {
    console.log(formsStore)
    return <div>MY FOCKING OSOME APP</div>
}

which imports a store (stores/forms.ts):

import {makeAutoObservable} from 'mobx'
import {makeLoggable} from 'mobx-log'

class FormsStore {
    common: Record<string, any> = {}

    constructor() {
        makeAutoObservable(this)
        makeLoggable(this)
    }

    setValue = (key, value) => this.common[key] = value
}

const formsStore = new FormsStore

export {formsStore}

I found out webpack changed import order and I think thats why error caused

Would be great to extend api to log only certain info.

tsdx is not maintained anymore. Consider alternatives:

• https://github.com/developit/microbundle

jaredpalmer/tsdx#1065

It only happens with computeds due to this line: https://github.com/mobxjs/mobx/blob/e60b36c9c78ff9871be1bd324831343c279dd69f/packages/mobx/src/core/computedvalue.ts#L91

Related discussion: mobxjs/mobx#3341