Extensible Effects: Rimmel's take on a new hot design pattern

[dariomannu]

We've been working to bring Extensible Effects to Rimmel using a new, creative take: HTML.

If you're not familiar with them, Extensible Effects are a really hot design pattern coming from Haskell in which applications don't perform and don't import effectful functionality: they only declare effects.
This is effectively an alternative to Dependency Injection, arguably more ergonomical and easier to implement.

The framework should provide some "actuator code" that will interpret these effect decalarations and execute them.

One of the hottest ideas we had for Rimmel is to use the same HTML/RML templates we already use to declare all effects, including "ambient effects" (those that are not related to a given component, but are global, like window.onload, etc).

For this purpose, we can define and use custom elements and use the standard Observable/Observer bindings we already use for sources and sinks.

const Component = () => {
  const key1 = new Subject<string>;
  const stream = new Subject<string>;
  const start = new Subject<Event>;
  const mouse = new Subject<Coords>;
  const title = new BehaviorSubject('My great webapp');

  return rml`
    <local-storage key1="${key1}"><local-storage>
    <window title="${title}" onload="${start}" onmousemove="${mouse}"></window>
    <web-socket url="..." ondata="${stream}"></web-socket>
    <document>
      <query selector="#element1">${InnerHTML( stream )}</query>
    </document>

    <div>
      ... the rest of the component
      Change the window title: <input value="${title}" onchange="${ Value(title) }">
    </div>
};

Cons: this can feel like an abuse of custom elements, as we'd be using them for what could be seen as a slightly different purpose... or maybe not?

We're looking for feedback!