feat(aot): update library code and compilation tool to be AoT compatible

- ts files are now compiled with `@angular/compiler-cli` (ngc) instead of tsc - `*.metadata.json` are now published along with `*.d.ts files` (Fixes MurhafSousli#17) - `index.ts` have been renamed into `share-buttons.module.ts` and moved to `src` folder - new `index.ts` importing the `share-buttons.module.ts` has been added to `src` folder - gulp tasks have been reorganized and useless plugin removed (merge2 sourcemaps,...)
Sathishchary · Jan 3, 2017 · c0fcdf5 · c0fcdf5
1 parent 41bdf94
commit c0fcdf5
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 161 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -10,24 +10,12 @@ var gutil = require('gulp-util');
 /** del to remove dist directory */
 const del = require('del');
 
-/** merge2 to execute tasks in parallel*/
-var merge = require('merge2');
-
 /** load templates and styles in ng2 components */
 var embedTemplates = require('gulp-inline-ng2-template');
 
-/** Typescript compiler */
-const typescript = require('gulp-typescript');
-
-/** Javascript Minifier */
-const uglify = require('gulp-uglify');
-
 /** TSLint checker */
 const tslint = require('gulp-tslint');
 
-/** Sourcemaps */
-const sourcemaps = require('gulp-sourcemaps');
-
 /** Sass style */
 const postcss = require('gulp-postcss');
 const sass = require('gulp-sass');
@@ -39,14 +27,19 @@ const stripInlineComments = require('postcss-strip-inline-comments');
 /** External command runner */
 const exec = require('child_process').exec;
 
+/**OS Access */
+const os = require('os');
+
 /** File Access */
 const fs = require('fs');
 const file = require('gulp-file');
+const path = require('path');
 
+/** To properly handle pipes on error */
+const pump = require('pump');
 
-const LIBRARY_NAME = 'ng2-sharebuttons';
 
-const tsProject = typescript.createProject('tsconfig.json');
+const LIBRARY_NAME = 'ng2-sharebuttons';
 
 const config = {
     allSass: 'src/**/*.scss',
@@ -55,79 +48,87 @@ const config = {
     OutputDir: 'dist/'
 };
 
-// clean dist directory
+//Helper functions
+function platformPath(path) {
+    return /^win/.test(os.platform()) ? `${path}.cmd` : path;
+}
+
+// Clean dist directory
 gulp.task('clean', function () {
     return del(config.OutputDir);
 });
 
-// TypeScript compile
-gulp.task('compile-ts', ['clean', 'styles'], function () {
-
+// Compile Sass to css
+gulp.task('styles', function (cb) {
     /**
-     * Embed templates and styles in ng2 components
-     * Write sourcemaps
-     * Compile ts
-     * Minifiy compiled js
+     * Remove comments, autoprefixer, Minifier
      */
-    var sourceTsFile = [
-        config.allTs,
-        config.allTsd
+    var processors = [
+        stripInlineComments,
+        autoprefixer,
+        cssnano
     ];
+    pump(
+        [
+            gulp.src(config.allSass),
+            sass().on('error', sass.logError),
+            postcss(processors, { syntax: scss }),
+            gulp.dest('src')
+        ],
+        cb);
+});
+
+// TsLint the source files
+gulp.task('ts-lint', function (cb) {
+    pump(
+        [
+            gulp.src(config.allTs),
+            tslint({ formatter: "verbose" }),
+            tslint.report()
+        ],
+        cb);
+});
 
+// Inline templates and styles in ng2 components
+gulp.task('inline-templates', ['clean', 'styles', 'ts-lint'], function (cb) {
     var defaults = {
-        base: '/src',  
-        target: 'es5', 
+        base: '/src',
+        target: 'es5',
         useRelativePaths: true
     };
-
-    var tsResult = gulp.src(sourceTsFile)
-        .pipe(embedTemplates(defaults))
-        .pipe(sourcemaps.init())
-        .pipe(typescript(tsProject));
-
-    tsResult.js.pipe(uglify())
-        .pipe(gulp.dest(config.OutputDir));
-
-    return merge([
-        tsResult.dts.pipe(gulp.dest(config.OutputDir)),
-        tsResult.js
-            .pipe(sourcemaps.write('.'))
-            .pipe(gulp.dest(config.OutputDir))
-        ]);
+    pump(
+        [
+            gulp.src(config.allTs),
+            embedTemplates(defaults),
+            gulp.dest('./dist/inlined')
+        ],
+        cb);
 
 });
 
-gulp.task('ts-lint', function () {
-    return gulp.src(config.allTs)
-        .pipe(tslint({
-            formatter: "verbose"
-        }))
-        .pipe(tslint.report())
+// Compile inlined TS files with Angular Compiler (ngc)
+gulp.task('ngc', ['inline-templates'], function (cb) {
+    var executable = path.join(__dirname, platformPath('/node_modules/.bin/ngc'));
+    exec(`${executable} -p ./tsconfig-aot.json`, (err) => {
+        if (err) return cb(err); // return error
+        del('./dist/waste');//delete useless *.ngfactory.ts files( will be regenerated by consumer)
+        del('./dist/inlined'); //delete temporary *.ts files with inlined templates and styles 
+        cb();
+    }).stdout.on('data', function (data) { console.log(data); });
 });
 
-/** Styles Task */
-gulp.task('styles', function () {
-    /**
-     * Remove comments, autoprefixer, Minifier
-     */
-    var processors = [
-        stripInlineComments,    
-        autoprefixer,
-        cssnano
-    ];
-    return gulp.src(config.allSass)
-        .pipe(sass().on('error', sass.logError))
-        .pipe(postcss(processors, {syntax: scss}))
-        .pipe(gulp.dest('src'));
-});
 
-gulp.task('watch', function() {
-    gulp.watch([config.allTs], ['ts-lint', 'compile-ts']);
-    gulp.watch([config.allSass, config.allHtml], ['styles']);
+
+// Clean, Lint, Sass to css, Inline templates & Styles and Compile 
+gulp.task('compile-ts', ['clean', 'ts-lint', 'styles', 'ngc',]);
+
+gulp.task('watch', function () {
+    gulp.watch([config.allTs], ['compile-ts']);
+    gulp.watch([config.allSass], ['styles']);
 });
 
-/** Npm Packaging Task */
-gulp.task('npm', function () {
+// Prepare 'dist' folder publication to NPM
+gulp.task('npm', ['compile-ts'], function (cb) {
     var pkgJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
     var targetPkgJson = {};
     var fieldsToCopy = ['version', 'description', 'keywords', 'author', 'repository', 'license', 'bugs', 'homepage'];
@@ -148,15 +149,17 @@ gulp.task('npm', function () {
     });
 
     // copy the needed additional files in the 'dist' folder
-    return gulp.src(['README.md', 'LICENSE', 'CHANGELOG.md'])
-        .pipe(file('package.json', JSON.stringify(targetPkgJson, null, 2)))
-        .pipe(gulp.dest('dist/'));
+    pump(
+        [
+            gulp.src(['README.md', 'LICENSE', 'CHANGELOG.md']),
+            file('package.json', JSON.stringify(targetPkgJson, null, 2)),
+            gulp.dest('dist/')
+        ],
+        cb);
 });
 
-gulp.task('compile', ['ts-lint', 'compile-ts']);
-
-/** Npm Publication Task */
-gulp.task('publish', [ 'compile', 'npm'], function (done) {
+// Publish 'dist' folder to NPM
+gulp.task('publish', ['npm'], function (done) {
     // run npm publish terminal command to publish the 'dist' folder only
     exec('npm publish ./dist',
         function (error, stdout, stderr) {
@@ -173,5 +176,7 @@ gulp.task('publish', [ 'compile', 'npm'], function (done) {
     );
 });
 
+// Just build the 'dist' folder (without publishing it to NPM)
+gulp.task('build', ['npm']);
 
-gulp.task('default', ['compile']);
+gulp.task('default', ['build']);
diff --git a/index.ts b/index.ts
diff --git a/package.json b/package.json
@@ -38,7 +38,9 @@
   },
   "devDependencies": {
     "@angular/compiler": "2.0.0",
+    "@angular/compiler-cli": "0.6.2",
     "@angular/platform-browser": "2.0.0",
+    "@angular/platform-server": "2.0.0",
     "@angular/router": "3.0.0",
     "angular2-template-loader": "^0.5.0",
     "autoprefixer": "^6.4.0",
@@ -50,17 +52,15 @@
     "gulp-inline-ng2-template": "^3.0.0",
     "gulp-postcss": "^6.1.1",
     "gulp-sass": "^2.3.2",
-    "gulp-sourcemaps": "^1.6.0",
     "gulp-tslint": "^6.1.1",
-    "gulp-typescript": "^2.13.6",
-    "gulp-uglify": "^2.0.0",
     "gulp-util": "^3.0.7",
-    "merge2": "^1.0.2",
     "postcss-scss": "^0.3.0",
     "postcss-strip-inline-comments": "^0.1.5",
+    "pump": "^1.0.2",
     "rxjs": "5.0.0-beta.12",
     "tslint": "^3.15.1",
+    "typescript": "~2.0.10",
     "typings": "^1.3.3",
     "zone.js": "0.6.21"
   }
-}
+}
diff --git a/src/components/share-button/share-button.component.ts b/src/components/share-button/share-button.component.ts
@@ -10,10 +10,12 @@ import {
     ChangeDetectionStrategy
 } from '@angular/core';
 
-import {ShareButton, ShareArgs} from "../../helpers/share-buttons.class";
-import {ShareButtonsService} from "../../service/share-buttons.service";
-import {WindowService} from "../../service/window.service";
-import {ShareProvider} from "../../helpers/share-provider.enum";
+import { ShareButton, ShareArgs } from "../../helpers/share-buttons.class";
+import { ShareButtonsService } from "../../service/share-buttons.service";
+import { WindowService } from "../../service/window.service";
+import { ShareProvider } from "../../helpers/share-provider.enum";
+
+declare var global: any; //To make AoT compiler (ngc) happy
 
 @Component({
     selector: 'share-button',
@@ -44,9 +46,9 @@ export class ShareButtonComponent implements AfterViewInit {
     private window: Window;
 
     constructor(private sbService: ShareButtonsService,
-                private renderer: Renderer,
-                private elementRef: ElementRef,
-                window: WindowService) {
+        private renderer: Renderer,
+        private elementRef: ElementRef,
+        window: WindowService) {
         this.window = window.nativeWindow;
     }
 
@@ -104,12 +106,12 @@ export class ShareButtonComponent implements AfterViewInit {
 
     nFormatter(num, digits) {
         var si = [
-            {value: 1E18, symbol: "E"},
-            {value: 1E15, symbol: "P"},
-            {value: 1E12, symbol: "T"},
-            {value: 1E9, symbol: "G"},
-            {value: 1E6, symbol: "M"},
-            {value: 1E3, symbol: "K"}
+            { value: 1E18, symbol: "E" },
+            { value: 1E15, symbol: "P" },
+            { value: 1E12, symbol: "T" },
+            { value: 1E9, symbol: "G" },
+            { value: 1E6, symbol: "M" },
+            { value: 1E3, symbol: "K" }
         ], rx = /\.0+$|(\.[0-9]*[1-9])0+$/, i;
         for (i = 0; i < si.length; i++) {
             if (num >= si[i].value) {

diff --git a/src/components/share-buttons/share-buttons.component.css b/src/components/share-buttons/share-buttons.component.css
diff --git a/src/index.ts b/src/index.ts
@@ -1,45 +1 @@
-import {NgModule} from '@angular/core';
-import {JsonpModule} from '@angular/http';
-import {CommonModule} from '@angular/common';
-import {ShareButtonsComponent} from './components/share-buttons/share-buttons.component';
-import {ShareButtonComponent} from './components/share-button/share-button.component';
-import {ShareButtonsService} from "./service/share-buttons.service";
-import {WindowService} from "./service/window.service";
-import {NFormatterPipe} from './helpers/n-formatter.pipe';
-
-import {ShareProvider} from './helpers/share-provider.enum';
-import {ShareButton, ShareArgs} from './helpers/share-buttons.class';
-
-@NgModule({
-    declarations: [
-        ShareButtonsComponent,
-        ShareButtonComponent,
-        NFormatterPipe
-    ],
-    imports: [
-        CommonModule,
-        JsonpModule
-    ],
-    providers: [
-        ShareButtonsService,
-        WindowService
-    ],
-    exports: [
-        ShareButtonsComponent,
-        ShareButtonComponent,
-        NFormatterPipe
-    ]
-})
-export class ShareButtonsModule {
-
-}
-
-export {
-    ShareButtonsComponent,
-    ShareButtonComponent,
-    ShareProvider,
-    ShareButton,
-    NFormatterPipe,
-    ShareButtonsService,
-    ShareArgs
-}
+export * from './share-buttons.module';