capsidjs / genel

:mushroom: Utility for generating html elements with tagged`template literal`. Only 649 bytes.

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! 😎

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

genel's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: build: Your tests failed on CircleCI (Details).

---

Release Notes for v1.14.3

2019-06-06

Bug Fixes

• Generate correct external imports when importing from a directory that would be above the root of the current working directory (#2902)

Pull Requests

• #2902: Use browser relative path algorithm for chunks (@lukastaegert)

Commits

The new version differs by 4 commits.

• c68bd95 1.14.3
• d79aa57 Update changelog
• 7179390 Use browser relative path algorithm for chunks (#2902)
• b1df517 Add funding button

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: build: Your tests failed on CircleCI (Details).

---

Release Notes for v1.9.3

2019-04-10

Bug Fixes

• Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

• #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)

Commits

The new version differs by 3 commits.

• 516a06d 1.9.3
• a5526ea Update changelog
• c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of uglify-js is breaking the build 🚨

The devDependency uglify-js was updated from 3.6.1 to 3.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

uglify-js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: build: Your tests failed on CircleCI (Details).

---

Release Notes for v3.6.2

 

Commits

The new version differs by 9 commits.

• c3ca293 v3.6.2
• 516b67a minor tweaks to CI test scripts (#3467)
• eba3a37 fix boolean context detection (#3466)
• 6d57ca1 improve source map handling (#3464)
• 3320251 update benchmark URLs (#3462)
• 33c94d3 detect boolean context across IIFEs (#3461)
• b18f717 improve readability of --help ast (#3460)
• a0d4b64 remove extraneous property (#3459)
• 6db880e clean up AST_Binary optimisation logic (#3458)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of standard is breaking the build 🚨

The devDependency standard was updated from 14.0.2 to 14.1.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

standard is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: build: Your tests failed on CircleCI (Details).

---

Commits

The new version differs by 8 commits.

• efa9950 14.1.0
• 78ecd24 [email protected]
• 776bf9a [email protected]
• c988fbe add 14.1.0 changelog
• db55c98 babel-eslint@^10.0.3
• 1987362 eslint@~6.2.2
• 2ad67c0 Remove funding experiment
• 08b5be0 typo

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.18.0 to 1.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: build: Your tests failed on CircleCI (Details).

---

Commits

The new version differs by 6 commits.

• 9af119d 1.19.0
• b3f361c Update changelog
• 456f4d2 Avoid variable from empty module name be empty (#3026)
• 17eaa43 Use id of last module in chunk as name base for auto-generated chunks (#3025)
• 871bfa0 Switch to a code-splitting build and update dependencies (#3020)
• 2443783 Unified file emission api (#2999)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of standard is breaking the build 🚨

The devDependency standard was updated from 14.1.0 to 14.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

standard is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: build: Your tests failed on CircleCI (Details).

---

Commits

The new version differs by 24 commits.

• 027e7e9 update authors
• 379a28b 14.2.0
• a45c511 Update CHANGELOG.md
• d1ef5f8 Update eslint to the latest version 🚀 (#1395)
• f4f9bde optimize grab.png
• a4216aa Add Grab to users list (#1396)
• f71b65b chore: .npmrc with package-lock=false (#1407)
• 5b2b360 chore: .npmrc with package-lock=false
• 80c5605 Format AUTHORS.md with hallmark (#1404)
• 28d6fd1 Run update-authors
• 19bce00 Format AUTHORS.md with hallmark
• ad1fd1d Merge pull request #1398 from standard/hallmark
• d5ddd5e Merge pull request #1399 from standard/greenkeeper/eslint-plugin-node-10.0.0
• 02d3ea6 fix(package): update eslint-plugin-node to version 10.0.0
• dc3fea5 changelog: Run 'npx vweevers/hallmark'

There are 24 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴