Fixes #89 (#92)

apps/next/.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_CTC_EDITOR=vscode-insiders
+NEXT_PUBLIC_CTC_EDITOR=cursor

apps/remix/tsconfig.json

@@ -17,8 +17,8 @@
       "~/*": ["./app/*"]
     },
     "skipLibCheck": true,
-
-    // Remix takes care of building everything in `remix build`.
-    "noEmit": true
+    "noEmit": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true
   }
 }

packages/click-to-react-component/jsconfig.json

@@ -2,6 +2,7 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
     "checkJs": true,
+    "lib": ["ES2017", "DOM"],
     // https://github.com/microsoft/TypeScript/issues/23219#issuecomment-773555768
     "maxNodeModuleJsDepth": 0,
     "module": "ESNext",

packages/click-to-react-component/package.json

@@ -43,8 +43,9 @@
     "react-merge-refs": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.6",
-    "@types/react-reconciler": "^0.26.6",
+    "@types/node": "^22.8.6",
+    "@types/react": "^18.3.12",
+    "@types/react-reconciler": "^0.28.8",
     "eslint": "^8.0.0",
     "eslint-config-react-app": "^7.0.1"
   },

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

@@ -9,7 +9,8 @@ import * as React from 'react'
 
 import { ContextMenu } from './ContextMenu.js'
 import { getPathToSource } from './getPathToSource.js'
-import { getSourceForElement } from './getSourceForElement.js'
+import { getReactInstancesForElement } from './getReactInstancesForElement.js'
+import { getSourceForInstance } from './getSourceForInstance.js'
 import { getUrl } from './getUrl.js'
 
 export const State = /** @type {const} */ ({
@@ -40,7 +41,25 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) {
       event
     ) {
       if (state === State.HOVER && target instanceof HTMLElement) {
-        const source = getSourceForElement(target)
+        const instance = getReactInstancesForElement(target).find((instance) =>
+          getSourceForInstance(instance)
+        )
+
+        if (!instance) {
+          return console.warn(
+            'Could not find React instance for element',
+            target
+          )
+        }
+
+        const source = getSourceForInstance(instance)
+
+        if (!source) {
+          return console.warn(
+            'Could not find source for React instance',
+            instance
+          )
+        }
         const path = getPathToSource(source, pathModifier)
         const url = getUrl({
           editor,
@@ -53,7 +72,7 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) {
         setState(State.IDLE)
       }
     },
-    [editor, state, target]
+    [editor, pathModifier, state, target]
   )
 
   const onClose = React.useCallback(

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

@@ -5,13 +5,20 @@
 export function getDisplayNameForInstance(instance) {
   const { elementType, tag } = instance
 
+  // https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-reconciler/src/ReactWorkTags.js
   switch (tag) {
     case 0: // FunctionComponent
     case 1: // ClassComponent
       return (
         elementType.displayName || elementType.name || 'Anonymous Component'
       )
 
+    case 3:
+      return 'HostRoot'
+
+    case 4:
+      return 'HostPortal'
+
     case 5: // HostComponent:
       return elementType
 
@@ -21,6 +28,9 @@ export function getDisplayNameForInstance(instance) {
     case 7: // Fragment
       return 'React.Fragment'
 
+    case 8:
+      return 'Mode'
+
     case 9: // ContextConsumer
       return 'Context.Consumer'
 
@@ -30,13 +40,63 @@ export function getDisplayNameForInstance(instance) {
     case 11: // ForwardRef
       return 'React.forwardRef'
 
-    case 15: // MemoComponent
+    case 12:
+      return 'Profiler'
+
+    case 13:
+      return 'SuspenseComponent'
+
+    case 14:
+      return 'MemoComponent'
+
+    case 15: // SimpleMemoComponent
       // Attempt to get name from wrapped component
-      return elementType.type.name || 'React.memo'
+      return elementType.type.name ?? 'MemoComponent'
 
     case 16: // LazyComponent
       return 'React.lazy'
 
+    case 17:
+      return 'IncompleteClassComponent'
+
+    case 18:
+      return 'DehydratedFragment'
+
+    case 19:
+      return 'SuspenseListComponent'
+
+    case 21:
+      return 'ScopeComponent'
+
+    case 22:
+      return 'OffscreenComponent'
+
+    case 23:
+      return 'LegacyHiddenComponent'
+
+    case 24:
+      return 'CacheComponent'
+
+    // @ts-expect-error Type '25' is not comparable to type 'WorkTag'.ts(2678)
+    case 25:
+      return 'TracingMarkerComponent'
+
+    // @ts-expect-error Type '26' is not comparable to type 'WorkTag'.ts(2678)
+    case 26:
+      return 'HostHoistable'
+
+    // @ts-expect-error Type '27' is not comparable to type 'WorkTag'.ts(2678)
+    case 27:
+      return 'HostSingleton'
+
+    // @ts-expect-error Type '28' is not comparable to type 'WorkTag'.ts(2678)
+    case 28:
+      return 'IncompleteFunctionComponent'
+
+    // @ts-expect-error Type '29' is not comparable to type 'WorkTag'.ts(2678)
+    case 29:
+      return 'Throw'
+
     default:
       console.warn(`Unrecognized React Fiber tag: ${tag}`, instance)
       return 'Unknown Component'

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

@@ -6,19 +6,18 @@
 /**
  * @param {Fiber} instance
  */
-export function getSourceForInstance({ _debugSource, _debugOwner }) {
-  // source is sometimes stored on _debugOwner
-  const source = _debugSource || (_debugOwner && _debugOwner._debugSource)
-
-  if (!source) return
+export function getSourceForInstance(instance) {
+  if (!instance._debugSource) {
+    return
+  }
 
   const {
     // It _does_ exist!
     // @ts-ignore Property 'columnNumber' does not exist on type 'Source'.ts(2339)
     columnNumber = 1,
     fileName,
     lineNumber = 1,
-  } = source
+  } = instance._debugSource
 
   return { columnNumber, fileName, lineNumber }
 }