watchSrc() — react Function Reference

Architecture documentation for the watchSrc() function in runner-watch.ts from the react codebase.

Function typescript CompilerCore Suppression called by 2

Entity Profile

CompilerCore→ Suppression→ watchSrc() — react Function Reference

Dependency Diagram

graph TD
  5bcf6e03_4526_3498_001e_89cf6fb96d14["watchSrc()"]
  c73218d2_2327_6cce_2ae5_bc0ed6954705["runner-watch.ts"]
  5bcf6e03_4526_3498_001e_89cf6fb96d14 -->|defined in| c73218d2_2327_6cce_2ae5_bc0ed6954705
  bab5d416_5bdb_6631_6a94_d983dd8b4e59["subscribeTsc()"]
  bab5d416_5bdb_6631_6a94_d983dd8b4e59 -->|calls| 5bcf6e03_4526_3498_001e_89cf6fb96d14
  20d242c4_4c86_d693_da20_d3584309d286["runTestCommand()"]
  20d242c4_4c86_d693_da20_d3584309d286 -->|calls| 5bcf6e03_4526_3498_001e_89cf6fb96d14
  style 5bcf6e03_4526_3498_001e_89cf6fb96d14 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/snap/src/runner-watch.ts lines 15–95

export function watchSrc(
  onStart: () => void,
  onComplete: (isSuccess: boolean) => void,
): ts.WatchOfConfigFile<ts.SemanticDiagnosticsBuilderProgram> {
  const configPath = ts.findConfigFile(
    /*searchPath*/ BABEL_PLUGIN_ROOT,
    ts.sys.fileExists,
    'tsconfig.json',
  );
  if (!configPath) {
    throw new Error("Could not find a valid 'tsconfig.json'.");
  }
  const createProgram = ts.createSemanticDiagnosticsBuilderProgram;
  const host = ts.createWatchCompilerHost(
    configPath,
    undefined,
    ts.sys,
    createProgram,
    () => {}, // we manually report errors in afterProgramCreate
    () => {}, // we manually report watch status
  );

  const origCreateProgram = host.createProgram;
  host.createProgram = (rootNames, options, host, oldProgram) => {
    onStart();
    return origCreateProgram(rootNames, options, host, oldProgram);
  };
  host.afterProgramCreate = program => {
    /**
     * Avoid calling original postProgramCreate because it always emits tsc
     * compilation output
     */

    // syntactic diagnostics refer to javascript syntax
    const errors = program
      .getSyntacticDiagnostics()
      .filter(diag => diag.category === ts.DiagnosticCategory.Error);
    // semantic diagnostics refer to typescript semantics
    errors.push(
      ...program
        .getSemanticDiagnostics()
        .filter(diag => diag.category === ts.DiagnosticCategory.Error),
    );

    if (errors.length > 0) {
      for (const diagnostic of errors) {
        let fileLoc: string;
        if (diagnostic.file) {
          // https://github.com/microsoft/TypeScript/blob/ddd5084659c423f4003d2176e12d879b6a5bcf30/src/compiler/program.ts#L663-L674
          const {line, character} = ts.getLineAndCharacterOfPosition(
            diagnostic.file,
            diagnostic.start!,
          );
          const fileName = path.relative(
            ts.sys.getCurrentDirectory(),
            diagnostic.file.fileName,
          );
          fileLoc = `${fileName}:${line + 1}:${character + 1} - `;
        } else {
          fileLoc = '';
        }
        console.error(
          `${fileLoc}error TS${diagnostic.code}:`,
          ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'),
        );
      }
      console.error(
        `Compilation failed (${errors.length} ${
          errors.length > 1 ? 'errors' : 'error'
        }).\n`,
      );
    }

    const isSuccess = errors.length === 0;
    onComplete(isSuccess);
  };

  // `createWatchProgram` creates an initial program, watches files, and updates
  // the program over time.
  return ts.createWatchProgram(host);
}