team-gryff / react-monocle Goto Github PK

View Code? Open in Web Editor NEW

2.5K 43.0 93.0 6.17 MB

A developer tool to visualize a React application's component hierarchy.

License: MIT License

JavaScript 99.45% HTML 0.55%

react component-hierarchy developer-tools visualization redux ast

react-monocle's People

Contributors

Stargazers

Watchers

react-monocle's Issues

Reduce of empty array with no initial value

ran monocle, got

monocle -c index.html -j js -b main.6b90ebb85e95149b7fca.js
Starting to strip comments from bundle file...
Took 1.104 seconds to strip comments input bundle file
/usr/local/lib/node_modules/react-monocle/src/previewParser.js:162
    .reduce((prev, curr) => {
     ^

TypeError: Reduce of empty array with no initial value
    at Array.reduce (native)
    at getComponentName (/usr/local/lib/node_modules/react-monocle/src/previewParser.js:162:5)
    at Object.modifySetStateStrings (/usr/local/lib/node_modules/react-monocle/src/previewParser.js:231:35)
    at /usr/local/lib/node_modules/react-monocle/bin/cmd.js:41:38
    at Object.<anonymous> (/usr/local/lib/node_modules/react-monocle/bin/cmd.js:57:3)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)

Can't parse React composition using { nestedElement } construct inside JSX element

Monocle is unable to parse components which use dynamic composition to render nested child components.

For example:

render: function () {
  const items = this.props.elements.map(element => <ListItem/>);
  return <div>
    {items}
  </div>
}

Support for React Router

Not properly identifying components defined in React Router routes

React Monocle Rewrite

Have had a number of months to reflect on React Monocle's current implementation and have come up with some ideas on potential rewrite of the tool.

Goals

Better modularization of internal mechanisms which handle the parsing, transformation and generation of React source code
Upgrade and modernize toolset being used (React, webpack, babel, etc.)
Simplify CLI to be more developer-friendly
More robust error handling and developer feedback

Major Changes

Use babylon parser in favor of acorn
Integrate and hook into react-dev-tools to utilize component hierarchy generation

Challenges

Integrating with react-dev-tools

Support directory of files

I want to pass a directory with all my component files

Monocle breaks on projects that call ReactDOM.render() in same file as main app component

To reproduce, run monocle in a project where the call to ReactDOM.render() and the reference to the top level component exist in the same .js file.

Generate HTML when not provided

When starting Monocle without an HTML file it should generate one that references the bundle.

add the -b and -c flags to the options

The run instructions mention them, but it's a good idea to make the options listing complete by explicitly adding the -b and -c flags as well.

double slash URLs

react-monocle/src/htmlParser.js

Line 22 in 86566a1

if (ele.search(/http/) !== -1) return ele;

Double slash URLs like below cannot be parsed:

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700,300&subset=latin,vietnamese" />

Not even the examples seem to work

This tool looks absolutely great, but unfortunately the documentation is basically non-existing. How would this work in a webpack context? What do you mean by react-bundle? It hasn't worked with any react related file I've given it!

I would really really want to use this thing, but has it died totally out?

Strip Comment failed, and the tool stop working

/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/extract-comments/lib/comments.js:55
      throw err;
      ^
Error: Line 1: Unexpected token <
    at constructError (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:2407:21)
    at createError (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:2426:17)
    at unexpectedTokenError (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:2500:13)
    at throwUnexpectedToken (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:2505:15)
    at parsePrimaryExpression (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:3307:13)
    at inheritCoverGrammar (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:2681:18)
    at parseLeftHandSideExpressionAllowCall (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:3414:20)
    at inheritCoverGrammar (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:2681:18)
    at parsePostfixExpression (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:3490:16)
    at parseUnaryExpression (/Users/pyaesone/.nvm/versions/node/v8.5.0/lib/node_modules/react-monocle/node_modules/esprima-extract-comments/node_modules/esprima/esprima.js:3550:20)

Highlighted link not always the correct link

When components are added based on a state change, the correct link may not highlight/animate. It always seems to be the last link of the tree. This is because the way we are updating the links are based on IDs assigned from D3's tree methods. In order to fix this, we need to come up with another way of assigning IDs for D3 to use, or find another way to determine what links are new.

TypeError: Cannot read property 'name' of null

When I run the following command:

monocle -c index.html -b scripts/index.js

I have this error:

Starting to strip comments from bundle file...
Took 0.508 seconds to strip comments input bundle file
C:\Users\XXX\AppData\Roaming\npm\node_modules\react-monocle\src\astGenerator.js:43
      } else if (node.declaration.name || node.declaration.id.name) {
                                                             ^

TypeError: Cannot read property 'name' of null
    at ast.body.forEach (C:\Users\XXX\AppData\Roaming\npm\node_modules\react-monocle\src\astGenerator.js:43:62)
    at Array.forEach (native)
    at astGenerator (C:\Users\XXX\AppData\Roaming\npm\node_modules\react-monocle\src\astGenerator.js:35:12)
    at files.map.ele (C:\Users\XXX\AppData\Roaming\npm\node_modules\react-monocle\bin\cmd.js:51:35)
    at Array.map (native)
    at glob (C:\Users\XXX\AppData\Roaming\npm\node_modules\react-monocle\bin\cmd.js:51:24)
    at f (C:\Users\XXX\AppData\Roaming\npm\node_modules\react-monocle\node_modules\once\once.js:17:25)
    at Glob.<anonymous> (C:\Users\XXX\AppData\Roaming\npm\node_modules\react-monocle\node_modules\glob\glob.js:147:7)
    at emitOne (events.js:96:13)
    at Glob.emit (events.js:188:7)

The file is bundle with webpack, non minimified, split into two chunks (I'm doing it in the main chunk).

I can't provide the original file so when I'll have time I'll try to reproduce it on a smaller javascript set and I'll update the post. I thought it would be good to post it if somebody had the same issue meanwhile.

..

UX - docs not clear, cryptic messages, too many CLI parameters(I suppose)

I wanted to try this package, but I didn't make through process of generating deps.

I think docs (both in readme and in CLI messages) are not clear what to do to make and run deps visualization.

lukasz@LitwaOnLine:~/atom-lupa😺:$ node_modules/.bin/monocle -b dist/bundle.js --directory=lib/ -j .js --entry=lib/atom-bindings/atom-main.js 
Starting to strip comments from bundle file...
Took 13.358 seconds to strip comments input bundle file
/Users/lukasz/atom-lupa/node_modules/react-monocle/bin/cmd.js:48
    if (files.length === 0) throw new Error('No files found (try specifying file path and extension)');
                            ^

Error: No files found (try specifying file path and extension)
    at glob (/Users/lukasz/atom-lupa/node_modules/react-monocle/bin/cmd.js:48:35)
    at f (/Users/lukasz/atom-lupa/node_modules/once/once.js:17:25)
    at Glob.<anonymous> (/Users/lukasz/atom-lupa/node_modules/glob/glob.js:147:7)
    at emitOne (events.js:96:13)
    at Glob.emit (events.js:188:7)
    at Glob._finish (/Users/lukasz/atom-lupa/node_modules/glob/glob.js:195:8)
    at done (/Users/lukasz/atom-lupa/node_modules/glob/glob.js:180:14)
    at Glob._processGlobStar2 (/Users/lukasz/atom-lupa/node_modules/glob/glob.js:632:12)
    at /Users/lukasz/atom-lupa/node_modules/glob/glob.js:621:10
    at RES (/Users/lukasz/atom-lupa/node_modules/inflight/inflight.js:23:14)

(I wanted to display dep graph of this repo: https://github.com/hex13/atom-lupa - this is Atom package which uses React components. Maybe I'm doing something wrong but like I said - docs/messages are not clear what I should do and why No files found (it doesn't write e.g. where monocle thought that it would find files)).

And - why do I have to precise all these parameters. What do they mean? It's not clear for me how monocle works (and what I should pass for it as input).

I think these Issues are somewhat related:
#142
#141

Support for Redux

Currently don't support state synchronization in applications using Redux.

Add support in future release

ambiguous documentation

in docs there are two options with shortcut -e (I suppose one of them is typo)

Entry	--entry (-e)	App entry point. Defaults to JSX file where ReactDOM.render is found.

Directory	--directory (-e)	directory of React files. Defaults to where Monocle was called.```

Make .js extension the default?

Dan Abramov recently made a good point in favor of using .js over .jsx as an extension while developing in React (facebook/create-react-app#87 (comment)). Would making the default to .js be the better option? If the default is .js, the directory option would have to be required until we find a better way of determining what/where your source code is.

Provide more helpful stack traces on failure

I am trying to get monocle running against an existing code base with ~20 components (and growing). I have run into a handful of issues and had to guess at what might have been causing them. Is it class properties (babel stage 1)? Is it exporting a stateless functional component (e.g. #125)? A simple typo that webpack handles but monocle does not?

Here's an example of the kind of error I am seeing:

Starting to strip comments from bundle file...
Took 7.455 seconds to strip comments input bundle file
/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:2223
    throw err
    ^

SyntaxError: Unexpected token (434:40)
    at Parser.pp$4.raise (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseIdent (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:2189:12)
    at Parser.pp$3.parsePropertyName (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:2052:101)
    at Parser.pp$3.parseObj (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:1988:14)
    at Parser.pp$3.parseExprAtom (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:1805:19)
    at Parser.parseExprAtom (/usr/local/lib/node_modules/react-monocle/node_modules/acorn-jsx/inject.js:383:24)
    at Parser.pp$3.parseExprSubscripts (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/usr/local/lib/node_modules/react-monocle/node_modules/acorn/dist/acorn.js:1597:21)

I am not sure if it is feasible, but it would be helpful if monocle could produce a bit more information about what file or component it is failing to parse successfully. That might allow me to be make more educated guesses about what to change. Ideally, monocle would be able to handle the code base as-is, but improved feedback would make it easier for me to be self-sufficient.

Thanks!

Does it support Typescript ?

Hi, my project is written is Typescript-React so can i use this ?

TypeError: Reduce of empty array with no initial value

With a big bundle file, I get this error:

$ monocle -c index.html -b dist/bundle.js
Starting to strip comments from bundle file...
Took 81.673 seconds to strip comments input bundle file
c:\Users\inf011\AppData\Roaming\npm\node_modules\react-monocle\src\previewParser
.js:162
.reduce((prev, curr) => {
^

TypeError: Reduce of empty array with no initial value
at Array.reduce (native)
at getComponentName (c:\Users\inf011\AppData\Roaming\npm\node_modules\react-
monocle\src\previewParser.js:162:5)
at Object.modifySetStateStrings (c:\Users\inf011\AppData\Roaming\npm\node_mo
dules\react-monocle\src\previewParser.js:231:35)
at c:\Users\inf011\AppData\Roaming\npm\node_modules\react-monocle\bin\cmd.js
:41:38
at Object. (c:\Users\inf011\AppData\Roaming\npm\node_modules\reac
t-monocle\bin\cmd.js:57:3)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)

Unknown Node Type: JSXExpressionContainer

We make heavy use of both Redux and React-Router so this might be an invalid bug, but thought I would report it nonetheless.

This is bundle is not minified, It has been deduped, but that's it.

Attempting to perform React Monocle on it without any other options aside from -c, produces the error in the attached image.

bundle.zip

Uncaught TypeError: Cannot read property 'enqueueSetState' of undefined

Upon launching the monocle app, an uncaught typeerror for an undefined property is thrown

TypeError and exit when trying to parse my JS

My app is working fine. I pointed monocle at my working JS bundle and I get the following error followed by an exit.

$ monocle --bundle static/js/main.334bd06e.js
Starting to strip comments from bundle file...
Took 0.844 seconds to strip comments input bundle file
/usr/local/lib/node_modules/react-monocle/src/previewParser.js:162
  	.reduce((prev, curr) => {
  	 ^

TypeError: Reduce of empty array with no initial value
    at Array.reduce (<anonymous>)
    at getComponentName (/usr/local/lib/node_modules/react-monocle/src/previewParser.js:162:5)
    at Object.modifySetStateStrings (/usr/local/lib/node_modules/react-monocle/src/previewParser.js:231:35)
    at /usr/local/lib/node_modules/react-monocle/bin/cmd.js:42:38
    at Object.<anonymous> (/usr/local/lib/node_modules/react-monocle/bin/cmd.js:59:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

Where is the output, visualization?

I specified bundle location and app entry point and i think i get a success message:

Starting to strip comments from bundle Took 1.4 seconds to strip comments input bundle file

But nothing else happens, where should i be looking for visualization?

Progress bar for the app

I nice progress bar for when it's stripping the bundle file. Would be really nice just to make sure it's working.

Quality of life improvement.

team-gryff / react-monocle Goto Github PK

react-monocle's People

Contributors

Stargazers

Watchers

Forkers

react-monocle's Issues

Goals

Major Changes

Challenges

Recommend Projects

Recommend Topics

Recommend Org