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

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/fbjs@3.0.x
Publish Source
CLI
Badge
tessl/npm-fbjs badge