or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-utilities.mddata-structures.mddevelopment-utilities.mddom-styling.mdfunctional-programming.mdindex.mdnetwork-fetch.mdperformance-crypto.mdtext-unicode.mduser-agent-browser.md
tile.json

tessl/npm-fbjs

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/fbjs@3.0.x

To install, run

npx @tessl/cli install tessl/npm-fbjs@3.0.0

index.mddocs/

Facebook JS (fbjs)

Facebook JS is a collection of utility libraries used by other Facebook JavaScript projects including React and Relay. It provides a comprehensive set of utilities for DOM manipulation, functional programming, data structures, text processing, and browser compatibility.

Package Information

  • Package Name: fbjs
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install fbjs

Core Imports

fbjs uses a unique import pattern where you must import modules individually from the lib directory:

const invariant = require('fbjs/lib/invariant');
const emptyFunction = require('fbjs/lib/emptyFunction');
const shallowEqual = require('fbjs/lib/shallowEqual');

Important: The main index.js file throws an error by design. You must use the full path imports as shown above.

Basic Usage

const invariant = require('fbjs/lib/invariant');
const shallowEqual = require('fbjs/lib/shallowEqual');
const cx = require('fbjs/lib/cx');
const ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

// Assertion utility
invariant(user.isLoggedIn, 'User must be logged in to access this feature');

// Shallow equality comparison
const hasChanged = !shallowEqual(prevProps, nextProps);

// CSS class name utility
const className = cx('btn', {
  'btn-primary': isPrimary,
  'btn-disabled': isDisabled
});

// Environment detection
if (ExecutionEnvironment.canUseDOM) {
  // DOM manipulation code
}

Architecture

fbjs is built using Facebook's @providesModule system where:

  • Build Process: Flattens all modules to the lib/ directory during build
  • Import Pattern: Each module must be imported individually using fbjs/lib/module-name
  • Module Categories: 117 modules organized across 18 categories by functionality
  • Browser Support: Includes polyfills and cross-browser compatibility utilities

Capabilities

Core Utilities

Essential utilities for data manipulation, string processing, array operations, and basic DOM functionality used throughout Facebook's JavaScript ecosystem.

const emptyFunction = require('fbjs/lib/emptyFunction');
const shallowEqual = require('fbjs/lib/shallowEqual');
const clamp = require('fbjs/lib/clamp');

// Empty function with utility methods
emptyFunction(); // noop
emptyFunction.thatReturns(true); // returns function that returns true

// Shallow equality comparison
function shallowEqual(objA: any, objB: any): boolean;

// Number clamping
function clamp(value: number, min: number, max: number): number;

Core Utilities

DOM & Styling

DOM manipulation, CSS utilities, event handling, and style computation functions for browser environments.

const Style = require('fbjs/lib/Style');
const cx = require('fbjs/lib/cx');
const focusNode = require('fbjs/lib/focusNode');

// CSS style utilities
function get(node: DOMNode, name: string): ?string;
function getScrollParent(node: ?DOMNode): ?DOMWindow|DOMElement;

// CSS class name utility
function cx(classNames: string|object, ...args: string[]): string;

// DOM focus utility
function focusNode(node: DOMNode): void;

DOM & Styling

Functional Programming

Comprehensive functional programming utilities for arrays, objects, and sets with map, filter, reduce, and transformation operations.

const mapObject = require('fbjs/lib/mapObject');
const filterObject = require('fbjs/lib/filterObject');
const compactArray = require('fbjs/lib/compactArray');

// Object utilities
function mapObject<T, U>(object: {[key: string]: T}, callback: (value: T, key: string, object: {[key: string]: T}) => U, context?: any): {[key: string]: U};
function filterObject<T>(object: {[key: string]: T}, predicate: (value: T, key: string, object: {[key: string]: T}) => boolean, context?: any): {[key: string]: T};

// Array utilities
function compactArray<T>(array: Array<?T>): Array<T>;

Functional Programming

Data Structures

Specialized data structure implementations including Heap, CircularBuffer, IntegerBufferSet, and PrefixIntervalTree.

const Heap = require('fbjs/lib/Heap');
const CircularBuffer = require('fbjs/lib/CircularBuffer');

// Heap data structure
class Heap {
  constructor(items?: Array<any>, comparator?: (a: any, b: any) => number);
  empty(): boolean;
  pop(): any;
  push(item: any): void;
  size(): number;
  peek(): any;
}

Data Structures

Text & Unicode

International text processing utilities for Unicode handling, bidirectional text, CJK languages, and localization support.

const UnicodeBidi = require('fbjs/lib/UnicodeBidi');
const UnicodeUtils = require('fbjs/lib/UnicodeUtils');
const Locale = require('fbjs/lib/Locale');

// Unicode text processing utilities
// Bidirectional text support
// CJK language utilities

Text & Unicode

Network & Fetch

HTTP request utilities including fetch implementations, retry logic, and data serialization for network operations.

const fetch = require('fbjs/lib/fetch');
const fetchWithRetries = require('fbjs/lib/fetchWithRetries');
const xhrSimpleDataSerializer = require('fbjs/lib/xhrSimpleDataSerializer');

// Fetch API implementation
// Uses global.fetch if available, otherwise cross-fetch polyfill

// Fetch with retry logic
function fetchWithRetries(uri: string, initWithRetries?: Object): Promise<Response>;

// XHR data serialization
function xhrSimpleDataSerializer(data: any): string;

Network & Fetch

Performance & Crypto

Performance monitoring utilities and cryptographic functions including base62 encoding and CRC32 hashing.

const performanceNow = require('fbjs/lib/performanceNow');
const base62 = require('fbjs/lib/base62');
const crc32 = require('fbjs/lib/crc32');

// High-resolution timestamp
function performanceNow(): number;

// Base62 encoding
function base62(number: number): string;

// CRC32 hash function
function crc32(input: string): number;

Performance & Crypto

User Agent & Browser

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

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

// User agent parsing and detection
// Browser information object
// Version range comparison utilities

User Agent & Browser

Development Utilities

Development aids including assertion utilities, error handling, debugging tools, and data type utilities.

const invariant = require('fbjs/lib/invariant');
const warning = require('fbjs/lib/warning');
const nullthrows = require('fbjs/lib/nullthrows');

// Assertion utility with sprintf formatting
function invariant(condition: any, format: string, ...args: Array<any>): void;

// Development warning utility (no-op in production)
function warning(condition: boolean, format: string, ...args: Array<any>): void;

// Null/undefined assertion with type narrowing
function nullthrows<T>(value: ?T): T;

Development Utilities