feat(click-to-react-component): support jb ide

You must make sure that the plugin is installed and that the IDE has a project open when you use it.

Author: alanhe421

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) for URL handling)
 - Automatically **tree-shaken** from `production` builds
 - Keyboard navigation in context menu (e.g. <kbd>←</kbd>, <kbd>→</kbd>, <kbd>⏎</kbd>)
 - More context & faster than using React DevTools:

packages/click-to-react-component/src/ClickToComponent.js

@@ -61,14 +61,18 @@ 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 {
+          const win = window.open(url, '_blank')
+          setTimeout(() => win.close(), 60)
+        }
         setState(State.IDLE)
       }
     },
@@ -78,12 +82,17 @@ 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 {
+          const win = window.open(url, '_blank')
+          setTimeout(() => win.close(), 60)
+        }
       }
 
       setState(State.IDLE)
@@ -247,11 +256,12 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) {
     </style>
 
     <${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}
+        />`}
     </${FloatingPortal}
   `
 }

packages/click-to-react-component/src/getUrl.js

@@ -2,12 +2,20 @@
  * @param {Object} param
  * @param {string} param.editor
  * @param {string} param.pathToSource
+ * @returns {[string, boolean]} bool isURLScheme
  */
 export function getUrl({ editor, pathToSource }) {
+  if (JB_EDITORS.includes(editor)) {
+    // @see https://github.com/JetBrains/intellij-community/blob/a77365debaadcf00b888a977d89512f3f0f3cf9e/platform/built-in-server/src/org/jetbrains/ide/OpenFileHttpService.kt#L52-L59
+    return [`http://localhost:63342/api/file/${pathToSource}`, false]
+  }
   // Fix https://github.com/microsoft/vscode/issues/197319
   if (pathToSource[0] === '/') {
-    return `${editor}://file${pathToSource}`
+    return [`${editor}://file${pathToSource}`, true]
   }
 
-  return `${editor}://file/${pathToSource}`
+  return [`${editor}://file/${pathToSource}`, true]
 }
+
+export const JB_EDITORS = ['idea', 'appcode', 'clion', 'pycharm', 'phpstorm',
+  'rubymine', 'webstorm', 'rider', 'goland', 'rustrover']

packages/click-to-react-component/src/types.d.ts

@@ -1,6 +1,10 @@
 export { ClickToComponent } from './ClickToComponent'
+export { JB_EDITORS } from './getUrl'
 
-export type Editor = 'vscode' | 'vscode-insiders' | 'cursor' | string
+const JB_EDITORS = ['idea', 'appcode', 'clion', 'pycharm', 'phpstorm',
+  'rubymine', 'webstorm', 'rider', 'goland', 'rustrover'] as const
+
+export type Editor = 'vscode' | 'vscode-insiders' | 'cursor' | typeof JB_EDITORS[number] | string
 
 export type PathModifier = (path: string) => string