/g5-component

Browserify Component Scaffold :baseball:

Primary LanguageJavaScriptOtherNOASSERTION

#g5-component.js

Browserify Component Scaffold (documentation)

NPM version NPM license

  • event based
  • scalable architecture
  • completely self-contained
  • clean, well documented
  • consistent code and methodologies
  • simple workflow
  • environment agnostic code (UMD)
  • can be used as a scaffold and a module
  • ES6/ES2015 support via babel
  • Tape unit tests
  • Style guide (Airbnb) validation and test on commit
  • Handlebars, LoDash, LESS
  • Bootstrap, jQuery (available on component level)

###Setup

Install the package and use it as a module (documentation)

npm i g5-component

Or clone the package and use it as a scaffold (documentation)

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

npm i less catw jscs http-server -g

npm i && npm run build

###Server / Development

Server running on http://localhost:9966 with auto (split) builds [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

Bundle build, without vendor dependencies

npm run build-js

####Build Vendor

Vendor build

npm run build-js-vendor

####Build Full

Full build, including vendor and bundle

npm run build-js-full

####Test

npm test

####JSHint

npm run lint

###Options

A single options Object shared between all Constructors

  • Element container - primary container
  • String css - classes
  • String i18n - localization
  • Number interval - polling interval (ms)
  • String path - data path (remote/local)
  • Boolean enablePolling - flag to enable/disable data polling

###Methods

exampleComponent.init(); // initiates component
exampleComponent.hasInstance(); // checks if container has an instance of g5-component
exampleComponent.detachEvents(); // detaches all events
exampleComponent.attachEvents(); // attaches all events
exampleComponent.destroy(); // kills component instance

###Events

Events must be attached before the component is initiated

exampleComponent.on('ready', function(obj) {

    // console.log('component model and viewModel have been initiated', obj);

});

exampleComponent.on('data', function(data) {

    // console.log('component data from model', data);

});

exampleComponent.on('data-error', function(err) {

    // console.log('component model data error', err);

});

exampleComponent.on('destroy', function(obj) {

    // console.log('component instance killed', obj);

});

###Style Guide / Rules