Support for React-like `ref`s?

Wouldn’t it be a nice and useful feature if superfine supported ref pseudo properties like React, Preact, Dyo, uhtml etc. do?

const elemRef = { current: null }
// [...]
const content = h('some-element', { ref: elemRef })

Here’s a little demo (based on a R&D web-component toy library that uses a ref-supporting patched version of superfine internally): TypeScript version JavaScript version

FYI: Here’s a naive quick’n’dirty implementation which obviously only provides part of the requested functionality: LINK

[mcjazzyfunky]

Let’s assume you have a fancy component library which is based on superfine. Now let’s assume you want to implement a component VideoPlayer. This VideoPlayer shall have the usual control buttons video players normally have, like Play, Pause etc. Somewhere in your VDOM tree you have to use a h('video', ...) virtual node. But how do the event handlers for those Play and Pause buttons work? They need the actual HTMLVideoElement instance to call the play() and pause() methods on it. But how do you get this HTMLVideoElement instance? One way would be to use DOM’s querySelector() method, but then you would normally need the HTMLElement of the VideoPlayer instance itself. That’s of course possible, but using React-like ref objects and ref callbacks is a much nicer, cleaner and more flexible way to do so.

How are they different from lifecycle events oncreate, onupdate, and onremove which Superfine used to support way back (but not anymore)?

If I understand that correctly it may have been possible in the old days of superfine to write a function ref which could be used as follows:
h('video', { ...ref(videoRef), src: videoSrc }) or (with JSX) <video {...ref(videoRef)} src={videoSrc}/>

with

function ref(refObjectOrCallback) {
  return {
    oncreate: ...,
    onupdate: ...,
    onremove: ...
  }
}

This may work the same way as React-like refs do. Nevertheless the <video ref={videoRef} /> syntax is nicer and those lifecycle properties have been removed in superfine for a reason, I guess.

[mcjazzyfunky]

Sure, I can provide a PR if you like. I guess the changes in superfine will look something like the following (please ignore the comments on top of the file): https://github.com/js-works/js-element/commit/a7767704a3d1ac1ba5a09d707a55258fc9fbb973

This is working for my small demo, but I have to check some edge cases before I can prepare the PR for superfine. I do not know the exact coding guidelines for the superfine project but I guess for the main/index.js file the credo is “shorter is better” (both in LOC and built distribution package) - please let me know if I am wrong.