igniteui-cli 13.2.2-beta.1 → 13.3.0-beta.0

package/templates/react/ReactTypeScriptFileUpdate.js

@@ -1,71 +1,347 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactTypeScriptFileUpdate = void 0;
-const ts = require("typescript");
 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) {
-        return this.addRedirectOrSimpleRouteEntry(Object.assign(Object.assign({}, route), { identifierName: route.identifierName || route.element, name: route.name || route.text }), (0, cli_core_1.RoutesVariableAsParentCondition)(this.astTransformer), multiline, prepend, anchorElement);
-    }
-    //#endregion
-    //#region Overrides
-    addRouteEntry(route, visitCondition, multiline = false, prepend = false, anchorElement) {
-        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'`.
-        );
-        if (route.children &&
-            !Array.isArray(route.children) &&
-            (route.children.identifierName || route.children.aliasName)) {
-            this.requestImportForRouteIdentifier(route.children);
+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;
+            }
         }
-        const structure = [
-            {
-                name: cli_core_1.RouteTarget.Path,
-                value: ts.factory.createStringLiteral(route.path),
-            },
-            {
-                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),
-            },
-        ];
-        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
-        return this.astTransformer.addMembersToArrayLiteral(visitCondition, [newRoute], prepend, anchorElement);
-    }
-    addRedirectRouteEntry(route, visitCondition, multiline = false, prepend = false, anchorElement) {
-        const loaderPropertyAssignment = this.createArrowFunctionWithCallExpression(types_1.ReactRouteTarget.Loader, route.loader || cli_core_1.REACT_ROUTER_DOM_REDIRECT, route.redirectTo);
-        this.requestImportForRouteLoader(route);
-        const structure = [
-            {
-                name: types_1.ReactRouteTarget.Index,
-                value: route.index ? ts.factory.createTrue() : ts.factory.createFalse(),
-            },
-            {
-                name: types_1.ReactRouteTarget.Loader,
-                value: loaderPropertyAssignment.value,
+        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);
+        }
+        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 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))
+            ]));
+        }
+        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}'`);
+            }
+        }
+        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));
             },
-        ];
-        const newRoute = this.astTransformer.createObjectLiteralExpression(structure, multiline);
-        return this.astTransformer.addMembersToArrayLiteral(visitCondition, [newRoute], prepend, anchorElement);
+            getCurrentDirectory: () => process.cwd(),
+            getDefaultLibFileName: options => ts.getDefaultLibFilePath(options),
+            readDirectory: ts.sys.readDirectory,
+            readFile: ts.sys.readFile,
+            fileExists: ts.sys.fileExists
+        };
+        return servicesHost;
     }
-    addChildRouteEntry(route, asIdentifier = true, multiline = false, prepend = false) {
-        return super.addChildRouteEntry(Object.assign(Object.assign({}, route), { identifierName: route.identifierName || route.element }), asIdentifier || true, // for React the `children` member should always be added in the form { children: identifier }
-        multiline, prepend);
+    //#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;
+        };
     }
-    //#endregion
-    requestImportForRouteLoader(route, isDefault) {
-        return 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);
+    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]);
     }
 }
 exports.ReactTypeScriptFileUpdate = ReactTypeScriptFileUpdate;

package/templates/webcomponents/TypeScriptFileUpdate.d.ts

@@ -0,0 +1,52 @@
+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;
+}