tagl
v1.1.2
Published
universal hyperscript helper for fancy syntax
Downloads
13
Readme
tagl
universal hyperscript helper for fancy syntax
why
Writing hyperscript can be cumbersome. This might be an alternative to JSX and alike
what
Imagine instead of
<button className="btn">Click Me</button>
or this
h('button.btn', 'Click Me')
you can write
button.btn('Click Me')
Well thats possible with tagl
how
Init tagl with your hyperscript lib, e. g. mithril.js.
const t = tagl(function(tagName, classes, ...args) {
return m([tagName, ...classes].join('.'), ...args)
})
or react
const t = tagl(function(tagName, classes, ...children) {
let props = {}
const prop = children[0]
if (prop && typeof prop !== 'string' && !prop.type) {
props = prop
children = children.slice(1)
}
return React.createElement(
tagName,
Object.assign({}, props, {
className: [...classes, props.className || ''].join(' '),
}),
...children
)
})
// myView.js
const { div, span, button } = t
div.someClass(
span.someOtherClass('hi'),
button.btn({ onclick: () => {} }, 'Click Me')
)
same in plain mithril would be
const m = require('mithril')
m('div.someClass', [
m('span.someOtherClass', 'hi'),
m('button.btn', { onclick: () => {} }, 'Click Me'),
])
components
There are two ways to create and use components. One global and one local. Use global components for general reusable widgets like date picker or dropdowns and alike.
// define it and set it on the tagl instance
// `myDatePicker` must be a component definition that is supported by your vdom library
// it will be used instead of the tag name
t.datePicker = myDatePicker
// use it
const { div, datePicker } = t
div(
'choose date:',
datePicker({
value: new Date(),
})
)
Sometimes you just need sub-state at a specific point and you don't want to create a globaly available component. In this case you can use local components.
const { div } = t
// define it and store it in a variable
// `myDatePicker` must be a component definition that is supported by your vdom library
// it will be used instead of the tag name
const myLocalComponent = t(localComponent)
// use it
div(
'fancy stuff:',
myLocalComponent(
{
someAttrs: 'someValue',
},
'some',
'child',
'content'
)
)