@sc4rfurryx/proteusjs/src/utils/support.ts

The Modern Web Development Framework for Accessible, Responsive, and High-Performance Applications. Intelligent container queries, fluid typography, WCAG compliance, and performance optimization.

/**
 * Browser support detection utilities
 */

export interface SupportInfo {
  resizeObserver: boolean;
  intersectionObserver: boolean;
  containerQueries: boolean;
  cssClamp: boolean;
  cssCustomProperties: boolean;
  webWorkers: boolean;
  requestAnimationFrame: boolean;
  passiveEventListeners: boolean;
}

/**
 * Check if the current environment supports ProteusJS features
 */
export function isSupported(): boolean {
  const support = getSupportInfo();
  return support.resizeObserver && support.intersectionObserver;
}

/**
 * Get detailed support information for all features
 */
export function getSupportInfo(): SupportInfo {
  return {
    resizeObserver: typeof ResizeObserver !== 'undefined',
    intersectionObserver: typeof IntersectionObserver !== 'undefined',
    containerQueries: checkContainerQuerySupport(),
    cssClamp: checkCSSClampSupport(),
    cssCustomProperties: checkCSSCustomPropertiesSupport(),
    webWorkers: typeof Worker !== 'undefined',
    requestAnimationFrame: typeof requestAnimationFrame !== 'undefined',
    passiveEventListeners: checkPassiveEventListenerSupport()
  };
}

/**
 * Check if CSS Container Queries are supported
 */
function checkContainerQuerySupport(): boolean {
  if (typeof CSS === 'undefined' || !CSS.supports) return false;
  return CSS.supports('container-type', 'inline-size');
}

/**
 * Check if CSS clamp() function is supported
 */
function checkCSSClampSupport(): boolean {
  if (typeof CSS === 'undefined' || !CSS.supports) return false;
  return CSS.supports('font-size', 'clamp(1rem, 2vw, 2rem)');
}

/**
 * Check if CSS Custom Properties are supported
 */
function checkCSSCustomPropertiesSupport(): boolean {
  if (typeof CSS === 'undefined' || !CSS.supports) return false;
  return CSS.supports('--test', 'value');
}

/**
 * Check if passive event listeners are supported
 */
function checkPassiveEventListenerSupport(): boolean {
  let passiveSupported = false;
  
  try {
    const options = {
      get passive() {
        passiveSupported = true;
        return false;
      }
    };
    
    window.addEventListener('test' as any, null as any, options as any);
    window.removeEventListener('test' as any, null as any, options as any);
  } catch (err) {
    passiveSupported = false;
  }
  
  return passiveSupported;
}

/**
 * Get a user-friendly support message
 */
export function getSupportMessage(): string {
  const support = getSupportInfo();
  
  if (!support.resizeObserver) {
    return 'ResizeObserver is not supported. Please use a polyfill.';
  }
  
  if (!support.intersectionObserver) {
    return 'IntersectionObserver is not supported. Please use a polyfill.';
  }
  
  if (!support.containerQueries) {
    return 'CSS Container Queries are not supported. ProteusJS will provide a polyfill.';
  }
  
  return 'All features are supported!';
}