Comments (31)
Looks something changed in react and class resolving doesn't work (https://github.com/lahmatiy/component-inspector/blob/master/src/react/inspector/template-info/index.js#L73)
What is your React version?
from component-inspector.
0.14.0-rc1
from component-inspector.
Ok. I'll check it.
Also I see no code snippets in popup :(
Coming back to work on it later this week. Fixing issues as well.
from component-inspector.
I checked on 0.14.0-rc1 – it's works as expected. No link to class it means no meta information was attached to class.
Looks like problem with instrumenting here. Could you provide example of class definition you use?
from component-inspector.
I'm using es6 classes. Also I'm using a lot of component decorators. Some of my components have 4 or 5 higher order components on them attached via decorators.
import React, {PropTypes} from 'react';
import testable from 'frontend/utils/testable';
@testable()
export default class SignInForm extends React.Component {
static propTypes = {
// ...
}
render() {
return (
<form>
{/* ... */}
</form>
);
}
}
from component-inspector.
Still works to me :-/
Could you provide instrumented version of your example?
What version of babel
and babel-plugin-source-wrapper
? Is babel-plugin-source-wrapper
goes before any other plugins (except babel-plugin-react-display-name
)?
Also you can find an universal version in master
, as I promised. All react specifics could be found in https://github.com/lahmatiy/component-inspector/blob/master/src/api-adapter/react.js – maybe some mistake here (but I believe it's an instrumentation problem).
from component-inspector.
Variant 1: Class found, render method found, problem in source code.
export default class Test extends React.Component {
render() {
return <div>qwe</div>
}
}
Variant 2: Class and render method are found, but they are referenced to wrapped class. Problem in source code still exists.
function decorator(Component) {
return class Wrapper extends React.Component {
render() {
return <Component />
}
}
}
@decorator
export default class Test extends React.Component {
render() {
return <div>qwe</div>
}
}
Variant 3 (decorator from node_modules): class not found.
import {connect} from 'react-redux';
@connect()
export default class Test extends React.Component {
render() {
return <div>qwe</div>
}
}
from component-inspector.
So, class not found because inspector looking for a wrapped class, but that wrapped class doesn't instrumented.
from component-inspector.
Why source code contains html? I don't know.
I'm using:
"component-inspector": "^1.1.0",
"express-open-in-editor": "^1.0.0",
"babel-plugin-source-wrapper": "^1.1.1",
from component-inspector.
What about babel
version? I know resulting code for classes was changed some versions ago.
Why source code contains html? I don't know.
It tries get original source by request to server. Requested file is showing in popup header (/src/long/path/to/LocaleButtonsContainer.js
on your screenshot). I suppose server response with html
instead of original file.
I think we should find way to tell inspector to use bundle source (with its source map) if possible.
from component-inspector.
Thank you for your helpful examples.
Variants 2 and 3 are requiring investigation and improvements. I didn't know decorators could replace class it applied to for new one. Looks like a hack still :)
from component-inspector.
What about babel version?
"babel": "^5.8.23",
I suppose server response with html instead of original file.
Yes, you're right, it works after I configured file serving. But I don't like this.
Looks like a hack still
It's common practice in React ecosystem. Those classes called Higher Order Components like higher order functions.
from component-inspector.
As I realised general problem is caused using decorators (HOC actually).
Problem #3 is exists because connect
creates new class in react-redux
and I think this code isn't instrumented. I suppose only user code instrumenting now. Probably problem will gone when HOC will be processed as expected.
Yes, you're right, it works after I configured file serving. But I don't like this.
Initial solution was designed for basis.js, where no bundle in dev mode. And module subsytem has source of any executed module, as evaluate it on fly.
But I think we could improve solution here. Some ideas:
- scan document searching for any scripts, fetch those files and build modules map if possible. Ideally move it to Web Worker (or even to Service Worker in future). But additional requests to files are still required.
- middleware for dev-server (express or whatever), that serving source fragments by request. Maybe
express-open-in-editor
may be extended, or new middleware that would provide all necessary functionality.
Second one looks better.
from component-inspector.
Probably problem will gone when HOC will be processed as expected.
Problem is gone, but there are two more issues:
- Processing vendor code using Babel is too slow.
- Class link is still referenced to wrapper component.
Second one looks better.
I agree.
from component-inspector.
Problem is gone, but there are two more issues
It seems we have a misunderstanding. Problem with HOC is not solved yet (but just disscused with colleagues how to fix it). And when it will be fixed, it does not need to instrumenting libraries (in most cases).
I agree.
I'm going to implement new middleware for code fragment extracting. And one more that mix two middlewares (new one and express-open-in-editor
) to simplify setup.
from component-inspector.
Great news, I'll wait.
from component-inspector.
Mostly done on decorators. It requires new version of babel plugin required (not published yet). Also new custom viewer for details was implemented. Believe you'll like it :)
Some edge cases are left to fix. And I'm going to release it (and babel plugin for instrumenting). New express middlewares are coming next.
It would be great if you able to try it on your code base until release.
from component-inspector.
Installed babel plugin and inspector from master branches — no decorators support.
BTW your screenshot is great!
from component-inspector.
Looks like you forgot rebuild inspector.
from component-inspector.
You're right. Fixed.
from component-inspector.
Just notice component name on your screenshot: <Connect(Connect(...(SignInForm)))>
. Interesting how does it produced. I believe <SignInForm>
should be shown. But probably with decorator support it will be ok.
from component-inspector.
Basic decorator support is working:
Issues:
render
andclass
is shifted by 1:
First decorator is showing class of the component, second decorator is showing class of the first decorator.- It works with ES6 decorator syntax, but it doesn't work with classic decoration:
function decorator() {}
class Component {}
export default decorator(Component);
from component-inspector.
Thank you for feedback.
- It's simple bug, will fix asap.
- This issue is more complicated. Since there is no explicit evidences decorator is used. For static analysis it's just a function call. So I have no idea for now how to link wrapped class with class produced by "decorator" and ignore irrelevant cases :-/
from component-inspector.
Is it possible to separate those components to different levels?
<Connect(Testable(LocaleButtons))>
<Testable(LocaleButtons)>
<LocaleButtons>
</LocaleButtons>
</Testable(LocaleButtons)>
</Connect(Testable(LocaleButtons))>
from component-inspector.
from component-inspector.
render
andclass
is shifted by 1:
Fixed 4db0260
from component-inspector.
Is it possible to separate those components to different levels?
It's not clear to me. Do you really needs this?
<Connect(Testable(LocaleButtons))>
<Testable(LocaleButtons)>
...
</Testable(LocaleButtons)>
</Connect(Testable(LocaleButtons))>
I think it's noisy and not necessary. I want improve viewer for cases when wrapper adds extra makrup. But in simple cases virtual component is redundant.
Maybe I missed something. Could you provide more details?
from component-inspector.
Do you really needs this?
This is definitely better then Connect(Testable(LocaleButtons)) = React.createClass
.
I suggested this as an idea how to handle classic decorators.
from component-inspector.
Hi!
1.2 is published as is.
Can you move your suggestions to new issue? So we could close this issue since this thread has too many q/a.
from component-inspector.
done
from component-inspector.
Thank you a lot!
from component-inspector.
Related Issues (19)
- Implement posibility to fetch source code fragments by server API HOT 1
- Inspector doesn't work properly with classic ES5 decorator syntax HOT 4
- "open in editor" doesn't work on windows HOT 6
- Online Demo please? HOT 11
- Build non-minification bundles HOT 3
- What about babel6? HOT 4
- Is it possible to import inspector from webpack bundle? HOT 9
- Addition information in logInfo HOT 7
- Component Inspector doesn't work with React 15 HOT 2
- Invalid path to file on windows platform. HOT 3
- Any attempts at making this a chrome plugin? HOT 2
- How to make file locations visible? HOT 7
- Add support React 16.* HOT 3
- Hope be much frendly to setup custom API
- Alternative for basisjs-tools to open file in editor feature HOT 13
- Provide more info about instrumeting and `$devinfo` API HOT 4
- Improve description about `open file in editor` feature HOT 4
- `Open file in editor` is not supported HOT 53
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from component-inspector.