❤
npm
Sign UpSign In

flamer

0.0.4 • Public • Published

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

Dependents (0)

Package Sidebar

Install

npm i flamer

Weekly Downloads

1

Version

0.0.4

License

MIT

Last publish

Collaborators

  • luisvinicius167
Try on RunKit
Report malware