Support for onOpenComponent callback

[frantic]

This PR adds support for onOpenFile callback. When set, it will be called instead of opening the file with the default editor. This change will enable the support for the long tail of editors and will allow other products to build on top of click-to-component.

Usage

<ClickToComponent onOpenComponent={(source) => alert(source.fileName)} />

Fixes #28

[changeset-bot]

🦋 Changeset detected

Latest commit: 44a52e3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
click-to-react-component	Minor
remix-5961	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ericclemmons]

Wow! Thanks for taking the initiative! This definitely seems like a need.

What do you think about moving it up one level before the path is crafted. Like, something that accepts { editor, source }?

Such as onOpenComponent({ source }) or similar?

I learned that different editors have different URL schemes, so it'd give the opportunity for people to customize it.

Then, our default implementation would look like:

onOpenComponent = ({ editor, source }) => {
  const path = getPathToSource(source)
  const url = `${editor}://file/${path}`

  window.open(url);
}

[frantic]

Oh I see, source has a file name, line & column. So e.g. for vim it would be +{line} {file}. The only drawback here is the user would have to manually import and call getPathToSource or write their own.

Is there a reason you have editor in onOpenComponent: ({ editor, source }) => void? This prop is passed by the same callsite that sets the callback, so they should already know the editor.

[ericclemmons]

No, no real reason. You're right – no sense adding it to an API unless it actually makes sense.

Based off of #26 , I think these are actually two distinct needs. So you can ignore my Qs :)

We'll probably end up with something like:

<ClickToComponent
  getURLFromSource={customMapper}
  onOpenURL={customOpener}
/>

[frantic]

I've renamed onOpenFile to onOpenComponent and made the callback accept Source instead of path. The users who want an advanced control over what happens can provide their own implementation that formats it and calls external API (via window.open, postMessage, fetch, etc.)

[frantic]

@ericclemmons do you think we can move forward with this? Would you rather see a different approach?

[zjffun]

Great, as far as I know this method can support the following four situations:

• Visual Studio Code Insiders
• WSL Error when runs from WSL #27
• Docker To support apps running in docker containers #58
• WebStorm Support for OpenFile to Intellij #35