Support Analysis

/**
 * Get support for a specific browser in normalized array form
 * @param compat - Compatibility statement containing support data
 * @param browser - Browser name to get support information for
 * @returns Array of support statements (returns [{ version_added: false }] if no support data exists)
 */
function iterSupport(
  compat: CompatStatement, 
  browser: BrowserName
): SimpleSupportStatement[];

/**
 * Union type of all supported browser names
 */
type BrowserName = 
  | "chrome" 
  | "chrome_android" 
  | "edge" 
  | "firefox" 
  | "firefox_android" 
  | "safari" 
  | "safari_ios" 
  | "opera" 
  | "opera_android" 
  | "webview_android" 
  | "samsunginternet_android" 
  | "oculus" 
  | "webview_ios";

import bcd, { iterSupport } from '@mdn/browser-compat-data';

// Get Chrome support for fetch API
const fetchCompat = bcd.api.fetch.__compat;
const chromeSupport = iterSupport(fetchCompat, 'chrome');

console.log(chromeSupport[0].version_added); // "42"
console.log(chromeSupport[0].notes); // Any implementation notes

// Handle multiple support statements
const flexboxCompat = bcd.css.properties.display.__compat;
const firefoxSupport = iterSupport(flexboxCompat, 'firefox');

firefoxSupport.forEach((support, index) => {
  console.log(`Firefox support entry ${index + 1}:`);
  console.log(`Version added: ${support.version_added}`);
  if (support.prefix) {
    console.log(`Prefix required: ${support.prefix}`);
  }
});

// Check for feature flag requirements
const containerSupport = iterSupport(
  bcd.css.properties["container-type"].__compat, 
  'chrome'
);

if (containerSupport[0].flags) {
  console.log('Feature flags required:');
  containerSupport[0].flags.forEach(flag => {
    console.log(`${flag.type}: ${flag.name} = ${flag.value_to_set}`);
  });
}

// Handle missing browser support (returns fallback)
const missingFeature = { __compat: { support: {} } };
const noSupport = iterSupport(missingFeature.__compat, 'chrome');
console.log(noSupport); // [{ version_added: false }]

/**
 * Detailed browser support information for a specific browser version or range
 */
interface SimpleSupportStatement {
  /** Version when support was added (version string, true, false, or null) */
  version_added: VersionValue;
  /** Version when support was removed (if applicable) */
  version_removed?: VersionValue;
  /** Required prefix for the feature (e.g., "-webkit-") */
  prefix?: string;
  /** Alternative name the feature was known by */
  alternative_name?: string;
  /** Required flags to enable the feature */
  flags?: FlagStatement[];
  /** Implementation tracking URL for the feature */
  impl_url?: string;
  /** Additional notes about the implementation or support */
  notes?: string | string[];
  /** Whether support is only partial (missing some functionality) */
  partial_implementation?: boolean;
}

/**
 * Version value types
 */
type VersionValue = string | boolean | null;

/**
 * Feature flag information
 */
interface FlagStatement {
  /** Type of flag required */
  type: "preference" | "compile_flag" | "runtime_flag";
  /** Name of the flag or preference */
  name: string;
  /** Value to set for the flag (if applicable) */
  value_to_set?: string;
}

import bcd, { iterSupport, walk } from '@mdn/browser-compat-data';

// Find features with partial implementations
for (const { path, compat } of walk(undefined, bcd)) {
  const chromeSupport = iterSupport(compat, 'chrome');
  
  if (chromeSupport.some(s => s.partial_implementation)) {
    console.log(`Chrome has partial support for: ${path}`);
  }
}

// Find features requiring prefixes
for (const { path, compat } of walk('css.properties', bcd)) {
  const safariSupport = iterSupport(compat, 'safari');
  
  const prefixedSupport = safariSupport.find(s => s.prefix);
  if (prefixedSupport) {
    console.log(`${path} requires prefix in Safari: ${prefixedSupport.prefix}`);
  }
}

// Find features behind flags
for (const { path, compat } of walk(undefined, bcd)) {
  const firefoxSupport = iterSupport(compat, 'firefox');
  
  const flaggedSupport = firefoxSupport.find(s => s.flags && s.flags.length > 0);
  if (flaggedSupport) {
    console.log(`${path} requires flags in Firefox:`);
    flaggedSupport.flags.forEach(flag => {
      console.log(`  ${flag.name} (${flag.type})`);
    });
  }
}

// Check version support ranges
const gridCompat = bcd.css.properties["grid-template-columns"].__compat;
const chromeGrid = iterSupport(gridCompat, 'chrome');

chromeGrid.forEach(support => {
  if (support.version_added && support.version_removed) {
    console.log(`Supported from ${support.version_added} to ${support.version_removed}`);
  } else if (support.version_added) {
    console.log(`Supported since version ${support.version_added}`);
  }
});

// Check if a feature is supported in a browser
function isSupported(compat: CompatStatement, browser: BrowserName): boolean {
  const support = iterSupport(compat, browser);
  return support.some(s => 
    s.version_added === true || 
    (typeof s.version_added === 'string' && s.version_added !== '0')
  );
}

// Get minimum supported version
function getMinVersion(compat: CompatStatement, browser: BrowserName): string | null {
  const support = iterSupport(compat, browser);
  const versions = support
    .map(s => s.version_added)
    .filter((v): v is string => typeof v === 'string' && v !== '0')
    .sort();
  
  return versions.length > 0 ? versions[0] : null;
}

// Check if feature requires flags
function requiresFlags(compat: CompatStatement, browser: BrowserName): boolean {
  const support = iterSupport(compat, browser);
  return support.some(s => s.flags && s.flags.length > 0);
}

// Usage examples
const fetchCompat = bcd.api.fetch.__compat;

console.log(isSupported(fetchCompat, 'chrome')); // true
console.log(getMinVersion(fetchCompat, 'chrome')); // "42"
console.log(requiresFlags(fetchCompat, 'chrome')); // false

// Check experimental CSS feature
const containerCompat = bcd.css.properties["container-type"].__compat;
console.log(requiresFlags(containerCompat, 'chrome')); // true (if behind flags)

/**
 * Interpret version values from browser support data
 */
function interpretVersionValue(version: VersionValue): string {
  if (version === true) {
    return "Supported (version unknown)";
  } else if (version === false) {
    return "Not supported";
  } else if (version === null) {
    return "Support status unknown";
  } else {
    return `Supported since version ${version}`;
  }
}

// Usage example
const cssGridCompat = bcd.css.properties.display.__compat;
const chromeSupport = iterSupport(cssGridCompat, 'chrome');

chromeSupport.forEach(support => {
  console.log(interpretVersionValue(support.version_added));
  
  if (support.version_removed) {
    console.log(`Removed in: ${interpretVersionValue(support.version_removed)}`);
  }
});

import bcd, { iterSupport } from '@mdn/browser-compat-data';

// Check support across all major browsers
function analyzeCrossBrowserSupport(compat: CompatStatement) {
  const majorBrowsers: BrowserName[] = ['chrome', 'firefox', 'safari', 'edge'];
  
  const support: Record<string, SimpleSupportStatement[]> = {};
  
  for (const browser of majorBrowsers) {
    support[browser] = iterSupport(compat, browser);
  }
  
  return support;
}

// Find widely supported features
function isWidelySupported(compat: CompatStatement): boolean {
  const majorBrowsers: BrowserName[] = ['chrome', 'firefox', 'safari', 'edge'];
  
  return majorBrowsers.every(browser => {
    const support = iterSupport(compat, browser);
    return support.some(s => 
      s.version_added === true || 
      (typeof s.version_added === 'string' && s.version_added !== '0')
    );
  });
}

// Usage
const flexboxCompat = bcd.css.properties.display.__compat;
const crossBrowserSupport = analyzeCrossBrowserSupport(flexboxCompat);

Object.entries(crossBrowserSupport).forEach(([browser, support]) => {
  console.log(`${browser}: ${interpretVersionValue(support[0].version_added)}`);
});

console.log(`Widely supported: ${isWidelySupported(flexboxCompat)}`);

// Check if support data exists for a browser
function hasSupportData(compat: CompatStatement, browser: BrowserName): boolean {
  return iterSupport(compat, browser).length > 0;
}

// Get comprehensive support information
function getSupportSummary(compat: CompatStatement, browser: BrowserName) {
  const support = iterSupport(compat, browser);
  
  if (support.length === 0) {
    return { hasData: false };
  }
  
  const primary = support[0];
  
  return {
    hasData: true,
    version: primary.version_added,
    hasPrefix: Boolean(primary.prefix),
    prefix: primary.prefix,
    hasFlags: Boolean(primary.flags && primary.flags.length > 0),
    flags: primary.flags || [],
    isPartial: Boolean(primary.partial_implementation),
    notes: primary.notes,
    alternativeName: primary.alternative_name,
    implementations: support.length
  };
}

// Usage
const serviceWorkerCompat = bcd.api.ServiceWorker.__compat;
const chromeSummary = getSupportSummary(serviceWorkerCompat, 'chrome');

console.log(chromeSummary);
// {
//   hasData: true,
//   version: "40",
//   hasPrefix: false,
//   hasFlags: false,
//   isPartial: false,
//   implementations: 1
// }