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

    Keywords

    none

    Install

    npm i flamer

    DownloadsWeekly Downloads

    0

    Version

    0.0.4

    License

    MIT

    Last publish

    Collaborators

    • luisvinicius167