@react-native/debugger-frontend
Advanced tools
Comparing version 0.76.0-rc.0 to 0.77.0-nightly-20240911-a05f9c677
@@ -1,1 +0,1 @@ | ||
import*as e from"../../core/sdk/sdk.js";const t="main",i="__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__";class n extends e.SDKModel.SDKModel{domainToListeners=new Map;messagingBindingName=null;enabled=!1;fuseboxDispatcherIsInitialized=!1;domainToMessageQueue=new Map;bindingCalled(e){if(null===this.messagingBindingName||e.data.name!==this.messagingBindingName)return;const t=e.data.payload;let i=null;try{i=JSON.parse(t)}catch(e){throw new Error("Failed to parse bindingCalled event payload",{cause:e})}if(i){const e=i.domain;if(this.fuseboxDispatcherIsInitialized){if(!this.isDomainMessagesQueueEmpty(e))throw new Error(`Attempted to send a message to domain ${e} while queue is not empty`);this.dispatchMessageToDomainEventListeners(e,i.message)}else this.queueMessageForDomain(e,i.message)}}queueMessageForDomain(e,t){let i=this.domainToMessageQueue.get(e);i||(i=[],this.domainToMessageQueue.set(e,i)),i.push(t)}flushOutDomainMessagesQueues(){for(const[e,t]of this.domainToMessageQueue.entries())if(0!==t.length){for(const i of t)this.dispatchMessageToDomainEventListeners(e,i);t.splice(0,t.length)}}isDomainMessagesQueueEmpty(e){const t=this.domainToMessageQueue.get(e);return void 0===t||0===t.length}subscribeToDomainMessages(e,t){let i=this.domainToListeners.get(e);i||(i=new Set,this.domainToListeners.set(e,i)),i.add(t)}unsubscribeFromDomainMessages(e,t){const i=this.domainToListeners.get(e);i&&i.delete(t)}dispatchMessageToDomainEventListeners(e,t){const i=this.domainToListeners.get(e);if(!i)return;const n=[];for(const e of i)try{e(t)}catch(e){n.push(e)}if(n.length>0)throw new AggregateError(n,`Error occurred in ReactDevToolsBindingsModel while calling event listeners for domain ${e}`)}async initializeDomain(t){const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error(`Failed to initialize domain ${t} for ReactDevToolsBindingsModel: runtime model is not available`);await n.agent.invoke_evaluate({expression:`void ${i}.initializeDomain('${t}')`})}async sendMessage(t,n){const o=this.target().model(e.RuntimeModel.RuntimeModel);if(!o)throw new Error(`Failed to send message from ReactDevToolsBindingsModel for domain ${t}: runtime model is not available`);const s=JSON.stringify(n);await o.agent.invoke_evaluate({expression:`${i}.sendMessage('${t}', '${s}')`})}async enable(){if(this.enabled)throw new Error("ReactDevToolsBindingsModel is already enabled");const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to enable ReactDevToolsBindingsModel: runtime model is not available");await this.waitForFuseboxDispatcherToBeInitialized().then((()=>t.agent.invoke_evaluate({expression:`${i}.BINDING_NAME`}))).then((e=>{if(e.exceptionDetails)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: "+e.exceptionDetails.text);if(null===e.result.value||void 0===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is "+String(e.result.value));if(""===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is an empty string");return e.result.value})).then((i=>(this.messagingBindingName=i,t.addEventListener(e.RuntimeModel.Events.BindingCalled,this.bindingCalled,this),t.agent.invoke_addBinding({name:i})))).then((e=>{const t=e.getError();if(t)throw new Error("Failed to add binding for ReactDevToolsBindingsModel: "+t);this.enabled=!0,this.initializeExecutionContextListeners()}))}isEnabled(){return this.enabled}initializeExecutionContextListeners(){const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to initialize execution context listeners for ReactDevToolsBindingsModel: runtime model is not available");t.addEventListener(e.RuntimeModel.Events.ExecutionContextCreated,this.onExecutionContextCreated,this),t.addEventListener(e.RuntimeModel.Events.ExecutionContextDestroyed,this.onExecutionContextDestroyed,this)}onExecutionContextCreated({data:e}){e.name===t&&this.waitForFuseboxDispatcherToBeInitialized().then((()=>{this.dispatchEventToListeners("BackendExecutionContextCreated"),this.flushOutDomainMessagesQueues()})).catch((e=>this.dispatchEventToListeners("BackendExecutionContextUnavailable",e.message)))}onExecutionContextDestroyed({data:e}){e.name===t&&(this.fuseboxDispatcherIsInitialized=!1,this.dispatchEventToListeners("BackendExecutionContextDestroyed"))}async waitForFuseboxDispatcherToBeInitialized(t=1){if(t>=20)throw new Error("Failed to wait for initialization: it took too long");const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error("Failed to wait for React DevTools dispatcher initialization: runtime model is not available");await n.agent.invoke_evaluate({expression:`globalThis.${i} != undefined`,returnByValue:!0}).then((e=>{if(e.exceptionDetails)throw new Error("Failed to wait for React DevTools dispatcher initialization: "+e.exceptionDetails.text);if(!1===e.result.value)return new Promise((e=>setTimeout(e,250))).then((()=>this.waitForFuseboxDispatcherToBeInitialized(t+1)));this.fuseboxDispatcherIsInitialized=!0}))}}e.SDKModel.SDKModel.register(n,{capabilities:4,autostart:!1});var o=Object.freeze({__proto__:null,ReactDevToolsBindingsModel:n});export{o as ReactDevToolsBindingsModel}; | ||
import*as e from"../../core/sdk/sdk.js";const t="main",i="__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__";class n extends e.SDKModel.SDKModel{domainToListeners=new Map;messagingBindingName=null;enabled=!1;fuseboxDispatcherIsInitialized=!1;domainToMessageQueue=new Map;bindingCalled(e){if(null===this.messagingBindingName||e.data.name!==this.messagingBindingName)return;const t=e.data.payload;let i=null;try{i=JSON.parse(t)}catch(e){throw new Error("Failed to parse bindingCalled event payload",{cause:e})}if(i){const e=i.domain;if(this.fuseboxDispatcherIsInitialized){if(!this.isDomainMessagesQueueEmpty(e))throw new Error(`Attempted to send a message to domain ${e} while queue is not empty`);this.dispatchMessageToDomainEventListeners(e,i.message)}else this.queueMessageForDomain(e,i.message)}}queueMessageForDomain(e,t){let i=this.domainToMessageQueue.get(e);i||(i=[],this.domainToMessageQueue.set(e,i)),i.push(t)}flushOutDomainMessagesQueues(){for(const[e,t]of this.domainToMessageQueue.entries())if(0!==t.length){for(const i of t)this.dispatchMessageToDomainEventListeners(e,i);t.splice(0,t.length)}}isDomainMessagesQueueEmpty(e){const t=this.domainToMessageQueue.get(e);return void 0===t||0===t.length}subscribeToDomainMessages(e,t){let i=this.domainToListeners.get(e);i||(i=new Set,this.domainToListeners.set(e,i)),i.add(t)}unsubscribeFromDomainMessages(e,t){const i=this.domainToListeners.get(e);i&&i.delete(t)}dispatchMessageToDomainEventListeners(e,t){const i=this.domainToListeners.get(e);if(!i)return;const n=[];for(const e of i)try{e(t)}catch(e){n.push(e)}if(n.length>0)throw new AggregateError(n,`Error occurred in ReactDevToolsBindingsModel while calling event listeners for domain ${e}`)}async initializeDomain(t){const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error(`Failed to initialize domain ${t} for ReactDevToolsBindingsModel: runtime model is not available`);await n.agent.invoke_evaluate({expression:`void ${i}.initializeDomain('${t}')`})}async sendMessage(t,n){if(!this.fuseboxDispatcherIsInitialized)return;const o=this.target().model(e.RuntimeModel.RuntimeModel);if(!o)throw new Error(`Failed to send message from ReactDevToolsBindingsModel for domain ${t}: runtime model is not available`);const s=JSON.stringify(n),a=`${i}.sendMessage('${t}', '${s}')`;await o.agent.invoke_evaluate({expression:`void setTimeout(() => ${a}, 0)`})}async enable(){if(this.enabled)throw new Error("ReactDevToolsBindingsModel is already enabled");const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to enable ReactDevToolsBindingsModel: runtime model is not available");await this.waitForFuseboxDispatcherToBeInitialized().then((()=>t.agent.invoke_evaluate({expression:`${i}.BINDING_NAME`}))).then((e=>{if(e.exceptionDetails)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: "+e.exceptionDetails.text);if(null===e.result.value||void 0===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is "+String(e.result.value));if(""===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is an empty string");return e.result.value})).then((i=>(this.messagingBindingName=i,t.addEventListener(e.RuntimeModel.Events.BindingCalled,this.bindingCalled,this),t.agent.invoke_addBinding({name:i})))).then((e=>{const t=e.getError();if(t)throw new Error("Failed to add binding for ReactDevToolsBindingsModel: "+t);this.enabled=!0,this.initializeExecutionContextListeners()}))}isEnabled(){return this.enabled}initializeExecutionContextListeners(){const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to initialize execution context listeners for ReactDevToolsBindingsModel: runtime model is not available");t.addEventListener(e.RuntimeModel.Events.ExecutionContextCreated,this.onExecutionContextCreated,this),t.addEventListener(e.RuntimeModel.Events.ExecutionContextDestroyed,this.onExecutionContextDestroyed,this)}onExecutionContextCreated({data:e}){e.name===t&&this.waitForFuseboxDispatcherToBeInitialized().then((()=>{this.dispatchEventToListeners("BackendExecutionContextCreated"),this.flushOutDomainMessagesQueues()})).catch((e=>this.dispatchEventToListeners("BackendExecutionContextUnavailable",e.message)))}onExecutionContextDestroyed({data:e}){e.name===t&&(this.fuseboxDispatcherIsInitialized=!1,this.dispatchEventToListeners("BackendExecutionContextDestroyed"))}async waitForFuseboxDispatcherToBeInitialized(t=1){if(t>=20)throw new Error("Failed to wait for initialization: it took too long");const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error("Failed to wait for React DevTools dispatcher initialization: runtime model is not available");await n.agent.invoke_evaluate({expression:`globalThis.${i} != undefined`,returnByValue:!0}).then((e=>{if(e.exceptionDetails)throw new Error("Failed to wait for React DevTools dispatcher initialization: "+e.exceptionDetails.text);if(!1===e.result.value)return new Promise((e=>setTimeout(e,250))).then((()=>this.waitForFuseboxDispatcherToBeInitialized(t+1)));this.fuseboxDispatcherIsInitialized=!0}))}}e.SDKModel.SDKModel.register(n,{capabilities:4,autostart:!1});var o=Object.freeze({__proto__:null,ReactDevToolsBindingsModel:n});export{o as ReactDevToolsBindingsModel}; |
@@ -1,1 +0,1 @@ | ||
import*as e from"../../core/i18n/i18n.js";import*as t from"../../ui/legacy/legacy.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../third_party/react-devtools/react-devtools.js";import*as s from"../../core/common/common.js";import*as o from"../../models/workspace/workspace.js";import*as r from"../../models/bindings/bindings.js";import*as a from"../../models/logs/logs.js";import*as l from"../../core/host/host.js";import*as d from"../../models/react_native/react_native.js";class c extends i.SDKModel.SDKModel{static FUSEBOX_BINDING_NAMESPACE="react-devtools";#e;#t;#i=new Set;#n=!1;#s=!1;#o;#r;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})}},this.#o=n.createBridge(this.#e),this.#r=n.createStore(this.#o);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.#o?.shutdown()))}async ensureInitialized(){if(!this.#n){this.#n=!0;try{const e=this.#t;await e.enable(),e.subscribeToDomainMessages(c.FUSEBOX_BINDING_NAMESPACE,(e=>this.#h(e))),await e.initializeDomain(c.FUSEBOX_BINDING_NAMESPACE),this.#s=!0,this.dispatchEventToListeners("InitializationCompleted")}catch(e){this.dispatchEventToListeners("InitializationFailed",e.message)}}}isInitialized(){return this.#s}getBridgeOrThrow(){if(null==this.#o)throw new Error("Failed to get bridge from ReactDevToolsModel: bridge was null");return this.#o}getStoreOrThrow(){if(null==this.#r)throw new Error("Failed to get store from ReactDevToolsModel: store was null");return this.#r}#h(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 t.sendMessage(c.FUSEBOX_BINDING_NAMESPACE,e)}#l(){const e=this.#t;if(!e)throw new Error("ReactDevToolsModel failed to handle BackendExecutionContextCreated event: ReactDevToolsBindingsModel was null");this.#o=n.createBridge(this.#e),this.#r=n.createStore(this.#o),e.isEnabled()?this.dispatchEventToListeners("InitializationCompleted"):this.ensureInitialized()}#d({data:e}){this.dispatchEventToListeners("InitializationFailed",e)}#c(){this.#o?.shutdown(),this.#o=null,this.#r=null,this.#i.clear(),this.dispatchEventToListeners("Destroyed")}}i.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,t){const{sourceURL:i,line:n,column:l}=t||e;!async function(e,t,i){const n=o.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(e);if(n){const e=await r.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().normalizeUILocation(n.uiLocation(t,i));return void s.Revealer.reveal(e)}const l=r.ResourceUtils.resourceForURL(e);if(l)return void s.Revealer.reveal(l);const d=a.NetworkLog.NetworkLog.instance().requestForURL(e);if(!d)throw new Error("Could not find resource for "+e);s.Revealer.reveal(d)}(i,n-1,l-1)}class v extends t.View.SimpleView{#m;#u=null;constructor(e,t){super(t),this.#m=e,this.#g()}wasShown(){super.wasShown(),this.registerCSSFiles([n.CSS]),null==this.#u&&i.TargetManager.TargetManager.instance().observeModels(c,this)}modelAdded(e){this.#u=e,e.isInitialized()&&this.#p(),e.addEventListener("InitializationCompleted",this.#v,this),e.addEventListener("InitializationFailed",this.#w,this),e.addEventListener("Destroyed",this.#E,this),e.ensureInitialized()}modelRemoved(e){e.removeEventListener("InitializationCompleted",this.#v,this),e.removeEventListener("InitializationFailed",this.#w,this),e.removeEventListener("Destroyed",this.#E,this)}#v(){this.#p()}#w({data:e}){this.#b(e)}#E(){this.#g()}#p(){this.#f();const e=this.#u,t=window.matchMedia("(prefers-color-scheme: dark)").matches;("components"===this.#m?n.initializeComponents:n.initializeProfiler)(this.contentElement,{bridge:e.getBridgeOrThrow(),store:e.getStoreOrThrow(),theme:t?"dark":"light",canViewElementSourceFunction:()=>!0,viewElementSourceFunction:p})}#g(){this.#f();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)}#b(e){this.#f();const i=document.createElement("div");i.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 s=document.createElement("p");if(s.setAttribute("style","user-select: all"),s.innerHTML=e,i.appendChild(n),i.appendChild(s),this.contentElement.appendChild(i),globalThis.FB_ONLY__reactNativeFeedbackLink){const e=globalThis.FB_ONLY__reactNativeFeedbackLink,n=t.UIUtils.createTextButton(g(m.sendFeedback),(()=>{l.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}),{className:"primary-button",jslogContext:"sendFeedback"});i.appendChild(n)}}#f(){this.contentElement.removeChildren()}}const w={title:"⚛️ Components (React DevTools)"},E=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsComponentsView.ts",w),b=e.i18n.getLocalizedString.bind(void 0,E);var f=Object.freeze({__proto__:null,ReactDevToolsComponentsViewImpl:class extends v{constructor(){super("components",b(w.title))}}});const C={title:"⚛️ Profiler (React DevTools)"},D=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsProfilerView.ts",C),T=e.i18n.getLocalizedString.bind(void 0,D);var I=Object.freeze({__proto__:null,ReactDevToolsProfilerViewImpl:class extends v{constructor(){super("profiler",T(C.title))}}});export{f as ReactDevToolsComponentsView,h as ReactDevToolsModel,I as ReactDevToolsProfilerView}; | ||
import*as e from"../../core/i18n/i18n.js";import*as t from"../../ui/legacy/legacy.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../third_party/react-devtools/react-devtools.js";import*as o from"../../core/common/common.js";import*as s from"../../models/workspace/workspace.js";import*as r from"../../models/bindings/bindings.js";import*as a from"../../models/logs/logs.js";import*as l from"../../core/host/host.js";import*as d from"../../models/react_native/react_native.js";class c extends i.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.#s?.shutdown()))}ensureInitialized(){this.#n||(this.#n=!0,this.#h())}async#h(){try{const e=this.#t;await e.enable(),e.subscribeToDomainMessages(c.FUSEBOX_BINDING_NAMESPACE,(e=>this.#m(e))),await e.initializeDomain(c.FUSEBOX_BINDING_NAMESPACE),this.#o=!0,this.#u()}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}#m(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 t.sendMessage(c.FUSEBOX_BINDING_NAMESPACE,e)}#l(){const e=this.#t;if(!e)throw new Error("ReactDevToolsModel failed to handle BackendExecutionContextCreated event: ReactDevToolsBindingsModel was null");e.isEnabled()?this.#u():this.ensureInitialized()}#u(){this.#s=n.createBridge(this.#e),this.#r=n.createStore(this.#s),this.dispatchEventToListeners("InitializationCompleted")}#d({data:e}){this.dispatchEventToListeners("InitializationFailed",e)}#c(){this.#s?.shutdown(),this.#s=null,this.#r=null,this.#i.clear(),this.dispatchEventToListeners("Destroyed")}}i.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,t){const{sourceURL:i,line:n,column:l}=t||e;!async function(e,t,i){const n=s.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(e);if(n){const e=await r.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().normalizeUILocation(n.uiLocation(t,i));return void o.Revealer.reveal(e)}const l=r.ResourceUtils.resourceForURL(e);if(l)return void o.Revealer.reveal(l);const d=a.NetworkLog.NetworkLog.instance().requestForURL(e);if(!d)throw new Error("Could not find resource for "+e);o.Revealer.reveal(d)}(i,n-1,l-1)}class v extends t.View.SimpleView{#g;#p=null;constructor(e,t){super(t),this.#g=e,this.#v(),i.TargetManager.TargetManager.instance().observeModels(c,this)}wasShown(){super.wasShown(),this.registerCSSFiles([n.CSS])}modelAdded(e){this.#p=e,e.addEventListener("InitializationCompleted",this.#w,this),e.addEventListener("InitializationFailed",this.#E,this),e.addEventListener("Destroyed",this.#f,this),e.isInitialized()?this.#b():e.ensureInitialized()}modelRemoved(e){e.removeEventListener("InitializationCompleted",this.#w,this),e.removeEventListener("InitializationFailed",this.#E,this),e.removeEventListener("Destroyed",this.#f,this)}#w(){this.#b()}#E({data:e}){this.#D(e)}#f(){this.#v()}#b(){this.#C();const e=this.#p;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.#g?n.initializeComponents:n.initializeProfiler)(this.contentElement,{bridge:e.getBridgeOrThrow(),store:e.getStoreOrThrow(),theme:t?"dark":"light",canViewElementSourceFunction:()=>!0,viewElementSourceFunction:p})}#v(){this.#C();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)}#D(e){this.#C();const i=document.createElement("div");i.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,i.appendChild(n),i.appendChild(o),this.contentElement.appendChild(i),globalThis.FB_ONLY__reactNativeFeedbackLink){const e=globalThis.FB_ONLY__reactNativeFeedbackLink,n=t.UIUtils.createTextButton(g(m.sendFeedback),(()=>{l.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}),{className:"primary-button",jslogContext:"sendFeedback"});i.appendChild(n)}}#C(){this.contentElement.removeChildren()}}const w={title:"⚛️ Components (React DevTools)"},E=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsComponentsView.ts",w),f=e.i18n.getLocalizedString.bind(void 0,E);var b=Object.freeze({__proto__:null,ReactDevToolsComponentsViewImpl:class extends v{constructor(){super("components",f(w.title))}}});const D={title:"⚛️ Profiler (React DevTools)"},C=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsProfilerView.ts",D),I=e.i18n.getLocalizedString.bind(void 0,C);var z=Object.freeze({__proto__:null,ReactDevToolsProfilerViewImpl:class extends v{constructor(){super("profiler",I(D.title))}}});export{b as ReactDevToolsComponentsView,h as ReactDevToolsModel,z as ReactDevToolsProfilerView}; |
@@ -1,6 +0,6 @@ | ||
import*as e from"../../ui/legacy/legacy.js";import*as t from"../../core/host/host.js";import*as o from"../../core/i18n/i18n.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../ui/lit-html/lit-html.js";const a=new CSSStyleSheet;a.replaceSync('.rn-welcome-panel{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;justify-content:center;padding:36px;background-color:var(--color-background-elevation-0);min-height:100%}@media (min-width: 1000px){.rn-welcome-panel{flex-direction:row;align-items:center;justify-content:stretch;height:100%;padding:0}}.rn-welcome-hero{display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;align-items:center;justify-content:center;padding:16px;text-align:center}@media (min-width: 1000px){.rn-welcome-hero{margin-left:24px}}.rn-welcome-heading{display:flex;align-items:center;margin-bottom:16px}.rn-welcome-icon{width:30px;height:30px;border-radius:4px;margin-right:12px}.rn-welcome-title{font-size:20px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-title-accessory{margin-left:12px;padding:4px 8px;border-radius:4px;background-color:var(--color-green);font-size:12px;color:var(--color-on-primary)}.rn-welcome-title-accessory-purple{background-color:var(--color-purple-bright)}.rn-welcome-tagline{margin-bottom:24px;font-size:1rem;line-height:1.3;color:var(--color-text-secondary)}.rn-welcome-links{display:flex;align-items:center}.rn-welcome-links > .devtools-link{position:relative;margin:0 16px;font-size:14px}.rn-welcome-links > .devtools-link:not(:last-child)::after{content:"";position:absolute;right:-16px;height:16px;border-right:1px solid var(--color-details-hairline)}.rn-welcome-version{position:fixed;top:8px;right:8px;margin-top:24px;padding:4px 12px;border-radius:6px;background-color:var(--color-background-hover-overlay);color:var(--color-text-secondary);font-size:11px}.rn-welcome-docsfeed{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;max-width:700px;margin:0 auto;padding:24px}@media (min-width: 1000px){.rn-welcome-docsfeed{flex-shrink:1;width:45%;max-height:100%;margin:0;padding:20px 24px;padding-right:80px;overflow:auto}}.rn-welcome-h2{flex-shrink:0;font-size:16px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-docsfeed-item{display:flex;flex-shrink:0;align-items:center;margin-bottom:8px;padding:8px;padding-right:16px;border:1px solid var(--color-details-hairline);border-radius:4px;background-color:var(--color-background);text-align:left;font-size:14px;cursor:pointer}.rn-welcome-docsfeed-item:hover{background-color:var(--color-background-elevation-0)}.rn-welcome-docsfeed-item:focus{outline:solid var(--color-button-outline-focus)}.rn-welcome-docsfeed-item p{margin:0;margin-bottom:4px;text-decoration:none}.rn-welcome-docsfeed-item :not(.devtools-link){color:var(--color-text-secondary)}.rn-welcome-image{aspect-ratio:calc(16 / 9);height:64px;margin-right:16px;border-radius:2px;background-color:var(--color-gray-100);background-position:center;background-size:cover}\n/*# sourceURL=rnWelcome.css */\n');const r={betaLabel:"Beta",techPreviewLabel:"Tech Preview",welcomeMessage:"Welcome to debugging in React Native",docsLabel:"Debugging docs",whatsNewLabel:"What's new",docsDebuggingBasics:"Debugging Basics",docsDebuggingBasicsDetail:"Overview of debugging tools in React Native",docsReactDevTools:"React DevTools",docsReactDevToolsDetail:"Debug React components with React DevTools",docsRNDevTools:"React Native DevTools",docsRNDevToolsDetail:"Explore features available in React Native DevTools",docsNativeDebugging:"Native Debugging",docsNativeDebuggingDetail:"Find out more about native debugging tools"},{render:s,html:l}=n,c=o.i18n.registerUIStrings("panels/rn_welcome/RNWelcome.ts",r),d=o.i18n.getLocalizedString.bind(void 0,c);let g;class p extends e.Widget.VBox{options;#e;static instance(e){return g||(g=new p(e)),g}constructor(e){super(!0,!0),this.options=e,i.TargetManager.TargetManager.instance().observeModels(i.ReactNativeApplicationModel.ReactNativeApplicationModel,this)}wasShown(){super.wasShown(),this.registerCSSFiles([a]),this.render(),e.InspectorView.InspectorView.instance().showDrawer({focus:!0,hasTargetDrawer:!1})}modelAdded(e){e.ensureEnabled(),e.addEventListener("MetadataUpdated",this.#t,this),this.#e=e.metadataCached?.reactNativeVersion}modelRemoved(e){e.removeEventListener("MetadataUpdated",this.#t,this)}#t(e){this.#e=e.data.reactNativeVersion,this.isShowing()&&this.render()}_handleLinkPress(e){t.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}render(){const{debuggerBrandName:e,showBetaLabel:t=!1,showTechPreviewLabel:o=!1,showDocs:i=!1}=this.options,n=new URL("../../Images/react_native/welcomeIcon.png",import.meta.url).toString(),a=new URL("../../Images/react_native/learn-debugging-basics.jpg",import.meta.url).toString(),c=new URL("../../Images/react_native/learn-react-devtools.jpg",import.meta.url).toString(),g=new URL("../../Images/react_native/learn-native-debugging.jpg",import.meta.url).toString();s(l` | ||
import*as e from"../../ui/legacy/legacy.js";import*as t from"../../core/host/host.js";import*as o from"../../core/i18n/i18n.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../ui/lit-html/lit-html.js";const r=new CSSStyleSheet;r.replaceSync('.rn-welcome-panel{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;justify-content:center;padding:36px;background-color:var(--color-background-elevation-0);min-height:100%}@media (min-width: 1000px){.rn-welcome-panel{flex-direction:row;align-items:center;justify-content:stretch;height:100%;padding:0}}.rn-welcome-hero{display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;align-items:center;justify-content:center;padding:16px;text-align:center}@media (min-width: 1000px){.rn-welcome-hero{margin-left:24px}}.rn-welcome-heading{display:flex;align-items:center;margin-bottom:16px}.rn-welcome-icon{width:30px;height:30px;border-radius:4px;margin-right:12px}.rn-welcome-title{font-size:20px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-title-accessory{margin-left:12px;padding:4px 8px;border-radius:4px;background-color:var(--color-green);font-size:12px;color:var(--color-on-primary)}.rn-welcome-title-accessory-purple{background-color:var(--color-purple-bright)}.rn-welcome-tagline{margin-bottom:24px;font-size:1rem;line-height:1.3;color:var(--color-text-secondary)}.rn-welcome-links{display:flex;align-items:center}.rn-welcome-links > .devtools-link{position:relative;margin:0 16px;font-size:14px}.rn-welcome-links > .devtools-link:not(:last-child)::after{content:"";position:absolute;right:-16px;height:16px;border-right:1px solid var(--color-details-hairline)}.rn-welcome-version{position:fixed;top:8px;right:8px;margin-top:24px;padding:4px 12px;border-radius:6px;background-color:var(--color-background-hover-overlay);color:var(--color-text-secondary);font-size:11px}.rn-welcome-docsfeed{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;max-width:700px;margin:0 auto;padding:24px}@media (min-width: 1000px){.rn-welcome-docsfeed{flex-shrink:1;width:45%;max-height:100%;margin:0;padding:20px 24px;padding-right:80px;overflow:auto}}.rn-welcome-h2{flex-shrink:0;font-size:16px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-docsfeed-item{display:flex;flex-shrink:0;align-items:center;margin-bottom:8px;padding:8px;padding-right:16px;border:1px solid var(--color-details-hairline);border-radius:4px;background-color:var(--color-background);text-align:left;font-size:14px;cursor:pointer}.rn-welcome-docsfeed-item:hover{background-color:var(--color-background-elevation-0)}.rn-welcome-docsfeed-item:focus{outline:solid var(--color-button-outline-focus)}.rn-welcome-docsfeed-item p{margin:0;margin-bottom:4px;text-decoration:none}.rn-welcome-docsfeed-item :not(.devtools-link){color:var(--color-text-secondary)}.rn-welcome-image{aspect-ratio:calc(16 / 9);height:64px;margin-right:16px;border-radius:2px;background-color:var(--color-gray-100);background-position:center;background-size:cover}\n/*# sourceURL=rnWelcome.css */\n');const a={betaLabel:"Beta",techPreviewLabel:"Tech Preview",welcomeMessage:"Welcome to debugging in React Native",docsLabel:"Debugging docs",whatsNewLabel:"What's new",docsDebuggingBasics:"Debugging Basics",docsDebuggingBasicsDetail:"Overview of debugging tools in React Native",docsReactDevTools:"React DevTools",docsReactDevToolsDetail:"Debug React components with React DevTools",docsNativeDebugging:"Native Debugging",docsNativeDebuggingDetail:"Find out more about native debugging tools"},{render:s,html:l}=n,c=o.i18n.registerUIStrings("panels/rn_welcome/RNWelcome.ts",a),d=o.i18n.getLocalizedString.bind(void 0,c);let g;class p extends e.Widget.VBox{options;#e;static instance(e){return g||(g=new p(e)),g}constructor(e){super(!0,!0),this.options=e,i.TargetManager.TargetManager.instance().observeModels(i.ReactNativeApplicationModel.ReactNativeApplicationModel,this)}wasShown(){super.wasShown(),this.registerCSSFiles([r]),this.render(),e.InspectorView.InspectorView.instance().showDrawer({focus:!0,hasTargetDrawer:!1})}modelAdded(e){e.ensureEnabled(),e.addEventListener("MetadataUpdated",this.#t,this),this.#e=e.metadataCached?.reactNativeVersion}modelRemoved(e){e.removeEventListener("MetadataUpdated",this.#t,this)}#t(e){this.#e=e.data.reactNativeVersion,this.isShowing()&&this.render()}#o(e){t.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}render(){const{debuggerBrandName:e,showBetaLabel:t=!1,showTechPreviewLabel:o=!1,showDocs:i=!1}=this.options,n=new URL("../../Images/react_native/welcomeIcon.png",import.meta.url).toString(),r=new URL("../../Images/react_native/learn-debugging-basics.jpg",import.meta.url).toString(),c=new URL("../../Images/react_native/learn-react-devtools.jpg",import.meta.url).toString(),g=new URL("../../Images/react_native/learn-native-debugging.jpg",import.meta.url).toString();s(l` | ||
<div class="rn-welcome-panel"> | ||
<header class="rn-welcome-hero"> | ||
<div class="rn-welcome-heading"> | ||
<img class="rn-welcome-icon" src="${n}" role="presentation" /> | ||
<img class="rn-welcome-icon" src=${n} role="presentation" /> | ||
<h1 class="rn-welcome-title"> | ||
@@ -11,3 +11,3 @@ ${e()} | ||
<div class="rn-welcome-title-accessory"> | ||
${d(r.betaLabel)} | ||
${d(a.betaLabel)} | ||
</div> | ||
@@ -17,3 +17,3 @@ `:null} | ||
<div class="rn-welcome-title-accessory rn-welcome-title-accessory-purple"> | ||
${d(r.techPreviewLabel)} | ||
${d(a.techPreviewLabel)} | ||
</div> | ||
@@ -23,13 +23,13 @@ `:null} | ||
<div class="rn-welcome-tagline"> | ||
${d(r.welcomeMessage)} | ||
${d(a.welcomeMessage)} | ||
</div> | ||
<div class="rn-welcome-links"> | ||
<x-link class="devtools-link" href="https://reactnative.dev/docs/debugging"> | ||
${d(r.docsLabel)} | ||
${d(a.docsLabel)} | ||
</x-link> | ||
<x-link class="devtools-link" href="https://reactnative.dev/blog"> | ||
${d(r.whatsNewLabel)} | ||
${d(a.whatsNewLabel)} | ||
</x-link> | ||
</div> | ||
${null!=this.#e?l` | ||
${null!==this.#e&&void 0!==this.#e?l` | ||
<p class="rn-welcome-version">React Native: <code>${this.#e}</code></p> | ||
@@ -41,22 +41,22 @@ `:null} | ||
<h2 class="rn-welcome-h2">Learn</h2> | ||
<button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging")} title="${d(r.docsDebuggingBasics)}"> | ||
<div class="rn-welcome-image" style="background-image: url('${a}')"></div> | ||
<button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#o.bind(this,"https://reactnative.dev/docs/debugging")} title=${d(a.docsDebuggingBasics)}> | ||
<div class="rn-welcome-image" style="background-image: url('${r}')"></div> | ||
<div> | ||
<p class="devtools-link">${d(r.docsDebuggingBasics)}</p> | ||
<p>${d(r.docsDebuggingBasicsDetail)}</p> | ||
<p class="devtools-link">${d(a.docsDebuggingBasics)}</p> | ||
<p>${d(a.docsDebuggingBasicsDetail)}</p> | ||
</div> | ||
</button> | ||
<!-- TODO(huntie): Replace this item when React Native DevTools docs are complete --> | ||
<button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging/react-devtools")} title="${d(r.docsReactDevTools)}"> | ||
<button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#o.bind(this,"https://reactnative.dev/docs/debugging/react-devtools")} title=${d(a.docsReactDevTools)}> | ||
<div class="rn-welcome-image" style="background-image: url('${c}')"></div> | ||
<div> | ||
<p class="devtools-link">${d(r.docsReactDevTools)}</p> | ||
<p>${d(r.docsReactDevToolsDetail)}</p> | ||
<p class="devtools-link">${d(a.docsReactDevTools)}</p> | ||
<p>${d(a.docsReactDevToolsDetail)}</p> | ||
</div> | ||
</button> | ||
<button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging/debugging-native-code")} title="${d(r.docsNativeDebugging)}"> | ||
<button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#o.bind(this,"https://reactnative.dev/docs/debugging/debugging-native-code")} title=${d(a.docsNativeDebugging)}> | ||
<div class="rn-welcome-image" style="background-image: url('${g}')"></div> | ||
<div> | ||
<p class="devtools-link">${d(r.docsNativeDebugging)}</p> | ||
<p>${d(r.docsNativeDebuggingDetail)}</p> | ||
<p class="devtools-link">${d(a.docsNativeDebugging)}</p> | ||
<p>${d(a.docsNativeDebuggingDetail)}</p> | ||
</div> | ||
@@ -63,0 +63,0 @@ </button> |
{ | ||
"name": "@react-native/debugger-frontend", | ||
"version": "0.76.0-rc.0", | ||
"version": "0.77.0-nightly-20240911-a05f9c677", | ||
"description": "Debugger frontend for React Native based on Chrome DevTools", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
14532048