Babel-skeleton NPM

💀 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

import { RouterComponent } from "babel-skeleton";

RouterComponent
  .add('/foo', 'foo', FooComponent)
  .add('/bar/:id', 'bar', BarComponent)
  .run(new AppComponent)

By default the first component will be rendered, rewrited URL is allowed and matching component will be routed

index.html

<html>
<head></head>
<body>
  <!-- Entry point component -->
  <app></app>
    <script src="./dist/index.js"></script>
</body>
</html>

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 -->
<router></router>

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

import { Component } from  'babel-skeleton';
import { template } from  './foo.component.html';

export class FooComponent extends Component {

  constructor() {
    super({ 
        selector: "foo", 
        template: template 
    });
    this.counter = 0;
  }

  increment() {
    return counter++;
  }

}

Template use ES6 strings with access to attributes and methods

foo.component.html

<!-- Interpollate "counter" attribute -->
<h1>${counter}</h1>

<!-- Trigger "increment" method -->
<button onclick="increment()">Click</button>

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

import { Component } from  'babel-skeleton';
import { template } from  './bar.component.html';
import { BazComponent } from  './baz/baz.component.html';
import { QuxComponent } from  './qux/qux.component.html';

export class BarComponent extends Component {

  constructor() {
    super({ 
        selector: "bar", 
        template: template,
        components: [
          new BazComponent,
          new QuxComponent,
        ]
    });
  }

}

Child component selector have to be found in the template

bar.component.html

<baz></baz>
<qux></qux>

Lifecycle hooks are triggered by the router

baz.component.js

import { Component } from  'babel-skeleton';
import { template } from  './baz.component.html';

export class BazComponent extends Component {

    constructor() {
        super({
            selector: "baz", 
            template: template 
        });
    }

    /**
     * Called after the component is attached
     */
    onInit() { }

    /**
     * Called after the component is displayed
     * 
     * @param {HTMLElement} element Updated element
     */
    onUpdate(element) { }

    /**
     * Called after the component is detached
     */
    onDestroy() { }

    /**
     * Called after the user trigger the back button
     * You can cancel the back navigation by returning false
     * 
     * @returns {Boolean}
     */
    onBack() { }

    /**
     * Called after the user trigger the pause button
     */
    onPause() { }

    /**
     * Called after the user trigger the resume button
     */
    onResume() { }

}

📑 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

import { Service } from  'babel-skeleton';

export const BazService = new  class  extends  Service {

  constructor() {
    super();
    this.data = [];
  }

  post(data){
    this.data.push(data);
    this.notify();
  }

}

Attach or detach callables to trigger when notify is called

baz.component.js

import { Component } from  'babel-skeleton';
import { template } from  './baz.component.html';
import { BazService } from  './baz.service';

export class BazComponent extends Component {

    constructor() {
        super({ selector: "baz", template: template });
        this.observer = (service) => {
          alert(`BazService has ${service.data.length} items`)
        }
    }

    onInit() { 
      BazService.attach(this.observer);
    }

    onDestroy() { 
      BazService.detach(this.observer);
    }

}