A collection of utility libraries used by other Facebook JS projects including React and Relay
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
DOM manipulation, CSS utilities, event handling, and style computation functions for browser environments.
CSS style property manipulation and computation.
const Style = require('fbjs/lib/Style');
/**
* Gets computed or declared style property value
* @param node - DOM node to get style from
* @param name - CSS property name
* @returns Style property value or null
*/
function get(node: DOMNode, name: string): ?string;
/**
* Finds the nearest scrollable ancestor element
* @param node - Starting DOM node
* @returns Scrollable parent element or window
*/
function getScrollParent(node: ?DOMNode): ?DOMWindow|DOMElement;Usage Examples:
const Style = require('fbjs/lib/Style');
// Get computed style
const backgroundColor = Style.get(element, 'backgroundColor');
const fontSize = Style.get(element, 'font-size');
// Find scrollable container
const scrollContainer = Style.getScrollParent(element);
if (scrollContainer) {
scrollContainer.scrollTop = 0;
}CSS class name manipulation and conditional class application.
const cx = require('fbjs/lib/cx');
/**
* CSS class name utility for conditional classes
* @param classNames - String or object with conditional classes
* @param args - Additional class names (when first arg is string)
* @returns Space-separated CSS class names string
*/
function cx(classNames: string|Object, ...args: Array<string>): string;Usage Examples:
const cx = require('fbjs/lib/cx');
// String concatenation
const classes1 = cx('btn', 'btn-primary'); // 'btn btn-primary'
// Conditional classes with object
const classes2 = cx({
'btn': true,
'btn-primary': isPrimary,
'btn-disabled': isDisabled,
'btn-large': size === 'large'
}); // 'btn btn-primary btn-large' (if conditions are true)
// Mixed usage
const classes3 = cx('base-class', {
'modifier': hasModifier,
'active': isActive
}); // 'base-class modifier active'CSS custom property (variable) access and manipulation.
const cssVar = require('fbjs/lib/cssVar');
/**
* Gets CSS custom property (variable) value by name
* @param name - CSS variable name (without -- prefix)
* @returns CSS variable value
*/
function cssVar(name: string): string;Usage Examples:
const cssVar = require('fbjs/lib/cssVar');
// Get CSS variable value
const primaryColor = cssVar('primary-color');
const fontSize = cssVar('base-font-size');DOM node detection, manipulation, and information extraction.
const isNode = require('fbjs/lib/isNode');
const isTextNode = require('fbjs/lib/isTextNode');
const containsNode = require('fbjs/lib/containsNode');
const focusNode = require('fbjs/lib/focusNode');
const getActiveElement = require('fbjs/lib/getActiveElement');
/**
* Checks if object is a DOM node
* @param object - Object to test
* @returns True if object is a DOM node
*/
function isNode(object: any): boolean;
/**
* Checks if object is a text node
* @param object - Object to test
* @returns True if object is a text node
*/
function isTextNode(object: any): boolean;
/**
* Checks if outer node contains inner node
* @param outerNode - Container node
* @param innerNode - Node to check for containment
* @returns True if outerNode contains innerNode
*/
function containsNode(outerNode: DOMNode, innerNode: DOMNode): boolean;
/**
* Sets focus on DOM node
* @param node - DOM node to focus
*/
function focusNode(node: DOMNode): void;
/**
* Gets currently active (focused) element
* @param doc - Document to check (defaults to document)
* @returns Currently focused element or null
*/
function getActiveElement(doc?: Document): ?Element;Usage Examples:
const isNode = require('fbjs/lib/isNode');
const focusNode = require('fbjs/lib/focusNode');
const getActiveElement = require('fbjs/lib/getActiveElement');
// Check node type
if (isNode(element)) {
// Safe to use DOM methods
element.setAttribute('data-processed', 'true');
}
// Focus management
const input = document.getElementById('search');
focusNode(input);
// Get current focus
const focused = getActiveElement();
if (focused && focused.tagName === 'INPUT') {
console.log('Input is focused');
}Document structure and viewport information utilities.
const getDocumentScrollElement = require('fbjs/lib/getDocumentScrollElement');
const getViewportDimensions = require('fbjs/lib/getViewportDimensions');
const getElementPosition = require('fbjs/lib/getElementPosition');
const getElementRect = require('fbjs/lib/getElementRect');
/**
* Gets document's scrollable element
* @param doc - Document to check (defaults to document)
* @returns Document's scroll element
*/
function getDocumentScrollElement(doc?: Document): Element;
/**
* Gets viewport dimensions
* @returns Object with width and height properties
*/
function getViewportDimensions(): {width: number, height: number};
/**
* Gets element's position relative to document
* @param element - DOM element
* @returns Position object with x and y coordinates
*/
function getElementPosition(element: Element): {x: number, y: number};
/**
* Gets element's bounding rectangle
* @param element - DOM element
* @returns Rectangle object with position and dimensions
*/
function getElementRect(element: Element): {
top: number,
left: number,
right: number,
bottom: number,
width: number,
height: number
};Scroll position detection and manipulation utilities.
const getScrollPosition = require('fbjs/lib/getScrollPosition');
const getUnboundedScrollPosition = require('fbjs/lib/getUnboundedScrollPosition');
const Scroll = require('fbjs/lib/Scroll');
/**
* Gets scroll position of scrollable element
* @param scrollable - Window or scrollable element
* @returns Scroll position with x and y coordinates
*/
function getScrollPosition(scrollable: DOMWindow|DOMElement): {x: number, y: number};
/**
* Gets unbounded scroll position (may be negative or exceed boundaries)
* @param scrollable - Window or scrollable element
* @returns Unbounded scroll position with x and y coordinates
*/
function getUnboundedScrollPosition(scrollable: DOMWindow|DOMElement): {x: number, y: number};
// Scroll utilities and constants
const Scroll: {
// Scroll constants and utility functions
};CSS style property computation and vendor prefixing.
const getStyleProperty = require('fbjs/lib/getStyleProperty');
const CSSCore = require('fbjs/lib/CSSCore');
/**
* Gets computed style property value
* @param node - DOM node
* @param name - CSS property name
* @returns Computed style value or null
*/
function getStyleProperty(node: DOMNode, name: string): ?string;
// CSS manipulation utilities
const CSSCore: {
// Core CSS manipulation functions
};Event handling and detection utilities.
const isEventSupported = require('fbjs/lib/isEventSupported');
/**
* Checks if event is supported in current execution environment
* @param eventNameSuffix - Event name (without 'on' prefix)
* @param capture - Whether to test capture phase
* @returns True if event is supported
*/
function isEventSupported(eventNameSuffix: string, capture?: boolean): boolean;Usage Examples:
const isEventSupported = require('fbjs/lib/isEventSupported');
// Check event support
const supportsTouch = isEventSupported('touchstart');
const supportsPointer = isEventSupported('pointerdown');
if (supportsTouch) {
// Add touch event listeners
element.addEventListener('touchstart', handleTouch);
} else {
// Fallback to mouse events
element.addEventListener('mousedown', handleMouse);
}Touch event handling and processing utilities.
const TouchEventUtils = require('fbjs/lib/TouchEventUtils');
// Touch event utilities for mobile interaction
const TouchEventUtils: {
// Touch event processing utilities
};DOM node creation from markup utilities.
const createNodesFromMarkup = require('fbjs/lib/createNodesFromMarkup');
const getMarkupWrap = require('fbjs/lib/getMarkupWrap');
/**
* Creates DOM nodes from HTML markup string
* @param markup - HTML markup string
* @returns NodeList of created DOM nodes
*/
function createNodesFromMarkup(markup: string): NodeList;
/**
* Gets HTML wrapper elements for specific node types
* @param nodeName - Node name (tag name)
* @returns Array of opening and closing wrapper HTML
*/
function getMarkupWrap(nodeName: string): [string, string];Usage Examples:
const createNodesFromMarkup = require('fbjs/lib/createNodesFromMarkup');
// Create DOM nodes from HTML
const nodes = createNodesFromMarkup('<div class="item">Content</div>');
const container = document.getElementById('container');
Array.from(nodes).forEach(node => container.appendChild(node));Mouse movement tracking and wheel event normalization.
const DOMMouseMoveTracker = require('fbjs/lib/DOMMouseMoveTracker');
const normalizeWheel = require('fbjs/lib/normalizeWheel');
/**
* Mouse movement tracking class for drag operations
*/
class DOMMouseMoveTracker {
// Mouse movement tracking functionality
}
/**
* Normalizes wheel event data across browsers
* @param event - Wheel event object
* @returns Normalized wheel data
*/
function normalizeWheel(event: WheelEvent): {
spinX: number,
spinY: number,
pixelX: number,
pixelY: number
};React component DOM utilities.
const ReactWheelHandler = require('fbjs/lib/ReactWheelHandler');
const translateDOMPositionXY = require('fbjs/lib/translateDOMPositionXY');
/**
* React wheel event handler
*/
class ReactWheelHandler {
// React-specific wheel event handling
}
/**
* DOM position translation utility for React
*/
const translateDOMPositionXY: {
// DOM position translation functions
};Browser feature and capability detection.
const BrowserSupportCore = require('fbjs/lib/BrowserSupportCore');
// Browser feature detection utilities
const BrowserSupportCore: {
// Browser capability detection functions
};