content-handler
Based on EventTarget, content handlers are an unified system to automate and simply await some DOM (HTML/SVG) contents from the server, ignoring the content origin, avoiding complex logic in your front code, even from AJAX requests or received as Server-Sent Events
Install
npm i content-handler
Quick start
Create your own content-handler based project to build your app/site in seconds!
Browsers support
This tool doesn't have any dependencies, but can need some polyfills to support the standard constructors on all browsers
How a content handler gets the contents?
- Full page loading
- Register your listeners, based on selector events (including your controllers)
- The
ContentHandler
triggers the listeners on the matching elements - Your controllers are awaiting some user events (
click
on an anchor,submit
on a form) - The
ContentSupervisor
triggers the related controllers - Fetching
- The
ContentHandler
parses the response in aDocumentFragment
and returns to step 3.
Get the content handler for a document
Each handler handles a single document!
// If the document isn't provided, it uses the current window.documentconst handler = ContentHandler
Await elements from a handler
Loaded or not
// Await any main tag, already present in the document or loaded by the content// handler, to apply the listener on itContentHandler
Loaded only
The fetched elements are not in the current page, they need to be added on it.
// Await any main tag, but only loaded by the content handler, to apply the// listener on itContentHandler
Present only
The fetched elements are already in the current page, they don't need to be added on it.
// Await any main tag, already present in the document, to apply the listener on itContentHandler
Declare the controllers
A content handler doesn't make anything alone, to automate the fetching ou SSE listening, you need to tell him how to do it.
It also uses the handler.addEventListener()
and should need some controllers
(provided or custom) to define the request behavior, make some pre-validation,
some client optimizations before to send it to the server, etc.
The provided controllers are generic as possible, not required but recommended, to avoid uncommon behaviors between browsers.
It shipped with 3 simple initial controllers with, for each, a default
.selector
to target the related elements (you can define yours), and a
.listen()
method to control the request.
anchor
Listen all the anchors at once!
ContentHandler
form
Listen all the forms at once!
ContentHandler
sse
Listen all the event sources at once!
ContentHandler
Make your own controller
Making your own controller is really easy, it just a function, receiving a
request config
object and returning a new one based on it.
As a best practice, you never should modify the received object!
For asynchronous operations, in place of returning the new config
object,
you can simply return a Promise
, resolving the config
object.
The unique difference between AJAX/SSE config objects is the
init
/configuration
property
A simple fetching controller
{ const input supervisor = config // {element, init, input, supervisor, env} // if the request doesn't targets the current origin, abort if inputorigin !== documentlocationorigin supervisor return ...config}
A simple SSE controller
{ const input supervisor = config // {configuration, element, input, supervisor, env} // if the request doesn't targets the current origin, abort if inputorigin !== documentlocationorigin supervisor return ...config}