kubk / mobx-log Goto Github PK
View Code? Open in Web Editor NEWA logger + Redux devtools for Mobx 6+
License: MIT License
A logger + Redux devtools for Mobx 6+
License: MIT License
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:
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.
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.
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
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!
Is it needed? Put ๐ if you think so :)
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!
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.
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}/>
Would be great to extend api to log only certain info.
Can I use it with mobx-state-tree?
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!
Please add an ability to see logging for Map, Set, WeakMap, WeakSet. I suppose those things are missed in implementation.
Thanks
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!
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"
}
});
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
tsdx is not maintained anymore. Consider alternatives:
It's possible to have colorful diff for previous (red) and current (green) values:
console.log('%c before %c after', 'color:red', 'color: green')
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.