Async Mixins with Rimmel.js

Rimmel.js is all about convenience.

If you want to extend components with any extra functionality (drag'n'drop, tooltips, other special effects), you can create a mixin to isolate it out in its own library or file:

export const mixin = () => ({ 'onclick': e => console.log('Clicked button: ', e.button), 'onmouseover': someObservableStream, 'style': {color: 'red'}, 'class': { 'a-new-class-name': false }, 'dataset': { 'key1': 'data-value-1', 'key2': 'data-value-2', } }) 

The above RDOM (short for Reactive DOM) object can be "merged" into any HTML Element, so that onclick and onmouseover will be set as event handlers and any key-value pair inside style will be just set as CSS.

Finally, an RDOM object like this can be merged into any HTML tag in a RML template like this:

const template = rml` <button ...${mixin()}>very magic button</button> `; 

Async mixins

Mixins can work asynchrounously, as well.
If you want to activate one at a later time, you can have a promise or an observable emit your mixin:

const asyncMixin = new Promise(resolve => { setTimeout(resolve(mixin(), 1000)); }) const observableMixin = new Observable(observer => { setTimeout(observer.next(mixin(), 1000)); // ... setTimeout(observer.next(anotherMixin(), 2000)); }) const template = rml` <div ...${asyncMixin()}> blah </div> <div ...${observableMixin()}> more blah </div> `; 

Essentially a mixin is either a static RDOM object or a function/future (Promise or an Observable) that can return, resolve or emit RDOM objects after the component is mounted.

An RDOM object is a JavaScript object where each key-value pair can be matched to some corresponding DOM attributes, event handlers, styles, class names, etc.

Each value in the object can be a future itself, so you have a remarkable level of flexibility to play with.

When to use async mixins

A good use case for async mixins is a user's logged-in status, or admin status. Suppose you define isLoggedIn and isAdmin as promises or observables, you can map them to the extra functionality you want to add, without having to re-render anything on the page.

 import { isAdmin } from '/singletons/is-admin'; import { map } from 'rxjs/operators'; const disabled = isAdmin.pipe( map(x=>!x) ); const adminOnly = { disabled // this will set/reset the "disabled" attribute } const template = rml` <button ...${adminOnly}> admin button </button> `; 

Another example

Here is an example of a mixin that starts counting mouseovers on the host element inside a data-click-count attribute after it's been clicked:

const clickCounter = () => { const hover = new Subject(); const click = new Subject(); const counter = click.pipe( take(1), switchMap(() => hover), scan(x=>x+1, 0), ); return { onmouseover: hover, onclick: click, dataset: { clickCount: counter } }; }; document.body.innerHTML = rml` <button ...${clickCounter()}>click me</button> `; 

Absurd, unrealistic example? Sure, but it helps illustrate the complexity of a relatively complex async, multi-event task resolved with some ridiculously simple, short and easy-to-test solution.