createSuspensePanel() — react Function Reference

Architecture documentation for the createSuspensePanel() function in index.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ createSuspensePanel() — react Function Reference

Dependency Diagram

graph TD
  2028470c_71b0_2765_a3f2_02e5ff13cefc["createSuspensePanel()"]
  b5e42467_7633_e234_1d51_a93bfc4818c7["index.js"]
  2028470c_71b0_2765_a3f2_02e5ff13cefc -->|defined in| b5e42467_7633_e234_1d51_a93bfc4818c7
  bb19f56d_5cc8_e6cd_8df2_513f1715da12["createBridgeAndStore()"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|calls| 2028470c_71b0_2765_a3f2_02e5ff13cefc
  a17b972e_da5c_8363_37f8_381173484aff["ensureInitialHTMLIsCleared()"]
  2028470c_71b0_2765_a3f2_02e5ff13cefc -->|calls| a17b972e_da5c_8363_37f8_381173484aff
  style 2028470c_71b0_2765_a3f2_02e5ff13cefc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/main/index.js lines 420–454

function createSuspensePanel() {
  if (suspensePortalContainer) {
    // Panel is created and user opened it at least once
    ensureInitialHTMLIsCleared(suspensePortalContainer);
    render('suspense');

    return;
  }

  if (suspensePanel) {
    // Panel is created, but wasn't opened yet, so no document is present for it
    return;
  }

  chrome.devtools.panels.create(
    __IS_CHROME__ || __IS_EDGE__ ? 'Suspense ⚛' : 'Suspense',
    __IS_EDGE__ ? 'icons/production.svg' : '',
    'panel.html',
    createdPanel => {
      suspensePanel = createdPanel;

      createdPanel.onShown.addListener(portal => {
        suspensePortalContainer = portal.container;
        if (suspensePortalContainer != null && render) {
          ensureInitialHTMLIsCleared(suspensePortalContainer);

          render('suspense');
          portal.injectStyles(cloneStyleTags);

          logEvent({event_name: 'selected-suspense-tab'});
        }
      });
    },
  );
}