🤔 Rethinking Adios.js

For the past year or so I've been kicking around a js library idea called adios.

I still think adios is a nice idea, frankly I also think the DX is okay. I built it so I know how it works, which makes the issues less frustrating. But I also think underlying adios, is a more powerful idea.

The core of Adios

Adios isn't using witchcraft or dark magic. It's using 2 well supported web APIs and the event loop. That's really it.

Mutation Observer

This is an intimidating name with a complex API. However once you get a grip on what it does, it's pretty nice. It lets you know if the DOM has changed, before the browser paints the changes.

Proxy

This has a confusing name with an API that leaves a bit to be desired. However, once you work around the shortcomings, it's pretty nice. It lets you know when an object is being interacted with and how.

What Adios Does

Adios binds data to DOM elements. By putting data-text="path.to.string" in your HTML. Adios will keep your Data and DOM in sync. Moreover, it'll PULL data from the DOM, removing the need to "Hydrate". If anything, the DOM hydrates the Data.

Whatever, All of that was preamble.

The real nice part of adios is being able to easily create and tap into DOM and DATA events. Powered by Mutation Observers and Proxies respectively. I'd like to find a way to break it into smaller pieces. I'm not exactly sure what those pieces look like.

Ideas

I'd like to

  • create attributes that respond to custom events.
  • set up a generalized way to dispatch custom events.
  • omit and listen for data change events.
  • omit and listen for dom change events.
  • keep this centralized and extensible.
  • write basic js inline
  • make it feel nasty to write imperative JS vs Declarative HTML.