@react-native/debugger-frontend/dist/third-party/front_end/panels/react_devtools/react_devtools.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../core/i18n/i18n.js";import*as t from"../../core/common/common.js";import*as i from"../../core/host/host.js";import*as n from"../../core/sdk/sdk.js";import*as o from"../../models/bindings/bindings.js";import*as s from"../../models/logs/logs.js";import*as r from"../../models/workspace/workspace.js";import*as a from"../../third_party/react-devtools/react-devtools.js";import*as l from"../../ui/legacy/legacy.js";import*as d from"../../models/react_native/react_native.js";class c extends n.SDKModel.SDKModel{static FUSEBOX_BINDING_NAMESPACE="react-devtools";#e;#t;#i=new Set;#n=!1;#o=!1;#s=null;#r=null;constructor(e){super(e),this.#e={listen:e=>(this.#i.add(e),()=>{this.#i.delete(e)}),send:(e,t)=>{this.#a({event:e,payload:t})}};const t=e.model(d.ReactDevToolsBindingsModel.ReactDevToolsBindingsModel);if(null===t)throw new Error("Failed to construct ReactDevToolsModel: ReactDevToolsBindingsModel was null");this.#t=t,t.addEventListener("BackendExecutionContextCreated",this.#l,this),t.addEventListener("BackendExecutionContextUnavailable",this.#d,this),t.addEventListener("BackendExecutionContextDestroyed",this.#c,this),window.addEventListener("beforeunload",this.#h)}dispose(){this.#s?.removeListener("reloadAppForProfiling",this.#m),this.#s?.shutdown(),this.#t.removeEventListener("BackendExecutionContextCreated",this.#l,this),this.#t.removeEventListener("BackendExecutionContextUnavailable",this.#d,this),this.#t.removeEventListener("BackendExecutionContextDestroyed",this.#c,this),window.removeEventListener("beforeunload",this.#h),this.#s=null,this.#r=null,this.#i.clear()}ensureInitialized(){this.#n||(this.#n=!0,this.#u())}async#u(){try{const e=this.#t;await e.enable(),e.subscribeToDomainMessages(c.FUSEBOX_BINDING_NAMESPACE,(e=>this.#g(e))),await e.initializeDomain(c.FUSEBOX_BINDING_NAMESPACE),this.#o=!0,this.#p()}catch(e){this.dispatchEventToListeners("InitializationFailed",e.message)}}isInitialized(){return this.#o}getBridgeOrThrow(){if(null===this.#s)throw new Error("Failed to get bridge from ReactDevToolsModel: bridge was null");return this.#s}getStoreOrThrow(){if(null===this.#r)throw new Error("Failed to get store from ReactDevToolsModel: store was null");return this.#r}#g(e){if(e)for(const t of this.#i)t(e)}async#a(e){const t=this.#t;if(!t)throw new Error("Failed to send message from ReactDevToolsModel: ReactDevToolsBindingsModel was null");return await t.sendMessage(c.FUSEBOX_BINDING_NAMESPACE,e)}#h=()=>{this.#s?.shutdown()};#l(){const e=this.#t;if(!e)throw new Error("ReactDevToolsModel failed to handle BackendExecutionContextCreated event: ReactDevToolsBindingsModel was null");e.isEnabled()?this.#p():this.ensureInitialized()}#p(){this.#s=a.createBridge(this.#e),this.#r=a.createStore(this.#s,{supportsReloadAndProfile:!0}),this.#s.addListener("reloadAppForProfiling",this.#m),this.dispatchEventToListeners("InitializationCompleted")}#m(){const e=n.TargetManager.TargetManager.instance().primaryPageTarget();e?.pageAgent().invoke_reload({ignoreCache:!0})}#d({data:e}){this.dispatchEventToListeners("InitializationFailed",e)}#c(){this.#s?.shutdown(),this.#s=null,this.#r=null,this.#i.clear(),this.dispatchEventToListeners("Destroyed")}}n.SDKModel.SDKModel.register(c,{capabilities:4,autostart:!1});var h=Object.freeze({__proto__:null,ReactDevToolsModel:c});const m={sendFeedback:"[FB-only] Send feedback"},u=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsViewBase.ts",m),g=e.i18n.getLocalizedString.bind(void 0,u);function p(e,i){const{sourceURL:n,line:a,column:l}=i||e;!async function(e,i,n){const a=r.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(e);if(a){const e=await o.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().normalizeUILocation(a.uiLocation(i,n));return void t.Revealer.reveal(e)}const l=o.ResourceUtils.resourceForURL(e);if(l)return void t.Revealer.reveal(l);const d=s.NetworkLog.NetworkLog.instance().requestForURL(e);if(!d)throw new Error("Could not find resource for "+e);t.Revealer.reveal(d)}(n,a-1,l-1)}class v extends l.View.SimpleView{#v;#E=null;constructor(e,t){super(t,!0),this.registerRequiredCSS(a.CSS),this.#v=e,this.#f(),n.TargetManager.TargetManager.instance().observeModels(c,this),this.element.style.userSelect="text"}modelAdded(e){this.#E=e,e.addEventListener("InitializationCompleted",this.#b,this),e.addEventListener("InitializationFailed",this.#w,this),e.addEventListener("Destroyed",this.#C,this),e.isInitialized()?this.#D():e.ensureInitialized()}modelRemoved(e){e.removeEventListener("InitializationCompleted",this.#b,this),e.removeEventListener("InitializationFailed",this.#w,this),e.removeEventListener("Destroyed",this.#C,this)}#b(){this.#D()}#w({data:e}){this.#x(e)}#C(){this.#f()}#D(){this.#B();const e=this.#E;if(null===e)throw new Error("Attempted to render React DevTools panel, but the model was null");const t=window.matchMedia("(prefers-color-scheme: dark)").matches;("components"===this.#v?a.initializeComponents:a.initializeProfiler)(this.contentElement,{bridge:e.getBridgeOrThrow(),store:e.getStoreOrThrow(),theme:t?"dark":"light",canViewElementSourceFunction:()=>!0,viewElementSourceFunction:p})}#f(){this.#B();const e=document.createElement("div");e.setAttribute("style","display: flex; flex: 1; justify-content: center; align-items: center");const t=document.createElement("span");t.classList.add("spinner"),e.appendChild(t),this.contentElement.appendChild(e)}#x(e){this.#B();const t=document.createElement("div");t.setAttribute("style","display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center");const n=document.createElement("div");n.setAttribute("style","font-size: 3rem"),n.innerHTML="❗";const o=document.createElement("p");if(o.setAttribute("style","user-select: all"),o.innerHTML=e,t.appendChild(n),t.appendChild(o),this.contentElement.appendChild(t),globalThis.FB_ONLY__reactNativeFeedbackLink){const e=globalThis.FB_ONLY__reactNativeFeedbackLink,n=l.UIUtils.createTextButton(g(m.sendFeedback),(()=>{i.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}),{className:"primary-button",jslogContext:"sendFeedback"});t.appendChild(n)}}#B(){this.contentElement.removeChildren()}}const E={title:"⚛️ Components (React DevTools)"},f=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsComponentsView.ts",E),b=e.i18n.getLocalizedString.bind(void 0,f);var w=Object.freeze({__proto__:null,ReactDevToolsComponentsViewImpl:class extends v{constructor(){super("components",b(E.title))}}});const C={title:"⚛️ Profiler (React DevTools)"},D=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsProfilerView.ts",C),x=e.i18n.getLocalizedString.bind(void 0,D);var B=Object.freeze({__proto__:null,ReactDevToolsProfilerViewImpl:class extends v{constructor(){super("profiler",x(C.title))}}});export{w as ReactDevToolsComponentsView,h as ReactDevToolsModel,B as ReactDevToolsProfilerView};