Slick gridwith angular2 (#7)

* Refactored the project to run the front end code as a separate npm package

* Added Slickgrid as UI component rather than Backgrid

* Added Gulp scripts for building

.gitignore

@@ -1,2 +1,6 @@
 out
-node_modules
+node_modules
+.DS_Store
+*.log
+tools
+examples

.vscode/launch.json

@@ -10,8 +10,7 @@
             "args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
             "stopOnEntry": false,
             "sourceMaps": true,
-            "outDir": "${workspaceRoot}/out/src",
-            "preLaunchTask": "npm"
+            "outDir": "${workspaceRoot}/out/src"
         },
         {
             "name": "Launch Tests",
@@ -21,8 +20,7 @@
             "args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/out/test"],
             "stopOnEntry": false,
             "sourceMaps": true,
-            "outDir": "${workspaceRoot}/out/test",
-            "preLaunchTask": "npm"
+            "outDir": "${workspaceRoot}/out/test"
         }
     ]
 }

.vscode/settings.json

@@ -1,12 +1,16 @@
 // Place your settings in this file to overwrite default and user settings.
 {
 	"files.trimTrailingWhitespace": true,
-    
+
     "files.exclude": {
         "out": false // set this to true to hide the "out" folder with the compiled JS files
     },
     "search.exclude": {
         "out": true // set this to false to include "out" folder in search results
     },
-    "typescript.tsdk": "./node_modules/typescript/lib" // we want to use the TS server from our node_modules folder to control its version
+    "typescript.tsdk": "./node_modules/typescript/lib", // we want to use the TS server from our node_modules folder to control its version
+    "files.watcherExclude": {
+        "**/.git/objects/**": true,
+        "**/out/*" : true
+    }
 }

.vscode/tasks.json

@@ -1,30 +1,23 @@
-// Available variables which can be used inside of strings.
-// ${workspaceRoot}: the root folder of the team
-// ${file}: the current opened file
-// ${fileBasename}: the current opened file's basename
-// ${fileDirname}: the current opened file's dirname
-// ${fileExtname}: the current opened file's extension
-// ${cwd}: the current working directory of the spawned process
-
-// A task runner that calls a custom npm script that compiles the extension.
 {
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
     "version": "0.1.0",
-
-    // we want to run npm
-    "command": "npm",
-
-    // the command is a shell script
+    "command": "gulp",
     "isShellCommand": true,
-
-    // show the output window only if unrecognized errors occur.
-    "showOutput": "silent",
-
-    // we run the custom script "compile" as defined in package.json
-    "args": ["run", "compile", "--loglevel", "silent"],
-
-    // The tsc compiler is started in watching mode
-    "isWatching": true,
-
-    // use the standard tsc in watch mode problem matcher to find compile problems in the output.
-    "problemMatcher": "$tsc-watch"
+    "args": [
+        "--no-color"
+    ],
+    "tasks": [
+        {
+            "taskName": "build-all",
+            "args": [],
+            "isBuildCommand": true,
+            "isWatching": false,
+            "problemMatcher": [
+                "$lessCompile",
+                "$tsc",
+                "$jshint"
+            ]
+        }
+    ]
 }

README.md

@@ -28,6 +28,12 @@ Head over to [Github](https://github.com/sanagama/vscode-mssql) for the source c
 ##Usage
 First, download and install Visual Studio Code `1.0` (or later) for your platform from here: [download Visual Studio Code](https://code.visualstudio.com/#alt-downloads)
 
+###Building the extension
+1. Requires NodeJS: <https://nodejs.org/en/>
+2. If you do not already have gulp CLI installed run `npm install -g gulp-cli`
+3. From the root directory run `npm run install-packages`
+4. From the root directory run `gulp build-all`
+
 ###Installing the extension
 1. Launch Visual Studio Code
 2. Press `F1` to open the command palette

gulpfile.js

@@ -0,0 +1,76 @@
+var gulp = require('gulp');
+var install = require('gulp-install');
+var tslint = require('gulp-tslint');
+var ts = require('gulp-typescript');
+var tsProject = ts.createProject('tsconfig.json');
+var del = require('del');
+var srcmap = require('gulp-sourcemaps');
+var config = require('./tasks/config');
+
+require('./tasks/htmltasks')
+
+gulp.task('ext:tslint', () => {
+    return gulp.src([
+        config.paths.project.root + '/src/**/*.ts',
+        '!' + config.paths.project.root + '/src/views/htmlcontent/**/*'
+    ])
+    .pipe((tslint({
+        formatter: "verbose"
+    })))
+    .pipe(tslint.report());
+});
+
+gulp.task('ext:compile-src', () => {
+    return gulp.src([
+                config.paths.project.root + '/src/**/*.ts',
+                config.paths.project.root + '/typings/**/*.ts',
+                '!' + config.paths.project.root + '/src/views/htmlcontent/**/*'])
+                .pipe(srcmap.init())
+                .pipe(ts(tsProject))
+                .pipe(srcmap.write('.'))
+                .pipe(gulp.dest('out/src/'));
+});
+
+gulp.task('ext:compile-tests', () => {
+    return gulp.src([
+                config.paths.project.root + '/test/**/*.ts',
+                config.paths.project.root + '/typings/**/*.ts'])
+                .pipe(srcmap.init())
+                .pipe(ts(tsProject))
+                .pipe(srcmap.write('.'))
+                .pipe(gulp.dest('out/test/'));
+
+})
+
+gulp.task('ext:compile', gulp.series('ext:compile-src', 'ext:compile-tests'));
+
+gulp.task('ext:copy-tests', () => {
+    return gulp.src(config.paths.project.root + '/test/resources/**/*')
+            .pipe(gulp.dest(config.paths.project.root + '/out/test/resources/'))
+})
+
+gulp.task('ext:copy-html', () => {
+    return gulp.src(config.paths.project.root + '/src/views/htmlcontent/src/**/*')
+            .pipe(gulp.dest(config.paths.project.root + '/out/src/views/htmlcontent/'))
+})
+
+gulp.task('ext:copy', gulp.series('ext:copy-tests', 'ext:copy-html'))
+
+gulp.task('ext:build', gulp.series('ext:compile', 'ext:copy'));
+
+gulp.task('ext:clean', () => {
+    return del('out')
+});
+
+gulp.task('build-extension', gulp.series('ext:tslint', 'ext:clean', 'ext:build'));
+
+gulp.task('build-all', gulp.series('build-html', 'build-extension'));
+
+gulp.task('install', function(){
+    return gulp.src(['./package.json', './src/views/htmlcontent/package.json'])
+                .pipe(install());
+})
+
+gulp.task('watch', function(){
+    return gulp.watch(config.paths.project.root + '/src/**/*', gulp.series('build-all'))
+})

install.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var install = require('gulp-install');
+
+gulp.task('install', function(){
+    return gulp.src(['./package.json', './src/views/htmlcontent/package.json'])
+                    .pipe(install());
+});

package.json

@@ -40,6 +40,15 @@
     "vscode.sql"
   ],
   "devDependencies": {
+    "del": "^2.2.1",
+    "gulp": "github:gulpjs/gulp#4.0",
+    "gulp-hub": "frankwallis/gulp-hub#registry-init",
+    "gulp-install": "^0.6.0",
+    "gulp-less": "^3.1.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-tslint": "^6.0.2",
+    "gulp-typescript": "^2.13.6",
+    "tslint": "^3.14.0",
     "typescript": "^1.8.9",
     "vscode": "^0.11.0",
     "xunit-file": "^1.0.0"
@@ -218,9 +227,7 @@
     }
   },
   "scripts": {
-    "compile": "npm run lint && node ./node_modules/vscode/bin/compile -p ./",
-    "compile_watch": "node ./node_modules/vscode/bin/compile -watch -p ./",
     "postinstall": "node ./node_modules/vscode/bin/install",
-    "lint": "tslint src/**/*.ts"
+    "install-packages": "npm install github:gulpjs/gulp#4.0 && npm install gulp-install && gulp --gulpfile install.js install"
   }
 }

src/controllers/localWebService.ts

@@ -9,7 +9,7 @@ export default class LocalWebService {
     private app = express();
     static _servicePort: string;
     static _vscodeExtensionPath: string;
-    static _htmlContentLocation = 'src/views/htmlcontent';
+    static _htmlContentLocation = 'out/src/views/htmlcontent';
     static _staticContentPath: string;
 
     constructor(extensionPath: string) {

src/controllers/queryRunner.ts

@@ -242,18 +242,20 @@ export default class QueryRunner {
     // return column metadata for recordset
     private getColumnMetadata(recordset: any): any[] {
         let columnMetadata = [];
-        for (let i = 0; i < recordset.columns.length; i++) {
-            let columnName = recordset.columns[i].name;
-            if (!columnName) {
-                columnName = '';
-            }
+        for (let key in recordset.columns) {
+            if (recordset.columns.hasOwnProperty(key)) {
+                let columnName = recordset.columns[key].name;
+                if (!columnName) {
+                    columnName = '';
+                }
 
-            let columnMetadataRender = <Interfaces.IBackgridColumnMetadata> {
-                name: columnName,
-                label: columnName,
-                cell: 'string' // format all columns as string for display in backgrid
-            };
-            columnMetadata.push(columnMetadataRender);
+                let columnMetadataRender = <Interfaces.IBackgridColumnMetadata> {
+                    name: columnName,
+                    label: columnName,
+                    cell: 'string' // format all columns as string for display in backgrid
+                };
+                columnMetadata.push(columnMetadataRender);
+            }
         }
         return columnMetadata;
     }

src/languageservice/serviceclient.ts

@@ -35,7 +35,7 @@ export default class SqlToolsServiceClient {
 
         // run the service host using dotnet.exe from the path
         let serverCommand = 'dotnet';
-        let serverArgs = [ context.asAbsolutePath(path.join('tools', 'Microsoft.SqlTools.ServiceLayer.dll')) ];
+        let serverArgs = [ context.asAbsolutePath(path.join('tools', 'Microsoft.SqlTools.ServiceHost.dll')) ];
         let serverOptions: ServerOptions = {  command: serverCommand, args: serverArgs, transport: TransportKind.stdio  };
 
         // Options to control the language client

src/models/sqlOutputContentProvider.ts

@@ -41,7 +41,7 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
         // add http handler for '/'
         this._service.addHandler(Interfaces.ContentType.Root, function(req, res): void {
             Utils.logDebug(Constants.msgContentProviderOnRootEndpoint);
-            let uri: string = req.query.uri;
+            let uri: string = decodeURI(req.query.uri);
             res.render(path.join(LocalWebService.staticContentPath, Constants.msgContentProviderSqlOutputHtml), {uri: uri});
         });
 
@@ -50,7 +50,7 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
 
             Utils.logDebug(Constants.msgContentProviderOnResultsEndpoint);
             let resultsetsMeta: Interfaces.ISqlResultsetMeta[] = [];
-            let uri: string = req.query.uri;
+            let uri: string = decodeURI(req.query.uri);
             for (let index = 0; index < self._queryResultsMap.get(uri).resultsets.length; index ++) {
                 resultsetsMeta.push( <Interfaces.ISqlResultsetMeta> {
                     columnsUri: '/' + Constants.outputContentTypeColumns + '?id=' + index.toString(),
@@ -65,7 +65,7 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
         // add http handler for '/messages' - return all messages as a JSON string
         this._service.addHandler(Interfaces.ContentType.Messages, function(req, res): void {
             Utils.logDebug(Constants.msgContentProviderOnMessagesEndpoint);
-            let uri: string = req.query.uri;
+            let uri: string = decodeURI(req.query.uri);
             let json = JSON.stringify(self._queryResultsMap.get(uri).messages);
             // Utils.logDebug(json);
             res.send(json);
@@ -75,7 +75,7 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
         this._service.addHandler(Interfaces.ContentType.Columns, function(req, res): void {
             let id = req.query.id;
             Utils.logDebug(Constants.msgContentProviderOnColumnsEndpoint + id);
-            let uri: string = req.query.uri;
+            let uri: string = decodeURI(req.query.uri);
             let columnMetadata = self._queryResultsMap.get(uri).resultsets[id].columns;
             let json = JSON.stringify(columnMetadata);
             // Utils.logDebug(json);
@@ -86,7 +86,7 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
         this._service.addHandler(Interfaces.ContentType.Rows, function(req, res): void {
             let id = req.query.id;
             Utils.logDebug(Constants.msgContentProviderOnRowsEndpoint + id);
-            let uri: string = req.query.uri;
+            let uri: string = decodeURI(req.query.uri);
             let json = JSON.stringify(self._queryResultsMap.get(uri).resultsets[id].rows);
             // Utils.logDebug(json);
             res.send(json);

src/views/connectionUI.ts

@@ -8,7 +8,7 @@ import { IConnectionCredentials, IConnectionProfile, IConnectionCredentialsQuick
 import { IQuestion, IPrompter, QuestionTypes } from '../prompts/question';
 import Interfaces = require('../models/interfaces');
 
-let async = require('async');
+// let async = require('async');
 const mssql = require('mssql');
 
 export class ConnectionUI {
@@ -63,7 +63,7 @@ export class ConnectionUI {
     // Helper to let the user choose a database on the current server
     // TODO: refactor this to use the service layer/SMO once the plumbing/conversion is complete
     public showDatabasesOnCurrentServer(currentCredentials: Interfaces.IConnectionCredentials): Promise<Interfaces.IConnectionCredentials> {
-        const self = this;
+        // const self = this;
         return new Promise<Interfaces.IConnectionCredentials>((resolve, reject) => {
             // create a new connection to the master db using the current connection as a base
             let masterCredentials: Interfaces.IConnectionCredentials = <any>{};