Merge pull request #3088 from IgniteUI/dpetev/sass-migrations-7

#2994 Add migration for Sass theme props migration
IgniteUI · Nov 21, 2018 · a7a390c · a7a390c
2 parents a1935cc + 521bd2f
commit a7a390c
Show file tree

Hide file tree

Showing 8 changed files with 365 additions and 28 deletions.
diff --git a/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts b/projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts
@@ -4,7 +4,7 @@ import { EmptyTree } from '@angular-devkit/schematics';
 import { UnitTestTree } from '@angular-devkit/schematics/testing';
 import * as fs from 'fs';
 import * as path from 'path';
-import { ClassChanges, BindingChanges, SelectorChanges } from './schema';
+import { ClassChanges, BindingChanges, SelectorChanges, ThemePropertyChanges } from './schema';
 import { UpdateChanges } from './UpdateChanges';
 
 describe('UpdateChanges', () => {
@@ -15,6 +15,7 @@ describe('UpdateChanges', () => {
         public getClassChanges() { return this.classChanges; }
         public getOutputChanges() { return this.outputChanges; }
         public getInputChanges() { return this.inputChanges; }
+        public getThemePropChanges() { return this.themePropsChanges; }
     }
 
     beforeEach(() => {
@@ -356,7 +357,7 @@ describe('UpdateChanges', () => {
         appTree.create('test1.component.html', fileContent1);
 
         const update = new UnitUpdateChanges(__dirname, appTree);
-        update.addCondition('igxIcon_is_material_name', () => { return true; });
+        update.addCondition('igxIcon_is_material_name', () => true);
 
         expect(fs.existsSync).toHaveBeenCalledWith(jsonPath);
         expect(fs.readFileSync).toHaveBeenCalledWith(jsonPath, 'utf-8');
@@ -374,4 +375,76 @@ describe('UpdateChanges', () => {
 
         done();
     });
+
+    it('should replace/remove inputs', done => {
+        const themePropsJson: ThemePropertyChanges = {
+            changes: [
+                {
+                    name: '$replace-me', replaceWith: '$replaced',
+                    owner: 'igx-theme-func'
+                },
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func'
+                },
+                {
+                    name: '$old-prop', remove: true,
+                    owner: 'igx-comp-theme'
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-props.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath: string) => {
+            if (filePath === jsonPath) {
+                return true;
+            }
+            return false;
+        });
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themePropsJson));
+
+        const fileContent =
+`$var: igx-theme-func(
+    $prop1: red,
+    $replace-me: 3,
+    $remove-me: 0px,
+    $prop2: 2
+);
+$var2: igx-comp-theme(
+    $replace-me: not,
+    $old-prop: func(val)
+);
+
+$var3: igx-comp-theme(
+    $replace-me: not,
+    $old-prop: func(val, 3, 4),
+    $prop3: 1
+);`;
+        appTree.create('styles.scss', fileContent);
+        appTree.create('src/app/app.component.sass', `igx-comp-theme($replace-me: not, $old-prop: 3, $prop3: 2);`);
+        appTree.create('test.component.sass', `igx-theme-func($replace-me: 10px, $old-prop: 3, $prop3: 2);`);
+
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        expect(fs.existsSync).toHaveBeenCalledWith(jsonPath);
+        expect(fs.readFileSync).toHaveBeenCalledWith(jsonPath, 'utf-8');
+        expect(update.getThemePropChanges()).toEqual(themePropsJson);
+
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(
+`$var: igx-theme-func(
+    $prop1: red,
+    $replaced: 3,
+    $prop2: 2
+);
+$var2: igx-comp-theme(
+    $replace-me: not
+);
+
+$var3: igx-comp-theme(
+    $replace-me: not,
+    $prop3: 1
+);`);
+        expect(appTree.readContent('src/app/app.component.sass')).toEqual(`igx-comp-theme($replace-me: not, $prop3: 2);`);
+        expect(appTree.readContent('test.component.sass')).toEqual(`igx-theme-func($replaced: 10px, $old-prop: 3, $prop3: 2);`);
+        done();
+    });
 });
diff --git a/projects/igniteui-angular/migrations/common/UpdateChanges.ts b/projects/igniteui-angular/migrations/common/UpdateChanges.ts
@@ -1,19 +1,21 @@
-// tslint:disable-next-line:no-implicit-dependencies
 import { FileEntry, SchematicContext, Tree, FileVisitor } from '@angular-devkit/schematics';
+import { WorkspaceSchema } from '@angular-devkit/core/src/workspace';
 
 import * as fs from 'fs';
 import * as path from 'path';
-import { ClassChanges, BindingChanges, SelectorChange, SelectorChanges } from './schema';
+import { ClassChanges, BindingChanges, SelectorChange, SelectorChanges, ThemePropertyChanges } from './schema';
 import { getIdentifierPositions } from './tsUtils';
-import { getProjectPaths, getWorkspace } from './util';
+import { getProjectPaths, getWorkspace, getProjects } from './util';
 
 // tslint:disable:arrow-parens
 export class UpdateChanges {
+    protected workspace: WorkspaceSchema;
     protected sourcePaths: string[];
     protected classChanges: ClassChanges;
     protected outputChanges: BindingChanges;
     protected inputChanges: BindingChanges;
     protected selectorChanges: SelectorChanges;
+    protected themePropsChanges: ThemePropertyChanges;
     protected conditionFunctions: Map<string, Function> = new Map<string, Function>();
 
     private _templateFiles: string[] = [];
@@ -41,29 +43,35 @@ export class UpdateChanges {
         return this._tsFiles;
     }
 
+    private _sassFiles: string[] = [];
+    /** Sass (both .scss and .sass) files in the project being updagraded. */
+    public get sassFiles(): string[] {
+        if (!this._sassFiles.length) {
+            // files can be outside the app prefix, so start from sourceRoot
+            // also ignore schematics `styleext` as Sass can be used regardless
+            const sourceDirs = getProjects(this.workspace).map(x => x.sourceRoot).filter(x => x);
+            this.sourceDirsVisitor((fulPath, entry) => {
+                if (fulPath.endsWith('.scss') || fulPath.endsWith('.sass')) {
+                    this._sassFiles.push(entry.path);
+                }
+            }, sourceDirs);
+        }
+        return this._sassFiles;
+    }
+
     /**
      * Create a new base schematic to apply changes
      * @param rootPath Root folder for the schematic to read configs, pass __dirname
      */
     constructor(private rootPath: string, private host: Tree, private context?: SchematicContext) {
-        this.sourcePaths = getProjectPaths(getWorkspace(host));
+        this.workspace = getWorkspace(host);
+        this.sourcePaths = getProjectPaths(this.workspace);
 
-        const selectorJson = path.join(this.rootPath, 'changes', 'selectors.json');
-        if (fs.existsSync(selectorJson)) {
-            this.selectorChanges = JSON.parse(fs.readFileSync(selectorJson, 'utf-8'));
-        }
-        const classJson = path.join(this.rootPath, 'changes', 'classes.json');
-        if (fs.existsSync(classJson)) {
-            this.classChanges = JSON.parse(fs.readFileSync(classJson, 'utf-8'));
-        }
-        const outputsJson = path.join(this.rootPath, 'changes', 'outputs.json');
-        if (fs.existsSync(outputsJson)) {
-            this.outputChanges = JSON.parse(fs.readFileSync(outputsJson, 'utf-8'));
-        }
-        const inputsJson = path.join(this.rootPath, 'changes', 'inputs.json');
-        if (fs.existsSync(inputsJson)) {
-            this.inputChanges = JSON.parse(fs.readFileSync(inputsJson, 'utf-8'));
-        }
+        this.selectorChanges = this.loadConfig('selectors.json');
+        this.classChanges = this.loadConfig('classes.json');
+        this.outputChanges = this.loadConfig('outputs.json');
+        this.inputChanges = this.loadConfig('inputs.json');
+        this.themePropsChanges = this.loadConfig('theme-props.json');
     }
 
     /** Apply configured changes to the Host Tree */
@@ -91,6 +99,13 @@ export class UpdateChanges {
                 this.updateClasses(entryPath);
             }
         }
+
+        /** Sass files */
+        if (this.themePropsChanges && this.themePropsChanges.changes.length) {
+            for (const entryPath of this.sassFiles) {
+                this.updateThemeProps(entryPath);
+            }
+        }
     }
 
     /** Add condition funtion. */
@@ -225,6 +240,58 @@ export class UpdateChanges {
         }
     }
 
+    protected updateThemeProps(entryPath: string) {
+        let fileContent = this.host.read(entryPath).toString();
+        let overwrite = false;
+        for (const change of this.themePropsChanges.changes) {
+            if (fileContent.indexOf(change.owner) !== -1) {
+                /** owner-func:( * ); */
+                const searchPattern = String.raw`${change.owner}\([\s\S]+?\);`;
+                const matches = fileContent.match(new RegExp(searchPattern, 'g'));
+                if (!matches) {
+                    continue;
+                }
+                for (const match of matches) {
+                    if (match.indexOf(change.name)) {
+                        const name = change.name.replace('$', '\\$');
+                        const reg = new RegExp(String.raw`^\s*${name}:`);
+                        const opening = `${change.owner}(`;
+                        const closing = /\s*\);$/.exec(match).pop();
+                        const body = match.substr(opening.length, match.length - opening.length - closing.length);
+
+                        let params = this.splitFunctionProps(body);
+                        params = params.reduce((arr, param) => {
+                            if (reg.test(param)) {
+                                if (!change.remove) {
+                                    arr.push(param.replace(change.name, change.replaceWith));
+                                }
+                            } else {
+                                arr.push(param);
+                            }
+                            return arr;
+                        }, []);
+
+                        fileContent = fileContent.replace(
+                            match,
+                            opening + params.join(',') + closing
+                        );
+                        overwrite = true;
+                    }
+                }
+            }
+        }
+        if (overwrite) {
+            this.host.overwrite(entryPath, fileContent);
+        }
+    }
+
+    private loadConfig(configJson: string) {
+        const filePath = path.join(this.rootPath, 'changes', configJson);
+        if (fs.existsSync(filePath)) {
+            return JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+        }
+    }
+
     private areConditionsFulfiled(match: string, conditions: string[]): boolean {
         if (conditions) {
             for (const condition of conditions) {
@@ -245,7 +312,7 @@ export class UpdateChanges {
             const propMatch = propertyMatchArray[0].trim();
             const propValueMatch = propMatch.match(new RegExp(`=(["'])(.+?)${'\\1'}`));
             if (propValueMatch && propValueMatch.length > 0) {
-                const propValue = propValueMatch[propValueMatch.length-1];
+                const propValue = propValueMatch[propValueMatch.length - 1];
 
                 if (propMatch.startsWith('[')) {
                     return fileContent.replace(ownerMatch, ownerMatch + `{{${propValue}}}`);
@@ -258,12 +325,43 @@ export class UpdateChanges {
         return fileContent;
     }
 
-    private sourceDirsVisitor(visitor: FileVisitor) {
-        for (const sourcePath of this.sourcePaths) {
+    private sourceDirsVisitor(visitor: FileVisitor, dirs = this.sourcePaths) {
+        for (const sourcePath of dirs) {
             const srcDir = this.host.getDir(sourcePath);
             srcDir.visit(visitor);
         }
     }
+
+   /**
+    * Safe split by `','`, considering possible inner function calls. E.g.:
+    * ```
+    * prop: inner-func(),
+    * prop2: inner2(inner-param: 3, inner-param: inner-func(..))
+    * ```
+    */
+    private splitFunctionProps(body: string): string[] {
+        const parts = [];
+        let lastIndex = 0;
+        let level = 0;
+
+        for (let i = 0; i < body.length; i++) {
+            const char = body[i];
+            switch (char) {
+            case '(': level++; break;
+            case ')': level--; break;
+            case ',':
+                if (!level) {
+                    parts.push(body.substring(lastIndex, i));
+                    lastIndex = i + 1;
+                }
+                break;
+            default:
+                break;
+            }
+        }
+        parts.push(body.substring(lastIndex));
+        return parts;
+    }
 }
 
 export enum BindingType {

diff --git a/projects/igniteui-angular/migrations/common/schema/index.ts b/projects/igniteui-angular/migrations/common/schema/index.ts
@@ -1,7 +1,18 @@
 // generate schema:
 // npx typescript-json-schema migrations/common/schema/index.ts SelectorChanges -o migrations/common/schema/selector.schema.json --required
 
-// tslint:disable:interface-name
+export interface ThemePropertyChanges {
+    /** An array of changes to theme function properties */
+    changes: ThemePropertyChange[];
+}
+export interface ThemePropertyChange extends ChangeAction {
+    /** Name of the theme property */
+    name: string;
+    /** Theming function this parameter belongs to */
+    owner: string;
+}
+
+
 export interface SelectorChanges {
     /** An array of changes to component/directive selectors */
     changes: SelectorChange[];
@@ -35,9 +46,9 @@ export interface ClassChange {
 }
 
 export interface ChangeAction {
-    /** Replace original selector with new one */
+    /** Replace original selector/property with new one */
     replaceWith?: string;
-    /** Remove directive/component */
+    /** Remove directive/component/property */
     remove?: boolean;
 }
 

diff --git a/projects/igniteui-angular/migrations/common/schema/theme-props.schema.json b/projects/igniteui-angular/migrations/common/schema/theme-props.schema.json
@@ -0,0 +1,44 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "definitions": {
+        "ThemePropertyChange": {
+            "properties": {
+                "name": {
+                    "description": "Name of the theme property",
+                    "type": "string"
+                },
+                "owner": {
+                    "description": "Theming function this parameter belongs to",
+                    "type": "string"
+                },
+                "remove": {
+                    "description": "Remove directive/component/property",
+                    "type": "boolean"
+                },
+                "replaceWith": {
+                    "description": "Replace original selector/property with new one",
+                    "type": "string"
+                }
+            },
+            "required": [
+                "name",
+                "owner"
+            ],
+            "type": "object"
+        }
+    },
+    "properties": {
+        "changes": {
+            "description": "An array of changes to theme function properties",
+            "items": {
+                "$ref": "#/definitions/ThemePropertyChange"
+            },
+            "type": "array"
+        }
+    },
+    "required": [
+        "changes"
+    ],
+    "type": "object"
+}
+
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
@@ -25,6 +25,11 @@
             "version": "6.2.0",
             "description": "Updates Ignite UI for Angular from v6.1.x to v6.2.0",
             "factory": "./update-6_2"
+        },
+        "migration-06": {
+            "version": "6.2.1",
+            "description": "Updates Ignite UI for Angular from v6.2.0 to v6.2.1",
+            "factory": "./update-6_2_1"
         }
     }
 }