Tagged template literal utility for generating html elements.
genel is a small utility (649 bytes gzipped) for generating dom elements in browser.
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>
`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!
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``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! 😎
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>.
MIT