Add support for typescript 4.5.x

CHANGELOG.md

@@ -1,3 +1,54 @@
+# [9.0.4](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.3...v9.0.4)  (2021-12-15)
+## igniteui/cli-core@9.0.4
+
+* Note: Version bump only for package igniteui/cli-core
+
+## igniteui/angular-templates@13.0.904
+
+* Note: Version bump only for package igniteui/angular-templates
+
+## igniteui/angular-schematics@13.0.904
+
+* Note: Version bump only for package igniteui/angular-schematics
+
+## igniteui-cli@9.0.4
+
+- `igniteui-webcomponents` - Fix lint for grid templates [PR #965](https://github.com/IgniteUI/igniteui-cli/pull/965)
+
+# [9.0.3](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.2...v9.0.3)  (2021-12-13)
+## igniteui/cli-core@9.0.3 
+
+* Note: Version bump only for package igniteui/cli-core
+
+## igniteui/angular-templates@13.0.903
+
+* Fix home import without placeholder [PR #966](https://github.com/IgniteUI/igniteui-cli/pull/966)
+
+## igniteui/angular-schematics@13.0.903
+
+* Note: Version bump only for package igniteui/angular-schematics
+
+## igniteui-cli@9.0.3
+
+* Note: Version bump only for package igniteui-cli
+
+# [9.0.2](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.1...v9.0.2)  (2021-12-10)
+## igniteui/cli-core@9.0.2
+
+- `igniteui-webcomponents` - adding more Web components templates & bundling [PR #954](https://github.com/IgniteUI/igniteui-cli/pull/954)
+
+## igniteui/angular-templates@13.0.902
+
+* Update @imports to @use for scss modules [PR #961](https://github.com/IgniteUI/igniteui-cli/pull/961)
+
+## igniteui/angular-schematics@13.0.902
+
+* Note: Version bump only for package igniteui/angular-schematics
+
+## igniteui-cli@9.0.2
+
+* Note: Version bump only for package igniteui-cli@9.0.2
+
 # [9.0.1](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.0...v9.0.1)  (2021-11-25)
 
 All packages are configured to use `typescript` version, lower than `4.5.x`, until there is a compatibility with the later `typescript` version.

package.json

@@ -79,7 +79,7 @@
 		"source-map-support": "^0.5.4",
 		"ts-node": "^6.2.0",
 		"tslint": "^5.11.0",
-		"typescript": "~4.4.4",
+		"typescript": "~4.5.2",
 		"typescript-json-schema": "^0.42.0"
 	},
 	"workspaces": [

packages/cli/migrations/update-4_2_3/index.spec.ts

@@ -26,7 +26,7 @@ describe("Update 4.2.3", () => {
 	it("should add Awesome Grid extra paginator style", async done => {
 		const stylesFile = "/src/app/awesome-grid/awesome-grid.component.scss";
 		appTree.create(stylesFile,
-`@import '~igniteui-angular/theming';
+`@use 'igniteui-angular/theming' as *;
 
 :host ::ng-deep {
 
@@ -46,7 +46,7 @@ describe("Update 4.2.3", () => {
 		await schematicRunner.runSchematicAsync("migration-04", {}, appTree).toPromise();
 		expect(appTree.readContent(stylesFile).replace(/\r\n/g, "\n"))
 			.toEqual(
-`@import '~igniteui-angular/theming';
+`@use 'igniteui-angular/theming' as *;
 
 :host ::ng-deep {
 

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "9.0.1",
+  "version": "9.0.4",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -78,16 +78,16 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~13.0.901",
-    "@igniteui/cli-core": "~9.0.1",
+    "@igniteui/angular-templates": "~13.0.904",
+    "@igniteui/cli-core": "~9.0.4",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
     "inquirer": "^6.4.1",
     "opn": "^5.3.0",
     "resolve": "^1.6.0",
     "through2": "^2.0.3",
-    "typescript": "~4.4.4",
+    "typescript": "~4.5.2",
     "yargs": "^8.0.2"
   },
   "devDependencies": {

packages/cli/templates/angular/ig-ts/projects/empty/files/package.json

@@ -10,26 +10,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.0.0",
-    "@angular/common": "~13.0.0",
-    "@angular/compiler": "~13.0.0",
-    "@angular/core": "~13.0.0",
-    "@angular/forms": "~13.0.0",
-    "@angular/platform-browser": "~13.0.0",
-    "@angular/platform-browser-dynamic": "~13.0.0",
-    "@angular/router": "~13.0.0",
+    "@angular/animations": "~13.1.1",
+    "@angular/common": "~13.1.1",
+    "@angular/compiler": "~13.1.1",
+    "@angular/core": "~13.1.1",
+    "@angular/forms": "~13.1.1",
+    "@angular/platform-browser": "~13.1.1",
+    "@angular/platform-browser-dynamic": "~13.1.1",
+    "@angular/router": "~13.1.1",
     "jquery": ">=1.9.1",
     "jquery-ui": ">=1.10.5",
-    "igniteui-angular-wrappers": "^13.0.1",
-    "ignite-ui": "~20.2",
+    "igniteui-angular-wrappers": "^13.1.0",
+    "ignite-ui": "~21.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.1",
-    "@angular/cli": "~13.0.1",
-    "@angular/compiler-cli": "~13.0.0",
+    "@angular-devkit/build-angular": "~13.1.2",
+    "@angular/cli": "~13.1.2",
+    "@angular/compiler-cli": "~13.1.1",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
     "igniteui-cli": "^$(cliVersion)",
@@ -39,6 +39,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.4.4"
+    "typescript": "~4.5.2"
   }
 }

packages/cli/templates/jquery/js/projects/empty/files/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "jquery": ">=1.9.1",
     "jquery-ui": ">=1.10.5",
-    "ignite-ui": "~20.1"
+    "ignite-ui": "~21.2"
   },
   "devDependencies": {
     "browser-sync": "^2.26.3",

packages/cli/templates/quickstart/angular/package.json

@@ -31,7 +31,7 @@
   "devDependencies": {
     "concurrently": "^3.1.0",
     "lite-server": "^2.5.4",
-    "typescript": "~4.4.4",
+    "typescript": "~4.5.2",
     "canonical-path": "0.0.2",
     "http-server": "^0.12.1",
     "tslint": "~6.1.0",

packages/cli/templates/quickstart/react/package.json

@@ -15,7 +15,7 @@
   "bin": {
   },
   "dependencies": {
-    "ignite-ui": "~20.1",
+    "ignite-ui": "~21.2",
     "lite-server": "^2.3.0",
     "babel-runtime": "6.22.0",
     "react": "15.4.2",

packages/cli/templates/react/igr-es6/bullet-graph/default/index.ts

@@ -10,7 +10,7 @@ class IgrBulletGraphTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-es6";
 		this.name = "Bullet Graph";
 		this.description = `allows for a linear and concise view of measures compared against a scale.`;
-		this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+		this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
 	}
 }
 module.exports = new IgrBulletGraphTemplate();

packages/cli/templates/react/igr-es6/category-chart/default/index.ts

@@ -11,7 +11,7 @@ class IgrCategoryChartTemplate extends IgniteUIForReactTemplate {
 		this.name = "Category Chart";
 		this.description = `makes visualizing category data easy. Simplifies the complexities
 							of the data visualization domain into manageable API`;
-		this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+		this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
 	}
 }
 module.exports = new IgrCategoryChartTemplate();

packages/cli/templates/react/igr-es6/doughnut-chart/default/index.ts

@@ -10,7 +10,7 @@ class IgrDoughnutChartTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-es6";
 		this.name = "Doughnut Chart";
 		this.description = `proportionally illustrate the occurrences of variables.`;
-		this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+		this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
 	}
 }
 module.exports = new IgrDoughnutChartTemplate();

packages/cli/templates/react/igr-es6/financial-chart/default/index.ts

@@ -12,7 +12,7 @@ class IgrFinancialChartTemplate extends IgniteUIForReactTemplate {
 		this.name = "Financial Chart";
 		this.description = `charting component that makes it easy to visualize financial data by
 							using a simple and intuitive API.`;
-		this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+		this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
 	}
 }
 module.exports = new IgrFinancialChartTemplate();

packages/cli/templates/react/igr-es6/grid/basic/index.ts

@@ -15,8 +15,8 @@ class GridTemplate extends IgniteUIForReactTemplate {
 		this.components = ["Grid"];
 		this.controlGroup = "Data Grids";
 		// TODO: read version from igniteui-react-core in package.json
-		this.packages = ["igniteui-react-grids@~16.12.0", "igniteui-react-inputs@~16.12.0",
-			"igniteui-react-layouts@~16.12.0"];
+		this.packages = ["igniteui-react-grids@~16.15.0", "igniteui-react-inputs@~16.15.0",
+			"igniteui-react-layouts@~16.15.0"];
 
 		this.hasExtraConfiguration = false;
 	}

packages/cli/templates/react/igr-es6/linear-gauge/default/index.ts

@@ -10,7 +10,7 @@ class IgrLinearGaugeTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-es6";
 		this.name = "Linear Gauge";
 		this.description = `value compared against a scale and one or more ranges.`;
-		this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+		this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
 	}
 }
 module.exports = new IgrLinearGaugeTemplate();

packages/cli/templates/react/igr-es6/pie-chart/default/index.ts

@@ -10,7 +10,7 @@ class IgrPieChartTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-es6";
 		this.name = "Pie Chart";
 		this.description = `easily illustate the proportions of data entries`;
-		this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+		this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
 	}
 }
 module.exports = new IgrPieChartTemplate();

packages/cli/templates/react/igr-es6/projects/_base/files/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "igniteui-react-core": "~16.12.0",
+    "igniteui-react-core": "~16.15.0",
     "react": "^16.8.2",
     "react-app-polyfill": "^0.2.0",
     "react-dom": "^16.8.2",

packages/cli/templates/react/igr-es6/radial-gauge/default/index.ts

@@ -11,7 +11,7 @@ class IgrRadialGaugeTemplate extends IgniteUIForReactTemplate {
 		this.name = "Radial Gauge";
 		this.description = `provides a number of visual elements, like a needle, tick marks, ranges
 							and labels, in order to create a predefined shape and scale.`;
-		this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+		this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
 	}
 }
 module.exports = new IgrRadialGaugeTemplate();

packages/cli/templates/webcomponents/TypeScriptFileUpdate.ts

@@ -114,11 +114,11 @@ export class TypeScriptFileUpdate {
 								.concat(newObject);
 						}
 
-						const elements = ts.createNodeArray([
+						const elements = ts.factory.createNodeArray([
 							...resultNodes
 						]);
 
-						return ts.updateArrayLiteral(array, elements);
+						return ts.factory.updateArrayLiteralExpression(array, elements);
 					} else {
 						return ts.visitEachChild(node, conditionalVisitor, context);
 					}
@@ -161,22 +161,22 @@ export class TypeScriptFileUpdate {
 			return;
 		}
 
-		const newStatements = ts.createNodeArray([
+		const newStatements = ts.factory.createNodeArray([
 			...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
 			...newImports.map(x => this.createIdentifierImport(x.from)),
 			...this.targetSource.statements.slice(this.importsMeta.lastIndex)
 		]);
 		newImports.forEach(x => this.createdStringLiterals.push(x.from));
 
-		this.targetSource = ts.updateSourceFileNode(this.targetSource, newStatements);
+		this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements);
 	}
 
 	protected createIdentifierImport(importPath: string): ts.ImportDeclaration {
-		const importDeclaration = ts.createImportDeclaration(
+		const importDeclaration = ts.factory.createImportDeclaration(
 			undefined,
 			undefined,
 			undefined,
-			ts.createLiteral(importPath));
+			ts.factory.createStringLiteral(importPath));
 		return importDeclaration;
 	}
 
@@ -357,9 +357,9 @@ export class TypeScriptFileUpdate {
 	}
 
 	private createRouteEntry(filePath: string, className: string, linkText: string): ts.ObjectLiteralExpression {
-		const routePath = ts.createPropertyAssignment("path", ts.createLiteral(filePath));
-		const routeComponent = ts.createPropertyAssignment("component", ts.createLiteral(className));
-		const routeData = ts.createPropertyAssignment("name", ts.createLiteral(linkText));
-		return ts.createObjectLiteral([routePath, routeComponent, routeData]);
+		const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(filePath));
+		const routeComponent = ts.factory.createPropertyAssignment("component", ts.factory.createStringLiteral(className));
+		const routeData = ts.factory.createPropertyAssignment("name", ts.factory.createStringLiteral(linkText));
+		return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
 	}
 }

packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,61 @@
+import {
+  defineComponents,
+  IgcFormComponent,
+  IgcInputComponent,
+  IgcCheckboxComponent,
+  IgcButtonComponent
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
+
+export default class $(ClassName) extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <style>
+        #form {
+          flex-grow: 1;
+          display: flex;
+          flex-direction: column;
+        }
+        .buttonContainer {
+          display: flex;
+        }
+        .buttonContainer > igc-button {
+          flex: 1;
+        }
+      </style>
+
+      <div class="container sample">
+        <igc-form id="form">
+          <div>Subscribe</div>
+          <igc-input required name="name" type="text" label="Your Name"></igc-input>
+          <igc-input required name="email" type="email" label="Your E-mail"></igc-input>
+          <igc-checkbox name="agreement">I accept the license agreement</igc-checkbox>
+          <br />
+          <div class="buttonContainer">
+            <igc-button type="reset">Reset</igc-button>
+            <igc-button type="submit">Submit</igc-button>
+          </div>
+        </igc-form>
+      </div>
+    `;
+
+    document.addEventListener('igcSubmit', function (event) {
+      const customEvent = event as CustomEvent<FormData>;
+      const formData = customEvent.detail;
+      const formKeys = formData.keys();
+      const formEntries = formData.entries();
+      let result = '';
+      do {
+          const pair = formEntries.next().value;
+          if (pair) {
+              result += pair[0] + '=' + pair[1] + ';';
+          }
+        } while (!formKeys.next().done)
+      console.log(result);
+      alert(result);
+    });
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));