diff --git a/.changeset/four-geckos-suffer.md b/.changeset/four-geckos-suffer.md new file mode 100644 index 0000000..bad7e02 --- /dev/null +++ b/.changeset/four-geckos-suffer.md @@ -0,0 +1,5 @@ +--- +'click-to-react-component': minor +--- + +support jb ide diff --git a/packages/click-to-react-component/README.md b/packages/click-to-react-component/README.md index ea23514..9687519 100644 --- a/packages/click-to-react-component/README.md +++ b/packages/click-to-react-component/README.md @@ -18,7 +18,7 @@ [Create React App](https://create-react-app.dev/), & [Vite](https://github.com/vitejs/vite/tree/main/packages/plugin-react) that use [@babel/plugin-transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) -- Supports `vscode` & `vscode-insiders` & `cursor` [URL handling](https://code.visualstudio.com/docs/editor/command-line#_opening-vs-code-with-urls) +- Supports `vscode`, `vscode-insiders`, `cursor` [URL handling](https://code.visualstudio.com/docs/editor/command-line#_opening-vs-code-with-urls), and JB IDEs like `WebStorm` (requires [IDE Remote Control](https://plugins.jetbrains.com/plugin/19991-ide-remote-control)) - Automatically **tree-shaken** from `production` builds - Keyboard navigation in context menu (e.g. , , ) - More context & faster than using React DevTools: diff --git a/packages/click-to-react-component/src/ClickToComponent.js b/packages/click-to-react-component/src/ClickToComponent.js index 148a863..4ca930c 100644 --- a/packages/click-to-react-component/src/ClickToComponent.js +++ b/packages/click-to-react-component/src/ClickToComponent.js @@ -61,14 +61,17 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) { ) } const path = getPathToSource(source, pathModifier) - const url = getUrl({ + const [url, isURLScheme] = getUrl({ editor, pathToSource: path, }) event.preventDefault() - window.location.assign(url) - + if (isURLScheme) { + window.location.assign(url) + } else { + fetch(url); + } setState(State.IDLE) } }, @@ -78,12 +81,16 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) { const onClose = React.useCallback( function handleClose(returnValue) { if (returnValue) { - const url = getUrl({ + const [url,isURLScheme] = getUrl({ editor, pathToSource: returnValue, }) - window.location.assign(url) + if (isURLScheme) { + window.location.assign(url) + } else { + fetch(url); + } } setState(State.IDLE) @@ -247,11 +254,12 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) { <${FloatingPortal} key="click-to-component-portal"> - ${html`<${ContextMenu} - key="click-to-component-contextmenu" - onClose=${onClose} - pathModifier=${pathModifier} - />`} + ${html` + <${ContextMenu} + key="click-to-component-contextmenu" + onClose=${onClose} + pathModifier=${pathModifier} + />`} string