inversify-devtools

[remojansen]

Create a SPA with React the application will provide a GUI for kernel, bindings and resolution plan.

Visit inversify-devtools fro more info.

TODO

Log panel

• Log requests (use colour code)
• Request on click show details
• Log size
• Log clear
• Dependency tree chart

Kernel panel

• Display kernel
• Kernel on click display bindings
• Display bindings
• Binding on click display porps

Settings panel

• Settings save

Dev tasks

• Test case catch errors in inversify-logger-middleware
• Test case multiInjection in inversify-logger-middleware
• Update inversify-logger-middleware in inversify-dts
• Use Obj logger in devtools
• LogEntry and KeyValuePair should have unique identifiers #272 LogEntry and KeyValuePair should have unique identifiers
• Unit test SPA
• Publish SPA npm
• Wrap SPA into extension (inversify-chrome-devtools)

[remojansen]

Block by #220

[remojansen]

A small sneak peek https://www.youtube.com/watch?v=BmeTffguFio

[JoshuaKGoldberg]

@remojansen is this issue complete? Can you provide details on what else needs to be done?

[remojansen]

It is far from being completed. The main technical challenge is that ideally, we want the Devtools UI to run in a process (in a chrome extension or in a Nodejs child process). Then we need to connect your app to the Devtools process so it can access the container instance and its bindings.

The problem is that memory cannot be shared. I started to think about serialization but it won't work because, for example, binding constraints are functions and they are not serializable.

I'm sure that we can find a solution but I just don't have enough time to think about this at the moment 😢 because I'm writing a book about TypeScript. The project is not dead I plan to get back to it when I have time but if you want to help that would be awesome.

The actual UI is almost done (it is a Redux app) but the dependencies are very outdated.

[amir-arad]

i'm checking out InversifyJS, and would have loved it if I had some dev-tools lib to plug into my application in dev setup, so that i can at least enjoy it in development.
currently it seems that the devtools project has to catch up with the core lib. pitty.

[polesskiy-dev]

Any news or thoughts about implementation?

[remojansen]

This one is quite tricky to implement. The main problem is that you cannot share memory between de extension (Chrome) and the app. The extension needs to read the inversify container bindings but the only way is to serialize them. The problem is that the bindings contain functions and functions are not serializable. I have some ideas but not enough time to complete it right now :( Please feel free to work on it as a side project if you wish.

[rsaz]

Hi @remojansen good stuff. Is there any update in this project? Is this something will you continue to build? I think the idea is great, however it is here stale for while and I would love to ignite the conversation again and support you on building this product around Inversify.

Let us know, @notaphplover and I are currently the core maintainers of Inversify and would we are currently giving a lot of ❤️ to all Inversify ecosystem.

[remojansen]

Hi @rsaz Sorry but I can't work on this.

If someone wants to have a go at it, it should not be too complicated. The idea was to:

1. Use the Inversify middleware feature to send messages to another tool.

2. The tool has a UI that renders dependency trees and the list of bindings. I planned to create a react app and wrap the UI with something like Electron.

The best way to make this tool work on both the client and server side would probably be to run the tool in a custom port like localhost:3333 and get the Inversify middleware to send data to the tool via HTTP calls.

Thanks @notaphplover for all the hard work. I really appreciate your work. Inversify is about to reach 200M downloads it is clear to me that there is a large number of developers that like it and It would be sad to let something good die.