feat(igr-ts): add igr-ts proj type (#1146)

* switch to react functions initial commit

* fix(igr-es6): switch to functions in all views

* feat(igr-es6): add igr-ts-es6 proj type

* fix(igr-ts-es6): update react router version and style import

* Revert "fix(igr-es6): switch to functions in all views"

This reverts commit ab678d1.

* Revert "switch to react functions initial commit"

This reverts commit 338bd1e.

* chore(*): fix template names

* chore(*): fix comment

* fix(igr-ts-es6): configure tests

* chore(*): remove %PUBLIC_URL% from index.html

* chore(*): make app test more generic

* chore(*): update test config and clean leftovers

* chore(*): uncomment groups logic

* chore(*): add config for igr-ts-es6 process

* chore(*): add groups.json

* feat(igr-ts-es6): add base with home template + minor chanegs

* feat(igr-ts-es6): add view to top-nav

* chore(*): update readme

* chore: release 12.0.6-alpha.0

* feat(react): add base template

* fix(react): igr-ts-es6 -> ig-ts

* chore(*): minor change in React template

* chore: release 12.0.6-alpha.1

* chore: update react grid to latest #1147

* chore: release 12.0.6-beta.0

* chore: add force to install commands

* feat(igr-ts): add deprecated to old react

* chore: remove serviceWorker

* chore: update packages

* chore: formatting

* chore: remove asyncComponent

* chore: fix lint

* chore: add asyncComponent to top-nav

* chore: remove unused imports

* fix: search for empty template insted of first one

* chore: fix lint

* chore: unused import

* chore: unused imports

* chore: release v12.0.6-beta.1

* release: 12.1.0-beta.0

* chore: set default port #1153

* chore: fix lint and remove .env file

* chore: remove unused imports

* feat: upgrade to react router 6

* chore: release 12.1.0-beta.1

* chore: fix lint

* chore: rename template files

* chore: fix component registration

* fix: igr-ts specificPath

* fix: react igr ts templates

* chore: fix lint

* chore: release 12.1.0-beta.2

* chore: remove obsolete files and packages

* chore: update igniteui-react version+remove unused func

* chore: edit launch config

* chore: release 12.1.0-beta.3

* fix: use createBrowserRouter api

* chore: release 12.1.0-beta.4

* chore: fix package versions

* chore: address PR comments

* chore: remove empty line

* chore: add new line at the end

* chore: fix indentation

* chore: indent

* fix: igr-es6 project

* chore: fix lint

---------

Co-authored-by: Maria Tsvyatkova <mtsvyatkova@infragistics.com>
Co-authored-by: igdmdimitrov <dmdimitrov@infragistics.com>
Co-authored-by: lipata <nikolay.alipiev@gmail.com>

.vscode/launch.json

@@ -87,6 +87,22 @@
 				"--framework=react"
 			]
 		},
+		{
+			"type": "node",
+			"request": "launch",
+			"name": "Launch New React TS ES6",
+			"cwd": "${workspaceRoot}/output",
+			"program": "${workspaceRoot}/packages/cli/bin/execute.js",
+			"console": "externalTerminal",
+			"preLaunchTask": "build",
+			"outFiles": ["${workspaceFolder}/**/*.js"],
+			"args": [
+				"new",
+				"reactproj",
+				"--framework=react",
+				"--type=igr-ts"
+			]
+		},
 		{
 			"type": "node",
 			"request": "launch",

packages/cli/lib/commands/add.ts

@@ -115,11 +115,23 @@ command = {
 	},
 	async addTemplate(fileName: string, template: Template, options?: AddTemplateArgs): Promise<boolean> {
 		if (!options) {
-			options = {
-				parentName: "app",
-				parentRoutingModulePath: "src/app/app-routing.ts",
-				selector: "app-" + template.id
-			};
+			if (template.framework === "react") {
+				options = {
+					parentName: "app",
+					className: Util.className(fileName),
+					modulePath: `src/app/${Util.lowerDashed(fileName)}`
+				};
+
+				options["parentRoutingModulePath"] = template.projectType === "igr-ts"
+					? "src/app/app-routes.tsx"
+					: "./src/routes.json";
+			} else {
+				options = {
+					parentName: "app",
+					parentRoutingModulePath: "src/app/app-routing.ts",
+					selector: "app-" + template.id
+				};
+			}
 		}
 
 		fileName = fileName.trim();

packages/cli/lib/commands/new.ts

@@ -109,7 +109,11 @@ command = {
 
 		const theme = projectLib.themes[themeIndex];
 
-		const projectTemplate = argv.template || projectLib.projectIds[0];
+		const indexOfEmptyOrFirst = projectLib.projectIds.indexOf("empty") !== -1
+			? projectLib.projectIds.indexOf("empty")
+			: 0;
+
+		const projectTemplate = argv.template || projectLib.projectIds[indexOfEmptyOrFirst];
 		Util.log(`Project Name: ${argv.name}, framework ${argv.framework}, type ${projectLib.projectType}, theme ${theme}`);
 		const projTemplate = projectLib.getProject(projectTemplate);
 		if (projTemplate == null) {

packages/cli/lib/commands/start.ts

@@ -84,12 +84,16 @@ command = {
 				break;
 			case "react":
 				if (port) {
-					// https://facebook.github.io/create-react-app/docs/advanced-configuration
-					// react-scripts start "--port=dafaultPort" is not a valid command for all environments.
-					// .env file is included and used by both igr-es6 and es6 now,
-					// to specify the port for all environments (Windows, Mac, etc)
-					process.env.PORT = `${port}`;
-					port = null;
+					if (projectType === "igr-ts") {
+						execSyncNpmStart(port, options);
+					} else {
+						// https://facebook.github.io/create-react-app/docs/advanced-configuration
+						// react-scripts start "--port=dafaultPort" is not a valid command for all environments.
+						// .env file is included and used by both igr-es6 and es6 now,
+						// to specify the port for all environments (Windows, Mac, etc)
+						process.env.PORT = `${port}`;
+						port = null;
+					}
 				}
 			/* falls through */
 			case "angular":

packages/cli/lib/templates/IgniteUIForReactTemplate.ts

@@ -1,6 +1,16 @@
-import { AddTemplateArgs, ControlExtraConfiguration, defaultDelimiters, Template, Util } from "@igniteui/cli-core";
+import {
+	AddTemplateArgs,
+	App,
+	ControlExtraConfiguration,
+	defaultDelimiters,
+	FS_TOKEN,
+	IFileSystem,
+	Template,
+	Util
+} from "@igniteui/cli-core";
 import * as fs from "fs-extra";
 import * as path from "path";
+import { ReactTypeScriptFileUpdate } from "../../templates/react/ReactTypeScriptFileUpdate";
 
 export class IgniteUIForReactTemplate implements Template {
 	public components: string[];
@@ -12,15 +22,13 @@ export class IgniteUIForReactTemplate implements Template {
 	public description: string;
 	public dependencies: string[] = [];
 	public framework: string = "react";
-	public projectType = "igr-es6";
+	public projectType: string;
 	public hasExtraConfiguration: boolean = false;
 	public packages = [];
 	public delimiters = defaultDelimiters;
 	// non-standard template prop
 	protected widget: string;
 
-	private configFile: string = "./src/routes.json";
-
 	/**
 	 * Base ReactTemplate constructor
 	 * @param rootPath The template folder path. Pass in `__dirname`
@@ -40,6 +48,7 @@ export class IgniteUIForReactTemplate implements Template {
 		config["path"] = this.folderName(name); //folder name allowed spaces, any casing
 		config["name"] = Util.nameFromPath(name); // this name should not have restrictions
 		config["ClassName"] = Util.className(Util.nameFromPath(name)); //first letter capital, no spaces and no dashes,
+		config["filePrefix"] = Util.lowerDashed(Util.nameFromPath(name));
 		config["cliVersion"] = Util.version();
 		if (this.widget) {
 			config["widget"] = this.widget;
@@ -52,19 +61,53 @@ export class IgniteUIForReactTemplate implements Template {
 		return config;
 	}
 
-	public registerInProject(projectPath: string, name: string, options?: AddTemplateArgs) {
-		if (options && options.skipRoute) {
+	public registerInProject(projectPath: string, name: string, options?: AddTemplateArgs, defaultPath = false) {
+		if (!options.parentName) {
 			return;
 		}
-		const configFile = fs.readFileSync(path.join(projectPath, this.configFile), "utf8");
-		const viewsArr = JSON.parse(configFile);
-		viewsArr.push({
-			componentPath: this.getViewLink(name),
-			path: "/" + this.folderName(Util.nameFromPath(name)),
-			text: this.getToolbarLink(name)
-		});
 
-		fs.writeFileSync(path.join(projectPath, this.configFile), JSON.stringify(viewsArr, null, 4));
+		if (this.projectType === "igr-es6") {
+			this.registerJSONRoute(projectPath, name, options.parentRoutingModulePath);
+			return;
+		}
+
+		const routeModulePath: string = options.parentRoutingModulePath;
+
+		if (!(options && options.skipRoute)
+			&& App.container.get<IFileSystem>(FS_TOKEN).fileExists(routeModulePath)) {
+			let nameFromPath = Util.nameFromPath(name);
+			let lowerDashed = Util.lowerDashed(nameFromPath);
+			let filePath = path.posix.join(projectPath, options.modulePath, `${lowerDashed}.tsx`);
+			const routingModule = new ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath));
+
+			if (defaultPath) {
+				routingModule.addRoute("", options.className, nameFromPath, filePath, options.routerChildren, undefined);
+			}
+
+			routingModule.addRoute(
+				lowerDashed,
+				options.className,
+				nameFromPath,
+				filePath,
+				options.routerChildren,
+				undefined
+			);
+
+			if (options.hasChildren) {
+				nameFromPath = Util.nameFromPath(`${options.modulePath}-routes.tsx`);
+				lowerDashed = Util.lowerDashed(nameFromPath);
+				filePath = path.posix.join(projectPath, options.modulePath, nameFromPath);
+
+				routingModule.addRoute(
+					lowerDashed,
+					options.className,
+					nameFromPath,
+					filePath,
+					options.routerChildren,
+					options.importAlias
+				);
+			}
+		}
 	}
 	public getExtraConfiguration(): ControlExtraConfiguration[] {
 		throw new Error("Method not implemented.");
@@ -93,6 +136,19 @@ export class IgniteUIForReactTemplate implements Template {
 		}
 		return Util.lowerDashed(folderName);
 	}
+
+	protected registerJSONRoute(projectPath: string, name: string, routingModulePath: string) {
+		const configFile = fs.readFileSync(path.join(projectPath, routingModulePath), "utf8");
+		const viewsArr = JSON.parse(configFile);
+		viewsArr.push({
+			componentPath: this.getViewLink(name),
+			path: "/" + this.folderName(Util.nameFromPath(name)),
+			text: this.getToolbarLink(name)
+		});
+
+		fs.writeFileSync(path.join(projectPath, routingModulePath), JSON.stringify(viewsArr, null, 4));
+	}
+
 	protected getViewLink(name: string): string {
 		const filePath = "./views/" + this.folderName(name);
 		return filePath;

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "13.0.2",
+  "version": "12.1.0-beta.4",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -78,8 +78,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~17.0.1302",
-    "@igniteui/cli-core": "~13.0.2",
+    "@igniteui/angular-templates": "~17.0.1210-beta.4",
+    "@igniteui/cli-core": "~12.1.0-beta.4",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",