igniteui-cli 14.0.0-alpha.0 → 14.0.0-alpha.2

package/lib/templates/IgniteUIForReactTemplate.d.ts

@@ -28,6 +28,7 @@ export declare class IgniteUIForReactTemplate implements Template {
     getExtraConfiguration(): ControlExtraConfiguration[];
     setExtraConfiguration(extraConfigKeys: {}): void;
     protected folderName(pathName: string): string;
+    protected fileName(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

@@ -5,6 +5,7 @@ const cli_core_1 = require("@igniteui/cli-core");
 const fs = require("fs-extra");
 const path = require("path");
 const ReactTypeScriptFileUpdate_1 = require("../../templates/react/ReactTypeScriptFileUpdate");
+const typescript_1 = require("typescript");
 class IgniteUIForReactTemplate {
     /**
      * Base ReactTemplate constructor
@@ -53,20 +54,30 @@ class IgniteUIForReactTemplate {
         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));
+            const routingModule = new ReactTypeScriptFileUpdate_1.ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath), { convertTabsToSpaces: false, indentSize: 2, singleQuotes: true }, { jsx: typescript_1.JsxEmit.Preserve });
+            const modulePath = `./${cli_core_1.Util.lowerDashed(name)}/${cli_core_1.Util.lowerDashed(name)}-routes`;
             if (defaultPath) {
-                routingModule.addRoute(lowerDashed, options.className, nameFromPath, filePath, options.routerChildren, undefined, defaultPath);
+                routingModule.addRoute({
+                    index: true,
+                    redirectTo: options.path,
+                });
             }
-            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);
+                const child = {
+                    identifierName: cli_core_1.ROUTES_VARIABLE_NAME,
+                    aliasName: options.routerChildren,
+                    modulePath
+                };
+                routingModule.addChildRoute(this.fileName(name), child, true);
             }
+            else {
+                routingModule.addRoute({
+                    path: this.fileName(name),
+                    element: cli_core_1.Util.className(name),
+                    text: cli_core_1.Util.nameFromPath(name)
+                }, false);
+            }
+            routingModule.finalize();
         }
     }
     getExtraConfiguration() {
@@ -90,11 +101,15 @@ class IgniteUIForReactTemplate {
                 cli_core_1.Util.error(`Path ${"src/views/" + folderName} is not valid!`, "red");
                 process.exit(1);
             }
-            //clean up potential leading spaces in folder names (`path/    name`):
+            //clean up potential leading spaces in folder names (`path/ name`):
             folderName = folderName.replace(/\/\s+/g, "/");
         }
         return cli_core_1.Util.lowerDashed(folderName);
     }
+    fileName(pathName) {
+        const name = cli_core_1.Util.nameFromPath(pathName);
+        return cli_core_1.Util.lowerDashed(name);
+    }
     registerJSONRoute(projectPath, name, routingModulePath) {
         const configFile = fs.readFileSync(path.join(projectPath, routingModulePath), "utf8");
         const viewsArr = JSON.parse(configFile);

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IgniteUIForWebComponentsTemplate = void 0;
 const cli_core_1 = require("@igniteui/cli-core");
 const path = require("path");
-const TypeScriptFileUpdate_1 = require("../../templates/webcomponents/TypeScriptFileUpdate");
+const WebComponentsTypeScriptFileUpdate_1 = require("../../templates/webcomponents/WebComponentsTypeScriptFileUpdate");
 class IgniteUIForWebComponentsTemplate {
     get templatePaths() {
         return [path.join(this.rootPath, "files")];
@@ -31,15 +31,36 @@ class IgniteUIForWebComponentsTemplate {
             return;
         }
         const routeModulePath = options.parentRoutingModulePath;
-        const routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, routeModulePath));
-        if (!(options && options.skipRoute) && cli_core_1.App.container.get(cli_core_1.FS_TOKEN)
-            .fileExists(routeModulePath)) {
+        const routingModule = new WebComponentsTypeScriptFileUpdate_1.WebComponentsTypeScriptFileUpdate(path.join(projectPath, routeModulePath), { convertTabsToSpaces: true, indentSize: 4, singleQuotes: true });
+        if (!(options && options.skipRoute) &&
+            cli_core_1.App.container.get(cli_core_1.FS_TOKEN).fileExists(routeModulePath)) {
             if (defaultPath) {
-                routingModule.addRoute("", options.selector, cli_core_1.Util.nameFromPath(fullName), options.routerChildren, undefined);
+                routingModule.addRoute({
+                    path: "",
+                    redirectTo: options.selector,
+                    name: cli_core_1.Util.nameFromPath(fullName)
+                });
             }
-            routingModule.addRoute(this.fileName(fullName), options.selector, cli_core_1.Util.nameFromPath(fullName), options.routerChildren, undefined);
+            const modulePath = `./${cli_core_1.Util.lowerDashed(fullName)}/${cli_core_1.Util.lowerDashed(fullName)}-routing`;
             if (options.hasChildren) {
-                routingModule.addRoute(this.fileName(`${options.modulePath}-routing.ts`), options.selector, cli_core_1.Util.nameFromPath(`${options.modulePath}-routing.ts`), options.routerChildren, options.importAlias);
+                const child = {
+                    identifierName: cli_core_1.ROUTES_VARIABLE_NAME,
+                    aliasName: options.routerChildren,
+                    modulePath
+                };
+                routingModule.addChildRoute(this.fileName(fullName), child, true);
+            }
+            else {
+                routingModule.addRoute({
+                    path: this.fileName(fullName),
+                    identifierName: options.selector,
+                    name: cli_core_1.Util.nameFromPath(fullName)
+                }, false // multiline
+                );
+            }
+            const content = routingModule.finalize();
+            if (content) {
+                cli_core_1.TypeScriptUtils.saveFile(routeModulePath, content);
             }
         }
     }

package/package.json

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

package/templates/react/ReactTypeScriptFileUpdate.d.ts

@@ -1,50 +1,9 @@
-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, defaultRoute?: boolean): 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, defaultRoute?: boolean): void;
-    protected requestImport(modulePath: string, routerAlias: string, componentName: string, namedImport?: boolean): void;
-    /** Add `import` statements not previously found in the file  */
-    protected addNewFileImports(): void;
-    protected createIdentifierImport(importPath: string, as: string, component: string, namedImport: boolean): 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;
+import * as ts from 'typescript';
+import { FormatSettings, PropertyAssignment, RouteEntry, TypeScriptFileUpdate } from '@igniteui/cli-core';
+import { ReactRouteLike } from './types';
+export declare class ReactTypeScriptFileUpdate extends TypeScriptFileUpdate {
+    constructor(filePath: string, formatSettings?: FormatSettings, compilerOptions?: ts.CompilerOptions);
+    addRoute(route: ReactRouteLike, multiline?: boolean, prepend?: boolean, anchorElement?: PropertyAssignment): void;
+    protected buildRouteStructure(route: ReactRouteLike, _multiline: boolean): RouteEntry[];
+    private requestImportForRouteLoader;
 }

package/templates/react/ReactTypeScriptFileUpdate.js

@@ -1,347 +1,71 @@
 "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, defaultRoute = false) {
-        this.addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, defaultRoute);
-    }
-    //#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, defaultRoute = false) {
-        const isRouting = path.indexOf(DEFAULT_ROUTES_VARIABLE) >= 0;
-        if (isRouting && this.targetSource.text.indexOf(path.slice(0, -4)) > 0) {
-            return;
-        }
-        if (defaultRoute) {
-            this.requestImport("react-router-dom", undefined, "redirect", true);
+const cli_core_1 = require("@igniteui/cli-core");
+const types_1 = require("./types");
+class ReactTypeScriptFileUpdate extends cli_core_1.TypeScriptFileUpdate {
+    constructor(filePath, formatSettings, compilerOptions) {
+        super(filePath, formatSettings, compilerOptions);
+    }
+    //#region Overridden Public API
+    addRoute(route, multiline = false, prepend = false, anchorElement) {
+        const _route = Object.assign(Object.assign({}, route), { identifierName: route.identifierName || route.element, name: route.name || route.text });
+        if (_route.redirectTo) {
+            this.requestImportForRouteLoader(_route);
         }
         else {
-            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, defaultRoute);
-                    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() === DEFAULT_ROUTES_VARIABLE;
-                    // 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, namedImport = false) {
-        const existing = this.requestedImports.find(x => x.from === modulePath);
-        // TODO: better check for named imports. There could be several named imports from same 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,
-                namedImport
-            });
-        }
-    }
-    /** Add `import` statements not previously found in the file  */
-    addNewFileImports() {
-        const newImports = this.requestedImports.filter(x => !x.edit);
-        if (!newImports.length) {
-            return;
+            const routeName = cli_core_1.Util.lowerDashed(_route.name || _route.path);
+            const modulePath = `./${routeName}/${routeName}`;
+            this.requestImportForRouteIdentifier(Object.assign(Object.assign({}, _route), { modulePath }), true // is default - for React, we import the component as `import X from 'module'`.
+            );
         }
-        const newStatements = ts.factory.createNodeArray([
-            ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
-            ...newImports.map(x => this.createIdentifierImport(x.from, x.as, x.component, x.namedImport)),
-            ...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, namedImport) {
-        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))
-            ]));
+        const structure = this.buildRouteStructure(_route, multiline);
+        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
+        this.astTransformer.requestNewMembersInArrayLiteral((0, cli_core_1.RoutesVariableAsParentCondition)(this.astTransformer), [newRoute], prepend, anchorElement);
+    }
+    //#endregion
+    //#region Overrides
+    buildRouteStructure(route, _multiline) {
+        let structure;
+        if (route.redirectTo) {
+            const loaderPropertyAssignment = this.createArrowFunctionWithCallExpression(types_1.ReactRouteTarget.Loader, route.loader || cli_core_1.REACT_ROUTER_DOM_REDIRECT, route.redirectTo);
+            structure = [
+                {
+                    name: types_1.ReactRouteTarget.Index,
+                    value: route.index
+                        ? ts.factory.createTrue()
+                        : ts.factory.createFalse(),
+                },
+                {
+                    name: types_1.ReactRouteTarget.Loader,
+                    value: loaderPropertyAssignment.value,
+                },
+            ];
         }
         else {
-            if (namedImport) {
-                const importSpecifier = ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(component));
-                const imports = ts.factory.createNamedImports([importSpecifier]);
-                importClause = ts.factory.createImportClause(false, undefined, imports);
-            }
-            else {
-                importClause = ts.factory.createImportClause(false, ts.factory.createIdentifier(component), undefined);
-            }
-        }
-        const importDeclaration = ts.factory.createImportDeclaration(undefined, importClause, ts.factory.createStringLiteral(importPath, true), undefined);
-        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}'`);
-            }
+            structure = [
+                {
+                    name: cli_core_1.RouteTarget.Path,
+                    value: ts.factory.createStringLiteral(route.path, this.formatSettings.singleQuotes),
+                },
+                {
+                    name: types_1.ReactRouteTarget.Element,
+                    value: ts.factory.createJsxSelfClosingElement(ts.factory.createIdentifier(route.element || route.identifierName), undefined, // type arguments
+                    undefined // jsx attributes
+                    ),
+                },
+                {
+                    name: types_1.ReactRouteTarget.Text,
+                    value: ts.factory.createStringLiteral(route.text || route.name, this.formatSettings.singleQuotes),
+                },
+            ];
         }
-        this.fileSystem.writeFile(filePath, text);
+        return structure;
     }
-    /**  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, defaultRoute = false) {
-        if (defaultRoute) {
-            // for default route in React we should generate index: true, loader: () => redirect(path)
-            const index = ts.factory.createPropertyAssignment("index", ts.factory.createTrue());
-            const loader = ts.factory.createArrowFunction(undefined, undefined, [], undefined, undefined, ts.factory.createCallExpression(ts.factory.createIdentifier("redirect"), [], [ts.factory.createStringLiteral(path, true)]));
-            const redirect = ts.factory.createPropertyAssignment("loader", loader);
-            return ts.factory.createObjectLiteralExpression([index, redirect]);
-        }
-        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]);
-        }
-        return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
+    //#endregion
+    requestImportForRouteLoader(route, isDefault) {
+        this.requestImportForRouteIdentifier(Object.assign(Object.assign({}, route), { identifierName: route.loader || cli_core_1.REACT_ROUTER_DOM_REDIRECT, modulePath: cli_core_1.REACT_ROUTER_DOM_MODULE }), isDefault);
     }
 }
 exports.ReactTypeScriptFileUpdate = ReactTypeScriptFileUpdate;

package/templates/react/types/ReactRouteEntry.d.ts

@@ -0,0 +1,6 @@
+import { RouteEntry, RouteTarget } from "@igniteui/cli-core";
+import { ReactRouteTarget } from "./ReactRouteTarget";
+/** Represents a React route entry in a routes collection. */
+export interface ReactRouteEntry extends Pick<RouteEntry, "value"> {
+    name: RouteTarget | ReactRouteTarget;
+}

package/templates/react/types/ReactRouteEntry.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/templates/react/types/ReactRouteLike.d.ts

@@ -0,0 +1,21 @@
+import { RouteLike } from '@igniteui/cli-core';
+/** A route member in a React routes collection. */
+export interface ReactRouteLike extends RouteLike {
+    /**
+     * Determines if the route is an index route.
+     * Index routes render into their parent's {@link https://reactrouter.com/en/main/components/outlet|Outlet} at their parent's URL (like a default child route).
+     */
+    index?: boolean;
+    /**
+     * The route loader is called before the route renders and provides data for the element through {@link https://reactrouter.com/en/main/hooks/use-loader-data|useLoaderData}.
+     */
+    loader?: string;
+    /**
+     * The React Element/Component to render when the route matches the URL.
+     */
+    element?: string;
+    /**
+     * The name the page.
+     */
+    text?: string;
+}

package/templates/react/types/ReactRouteLike.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/templates/react/types/ReactRouteTarget.d.ts

@@ -0,0 +1,7 @@
+/** Represents possible members in a React route object. */
+export declare enum ReactRouteTarget {
+    Index = "index",
+    Element = "element",
+    Text = "text",
+    Loader = "loader"
+}

package/templates/react/types/ReactRouteTarget.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactRouteTarget = void 0;
+/** Represents possible members in a React route object. */
+var ReactRouteTarget;
+(function (ReactRouteTarget) {
+    ReactRouteTarget["Index"] = "index";
+    ReactRouteTarget["Element"] = "element";
+    ReactRouteTarget["Text"] = "text";
+    ReactRouteTarget["Loader"] = "loader";
+})(ReactRouteTarget || (exports.ReactRouteTarget = ReactRouteTarget = {}));

package/templates/react/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ReactRouteTarget';
+export * from './ReactRouteEntry';
+export * from './ReactRouteLike';

package/templates/react/types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ReactRouteTarget"), exports);
+__exportStar(require("./ReactRouteEntry"), exports);
+__exportStar(require("./ReactRouteLike"), exports);

package/templates/webcomponents/WebComponentsTypeScriptFileUpdate.d.ts

@@ -0,0 +1,7 @@
+import { FormatSettings, PropertyAssignment, RouteEntry, RouteLike, TypeScriptFileUpdate } from '@igniteui/cli-core';
+export declare class WebComponentsTypeScriptFileUpdate extends TypeScriptFileUpdate {
+    filePath: string;
+    constructor(filePath: string, formatSettings?: FormatSettings);
+    addRoute(route: RouteLike, multiline?: boolean, prepend?: boolean, anchorElement?: PropertyAssignment): void;
+    protected buildRouteStructure(route: RouteLike, _multiline: boolean): RouteEntry[];
+}

package/templates/webcomponents/WebComponentsTypeScriptFileUpdate.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebComponentsTypeScriptFileUpdate = void 0;
+const ts = require("typescript");
+const cli_core_1 = require("@igniteui/cli-core");
+class WebComponentsTypeScriptFileUpdate extends cli_core_1.TypeScriptFileUpdate {
+    constructor(filePath, formatSettings) {
+        super(filePath, formatSettings);
+        this.filePath = filePath;
+    }
+    //#region Overridden Public API
+    addRoute(route, multiline = false, prepend = true, anchorElement = cli_core_1.WC_ANCHOR_ELEMENT) {
+        const routeName = cli_core_1.Util.lowerDashed(route.name || route.path);
+        this.requestSideEffectsImportForModule(`./${routeName}/${routeName}`);
+        if (!route.lazyload) {
+            this.requestImportForRouteIdentifier(route);
+        }
+        const structure = this.buildRouteStructure(route, multiline);
+        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
+        this.astTransformer.requestNewMembersInArrayLiteral((0, cli_core_1.RoutesVariableAsParentCondition)(this.astTransformer), [newRoute], prepend, anchorElement);
+    }
+    //#endregion
+    //#region Overrides
+    buildRouteStructure(route, _multiline) {
+        // default route
+        let structure = [
+            {
+                name: cli_core_1.RouteTarget.Path,
+                value: ts.factory.createStringLiteral(route.path, this.formatSettings.singleQuotes),
+            },
+            {
+                name: cli_core_1.RouteTarget.Component,
+                value: ts.factory.createStringLiteral(route.aliasName || route.identifierName, this.formatSettings.singleQuotes),
+            },
+            {
+                name: cli_core_1.RouteTarget.Name,
+                value: ts.factory.createStringLiteral(route.name, this.formatSettings.singleQuotes),
+            },
+        ];
+        // redirecting route
+        if (route.redirectTo) {
+            structure = [
+                {
+                    name: cli_core_1.RouteTarget.Path,
+                    value: ts.factory.createStringLiteral(route.path || '', this.formatSettings.singleQuotes),
+                },
+                {
+                    // vaadin/router uses the component's tag name when navigating
+                    name: cli_core_1.RouteTarget.Component,
+                    value: ts.factory.createStringLiteral(route.redirectTo, this.formatSettings.singleQuotes),
+                },
+                {
+                    name: cli_core_1.RouteTarget.Name,
+                    value: ts.factory.createStringLiteral(route.name, this.formatSettings.singleQuotes),
+                },
+            ];
+        }
+        return structure;
+    }
+}
+exports.WebComponentsTypeScriptFileUpdate = WebComponentsTypeScriptFileUpdate;

package/templates/webcomponents/TypeScriptFileUpdate.d.ts

@@ -1,52 +0,0 @@
-import * as ts from "typescript";
-/**
- * Apply various updates to typescript files using AST
- */
-export declare class TypeScriptFileUpdate {
-    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, 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, routerChildren: string, importAlias: string, routesVariable?: string): void;
-    protected requestImport(modulePath: string, routerAlias: string): void;
-    /** Add `import` statements not previously found in the file  */
-    protected addNewFileImports(): void;
-    protected createIdentifierImport(importPath: string, as: 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;
-    /** Convert a string or string array union to array. Splits strings as comma delimited */
-    private asArray;
-    private createVisitor;
-    private createRouteEntry;
-}

package/templates/webcomponents/TypeScriptFileUpdate.js

@@ -1,341 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypeScriptFileUpdate = 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 TypeScriptFileUpdate {
-    /** 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, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        this.addRouteModuleEntry(path, component, name, 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, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        const isRouting = path.indexOf("routing") >= 0;
-        if (isRouting && this.targetSource.text.indexOf(path.slice(0, -3)) > 0) {
-            return;
-        }
-        const moduleName = path.substring(0, path.indexOf("-routing"));
-        if (path) {
-            const relativePath = isRouting ?
-                "./" + moduleName + "/" + path.slice(0, -3) : "./" + path + "/" + path;
-            this.requestImport(relativePath, importAlias);
-        }
-        // 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 &&
-                        node.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) {
-        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,
-                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)),
-            ...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) {
-        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 = undefined;
-        }
-        const importDeclaration = ts.factory.createImportDeclaration(undefined, importClause, ts.factory.createStringLiteral(importPath, true), undefined);
-        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
-    /** Convert a string or string array union to array. Splits strings as comma delimited */
-    asArray(value, variables) {
-        let result = [];
-        if (value) {
-            result = typeof value === "string" ? value.split(/\s*,\s*/) : value;
-            result = result.map(x => cli_core_1.Util.applyConfigTransformation(x, variables));
-        }
-        return result;
-    }
-    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(filePath, className, linkText, routerAlias) {
-        const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(filePath, true));
-        const routeComponent = ts.factory.createPropertyAssignment("component", ts.factory.createStringLiteral(className, true));
-        const routeData = ts.factory.createPropertyAssignment("name", ts.factory.createStringLiteral(linkText, 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.TypeScriptFileUpdate = TypeScriptFileUpdate;