Gelerator NPM | npm.io

gelerator

Generate Elements in a simple way.

npm.io npm.io

Javascript	Elements
`g('div#ID.two.classes')()`	`<div id="ID" class="two classes"></div>`
`g('button#main')('content')`	`<button id="main">content</button>`
`g('span', { style: 'color: red' })('RED')`	`<span style="color: red">RED</span>`
`g('ol')(g('li')(1), g('li')(2))`	`<ol><li>1</li><li>2</li></ol>`
Special	Usages
`g('.default.tagName.is)('DIV')`	`<div class="default tagName is">DIV</div>`
`g('input#forInputOnly')('VALUE')`	`<input id="forInputOnly" value='VALUE'/>`
`g('img#forImgOnly')('./demo.jpg')`	`<img id="forImgOnly" src="./demo.jpg">`

const arr = ['a', 'b', 'c', 'd']

// es6
const ctnr = g('ol.ctnr')(
    ...arr.map((item, idx) => g('li')(item))
)

const P = g('p', { ...some attrs })  // p tag template

const p1 = P('content1')
const p2 = P('content2')     // p1 and p2 got the same attributes

// string is allowed in style attr
const el = g('#styled', {
    style: 'top: 1px; left: 1px'
})('content')

// object is also allowed
const el = g('#styled', {
    style: {
        top: '1px',
        left: '1px'
    }
})('content')

// attribute start with _ will be treat as an event
const btn = g('button', {
  _click: () => alert('hello world')
})('click me')


const btn = g('button', () => alert('hello world'))('click me')

Syntax

g(selector[, attr])(arg1[, arg2[, ...]])

Parameters

selector Type: String

CSS selector format with tag#id.class1.class2.

attr Type: Function | Object

If Function were given, it'll be tag's onclick event.
Otherwise, generate Object as the tag's attributes.
Especially, object key start with _ would be treat as an event.
For style key, both string and object are available.

arg1, arg2, ... Type: String | Node

if String were given, it'll be tag's innerText.
Otherwise, append Node to the tag.
Especially, given String will be this IMG tag's src attribute.
Especially, given String will be this INPUT tag's value attribute.

Usage

1. install

or yarn add gelerator

2. import gelerator

import { g } from 'gelerator'

3. generate elements

let userMessages = [
  'hi',
  'what are you up to?',
  '<script>alert("something evil")</script>'
]

g('chat-list')(
  g('ul')(
    ...userMessages.map(msg => g('li')(msg)),
    g('li.chat-end')('end of line')
  )
)

Output:

<div class="chat-list">
  <ul>
    <li>hi</li>
    <li>what are you up to?</li>
    <li>&lt;script&gt;alert("something evil")&lt;/script&gt;</li>
    <li class="chat-end">end of line</li>
  </ul>
</div>