g5-component.js

Browserify Component Scaffold

• Introduction
• Documentation
• Change Log

Setup

Install the package and use it as a module

npm i g5-component

Or clone the repo and use it as a scaffold/boilerplate for your component

git clone https://github.com/MajorLeagueBaseball/g5-component.git && cd g5-component

Install

Install dependencies, run the initial build, and start the development server

npm i && npm run build && npm run start-dev

Usage Example

Based on the provided linescore example

<section class="g5-component g5-component--linescore"></section>

let linescoreComponent = g5Component({
    component: 'g5-component--linescore',
    container: document.querySelector('.g5-component--linescore'),
    css: 'g5-component--linescore-initiated',
    interval: 15000,
    path: '/src/data/linescore.json'
});

linescoreComponent.init();

Options

A single shared options Object

| Option | Type | Description | Default | |:-------------------|:-----------|:------------------------------------------|:------------------| | component | String | component name/class | '' | | container | Element | primary container | '' | | css | String | classes to add after instantiation | g5-component | | i18n | String | localization | en | | interval | Number | polling interval | 40000 | | path | String | data path to fetch (remote or local) | '' | | enableFetch | Boolean | flag to enable/disable initial data fetch | true | | enablePolling | Boolean | flag to enable/disable data polling | true | | extendListeners | Function | callback executed after all event listeners have been added | undefined |

Methods

Simple set of core methods

linescoreComponent.init(); // initiates component

linescoreComponent.hasInstance(); // checks if container has an instance of g5-component

linescoreComponent.detachEvents(); // detaches all events

linescoreComponent.attachEvents(); // attaches all events

linescoreComponent.destroy(); // kills component instance, cleans everything out to prevent memory leaks

Events / Listen

Events must be attached before the component is instantiated

linescoreComponent.on('ready', (obj) => {
    // console.log('component model and viewModel have been initiated', obj);
});

linescoreComponent.on('data', (data) => {
    // console.log('component data from model', data);
});

linescoreComponent.on('data-error', (err) => {
    // console.log('component model data error', err);
});

linescoreComponent.on('destroy', (obj) => {
    // console.log('component instance killed', obj);
});

linescoreComponent.on('start', () => {
    // console.log('component start fetch');
});

linescoreComponent.on('stop', () => {
    // console.log('component stop fetch');
});

Events / Trigger

Events must be triggered after the component is instantiated

// 
// Used with the `enableFetch` option (which toggles the initial data fetch), this 
// event allows direct passing of a data Object via an event
//
linescoreComponent.emit('synthetic-data', data);

//
// stops data polling on component
// event is ignored if data polling is already stopped
//
linescoreComponent.emit('stop');

//
// resumes data polling on component
// event is ignored if already polling data
//
linescoreComponent.emit('start');

Server / Development

Server running on http://localhost:9966 with automatic split builds (vendor dependencies are built separately for faster build times) [Ctrl+C] to kill server

npm run start-dev

Server

Server running on http://localhost:9966 with full build [Ctrl+C] to kill server

npm run start

Commands

build

Builds JS, CSS, and compresses images

npm run build

test

runs test directory through the babel-tape-runner

npm test

lint

lint via JSHint, options set in .jshintrc

npm run lint

compress-images

compresses all images in src/images/ and outputs to src/images/build

npm run compress-images

Browser Support

| | | | --- | --- | --- | --- | --- | ✔ | ✔ | 10+ ✔ | ✔ | 6.1+ ✔ |

                                                                                                         
                                                                                                         
                                                                                                         
                                                                                                         
                                                                                                         
            ______
            _\ _~-\___
    =  = ==(____G5____D
                \_____\___________________,-~~~~~~~`-.._
                /     o O o o o o O O o o o o o o O o  |\_
                `~-.__        ___..----..                  )
                      `---~~\___________/------------`````
                      =  ===(_________D