renderAutocomplete() — react Function Reference

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

Function typescript BabelCompiler Optimization called by 1

Entity Profile

BabelCompiler→ Optimization→ renderAutocomplete() — react Function Reference

Dependency Diagram

graph TD
  711bc253_d799_dc69_d704_cfb793a8f199["renderAutocomplete()"]
  3c2dde8c_5e90_a277_13bd_39083b18cadb["runner-watch.ts"]
  711bc253_d799_dc69_d704_cfb793a8f199 -->|defined in| 3c2dde8c_5e90_a277_13bd_39083b18cadb
  6449f3d6_f157_1b29_f37a_a1faad31e9e1["subscribeKeyEvents()"]
  6449f3d6_f157_1b29_f37a_a1faad31e9e1 -->|calls| 711bc253_d799_dc69_d704_cfb793a8f199
  style 711bc253_d799_dc69_d704_cfb793a8f199 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/snap/src/runner-watch.ts lines 240–280

function renderAutocomplete(state: RunnerState): void {
  // Clear terminal
  console.log('\u001Bc');

  // Show current input
  console.log(`Pattern: ${state.inputBuffer}`);
  console.log('');

  // Get current filter pattern if active
  const currentFilterPattern =
    state.mode.filter && state.filter ? state.filter.paths[0] : null;

  // Show matching fixtures (limit to MAX_DISPLAY)
  const toShow = state.matchingFixtures.slice(0, MAX_DISPLAY);

  toShow.forEach((name, i) => {
    const isSelected = i === state.selectedIndex;
    const matchesCurrentFilter =
      currentFilterPattern != null &&
      name.toLowerCase().includes(currentFilterPattern.toLowerCase());

    let prefix: string;
    if (isSelected) {
      prefix = '> ';
    } else if (matchesCurrentFilter) {
      prefix = '* ';
    } else {
      prefix = '  ';
    }
    console.log(`${prefix}${name}`);
  });

  if (state.matchingFixtures.length > MAX_DISPLAY) {
    console.log(
      `  ... and ${state.matchingFixtures.length - MAX_DISPLAY} more`,
    );
  }

  console.log('');
  console.log('↑/↓/Tab navigate | Enter select | Esc cancel');
}