fix: apply eslint suggestions (#111)

* fix[react-devtools]: initialize bridge only after domain is ready * fix: apply eslint suggestions
facebookexperimental · Sep 9, 2024 · 3a496f2 · 3a496f2
1 parent aea0153
commit 3a496f2
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts
@@ -247,8 +247,8 @@ class FuseboxReactNativeApplicationObserver implements
     const {appDisplayName, deviceName} = event.data;
 
     // Update window title
-    if (appDisplayName != null) {
-      document.title = `${appDisplayName}${deviceName != null ? ` (${deviceName})` : ''} - React Native DevTools`;
+    if (appDisplayName !== null && appDisplayName !== undefined) {
+      document.title = `${appDisplayName}${deviceName !== null && deviceName !== undefined ? ` (${deviceName})` : ''} - React Native DevTools`;
     }
   }
 }

diff --git a/front_end/panels/react_devtools/ReactDevToolsModel.ts b/front_end/panels/react_devtools/ReactDevToolsModel.ts
@@ -54,7 +54,7 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
     };
 
     const bindingsModel = target.model(ReactNativeModels.ReactDevToolsBindingsModel.ReactDevToolsBindingsModel);
-    if (bindingsModel == null) {
+    if (bindingsModel === null) {
       throw new Error('Failed to construct ReactDevToolsModel: ReactDevToolsBindingsModel was null');
     }
 
@@ -113,15 +113,15 @@ export class ReactDevToolsModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   getBridgeOrThrow(): ReactDevToolsTypes.Bridge {
-    if (this.#bridge == null) {
+    if (this.#bridge === null) {
       throw new Error('Failed to get bridge from ReactDevToolsModel: bridge was null');
     }
 
     return this.#bridge;
   }
 
   getStoreOrThrow(): ReactDevToolsTypes.Store {
-    if (this.#store == null) {
+    if (this.#store === null) {
       throw new Error('Failed to get store from ReactDevToolsModel: store was null');
     }
 

diff --git a/front_end/panels/react_devtools/ReactDevToolsViewBase.ts b/front_end/panels/react_devtools/ReactDevToolsViewBase.ts
@@ -17,7 +17,6 @@ import {Events as ReactDevToolsModelEvents, ReactDevToolsModel, type EventTypes
 
 import type * as ReactDevToolsTypes from '../../third_party/react-devtools/react-devtools.js';
 import type * as Platform from '../../core/platform/platform.js';
-import { LocalizedString } from '../../core/platform/UIString.js';
 
 const UIStrings = {
   /**
@@ -76,7 +75,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
 
   constructor(
     tab: 'components' | 'profiler',
-    title: LocalizedString,
+    title: Platform.UIString.LocalizedString,
   ) {
     super(title);
 
@@ -88,7 +87,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
     super.wasShown();
     this.registerCSSFiles([ReactDevTools.CSS]);
 
-    if (this.#model == null) {
+    if (this.#model === null) {
       SDK.TargetManager.TargetManager.instance().observeModels(ReactDevToolsModel, this);
     }
   }
@@ -155,7 +154,11 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
   #renderDevToolsView(): void {
     this.#clearView();
 
-    const model = this.#model!;
+    const model = this.#model;
+    if (model === null) {
+      throw new Error('Attempted to render React DevTools panel, but the model was null');
+    }
+
     const usingDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
     const initializeFn = this.#tab === 'components' ? ReactDevTools.initializeComponents : ReactDevTools.initializeProfiler;
 

diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts
@@ -33,10 +33,6 @@ const UIStrings = {
   docsReactDevTools: 'React DevTools',
   /** @description "React DevTools" item detail */
   docsReactDevToolsDetail: 'Debug React components with React DevTools',
-  /** @description "React Native DevTools" title (docs item 2 - post launch) */
-  docsRNDevTools: 'React Native DevTools',
-  /** @description "React Native DevTools" item detail */
-  docsRNDevToolsDetail: 'Explore features available in React Native DevTools',
   /** @description "Native Debugging" title (docs item 3) */
   docsNativeDebugging: 'Native Debugging',
   /** @description "Native Debugging" item detail */
@@ -53,7 +49,7 @@ type RNWelcomeOptions = {
   debuggerBrandName: () => Platform.UIString.LocalizedString,
   showBetaLabel?: boolean,
   showTechPreviewLabel?: boolean,
-  showDocs?: boolean
+  showDocs?: boolean,
 };
 
 export class RNWelcomeImpl extends UI.Widget.VBox implements
@@ -106,7 +102,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
     }
   }
 
-  private _handleLinkPress(url: string): void {
+  #handleLinkPress(url: string): void {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
         url as Platform.DevToolsPath.UrlString,
     );
@@ -117,7 +113,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
       debuggerBrandName,
       showBetaLabel = false,
       showTechPreviewLabel = false,
-      showDocs = false
+      showDocs = false,
     } = this.options;
     const welcomeIconUrl = new URL(
       '../../Images/react_native/welcomeIcon.png',
@@ -140,7 +136,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
       <div class="rn-welcome-panel">
         <header class="rn-welcome-hero">
           <div class="rn-welcome-heading">
-            <img class="rn-welcome-icon" src="${welcomeIconUrl}" role="presentation" />
+            <img class="rn-welcome-icon" src=${welcomeIconUrl} role="presentation" />
             <h1 class="rn-welcome-title">
               ${debuggerBrandName()}
             </h1>
@@ -166,29 +162,29 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
               ${i18nString(UIStrings.whatsNewLabel)}
             </x-link>
           </div>
-          ${this.#reactNativeVersion != null ? html`
+          ${this.#reactNativeVersion !== null && this.#reactNativeVersion !== undefined ? html`
               <p class="rn-welcome-version">React Native: <code>${this.#reactNativeVersion}</code></p>
             ` : null}
         </header>
         ${showDocs ? html`
           <section class="rn-welcome-docsfeed">
             <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="${i18nString(UIStrings.docsDebuggingBasics)}">
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/debugging')} title=${i18nString(UIStrings.docsDebuggingBasics)}>
               <div class="rn-welcome-image" style="background-image: url('${docsImage1Url}')"></div>
               <div>
                 <p class="devtools-link">${i18nString(UIStrings.docsDebuggingBasics)}</p>
                 <p>${i18nString(UIStrings.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="${i18nString(UIStrings.docsReactDevTools)}">
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/debugging/react-devtools')} title=${i18nString(UIStrings.docsReactDevTools)}>
               <div class="rn-welcome-image" style="background-image: url('${docsImage2Url}')"></div>
               <div>
                 <p class="devtools-link">${i18nString(UIStrings.docsReactDevTools)}</p>
                 <p>${i18nString(UIStrings.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="${i18nString(UIStrings.docsNativeDebugging)}">
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/debugging/debugging-native-code')} title=${i18nString(UIStrings.docsNativeDebugging)}>
               <div class="rn-welcome-image" style="background-image: url('${docsImage3Url}')"></div>
               <div>
                 <p class="devtools-link">${i18nString(UIStrings.docsNativeDebugging)}</p>

diff --git a/scripts/eslint_rules/lib/check_license_header.js b/scripts/eslint_rules/lib/check_license_header.js
@@ -69,6 +69,7 @@ const EXCLUDED_FILES = [
 const META_CODE_PATHS = [
   'core/host/RNPerfMetrics.ts',
   'core/rn_experiments',
+  'core/sdk/ReactNativeApplicationModel.ts',
   'entrypoints/rn_fusebox',
   'entrypoints/rn_inspector',
   'entrypoints/shell/browser_compatibility_guard.ts',