redid typescript build setup and script injection. Is finally working properly.

Gulpfile.js

@@ -1,48 +1,26 @@
 'use strict';
 
-var watchify = require('watchify');
-var browserify = require('browserify');
-var tsify = require('tsify');
 var gulp = require('gulp');
-var source = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-var gutil = require('gulp-util');
 var sourcemaps = require('gulp-sourcemaps');
-var assign = require('lodash.assign');
 var browserSync = require('browser-sync').create();
 var del = require('del');
 var flatten = require('gulp-flatten');
+var ts = require('gulp-typescript');
+var merge = require('merge2');
+var concat = require('gulp-concat');
 
-// add custom browserify options here
-var customOpts = {
-  entries: ['./src/index.ts'],
-  debug: true
-};
-var opts = assign({}, watchify.args, customOpts);
-var b = watchify(browserify(opts));
+var tsProject = ts.createProject('tsconfig.json');
 
-// add transformations here
-// i.e. b.transform(coffeeify);
+gulp.task('scripts', function() {
+  var tsResult = gulp.src('src/*.ts')
+  .pipe(sourcemaps.init())
+  .pipe(ts(tsProject));
 
-gulp.task('typescript', bundle); // so you can run `gulp js` to build the file
-b.on('update', bundle); // on any dep update, runs the bundler
-b.on('log', gutil.log); // output build logs to terminal
-
-function bundle() {
-  return b
-    .plugin('tsify', { noImplicitAny: true })
-    .bundle()
-    // log errors if they happen
-    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
-    .pipe(source('bundle.js'))
-    // optional, remove if you don't need to buffer file contents
-    .pipe(buffer())
-    // optional, remove if you dont want sourcemaps
-    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
-       // Add transformation tasks to the pipeline here.
-    .pipe(sourcemaps.write('./')) // writes .map file
-    .pipe(gulp.dest('./dist'));
-}
+  return tsResult.js
+    .pipe(concat('bundle.js'))
+    .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
+    .pipe(gulp.dest('dist'));
+});
 
 gulp.task('dist', ['dist-node-modules'], function () {
   return gulp.src([
@@ -50,39 +28,39 @@ gulp.task('dist', ['dist-node-modules'], function () {
     'src/**/*.css',
     'src/**/*.js'
     ], {base: 'src'})
-    .pipe(flatten())
-    .pipe(gulp.dest('dist'));
+  .pipe(flatten())
+  .pipe(gulp.dest('dist'));
 });
 
 gulp.task('dist-node-modules', function () {
   return gulp.src([
-    'node_modules/bootstrap/**/*'
+    'node_modules/bootstrap/**/*',
+    'node_modules/angular/**/*',
+    'node_modules/jquery/**/*'
     ], {base: 'node_modules'})
-    .pipe(gulp.dest('dist/vendor'));
+  .pipe(gulp.dest('dist/vendor'));
 });
 
 gulp.task('clean', function () {
   return del('dist');
 });
 
-// use default task to launch Browsersync and watch JS files
-gulp.task('serve', ['typescript', 'dist'], function () {
+gulp.task('serve', ['scripts', 'dist', 'dist-node-modules'], function () {
 
     // Serve files from the root of this project
     browserSync.init({
         server: {
           baseDir: "./dist",
-          index: "index.html"
         }
     });
 
     // add browserSync.reload to the tasks array to make
     // all browsers reload after tasks are complete.
+    gulp.watch("src/**/*.ts", ['scripts']);
     gulp.watch([
-      "dist/bundle.js",
       "src/**/*.html",
-      "src/**/*.js",
       "src/**/*.css",
-      ])
-    .on('change', browserSync.reload);
+      "src/**/*.js"
+      ], ['dist']);
+    gulp.watch("dist/**/*").on("change", browserSync.reload);
 });

Gulpfile_old.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var watchify = require('watchify');
+var browserify = require('browserify');
+var tsify = require('tsify');
+var gulp = require('gulp');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
+var gutil = require('gulp-util');
+var sourcemaps = require('gulp-sourcemaps');
+var assign = require('lodash.assign');
+var browserSync = require('browser-sync').create();
+var del = require('del');
+var flatten = require('gulp-flatten');
+
+// add custom browserify options here
+var customOpts = {
+  entries: ['./src/index.ts'],
+  debug: true
+};
+var opts = assign({}, watchify.args, customOpts);
+var b = watchify(browserify(opts));
+
+// add transformations here
+// i.e. b.transform(coffeeify);
+
+gulp.task('typescript', bundle); // so you can run `gulp js` to build the file
+b.on('update', bundle); // on any dep update, runs the bundler
+b.on('log', gutil.log); // output build logs to terminal
+
+function bundle() {
+  return b
+    .plugin('tsify', { noImplicitAny: true })
+    .bundle()
+    // log errors if they happen
+    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
+    .pipe(source('bundle.js'))
+    // optional, remove if you don't need to buffer file contents
+    .pipe(buffer())
+    // optional, remove if you dont want sourcemaps
+    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
+       // Add transformation tasks to the pipeline here.
+    .pipe(sourcemaps.write('./')) // writes .map file
+    .pipe(gulp.dest('./dist'));
+}
+
+gulp.task('dist', ['dist-node-modules'], function () {
+  return gulp.src([
+    'src/**/*.html',
+    'src/**/*.css',
+    'src/**/*.js'
+    ], {base: 'src'})
+    .pipe(flatten())
+    .pipe(gulp.dest('dist'));
+});
+
+gulp.task('dist-node-modules', function () {
+  return gulp.src([
+    'node_modules/bootstrap/**/*'
+    ], {base: 'node_modules'})
+    .pipe(gulp.dest('dist/vendor'));
+});
+
+gulp.task('clean', function () {
+  return del('dist');
+});
+
+// use default task to launch Browsersync and watch JS files
+gulp.task('serve', ['typescript', 'dist'], function () {
+
+    // Serve files from the root of this project
+    browserSync.init({
+        server: {
+          baseDir: "./dist",
+          index: "index.html"
+        }
+    });
+
+    // add browserSync.reload to the tasks array to make
+    // all browsers reload after tasks are complete.
+    gulp.watch([
+      "dist/bundle.js",
+      "src/**/*.html",
+      "src/**/*.js",
+      "src/**/*.css",
+      ])
+    .on('change', browserSync.reload);
+});

package.json

@@ -39,7 +39,10 @@
     "angular": "^1.4.7",
     "bootstrap": "^3.3.5",
     "del": "^2.0.2",
+    "gulp-concat": "^2.6.0",
     "gulp-flatten": "^0.2.0",
-    "jquery": "^2.1.4"
+    "gulp-typescript": "^2.9.2",
+    "jquery": "^2.1.4",
+    "merge2": "^0.3.6"
   }
 }

src/content_script.js

@@ -1,5 +1,3 @@
-$(document).ready(function () {
-
   // Save a copy of existing angular js and jquery
   // Source: http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/
   var existingWindowDotAngular = window['angular'];
@@ -7,29 +5,39 @@ $(document).ready(function () {
   // angular.js to load itself into
   var angular = (window.angular = {});
 
-  console.log('running inject script');
+  injectScripts();
 
-  injectScriptBundle();
+  function injectScripts () {
+
+    loadScript('vendor/jquery/dist/jquery.js', loadAngular);
+
+    function loadAngular () {
+      loadScript('vendor/angular/angular.js', loadPluginCode);
+    }
+
+    function loadPluginCode () {
+      loadScript('bundle.js', function () {
+        tagIt.init(restoreOldAngularAndJquery);
+      });
+    }
+
+    function restoreOldAngularAndJquery () {
+      // restore old angular
+      if (existingWindowDotAngular) {
+        window.angular = existingWindowDotAngular; // restore the old angular version
+      }
+      $.noConflict();
+    }
 
-  function injectScriptBundle () {
-    // When document is ready add bundle.js
-    var s = document.createElement('script');
     // TODO: add "script.js" to web_accessible_resources in manifest.json
     // s.src = chrome.extension.getURL('script.js');
-    s.src = 'bundle.js'
-    s.onload = function() {
-        this.parentNode.removeChild(this);
-        bootStrapAndRestoreAngular();
-        // $.noConflict();
-    };
-    (document.head||document.documentElement).appendChild(s);
+    function loadScript (scriptName, callback) {
+      var s = document.createElement('script');
+      s.src = scriptName;
+      s.onload = function() {
+        // this.parentNode.removeChild(this);
+        if (callback) callback();
+      };
+      (document.head||document.documentElement).appendChild(s);
+    }
   }
-
-  function bootStrapAndRestoreAngular () {
-    angular.element(document).ready(function() {
-      // angular.bootstrap(document.getElementById('my-widget', ['MyWidget']);
-      window.angular = existingWindowDotAngular; // restore the old angular version
-    });
-  }
-
-});

src/data/data.service.ts

@@ -1,27 +0,0 @@
-'use strict';
-
-class DataService {
-
-  $http : ng.IHttpService
-  serverUrl = 'http://lexitags.dyndns.org/server/lexitags2/Semtags?data='
-
-  static $inject = ["$scope", "$log"];
-  constructor($http: ng.IHttpService, $log: ng.ILogService) {
-    this.$http = $http;
-  }
-
-  createQuery (word: string) {
-    return '{"word":"QUERYTOREPLACE"}'
-      .replace(/QUERYTOREPLACE/, word);
-  }
-
-  callServer (word: string) {
-    if (!word) {
-      return;
-    };
-    return this.$http
-      .get(this.serverUrl + this.createQuery(word));
-  }
-}
-
-export = DataService;

src/index.ts

@@ -1,26 +1,25 @@
 /// <reference path="../typings/tsd.d.ts" />
 
-import $ = require('jquery');
-import angular = require('angular');
-import MenuCtrl = require('./menu/menu.controller');
-import DataService = require('./data/data.service');
-import SelectedWordService = require('./selectedWord/selectedWord.service');
+/// <reference path="menu/menu.controller.ts" />
+/// <reference path="services/data.service.ts" />
+/// <reference path="services/selectedWord.service.ts" />
 
-angular.module('tagIt', [])
-  .service('DataService', DataService)
-  .service('SelectedWordService', SelectedWordService)
-  .controller('MenuCtrl', MenuCtrl);
+module tagIt {
 
-function initAngular () {
-  $.get('menu.tpl.html', function (htmlData) {
-    $('body').children().wrapAll('<div class="tagit-body" />');
-    $('.tagit-body').before(htmlData);
-    angular.bootstrap(
-      document.getElementById("tagit-menu"),
-      ['tagIt']
-      );
+  angular.module('tagit', [])
+    .service('DataService', DataService)
+    .service('SelectedWordService', SelectedWordService)
+    .controller('MenuCtrl', MenuCtrl);
+
+  export function init (callback: () => void) {
+    var $ = jQuery;
+    $.get('menu.tpl.html', function (htmlData) {
+      $('body').children().wrapAll('<div class="tagit-body" />');
+      $('.tagit-body').before(htmlData);
+      angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']);
+      console.log('TagIt menu loaded');
+      if(callback) callback();
     });
+  }
 }
 
-initAngular();
-

src/menu/menu.controller.ts

@@ -1,32 +1,36 @@
-'use strict';
+module tagIt {
+  'use strict';
 
-interface IMenuScope extends angular.IScope {
-  startData: Object[];
-  testWord: String;
+  interface IMenuScope extends angular.IScope {
+    startData: Object[];
+    testWord: String;
+  }
+
+  export class MenuCtrl {
+
+    testWord = "It's working";
+    selectedWord = "No word yet";
+
+    static $inject = ["$scope", "$log", "DataService", "SelectedWordService"];
+    constructor($scope: any, $log: angular.ILogService,
+      DataService: DataService,
+      SelectedWordService: SelectedWordService) {
+      $scope.vm = this;
+      SelectedWordService.controllerToNotify = this.onWordSelected;
+      window.setTimeout(function() {
+        $log.debug('should be new version of jquery');
+        $log.debug(jQuery.fn);
+      }, 2000);
+    }
+
+    onWordSelected (newWord : string) {
+      this.selectedWord = newWord;
+    }
+
+    remove() {
+      $('.tagit-body').children().unwrap();
+      $('.tagit-menu').remove();
+    }
+
+  }
 }
-
-class MenuCtrl {
-
-  testWord = "It's working"
-  selectedWord = "No word yet"
-
-  static $inject = ["$scope", "$log", "SelectedWordService", "DataService"]
-
-  constructor($scope: any, $log: angular.ILogService,
-    SelectedWordService: any, DataService : any) {
-    $scope.vm = this;
-    SelectedWordService.controllerToNotify = this.onWordSelected;
-  }
-
-  onWordSelected (newWord : string) {
-    this.selectedWord = newWord;
-  }
-
-  remove() {
-    $('.tagit-body').children().unwrap();
-    $('.tagit-menu').remove();
-  }
-
-}
-
-export = MenuCtrl;

src/selectedWord/selectedWord.service.ts

@@ -1,56 +0,0 @@
-'use strict';
-
-/**
- * Takes care of figuring out what word
- * is selected.
- */
-class SelectedWordService {
-
-  currentlySelectedWord: string
-  $log : ng.ILogService
-  controllerToNotify : (selectedWord : string) => void;
-
-  static $inject = ["$log"];
-  constructor($log: ng.ILogService) {
-    this.$log = $log;
-    this.init();
-  }
-
-  processSelection () {
-    var focused : any = document.activeElement;
-    var selectedText : string;
-    if (focused) {
-      try {
-        selectedText = focused.value.substring(
-          focused.selectionStart, focused.selectionEnd);
-      } catch (err) {
-      }
-    }
-    if (selectedText == undefined) {
-      var sel = window.getSelection();
-      var selectedText = sel.toString();
-    }
-    if (selectedText) {
-      this.currentlySelectedWord = selectedText;
-      this.$log.debug('text that was selected: ' + selectedText);
-      if(this.controllerToNotify) {
-        this.controllerToNotify(selectedText);
-      }
-    }
-  }
-
-  init () {
-    var that = this;
-    document.addEventListener('click', function (evt) {
-        if (!document.hasFocus()) {
-          return true;
-        }
-        that.processSelection();
-        // clicks should propagate upwards to other things
-        // evt.stopPropagation();
-        // evt.preventDefault();
-      }, false);
-  }
-}
-
-export = SelectedWordService;

src/services/data.service.ts

@@ -0,0 +1,27 @@
+'use strict';
+
+module tagIt {
+  export class DataService {
+
+    $http : ng.IHttpService;
+    serverUrl = 'http://lexitags.dyndns.org/server/lexitags2/Semtags?data=';
+    static $inject = ["$http", "$log"];
+
+    constructor($http: ng.IHttpService, $log: ng.ILogService) {
+      this.$http = $http;
+    }
+
+    createQuery (word: string) {
+      return '{"word":"QUERYTOREPLACE"}'
+        .replace(/QUERYTOREPLACE/, word);
+    }
+
+    callServer (word: string) {
+      if (!word) {
+        return;
+      };
+      return this.$http
+        .get(this.serverUrl + this.createQuery(word));
+    }
+  }
+}

src/services/selectedWord.service.ts

@@ -0,0 +1,56 @@
+'use strict';
+
+module tagIt {
+  /**
+   * Takes care of figuring out what word
+   * is selected.
+   */
+  export class SelectedWordService {
+
+    currentlySelectedWord: string;
+    controllerToNotify : (selectedWord : string) => void;
+    $log : ng.ILogService;
+
+    static $inject = ["$log"];
+    constructor($log: ng.ILogService) {
+      this.$log = $log;
+      this.init();
+    }
+
+    processSelection () {
+      var focused : any = document.activeElement;
+      var selectedText : string;
+      if (focused) {
+        try {
+          selectedText = focused.value.substring(
+            focused.selectionStart, focused.selectionEnd);
+        } catch (err) {
+        }
+      }
+      if (selectedText == undefined) {
+        var sel = window.getSelection();
+        var selectedText = sel.toString();
+      }
+      if (selectedText) {
+        this.currentlySelectedWord = selectedText;
+        this.$log.debug('text that was selected: ' + selectedText);
+        if(this.controllerToNotify) {
+          this.controllerToNotify(selectedText);
+        }
+      }
+    }
+
+    init () {
+      var that = this;
+      document.addEventListener('click', function (evt) {
+          if (!document.hasFocus()) {
+            return true;
+          }
+          that.processSelection();
+          // clicks should propagate upwards to other things
+          // evt.stopPropagation();
+          // evt.preventDefault();
+        }, false);
+    }
+  }
+}

tsconfig.json

@@ -1,7 +1,9 @@
 {
-    "compilerOptions": {
-        "module": "commonjs",
-        "noImplicitAny": true
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "out": "output.js"
     },
-    "files": []
+    "files": [
+      "src/index.ts"
+    ]
 }