hyperx
hyperx copied to clipboard
choojs
Snabbdom Support
Snabbdom uses a hyper-script-like function to build it's vdoms, but it's second argument is different. Instead of attributes it's properties are used by various "modules";
h('div', {
props: {title: someString}, // snabbdom/modules/props
classes: {selected: isSelected}, // snabbdom/modules/class
on: {click: doSomething}, // snabbdom/modules/eventlisteners
style: {color: someColor} // snabbdom/modules/style
}, ['children'])
The snabbdom-jsx module handles this using prefixed attributes in JSX:
<div
title={someString}
class-selected={isSelected}
on-click={doSomething}
style: {({color: someColor})}
>
children
</div>
Would it be feasible for hyperx to do this as well?
You could create a wrapper around snabbdom's h and pass it to hyperx, so it could recognize prefixed attributes, or make intelligent choices.
Can this be supported inside hyperx, maybe through special option like concat? Using another module seems like unecessary overhead, and hyperx could be useful for render functions in Vue out od the box (Vue uses snabbdom as vdom library).
@niksy How should hyperx deal with snabbdom unique idioms, like hooks?
Ohh, interesting I've found this after creating a module.
I made snabby which is more like yo-yo.
@jbucaran for handling hooks inside this module, I plan to use a snabby.hooks function, e.g.:
snabby.hook(vnode, { ...handles })
// Or
snabby.hook(vnode, handle, fn)
Although I haven't implemented this yet, or on that note, even written tests for anything... It is pretty experimental
Looking for people to collaborate on it, if anyone is interested.
@jamen Here is what I ended up with. Essentially:
} else if ("data-hook-" === key.substr(0, 10)) {
data.hook[key.substr(10)] = value
}
Good luck with Snabby!
@jbucaran That structure you've got makes sense after I've experimented more. I'm probably going to have to do something similar. So let me know if you want me to add you as collaborator on Snabby.
An update on this, I've made snabby support hooks and various other modules, by using an s-* prefix (similar to v-* in vue).
Example:
snabby`
<div s-hook:destroy=${fn}>
</div>
`
// Using `eventlisteners`:
snabby`
<div s-on:click=${...}>
</div>
`
Open to suggestion on how to make this look more nice.