g5-component.js
Browserify Component Scaffold
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
let linescoreComponent = ; linescoreComponent;
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; // initiates component
linescoreComponent; // checks if container has an instance of g5-component
linescoreComponent; // detaches all events
linescoreComponent; // attaches all events
linescoreComponent; // kills component instance, cleans everything out to prevent memory leaks
Events / Listen
Events must be attached before the component is instantiated
linescoreComponent; linescoreComponent; linescoreComponent; linescoreComponent; linescoreComponent; linescoreComponent;
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; //// stops data polling on component// event is ignored if data polling is already stopped//linescoreComponent; //// resumes data polling on component// event is ignored if already polling data//linescoreComponent;
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