tabify() — react Function Reference

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

Function tsx MonacoIntegration Diagnostics calls 1 called by 1

Entity Profile

MonacoIntegration→ Diagnostics→ tabify() — react Function Reference

Dependency Diagram

graph TD
  e0cd9053_4662_ac64_ef69_62c2864f1695["tabify()"]
  034b2d8c_7261_f40f_c380_2b5db8fde033["Output.tsx"]
  e0cd9053_4662_ac64_ef69_62c2864f1695 -->|defined in| 034b2d8c_7261_f40f_c380_2b5db8fde033
  96f45ad0_ff4a_d1e6_29df_105ba074271b["tabifyCached()"]
  96f45ad0_ff4a_d1e6_29df_105ba074271b -->|calls| e0cd9053_4662_ac64_ef69_62c2864f1695
  50b341b5_2b1b_8fd3_f092_70cdaeca040c["getSourceMapUrl()"]
  e0cd9053_4662_ac64_ef69_62c2864f1695 -->|calls| 50b341b5_2b1b_8fd3_f092_70cdaeca040c
  style e0cd9053_4662_ac64_ef69_62c2864f1695 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/Output.tsx lines 87–220

async function tabify(
  source: string,
  compilerOutput: CompilerOutput,
  showInternals: boolean,
): Promise<Map<string, ReactNode>> {
  const tabs = new Map<string, React.ReactNode>();
  const reorderedTabs = new Map<string, React.ReactNode>();
  const concattedResults = new Map<string, string>();
  // Concat all top level function declaration results into a single tab for each pass
  for (const [passName, results] of compilerOutput.results) {
    if (!showInternals && !BASIC_OUTPUT_TAB_NAMES.includes(passName)) {
      continue;
    }
    for (const result of results) {
      switch (result.kind) {
        case 'hir': {
          const prev = concattedResults.get(result.name);
          const next = result.value;
          const identName = `function ${result.fnName}`;
          if (prev != null) {
            concattedResults.set(passName, `${prev}\n\n${identName}\n${next}`);
          } else {
            concattedResults.set(passName, `${identName}\n${next}`);
          }
          break;
        }
        case 'reactive': {
          const prev = concattedResults.get(passName);
          const next = result.value;
          if (prev != null) {
            concattedResults.set(passName, `${prev}\n\n${next}`);
          } else {
            concattedResults.set(passName, next);
          }
          break;
        }
        case 'debug': {
          concattedResults.set(passName, result.value);
          break;
        }
        default: {
          const _: never = result;
          throw new Error('Unexpected result kind');
        }
      }
    }
  }
  let lastPassOutput: string | null = null;
  let nonDiffPasses = ['HIR', 'BuildReactiveFunction', 'EnvironmentConfig'];
  for (const [passName, text] of concattedResults) {
    tabs.set(
      passName,
      <TextTabContent
        output={text}
        diff={lastPassOutput}
        showInfoPanel={!nonDiffPasses.includes(passName)}></TextTabContent>,
    );
    lastPassOutput = text;
  }
  // Ensure that JS and the JS source map come first
  if (compilerOutput.kind === 'ok') {
    const {transformOutput} = compilerOutput;
    const sourceMapUrl = getSourceMapUrl(
      transformOutput.code,
      JSON.stringify(transformOutput.sourceMaps),
    );
    const code = await prettier.format(transformOutput.code, {
      semi: true,
      parser: transformOutput.language === 'flow' ? 'babel-flow' : 'babel-ts',
      plugins: [parserBabel, prettierPluginEstree],
    });

    let output: string;
    let language: string;
    if (compilerOutput.errors.length === 0) {
      output = code;
      language = 'javascript';
    } else {
      language = 'markdown';
      output = `
# Summary