fix(preboot): make user body exists (#328) and ensure replay when listen by attributes (#333)

Author: jeffwhelpley

.gitignore

@@ -42,3 +42,4 @@ test/coverage
 /typings/browser.d.ts
 /typings/main.d.ts
 /tsd_typings
+/docs

README.md

@@ -51,30 +51,9 @@ Finally, once your client-side web app is "alive" it has to tell preboot that it
 to replay events.
 
 ```es6
-preboot.done();
+preboot.complete();
 ```
 
-## Examples
-
-Server-side integrations:
-
-* [Express](docs/examples.md#express)
-* [Hapi](docs/examples.md#hapi)
-* [Gulp](docs/examples.md#gulp)
-
-Client-side integrations:
-
-* [Angular 1.x](docs/examples.md#angular-1)
-* [Angular 2](docs/examples.md#angular-2)
-* [React](docs/examples.md#react)
-* [Ember](docs/examples.md#ember)
-
-Custom strategies:
-
-* [Listening for events](docs/examples.md#listen-strategy)
-* [Replaying events](docs/examples.md#replay-strategy)
-* [Freezing screen](docs/examples.md#freeze-strategy)
-
 ## Options
 
 There are 5 different types of options that can be passed into preboot:
@@ -115,21 +94,3 @@ These are the names of global events that can affect the preboot workflow:
 
 * `uglify` - You can always uglify the output of the client code stream yourself, but if you set this
 option to true preboot will do it for you.
-
-## Play
-
-If you want to play with this library you can clone it locally:
-
-```sh
-git clone git@github.com:jeffwhelpley/preboot.git
-cd preboot
-gulp build
-gulp play
-```
-
-Open your browser to http://localhost:3000. Make modifications to the options in build/task.build.js
-to see how preboot can be changed.
-
-## Contributors
-
-We would welcome any and all contributions. Please see the [Contributors Guide](docs/contributors.md).

buildtasks/docs_task.js

@@ -0,0 +1,22 @@
+var gulp = require('gulp');
+var typedoc = require('gulp-typedoc');
+
+module.exports = function (opts) {
+  gulp.task('docs', function() {
+    return gulp.src(['src/**/*.ts'])
+      .pipe(typedoc({
+
+        // typescript options
+        module: 'commonjs',
+        target: 'es5',
+        includeDeclarations: true,
+
+        // typedoc options
+        out: './docs',
+        name: 'Preboot',
+        theme: 'default',
+        ignoreCompilerErrors: true,
+        version: true
+      }));
+  });
+};

buildtasks/example_task.js

@@ -8,13 +8,13 @@ module.exports = function (opts) {
     var exec = require('child_process').exec;
     var distExampleDir = 'dist/example';
 
-    // need to clear out preboot in require cache for when we are watching  
+    // 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) {
+      if (require.cache.hasOwnProperty(key) && key.indexOf(opts.distDir) >= 0) {
         delete require.cache[key];
       }
     }
- 
+
     // now pull in the latest preboot code
     var preboot = require(opts.prebootNode);
 

buildtasks/test_task.js

@@ -8,11 +8,11 @@ var karma = require('karma');
 module.exports = function (opts) {
 
   gulp.task('test', [
-    'jasmine',
-    'karma'
+    'test.node',
+    'test.browser'
   ]);
 
-  gulp.task('jasmine', [ 'tsc' ], function () {
+  gulp.task('test.node', [ 'tsc' ], function () {
     return gulp.src(opts.testFiles).
       pipe(jasmine({
         verbose: true,
@@ -37,7 +37,7 @@ module.exports = function (opts) {
       pipe(gulp.dest(karmaDest));
   });
 
-  gulp.task('karma', ['karma.build'], function (done) {
+  gulp.task('test.browser', ['karma.build'], function (done) {
     var karmaCode = path.join(opts.distDir, 'karma/preboot_karma.js');
     var karmaConfig = {
       port: 9201,
@@ -61,7 +61,7 @@ module.exports = function (opts) {
       autoWatch: false,
       files: [karmaCode]
     };
-    
+
     var server = new karma.Server(karmaConfig, done);
     return server.start();
   });

buildtasks/tsc_task.js

@@ -9,7 +9,7 @@ module.exports = function (opts) {
     var tsProject = typescript.createProject(tsConfig, {
       declaration: true
     });
-    // TODO(gdi2290): missing declaration file stream
+
     return tsProject.src().
       pipe(typescript(tsProject)).
       pipe(size()).

example/preboot_example.html

@@ -1,21 +1,21 @@
 <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" preboot-events="keypress,keyup,keydown,input,change" (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">
@@ -69,4 +69,4 @@
     </script>
   </body>
 
-</html>
+</html>

package.json

@@ -27,34 +27,35 @@
     "express": "^4.13.4",
     "gulp-jasmine": "^2.3.0",
     "gulp-livereload": "^3.8.1",
-    "gulp-size": "^2.0.0",
-    "gulp-tslint": "^4.3.2",
+    "gulp-size": "^2.1.0",
+    "gulp-tslint": "^4.3.4",
+    "gulp-typedoc": "^1.2.1",
     "gulp-typescript": "^2.12.1",
     "jasmine": "^2.4.1",
     "jasmine-reporters": "^2.1.1",
-    "karma": "^0.13.21",
-    "karma-browserify": "^5.0.2",
-    "karma-chrome-launcher": "^0.2.2",
-    "karma-jasmine": "^0.3.7",
+    "karma": "^0.13.22",
+    "karma-browserify": "^5.0.3",
+    "karma-chrome-launcher": "^0.2.3",
+    "karma-jasmine": "^0.3.8",
     "karma-phantomjs-launcher": "^1.0.0",
     "open": "0.0.5",
-    "phantomjs-prebuilt": "^2.1.4",
+    "phantomjs-prebuilt": "^2.1.7",
     "serve-static": "^1.10.2",
-    "tslint": "^3.5.0",
-    "typescript": "^1.8.7",
+    "tslint": "^3.6.0",
+    "typescript": "^1.8.9",
     "watchify": "^3.7.0"
   },
   "dependencies": {
-    "gulp-insert": "^0.5.0",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.5.3",
     "browserify": "^13.0.0",
     "event-stream": "^3.3.2",
     "gulp": "^3.9.1",
-    "lodash": "^4.5.1",
-    "q": "^1.4.1"
+    "gulp-insert": "^0.5.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^1.5.3",
+    "lodash": "^4.7.0",
+    "q": "^1.4.1",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
   "repository": {
     "type": "git",

src/browser/preboot_browser.ts

@@ -33,7 +33,7 @@ let state = {
 };
 
 /**
- * Once bootstrap has compled, we replay events,
+ * Once bootstrap has completed, we replay events,
  * switch buffer and then cleanup
  */
 export function complete() {
@@ -80,7 +80,7 @@ function load() {
 
   // start listening to events
   eventManager.startListening(preboot, opts);
-};
+}
 
 /**
  * Resume the completion process; if complete already called,
@@ -120,7 +120,8 @@ export function start() {
   dom.init({ window: window });
 
   // if body there, then run load handler right away, otherwise register for onLoad
-  dom.state.body ? load() : dom.onLoad(load);
+  let bodyExists = dom.state.body && Object.keys(dom.state.body).length;
+  bodyExists ? load() : dom.onLoad(load);
 
   // set up other handlers
   dom.on(opts.pauseEvent, () => state.canComplete = false);

src/node/browser_code_generator.ts

@@ -1,11 +1,11 @@
-const Q = require('q');
-const uglify = require('gulp-uglify');
-const insert = require('gulp-insert');
-const rename = require('gulp-rename');
-const eventStream = require('event-stream');
-const buffer = require('vinyl-buffer');
-const source = require('vinyl-source-stream');
-const browserify = require('browserify');
+import * as Q from 'q';
+import * as rename from 'gulp-rename';
+import * as uglify from 'gulp-uglify';
+import * as insert from 'gulp-insert';
+import * as eventStream from 'event-stream';
+import * as buffer from 'vinyl-buffer';
+import * as source from 'vinyl-source-stream';
+import * as browserify from 'browserify';
 import {normalize, listenStrategies, replayStrategies, freezeStrategies} from './normalize';
 import {stringifyWithFunctions} from './utils';
 import {PrebootOptions} from '../interfaces/preboot_options';
@@ -20,7 +20,7 @@ export let browserCodeCache = {};
  * attributes strategies will be stubbed out (meaing the refs will be {})
  */
 export function ignoreUnusedStrategies(
-  b: any/*Browserify.BrowserifyObject*/,
+  b: any,  /*Browserify.BrowserifyObject*/
   bOpts: Object,
   strategyOpts: any[],
   allStrategies: Object,