Awesome

genel v1.1.2

Tagged template literal utility for generating html elements.

genel is a small utility (649 bytes gzipped) for generating dom elements in browser.

Usage

Install via npm:

npm i --save genel

And require it (by using webpack, browserify, pundle, fuse-box etc) if you prefer using bundler.

const genel = require('genel')

const div = genel.div`
  <p>Hello, world!</p>
`

Or download from CDN:

<script src="https://unpkg.com/genel"></script>

And you have genel global:

const div = genel.div`
  <p>Hello, world!</p>
`

Syntax

const genel = require('genel')

const div = genel.div`
  <h1>Hello, world!</h1>
`

genel.<tagName> works as a tag function for tagged template literal. It creates dom element of <tagName> and its innerHTML is the string inside the quotes. For example, the above is equivalent of:

const div = document.createElement('div')
div.innerHTML = '<h1>Hello, world!</h1>'

And therefore it's equivalent of the below as dom object:

<div>
  <h1>Hello, world!</h1>
</div>

That's it!

Supported tags

The following 116 tags are supported:

const genel = require('genel')

genel.a``
genel.abbr``
genel.address``
genel.area``
genel.article``
genel.aside``
genel.audio``
genel.b``
genel.base``
genel.bdi``
genel.bdo``
genel.blockquote``
genel.body``
genel.br``
genel.button``
genel.canvas``
genel.caption``
genel.cite``
genel.code``
genel.col``
genel.colgroup``
genel.data``
genel.datalist``
genel.dd``
genel.del``
genel.details``
genel.dfn``
genel.dialog``
genel.div``
genel.dl``
genel.dt``
genel.em``
genel.embed``
genel.fieldset``
genel.figcaption``
genel.figure``
genel.footer``
genel.form``
genel.h1``
genel.h2``
genel.h3``
genel.h4``
genel.h5``
genel.h6``
genel.head``
genel.header``
genel.hgroup``
genel.hr``
genel.html``
genel.i``
genel.iframe``
genel.img``
genel.input``
genel.ins``
genel.kbd``
genel.label``
genel.legend``
genel.li``
genel.link``
genel.main``
genel.map``
genel.mark``
genel.math``
genel.menu``
genel.menuitem``
genel.meta``
genel.meter``
genel.nav``
genel.noscript``
genel.object``
genel.ol``
genel.optgroup``
genel.option``
genel.output``
genel.p``
genel.param``
genel.picture``
genel.pre``
genel.progress``
genel.q``
genel.rb``
genel.rp``
genel.rt``
genel.rtc``
genel.ruby``
genel.s``
genel.samp``
genel.script``
genel.section``
genel.select``
genel.slot``
genel.small``
genel.source``
genel.span``
genel.strong``
genel.style``
genel.sub``
genel.summary``
genel.sup``
genel.svg``
genel.table``
genel.tbody``
genel.td``
genel.template``
genel.textarea``
genel.tfoot``
genel.th``
genel.thead``
genel.time``
genel.title``
genel.tr``
genel.track``
genel.u``
genel.ul``
genel.var``
genel.video``
genel.wbr``

Non standard tags

To use genel with any tag name, call genel as a function and you'll get the tag function of the given name:

const customTag = genel('x-custom-tag')

const customEl = customTag`
  <p>Hey, this is the contents of custom tag!</p>
`

The above is equivalent of:

const customEl = document.createElement('x-custom-tag')
customEl.innerHTML = `
  <p>Hey, this is the contents of custom tag!</p>
`

And therefore equivalent of:

<x-custom-tag>
  <p>Hey, this is the contents of custom tag!</p>
</x-custom-tag>

Enjoy! :sunglasses:

genel as tag function

genel itself works as the tag function and it returns the contents as html dom:

const el = genel`
  <div>
    <p>Hello, world!</p>
  </div>
`

The above returns a dom element equivalent of <div><p>Hello, world!</p></div>.

License

MIT