Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

[Electron] Support click Show Source to open file in editor#588

Merged
gaearon merged 2 commits into
facebook:masterfrom
jhen0409:rn-show-source
Apr 25, 2017
Merged

[Electron] Support click Show Source to open file in editor#588
gaearon merged 2 commits into
facebook:masterfrom
jhen0409:rn-show-source

Conversation

@jhen0409
Copy link
Copy Markdown
Contributor

@jhen0409 jhen0409 commented Mar 19, 2017

This PR made click Show Source to open file in editor in Electron part, if we used babel-plugin-transform-react-jsx-source):

2017-03-19 22_37_24

Example for RN

  • Add launchEditor, it's mirror from react-native packager, have changes:
    • Remove projectRoots, we shouldn't get it here
    • Clear logs
  • Add showComponentSource prop for open file in editor

Copy link
Copy Markdown
Contributor

@suchipi suchipi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good; makes sense.

port?: number,
resolveRNStyle?: (style: number) => ?Object,
isAppActive?: () => boolean,
openFileInEditor?: () => {},
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This type doesn't look right; openFileInEditor has no return value. It should probably be () => void instead.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@suchipi you're right, thank you! 👍


import type Bridge from '../../agent/Bridge';

module.exports = function setupRNOpenFile(bridge: Bridge, openFileInEditor: () => {}) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The type should be () => void here, too.

) {
return;
}
var source = el._reactInternalInstance._currentElement._source;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code is coupled to React internal representation (which is changing as we speak). Can you rewrite it so that it uses the “data” (see getData()) just like the frontend code? This way this won’t break when we switch to Fiber.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it. I rewrote it with getData and getDataFiber, I refer to this implementation for check Fiber.

(prev, curr) => prev ? prev[curr] : null,
window
);
var inst = el._reactInternalInstance;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry I wasn't clear, I didn't mean importing getData itself. I meant accessing the node data structure (that is generated by getData when renderer attaches). You are still accessing the "opaque nodes" (el) which is a problem (they're implementation details).

Agent has access to "data" in this.elementData. However I don't think it's meant to be a public field.

I would look at showComponentSource in Panel instead. This looks like related code (not sure if it's used though). Perhaps this is a better place to implement it, and somehow inject an implementation there?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would look at showComponentSource in Panel instead.

I tried node.get('source') just worked in Panel, obviously I did something unnecessarily. 😂

Also, I think it would be great if we just do launchEditor in Electron part, this will don't need go to RN process (call openFileInEditor) and support non-RN platforms, what do you think?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried node.get('source') just worked in Panel, obviously I did something unnecessarily. 😂

Sounds awesome!

I think it would be great if we just do launchEditor in Electron part, this will don't need go to RN process (call openFileInEditor) and support non-RN platforms, what do you think?

I don’t fully understand but if it’s better, go for it!

@jhen0409 jhen0409 changed the title [React Native] Support click Show Source to open file in editor [Electron] Support click Show Source to open file in editor Apr 21, 2017
@jhen0409
Copy link
Copy Markdown
Contributor Author

jhen0409 commented Apr 21, 2017

@gaearon I changed this PR as #588 (comment).

  • Add launchEditor, it's mirror from react-native packager, have changes:
    • Remove projectRoots, we shouldn't get it here
    • Clear logs
  • Add showComponentSource prop for open file in editor

Due to I removed projectRoots so I guess some editors cannot open file to the correct workspace, but currently I can sure it working on Atom and VSCode.

@gaearon
Copy link
Copy Markdown
Contributor

gaearon commented Apr 25, 2017

This looks awesome. I love it. Thanks!

@gaearon gaearon merged commit 33718ad into facebook:master Apr 25, 2017
@gaearon
Copy link
Copy Markdown
Contributor

gaearon commented Apr 25, 2017

Please see also: #625.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants