OutputContent() — react Function Reference

Architecture documentation for the OutputContent() function in Output.tsx from the react codebase.

Function tsx MonacoIntegration Diagnostics calls 1

Entity Profile

MonacoIntegration→ Diagnostics→ OutputContent() — react Function Reference

Dependency Diagram

graph TD
  1869c1af_2602_0dc5_8c4f_edec8bd93ef5["OutputContent()"]
  034b2d8c_7261_f40f_c380_2b5db8fde033["Output.tsx"]
  1869c1af_2602_0dc5_8c4f_edec8bd93ef5 -->|defined in| 034b2d8c_7261_f40f_c380_2b5db8fde033
  96f45ad0_ff4a_d1e6_29df_105ba074271b["tabifyCached()"]
  1869c1af_2602_0dc5_8c4f_edec8bd93ef5 -->|calls| 96f45ad0_ff4a_d1e6_29df_105ba074271b
  style 1869c1af_2602_0dc5_8c4f_edec8bd93ef5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/Output.tsx lines 261–336

function OutputContent({store, compilerOutput}: Props): JSX.Element {
  const [tabsOpen, setTabsOpen] = useState<Set<string>>(
    () => new Set(['Output']),
  );
  const [activeTab, setActiveTab] = useState<string>('Output');

  /*
   * Update the active tab back to the output or errors tab when the compilation state
   * changes between success/failure.
   */
  const [previousOutputKind, setPreviousOutputKind] = useState(
    compilerOutput.kind,
  );
  const isFailure = compilerOutput.kind !== 'ok';

  if (compilerOutput.kind !== previousOutputKind) {
    setPreviousOutputKind(compilerOutput.kind);
    if (isFailure) {
      startTransition(() => {
        addTransitionType(EXPAND_ACCORDION_TRANSITION);
        setTabsOpen(prev => new Set(prev).add('Output'));
        setActiveTab('Output');
      });
    }
  }

  const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
  let lastResult: string = '';
  for (const [passName, results] of compilerOutput.results) {
    for (const result of results) {
      let currResult = '';
      if (result.kind === 'hir' || result.kind === 'reactive') {
        currResult += `function ${result.fnName}\n\n${result.value}`;
      }
      if (currResult !== lastResult) {
        changedPasses.add(passName);
      }
      lastResult = currResult;
    }
  }
  const tabs = use(tabifyCached(store, compilerOutput));

  if (!store.showInternals) {
    return (
      <ViewTransition
        update={{
          [CONFIG_PANEL_TRANSITION]: 'container',
          [TOGGLE_INTERNALS_TRANSITION]: '',
          default: 'none',
        }}>
        <TabbedWindow
          tabs={tabs}
          activeTab={activeTab}
          onTabChange={setActiveTab}
        />
      </ViewTransition>
    );
  }

  return (
    <ViewTransition
      update={{
        [CONFIG_PANEL_TRANSITION]: 'accordion-container',
        [TOGGLE_INTERNALS_TRANSITION]: '',
        default: 'none',
      }}>
      <AccordionWindow
        defaultTab={store.showInternals ? 'HIR' : 'Output'}
        setTabsOpen={setTabsOpen}
        tabsOpen={tabsOpen}
        tabs={tabs}
        changedPasses={changedPasses}
      />
    </ViewTransition>
  );
}