or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

compatibility-checking.md debug-display.md index.md target-resolution.md

tile.json

Debug and Display

Utilities for formatting targets for display and debugging why certain features are included or excluded for specific compilation targets.

Capabilities

Target Prettification

Formats target objects for human-readable display by removing unnecessary version suffixes.

/**
 * Formats target objects for display by prettifying version strings
 * @param targets - Target environments and versions to format
 * @returns New targets object with prettified version strings
 */
function prettifyTargets(targets: Targets): Targets;

Usage Examples:

import { prettifyTargets } from "@babel/helper-compilation-targets";

const targets = {
  chrome: "60.0.0",
  firefox: "55.0.0", 
  node: "14.15.1",
  safari: "tp" // technology preview - unchanged
};

const pretty = prettifyTargets(targets);
console.log(pretty);
// Result: { chrome: "60", firefox: "55", node: "14.15.1", safari: "tp" }

Feature Inclusion Debugging

Explains why a specific feature is included for given target environments by showing which targets require the feature.

/**
 * Returns which target environments require a feature and why
 * @param item - Feature/plugin name to analyze
 * @param targetVersions - Target environments and their versions
 * @param list - Feature compatibility data mapping feature names to support data
 * @returns Object mapping target names to the reasons they require the feature
 */
function getInclusionReasons(
  item: string,
  targetVersions: Targets,
  list: { [key: string]: Targets }
): Partial<Record<Target, string>>;

Usage Examples:

import { getInclusionReasons } from "@babel/helper-compilation-targets";

const targets = { chrome: "50.0.0", firefox: "45.0.0", safari: "12.0.0" };

const compatData = {
  "async-functions": { 
    chrome: "55.0.0", 
    firefox: "52.0.0", 
    safari: "10.1.0" 
  }
};

const reasons = getInclusionReasons("async-functions", targets, compatData);
console.log(reasons);
// Result: { chrome: "50", firefox: "45" }
// Safari is not included because target 12.0.0 >= required 10.1.0

// Feature with no support data
const unknownReasons = getInclusionReasons("unknown-feature", targets, compatData);
console.log(unknownReasons); 
// Result: { chrome: "50", firefox: "45", safari: "12" }
// All targets included when no compatibility data available

Debugging Workflow

The debug utilities are particularly useful for understanding Babel's decision-making process:

Use getInclusionReasons to understand why specific plugins or transforms are being applied
Use prettifyTargets to display target configurations in logs or debugging output
Combine with compatibility data to trace exactly which browser versions are driving transform requirements

Example Debugging Session:

import getTargets, { getInclusionReasons, prettifyTargets } from "@babel/helper-compilation-targets";
import pluginsCompatData from "@babel/compat-data/plugins";

// Get resolved targets
const targets = getTargets({ browsers: "last 2 versions" });
console.log("Resolved targets:", prettifyTargets(targets));

// Check specific features
const asyncReasons = getInclusionReasons("transform-async-to-generator", targets, pluginsCompatData);
console.log("Async transform needed for:", asyncReasons);

const arrowReasons = getInclusionReasons("transform-arrow-functions", targets, pluginsCompatData);  
console.log("Arrow transform needed for:", arrowReasons);

Pretty Printing Logic

The prettification functions follow these rules:

Remove trailing .0: "60.0.0" becomes "60"
Keep meaningful precision: "14.15.1" stays "14.15.1"
Preserve special labels: "tp" (technology preview) remains unchanged
Handle partial versions: "55.1.0" becomes "55.1"

This creates cleaner, more readable output for logging and debugging while preserving important version information.