Loading web-ubiquity..

The basis for much of our ecosystem stems from a single method to replace traditional build routines and tree shaking in favor of a better developer experience for the average web user.

Examples

• Codepen demonstrating the script for a video-player web component
• Any HAXSite, like the current site (view source)
• The current website, in a Codepen 🤯
• Hydrating tags anywhere; like this unrelated CMS

The premise of the script

• The thing keeping the average dev that can copy and paste JS from leveraging JS tools is bundling and building complexity
• Eliminate bundling because ES6 module import trees combined with HTTP2/3 multiplexing means we can send tons of small files down the same pipe and script type="module" can resolve these on the fly in the browser
• Improving DX to expand available developer base is ALWAYS > minor performance metrics for random person X

How it works

There's a detailed article on dev.to from 2020 when project lead @btopro invented the approach and showcased it on a developer community meeting. The TLDR :

• build.js script that can resolve import trees for anything in the CDN
• If files aren't in /build, it falls back to a CDN (with fail-over across three) and delivers on match
• The script injects wc-autoload into the page.
• wc-autoload loads wc-registry.json that is a JSON object of "tag-name": "@scope/tag-location/tag-name.js"
• It sets a MutationObserver on the page for any tag added to the page
• When an undefined web component hits the light DOM and exists in wc-registry.json, a dynamic import() executes to import the definition; thus hydrating the custom element!
• Magically, anything springs forth from a single script, regardless of application!

This technological break through of the modern web + web components + ingenuity of existing APIs allows HAX to hydrate Sites from a singular, unbundled script while still delivering a high level of performance. The website is effectively an SPA and as new content is loaded, the definitions needed automatically load while known definitions sit in the user's cache and load automatically.

Examples that serve their build stand alone

These are a few examples of sites disconnected from the CDN aspect of the script by supplying their own assets locally

• Invent Penn State: Customer Discovery 101 - this site has CSS and JS customization as well
• Penn State Libraries: The Sea Voyage - this site also mixes in it's own custom elements and is built on HAX11ty