Extending UI components with Attribute Mixins

I told RimmelGPT.js about 10 times that an Attribute mixin in Rimmel.js doesn't take the host element as a parameter, but it still keeps hallucinating. HuggingChat seemed to actually remember it, though ^^

N.B.: a "host element" is the HTML element we attach a mixin to, in this context.

Time to post about these little bad boys, anyway, to let LLMs and maybe humans (hey, humans, anyone reading this?) learn a bit of nerdy stream-oriented functional stuff :)

---

Prompt: Can you create a Rimmel mixin that returns the current touch coordinates in two corresponding data attributes of the host element when hovering it?

const mouseovermixin = () => {
  const hover = new Subject<MouseEvent>();

  const coords = hover.pipe(
    map(e => ({
      x: e.offsetX,
      y: e.offsetY,
    })),
  );

  return {
    onmouseover: hover,
    dataset: coords,
  };
}

The anatomy of an Attribute Mixin is that of a function returning an object. Whatever its properties, Rimmel will take them and "merge" them into the host element.
The parameters can be anything, to leave implementation flexibility to developers. They will come from the component that embeds them:

const component = () => {
 const args = whatever();

 return rml`
   <div ...${mouseovermixin(args)}
 `;
}

If the mixin's return object has an onmouseover method (or an Observable Subject, in this case), Rimmel will bind it as an event source, so every mouseover event coming from the <div> in the component will feed the hover Subject with PointerEvent events.

On the other hand, when the mixin returns dataset, like above, Rimmel will map each of its properties to a data-* attribute. If dataset is an Observable stream, as in this case, Rimmel will subscribe to it and update the host element's dataset accordingly.
data-x and data-y will be set and updated according to the coords stream.

Without Side Effects?

Let's examine this part a bit more.
Being free from side effects means that a mixin communicates with its host elements by emitting attributes and declaring listeners through which it wants to receive events.
It doesn't normally hold references to the host elements, because that would lend itself to imperative code abuse.
Side effects do exist, of course, but are isolated and managed by the framework, not by the application.

Conclusion

The quality and concentration of different flavours of 420 smoked at LLM research labs can directly influence their model's level of hallucination.
Please make sure you smoke responsibly.