Fragment Documentation
Introduction
`Fragment` is a JavaScript utility designed to enhance web pages with Single Page Application (SPA)-like behavior. It intercepts link clicks on elements with the `data-fragment` attribute, fetches the content from the specified URL, and updates a specific part of the page without reloading AND without the need to render different versions of a page. Fragment automatically extracts just the part that needs to be replaced.
But why...? we already have HTMX!
Although I love and use HTMX, it has one big downside: you need a SERVER to generate the HTMX fragment that gets replaced. Which makes it unsuitable for static sites or content loaded via a CDN.
Another 'downside' of HTMX is that links lose their `href` attribute in favour of `hx-get`. This is by design, but it makes your html less semantic (with possible SEO consequences). Fragment-links degrade gracefuly to their default behavior, even when javascript is disabled.
Features
- Dynamic Content Loading: Fetches and updates content for a specified fragment ID from the clicked link's URL.
- Active Link Highlighting: Manages active state for links with the
data-fragmentattribute. - Browser History Management: Updates the URL in the address bar and the browser's history stack.
- Title Update: Extracts and updates the document title from the fetched content.
- Custom Event Emission: Emits a
fragment:loadedevent after content is loaded and the URL is updated, allowing for additional custom logic.