genel
Version:
Tagged template literal utility for generating html elements.
247 lines (205 loc) • 4.35 kB
Markdown
# genel v1.1.2
> [Tagged template literal][tagged-template-literal] utility for **gen**erating html **el**ements.
[](https://circleci.com/gh/capsidjs/genel)
[](https://github.com/capsidjs/genel/blob/master/dist.js)
[](https://greenkeeper.io/)
`genel` is a small utility (640 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.
```js
const genel = require('genel')
const div = genel.div`
<p>Hello, world!</p>
`
```
Or download from CDN:
```html
<script src="https://unpkg.com/genel"></script>
```
And you have `genel` global:
```js
const div = genel.div`
<p>Hello, world!</p>
`
```
# Syntax
```js
const genel = require('genel')
const div = genel.div`
<h1>Hello, world!</h1>
`
```
`genel.<tagName>` works as a tag function for [tagged template literal][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:
```js
const div = document.createElement('div')
div.innerHTML = '<h1>Hello, world!</h1>'
```
And therefore it's equivalent of the below as dom object:
```html
<div>
<h1>Hello, world!</h1>
</div>
```
That's it!
# Supported tags
The following 116 tags are supported:
```js
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.hr``
genel.html``
genel.i``
genel.iframe``
genel.img``
genel.input``
genel.ins``
genel.kbd``
genel.keygen``
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.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:
```js
const customTag = genel('x-custom-tag')
const customEl = customTag`
<p>Hey, this is the contents of custom tag!</p>
`
```
The above is equivalent of:
```js
const customEl = document.createElement('x-custom-tag')
customEl.innerHTML = `
<p>Hey, this is the contents of custom tag!</p>
`
```
And therefore equivalent of:
```html
<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:
```js
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
[webpack]: https://webpack.js.org/
[browserify]: http://browserify.org/
[pundle]: https://github.com/steelbrain/pundle
[fuse-box]: https://github.com/fuse-box/fuse-box
[tagged-template-literal]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals