babel-skeleton
Advanced tools
Babel skeleton is a JavaScript library for structure web applications
Table of content:
npm install babel-skeleton
Create a project
./node_modules/.bin/skeleton new my-project
cd my-project
Run on web browser
npm run start
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)
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
The skeleton provide Component for render template, Service for share data with notification and RouterComponent for navigation and lifecycle
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 |
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
➕ 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 |
Generate a component
npm run skeleton generate component foo
Following files have been generated in app/foo:
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() { }
}
➕ Update the Component template
| update() |
|---|
Return |
| {Component} Component instance |
Throw |
| {ReferenceError} Component selector not found |
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);
}
}
➕ 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 |
FAQs
Babel skeleton is a JavaScript library for structure web applications
We found that babel-skeleton demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.