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