Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kt3k/dom-gen

Utility for dom generation, a jquery plugin
https://github.com/kt3k/dom-gen

Last synced: 20 days ago
JSON representation

Utility for dom generation, a jquery plugin

Awesome Lists containing this project

README 

        
# dom-gen v2.3.0 [![Circle CI](https://circleci.com/gh/kt3k/dom-gen.svg?style=svg)](https://circleci.com/gh/kt3k/dom-gen) [![codecov.io](https://codecov.io/github/kt3k/dom-gen/coverage.svg?branch=master)](https://codecov.io/github/kt3k/dom-gen?branch=master)



> Utility for dom generation, a jquery plugin



# Idea



This tool is a shorthand of `$('', 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"](http://ejohn.org/apps/workshop/adv-talk/) by John Resig. This slide explains how `$('', 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()



```js

import {div} from 'dom-gen'



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

```



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



```js

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

```



## div(opts)



You can pass generation options as the parameter.



```js

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

```



The above is the same as:



```js

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

```



(See the slide ["Things You Might Not Know About jQuery"](http://ejohn.org/apps/workshop/adv-talk/) which explains what the above code means in jQuery.)



or:



```js

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

```



Another example



```js

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

```



is the same as:



```js

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

```



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



You can pass additional params to `div` function and they are `append`ed to the element.



```js

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

```



is the same as the follwoing jquery call:



```js

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

```

which is equivalent of the following html:



```js



Hello
world!


```



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



```js

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

```



is equal to:



```

Hello world!


```



## 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.



```js

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.



```js

import domGen from 'dom-gen'



const xTag = domGen('x-tag')



xTag({addClass: 'foo'}, p('Hello')) // This is equivalent of 
Hello


```



# Recipes



## Mix inline html and dom-gen composition



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



```js

p('Hello, this is example page!')

```



is a bit better readable than:



```

p(

  'Hello, this is ',

  span({addClass: 'green'}, 'example'),

  'page!'

)

```



## Complex construction



```js

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



div(

  h2('Hello'),

  div({addClass: 'greeting'},

    p('Hello, this is example page!')

  ),

  hr()

)

```



is equivalent of the following html:



```html



  
Hello


  


    
Hello, this is example page!


  


  




```



## Use with tagged template string



```js

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



div(

  h2`Hello`,

  div({addClass: 'greeting'},

    p`Hello, this is example page!`

  ),

  hr()

)

```



# License



MIT



# Similar projects



- Ruby

  - [Markaby][Markaby] Ruby

  - [erector][erector] Ruby

  - [Builder][Builder] Ruby

  - [Nokogiri HTML Builder][Nokogiri HTML Builder] Ruby

- JavaScript

  - [@cycle/dom][@cycle/dom] JavaScript

  - [hyperscript-helpers][hyperscript-helpers] JavaScript

  - [jm][jm] JavaScript

  - [hyperscript][hyperscript] JavaScript

  - [transform-react-jsx][transform-react-jsx] JavaScript

  - [Elem][Elem] JavaScript

  - [frzr][frzr] JavaScript

- CoffeeScript

  - [space-pen][space-pen] CoffeeScript (Not maintained)

  - [funcd][funcd] CoffeeScript



[space-pen]: https://github.com/atom-archive/space-pen

[hyperscript]: https://github.com/dominictarr/hyperscript

[funcd]: https://github.com/mgutz/funcd

[jm]: https://github.com/smtlaissezfaire/jm

[Markaby]: https://github.com/markaby/markaby

[Builder]: https://github.com/jimweirich/builder

[Nokogiri HTML Builder]: http://www.rubydoc.info/github/sparklemotion/nokogiri/Nokogiri/HTML/Builder

[erector]: https://github.com/erector/erector

[transform-react-jsx]: https://babeljs.io/docs/plugins/transform-react-jsx/

[Elem]: https://github.com/mathieuancelin/Elem

[frzr]: https://frzr.js.org/

[@cycle/dom]: https://github.com/cyclejs/dom

[hyperscript-helpers]: https://github.com/ohanhi/hyperscript-helpers