Using yo-yo elements (or other native DOM) in a Hyperapp view

Hi! Thanks for your work, great project, got me very excited (couldn’t sleep when I first read the wiki).

Out of curiosity re-wrote my tiny markdown editing app from choo to hyperapp. Stepped into an issue: if I convert all components to hyperx/jsx, all is peachy. However when I tried to use a yo-yo (native HTML elements / real DOM) component, I’m not sure I understand the right approach. I’ve looked at the CodeMirror example, but still.

Here’s my editor: https://github.com/arturi/tent/blob/4cca75742b0bd3e8d880c2b42df374a78cf959fb/index.js#L184-L189. And here I’m trying to use it in a view: https://github.com/arturi/tent/blob/4cca75742b0bd3e8d880c2b42df374a78cf959fb/index.js#L209-L213.

The original editor component used just return a DOM element (textarea) and fire a callback (onkeyup), whenever something was typed, so I could update state/model. Now I’ve changed it to return both the element an update method, so I could update it with hyperapp, but not sure that’s a thing to do, and it doesnt really work.

Thank you!

[arturi]

Yes, thank you! I’ll try to maybe add some examples to the wiki if I can nail it down.

[jorgebucaran]

I got it working after a lot of fiddling, turns out, you have to pass an element from onupdate to an update function too.

It always seems impossible until it’s done 😉

And, yup. That’s what I tried to say with I’d use “…onupdate to update props/options.”

@arturi From what you are saying it seems that choo/yo-yo actually works well with these “dumb” components.

CodeMirror was notoriously difficult to get working, though, but I guess CodeMirror is the exception rather than the norm.

Like in everything, there’s a trade-off here. See benchmarks.