CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-fbjs

A collection of utility libraries used by other Facebook JS projects including React and Relay

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

user-agent-browser.mddocs/

User Agent & Browser

Browser detection, user agent parsing, and version comparison utilities for cross-browser compatibility.

Capabilities

User Agent Detection

Comprehensive user agent parsing and browser detection utilities.

const UserAgent = require('fbjs/lib/UserAgent');

/**
 * User agent parsing and browser detection utilities
 */
const UserAgent: {
  /**
   * Gets browser name from user agent
   * @param userAgentString - Optional user agent string (uses navigator.userAgent if not provided)
   * @returns Browser name (e.g., 'Chrome', 'Firefox', 'Safari', 'IE', 'Edge')
   */
  getBrowserName(userAgentString?: string): string;
  
  /**
   * Gets browser version from user agent
   * @param userAgentString - Optional user agent string
   * @returns Browser version string (e.g., '91.0.4472.124')
   */
  getBrowserVersion(userAgentString?: string): string;
  
  /**
   * Gets operating system from user agent
   * @param userAgentString - Optional user agent string
   * @returns OS name (e.g., 'Windows', 'macOS', 'Linux', 'iOS', 'Android')
   */
  getOS(userAgentString?: string): string;
  
  /**
   * Gets OS version from user agent
   * @param userAgentString - Optional user agent string
   * @returns OS version string
   */
  getOSVersion(userAgentString?: string): string;
  
  /**
   * Checks if browser is mobile
   * @param userAgentString - Optional user agent string
   * @returns True if mobile browser
   */
  isMobile(userAgentString?: string): boolean;
  
  /**
   * Checks if browser is tablet
   * @param userAgentString - Optional user agent string
   * @returns True if tablet browser
   */
  isTablet(userAgentString?: string): boolean;
  
  /**
   * Checks if browser is desktop
   * @param userAgentString - Optional user agent string
   * @returns True if desktop browser
   */
  isDesktop(userAgentString?: string): boolean;
  
  /**
   * Gets device type
   * @param userAgentString - Optional user agent string
   * @returns Device type ('mobile', 'tablet', 'desktop')
   */
  getDeviceType(userAgentString?: string): string;
  
  /**
   * Checks if specific browser
   * @param browserName - Browser name to check for
   * @param userAgentString - Optional user agent string
   * @returns True if browser matches
   */
  isBrowser(browserName: string, userAgentString?: string): boolean;
  
  /**
   * Checks if browser version matches criteria
   * @param browserName - Browser name
   * @param versionCriteria - Version criteria (e.g., '>=91', '<90', '89-92')
   * @param userAgentString - Optional user agent string
   * @returns True if version matches criteria
   */
  isBrowserVersion(browserName: string, versionCriteria: string, userAgentString?: string): boolean;
  
  /**
   * Gets engine name
   * @param userAgentString - Optional user agent string
   * @returns Engine name (e.g., 'Blink', 'Gecko', 'WebKit', 'Trident')
   */
  getEngine(userAgentString?: string): string;
  
  /**
   * Gets engine version
   * @param userAgentString - Optional user agent string
   * @returns Engine version string
   */
  getEngineVersion(userAgentString?: string): string;
  
  /**
   * Parses complete user agent information
   * @param userAgentString - Optional user agent string
   * @returns Complete parsed user agent object
   */
  parse(userAgentString?: string): {
    browser: {
      name: string,
      version: string,
      major: string
    },
    engine: {
      name: string,
      version: string
    },
    os: {
      name: string,
      version: string
    },
    device: {
      type: string,
      vendor?: string,
      model?: string
    },
    cpu: {
      architecture?: string
    }
  };
};

Usage Examples:

const UserAgent = require('fbjs/lib/UserAgent');

// Basic browser detection
const browserName = UserAgent.getBrowserName();
const browserVersion = UserAgent.getBrowserVersion();
console.log(`Browser: ${browserName} ${browserVersion}`);

// Device type detection
const deviceType = UserAgent.getDeviceType();
const isMobile = UserAgent.isMobile();
const isTablet = UserAgent.isTablet();

console.log(`Device type: ${deviceType}`);
console.log(`Is mobile: ${isMobile}`);

// Operating system detection
const osName = UserAgent.getOS();
const osVersion = UserAgent.getOSVersion();
console.log(`OS: ${osName} ${osVersion}`);

// Browser-specific feature detection
if (UserAgent.isBrowser('Chrome')) {
  console.log('Chrome-specific features available');
}

if (UserAgent.isBrowserVersion('Chrome', '>=90')) {
  console.log('Modern Chrome features available');
}

// Complete parsing
const parsed = UserAgent.parse();
console.log('Complete user agent info:', parsed);

// Custom user agent string parsing
const customUA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15';
const mobileInfo = UserAgent.parse(customUA);
console.log('Mobile browser info:', mobileInfo);

// Feature availability based on browser
function supportsModernFeatures() {
  const browser = UserAgent.getBrowserName();
  const version = parseInt(UserAgent.getBrowserVersion());
  
  switch (browser) {
    case 'Chrome':
      return version >= 90;
    case 'Firefox':
      return version >= 88;
    case 'Safari':
      return version >= 14;
    case 'Edge':
      return version >= 90;
    default:
      return false;
  }
}

// Responsive behavior based on device
function adaptToDevice() {
  const deviceType = UserAgent.getDeviceType();
  
  switch (deviceType) {
    case 'mobile':
      document.body.classList.add('mobile-layout');
      break;
    case 'tablet':
      document.body.classList.add('tablet-layout');
      break;
    case 'desktop':
      document.body.classList.add('desktop-layout');
      break;
  }
}

User Agent Data

Pre-parsed user agent information object with comprehensive browser and system details.

const UserAgentData = require('fbjs/lib/UserAgentData');

/**
 * Pre-parsed user agent data object containing comprehensive browser information
 */
interface UserAgentDataType {
  browserArchitecture: string;    // e.g., 'amd64', 'arm64'
  browserFullVersion: string;     // Complete version string with all parts
  browserMinorVersion: string;    // Minor version component
  browserName: string;           // Browser name (Chrome, Firefox, etc.)
  browserVersion: string;        // Major version number
  deviceName: string;           // Device name/model
  engineName: string;           // Rendering engine (Blink, Gecko, etc.)
  engineVersion: string;        // Engine version
  platformArchitecture: string; // Platform architecture
  platformName: string;         // Platform/OS name
  platformVersion: string;      // Platform version
  platformFullVersion: string;  // Complete platform version
}

// Usage: Import the pre-parsed data object
const userAgentData: UserAgentDataType = UserAgentData;

Usage Examples:

const UserAgentData = require('fbjs/lib/UserAgentData');

// Access pre-parsed user agent information
console.log('Browser:', UserAgentData.browserName, UserAgentData.browserVersion);
console.log('Platform:', UserAgentData.platformName, UserAgentData.platformVersion);
console.log('Engine:', UserAgentData.engineName, UserAgentData.engineVersion);
console.log('Architecture:', UserAgentData.browserArchitecture);

// Browser compatibility checks
function checkCompatibility() {
  const { browserName, browserVersion } = UserAgentData;
  
  const compatibility = {
    webgl: false,
    webrtc: false,
    serviceworker: false,
    modules: false
  };
  
  const majorVersion = parseInt(browserVersion);
  
  switch (browserName.toLowerCase()) {
    case 'chrome':
      compatibility.webgl = majorVersion >= 56;
      compatibility.webrtc = majorVersion >= 23;
      compatibility.serviceworker = majorVersion >= 45;
      compatibility.modules = majorVersion >= 61;
      break;
      
    case 'firefox':
      compatibility.webgl = majorVersion >= 51;
      compatibility.webrtc = majorVersion >= 22;
      compatibility.serviceworker = majorVersion >= 44;
      compatibility.modules = majorVersion >= 60;
      break;
      
    case 'safari':
      compatibility.webgl = majorVersion >= 8;
      compatibility.webrtc = majorVersion >= 11;
      compatibility.serviceworker = majorVersion >= 11;
      compatibility.modules = majorVersion >= 10;
      break;
  }
  
  return compatibility;
}

// Platform-specific behavior
function platformSpecificSetup() {
  const { platformName, platformArchitecture } = UserAgentData;
  
  if (platformName === 'Windows') {
    console.log('Windows-specific setup');
    if (platformArchitecture === 'arm64') {
      console.log('ARM64 Windows optimizations');
    }
  } else if (platformName === 'macOS') {
    console.log('macOS-specific setup');
  } else if (platformName === 'Linux') {
    console.log('Linux-specific setup');
  }
}

// Performance optimizations based on device
function optimizeForDevice() {
  const {
    browserName,
    browserVersion,
    platformName,
    deviceName
  } = UserAgentData;
  
  const settings = {
    animationsEnabled: true,
    highDPI: true,
    webWorkers: true,
    offscreenCanvas: false
  };
  
  // Mobile device optimizations
  if (deviceName && (deviceName.includes('iPhone') || deviceName.includes('Android'))) {
    settings.animationsEnabled = false; // Preserve battery
    settings.webWorkers = false; // Reduce memory usage
  }
  
  // Browser-specific optimizations
  if (browserName === 'Safari' && parseInt(browserVersion) < 12) {
    settings.webWorkers = false; // Safari bug workaround
  }
  
  return settings;
}

// Create user agent fingerprint
function createFingerprint() {
  const {
    browserName,
    browserFullVersion,
    platformName,
    platformFullVersion,
    engineName,
    engineVersion
  } = UserAgentData;
  
  return btoa([
    browserName,
    browserFullVersion,
    platformName,
    platformFullVersion,
    engineName,
    engineVersion
  ].join('|'));
}

// Analytics tracking
function trackUserAgent() {
  const analytics = {
    browser: `${UserAgentData.browserName} ${UserAgentData.browserVersion}`,
    platform: `${UserAgentData.platformName} ${UserAgentData.platformVersion}`,
    engine: `${UserAgentData.engineName} ${UserAgentData.engineVersion}`,
    architecture: UserAgentData.platformArchitecture,
    device: UserAgentData.deviceName || 'Unknown'
  };
  
  console.log('User agent analytics:', analytics);
  return analytics;
}

Version Range Utilities

Version comparison and range checking utilities for browser compatibility.

const VersionRange = require('fbjs/lib/VersionRange');

/**
 * Version range comparison utilities for browser compatibility checking
 */
const VersionRange: {
  /**
   * Checks if version satisfies range criteria
   * @param version - Version string to check (e.g., '91.0.4472.124')
   * @param range - Range criteria (e.g., '>=90', '<92', '90-92', '^90.1')
   * @returns True if version satisfies range
   */
  satisfies(version: string, range: string): boolean;
  
  /**
   * Compares two version strings
   * @param version1 - First version string
   * @param version2 - Second version string
   * @returns -1 if v1 < v2, 0 if equal, 1 if v1 > v2
   */
  compare(version1: string, version2: string): number;
  
  /**
   * Checks if version is greater than comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version > compareVersion
   */
  gt(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version is greater than or equal to comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version >= compareVersion
   */
  gte(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version is less than comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version < compareVersion
   */
  lt(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version is less than or equal to comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version <= compareVersion
   */
  lte(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version equals comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if versions are equal
   */
  eq(version: string, compareVersion: string): boolean;
  
  /**
   * Parses version string into components
   * @param version - Version string to parse
   * @returns Object with major, minor, patch, and prerelease components
   */
  parse(version: string): {
    major: number,
    minor: number,
    patch: number,
    prerelease?: Array<string|number>,
    build?: Array<string|number>
  };
  
  /**
   * Formats version components into string
   * @param versionObj - Version object with components
   * @returns Formatted version string
   */
  format(versionObj: {major: number, minor: number, patch: number}): string;
  
  /**
   * Gets valid range from string
   * @param rangeString - Range string to parse
   * @returns Parsed range object
   */
  parseRange(rangeString: string): {
    operator: string,
    version: string,
    satisfied: (version: string) => boolean
  };
  
  /**
   * Finds highest version that satisfies range
   * @param versions - Array of version strings
   * @param range - Range criteria
   * @returns Highest satisfying version or null
   */
  maxSatisfying(versions: Array<string>, range: string): ?string;
  
  /**
   * Finds lowest version that satisfies range
   * @param versions - Array of version strings  
   * @param range - Range criteria
   * @returns Lowest satisfying version or null
   */
  minSatisfying(versions: Array<string>, range: string): ?string;
};

Usage Examples:

const VersionRange = require('fbjs/lib/VersionRange');
const UserAgent = require('fbjs/lib/UserAgent');

// Browser compatibility checking
function checkBrowserSupport(featureName, requirements) {
  const browserName = UserAgent.getBrowserName();
  const browserVersion = UserAgent.getBrowserVersion();
  
  const requirement = requirements[browserName.toLowerCase()];
  if (!requirement) {
    return false; // Browser not supported
  }
  
  return VersionRange.satisfies(browserVersion, requirement);
}

// Feature requirements
const webRTCRequirements = {
  chrome: '>=23',
  firefox: '>=22',
  safari: '>=11',
  edge: '>=79'
};

const supportsWebRTC = checkBrowserSupport('webrtc', webRTCRequirements);
console.log('WebRTC support:', supportsWebRTC);

// Version comparison examples
console.log(VersionRange.compare('91.0.4472', '90.0.4430')); // 1 (greater)
console.log(VersionRange.gt('92.0', '91.5')); // true
console.log(VersionRange.satisfies('91.0.4472.124', '>=90')); // true
console.log(VersionRange.satisfies('89.0.4389.128', '90-92')); // false

// Complex compatibility matrix
function createCompatibilityMatrix() {
  const features = {
    'ES2015 Modules': {
      chrome: '>=61',
      firefox: '>=60',
      safari: '>=10.1',
      edge: '>=16'
    },
    'CSS Grid': {
      chrome: '>=57',
      firefox: '>=52',
      safari: '>=10.1',
      edge: '>=16'
    },
    'Service Workers': {
      chrome: '>=45',
      firefox: '>=44',
      safari: '>=11.1',
      edge: '>=17'
    },
    'WebGL 2.0': {
      chrome: '>=56',
      firefox: '>=51',
      safari: '>=15',
      edge: '>=79'
    }
  };
  
  const browserName = UserAgent.getBrowserName().toLowerCase();
  const browserVersion = UserAgent.getBrowserVersion();
  
  const support = {};
  
  Object.entries(features).forEach(([feature, requirements]) => {
    const requirement = requirements[browserName];
    support[feature] = requirement ? 
      VersionRange.satisfies(browserVersion, requirement) : false;
  });
  
  return support;
}

// Find compatible versions
const availableVersions = [
  '88.0.4324.150',
  '89.0.4389.128',
  '90.0.4430.212',
  '91.0.4472.124',
  '92.0.4515.107'
];

const modernVersions = availableVersions.filter(v => 
  VersionRange.satisfies(v, '>=90')
);
console.log('Modern Chrome versions:', modernVersions);

const bestVersion = VersionRange.maxSatisfying(availableVersions, '>=89 <92');
console.log('Best compatible version:', bestVersion);

// Version parsing and formatting
const parsed = VersionRange.parse('91.0.4472.124-beta.1');
console.log('Parsed version:', parsed);
// { major: 91, minor: 0, patch: 4472, prerelease: [124, 'beta', 1] }

const formatted = VersionRange.format({ major: 92, minor: 0, patch: 4515 });
console.log('Formatted version:', formatted); // '92.0.4515'

// Progressive enhancement
function enableProgressiveFeatures() {
  const browserVersion = UserAgent.getBrowserVersion();
  const features = [];
  
  if (VersionRange.gte(browserVersion, '80')) {
    features.push('basic-features');
  }
  
  if (VersionRange.gte(browserVersion, '85')) {
    features.push('enhanced-features');
  }
  
  if (VersionRange.gte(browserVersion, '90')) {
    features.push('modern-features');
  }
  
  return features;
}

docs

core-utilities.md

data-structures.md

development-utilities.md

dom-styling.md

functional-programming.md

index.md

network-fetch.md

performance-crypto.md

text-unicode.md

user-agent-browser.md

tile.json