Ngc build (#8)

* ngc building

.gitignore

@@ -44,3 +44,5 @@ dist
 
 # Editor
 .vscode
+
+/staging

gulpfile.js

@@ -7,22 +7,76 @@ const tsc = require('gulp-typescript');
 const karma = require('karma');
 const gulpClean = require('gulp-clean');
 const path = require('path');
-const webpack = require('webpack');
+const exec = require('child_process').exec;
 
 let isTestRun = false;
+/**
+ * Copy the tsconfig to the staging folder
+ */
+gulp.task(':build:copy', () => {
+    return gulp
+        .src('./tsconfig.json')
+        .pipe(gulp.dest('./staging'));
+});
 
 /**
- * Inline the templates and styles, and the compile to javascript.
+ * Inline styles and templates and output the result into staging
  */
-gulp.task(':build:app', () => {
-  const tsProject = tsc.createProject('tsconfig.json', {
-    module: isTestRun ? 'commonjs' : 'es2015',
-  });
+gulp.task(':build:inline', () => {
+    return gulp.src(['./src/**/*.ts', '!./src/**/*.spec.ts'])
+        .pipe(gulp.dest('./staging/src'))
+})
 
-  gulp.src(['./src/**/*.ts'])
-    .pipe(tsProject())
-    .pipe(gulp.dest('./dist'));
-});
+/**
+ * Compile typescrypt using ngc.
+ */
+gulp.task(':build:ngc', (cb) => {
+    exec('npm run ngc', function (err, stdout, stderr) {
+        if (err && err.message.includes('npm ERR!')) {
+            console.log(stdout);
+            cb(new Error(err.message.substring(0, err.message.indexOf('npm ERR!')).trim()));
+            return;
+        }
+        cb(err);
+    });
+})
+
+/**
+ * Remove the staging folder
+ */
+gulp.task(':build:clean',  () => gulp.src('staging', { read: false }).pipe(gulpClean(null)));
+
+/**
+ * Copy compiled code into the dist folder, excluding the typescript source.
+ */
+gulp.task(':build:copyFinal', () => {
+    return gulp
+        .src(['./staging/src/**/*', '!./staging/src/**/*.ts'])
+        .pipe(gulp.dest('./dist'));
+})
+
+/**
+ * Copy the typedefs to dist, this was missing in :build:copyFinal.
+ */
+gulp.task(':build:typeDefs', () => {
+    return gulp
+        .src(['./staging/src/**/*.d.ts'])
+        .pipe(gulp.dest('./dist'));
+})
+
+/**
+ * Inline and then compile the lib.
+ */
+gulp.task(':build:app', (cb) => gulpRunSequence(
+    ':build:inline',
+    ':build:copy',
+    ':build:ngc',
+    [
+        ':build:copyFinal',
+        ':build:typeDefs',
+    ],
+    cb
+));
 
 /**
  * Cleans the build folder
@@ -33,74 +87,77 @@ gulp.task('clean',  () => gulp.src('dist', { read: false }).pipe(gulpClean(null)
  * Builds the main framework to the build folder
  */
 gulp.task('build', (cb) => gulpRunSequence(
-  'clean',
-  [
-    ':build:app',
-  ],
-  cb
+    [
+        'clean',
+        ':build:clean',
+    ],
+    [
+        ':build:app',
+    ],
+    ':build:clean',
+    cb
 ));
 
+/**
+ * Inline the templates and styles, and the compile to javascript.
+ */
+gulp.task(':test:build', () => {
+    const tsProject = tsc.createProject('tsconfig.json', {
+        module: 'commonjs',
+    });
+
+    const src = ['./src/**/*.ts'];
+
+    return gulp.src(src)
+        .pipe(tsProject())
+        .pipe(gulp.dest('./dist'));
+});
+
 /**
  * Bundles vendor files for test access
  */
 gulp.task(':test:vendor', function () {
-  const npmVendorFiles = [
-    '@angular', 'core-js/client', 'rxjs', 'systemjs/dist', 'zone.js/dist'
-  ];
+    const npmVendorFiles = [
+        '@angular', 'core-js/client', 'rxjs', 'systemjs/dist', 'zone.js/dist'
+    ];
 
-  return gulpMerge(npmVendorFiles.map(function (root) {
-    const glob = path.join(root, '**/*.+(js|js.map)');
-
-    return gulp.src(path.join('node_modules', glob))
-      .pipe(gulp.dest(path.join('dist/vendor', root)));
-  }));
+    return gulpMerge(
+        npmVendorFiles.map(root =>
+            gulp.src(path.join('node_modules', path.join(root, '**/*.+(js|js.map)')))
+            .pipe(gulp.dest(path.join('dist/vendor', root)))
+    ));
 });
 
 /**
  * Bundles systemjs files
  */
 gulp.task(':test:system', () => {
-  gulp.src('test/bin/**.*')
-    .pipe(tsc())
-    .pipe(gulp.dest('dist/bin'));
+    gulp.src('test/bin/**.*')
+        .pipe(tsc())
+        .pipe(gulp.dest('dist/bin'));
 });
 
 /**
  * Pre-test setup task
  */
 gulp.task(':test:deps', (cb) => {
-  isTestRun = true;
-  gulpRunSequence(
-    'clean',
-    [
-        ':test:system',
-        ':test:vendor',
-        ':build:app',
-    ],
-    cb
-  );
+    isTestRun = true;
+    gulpRunSequence(
+        'clean',
+        [
+            ':test:system',
+            ':test:vendor',
+            ':test:build',
+        ],
+        cb
+    );
 });
 
 /**
  * Karma unit-testing
  */
 gulp.task('test', [':test:deps'], (done) => {
-  new karma.Server({
-    configFile: path.join(process.cwd(), 'test/karma.confloader.js')
-  }, done).start();
+    new karma.Server({
+        configFile: path.join(process.cwd(), 'test/karma.confloader.js')
+    }, done).start();
 });
-
-gulp.task(':demo:clean', () => gulp.src('demo/dist', { read: false }).pipe(gulpClean(null)));
-
-gulp.task(':demo:build:ts', (cb) => {
-  webpack(require('./demo/webpack.config.js'), cb);
-});
-
-gulp.task('demo', (cb) => gulpRunSequence(
-  ':demo:clean',
-  [
-    ':demo:build:ts',
-  ],
-  cb
-));
-

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "gulp": "gulp",
     "build": "gulp build",
+    "ngc": "cd staging && ngc",
     "prepublish": "npm run build",
     "clean": "rimraf node_modules doc dist && npm cache clean",
     "test:lint": "tslint --project tsconfig.json \"src/**/*.ts\"",
@@ -20,14 +21,15 @@
     "url": "git://github.com/WatchBeam/arcade-machine.git"
   },
   "dependencies": {
-    "@angular/core": "^2.2.3",
+    "@angular/core": "2.2.3",
     "rxjs": "5.0.0-beta.12"
   },
   "devDependencies": {
-    "@angular/common": "^2.2.3",
-    "@angular/compiler": "^2.2.3",
-    "@angular/platform-browser": "^2.2.3",
-    "@angular/platform-browser-dynamic": "^2.2.3",
+    "@angular/common": "2.2.3",
+    "@angular/compiler": "2.2.3",
+    "@angular/compiler-cli": "^2.2.3",
+    "@angular/platform-browser": "2.2.3",
+    "@angular/platform-browser-dynamic": "2.2.3",
     "@types/core-js": "^0.9.34",
     "@types/jasmine": "^2.5.35",
     "@types/node": "^6.0.45",
@@ -53,6 +55,7 @@
     "karma-sauce-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "merge2": "^1.0.2",
+    "ngc": "^1.0.0",
     "npm-run-all": "^3.1.1",
     "rimraf": "^2.5.1",
     "run-sequence": "^1.2.2",

src/focus.service.ts

@@ -216,8 +216,8 @@ function isDirectional(ev: Direction) {
 /**
  * Linearly interpolates between two numbers.
  */
-function lerp(from: number, to: number, progress: number): number {
-  return from + (to - from) * progress;
+function lerp(start: number, end: number, progress: number): number {
+  return start + (end - start) * progress;
 }
 
 /**
@@ -389,7 +389,7 @@ export class FocusService {
 
     // Animation function to transition a scroll on the `parent` from the
     // `original` value to the `target` value by calling `set.
-    const animate = (parent: HTMLElement, target: number, original: number, set: (x: number) => void) => {
+    const animate = (parent: HTMLElement, target: number, original: number, setter: (x: number) => void) => {
       if (scrollSpeed === Infinity) {
         parent.scrollTop = target;
         return;
@@ -399,7 +399,7 @@ export class FocusService {
       const duration = Math.abs(target - original) / scrollSpeed * 1000;
       const run = (now: number) => {
         const progress = Math.min((now - start) / duration, 1);
-        set(lerp(original, target, progress));
+        setter(lerp(original, target, progress));
 
         if (progress < 1) {
           requestAnimationFrame(run);
@@ -412,7 +412,10 @@ export class FocusService {
     // The scroll calculation loop. Starts at the element and goes up, ensuring
     // that the element (or the box where the element will be after scrolling
     // is applied) is visible in all containers.
-    let { top, left, width, height } = el.getBoundingClientRect();
+    const rect = el.getBoundingClientRect();
+    const { width, height } = rect;
+    let { top, left } = rect;
+
     for (let parent = el.parentElement; parent !== null; parent = parent.parentElement) {
 
       // Special case: treat the body as the viewport as far as scrolling goes.

tsconfig.json

@@ -30,5 +30,10 @@
     },
     "exclude": [
         "node_modules"
-    ]
+    ],
+    "angularCompilerOptions": {
+        "genDir": "compiled",
+        "skipMetadataEmit": false,
+        "strictMetadataEmit": true
+    }
 }