Могу ли я использовать HyperX со Snabbdom

HyperX это модуль, который переводит помеченный литерал шаблона в hyperscript функционировать как тот, который включен в virtual-dom,

Snabbdom использует функцию, подобную гиперкрипту, для создания своих виртуальных машин, но второй аргумент отличается. Вместо атрибутов его свойства используются различными "модулями";

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>
`;

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)

проверьте рабочий код здесь

Другие вопросы по тегам