igniteui-cli 13.0.2 → 13.1.0-beta.2

package/lib/commands/add.js

@@ -109,11 +109,23 @@ command = {
     addTemplate(fileName, template, options) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!options) {
-                options = {
-                    parentName: "app",
-                    parentRoutingModulePath: "src/app/app-routing.ts",
-                    selector: "app-" + template.id
-                };
+                if (template.framework === "react") {
+                    options = {
+                        parentName: "app",
+                        className: cli_core_1.Util.className(fileName),
+                        modulePath: `src/app/${cli_core_1.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();
             const name = cli_core_1.Util.nameFromPath(fileName);

package/lib/commands/new.js

@@ -107,7 +107,10 @@ 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];
             cli_core_1.Util.log(`Project Name: ${argv.name}, framework ${argv.framework}, type ${projectLib.projectType}, theme ${theme}`);
             const projTemplate = projectLib.getProject(projectTemplate);
             if (projTemplate == null) {

package/lib/commands/start.js

@@ -81,12 +81,17 @@ 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":

package/lib/templates/IgniteUIForReactTemplate.d.ts

@@ -15,7 +15,6 @@ export declare class IgniteUIForReactTemplate implements Template {
     packages: any[];
     delimiters: import("@igniteui/cli-core").TemplateDelimiters;
     protected widget: string;
-    private configFile;
     /**
      * Base ReactTemplate constructor
      * @param rootPath The template folder path. Pass in `__dirname`
@@ -25,10 +24,11 @@ export declare class IgniteUIForReactTemplate implements Template {
     generateConfig(name: string, options: {}): {
         [key: string]: any;
     };
-    registerInProject(projectPath: string, name: string, options?: AddTemplateArgs): void;
+    registerInProject(projectPath: string, name: string, options?: AddTemplateArgs, defaultPath?: boolean): void;
     getExtraConfiguration(): ControlExtraConfiguration[];
     setExtraConfiguration(extraConfigKeys: {}): void;
     protected folderName(pathName: string): string;
+    protected registerJSONRoute(projectPath: string, name: string, routingModulePath: string): void;
     protected getViewLink(name: string): string;
     protected getToolbarLink(name: string): string;
 }

package/lib/templates/IgniteUIForReactTemplate.js

@@ -4,6 +4,7 @@ exports.IgniteUIForReactTemplate = void 0;
 const cli_core_1 = require("@igniteui/cli-core");
 const fs = require("fs-extra");
 const path = require("path");
+const ReactTypeScriptFileUpdate_1 = require("../../templates/react/ReactTypeScriptFileUpdate");
 class IgniteUIForReactTemplate {
     /**
      * Base ReactTemplate constructor
@@ -15,11 +16,9 @@ class IgniteUIForReactTemplate {
         this.listInCustomTemplates = false;
         this.dependencies = [];
         this.framework = "react";
-        this.projectType = "igr-es6";
         this.hasExtraConfiguration = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;
-        this.configFile = "./src/routes.json";
     }
     get templatePaths() {
         return [path.join(this.rootPath, "files")];
@@ -32,6 +31,7 @@ class IgniteUIForReactTemplate {
         config["path"] = this.folderName(name); //folder name allowed spaces, any casing
         config["name"] = cli_core_1.Util.nameFromPath(name); // this name should not have restrictions
         config["ClassName"] = cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name)); //first letter capital, no spaces and no dashes,
+        config["filePrefix"] = cli_core_1.Util.lowerDashed(cli_core_1.Util.nameFromPath(name));
         config["cliVersion"] = cli_core_1.Util.version();
         if (this.widget) {
             config["widget"] = this.widget;
@@ -42,18 +42,32 @@ class IgniteUIForReactTemplate {
         }
         return config;
     }
-    registerInProject(projectPath, name, options) {
-        if (options && options.skipRoute) {
+    registerInProject(projectPath, name, options, 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(cli_core_1.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 = options.parentRoutingModulePath;
+        if (!(options && options.skipRoute)
+            && cli_core_1.App.container.get(cli_core_1.FS_TOKEN).fileExists(routeModulePath)) {
+            let nameFromPath = cli_core_1.Util.nameFromPath(name);
+            let lowerDashed = cli_core_1.Util.lowerDashed(nameFromPath);
+            let filePath = path.posix.join(projectPath, options.modulePath, `${lowerDashed}.tsx`);
+            const routingModule = new ReactTypeScriptFileUpdate_1.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 = cli_core_1.Util.nameFromPath(`${options.modulePath}-routes.tsx`);
+                lowerDashed = cli_core_1.Util.lowerDashed(nameFromPath);
+                filePath = path.posix.join(projectPath, options.modulePath, nameFromPath);
+                routingModule.addRoute(lowerDashed, options.className, nameFromPath, filePath, options.routerChildren, options.importAlias);
+            }
+        }
     }
     getExtraConfiguration() {
         throw new Error("Method not implemented.");
@@ -81,6 +95,16 @@ class IgniteUIForReactTemplate {
         }
         return cli_core_1.Util.lowerDashed(folderName);
     }
+    registerJSONRoute(projectPath, name, routingModulePath) {
+        const configFile = fs.readFileSync(path.join(projectPath, routingModulePath), "utf8");
+        const viewsArr = JSON.parse(configFile);
+        viewsArr.push({
+            componentPath: this.getViewLink(name),
+            path: "/" + this.folderName(cli_core_1.Util.nameFromPath(name)),
+            text: this.getToolbarLink(name)
+        });
+        fs.writeFileSync(path.join(projectPath, routingModulePath), JSON.stringify(viewsArr, null, 4));
+    }
     getViewLink(name) {
         const filePath = "./views/" + this.folderName(name);
         return filePath;

package/package.json

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

package/templates/angular/index.js

@@ -4,7 +4,7 @@ class AngularFramework {
         this.id = "angular";
         this.name = "Angular";
         this.projectLibraries = [];
-        this.projectLibraries.push(require("@igniteui/angular-templates").default);
+        this.projectLibraries.push(...require("@igniteui/angular-templates").default);
         this.projectLibraries.push(require("./ig-ts"));
     }
 }

package/templates/react/ReactTypeScriptFileUpdate.d.ts

@@ -0,0 +1,50 @@
+import * as ts from "typescript";
+/**
+ * Apply various updates to typescript files using AST
+ */
+export declare class ReactTypeScriptFileUpdate {
+    private targetPath;
+    protected formatOptions: {
+        spaces: boolean;
+        indentSize: number;
+        singleQuotes: boolean;
+    };
+    private fileSystem;
+    private targetSource;
+    private importsMeta;
+    private requestedImports;
+    private createdStringLiterals;
+    /** Create updates for a file. Use `add<X>` methods to add transformations and `finalize` to apply and save them. */
+    constructor(targetPath: string);
+    /** Applies accumulated transforms, saves and formats the file */
+    finalize(): void;
+    addRoute(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
+    /** Initializes existing imports info, [re]sets import and `NgModule` edits */
+    protected initState(): void;
+    protected loadImportsMeta(): {
+        lastIndex: number;
+        modulePaths: any[];
+    };
+    protected addRouteModuleEntry(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
+    protected requestImport(modulePath: string, routerAlias: string, componentName: string): void;
+    /** Add `import` statements not previously found in the file  */
+    protected addNewFileImports(): void;
+    protected createIdentifierImport(importPath: string, as: string, component: string): ts.ImportDeclaration;
+    /** Transformation to apply edits to existing named import declarations */
+    protected importsTransformer: ts.TransformerFactory<ts.Node>;
+    /** Format a TS source file, very TBD */
+    protected formatFile(filePath: string): void;
+    /**  Try and parse formatting from project `.editorconfig` / `tslint.json` */
+    protected readFormatConfigs(): void;
+    /**
+     * Apply formatting changes (position based) in reverse
+     * from https://github.com/Microsoft/TypeScript/issues/1651#issuecomment-69877863
+     */
+    private applyChanges;
+    /** Return source file formatting options */
+    private getFormattingOptions;
+    /** Get language service host, sloppily */
+    private getLanguageHost;
+    private createVisitor;
+    private createRouteEntry;
+}

package/templates/react/ReactTypeScriptFileUpdate.js

@@ -0,0 +1,333 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactTypeScriptFileUpdate = void 0;
+const cli_core_1 = require("@igniteui/cli-core");
+const ts = require("typescript");
+const DEFAULT_ROUTES_VARIABLE = "routes";
+/**
+ * Apply various updates to typescript files using AST
+ */
+class ReactTypeScriptFileUpdate {
+    /** Create updates for a file. Use `add<X>` methods to add transformations and `finalize` to apply and save them. */
+    constructor(targetPath) {
+        this.targetPath = targetPath;
+        this.formatOptions = { spaces: false, indentSize: 4, singleQuotes: false };
+        //#region ts.TransformerFactory
+        /** Transformation to apply edits to existing named import declarations */
+        this.importsTransformer = (context) => (rootNode) => {
+            const editImports = this.requestedImports.filter(x => x.edit);
+            // https://github.com/Microsoft/TypeScript/issues/14419#issuecomment-307256171
+            const visitor = (node) => {
+                if (node.kind === ts.SyntaxKind.ImportDeclaration &&
+                    editImports.find(x => x.from === node.moduleSpecifier.text)) {
+                    // visit just the source file main array (second visit)
+                    return visitImport(node);
+                }
+                else {
+                    node = ts.visitEachChild(node, visitor, context);
+                }
+                return node;
+            };
+            function visitImport(node) {
+                node = ts.visitEachChild(node, visitImport, context);
+                return node;
+            }
+            return ts.visitNode(rootNode, visitor);
+        };
+        this.fileSystem = cli_core_1.App.container.get(cli_core_1.FS_TOKEN);
+        this.initState();
+    }
+    /** Applies accumulated transforms, saves and formats the file */
+    finalize() {
+        // add new import statements after visitor walks:
+        this.addNewFileImports();
+        cli_core_1.TypeScriptUtils.saveFile(this.targetPath, this.targetSource);
+        this.formatFile(this.targetPath);
+        // reset state in case of further updates
+        this.initState();
+    }
+    addRoute(path, component, name, filePath, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
+        this.addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, routesVariable);
+    }
+    //#region File state
+    /** Initializes existing imports info, [re]sets import and `NgModule` edits */
+    initState() {
+        this.targetSource = cli_core_1.TypeScriptUtils.getFileSource(this.targetPath);
+        this.importsMeta = this.loadImportsMeta();
+        this.requestedImports = [];
+        this.createdStringLiterals = [];
+    }
+    /* load some metadata about imports */
+    loadImportsMeta() {
+        const meta = { lastIndex: 0, modulePaths: [] };
+        for (let i = 0; i < this.targetSource.statements.length; i++) {
+            const statement = this.targetSource.statements[i];
+            switch (statement.kind) {
+                case ts.SyntaxKind.ImportDeclaration:
+                    const importStmt = statement;
+                    if (importStmt.importClause && importStmt.importClause.namedBindings &&
+                        importStmt.importClause.namedBindings.kind !== ts.SyntaxKind.NamespaceImport) {
+                        // don't add imports without named (e.g. `import $ from "JQuery"` or `import "./my-module.js";`)
+                        // don't add namespace imports (`import * as fs`) as available for editing, maybe in the future
+                        meta.modulePaths.push(importStmt.moduleSpecifier.text);
+                    }
+                // don't add equals imports (`import url = require("url")`) as available for editing, maybe in the future
+                case ts.SyntaxKind.ImportEqualsDeclaration:
+                    meta.lastIndex = i + 1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        return meta;
+    }
+    //#endregion File state
+    addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
+        const isRouting = path.indexOf("routes") >= 0;
+        if (isRouting && this.targetSource.text.indexOf(path.slice(0, -4)) > 0) {
+            return;
+        }
+        if (path) {
+            const relativePath = cli_core_1.Util.relativePath(this.targetPath, filePath, true, true);
+            this.requestImport(relativePath, importAlias, component);
+        }
+        // https://github.com/Microsoft/TypeScript/issues/14419#issuecomment-307256171
+        const transformer = (context) => (rootNode) => {
+            // the visitor that should be used when adding routes to the main route array
+            const conditionalVisitor = (node) => {
+                if (node.kind === ts.SyntaxKind.ArrayLiteralExpression) {
+                    const newObject = this.createRouteEntry(path, component, name, routerChildren);
+                    const array = node;
+                    this.createdStringLiterals.push(path, name);
+                    const notFoundWildCard = ".*";
+                    const nodes = ts.visitNodes(array.elements, visitor);
+                    const errorRouteNode = nodes.filter(element => element.getText().includes(notFoundWildCard))[0];
+                    let resultNodes = null;
+                    if (errorRouteNode) {
+                        resultNodes = nodes
+                            .slice(0, nodes.indexOf(errorRouteNode))
+                            .concat(newObject)
+                            .concat(errorRouteNode);
+                    }
+                    else {
+                        resultNodes = nodes
+                            .concat(newObject);
+                    }
+                    const elements = ts.factory.createNodeArray([
+                        ...resultNodes
+                    ]);
+                    return ts.factory.updateArrayLiteralExpression(array, elements);
+                }
+                else {
+                    return ts.visitEachChild(node, conditionalVisitor, context);
+                }
+            };
+            let visitCondition;
+            if (!isRouting) {
+                visitCondition = (node) => {
+                    return node.kind === ts.SyntaxKind.VariableDeclaration &&
+                        node.name.getText() === routesVariable;
+                    // no type currently
+                    //(node as ts.VariableDeclaration).type.getText() === "Route[]";
+                };
+            }
+            else {
+                visitCondition = (node) => {
+                    return undefined;
+                };
+            }
+            const visitor = this.createVisitor(conditionalVisitor, visitCondition, context);
+            context.enableSubstitution(ts.SyntaxKind.ClassDeclaration);
+            return ts.visitNode(rootNode, visitor);
+        };
+        this.targetSource = ts.transform(this.targetSource, [transformer], {
+            pretty: true // oh well..
+        }).transformed[0];
+        this.finalize();
+    }
+    requestImport(modulePath, routerAlias, componentName) {
+        const existing = this.requestedImports.find(x => x.from === modulePath);
+        if (!existing) {
+            // new imports, check if already exists in file
+            this.requestedImports.push({
+                as: routerAlias,
+                from: modulePath,
+                component: componentName,
+                edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1
+            });
+        }
+        else {
+            return;
+        }
+    }
+    /** Add `import` statements not previously found in the file  */
+    addNewFileImports() {
+        const newImports = this.requestedImports.filter(x => !x.edit);
+        if (!newImports.length) {
+            return;
+        }
+        const newStatements = ts.factory.createNodeArray([
+            ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
+            ...newImports.map(x => this.createIdentifierImport(x.from, x.as, x.component)),
+            ...this.targetSource.statements.slice(this.importsMeta.lastIndex)
+        ]);
+        newImports.forEach(x => this.createdStringLiterals.push(x.from));
+        this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements);
+    }
+    createIdentifierImport(importPath, as, component) {
+        let exportedObject;
+        let exportedObjectName;
+        let importClause;
+        if (as) {
+            exportedObject = "routes";
+            exportedObjectName = as.replace(/\s/g, "");
+            importClause = ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+                ts.factory.createImportSpecifier(false, ts.factory.createIdentifier(exportedObject), ts.factory.createIdentifier(exportedObjectName))
+            ]));
+        }
+        else {
+            importClause = ts.factory.createImportClause(false, ts.factory.createIdentifier(component), undefined);
+        }
+        const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, importClause, ts.factory.createStringLiteral(importPath, true));
+        return importDeclaration;
+    }
+    //#endregion ts.TransformerFactory
+    //#region Formatting
+    /** Format a TS source file, very TBD */
+    formatFile(filePath) {
+        // formatting via LanguageService https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API
+        // https://github.com/Microsoft/TypeScript/issues/1651
+        let text = this.fileSystem.readFile(filePath);
+        // create the language service files
+        const services = ts.createLanguageService(this.getLanguageHost(filePath), ts.createDocumentRegistry());
+        this.readFormatConfigs();
+        const textChanges = services.getFormattingEditsForDocument(filePath, this.getFormattingOptions());
+        text = this.applyChanges(text, textChanges);
+        if (this.formatOptions.singleQuotes) {
+            for (const str of this.createdStringLiterals) {
+                // there shouldn't be duplicate strings of these
+                text = text.replace(`"${str}"`, `'${str}'`);
+            }
+        }
+        this.fileSystem.writeFile(filePath, text);
+    }
+    /**  Try and parse formatting from project `.editorconfig` / `tslint.json` */
+    readFormatConfigs() {
+        if (this.fileSystem.fileExists(".editorconfig")) {
+            // very basic parsing support
+            const text = this.fileSystem.readFile(".editorconfig", "utf-8");
+            const options = text
+                .replace(/\s*[#;].*([\r\n])/g, "$1") //remove comments
+                .replace(/\[(?!\*\]|\*.ts).+\][^\[]+/g, "") // leave [*]/[*.ts] sections
+                .split(/\r\n|\r|\n/)
+                .reduce((obj, x) => {
+                if (x.indexOf("=") !== -1) {
+                    const pair = x.split("=");
+                    obj[pair[0].trim()] = pair[1].trim();
+                }
+                return obj;
+            }, {});
+            this.formatOptions.spaces = options["indent_style"] === "space";
+            if (options["indent_size"]) {
+                this.formatOptions.indentSize = parseInt(options["indent_size"], 10) || this.formatOptions.indentSize;
+            }
+            if (options["quote_type"]) {
+                this.formatOptions.singleQuotes = options["quote_type"] === "single";
+            }
+        }
+        if (this.fileSystem.fileExists("tslint.json")) {
+            // tslint prio - overrides other settings
+            const options = JSON.parse(this.fileSystem.readFile("tslint.json", "utf-8"));
+            if (options.rules && options.rules.indent && options.rules.indent[0]) {
+                this.formatOptions.spaces = options.rules.indent[1] === "spaces";
+                if (options.rules.indent[2]) {
+                    this.formatOptions.indentSize = parseInt(options.rules.indent[2], 10);
+                }
+            }
+            if (options.rules && options.rules.quotemark && options.rules.quotemark[0]) {
+                this.formatOptions.singleQuotes = options.rules.quotemark.indexOf("single") !== -1;
+            }
+        }
+    }
+    /**
+     * Apply formatting changes (position based) in reverse
+     * from https://github.com/Microsoft/TypeScript/issues/1651#issuecomment-69877863
+     */
+    applyChanges(orig, changes) {
+        let result = orig;
+        for (let i = changes.length - 1; i >= 0; i--) {
+            const change = changes[i];
+            const head = result.slice(0, change.span.start);
+            const tail = result.slice(change.span.start + change.span.length);
+            result = head + change.newText + tail;
+        }
+        return result;
+    }
+    /** Return source file formatting options */
+    getFormattingOptions() {
+        const formatOptions = {
+            // tslint:disable:object-literal-sort-keys
+            indentSize: this.formatOptions.indentSize,
+            tabSize: 4,
+            newLineCharacter: ts.sys.newLine,
+            convertTabsToSpaces: this.formatOptions.spaces,
+            indentStyle: ts.IndentStyle.Smart,
+            insertSpaceAfterCommaDelimiter: true,
+            insertSpaceAfterSemicolonInForStatements: true,
+            insertSpaceBeforeAndAfterBinaryOperators: true,
+            insertSpaceAfterKeywordsInControlFlowStatements: true,
+            insertSpaceAfterTypeAssertion: true
+            // tslint:enable:object-literal-sort-keys
+        };
+        return formatOptions;
+    }
+    /** Get language service host, sloppily */
+    getLanguageHost(filePath) {
+        const files = {};
+        files[filePath] = { version: 0 };
+        // create the language service host to allow the LS to communicate with the host
+        const servicesHost = {
+            getCompilationSettings: () => ({}),
+            getScriptFileNames: () => Object.keys(files),
+            getScriptVersion: fileName => files[fileName] && files[fileName].version.toString(),
+            getScriptSnapshot: fileName => {
+                if (!this.fileSystem.fileExists(fileName)) {
+                    return undefined;
+                }
+                return ts.ScriptSnapshot.fromString(this.fileSystem.readFile(fileName));
+            },
+            getCurrentDirectory: () => process.cwd(),
+            getDefaultLibFileName: options => ts.getDefaultLibFilePath(options),
+            readDirectory: ts.sys.readDirectory,
+            readFile: ts.sys.readFile,
+            fileExists: ts.sys.fileExists
+        };
+        return servicesHost;
+    }
+    //#endregion Formatting
+    createVisitor(conditionalVisitor, visitCondition, nodeContext) {
+        return function visitor(node) {
+            if (visitCondition(node)) {
+                node = ts.visitEachChild(node, conditionalVisitor, nodeContext);
+            }
+            else {
+                node = ts.visitEachChild(node, visitor, nodeContext);
+            }
+            return node;
+        };
+    }
+    createRouteEntry(path, component, name, routerAlias) {
+        const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(path, true));
+        const jsxElement = ts.factory.createJsxSelfClosingElement(ts.factory.createIdentifier(component), [], undefined);
+        const routeComponent = ts.factory.createPropertyAssignment("element", jsxElement);
+        const routeData = ts.factory.createPropertyAssignment("text", ts.factory.createStringLiteral(name, true));
+        if (routerAlias) {
+            const childrenData = ts.factory.createPropertyAssignment("children", ts.factory.createIdentifier(routerAlias));
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData, childrenData]);
+        }
+        else {
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
+        }
+    }
+}
+exports.ReactTypeScriptFileUpdate = ReactTypeScriptFileUpdate;

package/templates/react/igr-es6/index.js

@@ -4,7 +4,7 @@ const cli_core_1 = require("@igniteui/cli-core");
 class IgrReactProjectLibrary extends cli_core_1.BaseProjectLibrary {
     constructor() {
         super(__dirname);
-        this.name = "Ignite UI for React";
+        this.name = "Ignite UI for React (deprecated)";
         this.projectType = "igr-es6";
         this.themes = ["default"];
         const groups = require("./groups.json");

package/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './index';
+
+test('renders $(ClassName) component', () => {
+    const wrapper = render(<$(ClassName) />);
+    expect(wrapper).toBeTruthy();
+});

package/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,56 @@
+import { IgrBulletGraphModule } from 'igniteui-react-gauges';
+import { IgrBulletGraph } from 'igniteui-react-gauges';
+import style from './style.module.css';
+
+IgrBulletGraphModule.register();
+
+
+export default function $(ClassName)() {
+    const title = 'Bullet Graph';
+
+    return (
+		<div>
+			<h1 className={style.title}>{title}</h1>
+			<div>
+				Read more on the&nbsp;
+				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/bulletgraph.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<div className={style.graph}>
+					<IgrBulletGraph
+						height="80px" width="400px"
+						minimumValue={0} value={70} interval={10}
+						maximumValue={100} targetValue={90}
+						isScaleInverted={false}
+						scaleBackgroundBrush="DodgerBlue"
+						scaleBackgroundOutline="DarkViolet"
+						scaleBackgroundThickness={2}
+						scaleStartExtent={0.05}
+						scaleEndExtent={0.95}>
+					</IgrBulletGraph>
+				</div>
+				<div className={style.graph}>
+					<IgrBulletGraph
+						value={50}
+						valueBrush="DodgerBlue"
+						valueStrokeThickness={1}
+						valueInnerExtent={0.5}
+						valueOuterExtent={0.65}
+						targetValue={80}
+						targetValueBreadth={10}
+						targetValueBrush="LimeGreen"
+						targetValueOutline="LimeGreen"
+						targetValueStrokeThickness={1}
+						targetValueInnerExtent={0.3}
+						targetValueOuterExtent={0.85}
+						height="80px" width="400px"
+						minimumValue={0}
+						maximumValue={100}>
+					</IgrBulletGraph>
+				</div>
+			</div>
+		</div>
+	)
+}