Merge branch 'master' into mkirova/fix-8458

Author: ChronosSF

CHANGELOG.md

@@ -50,7 +50,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -162,7 +161,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/igniteui-angular/tsconfig.lib.json",
             "project": "projects/igniteui-angular/ng-package.json"

README.md

@@ -45,14 +45,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.1.0",
-    "@angular/common": "^10.1.0",
-    "@angular/compiler": "^10.1.0",
-    "@angular/core": "^10.1.0",
-    "@angular/forms": "^10.1.0",
-    "@angular/platform-browser": "^10.1.0",
-    "@angular/platform-browser-dynamic": "^10.1.0",
-    "@angular/router": "^10.1.0",
+    "@angular/animations": "^11.0.0-rc.1",
+    "@angular/common": "^11.0.0-rc.1",
+    "@angular/compiler": "^11.0.0-rc.1",
+    "@angular/core": "^11.0.0-rc.1",
+    "@angular/forms": "^11.0.0-rc.1",
+    "@angular/platform-browser": "^11.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^11.0.0-rc.1",
+    "@angular/router": "^11.0.0-rc.1",
     "@igniteui/material-icons-extended": "^2.4.0",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
@@ -71,12 +71,11 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1001.0",
-    "@angular-devkit/build-ng-packagr": "~0.1001.0",
-    "@angular-devkit/schematics": "^10.1.0",
-    "@angular/cli": "~10.1.0",
-    "@angular/compiler-cli": "^10.1.0",
-    "@angular/language-service": "^10.1.0",
+    "@angular-devkit/build-angular": "~0.1100.0-rc.1",
+    "@angular-devkit/schematics": "^11.0.0-rc.1",
+    "@angular/cli": "~11.0.0-rc.1",
+    "@angular/compiler-cli": "^11.0.0-rc.1",
+    "@angular/language-service": "^11.0.0-rc.1",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "^3.3.16",
     "@types/jasminewd2": "^2.0.8",
@@ -101,7 +100,7 @@
     "jasmine": "~3.5.0",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.2",
-    "karma": "~5.0.0",
+    "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~3.3.0",
@@ -110,7 +109,7 @@
     "karma-junit-reporter": "~2.0.1",
     "karma-spec-reporter": "~0.0.32",
     "lunr": "^2.3.8",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^11.0.0-next.3",
     "pngcrush": "^2.0.1",
     "protractor": "~7.0.0",
     "sassdoc": "^2.7.3",

angular.json

@@ -147,7 +147,7 @@ export class UpdateChanges {
     }
 
     /** Add condition function. */
-    public addCondition(conditionName: string, callback: (ownerMatch: string) => boolean) {
+    public addCondition(conditionName: string, callback: (ownerMatch: string, path: string) => boolean) {
         this.conditionFunctions.set(conditionName, callback);
     }
 
@@ -266,7 +266,7 @@ export class UpdateChanges {
 
             for (const match of matches) {
                 let replaceStatement = replace;
-                if (!this.areConditionsFulfiled(match, change.conditions)) {
+                if (!this.areConditionsFulfilled(match, change.conditions, entryPath)) {
                     continue;
                 }
 
@@ -403,12 +403,12 @@ export class UpdateChanges {
         }
     }
 
-    private areConditionsFulfiled(match: string, conditions: string[]): boolean {
+    private areConditionsFulfilled(match: string, conditions: string[], entryPath: string): boolean {
         if (conditions) {
             for (const condition of conditions) {
                 if (this.conditionFunctions && this.conditionFunctions.has(condition)) {
                     const callback = this.conditionFunctions.get(condition);
-                    if (callback && !callback(match)) {
+                    if (callback && !callback(match, entryPath)) {
                         return false;
                     }
                 }

package-lock.json

@@ -223,23 +223,39 @@ export function createProjectService(serverHost: tss.server.ServerHost): tss.ser
 export function getTypeDefinitionAtPosition(langServ: tss.LanguageService, entryPath: string, position: number): tss.DefinitionInfo | null {
     const definition = langServ.getDefinitionAndBoundSpan(entryPath, position)?.definitions[0];
     if (!definition) { return null; }
+
+    // if the definition's kind is a reference, the identifier is a template variable referred in an internal/external template
     if (definition.kind.toString() === 'reference') {
-        // template variable in an internal/external template
         return langServ.getDefinitionAndBoundSpan(entryPath, definition.textSpan.start).definitions[0];
     }
     let typeDefs = langServ.getTypeDefinitionAtPosition(entryPath, definition.textSpan.start);
+    // if there are no type definitions found, the identifier is a ts property, referred in an internal/external template
+    // or is a reference in a decorator
     if (!typeDefs) {
-        // ts property referred in an internal/external template
-        const classDeclaration = langServ
-            .getProgram()
-            .getSourceFile(definition.fileName)
+        /*
+         normally, the tsserver will consider non .ts files as external to the project
+         however, we load .html files which we can handle with the Angular language service
+         here we're only looking for definitions in a .ts source file
+         we call the getSourceFile function which accesses a map of files, previously loaded by the tsserver
+         at this point the map contains all .html files that we've included
+         we have to ignore them, since the language service will attempt to parse them as .ts files
+        */
+        if (!definition.fileName.endsWith('.ts')) { return null; }
+
+        const sourceFile = langServ.getProgram().getSourceFile(definition.fileName);
+        if (!sourceFile) { return null; }
+
+        const classDeclaration = sourceFile
             .statements
             .filter(<(a: tss.Statement) => a is tss.ClassDeclaration>(m => m.kind === tss.SyntaxKind.ClassDeclaration))
             .find(m => m.name.getText() === definition.containerName);
-        const member: ts.ClassElement = classDeclaration
-            ?.members
-            .find(m => m.name.getText() === definition.name);
-        if (!member || !member.name) { return null; }
+
+        // there must be at least one class declaration in the .ts file and the property must belong to it
+        if (!classDeclaration) { return null; }
+
+        const member: ts.ClassElement = classDeclaration.members.find(m => m.name.getText() === definition.name);
+        if (!member?.name) { return null; }
+
         typeDefs = langServ.getTypeDefinitionAtPosition(definition.fileName, member.name.getStart() + 1);
     }
     if (typeDefs?.length) {

package.json

@@ -3,22 +3,30 @@ import * as path from 'path';
 import { SchematicContext, Tree } from '@angular-devkit/schematics';
 import { WorkspaceSchema, WorkspaceProject, ProjectType } from '@schematics/angular/utility/workspace-models';
 import { execSync } from 'child_process';
+import {
+    Attribute,
+    Comment,
+    Element,
+    Expansion,
+    ExpansionCase,
+    getHtmlTagDefinition,
+    HtmlParser,
+    Node,
+    Text,
+    Visitor
+} from '@angular/compiler';
+import { replaceMatch } from './tsUtils';
 
 const configPaths = ['/.angular.json', '/angular.json'];
 
 export function getProjectPaths(config: WorkspaceSchema, appendPrefix = true): string[] {
     const sourceDirs = [];
-    let globalPrefix;
 
-    if (config.schematics && config.schematics['@schematics/angular:component']) {
-        // updated projects have global prefix rather than per-project:
-        globalPrefix = config.schematics['@schematics/angular:component'].prefix;
-    }
     const projects = getProjects(config);
     for (const proj of projects) {
         let sourcePath = path.join('/', proj.sourceRoot);
-        if (appendPrefix && (proj.prefix || globalPrefix)) {
-            sourcePath = path.join(sourcePath, proj.prefix || globalPrefix);
+        if (appendPrefix && (proj.prefix)) {
+            sourcePath = path.join(sourcePath, proj.prefix);
         }
         sourceDirs.push(normalize(sourcePath));
     }
@@ -116,3 +124,150 @@ export function tryUninstallPackage(context: SchematicContext, packageManager: s
             .warn(`Could not uninstall ${pkg}, you may want to uninstall it manually.`, JSON.parse(e));
     }
 }
+
+interface TagOffset {
+    start: number;
+    end: number;
+}
+
+export interface SourceOffset {
+    startTag: TagOffset;
+    endTag: TagOffset;
+    file: {
+        content: string;
+        url: string;
+    };
+    node?: Element;
+}
+
+
+export class FileChange {
+
+    constructor(
+        public position = 0,
+        public text = '',
+        public replaceText = '',
+        public type: 'insert' | 'replace' = 'insert'
+        ) {}
+
+    apply(content: string) {
+        if (this.type === 'insert') {
+            return `${content.substring(0, this.position)}${this.text}${content.substring(this.position)}`;
+        }
+        return replaceMatch(content, this.replaceText, this.text, this.position);
+    }
+}
+
+/**
+ * Parses an Angular template file/content and returns an array of the root nodes of the file.
+ *
+ * @param host
+ * @param filePath
+ * @param encoding
+ */
+export function parseFile(host: Tree, filePath: string, encoding = 'utf8') {
+    return new HtmlParser().parse(host.read(filePath).toString(encoding), filePath).rootNodes;
+}
+
+export function findElementNodes(root: Node[], tag: string | string[]): Node[] {
+    const tags = new Set(Array.isArray(tag) ? tag : [tag]);
+    return flatten(Array.isArray(root) ? root : [root])
+        .filter((node: Element) => tags.has(node.name));
+}
+
+export function hasAttribute(root: Element, attribute: string | string[]) {
+    const attrs = Array.isArray(attribute) ? attribute : [attribute];
+    return !!root.attrs.find(a => attrs.includes(a.name));
+}
+
+export function getAttribute(root: Element, attribute: string | string[]) {
+    const attrs = Array.isArray(attribute) ? attribute : [attribute];
+    return root.attrs.filter(a => attrs.includes(a.name));
+}
+
+export function getSourceOffset(element: Element): SourceOffset {
+    const { startSourceSpan, endSourceSpan } = element;
+    return {
+        startTag: { start: startSourceSpan.start.offset, end: startSourceSpan.end.offset },
+        endTag: { start: endSourceSpan.start.offset, end: endSourceSpan.end.offset },
+        file: {
+            content: startSourceSpan.start.file.content,
+            url: startSourceSpan.start.file.url
+        },
+        node: element
+    };
+}
+
+
+function isElement(node: Node | Element): node is Element {
+    return (node as Element).children !== undefined;
+}
+
+/**
+ * Given an array of `Node` objects, flattens the ast tree to a single array.
+ * De facto only `Element` type objects have children.
+ *
+ * @param list
+ */
+export function flatten(list: Node[]) {
+    let node: Node;
+    let r: Node[] = [];
+
+    for (let i = 0; i < list.length; i++) {
+        node = list[i];
+        r.push(node);
+
+        if (isElement(node)) {
+            r = r.concat(flatten(node.children));
+        }
+    }
+    return r;
+}
+
+/**
+ * https://github.com/angular/angular/blob/master/packages/compiler/test/ml_parser/util/util.ts
+ *
+ * May be useful for validating the output of our own migrations,
+ */
+class SerializerVisitor implements Visitor {
+
+    visitElement(element: Element, context: any): any {
+        if (getHtmlTagDefinition(element.name).isVoid) {
+            return `<${element.name}${this._visitAll(element.attrs, ' ')}/>`;
+        }
+
+        return `<${element.name}${this._visitAll(element.attrs, ' ')}>${this._visitAll(element.children)}</${element.name}>`;
+    }
+
+    visitAttribute(attribute: Attribute, context: any): any {
+        return attribute.value === '' ? `${attribute.name}` : `${attribute.name}="${attribute.value}"`;
+    }
+
+    visitText(text: Text, context: any): any {
+        return text.value;
+    }
+
+    visitComment(comment: Comment, context: any): any {
+        return `<!--${comment.value}-->`;
+    }
+
+    visitExpansion(expansion: Expansion, context: any): any {
+        return `{${expansion.switchValue}, ${expansion.type},${this._visitAll(expansion.cases)}}`;
+    }
+
+    visitExpansionCase(expansionCase: ExpansionCase, context: any): any {
+        return ` ${expansionCase.value} {${this._visitAll(expansionCase.expression)}}`;
+    }
+
+    private _visitAll(nodes: Node[], join: string = ''): string {
+        if (nodes.length === 0) {
+            return '';
+        }
+        return join + nodes.map(a => a.visit(this, null)).join(join);
+    }
+}
+
+
+export function serializeNodes(nodes: Node[]): string[] {
+    return nodes.map(node => node.visit(new SerializerVisitor(), null));
+}

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

@@ -85,6 +85,11 @@
             "version": "10.2.0",
             "description": "Updates Ignite UI for Angular from v10.1.x to v10.2.0",
             "factory": "./update-10_2_0"
+        },
+        "migration-18": {
+            "version": "11.0.0",
+            "description": "Updates Ignite UI for Angular from v10.2.x to v11.0.0",
+            "factory": "./update-11_0_0"
         }
     }
 }

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

@@ -0,0 +1,37 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-row-island",
+                "type": "component"
+            }
+        }
+    ]
+}