Merge branch 'dmdimitrov/query-builder-improvements' of https://github.com/IgniteUI/igniteui-angular into dmdimitrov/query-builder-improvements

Author: igdmdimitrov

CHANGELOG.md

@@ -14,7 +14,7 @@ All notable changes for each version of this project will be documented in this
     - Added support for showing/hiding the indicator controls (dots). Can be configured via the `indicators` property. Defaults to `true`.
 
 - `IFilteringExpression`
-    - **Breaking Change** There is a new `conditionName` property which is required. This would generally be equal to the old `condition.name`.
+    - A new optional property called `conditionName` has been introduced. This would generally be equal to the existing `condition.name`.
 
 
 #### Scrollbar: New CSS variables

projects/igniteui-angular/migrations/common/ServerHost.ts

@@ -15,7 +15,7 @@ export class ServerHost implements ts.server.ServerHost {
     /** Cached because Angular schematics encapsulation's customRequire doesn't provide `resolve` */
     private nativeRequire = createRequire(__filename);
 
-    constructor(private host: Tree) {
+    constructor(public host: Tree) {
         this.args = ts.sys.args;
         this.newLine = ts.sys.newLine;
         this.useCaseSensitiveFileNames = ts.sys.useCaseSensitiveFileNames;

projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts

@@ -1,10 +1,10 @@
-import { EmptyTree } from '@angular-devkit/schematics';
 import { UnitTestTree } from '@angular-devkit/schematics/testing';
 import * as fs from 'fs';
 import * as path from 'path';
-import { ClassChanges, BindingChanges, SelectorChanges, ThemeChanges, ImportsChanges, ElementType, ThemeType } from './schema';
+import { ClassChanges, BindingChanges, SelectorChanges, ThemeChanges, ImportsChanges, ElementType, ThemeType, MemberChanges } from './schema';
 import { UpdateChanges, InputPropertyType, BoundPropertyObject } from './UpdateChanges';
 import * as tsUtils from './tsUtils';
+import { setupTestTree } from './setup.spec';
 
 describe('UpdateChanges', () => {
     let appTree: UnitTestTree;
@@ -31,14 +31,19 @@ describe('UpdateChanges', () => {
     }
 
     beforeEach(() => {
-        appTree = new UnitTestTree(new EmptyTree());
-        appTree.create('/angular.json', JSON.stringify({
+        appTree = setupTestTree({
             projects: {
                 testProj: {
+                    root: '',
                     sourceRoot: '/'
                 }
+            },
+            schematics: {
+                '@schematics/angular:component': {
+                    prefix: 'app'
+                }
             }
-        }));
+        });
     });
 
     it('should replace/remove components', done => {
@@ -915,31 +920,45 @@ export class AppModule { }`);
     describe('Language Service migrations', () => {
 
         it('Should be able to replace property of an event', () => {
-            pending('set up tests for migrations through lang service');
+            const selectorsJson: MemberChanges = {
+                changes: [
+                    { member: 'onGridKeydown', replaceWith: 'gridKeydown', definedIn: ['IgxGridComponent'] }
+                ]
+            };
+            const jsonPath = path.join(__dirname, 'changes', 'members.json');
+
+            // leave callThrough on spies for other files the LS test might want to load:
+            spyOn(fs, 'existsSync').and.callThrough()
+                .withArgs(jsonPath).and.returnValue(true);
+            spyOn(fs, 'readFileSync').and.callThrough()
+                .withArgs(jsonPath, jasmine.any(String)).and.returnValue(JSON.stringify(selectorsJson));
+
             const fileContent =
 `import { Component } from '@angular/core';
-import { IGridCreatedEventArgs } from 'igniteui-angular';
+import { IgxGridComponent, IGridKeydownEventArgs } from 'igniteui-angular';
 @Component({
   selector: 'app-custom-grid',
   template: ''
 })
 export class CustomGridComponent {
-  public childGridCreated(event: IGridCreatedEventArgs) {
-      event.grid.onGridKeydown.subscribe(() => {});
+  public childGridCreated(event: IGridKeydownEventArgs) {
+      const grid = event.owner as IgxGridComponent;
+      grid.onGridKeydown.subscribe(() => {});
   }
 }
 `;
             appTree.create('test.component.ts', fileContent);
             const expectedFileContent =
 `import { Component } from '@angular/core';
-import { IGridCreatedEventArgs } from 'igniteui-angular';
+import { IgxGridComponent, IGridKeydownEventArgs } from 'igniteui-angular';
 @Component({
   selector: 'app-custom-grid',
   template: ''
 })
 export class CustomGridComponent {
-  public childGridCreated(event: IGridCreatedEventArgs) {
-      event.grid.gridKeydown.subscribe(() => {});
+  public childGridCreated(event: IGridKeydownEventArgs) {
+      const grid = event.owner as IgxGridComponent;
+      grid.gridKeydown.subscribe(() => {});
   }
 }
 `;

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -10,13 +10,14 @@ import {
 } from './schema';
 import {
     getLanguageService, getRenamePositions, getIdentifierPositions,
-    createProjectService, isMemberIgniteUI, NG_LANG_SERVICE_PACKAGE_NAME, NG_CORE_PACKAGE_NAME, findMatches
+    isMemberIgniteUI, NG_LANG_SERVICE_PACKAGE_NAME, NG_CORE_PACKAGE_NAME, findMatches
 } from './tsUtils';
 import {
     getProjectPaths, getWorkspace, getProjects, escapeRegExp, replaceMatch,
     getPackageManager, canResolvePackage, tryInstallPackage, tryUninstallPackage, getPackageVersion
 } from './util';
 import { ServerHost } from './ServerHost';
+import { serviceContainer } from './project-service-container';
 
 const TSCONFIG_PATH = 'tsconfig.json';
 
@@ -38,7 +39,6 @@ interface AppliedChange {
 /* eslint-disable arrow-parens */
 export class UpdateChanges {
     protected tsconfigPath = TSCONFIG_PATH;
-    protected _projectService: tss.server.ProjectService;
 
     public _shouldInvokeLS = true;
     public get shouldInvokeLS(): boolean {
@@ -54,40 +54,18 @@ export class UpdateChanges {
     }
 
     public get projectService(): tss.server.ProjectService {
-        if (!this._projectService) {
-            this._projectService = createProjectService(this.serverHost);
-            // Force Angular service to compile project on initial load w/ configure project
-            // otherwise if the first compilation occurs on an HTML file the project won't have proper refs
-            // and no actual angular metadata will be resolved for the rest of the migration
-
-            // TODO: this patter/issue might be obsolete; if so, should be safe to return _projectService directly
-            const mainRelPath = this.getWorkspaceProjectEntryPath();
-            if (!mainRelPath) {
-                return null;
-            }
-
-            // patch TSConfig so it includes angularOptions.strictTemplates
-            // ivy ls requires this in order to function properly on templates
-            this.patchTsConfig();
-            const mainAbsPath = path.resolve(this._projectService.currentDirectory, mainRelPath);
-            const scriptInfo = this._projectService.getOrCreateScriptInfoForNormalizedPath(tss.server.toNormalizedPath(mainAbsPath), false);
-            this._projectService.openClientFile(scriptInfo.fileName);
-
-
-            try {
-                const project = this._projectService.findProject(scriptInfo.containingProjects[0].getProjectName());
-                project.getLanguageService().getSemanticDiagnostics(mainAbsPath);
-            } catch (err) {
-                this.context.logger.warn(
-                    "An error occurred during TypeScript project service setup. Some migrations relying on language services might not be applied."
-                );
-            }
+        const projectService = serviceContainer.projectService;
+        if (!serviceContainer.configured) {
+            this.configureForAngularLS(projectService);
+            serviceContainer.configured = true;
         }
 
-        return this._projectService;
+        return projectService;
     }
 
-    protected serverHost: ServerHost;
+    protected get serverHost(): ServerHost {
+        return serviceContainer.serverHost;
+    }
     protected workspace: WorkspaceSchema;
     protected sourcePaths: string[];
     protected classChanges: ClassChanges;
@@ -176,7 +154,8 @@ export class UpdateChanges {
         this.themeChanges = this.loadConfig('theme-changes.json');
         this.importsChanges = this.loadConfig('imports.json');
         this.membersChanges = this.loadConfig('members.json');
-        this.serverHost = new ServerHost(this.host);
+        // update LS server host with the schematics tree:
+        this.serverHost.host = this.host;
     }
 
     /** Apply configured changes to the Host Tree */
@@ -835,6 +814,36 @@ export class UpdateChanges {
         return project;
     }
 
+    /**
+     * Force Angular service to compile project on initial load w/ configured project
+     * otherwise if the first compilation occurs on an HTML file the project won't have proper refs
+     * and no actual angular metadata will be resolved for the rest of the migration
+     */
+    private configureForAngularLS(projectService: ts.server.ProjectService): void {
+        // TODO: this pattern/issue might be obsolete
+        const mainRelPath = this.getWorkspaceProjectEntryPath();
+        if (!mainRelPath) {
+            return;
+        }
+
+        // patch TSConfig so it includes angularOptions.strictTemplates
+        // ivy ls requires this in order to function properly on templates
+        this.patchTsConfig();
+        const mainAbsPath = path.resolve(projectService.currentDirectory, mainRelPath);
+        const scriptInfo = projectService.getOrCreateScriptInfoForNormalizedPath(tss.server.toNormalizedPath(mainAbsPath), false);
+        projectService.openClientFile(scriptInfo.fileName);
+
+
+        try {
+            const project = projectService.findProject(scriptInfo.containingProjects[0].getProjectName());
+            project.getLanguageService().getSemanticDiagnostics(mainAbsPath);
+        } catch (err) {
+            this.context.logger.warn(
+                "An error occurred during TypeScript project service setup. Some migrations relying on language services might not be applied."
+            );
+        }
+    }
+
     private getWorkspaceProjectEntryPath(): string | null {
         const projectKeys = Object.keys(this.workspace.projects);
         if (!projectKeys.length) {

projects/igniteui-angular/migrations/common/project-service-container.ts

@@ -0,0 +1,28 @@
+import * as tss from 'typescript/lib/tsserverlibrary';
+import { createProjectService } from './tsUtils';
+import { ServerHost } from './ServerHost';
+
+export class ProjectServiceContainer {
+    private _serverHost: ServerHost;
+    private _projectService: tss.server.ProjectService;
+
+    /** Indicates additional config adjustments after init have been made */
+    public configured = false;
+
+    public get serverHost(): ServerHost {
+        if (!this._serverHost) {
+            this._serverHost = new ServerHost(null);
+        }
+        return this._serverHost;
+    }
+
+    public get projectService(): tss.server.ProjectService {
+        if (!this._projectService) {
+            this._projectService = createProjectService(this.serverHost);
+        }
+
+        return this._projectService;
+    }
+}
+
+export const serviceContainer = new ProjectServiceContainer();

projects/igniteui-angular/migrations/common/setup.spec.ts

@@ -0,0 +1,82 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { UnitTestTree } from '@angular-devkit/schematics/testing';
+import * as tss from 'typescript/lib/tsserverlibrary';
+import { serviceContainer } from './project-service-container';
+
+const configJson = {
+    version: 1,
+    projects: {
+        testProj: {
+            projectType: 'application',
+            root: '',
+            sourceRoot: 'testSrc',
+            architect: {
+                build: {
+                    builder: '@angular-devkit/build-angular:application',
+                    options: {
+                        browser: 'testSrc/appPrefix/component/test.component.ts'
+                    }
+                }
+            }
+        }
+    },
+    schematics: {
+        '@schematics/angular:component': {
+            prefix: 'appPrefix'
+        }
+    }
+};
+
+const tsConfig = readFileSync('tsconfig.json');
+
+/**
+ * Internal extension to ensure newly created .ts files are added to the project service
+ * or their source cache is updated/invalidated if the name is reused in multiple tests
+ */
+class IgxUnitTestTree extends UnitTestTree {
+    public override create(path: string, content: string | Buffer): void {
+        super.create(path, content);
+        if (!path.endsWith('.ts') && !path.endsWith('.html')) return;
+
+        const configured = serviceContainer.configured && serviceContainer.projectService.configuredProjects.size;
+        if (configured) {
+            // rush host update
+            serviceContainer.serverHost.host = this;
+
+            const entryPath = tss.server.toNormalizedPath(join(process.cwd(), path))
+            const scriptInfo = serviceContainer.projectService?.getOrCreateScriptInfoForNormalizedPath(entryPath, false);
+            if (!scriptInfo) {
+                return;
+            }
+            // integrate incoming virtual file in project/program for LS to work:
+            const project = serviceContainer.projectService.configuredProjects.values().next().value as tss.server.ConfiguredProject;
+            if (!project.containsScriptInfo(scriptInfo)) {
+                // add the file to the configured project to prevent tss from creating an inferred project for floating files
+                scriptInfo.attachToProject(project);
+            } else {
+                // if using same file, force-reload from host for new content
+                scriptInfo.reloadFromFile(tss.server.asNormalizedPath(entryPath));
+            }
+        } else {
+            // strip leading slash as it messes with the resolve and assign as new main entry
+            path = path.startsWith('/') ? path.substring(1) : path;
+            const config = JSON.parse(this.readContent('angular.json'));
+            config.projects.testProj.architect.build.options.browser = path;
+            this.overwrite('angular.json', JSON.stringify(config));
+        }
+    }
+}
+
+/**
+ * Create the test tree and init the `angular.json` file and `tsconfig.json`
+ */
+export function setupTestTree(ngConfigOverride: object | null = null) {
+    const tree = new IgxUnitTestTree(new EmptyTree());
+    tree.create('angular.json', JSON.stringify(ngConfigOverride ?? configJson));
+    // mirror tsconfig in test tree, otherwise LS server host handling may be off:
+    tree.create('tsconfig.json', tsConfig);
+    return tree as UnitTestTree;
+}

projects/igniteui-angular/migrations/update-10_1_0/index.spec.ts

@@ -1,27 +1,13 @@
 import * as path from 'path';
-import { EmptyTree } from '@angular-devkit/schematics';
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
 
 describe('Update 10.1.0', () => {
     let appTree: UnitTestTree;
     const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
-    const configJson = {
-        projects: {
-            testProj: {
-                root: '/',
-                sourceRoot: '/testSrc'
-            }
-        },
-        schematics: {
-            '@schematics/angular:component': {
-                prefix: 'appPrefix'
-            }
-        }
-    };
 
     beforeEach(() => {
-        appTree = new UnitTestTree(new EmptyTree());
-        appTree.create('/angular.json', JSON.stringify(configJson));
+        appTree = setupTestTree();
     });
 
     it('should upgrade the igx-action-icon to igx-navbar-action', async () => {