Update dependencies (#99)

* Update dependencies

* Change @types/node version

* Check ng version

* fix lint

* refactoring

Author: dxvladislavvolkov

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-schematics",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "DevExtreme schematics",
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -21,16 +21,16 @@
   ],
   "schematics": "./src/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "^7.1.4",
-    "@angular-devkit/schematics": "^7.1.4",
-    "@schematics/angular": "^7.1.4",
-    "rxjs": "^6.3.3"
+    "@angular-devkit/core": "^8.0.0",
+    "@angular-devkit/schematics": "^8.0.0",
+    "@schematics/angular": "^8.0.0",
+    "rxjs": "~6.4.0",
+    "typescript": "3.4.5"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.8.14",
+    "@types/jasmine": "^3.3.8",
     "@types/node": "^8.10.39",
     "jasmine": "^2.8.0",
-    "tslint": "^5.12.0",
-    "typescript": "3.1.3"
+    "tslint": "^5.15.0"
   }
 }

package.json

@@ -24,34 +24,34 @@ const angularSchematicsCollection = require.resolve('../../node_modules/@schemat
 const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
 let appTree: UnitTestTree;
 
-beforeEach(() => {
-  appTree = schematicRunner.runSchematic('workspace', workspaceOptions);
-  appTree = schematicRunner.runSchematic('application', appOptions, appTree);
+beforeEach(async () => {
+  appTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
+  appTree = await schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
 });
 
 describe('add-app-template', () => {
-  it('should add DevExtreme', () => {
+  it('should add DevExtreme', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-app-template', { }, appTree);
+    const tree = await runner.runSchematicAsync('add-app-template', { }, appTree).toPromise();
     const packageConfig = JSON.parse(tree.readContent('package.json'));
 
     expect('devextreme' in packageConfig.dependencies).toBe(true);
   });
 
-  it('should consider the `project` option', () => {
-    appTree = schematicRunner.runSchematic('application', {
+  it('should consider the `project` option', async () => {
+    appTree = await schematicRunner.runSchematicAsync('application', {
       name: 'testApp2',
       inlineStyle: false,
       inlineTemplate: false,
       routing: true,
       style: 'scss',
       projectRoot: 'projects/testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-app-template', {
+    const tree = await runner.runSchematicAsync('add-app-template', {
       project: 'testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     expect(tree.files)
       .toContain('/devextreme.json');
@@ -61,9 +61,9 @@ describe('add-app-template', () => {
       .toContain('/projects/testApp2/src/app/pages/home/home.component.ts');
   });
 
-  it('should consider the `updateBudgets` option', () => {
+  it('should consider the `updateBudgets` option', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-app-template', { updateBudgets: true }, appTree);
+    const tree = await runner.runSchematicAsync('add-app-template', { updateBudgets: true }, appTree).toPromise();
 
     const angularContent = JSON.parse(tree.readContent('/angular.json'));
     const budgets = angularContent.projects.testApp.architect.build.configurations.production.budgets;

src/add-app-template/index_spec.ts

@@ -9,7 +9,7 @@ import * as events from 'devextreme/events';
   styleUrls: ['./side-navigation-menu.component.scss']
 })
 export class SideNavigationMenuComponent implements AfterViewInit, OnDestroy {
-  @ViewChild(DxTreeViewComponent)
+  @ViewChild(DxTreeViewComponent<% if(requireStaticFlag) { %>, { static: true }<% } %>)
   menu: DxTreeViewComponent;
 
   @Output()

src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts

@@ -14,6 +14,10 @@ import {
   template
 } from '@angular-devkit/schematics';
 
+import {
+  getPackageJsonDependency
+} from '@schematics/angular/utility/dependencies';
+
 import { of } from 'rxjs';
 
 import {
@@ -73,6 +77,7 @@ import { Change } from '@schematics/angular/utility/change';
 
 const projectFilesSource = './files/src';
 const workspaceFilesSource = './files';
+const ngRequireStaticFlag = /^(\W*[8-9][0-9]*)/;
 
 function addScriptSafe(scripts: any, name: string, value: string) {
   const currentValue = scripts[name];
@@ -328,7 +333,17 @@ export default function(options: any): Rule {
     const override = options.resolveConflicts === 'override';
     const componentName = override ? 'app' : getComponentName(host, appPath);
     const pathToCss = sourcePath.replace(/\/?(\w)+\/?/g, '../');
-    const templateOptions = { name: componentName, layout, title, strings, path: pathToCss, prefix };
+    const ngVersion = getPackageJsonDependency(host, '@angular/core')!.version;
+    const templateOptions = {
+      name: componentName,
+      layout,
+      title,
+      strings,
+      path: pathToCss,
+      prefix,
+      // https://github.com/angular/angular/blob/master/CHANGELOG.md#800-2019-05-28
+      requireStaticFlag: ngRequireStaticFlag.test(ngVersion)
+    };
 
     const modifyContent = (templateContent: string, currentContent: string, filePath: string) => {
       if (basename(filePath) === 'styles.scss') {

src/add-layout/index.ts

@@ -1,5 +1,10 @@
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
+import {
+  NodeDependencyType,
+  addPackageJsonDependency,
+  removePackageJsonDependency
+} from '@schematics/angular/utility/dependencies';
 import * as path from 'path';
 
 import { modifyJSONFile } from '../utility/modify-json-file';
@@ -32,14 +37,14 @@ describe('layout', () => {
   const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
   let appTree: UnitTestTree;
 
-  beforeEach(() => {
-    appTree = schematicRunner.runSchematic('workspace', workspaceOptions);
-    appTree = schematicRunner.runSchematic('application', appOptions, appTree);
+  beforeEach(async () => {
+    appTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
+    appTree = await schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
   });
 
-  it('should add layout with override', () => {
+  it('should add layout with override', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
 
     expect(tree.files)
       .toContain('/devextreme.json');
@@ -106,17 +111,37 @@ describe('layout', () => {
     expect(appContent).toContain('styleUrls: [\'./app.component.scss\']');
     expect(appContent).toContain('selector: \'app-root\',');
     expect(appContent).toContain(`import { AuthService, ScreenService, AppInfoService } from './shared/services';`);
+
+    const navigationMenu = tree.readContent(
+      '/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts');
+    expect(navigationMenu).toContain('@ViewChild(DxTreeViewComponent, { static: true })');
   });
 
-  it('should add npm scripts', () => {
+  it('should add npm scripts', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
     const packageConfig = JSON.parse(tree.readContent('package.json'));
     expect(packageConfig.scripts['build-themes']).toBe('devextreme build');
     expect(packageConfig.scripts['postinstall']).toBe('npm run build-themes');
   });
 
-  it('should add npm scripts safely', () => {
+  it('should set static flag', async () => {
+    removePackageJsonDependency(appTree, '@angular/core');
+    addPackageJsonDependency(appTree, {
+      type: NodeDependencyType.Default,
+      name: '@angular/core',
+      version: '7.0.0'
+    });
+
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
+    const navigationMenu = tree.readContent(
+      '/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts');
+
+    expect(navigationMenu).toContain('@ViewChild(DxTreeViewComponent)');
+  });
+
+  it('should add npm scripts safely', async () => {
     modifyJSONFile(appTree, './package.json', config => {
       const scripts = config['scripts'];
 
@@ -127,28 +152,28 @@ describe('layout', () => {
     });
 
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
     const packageConfig = JSON.parse(tree.readContent('package.json'));
     expect(packageConfig.scripts['origin-build-themes']).toBe('prev value 1');
     expect(packageConfig.scripts['origin-postinstall']).toBe('prev value 2');
     expect(packageConfig.scripts['build-themes']).toBe('npm run origin-build-themes && devextreme build');
     expect(packageConfig.scripts['postinstall']).toBe('npm run origin-postinstall && npm run build-themes');
   });
 
-  it('should add angular/cdk dependency', () => {
+  it('should add angular/cdk dependency', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
     const packageConfig = JSON.parse(tree.readContent('package.json'));
 
     expect(packageConfig.dependencies['@angular/cdk']).toBeDefined();
   });
 
-  it('should update budgets if updateBudgets option is true', () => {
+  it('should update budgets if updateBudgets option is true', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', {
+    const tree = await runner.runSchematicAsync('add-layout', {
       ...options,
       updateBudgets: true
-    }, appTree);
+    }, appTree).toPromise();
 
     const angularContent = JSON.parse(tree.readContent('/angular.json'));
     const budgets = angularContent.projects.testApp.architect.build.configurations.production.budgets;
@@ -161,9 +186,9 @@ describe('layout', () => {
     });
   });
 
-  it('should not update budgets if updateBudgets option is not defined or false', () => {
+  it('should not update budgets if updateBudgets option is not defined or false', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
 
     const angularContent = JSON.parse(tree.readContent('/angular.json'));
     const budgets = angularContent.projects.testApp.architect.build.configurations.production.budgets;
@@ -177,11 +202,11 @@ describe('layout', () => {
     expect(budgets[0]).toEqual(defaultBudget);
   });
 
-  it('should add layout without override', () => {
+  it('should add layout without override', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
 
     options.resolveConflicts = 'createNew';
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
 
     expect(tree.files).toContain('/src/app/app1.component.ts');
 
@@ -201,14 +226,15 @@ describe('layout', () => {
     expect(appInfo).toContain(`return 'TestApp';`);
   });
 
-  it('should add routing to layout', () => {
-    let newAppTree = schematicRunner.runSchematic('workspace', workspaceOptions);
+  it('should add routing to layout', async () => {
+    let newAppTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
 
     appOptions.routing = false;
-    newAppTree = schematicRunner.runSchematic('application', appOptions, newAppTree);
+    newAppTree = await schematicRunner.runSchematicAsync(
+      'application', appOptions, newAppTree).toPromise();
 
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
 
     expect(tree.files).toContain('/src/app/app-routing.module.ts');
     const moduleContent = tree.readContent('/src/app/app-routing.module.ts');
@@ -223,49 +249,49 @@ describe('layout', () => {
   }`);
   });
 
-  it('should use selected layout', () => {
+  it('should use selected layout', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
     options.layout = 'side-nav-inner-toolbar';
     options.resolveConflicts = 'override';
-    const tree = runner.runSchematic('add-layout', options, appTree);
+    const tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
     const content = tree.readContent('/src/app/app.component.html');
 
     expect(content).toContain('app-side-nav-inner-toolbar title="{{appInfo.title}}"');
   });
 
-  it('should consider the `project` option', () => {
-    appTree = schematicRunner.runSchematic('application', {
+  it('should consider the `project` option', async () => {
+    appTree = await schematicRunner.runSchematicAsync('application', {
       ...appOptions,
       name: 'testApp2',
       projectRoot: 'projects/testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    const tree = runner.runSchematic('add-layout', {
+    const tree = await runner.runSchematicAsync('add-layout', {
       ...options,
       project: 'testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     expect(tree.files)
       .toContain('/devextreme.json');
     expect(tree.files)
       .toContain('/projects/testApp2/src/themes/metadata.base.json');
   });
 
-  it('should merge build commands in devextreme.json file', () => {
-    appTree = schematicRunner.runSchematic('application', {
+  it('should merge build commands in devextreme.json file', async () => {
+    appTree = await schematicRunner.runSchematicAsync('application', {
       ...appOptions,
       name: 'testApp2',
       prefix: 'app2',
       projectRoot: 'projects/testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    let tree = runner.runSchematic('add-layout', options, appTree);
-    tree = runner.runSchematic('add-layout', {
+    let tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
+    tree = await runner.runSchematicAsync('add-layout', {
       ...options,
       project: 'testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     const appContent = tree.readContent('projects/testApp2/src/app/app.component.ts');
     expect(appContent).toContain('selector: \'app2-root\',');
@@ -275,19 +301,19 @@ describe('layout', () => {
     expect(content).toContain('"inputFile": "projects/testApp2/src/themes/metadata.base.json",');
   });
 
-  it('should add e2e tests only for default project', () => {
-    appTree = schematicRunner.runSchematic('application', {
+  it('should add e2e tests only for default project', async () => {
+    appTree = await schematicRunner.runSchematicAsync('application', {
       ...appOptions,
       name: 'testApp2',
       projectRoot: 'projects/testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    let tree = runner.runSchematic('add-layout', options, appTree);
-    tree = runner.runSchematic('add-layout', {
+    let tree = await runner.runSchematicAsync('add-layout', options, appTree).toPromise();
+    tree = await runner.runSchematicAsync('add-layout', {
       ...options,
       project: 'testApp2'
-    }, appTree);
+    }, appTree).toPromise();
 
     const testContent = tree.readContent('/e2e/src/app.e2e-spec.ts');
     expect(testContent).toContain('Welcome to TestApp!');

src/add-layout/index_spec.ts

@@ -29,15 +29,15 @@ describe('sample views', () => {
   const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
   let appTree: UnitTestTree;
 
-  beforeEach(() => {
-    appTree = schematicRunner.runSchematic('workspace', workspaceOptions);
-    appTree = schematicRunner.runSchematic('application', appOptions, appTree);
+  beforeEach(async () => {
+    appTree =  await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
+    appTree = await schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
   });
 
-  it('should add sample views', () => {
+  it('should add sample views', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
-    let tree = runner.runSchematic('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree);
-    tree = runner.runSchematic('add-sample-views', sampleViewsOptions, tree);
+    let tree = await runner.runSchematicAsync('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree).toPromise();
+    tree = await runner.runSchematicAsync('add-sample-views', sampleViewsOptions, tree).toPromise();
 
     const moduleContent = tree.readContent('/src/app/app-routing.module.ts');