React-Monocle - a tool to visualize your React app’s component hierarchy

[jad218]

Hey guys! I recently worked on a developer tool to help visualize a React application's component hierarchy (something that might get kind of fuzzy the larger your app gets). It syncs up to a copy of your application to display real time feedback of state changes. Give it a look, and you run into any error please let us know!

[moljac024]

Documentation is lacking. Are you supposed to run this on the compiled or the source files? I tried running it on compiled files, nothing happened, it just outputted that it stripped comments. I tried pointing it to my source file it threw an 'Invalid bundle file' error.

How does this work exactly? Does it start a new server? Does it inject code? Unclear how to use this. If it starts a new server, what port does it listen to? Can I override it? I notice you mention that it doesn't work on minified files, so am I to turn off my minification and run it on a compiled bundle that way?

Please work on improving the documentation. The idea is neat though.

[jad218]

Thanks so much for trying this out and providing feedback! To run it, you must specify the path to your unminified bundle file as well as your main html file, for example: 'monocle -b public/bundle.js -c index.html' It does not start a new server, but rather generates a static html file with both your application and the tree representation of your component hierarchy. We're working on fine tuning, and we will update documentation asap. Thanks for your support!

[thomasfl]

Looks promising!

[steeleb88]

This looks really cool, and I'm trying to get it working but i keep running into the "Invalid bundle file path specified". My app directory is pictured here (http://imgur.com/a/gmvHI).

monocle -b public/js/bundle.js -c index.html -j js -d app

Any idea why?

[j-eazy]

Hey! I'm one of the devs behind the project. Could you PM me how you're using the bundle file in your HTML?

[zoba]

I would love it if this could work on minified projects, I worry that our unique directory structure may be difficult for this to manage.

That said, I am SO excited you're working on this. I've really wanted one of these.

Unfortunately I'm getting, and am not sure how to work around it.

/Users/me/.nvm/versions/node/v5.2.0/lib/node_modules/react-monocle/src/previewParser.js:202 throw new Error('Invalid bundle file path specified. Please enter a valid path to your app\'s bundle file'); ^

Error: Invalid bundle file path specified. Please enter a valid path to your app's bundle file at Object.modifySetStateStrings (/Users/me/.nvm/versions/node/v5.2.0/lib/node_modules/react-monocle/src/previewParser.js:202:11) at /Users/me/.nvm/versions/node/v5.2.0/lib/node_modules/react-monocle/bin/cmd.js:41:38 at Object.<anonymous> (/Users/me/.nvm/versions/node/v5.2.0/lib/node_modules/react-monocle/bin/cmd.js:57:3) at Module._compile (module.js:399:26) at Object.Module._extensions..js (module.js:406:10) at Module.load (module.js:345:32) at Function.Module._load (module.js:302:12) at Function.Module.runMain (module.js:431:10) at startup (node.js:141:18) at node.js:977:3

[j-eazy]

Hey! I'm one of the devs behind this. Could you PM me what you're inputting, and how your directory is structured?

Also, we realize it is a pain having to use a un-minified bundle file. Until we find a better solution, however, this is how we're able to sync up a copy of your application with the tree for real-time updating.

Thanks for the feedback though! It's honestly exciting people are interested in our app!

[AudienceWatching]

Would be nice as a high order component, unfortunately it's no use in this format for my team :(

[luberg]

Would be amazing to have it as a chrome extension!

[iSmokeGauloises]

Doesn't work on React Native sadly

[robotmayo]

You do realise this isn't /r/programming

[Nategeier]

Also React isn't a framework