💀 babel skeleton
Babel skeleton is a JavaScript library for structure web applications
Table of content:
- Installation
- Usage: Generate Project
- Scripts
- Development: Generate Component and Service
📦 Installation
npm install babel-skeleton
🕹️ Usage
Create a project
./node_modules/.bin/skeleton new my-project
cd my-project
💻 Web browser
Run on web browser
npm run start
📱 Mobile
Install android
npm run android:install
Run on device
npm run android:build
Gradle must be installed, device must be detected and SDK build tools must be installed and licenses must be accepted (ANDROID_HOME/tools/bin/sdkmanager --licenses)
📜 Scripts
The created project contain following scripts:
Script | Feature |
---|---|
npm run start | Start to dev |
npm run skeleton | Run babel-skeleton for generate component or service |
npm run dev | Build entry points and watch |
npm run prod | Optimise dev |
npm run build | Build |
npm run cordova | Run cordova |
npm run res | Run cordova-res for generate icon and splashscreen |
npm run android | Deploy on device |
npm run android:build | Build and deploy |
npm run android:install | Install android |
npm test | Pass tests |
npm run test:coverage | Generate report |
npm run test:coveralls | Send report to coveralls |
Travis configuration is setup for pass tests and push report to Coveralls after a build success
👨💻 Development
The skeleton provide Component
for render template, Service
for share data with notification and RouterComponent
for navigation and lifecycle
📜 Scripts
The skeleton contain following scripts:
Script | Feature |
---|---|
npm run skeleton new [name] | Generate a project |
npm run skeleton generate component [name] | Generate a component |
npm run skeleton generate service [name] | Generate a service |
🚦 Routing
Associate a Component to an URL
using the RouterComponent
RouterComponent provide lifecycle hook for routed components
index.js
; RouterComponent
By default the first component will be rendered, rewrited URL is allowed and matching component will be routed
index.html
<!-- Entry point component -->
You can run the component you want but his selector have to be found in the index.html
app.component.html
Hello app<!-- Router component -->
Routed component will be rendered by the RouterComponent, his tag must exists in the entry point template
📑 RouterComponent
➕ Add a route
add(path , name , component ) |
---|
Param |
{String} path Route path |
{String} name Route name |
{Component} component Component class or instance |
Return |
{RouterComponent} Router instance |
Throw |
{ReferenceError} Path or name exists |
➕ Run the entry point
run(component ) |
---|
Param |
{Component} component Component instance |
Return |
{RouterComponent} Router instance |
➕ Navigate to a Route
navigate(name , param = null) |
---|
Param |
{String} name Route name |
{Object} param Route param |
Throw |
{ReferenceError} Route not found |
➕ Retrieve the current Route or a Route parameter value
get(paramName = null) |
---|
Param |
{String} paramName Route param name |
Return |
{Mixed} Active Route or param name value |
Throw |
{ReferenceError} Route parameter name not found |
🍰 Components
Generate a component
npm run skeleton generate component foo
Following files have been generated in app/foo:
- foo.component.js
- foo.component.html
- foo.component.scss
Component
have at least a selector and a template
foo.component.js
;; { super selector: "foo" template: template ; thiscounter = 0; } { return counter++; }
Template
use ES6 strings with access to attributes and methods
foo.component.html
<!-- Interpollate "counter" attribute -->${counter} <!-- Trigger "increment" method -->Click
Component is updated if an event handler return a value
SCSS
file is generated and free to you to import it
foo.component.scss
foo
Child Component
can be embeed
bar.component.js
;;;; { super selector: "bar" template: template components: ; }
Child component selector have to be found in the template
bar.component.html
Lifecycle hooks
are triggered by the router
baz.component.js
;; { super selector: "baz" template: template ; } /** * Called after the component is attached */ { } /** * Called after the component is displayed * * @param */ { } /** * Called after the component is detached */ { } /** * Called after the user trigger the back button * You can cancel the back navigation by returning false * * @returns */ { } /** * Called after the user trigger the pause button */ { } /** * Called after the user trigger the resume button */ { }
📑 Component
➕ Update the Component template
update() |
---|
Return |
{Component} Component instance |
Throw |
{ReferenceError} Component selector not found |
💫 Services
Generate a service
npm run skeleton generate service baz
File baz.service.js have been generated in app/baz:
Service
share data and can notify for changes
baz.service.js
; const BazService = extends Service { super; thisdata = ; } { thisdata; this; }
Attach
or detach
callables to trigger when notify
is called
baz.component.js
;;; { super selector: "baz" template: template ; this { } } { BazService; } { BazService; }
📑 Service
➕ Attach a callable triggered when notify is called
attach(callable ) |
---|
Param |
{Function} callable Function to attach |
Return |
{Service} Service instance |
➕ Detach a callable
detach(callable ) |
---|
Param |
{Function} callable Function to attach |
Return |
{Service} Service instance |
➕ Call all attached callables
notify() |
---|
Return |
{Service} Service instance |