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?

[jorgebucaran]

@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!

[jamen]

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.