DOM Absorbing/Sharing Mind Reading (DOM ASMR)

We finish our dissertation with a rather dull topic. This package contains some utilities that help manage the peculiarities of the DOM.

Many DOM elements have a concept of having an intrinsic parsed (class instance) value, a corresponding string "value" and a "text display". For example, the hyperlink's "value" is the href, and the text display is the text, and we may want to work with the URL object associated with it.

The time tag has a datetime string property for the ISO value, and the textContent that should display to the user. And if working with the time tag in coordination with a Date object, we would probably want to associate the actual Date Object somewhere. So we have no fewer than three key things we need to juggle associated with time element if that is what we are targeting.

The DOM ASMR attempts to create a uniform interface to work with across the framework of components and enhancements that build on this package.

Sharing/Setting

So if we are sharing values from the host custom element, say, to these DOM elements we can use the interface:

const sharingObj = ASMR.getSO(oTimeElement, [options]);
sharingObj.setValue(oTimeElement, new Date());

and the Sharing Obj worries about all the "under the hood" things that should happen with the time element -- in this case set the datetime attribute to the ISO string, and the textContent to the locale specific text. We are guessing what the developer wants to do, hence the term "mind reading."

However, the getSO method allows for a second "options" parameter to be passed in, which can range in how detailed it can be, where the developer specifies how the setValue should go about processing the values passed in via setValue. The more specific the options object is, the less "mind reading" that needs to happen.

We need a uniform way to "upgrade" the shared object associated with the time element, based on custom attributes.

Absorbing

If rather than sharing, we want to go in the opposite direction, and absorb changes from a remote element into our local DOM element, we need to account for default event types we would want to listen for, or property setters to observe, or attribute changes to monitor. Again, the goal of the ASMR library is to shield the developer from having to articulate explicitly how to do this while they drift off.

const absObj = ASMR.getAO(oTimeElement, [options]);
absObj.addEventListener('.', e => {
    this.dteObj = absObj.getValue(oTimeElement);
})

You are now fully certified to use this library.

Good night. Sleep tight.