Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gelerator with all npm packages installed. Try it out:

var gelerator = require("gelerator")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gelerator v2.2.2

Generate Element in a simple way.

gelerator

Generate Elements in a simple way.

Netlify Status

English | 简体中文

JavascriptElements
g('btn')('click me')<div class="btn">click me</div>
g({ style: 'color: #888' })('ctt')<div style="color: #888">ctt</div>
g({ id: 'main' }, 'botton')('content')<botton id="main">content</botton>
g('demo-jpg', 'img')('./demo.jpg')<img class="demo-jpg" src="./demo.jpg">

Try gelerator online at codepen

element template

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

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

specified style attribute

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

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

work with css-in-js

import { css } from 'emotion'  // css-modules, auto-prefixer
import { g } from 'gelerator'

const isIOS = /iPad|iPhone|iPod/.test(window.navigator.userAgent)
const paraClass = css`
  font-size: ${isIOS ? 18 : 14}px;
`

const el = g(paraClass)('content')  // div writes everything

generate list by array

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

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

// es5
const ctnr = g('ctnr', 'ol').apply(
    this,
    arr.map(function(item, idx) {
      return g({}, 'li')(item)
    })
)

element with data-x attributes

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

// attribute start with $ will change into data-
const ctnr = g('ctnr', 'ol')(
    ...arr.map((item, idx) => g({
      $index: idx,                  // $index -> data-index
      $item: item                   // $item -> data-item
    }, 'li')())
)

Syntax

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

Parameters

attr Type: String | Object

If String were given, it'll be tag's className. Otherwise, generate Object as the tag's attributes. Especially, object key start with $ would turn into data- attribute. For style key, both string and object are available.

tag Type: String

Tag's tagName, default as DIV

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

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

Usage

1. install

NPM 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('chat-end', 'li')('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

  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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free