Performance tab not visible on mobx-react 6.1.1

[deanvanniekerk]

I think there might be an issue with the latest version of mobx and mobx-react.
If i have the below installed I dont see the performance and components tabs

"mobx": "5.10.1",
"mobx-react": "6.1.1",

but if i downgrade to

"mobx": "3.6.2",
"mobx-react": "4.4.3",

then all works fine.

Thank for the great plugin by the way 👍

[deanvanniekerk]

To be more specific with the versions. I lose the tabs when going from mobx-react 5.4.4 -> 6.0.0

If it helps im using typescript, this is my config

{
    "compilerOptions": {
        "strictNullChecks": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "noEmit": true,
        "target": "esnext",
        "allowJs": true,
        "jsx": "react",
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        },
        "typeRoots": ["node_modules/@types", "typings"],
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "include": ["./src/"]
}

[Tsury]

I just see the Changes tab, using

"mobx": "5.10.1",
"mobx-react": "6.1.1",
"mobx-react-devtools": "6.1.1",

Using standalone version.

How can I also see the Components tab?

[blinkcat]

only changes tab, using

"mobx": "^4.12.0",
"mobx-react": "^6.1.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",

[FrederickIge]

same issue here

[ghost]

me too.

[ibovegar]

Using firefox plugin. Same issue as well.

[bichotll]

Same here.

[alexalv]

Same here, using

"mobx": "^5.13.0",
"mobx-react": "^6.1.3",

[damienallen]

Same problem with FF, Chrome and the standalone version.

{
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.3",
}

[nulldef]

Same problem here

[williamoliveira]

Is anyone working on a fix for this or is this project dead?

[anikethsaha]

I am trying to fix it. Hope to submit the ASAP.

[williamoliveira]

@anikethsaha is it a complex fix? has much changed?

[anikethsaha]

I guess no, updating a few methods. But getting other errors so just fixing those.
I have a fix ready for it but it will break other things. 😄

[danielkcz]

From mobx-react 6 changelog ... I can believe nobody here actually read it 😆

[anikethsaha]

Yea I actually forgot to comment about these . i had a look in the changelog and I already started without this. Sorry for not mentioning here.
I was trying to port the devtool support for v6 but couldn't do it as it was not easy as I thought.

[williamoliveira]

@FredyC do you have some info on why it was killed?

[danielkcz]

I think @mweststrate can answer that better, but mostly I believe it was because there are better tools today (like React Devtools) so there is no point having another specific tool.

[mweststrate]

Correct, with React 16 the devtools can do exactly the same thing as we did for performance measurements before. So all the code that was needed for that (quite some) has been dropped from mobx-react, making the package leaner instead.

…

On Mon, Oct 14, 2019 at 5:00 PM Daniel K. ***@***.***> wrote: I think @mweststrate <https://github.com/mweststrate> can answer that better, but mostly I believe it was because there are better tools today (like React Devtools) so there is no point having another specific tool. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#56?email_source=notifications&email_token=AAN4NBH72OQW4VGBGKKHBCDQOSJR5A5CNFSM4H3Y6MBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBFK6FA#issuecomment-541765396>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBE6S25PPXCXGUP6FJ3QOSJR5ANCNFSM4H3Y6MBA> .

[williamoliveira]

Ok, that covers re-rendering visualization, but what about visualizing what components reacts to and what actions are updating?

[danielkcz]

@williamoliveira See the last point in the picture I posted above or original changelog with links. I don't have personal experience with it, though. Strangely enough, I never had a need to investigate why is something re-rendering, it kinda made sense to me without any tool.

[Venryx]

Just wanted to mention that this is one of the first things I'll be looking to add to my fork here: https://github.com/Venryx/mobx-devtools-advanced

We'll see if I succeed in implementing it, but it's certainly something I'll try to add, as deep dependency tree viewing is something I really miss from my custom dependency tracking system I'd used prior to transitioning to MobX.

[Venryx]

Just got a very primitive implementation working for viewing the list of observables that an @observer component is watching:

I want to emphasize that the screenshot above is not at all representative of the final state, it's just a first demonstration that the pathway for displaying the information is in place. The full implementation will have expanding of component subtrees like before, arbitrarily-deep expansion of the dependency tree for each component, no need to manually press the "Refresh" button for things, much nicer layout and styling, etc.

That said, the basic functionality does work, so if someone urgently needs the functionality, they can clone my forked repo and install it locally: https://github.com/Venryx/mobx-devtools-advanced

Local install instructions (possibly incomplete): https://github.com/Venryx/mobx-devtools-advanced/blob/master/Docs/Hacking.md

[Venryx]

Updates:

• The extension now lets you view the "deep dependencies" of a component.
• The data-viewer UI uses an expandable tree. (rather than flat json display)

I'll definitely work on this more, though progress may be sparse atm, since currently I'm only implementing the features I need to efficiently debug some issues in my main project.

Once I resolve those issues in my main project, I can revisit the extension to give it some much needed feature development and UI improvement.

[Venryx]

I've been making some more progress on my fork, but from now on I'll give updates on its development in this other issue: #55

[epodgaetskiy]

Hi!
Prefer use React Devtools extension for components tree and performance discuss