JS Function calls to html

template.js

function createElement(tag, props, ...children) {
	return (
      `<${tag}${renderProps(props)}>${children.join ? children.join('') : children}</${tag}>`
    )
}

function renderProps(props) {
  const propsString = Object.keys(props).map(key => `${key}="${props[key]}"`).join(' ')
  return propsString ? ' ' + propsString : ''
}

function createFactory(tag) {
	return (props, ...children) => createElement(tag, props, ...children)
}

const article = createFactory('article')
const h1 = createFactory('h1')
const p = createFactory('p')
const div = createFactory('div')

console.log(
  article(
    { 
      class: 'Article',
      'data-title': 'Hello world'
    },
    h1({ class: 'Article__title' }, 'hello, world!'),
    p({}, 'This is an article')
  )
)