refactor(preboot): moving preboot to its own isolated module

.gitignore

@@ -0,0 +1,44 @@
+# Logs
+logs
+*.log
+.idea
+.vscode
+.DS_Store
+**/.DS_Store
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+/lib-cov
+
+# Coverage directory used by tools like istanbul
+/coverage
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# used for karma unit test coverage
+test/coverage
+
+# Users Environment Variables
+.lock-wscript
+
+# Server
+/dist/
+
+# Static files
+
+/bower_components/
+/web_modules/
+
+# Typings
+/typings/browser
+/typings/main
+/typings/browser.d.ts
+/typings/main.d.ts
+/tsd_typings

buildtasks/clean_task.js

@@ -0,0 +1,12 @@
+var gulp = require('gulp');
+var del = require('del');
+
+module.exports = function (opts) {
+  gulp.task('clean', function() {
+    return del('dist', function (err, paths) {
+      return paths.length <= 0 ?
+        console.log('Nothing to clean.') :
+        console.log('Deleted folders:\n', paths.join('\n'));
+    });
+  });
+};

buildtasks/example_task.js

@@ -0,0 +1,69 @@
+var gulp = require('gulp');
+var size = require('gulp-size');
+
+module.exports = function (opts) {
+
+  // build version of preboot to be used in a simple example
+  gulp.task('example.build', [ 'tsc' ], function() {
+    var exec = require('child_process').exec;
+    var distExampleDir = 'dist/example';
+
+    // need to clear out preboot in require cache for when we are watching  
+    for (var key in require.cache) {
+      if (key.indexOf(opts.distDir) >= 0) {
+        delete require.cache[key];
+      }
+    }
+
+    // now pull in the latest preboot code
+    var preboot = require(opts.prebootNode);
+
+    // copy static files to dist
+    exec('mkdir -p ./dist');
+    exec('mkdir -p ./' + distExampleDir);
+    exec('cp -fR example/. ' + distExampleDir);
+
+    return preboot.getBrowserCodeStream({
+      appRoot:  'app',         // selector for root element
+      freeze:   'spinner',     // show spinner w button click & freeze page
+      replay:   'rerender',    // rerender replay strategy
+      buffer:   true,          // client app will write to hidden div until bootstrap complete
+      debug:    true,
+      uglify:   false,
+      presets:  [ 'keyPress', 'buttonPress', 'focus' ]
+    }).
+      pipe(size()).
+      pipe(gulp.dest(distExampleDir));
+  });
+
+  gulp.task('example', [ 'example.build' ], function() {
+    var express = require('express');
+    var livereload = require('connect-livereload');
+    var reloader = require('gulp-livereload');
+    var serveStatic = require('serve-static');
+    var exec = require('child_process').exec;
+    var open = require('open');
+    var server = express();
+    var LIVERELOAD_PORT = 35729;
+    var PORT = 3000;
+
+    server.use(livereload({
+      port: LIVERELOAD_PORT
+    }));
+
+    server.use(serveStatic('dist/example'));
+
+    server.listen(PORT);
+    reloader.listen({
+      port: LIVERELOAD_PORT,
+      reloadPage: '/preboot_example.html'
+    });
+    open('http://localhost:3000/preboot_example.html');
+
+    exec('tsc -w');
+    gulp.watch(opts.tsFiles, [ 'example.build' ]);
+    gulp.watch('dist/example/preboot.js', function () {
+      reloader.reload();
+    });
+  });
+};

buildtasks/lint_task.js

@@ -0,0 +1,15 @@
+var gulp = require('gulp');
+var tslint = require('gulp-tslint');
+var path = require('path');
+
+module.exports = function (opts) {
+  gulp.task('lint', function () {
+    var tslintConfig = require(path.join(opts.rootDir, 'tslint.json'));
+
+    return gulp.src(opts.tsFiles).
+      pipe(tslint({
+        configuration: tslintConfig
+      })).
+      pipe(tslint.report('verbose'));
+  });
+};

buildtasks/test_task.js

@@ -0,0 +1,68 @@
+var gulp = require('gulp');
+var jasmine = require('gulp-jasmine');
+var browserify = require('browserify');
+var path = require('path');
+var vinylSourceStream = require('vinyl-source-stream');
+var karma = require('karma');
+
+module.exports = function (opts) {
+
+  gulp.task('test', [
+    'jasmine',
+    'karma'
+  ]);
+
+  gulp.task('jasmine', [ 'tsc' ], function () {
+    return gulp.src(opts.testFiles).
+      pipe(jasmine({
+        verbose: true,
+        includeStackTrace: true
+      }));
+  });
+
+  // build version of preboot to be used for karma testing
+  gulp.task('karma.build', [ 'tsc' ], function () {
+    var karmaEntryPoint = path.join(opts.distDir, 'test/preboot_karma');
+    var browserRoot = path.join(opts.distDir, 'src/browser');
+    var karmaDest = path.join(opts.distDir, 'karma');
+
+    var b = browserify({
+      entries: [karmaEntryPoint],
+      basedir: browserRoot,
+      browserField: false
+    });
+
+    return b.bundle().
+      pipe(vinylSourceStream('preboot_karma.js')).
+      pipe(gulp.dest(karmaDest));
+  });
+
+  gulp.task('karma', ['karma.build'], function (done) {
+    var karmaCode = path.join(opts.distDir, 'karma/preboot_karma.js');
+    var karmaConfig = {
+      port: 9201,
+      runnerPort: 9301,
+      captureTimeout: 20000,
+      growl: true,
+      colors: true,
+      browsers: [
+        'PhantomJS'
+      ],
+      reporters: [
+        'progress'
+      ],
+      plugins: [
+        'karma-jasmine',
+        'karma-phantomjs-launcher',
+        'karma-chrome-launcher'
+      ],
+      frameworks: ['jasmine'],
+      singleRun: true,
+      autoWatch: false,
+      files: [karmaCode]
+    };
+
+    var server = new karma.Server(karmaConfig, done);
+    return server.start();
+  });
+};

buildtasks/tsc_task.js

@@ -0,0 +1,16 @@
+var gulp = require('gulp');
+var size = require('gulp-size');
+var typescript = require('gulp-typescript');
+var path = require('path');
+
+module.exports = function (opts) {
+  gulp.task('tsc', [ 'clean' ], function () {
+    var tsConfig = path.join(opts.rootDir, 'tsconfig.json');
+    var tsProject = typescript.createProject(tsConfig);
+
+    return tsProject.src().
+      pipe(typescript(tsProject)).
+      pipe(size()).
+      pipe(gulp.dest(tsProject.config.compilerOptions.outDir));
+  });
+};

buildtasks/watch_task.js

@@ -0,0 +1,8 @@
+var gulp = require('gulp');
+
+module.exports = function (opts) {
+  gulp.task('watch', function(){
+    gulp.watch(opts.tsFiles, ['tsc']);
+    gulp.watch(opts.testFiles, ['jasmine']);
+  });
+};

example/preboot.css

@@ -0,0 +1,69 @@
+/**
+ *
+ * This is a same CSS file for overlay and spinner. This can/should
+ * be overriden/customized to suit your needs
+ */
+
+.preboot-overlay {
+    background: grey;
+    opacity: .27;
+}
+
+@keyframes spin {
+    to { transform: rotate(1turn); }
+}
+
+.preboot-spinner {
+    position: relative;
+    display: inline-block;
+    width: 5em;
+    height: 5em;
+    margin: 0 .5em;
+    font-size: 12px;
+    text-indent: 999em;
+    overflow: hidden;
+    animation: spin 1s infinite steps(8);
+}
+
+.preboot-spinner.small {
+    font-size: 6px;
+}
+
+.preboot-spinner.large {
+    font-size: 24px;
+}
+
+.preboot-spinner:before,
+.preboot-spinner:after,
+.preboot-spinner > div:before,
+.preboot-spinner > div:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 2.25em; /* (container width - part width)/2  */
+    width: .5em;
+    height: 1.5em;
+    border-radius: .2em;
+    background: #eee;
+    box-shadow: 0 3.5em #eee; /* container height - part height */
+    transform-origin: 50% 2.5em; /* container height / 2 */
+}
+
+.preboot-spinner:before {
+    background: #555;
+}
+
+.preboot-spinner:after {
+    transform: rotate(-45deg);
+    background: #777;
+}
+
+.preboot-spinner > div:before {
+    transform: rotate(-90deg);
+    background: #999;
+}
+
+.preboot-spinner > div:after {
+    transform: rotate(-135deg);
+    background: #bbb;
+}

example/preboot_example.html

@@ -0,0 +1,72 @@
+<html>
+
+  <head>
+    <link rel="stylesheet" href="preboot.css">
+    <style>
+      .frmelem {
+        height: 50px; width: 50%; font-size: 24px; padding: 0 20px; margin: 20px 25%;
+      }  
+      .frmbtn {
+        height: 50px; width: 50%; font-size: 24px; margin: 20px 25%; text-align: center; z-index: 99999999999;
+      }
+    </style>
+    <script src="preboot.js"></script>
+  </head>
+
+  <body>
+    <app>
+      <input class="frmelem" (keyup.enter)="enterEntered()" name="one">
+      <input  class="frmelem" type="checkbox" name="blahCheck" value="foo">
+      <input class="frmelem" type="radio" name="choo" value="val1">
+      <input class="frmelem" type="radio" name="choo" value="val2">
+      <select class="frmelem"><option>op1</option><option>op2</option></select>
+      <button  class="frmelem" preboot-events="click">Server View</button>
+    </app>
+    <div class="client" style="display: none">
+      <input  class="frmelem" type="text" (keyup.enter)="enterEntered()" name="one">
+      <input  class="frmelem" type="checkbox" name="blahCheck" value="foo">
+      <input class="frmelem" type="radio" name="choo" value="val1">
+      <input class="frmelem" type="radio" name="choo" value="val2">
+      <select class="frmelem"><option>op1</option><option>op2</option></select>
+      <button  class="frmelem" onclick="clientClick()">Client View</button>
+    </div>
+    <button class="frmbtn" onclick="fireBootstrapComplete()">
+      Fire Bootstrap complete yo
+    </button>
+    <script>
+      preboot.start();
+
+        // fire bootstrap complete manually
+        function fireBootstrapComplete() {
+            preboot.complete();
+        }
+
+        // this is our "client app"
+        setTimeout(function () {
+            var clientTemplate = document.querySelector('div.client');
+            var clientRoot = document.querySelector('app');
+
+            var tempNode;
+            for (var i = 0; i < clientTemplate.childNodes.length; i++) {
+                tempNode = clientTemplate.childNodes[i].cloneNode(true);
+                clientRoot.appendChild(tempNode);
+            }
+
+            setTimeout(function () {
+                fireBootstrapComplete();
+            }, 1000);
+        }, 3000);
+
+        // see that client was clicked
+        function clientClick() {
+            console.log('client clicked');
+        }
+
+        // see that client was clicked
+        function enterEntered() {
+            console.log('enter entered');
+        }
+    </script>
+  </body>
+
+</html>