bigskysoftware/intercooler-js
Intercooler Js
Intercooler-js is a declarative AJAX framework and server-driven UI library. It functions as a hypermedia web framework that enables the creation of single-page experiences by replacing specific DOM elements with HTML fragments delivered from a server.
The library distinguishes itself by using HTML attributes to map DOM elements to server endpoints, allowing for asynchronous HTTP requests and DOM updates without manual scripting. It supports a hypermedia-driven architecture where the server controls the client state through response headers and the delivery of annotated HTML fragments.
The project covers a broad range of capabilities, including real-time UI updates via Server-Sent Events, browser history and state synchronization, and automated content polling. It also provides resource dependency management to coordinate updates between related UI elements, remote error logging for monitoring network failures, and client-side DOM manipulation for managing element lifecycles and CSS transitions.
Features
- Declarative DOM Frameworks - Provides a framework for managing DOM updates and HTTP requests using declarative HTML attributes.
- Hypermedia-Driven Development - Implements a server-controlled architecture where the server delivers HTML fragments to update the client state.
- Hypermedia Swapping - Updates document fragments using server-rendered HTML fragments annotated with network actions.
- SSE Element Bindings - Binds an HTML element to a server event source to swap content when messages are received.
- Server-Driven UI Rendering - Treats the server as the primary controller to synchronize browser state and user interface rendering.
- AJAX Content Swapping - Replaces specific DOM elements with asynchronous server responses to create seamless single-page experiences.
- AJAX Request Triggers - Initiates asynchronous HTTP requests using HTML attributes to specify the trigger event and destination.
- Declarative Request Enhancements - Transforms standard anchor and form tags into asynchronous requests to prevent full page reloads.
- Attribute-Based Request Mapping - Binds DOM elements to server endpoints using HTML attributes to trigger asynchronous requests without writing JavaScript.
- Client-Side State Management - Manages application state within the browser to enable dynamic UI updates and history support without full page reloads.
- Server-Action Bindings - Binds HTML elements to server actions to send requests and replace element content with the server response.
- Hypermedia-Driven Rendering - Implements a system where the server delivers HTML fragments to update the client DOM.
- Real-Time DOM Updates - Updates the user interface in real-time by listening for asynchronous events pushed from the server.
- SSE-Driven DOM Patching - Establishes a unidirectional connection to push server content as HTML fragments directly into the DOM via SSE.
- Browser History State Caching - Captures and restores DOM element states using the browser's history API to ensure consistent back and forward navigation.
- Data-View Synchronizers - Automatically refreshes specific UI elements whenever changes are detected in a designated data path.
- Server-Sent Events - Establishes a unidirectional connection to push real-time server updates and HTML fragments directly into the DOM.
- DOM Binding Integrations - Binds HTML elements to Server-Sent Events to enable real-time unidirectional content streaming from the server.
- DOM - Snapshots element state and pushes URLs to the location bar to support functional browser back-button behavior.
- UI Resource Synchronization - Coordinates the automatic refreshing of multiple related UI elements when a shared data resource is updated.
- Ajax Request Lifecycle Hooks - Executes custom scripts at predefined stages of the network request including before sending and upon completion.
- Server-Driven Class Management - Updates CSS classes on elements after a server response to change visual states without replacing the elements.
- UI Element Dependency Coordination - Refreshes multiple related page elements when a specific dependency path is updated by a server response.
- Dynamic Parameter Serialization - Serializes parent forms, DOM elements, or local storage variables to include as parameters in outgoing requests.
- DOM Event Triggers - Executes asynchronous requests based on natural element events, custom DOM events, or value changes.
- Automated Content Polling - Enables periodic server polling to keep page elements up-to-date while pausing requests when elements are not visible.
- Client-Behavior Headers - Executes client-side redirects, triggers JavaScript events, or modifies page titles using custom HTTP response headers.
- Browser History Management - Synchronizes application state with the browser's history to enable seamless backward and forward navigation.
- Content Transition Effects - Applies CSS transitions to elements during the process of replacing content with server responses.
- Declarative DOM Manipulation - Performs DOM manipulations like class toggling or element removal through attributes instead of imperative code.
- Declarative Event-to-Action Mappings - Triggers custom HTTP requests based on user events using declarative attributes to define the action.
- DOM Element Manipulators - Modifies the document via element removal or class addition without requiring a server round-trip.
- Element Lifecycle Management - Controls the temporal addition and removal of CSS classes and DOM elements.
- Browser History API Updates - Updates the browser's address bar during asynchronous requests to maintain a consistent URL state.
- AJAX Request Lifecycle Hooks - Provides programmatic listeners to execute recovery actions when asynchronous network calls fail.
- Asynchronous Polling Timers - Provides non-blocking timers to fetch data at configurable intervals and update the UI without page reloads.
- Resource Dependency Management - Coordinates the loading and updating of page elements based on a defined resource dependency model.
