g5-component

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