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

Input.tsx — react Source File

Architecture documentation for Input.tsx, a tsx file in the react codebase. 13 imports, 1 dependents.

File tsx MonacoIntegration Diagnostics 13 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  e75ba65e_505f_abf4_2928_6f0aefb2fc72["Input.tsx"]
  39c8dc04_8ac1_438b_0e3a_3111834a5732["reactCompilerMonacoDiagnostics.ts"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 39c8dc04_8ac1_438b_0e3a_3111834a5732
  ccff0127_f1ca_c8b6_a56a_96b843fe80f8["renderReactCompilerMarkers"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> ccff0127_f1ca_c8b6_a56a_96b843fe80f8
  73168655_c854_d3d1_50a0_b37f865f3c7e["StoreContext.tsx"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 73168655_c854_d3d1_50a0_b37f865f3c7e
  b03258e0_be86_ee60_1d40_970f96914cd3["TabbedWindow.tsx"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> b03258e0_be86_ee60_1d40_970f96914cd3
  19b4240e_c06f_0965_ec05_d8ddd42c98e3["TabbedWindow"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 19b4240e_c06f_0965_ec05_d8ddd42c98e3
  69a967f0_da34_9d76_02a5_8fdbe7a1e5af["monacoOptions.ts"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 69a967f0_da34_9d76_02a5_8fdbe7a1e5af
  17f774ac_71d5_1815_6a34_f58dd5c8a61b["transitionTypes.ts"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 17f774ac_71d5_1815_6a34_f58dd5c8a61b
  0cd59214_cacc_4d2b_8f89_af0464e0c914["../../node_modules/@types/react/index.d.ts"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 0cd59214_cacc_4d2b_8f89_af0464e0c914
  614e952b_3d61_c4d4_c772_736b3ce12512["react"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 614e952b_3d61_c4d4_c772_736b3ce12512
  33e3aca7_66ee_ce27_72ad_b6d7fb17e06c["babel-plugin-react-compiler"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 33e3aca7_66ee_ce27_72ad_b6d7fb17e06c
  7b0f5d46_efcb_4a2d_89c1_7cee4a0f9bc8["invariant"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> 7b0f5d46_efcb_4a2d_89c1_7cee4a0f9bc8
  be60078a_fa8c_61df_2166_fcc9d56cb30b["monaco-editor"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> be60078a_fa8c_61df_2166_fcc9d56cb30b
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  6c4ddf93_cf1a_7b66_fd69_69c7c8032b25["EditorImpl.tsx"]
  6c4ddf93_cf1a_7b66_fd69_69c7c8032b25 --> e75ba65e_505f_abf4_2928_6f0aefb2fc72
  style e75ba65e_505f_abf4_2928_6f0aefb2fc72 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 MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
import {
  CompilerErrorDetail,
  CompilerDiagnostic,
} from 'babel-plugin-react-compiler';
import invariant from 'invariant';
import type {editor} from 'monaco-editor';
import * as monaco from 'monaco-editor';
import {
  useEffect,
  useState,
  unstable_ViewTransition as ViewTransition,
} from 'react';
import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
import {useStore, useStoreDispatch} from '../StoreContext';
import TabbedWindow from '../TabbedWindow';
import {monacoOptions} from './monacoOptions';
import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';

// @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
import React$Types from '../../node_modules/@types/react/index.d.ts';

loader.config({monaco});

type Props = {
  errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
  language: 'flow' | 'typescript';
};

export default function Input({errors, language}: Props): JSX.Element {
  const [monaco, setMonaco] = useState<Monaco | null>(null);
  const store = useStore();
  const dispatchStore = useStoreDispatch();

  // Set tab width to 2 spaces for the selected input file.
  useEffect(() => {
    if (!monaco) return;
    const uri = monaco.Uri.parse(`file:///index.js`);
    const model = monaco.editor.getModel(uri);
    invariant(model, 'Model must exist for the selected input file.');
    renderReactCompilerMarkers({
      monaco,
      model,
      details: errors,
      source: store.source,
    });
  }, [monaco, errors, store.source]);

  useEffect(() => {
    /**
     * Ignore "can only be used in TypeScript files." errors, since
     * we want to support syntax highlighting for Flow (*.js) files
     * and Flow is not a built-in language.
// ... (121 more lines)

Domain

Subdomains

Functions

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does Input.tsx do?
Input.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 Input.tsx?
Input.tsx defines 1 function(s): Input.
What does Input.tsx depend on?
Input.tsx imports 13 module(s): ../../node_modules/@types/react/index.d.ts, StoreContext.tsx, TabbedWindow, TabbedWindow.tsx, babel-plugin-react-compiler, invariant, monaco-editor, monacoOptions.ts, and 5 more.
What files import Input.tsx?
Input.tsx is imported by 1 file(s): EditorImpl.tsx.
Where is Input.tsx in the architecture?
Input.tsx is located at compiler/apps/playground/components/Editor/Input.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