From 5b478e94a16bce1c7aed58d62607703a69b47bde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20Norman=20Hauk=C3=A5s?= Date: Wed, 21 Oct 2015 22:05:49 +0200 Subject: [PATCH] redid typescript build setup and script injection. Is finally working properly. --- Gulpfile.js | 70 +++++++------------ Gulpfile_old.js | 88 ++++++++++++++++++++++++ package.json | 5 +- src/content_script.js | 54 ++++++++------- src/data/data.service.ts | 27 -------- src/index.ts | 37 +++++----- src/menu/menu.controller.ts | 64 +++++++++-------- src/selectedWord/selectedWord.service.ts | 56 --------------- src/services/data.service.ts | 27 ++++++++ src/services/selectedWord.service.ts | 56 +++++++++++++++ tsconfig.json | 10 +-- 11 files changed, 288 insertions(+), 206 deletions(-) create mode 100644 Gulpfile_old.js delete mode 100644 src/data/data.service.ts delete mode 100644 src/selectedWord/selectedWord.service.ts create mode 100644 src/services/data.service.ts create mode 100644 src/services/selectedWord.service.ts diff --git a/Gulpfile.js b/Gulpfile.js index 9300dac..4b584eb 100644 --- a/Gulpfile.js +++ b/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); }); \ No newline at end of file diff --git a/Gulpfile_old.js b/Gulpfile_old.js new file mode 100644 index 0000000..9300dac --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/package.json b/package.json index 27d944e..cf3b775 100644 --- a/package.json +++ b/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" } } diff --git a/src/content_script.js b/src/content_script.js index dad4140..71ad8da 100644 --- a/src/content_script.js +++ b/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 - }); - } - -}); \ No newline at end of file diff --git a/src/data/data.service.ts b/src/data/data.service.ts deleted file mode 100644 index 790df97..0000000 --- a/src/data/data.service.ts +++ /dev/null @@ -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; diff --git a/src/index.ts b/src/index.ts index 3aeb294..f08bd45 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,26 +1,25 @@ /// -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'); +/// +/// +/// -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('
'); - $('.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('
'); + $('.tagit-body').before(htmlData); + angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']); + console.log('TagIt menu loaded'); + if(callback) callback(); }); + } } -initAngular(); - diff --git a/src/menu/menu.controller.ts b/src/menu/menu.controller.ts index f3a9e10..df982f3 100644 --- a/src/menu/menu.controller.ts +++ b/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; diff --git a/src/selectedWord/selectedWord.service.ts b/src/selectedWord/selectedWord.service.ts deleted file mode 100644 index 1bb6215..0000000 --- a/src/selectedWord/selectedWord.service.ts +++ /dev/null @@ -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; diff --git a/src/services/data.service.ts b/src/services/data.service.ts new file mode 100644 index 0000000..f974ce3 --- /dev/null +++ b/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)); + } + } +} diff --git a/src/services/selectedWord.service.ts b/src/services/selectedWord.service.ts new file mode 100644 index 0000000..a62ff70 --- /dev/null +++ b/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); + } + } +} diff --git a/tsconfig.json b/tsconfig.json index 05bbe28..3f312f9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,9 @@ { - "compilerOptions": { - "module": "commonjs", - "noImplicitAny": true + "compilerOptions": { + "noImplicitAny": true, + "out": "output.js" }, - "files": [] + "files": [ + "src/index.ts" + ] } \ No newline at end of file