Function OutputContent

compiler/apps/playground/components/Editor/Output.tsx:258–325

({store, compilerOutput}: Props)

}

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,
  );
  if (compilerOutput.kind !== previousOutputKind) {
    setPreviousOutputKind(compilerOutput.kind);
    setTabsOpen(new Set(['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',
      }}>