Handy utility to create DOM elements using Tagged Template Literals and retrieving references. Have been writting using Typescript and it's unit testing use AVA test runner.
Laziness :) / Querying for nested elements is boring.
This package doesn't have dependencies.
NPM
$ npm install el-tag
Yarn
$ yarn install el-tag
This package exposes two module definitions:
- CommonJS: build/main/index.js
- ES6 Module: build/browser/index.js
import elTag from 'el-tag';
// Create a <h1> DOM element
let [node1] = elTag()`<h1>El Tag</h1>`;
// Create a nested elements and retrieve references
let [node2 ,node2References] = elTag()`<p>El Tag <span ref="arabic">(Arabic: التاج at-Tāj; also Al-Tag, Al-Taj)</span> is a village and holy site in the Kufra Oasis, within the Libyan Desert subregion of the Sahara.</p><p>It is in the Kufra District in the southern Cyrenaica region of southeastern Libya. The Arabic el tag translates as <span ref="translation">"crown"</span> in English, and derives from the position above the Kufra basin.</p>
<a ref="wiki" href="https://en.wikipedia.org/wiki/El_Tag">wikipedia</a>
`;
// Create nested elements using other elements
let [node3, collection] = elTag()`<div>
${node1}
${node2}
</div>`;
document.body.appendChild(node3);
console.log(node2References.arabic, node2References.translation, node2References.wiki);Originally I was looking for a package/library that does the same thing as ElTag, I found Facon library, but after reviewing it I found some differences between the description of the library and how it really works. The usage says that Facon "Construct and returns a DOM element" and this is wrong, it actually constructs and returns a DocumentFragment which has some pros and cons.
So as an exercise, I have ported Facon to Typescript and customize it to my needs and I have also learned a little bit about of Ava, Typescript, Typedoc, Codecov, CircleCi, Npm Packages.
PRs accepted.
Template Library