gelerator

Generate Elements in a simple way.

English | 简体中文

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">

• Try gelerator online at codesandbox
• gelerator TodoMVC

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>

License

MIT

Dev with TodoMVC

1. install all the dev dependencies: yarn
2. dev: yarn dev
3. package: yarn build

Contributing

1. Fork this repo
2. Create your feature branch: git checkout -b MY-NEW-FEATURE
3. Commit your changes: git commit -am 'ADD SOME FEATURE'
4. Push to the branch: git push origin MY-NEW-FEATURE
5. Submit a pull request :D