domwire is a DOM-driven, on-demand component loader for plain JavaScript and TypeScript applications. It initializes ES6 classes from data-component attributes in your markup, manages their lifecycle, and lazy-loads their code only when the matching element actually exists on the page. It has zero runtime dependencies and weighs about 2 KB minified.
This tutorial covers why the library exists, the problem it solves, how the approach works, and how to use every part of the API.
1. The problem
Most web applications are not single-page apps. Server-rendered sites — Rails, Laravel, Django, WordPress, static sites — still need JavaScript behavior: a date picker here, a carousel there, an autocomplete on one form out of fifty pages. The question every one of these codebases has to answer is: how does a piece of JavaScript find out whether the page it's running on needs it?
The answer you find in most codebases, including ones written by experienced developers, looks like this:
