angular2less v0.3.2

Angular2 Less

Provides conventional component loader which automatically configures metadata of Angular2 Components, Directives and Pipes.

Purpose

This library was created in order to increase components portability between Ionic and Angular2 applications (i.e., mobile and web), to keep things simple and reusable. "angular2less" means less angular2 code inside your project codebase. What does this mean? It means that you won't write @Pipe, @Directive, @Component but instead will follow the convention. So, for example in webpack environment:

Code written in raw Angular2

import {Component} from 'angular2/core';
import template from './geo-location.html';
import './geo-location.scss';

@Component({
  selector: 'geo-location',
  template: template,
  exportAs: 'geoLocation'
})
export class GeoLocation {
  src = '';

  constructor() {
    this.canShow = 'geolocation' in global.navigator;
    this.provider = global.navigator.geolocation;
  }

  locatePosition() {
    // ....
  }
}

Same code written with Angular2less

export class GeoLocation {
  src = '';

  constructor() {
    this.canShow = 'geolocation' in global.navigator;
    this.provider = global.navigator.geolocation;
  }

  locatePosition() {
    // ....
  }
}

And template:

<require from="./geo-location.scss"></require>

<div class="fa fa fa-spinner fa-spin" *ngIf="isLoading"></div>
<img [src]="src" *ngIf="src && !isLoading" />

Now presence of framework is hidden from the client code and that means it's easier to reuse and test this code. Less dependencies more freedom.

Installation

Install dependency

npm install angular2less

Pass the path to app's root component and add provider in the bootstrap:

import 'rxjs/Rx';
import {bootstrap} from 'angular2/platform/browser';
import {loadComponentProvider} from 'angular2less';

bootstrap('./app', [ loadComponentProvider ]);

The provided loadComponentProvider replaces default component loader with custom one which configures components and pipes for you.

Default Convention

First of all, a module may contain only one component or directive and/or several pipes.

1. @Component decorator is invoked for the first found class in the module. So,

• selector is set to dasherized class name (e.g., TasksApp has tasks-app selector)
• exportAs is set to class name with lowercased first letter
• providers should be set manually
• template is set to html of the content of file with the same filename + .html suffix (e.g., ./app component will require ./app.html)

2. @Directive decorator is invoked for the class which name ends with CustomElement

• selector is set to attribute selector with dasherized class name (e.g., RouteHrefCustomAttribute has [route-href] selector)
• exportAs is set to class name with lowercased first letter
• providers should be set manually

3. @Pipe decorator is invoked for all classes which name ends with Pipe

• name is set to class name with lowercased first letter (e.g., UppercasePipe has uppercase name)

4. @RouteConfig decorator imported from angular2less allows to specify componentId (i.e., component's path) instead of component class. That's allow to decrease amount of imports.

Angular2less also can fulfill required entries missed in specified metadata information. However if you specify template or templateUrl it won't be able to parse dependencies (i.e., <require from="..."> statements) inside that template.

Loader

Default loader depends on configuration webpack. Also it's recommended to use it in conjuction with AureliaWebpackPlugin. However it's also possible to use standard ContextReplacementPlugin for cases when you don't want to include libraries using <require from=...></require> constructions.

It's possible to change the default loader

import {setModuleLoader} from 'angular2less';

setModuleLoader(function(modulePath) {
  //...
});

Loader is just a function which takes module path as single parameter and returns promise.

Configuration of AureliaWebpackPlugin

let AureliaWebpackPlugin = require('aurelia-webpack-plugin');
let plugin = new AureliaWebpackPlugin({
  resourceRegExp: /^angular2-loader-context/,
  contextMap: {
    'angular2/router': require.resolve('angular2/router'),
    'angular2/core': require.resolve('angular2/core')
  }
});

webpackConfig.plugins.push(plugin);

Configuration of ContextReplacementPlugin

webpackConfig.plugins.push(
  new webpack.ContextReplacementPlugin(/angular2-loader-context/, path.resolve('./src'))
);

Test

npm install && npm run build && npm test

License

Released under the MIT License