maketag is a tool to make web tags.

You can install it globally with

npm i maketag -g

and then use

maketag new NAME

to create a directory named NAME and a new package providing a tag. NAME must start with a capital letter. For example, maketag new SomeTag.

Then, you can enter the directory with cd Sometag and start working on a tag.

There are three entry points to a tag:

src/script.coffee is the main script file. It must end with a call to window.tag or with a function literal defining a tag.

maketag new NAME generates a package with a valid src/script.coffee.

src/style.sass is the main style file. It is optional(if your tag doesn't need any style).

On the first invocation of a tag

import { SomeTag } from 'some-tag'
element = SomeTag() # first invocation
element2 = SomeTag() # second invocation

, a tag adds its style to the head as

<style id="SomeTagStyle">css from src/style.sass</style>

.

It adds a style element with an id attribute, whose value is obtained by appending "Style" to the NAME.

contains the field tag with the tag's NAME and metadata. This field is used to build the tag.

Inside of the directory generated by maketag new NAME, you can use the following commands:

maketag test(or npm test) to run the tests.

maketag build(or npm run build) to build the project.

maketag watch(or npm start) to start a development session. It builds the project, and then rebuilds the project when the sources change.

It also starts a server for manual testing(and outputs urls where it is listening).

maketag new NAME generates a tag and a basic test of it with Jasmine and Puppeteer.