No refs? What about 3rd party libraries?

[CodeSmith32]

Complete noob here.. just stumbled across Rimmel while looking up observables.

It sounds like there's no alternative to refs? Fine. But is there any way in general to get a reference to an actual dom element?

The documentation claims that 'forwarded refs' aren't necessary because we don't need to control the state of elements since Rimmel can. Well, that would be fine if that were the problem refs solved, but even React claims that element refs are meant as an escape hatch mostly for embedding third-party embeds - and never suggests using them for managing state manually.

So, in Rimmel, I'm assuming I'm just missing it, but how would I embed, e.g., a list of Ace editors on a page?

TIA

[dariomannu]

Hi @CodeSmith32, this is an excellent question.

The "no access to elements" is a principle for day-to-day development to keep streams declarative and help separating concerns.

When creating low-level integrations or fine tuning things are obviously a bit different. The idea, just like with side effects, is not to eliminate them, which would be impossible, but rather to maintain a clean separation.

There are a few ways to get access to the actual DOM element.

1. Create a custom sink. Every sink has access to its own DOM element, as it's the piece of code in charge of making changes. All sinks get a reference to their host element and return a function to perform the actual DOM manipulation. You can find the code of the most used sinks as a reference. There is also a basic custom sink example that uses DOM API to append rows to a table given a stream of rows.
   Actions that need direct DOM manipulation on the element such as element.focus(), which in React you'd still do with a ref, in Rimmel you would do with a sink.
2. Use a rml:onmount event handler. It will be called immediately after mount and will let you use event.target just like in vanilla JS. This is also the same kind of escape hatch as the refs mentioned above.
3. Use a mixin: return an object with a rml:onmount key, and a handler. Will behave just the same as above, same escape hatch.
4. Create a custom element with RegisterElement, which gives you access to the element, too. Here is an example using a custom element for an in-view observer, to give an idea.

So, back to your question, a custom element could be a nice and convenient way to embed the Ace editor in any code. If you don't want to use custom elements, but you're still aiming for reusability, you can create a regular JS component: const Editor = (params) => { doStuff(); return rml<div id="editor">}

If you just want to make any element "editable", a mixin could be a good fit: const Editable = () => ({ 'rml:onmount': <your code here> }), then you add it like this: <div ...${Editable()}></div>

If it's for a quick and dirty PoC, with onmount it would work like: <div rml:onmount="${setupAce}"> and you'd define setupAce as a plain-old imperative function.

Looking forward to see what do you come up with, if you're happy to share, or happy to help if you're stuck.

In a near future we might even come up with some generic sink/adapter for any vanilla JS modules like Ace, or maybe even for jQuery plugins. If you want to get involved, give a shout!

[CodeSmith32]

Cool, got it!

I didn't see anything about this in the docs (unless there are other docs?) which was why I was confused. I figured it had to be possible seeing the critical nature of it. Maybe it should be added. :)

Thanks!

[dariomannu]

Agreed... and there are a few reasons for this. There has been pressure from the "imperative-minded" people to expose the underlying element like every other framework. On the other hand, a new paradigm and many new patterns started to emerge over time. We kept the good patterns and baked them into documentation. Stuff that works but is still experimental is best discussed either here or in Discord. Finally, when proofs of concept mature into patterns that are clearly good, we put them into documentation as well, as a way to reduce breaking changes, etc.