React-devtools: Autocomplete style names in RN style editor

[gaearon]

We should add autocomplete to the style editor keys, just like Chrome does.

[jobala]

@gaearon,

I will pick this up.

Where do I get started?

[gaearon]

I think @bvaughn might have tried to do it—let’s ask him.

[bvaughn]

Hey @gaearon, thanks for checking. I am interested in this task but I haven't started it yet so if @jobala would like to pick it up- he's welcome.

[bvaughn]

Let me know if you decide you aren't interested @jobala and I'll remove the "_someone is working on this_" label and maybe pick it up myself. 😄

[jobala]

@bvaughn,

This issue feels a little bit less trivial than the initial one,
I am sure I will learn a lot working on it.

What source files deal with logic related to this issue?

Also, is there any sort of white paper or resource that I could go through to understand the architecture of react-devtools?

[bvaughn]

What source files deal with logic related to this issue?

Unfortunately I have no pointers for getting started with this issue 😁 I haven't thought about it, beyond "_that would be cool to work on..._"

Also, is there any sort of white paper or resource that I could go through to understand the architecture of react-devtools?

Nope, unfortunately the READMEs in this repo are about it (at least that I'm aware of). I think this project could use an architectural cleanup at some point but in its current form, I think it's just kind of something that's evolved organically after a contributions from various people over the years.

[jobala]

In that case,

Rather than blindly going through the source files, we could pair on it 😄 .

I am available for a video call around this time, (I just realised am asking for too much 😅 ).

[bvaughn]

Sorry Japheth! I don't think my work schedule is really going to enable me to pair on this. No harm in asking though! 🙇

Happy to answer specific questions or provide advice if you run into snags on the way though.

[jobala]

@bvaughn @gaearon

Is there a shell like environment for React Native?

[bvaughn]

Not sure what you mean by that question.

You can test the style editor though by launching any React Native application (eg in an iOS or Android simulator) and then launching the electron devtools shell. Instructions are available here.

[jobala]

@bvaughn
That's exactly what I needed, thanks 😄

[jobala]

@bvaughn

So I did the following.

1. Installed react-devtools globally
2. Started a react-native app
3. Run the standalone react-devtools

As expected, the changes I made in the react-devtools source code were not reflected.

How do I make the changes I make reflect on the standalone dev tools?

[bvaughn]

Those steps you mentioned above don't seem to match with the instructions I linked you to in my previous comment, unless I'm misreading what you're saying.

Copied from the instructions page:

Developing

• Run npm run backend:watch and npm run standalone:watch in packages/react-devtools-core
• Run npm start in packages/react-devtools
• Refresh the app after it has recompiled on change
• For React Native, copy react-devtools-core to its node_modules to test your changes

[jobala]

@bvaughn,

I did some research on how to implement the autocomplete feature,
I came across awesomeplete.

The downside of using awesomeplete is that we need to know the style names beforehand,
and it will not be a trivial task to suggest possible values for a style name like chrome does.

Is there a better solution to this problem?

[bvaughn]

I see that awesomeplete says it's a "_zero dependencies_" lib which is fine, but since React DevTools already uses React, a single dependency (on React) wouldn't be a bad thing either. That being said, I don't know anything about awesomeplete so I can't comment off the top on whether that would be a good choice or not.

The downside of using awesomeplete is that we need to know the style names beforehand,
and it will not be a trivial task to suggest possible values for a style name like chrome does.

Agreed. Auto-complete for styles won't be possible without some sort of hard-coded values (either an explicit list or some algorithm that could build one up).

As for this, React Native does build up a list of style-names itself using ReactNativeStyleAttributes (which pulls in styles from TextStylePropTypes, TextStylePropTypes, and ViewStylePropTypes). We can't load these at runtime of course, but we could fork them essentially, if we wanted to mirror that list of props in react-devtools.

There's also the official docs page as well as this repo (which seems reasonably up to date at a glance) that we could use to double-check our inlined values.

[jobala]

@bvaughn,

I haven't had a lot of time to work on this,
You can take this up.

[ansumanshah]

Taking this up, will submit a PR shortly :)

[hopperhuang]

Is this feature complete ? is hard to positon which style sheet work on target component, when it's embed deeply, it hard to postion style sheet just through an style array. If this feature is finish, please tell me how to position style sheet through name, but not a number.

[bvaughn]

I don't think any PRs have been opened for this issue. I'll go ahead and remove the "someone is working on this" label, given how long it's been. Let me know if someone wants to work on this and I'll re-add it!

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools