Allow ReactCallSite to be passed to useOpenResource

This is basically a super set of ReactFunctionLocation but this will be
important to support stack traces.

Author: sebmarkbage

packages/react-devtools-core/src/standalone.js

@@ -26,7 +26,7 @@ import {
 import {localStorageSetItem} from 'react-devtools-shared/src/storage';
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 
 export type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
 export type StatusListener = (message: string, status: StatusTypes) => void;
@@ -144,8 +144,8 @@ async function fetchFileWithCaching(url: string) {
 }
 
 function canViewElementSourceFunction(
-  _source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  _source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ): boolean {
   if (symbolicatedSource == null) {
     return false;
@@ -156,8 +156,8 @@ function canViewElementSourceFunction(
 }
 
 function viewElementSourceFunction(
-  _source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  _source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ): void {
   if (symbolicatedSource == null) {
     return;

packages/react-devtools-fusebox/src/frontend.d.ts

@@ -34,17 +34,26 @@ export type ReactFunctionLocation = [
   number, // enclosing line number
   number, // enclosing column number
 ];
+export type ReactCallSite = [
+  string, // function name
+  string, // file name TODO: model nested eval locations as nested arrays
+  number, // line number
+  number, // column number
+  number, // enclosing line number
+  number, // enclosing column number
+  boolean, // async resume
+];
 export type ViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
 ) => void;
 export type CanViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => boolean;
 
 export type InitializationOptions = {

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -51,22 +51,22 @@ import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContex
 import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types';
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 import type {SourceSelection} from './Editor/EditorPane';
 
 export type TabID = 'components' | 'profiler';
 
 export type ViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
 ) => void;
 export type CanViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => boolean;
 
 export type Props = {

packages/react-devtools-shared/src/devtools/views/Editor/utils.js

@@ -7,11 +7,11 @@
  * @flow
  */
 
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 
 export function checkConditions(
   editorURL: string,
-  source: ReactFunctionLocation,
+  source: ReactFunctionLocation | ReactCallSite,
 ): {url: URL | null, shouldDisableButton: boolean} {
   try {
     const url = new URL(editorURL);

packages/react-devtools-shared/src/devtools/views/useOpenResource.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 
 import {useCallback, useContext, useSyncExternalStore} from 'react';
 
@@ -22,8 +22,8 @@ import {
 import {checkConditions} from './Editor/utils';
 
 const useOpenResource = (
-  source: null | ReactFunctionLocation,
-  symbolicatedSource: null | ReactFunctionLocation,
+  source: null | ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: null | ReactFunctionLocation | ReactCallSite,
 ): [
   boolean, // isEnabled
   () => void, // Open Resource