flamer
v0.0.4
Published
The fast, small and functional JavaScript library for building web user interfaces.
Downloads
13
Readme
The fast, small and functional JavaScript library for building web user interfaces.
Install
Npm: npm install flamer
CDN: https://unpkg.com/flamer@0.0.4
The Gist:
import { render, update, Reactive, Container } from 'flamer';
// Initial Application State
const applicationState = {
text: 'Click',
title: 'Flamer.js'
}
// Event Handler
const Event = {
change: () => {
update('text', 'Nice one!')
update('title', 'Awesome!')
}
}
/**
* Each Reactive component are pure function that returns
* a template string.
*/
const Button = Reactive( 'text', props =>
`<button
id="btn"
onclick="Event.change()"
flamer-observe="text">${props.text}
</button>` )
/**
* Minimal DOM Updates
* [flamer-observe] when the reactive event be called,
* the Reactive function will be called
*/
const Title = Reactive( 'title', props => `<h1 flamer-observe="title">${props.title}</h1>` )
/**
* The Container lyfecycle
* beforeRender -> Trigger before the Container be rendered
* afterRender -> Trigger after the Container are rendered
*/
const ApplLifecycle = {
beforeRender: () => console.log('Before render'),
afterRender: () => console.log('After render')
}
/**
* The Container Component that will
* be render inside the DOM
* It's a function that return an object
*/
const App = new Container( initialState => {
return `
<div>
${Title(initialState)}
${Button(initialState)}
</div>`
}, AppLifecycle);
// The container will receive the appliactionState as argument
render(App, applicationState, '#app'); <body>
<div id="app"></div>
</body>API
Container
/**
* @name Container
* @description Create your Container Component. Container doesn't have state itself, just
* iteract with it when render. It keeps more simple the flow.
* @param {Function} App The container function
* @param {Object} lifecycle The Container Lifecycle. Just two functions: afterRender and beforeRender
*/
new Container(App, lifecycle);Reactive
/**
* @name Reactive
* @description Your reactive component that will
* bind the flamer-observe event
* @param {String} event The Reactive event name
* e.g update('text', value) // text -> Reactive Component
* @param {Function} component The component function that will be
* returned when the event name are called
*/
Reactive(event, component)render
/**
* @name render
* @description Render the container inside the dom
* It keeps more simple the flow. Container doesn't have state itself, just
* iteract with it when render
* @param {Function} Container The container function
* @param {Object} state The initial state that the container will receive
* @param {String} root The root element that the container will be mounted
*/
render(Container, state, root);[flamer-observe]
<!--
* @name flamer-observe
* @description The tag element that will be updated when the reactive event be called
* When the title reactive event be called, the flamer-observe element will be updated.
* Keep the minimal DOM update
**/
-->
<h1 flamer-observe="title">Initial Title</h1>
Reactive Methods:
update
/**
* Use when you want change update the respective Reactive element
* @name update
* @description Update the state
* @param {String} eventName The reactive event name
* @param {String|Object} value The value that will be updated
*/
update(eventName, value);append
/**
* Use when you want to add the respective Reactive element
* @name append
* @description Update your flamer-observe component
* @param {String} eventName The reactive event name
* @param {Any} value The state that will be updated
*/
append(eventName, value);remove
/**
* Use when you want to remove the respective Reactive element
* @name append
* @description Update your flamer-observe component
* @param {String} eventName The reactive event name
* @param {Number|String} key The element key index that will be removed
*/
remove(eventName, key);replace
/**
* Use when you want to replace the respective Reactive element
* @name replace
* @description Update your flamer-observe component
* @param {String} eventName The state that will be updated
* @param {Number|String} key The key of the element
* @param {Any} value The value that will be replaced
*/
replace(eventName, key, value);License MIT