Add valid styles whitelist for style editor

[bvaughn]

Commit 4b3f6efb21edaeea48a14e581491bcaf72f9e3bf and https://github.com/facebook/react-devtools/pull/646 enabled the React Native style editor to work with react-native-web by injecting an resolveRNStyle property into the React DevTools hook.

As I'm working on the React DevTools version 4 style editor (https://github.com/bvaughn/react-devtools-experimental/pull/335) I am also adding style name validation by way of injecting a whitelist of valid styles. This change will be optional but it's a better developer experience if the whitelist is specified.

In order to support react-native-web as well as custom developer tools like Flipper, I'm exposing an additional hook property (nativeStyleEditorValidAttributes) which can be used to specify this whitelist. It would work just like the existing resolveRNStyle property, e.g.

https://github.com/necolas/react-native-web/blob/36dacb2052efdab2a28655773dc76934157d9134/packages/react-native-web/src/exports/StyleSheet/index.js#L13-L16

Could become something more like:

if (canUseDOM) {
  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  if (hook) {
    hook.resolveRNStyle = StyleSheet.flatten;
    hook.nativeStyleEditorValidAttributes = validStyleNames;
  }
}

[necolas]

Thanks! If resolveRNStyle were called something like nativeStyleFlattener and another new hook method like nativeStyleResolver were added it might allow live style editing to work for different renderers (like web) too. Let's chat when I'm back in mpk

[bvaughn]

Happy to chat when you're back in MPK. Don't really have an initial desire to compete with Chrome's style editor though for DOM, because it's going to be better unless we spend a lot of effort on ours.

[necolas]

Does V4 already support editing RN styles on the web though? No point passing the valid style names on web if editing RN styles in dev tools isn't reflected in the UI

[bvaughn]

I'm not sure I understand your question. Once https://github.com/facebook/react-devtools/pull/646, v4 will support RN (including editable styles).

I don't know what "editing RN styles on the web" means though. The web extension doesn't connect to RN. It does support editing RNW styles though, via this injected hook property that I only learned about yesterday.

[bvaughn]

For example:

What is not supported (yet) for RNW is style name validation.

[necolas]

Ok. Pretty sure that didn't used to work in the old version