component-js

Create web page by Javascript

Introduction

component-js is a light weight library to create a web page by Javascript, it's philosophy component just a function return DOM element let us could flexibility compose component for create a new component.

You may need component-js when ...

1. Client-render, sometimes, you need client-render data to DOM element. Traditional way is splicing HTML string or using HTML template engine. However splicing HTML string is easy to wrong and using HTML template is too heavy. So component-js is a good way for you.

2. HTML component, component-js provider a flexible way to compose component. Although many framework do it excellently, but maybe you just need a simple way to reuse HTML rather than a giant.

How to use

npm install component-js

Hello world!

import {elm,txNode,comp} from 'component-js'
document.getElementById('root')
    .appendChild(elm({
                   		tag:'p',
                   		attr:{
                   			textContent:'hello world!'
                   		}
                   }))

Or more exciting

import {elm, comp, txNode} from 'component-js'
import j from 'berserk'

const el = comp.div(
	[
		comp.listGroup(
			[
				comp.div(
					[
						comp.btn({
							evtLir: [
								{
									type: 'click',
									handler: () => j.log('click first btn')
								}
							],
							txt: 'add TODO'
						}),
						comp.btn({
							evtLir: [
								{
									type: 'click',
									handler: () => j.log('click second btn')
								}
							],
							txt: 'show active'
						}),
						comp.btn(
							{
								evtLir: [
									{
										type: 'click',
										handler: () => j.log('click second btn')
									}
								],
								txt: 'show active'
							}
						)
					]
				),
				txNode('dynamic')
			]
		)
	]
)
document.getElementById('root').appendChild(el)

Element api

Constants

elm ⇒ createElement

Create a DOM element by pass option

txNode ⇒ createTextNode

A function for create a textNode by pass text content, like document.createTextNode but bind 'document' as it's this

elm ⇒ createElement

Create a DOM element by pass option

Kind: global constant
Returns: createElement - a DOM element

Param	Type	Description
option	object
option.tag	string	The html tag
option.attr	object	The option correspond element's attributes, default: {}
option.children	array	A array of elements, these elements will append as children,default: []
option.evtLir	array	A array of event object, it will bind all event in object to return element example: [{type:click,handler:(e)=>console.log(e),opt:{capture:true}}...], default: []

Example

elm({
		tag:'p',
		attr:{
			textContent:'hello world!'
		}
})

txNode ⇒ createTextNode

A function for create a textNode by pass text content, like document.createTextNode but bind 'document' as it's this

Kind: global constant
Returns: createTextNode - A textNode

Param	Type
text	string

Example

import {comp,txNode} from 'component-js'
comp.div(
   [
       txNode('hello world!')
   ]
)

Component api

Note: component-js component is depend on bootstrap

Functions

btn(option) ⇒ createElement

Create a button element with bootstrap className

listGroup(children) ⇒ createElement

Create a bootstrap listGroup by pass children element

form(formGroups, submitBtn, opt) ⇒ createElement

Create a div with form by pass option, fromGroups(see bootstrap),submit button

formGroup(label, type) ⇒ createElement

Create a div with bootstrap 'formGroup' className for input

div(children) ⇒ createElement

Create a div by pass it's children elements

btn(option) ⇒ createElement

Create a button element with bootstrap className

Kind: global function
Returns: createElement - A button element with bootstrap@4.x className

Param	Type	Description
option	object
option.evtLir	array	Example: [{type:click,handler:(e)=>console.log(e),opt:{capture:true}}...]
option.txt	string	Example: 'click me'
option.styleType	string	Example: 'btn-error' default: 'btn-secondary'
option.type	string	Example: 'submit' default: 'button'

Example

btn({
	evtLir: [
				{
					type: 'click',
					handler: () => j.log('click second btn')
				}
			],
	txt: 'show active'
	})

listGroup(children) ⇒ createElement

Create a bootstrap listGroup by pass children element

Kind: global function

Param	Type	Description
children	array	example: [domElement...] a array of dom element, it will wrap with 'list-group-item' className

Example

listGroup([buttonElm1,buttonElm2])

form(formGroups, submitBtn, opt) ⇒ createElement

Create a div with form by pass option, fromGroups(see bootstrap),submit button

Kind: global function
Returns: createElement - A form element with bootstrap style

Param	Type	Description
formGroups	array	A array of div with bootstrap 'form-groups' class
submitBtn	Element	A button element with 'submit'type
opt	object	A object of attribute

Example

form(
       [
           formGroupDiv1,
           formGroupDiv1,
       ],
       submitBtn
)

formGroup(label, type) ⇒ createElement

Create a div with bootstrap 'formGroup' className for input

Kind: global function
Returns: createElement - A div element which has label and input element children as well as bootstrap 'formGroup' className

Param	Type	Description
label	string	The label text
type	string	The input type

Example

formGroup(
       'password',
       'password'
)

div(children) ⇒ createElement

Create a div by pass it's children elements

Kind: global function
Returns: createElement - A div element

Param	Type	Description
children	array	Children elements

Example

div(
   [childElm1,childElm2]
)