0.0.4 • Published 7 years ago
flamer v0.0.4
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);
<!--
* @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