Angular Individual Service Injection - Decouple bootstrap service (#1457)

* change services to be individually injected into angular

* messing around with injection

* change angular bootstrapping to factory style

* formatting

* formatting

* fix imports

* fix build errors

* fix testsw

* fix tests

* fix compile errors
This commit is contained in:
Anthony Dresser
2018-05-23 16:51:02 -07:00
committed by GitHub
parent cd0f9b71c5
commit 1359354387
68 changed files with 1011 additions and 1116 deletions

View File

@@ -8,8 +8,8 @@ import 'vs/css!sql/parts/grid/load/css/qp';
import { ElementRef, Component, Inject, forwardRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import * as QP from 'html-query-plan';
import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
import { QueryPlanParams } from 'sql/services/bootstrap/bootstrapParams';
import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
import { IQueryPlanParams } from 'sql/services/bootstrap/bootstrapParams';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { registerThemingParticipant, ICssStyleCollector, ITheme } from 'vs/platform/theme/common/themeService';
@@ -32,7 +32,7 @@ export class QueryPlanComponent implements OnDestroy, OnInit {
constructor(
@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService
@Inject(IBootstrapParams) private _params: IQueryPlanParams
) { }
ngOnDestroy() {
@@ -40,9 +40,8 @@ export class QueryPlanComponent implements OnDestroy, OnInit {
}
ngOnInit() {
let parameters: QueryPlanParams = this._bootstrapService.getBootstrapParams(this._el.nativeElement.tagName);
if (parameters) {
this.planXml = parameters.planXml;
if (this._params) {
this.planXml = this._params.planXml;
}
this._disposables.push(registerThemingParticipant(this._updateTheme));
}

View File

@@ -3,36 +3,42 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { NgModule, Inject, forwardRef, ApplicationRef, ComponentFactoryResolver } from '@angular/core';
import { NgModule, Inject, forwardRef, ApplicationRef, ComponentFactoryResolver, Type } from '@angular/core';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
import { QueryPlanComponent, QUERYPLAN_SELECTOR } from 'sql/parts/queryPlan/queryPlan.component';
// Connection Dashboard main angular module
@NgModule({
declarations: [
QueryPlanComponent
],
entryComponents: [QueryPlanComponent],
imports: [
CommonModule,
BrowserModule
],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class QueryPlanModule {
export const QueryPlanModule = (params: IBootstrapParams, selector: string): Type<any> => {
constructor(
@Inject(forwardRef(() => ComponentFactoryResolver)) private _resolver: ComponentFactoryResolver,
@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService
) {
@NgModule({
declarations: [
QueryPlanComponent
],
entryComponents: [QueryPlanComponent],
imports: [
CommonModule,
BrowserModule
],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: IBootstrapParams, useValue: params }
]
})
class ModuleClass {
constructor(
@Inject(forwardRef(() => ComponentFactoryResolver)) private _resolver: ComponentFactoryResolver
) {
}
ngDoBootstrap(appRef: ApplicationRef) {
const factory = this._resolver.resolveComponentFactory(QueryPlanComponent);
(<any>factory).factory.selector = selector;
appRef.bootstrap(factory);
}
}
ngDoBootstrap(appRef: ApplicationRef) {
const factory = this._resolver.resolveComponentFactory(QueryPlanComponent);
const uniqueSelector: string = this._bootstrapService.getUniqueSelector(QUERYPLAN_SELECTOR);
(<any>factory).factory.selector = uniqueSelector;
appRef.bootstrap(factory);
}
}
return ModuleClass;
};

View File

@@ -18,8 +18,8 @@ import { IConnectionManagementService } from 'sql/parts/connection/common/connec
import { IMetadataService } from 'sql/services/metadata/metadataService';
import { IScriptingService } from 'sql/services/scripting/scriptingService';
import { IQueryEditorService } from 'sql/parts/query/common/queryEditorService';
import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
import { QueryPlanParams } from 'sql/services/bootstrap/bootstrapParams';
import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService';
import { IQueryPlanParams } from 'sql/services/bootstrap/bootstrapParams';
import { QUERYPLAN_SELECTOR } from 'sql/parts/queryPlan/queryPlan.component';
declare let QP;
@@ -35,8 +35,7 @@ export class QueryPlanEditor extends BaseEditor {
@IConnectionManagementService private _connectionService: IConnectionManagementService,
@IMetadataService private _metadataService: IMetadataService,
@IScriptingService private _scriptingService: IScriptingService,
@IQueryEditorService private _queryEditorService: IQueryEditorService,
@IBootstrapService private _bootstrapService: IBootstrapService
@IQueryEditorService private _queryEditorService: IQueryEditorService
) {
super(QueryPlanEditor.ID, telemetryService, themeService);
}
@@ -109,11 +108,11 @@ export class QueryPlanEditor extends BaseEditor {
*/
private bootstrapAngular(input: QueryPlanInput): void {
// Get the bootstrap params and perform the bootstrap
let params: QueryPlanParams = {
let params: IQueryPlanParams = {
planXml: input.planXml
};
let uniqueSelector = this._bootstrapService.bootstrap(
let uniqueSelector = this.instantiationService.invokeFunction(bootstrapAngular,
QueryPlanModule,
this.getContainer().getHTMLElement(),
QUERYPLAN_SELECTOR,

View File

@@ -10,14 +10,14 @@ import { PlanXmlParser, PlanNode } from 'sql/parts/queryPlan/planXmlParser';
import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
import { Table } from 'sql/base/browser/ui/table/table';
import { attachTableStyler } from 'sql/common/theme/styler';
import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
import { QueryComponentParams } from 'sql/services/bootstrap/bootstrapParams';
import { IQueryComponentParams } from 'sql/services/bootstrap/bootstrapParams';
import * as GridContentEvents from 'sql/parts/grid/common/gridContentEvents';
import { DataService } from 'sql/parts/grid/services/dataService';
import { toDisposableSubscription } from 'sql/parts/common/rxjsUtils';
import { localize } from 'vs/nls';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
export const TOP_OPERATIONS_SELECTOR: string = 'top-operations-component';
@@ -50,14 +50,13 @@ export class TopOperationsComponent extends TabChild implements OnDestroy, OnIni
{ name: localize('topOperations.partitioned', 'Partitioned'), field: 'partitioned' }
];
@Input() public queryParameters: QueryComponentParams;
@Input() public queryParameters: IQueryComponentParams;
private _disposables: Array<IDisposable> = [];
constructor(
@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
) {
super();
}
@@ -105,7 +104,7 @@ export class TopOperationsComponent extends TabChild implements OnDestroy, OnIni
return column;
});
this._table = new Table(this._el.nativeElement, data, columns);
this._disposables.push(attachTableStyler(this._table, this._bootstrapService.themeService));
this._disposables.push(attachTableStyler(this._table, this.themeService));
}
}