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

.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,20 @@ 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",
+					parentRoutingModulePath: "src/app/app-routes.tsx",
+					className: Util.className(fileName),
+					modulePath: `src/app/${Util.lowerDashed(fileName)}`
+				};
+			} 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,15 @@
-import { AddTemplateArgs, ControlExtraConfiguration, defaultDelimiters, Template, Util } from "@igniteui/cli-core";
-import * as fs from "fs-extra";
+import {
+	AddTemplateArgs,
+	App,
+	ControlExtraConfiguration,
+	defaultDelimiters,
+	FS_TOKEN,
+	IFileSystem,
+	Template,
+	Util
+} from "@igniteui/cli-core";
 import * as path from "path";
+import { ReactTypeScriptFileUpdate } from "../../templates/react/ReactTypeScriptFileUpdate";
 
 export class IgniteUIForReactTemplate implements Template {
 	public components: string[];
@@ -12,15 +21,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 +47,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 +60,48 @@ 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));
+		const routeModulePath: string = options.parentRoutingModulePath;
+		const routingModule = new ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath));
+
+		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`);
+
+			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,14 +130,4 @@ export class IgniteUIForReactTemplate implements Template {
 		}
 		return Util.lowerDashed(folderName);
 	}
-	protected getViewLink(name: string): string {
-		const filePath = "./views/" + this.folderName(name);
-		return filePath;
-	}
-
-	protected getToolbarLink(name: string): string {
-		name = Util.nameFromPath(name);
-		const toolbarLink = name.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
-		return toolbarLink;
-	}
 }

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",