react Architecture Docs
Home / File/ Output.tsx — react Source File

Output.tsx — react Source File

Architecture documentation for Output.tsx, a tsx file in the react codebase. 16 imports, 2 dependents.

File tsx MonacoIntegration Diagnostics 16 imports 2 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  034b2d8c_7261_f40f_c380_2b5db8fde033["Output.tsx"]
  200e1d7d_8772_57b3_072e_509f07464987["index.ts"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 200e1d7d_8772_57b3_072e_509f07464987
  026af77a_8146_7891_6382_db3daa921f75["AccordionWindow.tsx"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 026af77a_8146_7891_6382_db3daa921f75
  5cfb42bb_4dff_a96e_f2fa_02568d30a6ca["AccordionWindow"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 5cfb42bb_4dff_a96e_f2fa_02568d30a6ca
  b03258e0_be86_ee60_1d40_970f96914cd3["TabbedWindow.tsx"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> b03258e0_be86_ee60_1d40_970f96914cd3
  19b4240e_c06f_0965_ec05_d8ddd42c98e3["TabbedWindow"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 19b4240e_c06f_0965_ec05_d8ddd42c98e3
  69a967f0_da34_9d76_02a5_8fdbe7a1e5af["monacoOptions.ts"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 69a967f0_da34_9d76_02a5_8fdbe7a1e5af
  17f774ac_71d5_1815_6a34_f58dd5c8a61b["transitionTypes.ts"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 17f774ac_71d5_1815_6a34_f58dd5c8a61b
  96e80500_b810_3c4e_7180_185cd24929c1["outline"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 96e80500_b810_3c4e_7180_185cd24929c1
  614e952b_3d61_c4d4_c772_736b3ce12512["react"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 614e952b_3d61_c4d4_c772_736b3ce12512
  33e3aca7_66ee_ce27_72ad_b6d7fb17e06c["babel-plugin-react-compiler"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 33e3aca7_66ee_ce27_72ad_b6d7fb17e06c
  28444858_62f7_fb07_6d63_30f57b1e4e0d["babel"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 28444858_62f7_fb07_6d63_30f57b1e4e0d
  2fb395b5_83d7_bd84_f6d4_e6eb93d46cbe["estree"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> 2fb395b5_83d7_bd84_f6d4_e6eb93d46cbe
  cf4e707f_7fdd_6e90_ffb8_10ca93718846["standalone"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> cf4e707f_7fdd_6e90_ffb8_10ca93718846
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  034b2d8c_7261_f40f_c380_2b5db8fde033 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  style 034b2d8c_7261_f40f_c380_2b5db8fde033 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {
  CodeIcon,
  DocumentAddIcon,
  InformationCircleIcon,
} from '@heroicons/react/outline';
import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
import {
  CompilerErrorDetail,
  CompilerDiagnostic,
  type CompilerError,
} from 'babel-plugin-react-compiler';
import parserBabel from 'prettier/plugins/babel';
import * as prettierPluginEstree from 'prettier/plugins/estree';
import * as prettier from 'prettier/standalone';
import {type Store} from '../../lib/stores';
import {
  memo,
  ReactNode,
  use,
  useState,
  Suspense,
  unstable_ViewTransition as ViewTransition,
  unstable_addTransitionType as addTransitionType,
  startTransition,
} from 'react';
import AccordionWindow from '../AccordionWindow';
import TabbedWindow from '../TabbedWindow';
import {monacoOptions} from './monacoOptions';
import {BabelFileResult} from '@babel/core';
import {
  CONFIG_PANEL_TRANSITION,
  TOGGLE_INTERNALS_TRANSITION,
  EXPAND_ACCORDION_TRANSITION,
} from '../../lib/transitionTypes';
import {LRUCache} from 'lru-cache';

const MemoizedOutput = memo(Output);

export default MemoizedOutput;

export const BASIC_OUTPUT_TAB_NAMES = ['Output', 'SourceMap'];

const tabifyCache = new LRUCache<Store, Promise<Map<string, ReactNode>>>({
  max: 5,
});

export type PrintedCompilerPipelineValue =
  | {
      kind: 'hir';
      name: string;
      fnName: string | null;
      value: string;
    }
// ... (363 more lines)

Domain

Subdomains

Functions

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does Output.tsx do?
Output.tsx is a source file in the react codebase, written in tsx. It belongs to the MonacoIntegration domain, Diagnostics subdomain.
What functions are defined in Output.tsx?
Output.tsx defines 8 function(s): Fallback, Output, OutputContent, TextTabContent, getSourceMapUrl, tabify, tabifyCached, utf16ToUTF8.
What does Output.tsx depend on?
Output.tsx imports 16 module(s): AccordionWindow, AccordionWindow.tsx, TabbedWindow, TabbedWindow.tsx, babel, babel-plugin-react-compiler, core, estree, and 8 more.
What files import Output.tsx?
Output.tsx is imported by 2 file(s): EditorImpl.tsx, compilation.ts.
Where is Output.tsx in the architecture?
Output.tsx is located at compiler/apps/playground/components/Editor/Output.tsx (domain: MonacoIntegration, subdomain: Diagnostics, directory: compiler/apps/playground/components/Editor).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free