Input() — react Function Reference

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

Function tsx MonacoIntegration Diagnostics calls 1

Entity Profile

MonacoIntegration→ Diagnostics→ Input() — react Function Reference

Dependency Diagram

graph TD
  99f7f91e_9a0f_2ee9_8e38_6383bf6ab909["Input()"]
  e75ba65e_505f_abf4_2928_6f0aefb2fc72["Input.tsx"]
  99f7f91e_9a0f_2ee9_8e38_6383bf6ab909 -->|defined in| e75ba65e_505f_abf4_2928_6f0aefb2fc72
  ccff0127_f1ca_c8b6_a56a_96b843fe80f8["renderReactCompilerMarkers()"]
  99f7f91e_9a0f_2ee9_8e38_6383bf6ab909 -->|calls| ccff0127_f1ca_c8b6_a56a_96b843fe80f8
  style 99f7f91e_9a0f_2ee9_8e38_6383bf6ab909 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/Input.tsx lines 37–180

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.
     */
    if (!monaco) return;
    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      diagnosticCodesToIgnore: [
        8002,
        8003,
        8004,
        8005,
        8006,
        8008,
        8009,
        8010,
        8011,
        8012,
        8013,
        ...(language === 'flow'
          ? [7028 /* unused label */, 6133 /* var declared but not read */]
          : []),
      ],
      noSemanticValidation: true,
      // Monaco can't validate Flow component syntax
      noSyntaxValidation: language === 'flow',
    });
  }, [monaco, language]);

  const handleChange: (value: string | undefined) => void = async value => {
    if (!value) return;

    dispatchStore({
      type: 'updateSource',
      payload: {
        source: value,
      },
    });
  };

  const handleMount: (
    _: editor.IStandaloneCodeEditor,
    monaco: Monaco,
  ) => void = (_, monaco) => {
    if (typeof window !== 'undefined') {
      window['__MONACO_LOADED__'] = true;
    }
    setMonaco(monaco);

    const tscOptions = {
      allowNonTsExtensions: true,
      target: monaco.languages.typescript.ScriptTarget.ES2015,
      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
      jsx: monaco.languages.typescript.JsxEmit.Preserve,
      typeRoots: ['node_modules/@types'],
      allowSyntheticDefaultImports: true,
    };
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
      tscOptions,
    );
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({