GithubHelp home page GithubHelp logo

kt3k / dom-gen Goto Github PK

View Code? Open in Web Editor NEW
2.0 3.0 0.0 27 KB

Utility for dom generation, a jquery plugin

Home Page: https://www.npmjs.com/package/dom-gen

License: MIT License

JavaScript 100.00%

dom-gen's Introduction

dom-gen v2.3.0 Circle CI codecov.io

Utility for dom generation, a jquery plugin

Idea

This tool is a shorthand of $('<tagName/>', opts). You can write it like tagName(opts) with this tool such as div({data: {key: 'value'}}) for example.

See the slide "Things You Might Not Know About jQuery" by John Resig. This slide explains how $('<tagName/>', opts) works in details.

Install

npm install dom-gen

Usage

NOTE dom-gen supposes $ is exposed in global namespace. You need to put jquery on global namespace first.

div()

import {div} from 'dom-gen'

div() // This creates an empty div element.

The above code is the same as $('<div/>'). You can chain jquery method calls like the following

div().text('Hello').appendTo('#main')

div(opts)

You can pass generation options as the parameter.

div({ data: { x: 0, y: 1 }, addClass: 'container', appendTo: '#main' })

The above is the same as:

$('<div/>', { data: { x: 0, y: 1 }, addClass: 'container', appendTo: '#main' })

(See the slide "Things You Might Not Know About jQuery" which explains what the above code means in jQuery.)

or:

$('<div/>').data({ x: 0, y: 1 }).addClass('container').appendTo('#main')

Another example

img({ attr: { src: 'path/to/img' }, appendTo: '#some-place' })

is the same as:

$('<img/>').attr('src', 'path/to/img').appendTo('#some-place')

div(opts, param0, [param1, ...])

You can pass additional params to div function and they are appended to the element.

div({addClass: 'main'}, div().text('Hello'), 'world!')

is the same as the follwoing jquery call:

$('<div/>', {addClass: 'main'}).append($('<div/>').text('Hello'), 'world!')

which is equivalent of the following html:

<div class="main"><div>Hello</div>world!</div>

You can even omit first param opts if it's empty.

div(p(span('Hello'), ' ', span('world!')))

is equal to:

<div><p><span>Hello</span> <span>world!</span></p></div>

Supported tags

dom-gen exports following tags by default for now. You can import them directly from dom-gen and use them as generator functions.

a()
abbr()
address()
area()
article()
aside()
audio()
b()
base()
bdi()
bdo()
blockquote()
body()
br()
button()
canvas()
caption()
cite()
code()
col()
colgroup()
data()
datalist()
dd()
del()
details()
dfn()
dialog()
div()
dl()
dt()
em()
embed()
fieldset()
figcaption()
figure()
footer()
form()
h1()
h2()
h3()
h4()
h5()
h6()
head()
header()
hr()
html()
i()
iframe()
img()
input()
ins()
kbd()
keygen()
label()
legend()
li()
link()
main()
map()
mark()
math()
menu()
menuitem()
meta()
meter()
nav()
noscript()
object()
ol()
optgroup()
option()
output()
p()
param()
picture()
pre()
progress()
q()
rb()
rp()
rt()
rtc()
ruby()
s()
samp()
script()
section()
select()
small()
source()
span()
strong()
style()
sub()
summary()
sup()
svg()
table()
tbody()
td()
template()
textarea()
tfoot()
th()
thead()
time()
title()
tr()
track()
u()
ul()
var()
video()
wbr()

Create your own

You can create the generator for your own tag.

import domGen from 'dom-gen'

const xTag = domGen('x-tag')

xTag({addClass: 'foo'}, p('Hello')) // This is equivalent of <x-tag class="foo"><p>Hello</p></x-tag>

Recipes

Mix inline html and dom-gen composition

Inline elements are often better not to use dom-gen for creating.

p('Hello, this is <span class="green">example</span> page!')

is a bit better readable than:

p(
  'Hello, this is ',
  span({addClass: 'green'}, 'example'),
  'page!'
)

Complex construction

import {div, h2, p} from 'dom-gen'

div(
  h2('Hello'),
  div({addClass: 'greeting'},
    p('Hello, this is <span class="green">example</span> page!')
  ),
  hr()
)

is equivalent of the following html:

<div>
  <h2>Hello</h2>
  <div class="greeting">
    <p>Hello, this is <span class="green">example</span> page!</p>
  </div>
  <hr/>
</div>

Use with tagged template string

import {div, h2, p} from 'dom-gen'

div(
  h2`Hello`,
  div({addClass: 'greeting'},
    p`Hello, this is <span class="green">example</span> page!`
  ),
  hr()
)

License

MIT

Similar projects

dom-gen's People

Contributors

greenkeeper[bot] avatar greenkeeperio-bot avatar kt3k avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.