Skip to content

StephanHoyer/tagl

Repository files navigation

tagl

Greenkeeper badge

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

About

universal hyperscript helper for fancy syntax

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published