我可以将 HyperX 与 Snabbdom 一起使用吗

Question

HyperX 是一个模块，它将标记的模板文字转换为 hyperscript 函数，就像 virtual-dom 中包含的函数一样。

Snabbdom 使用类似超脚本的函数来构建它的 vdom，但它的第二个参数不同。它的属性被各种“模块”使用，而不是属性；

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']);

是否可以像这样使用hyperx 和snabbdom 的超标函数：

const h = require('snabbdom/h');
const hyperx = require('hyperx');
const hx = hyperx(h);

let vdom = hx`
  <div 
    title=${someString} 
    class-selected={isSelected} 
    on-click={doSomething} 
    style={({color: someColor})}
  >
   children
  </div>
`;

Answer 1

是的，你可以！

var snabbdom = require('snabbdom')
var patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class'), // makes it easy to toggle classes
  require('snabbdom/modules/props'), // for setting properties on DOM elements
  require('snabbdom/modules/style') // handles styling on elements with support for animations  
])
var h = require('snabbdom/h')
var hyperx = require('hyperx')
var hx = hyperx(h)

var title = 'world'
var wow = [1,2,3]
var tree = hx`<div>
  <h1 y="ab${1+2}cd">hello ${title}!</h1>
  ${hx`<i>cool</i>`}
  wow
  ${wow.map(function (w, i) {
    return hx`<b>${w}</b>\n`
  })}
</div>` 
patch(document.body, tree)

检查工作代码here