Merge pull request #17675 from abpframework/issue-17493

Angular Schematics: Remove current theme and apply selected one

npm/ng-packs/package.json

@@ -34,7 +34,7 @@
     "build:schematics": "cd scripts && yarn && yarn build:schematics && cd ..",
     "dev:schematics": "tsc -p packages/schematics/tsconfig.json -w",
     "mock:schematics": "cd scripts/mock-schematic && yarn && yarn start",
-    "debug:schematics": "./node_modules/.bin/ng g ./packages/schematics/src/collection.json:proxy-add --module __default --apiName __default --source __default --target __default --url https://localhost:44305 --serviceType application --entryPoint  __default ",
+    "debug:schematics": "./node_modules/.bin/nx g ./packages/schematics/src/collection.json:proxy-add --module identity --apiName __default --source __default --target __default --url https://localhost:44305 --serviceType application --entryPoint  __default ",
     "debug:schematics-dist": "./node_modules/.bin/ng g ./dist/packages/schematics/collection.json:proxy-add --module __default --apiName __default --source __default --target __default --url http://localhost:4300 --service-type application --entryPoint  __default",
     "ci": "yarn affected:lint && yarn affected:build && yarn affected:test",
     "lerna": "lerna",

npm/ng-packs/packages/generators/src/generators/change-theme/generator.ts

@@ -4,8 +4,10 @@ import { ChangeThemeGeneratorSchema } from './schema';
 import { ThemeOptionsEnum } from './theme-options.enum';
 
 export async function changeThemeGenerator(host: Tree, schema: ChangeThemeGeneratorSchema) {
+  const schematicPath = schema.localPath || '@abp/ng.schematics';
+
   const runAngularLibrarySchematic = wrapAngularDevkitSchematic(
-    '@abp/ng.schematics',
+    schema.localPath ? `${host.root}${schematicPath}` : schematicPath,
     'change-theme',
   );
 
@@ -14,8 +16,10 @@ export async function changeThemeGenerator(host: Tree, schema: ChangeThemeGenera
   });
 
   return () => {
-    const destTheme = Object.values(ThemeOptionsEnum).find((t, i) => i + 1 === schema.name);
+    const destTheme = Object.values(ThemeOptionsEnum).find(
-    console.log(`✅️ theme changed to ${destTheme}`);
+      (theme, index) => index + 1 === schema.name,
+    );
+    console.log(`✅️ Switched to Theme ${destTheme}`);
   };
 }
 

npm/ng-packs/packages/generators/src/generators/change-theme/schema.d.ts

@@ -1,4 +1,5 @@
 export interface ChangeThemeGeneratorSchema {
   name: number;
   targetOption: string;
+  localPath?: string;
 }

npm/ng-packs/packages/generators/src/generators/change-theme/schema.json

@@ -31,6 +31,10 @@
         "$source": "argv",
         "index": 1
       }
+    },
+    "localPath": {
+      "description": "If set value schematics will work on given path",
+      "type": "string"
     }
   },
   "required": ["name", "targetProject"]

npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts

@@ -1,10 +1,17 @@
-import { Rule, SchematicsException } from '@angular-devkit/schematics';
-import { isLibrary, updateWorkspace, WorkspaceDefinition } from '../../utils';
-import { allStyles, styleMap } from './style-map';
-import { ProjectDefinition } from '@angular-devkit/core/src/workspace';
 import { JsonArray, JsonValue } from '@angular-devkit/core';
+import { Rule, SchematicsException, Tree, chain } from '@angular-devkit/schematics';
+import { ProjectDefinition } from '@angular-devkit/core/src/workspace';
+import * as ts from 'typescript';
+import { allStyles, importMap, styleMap } from './style-map';
 import { ChangeThemeOptions } from './model';
+import { Change, InsertChange, isLibrary, updateWorkspace, WorkspaceDefinition } from '../../utils';
 import { ThemeOptionsEnum } from './theme-options.enum';
+import {
+  addImportToModule,
+  findNodes,
+  getDecoratorMetadata,
+  getMetadataField,
+} from '../../utils/angular/ast-utils';
 
 export default function (_options: ChangeThemeOptions): Rule {
   return async () => {
@@ -14,9 +21,12 @@ export default function (_options: ChangeThemeOptions): Rule {
       throw new SchematicsException('The theme name does not selected');
     }
 
-    return updateWorkspace(storedWorkspace => {
+    return chain([
-      updateProjectStyle(selectedProject, storedWorkspace, targetThemeName);
+      updateWorkspace(storedWorkspace => {
-    });
+        updateProjectStyle(selectedProject, storedWorkspace, targetThemeName);
+      }),
+      updateAppModule(selectedProject, targetThemeName),
+    ]);
   };
 }
 
@@ -48,6 +58,138 @@ function updateProjectStyle(
   targetOption.styles = [...newStyles, ...sanitizedStyles] as JsonArray;
 }
 
+function updateAppModule(selectedProject: string, targetThemeName: ThemeOptionsEnum): Rule {
+  return (host: Tree) => {
+    const angularJSON = host.read('angular.json');
+    if (!angularJSON) {
+      throw new SchematicsException('The angular.json does not found');
+    }
+
+    const workspace = JSON.parse(angularJSON.toString());
+    const project = workspace.projects[selectedProject];
+
+    if (!project || !project.sourceRoot) {
+      throw new SchematicsException('The target project does not found');
+    }
+
+    const appModulePath = project.sourceRoot + '/app/app.module.ts';
+
+    return chain([
+      removeImportPath(appModulePath, targetThemeName),
+      removeImportFromNgModuleMetadata(appModulePath, targetThemeName),
+      insertImports(appModulePath, targetThemeName),
+    ]);
+  };
+}
+
+function removeImportPath(appModulePath: string, selectedTheme: ThemeOptionsEnum): Rule {
+  return (host: Tree) => {
+    const recorder = host.beginUpdate(appModulePath);
+    const sourceText = host.read(appModulePath)?.toString('utf-8');
+    const source = ts.createSourceFile(
+      appModulePath,
+      sourceText!,
+      ts.ScriptTarget.Latest,
+      true,
+      ts.ScriptKind.TS,
+    );
+    const impMap = Array.from(importMap.values())
+      .filter(f => f !== importMap.get(selectedTheme))
+      .reduce((acc, val) => [...acc, ...val], []);
+
+    const nodes = findNodes(source, ts.isImportDeclaration);
+    const filteredNodes = nodes.filter(n => impMap.some(f => n.getFullText().match(f.path)));
+    if (!filteredNodes || filteredNodes.length < 1) {
+      return;
+    }
+
+    filteredNodes.map(importPath =>
+      recorder.remove(importPath.getStart(), importPath.getWidth() + 1),
+    );
+
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
+function removeImportFromNgModuleMetadata(
+  appModulePath: string,
+  selectedTheme: ThemeOptionsEnum,
+): Rule {
+  return (host: Tree) => {
+    const recorder = host.beginUpdate(appModulePath);
+    const sourceText = host.read(appModulePath)?.toString('utf-8');
+    const source = ts.createSourceFile(
+      appModulePath,
+      sourceText!,
+      ts.ScriptTarget.Latest,
+      true,
+      ts.ScriptKind.TS,
+    );
+    const impMap = Array.from(importMap.values())
+      .filter(f => f !== importMap.get(selectedTheme))
+      .reduce((acc, val) => [...acc, ...val], []);
+
+    const node = getDecoratorMetadata(source, 'NgModule', '@angular/core')[0] || {};
+    if (!node) {
+      throw new SchematicsException('The app module does not found');
+    }
+
+    const matchingProperties = getMetadataField(node as ts.ObjectLiteralExpression, 'imports');
+
+    const assignment = matchingProperties[0] as ts.PropertyAssignment;
+    const assignmentInit = assignment.initializer as ts.ArrayLiteralExpression;
+
+    const elements = assignmentInit.elements;
+    if (!elements || elements.length < 1) {
+      return;
+    }
+
+    const filteredElements = elements.filter(f =>
+      impMap.some(s => f.getText().match(s.importName)),
+    );
+    if (!filteredElements || filteredElements.length < 1) {
+      return;
+    }
+
+    filteredElements.map(willRemoveModule =>
+      recorder.remove(willRemoveModule.getStart(), willRemoveModule.getWidth() + 1),
+    );
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
+function insertImports(appModulePath: string, selectedTheme: ThemeOptionsEnum): Rule {
+  return (host: Tree) => {
+    const recorder = host.beginUpdate(appModulePath);
+    const sourceText = host.read(appModulePath)?.toString('utf-8');
+    const source = ts.createSourceFile(
+      appModulePath,
+      sourceText!,
+      ts.ScriptTarget.Latest,
+      true,
+      ts.ScriptKind.TS,
+    );
+    const selected = importMap.get(selectedTheme);
+
+    const changes: Change[] = [];
+    selected!.map(({ importName, path }) =>
+      changes.push(...addImportToModule(source, appModulePath, importName, path)),
+    );
+
+    if (changes.length > 0) {
+      for (const change of changes) {
+        if (change instanceof InsertChange) {
+          recorder.insertLeft(change.pos, change.toAdd);
+        }
+      }
+    }
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
 export function getProjectTargetOptions(
   project: ProjectDefinition,
   buildTarget: string,

npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts

@@ -8,6 +8,11 @@ export type StyleDefinition =
     }
   | string;
 
+export type ImportDefinition = {
+  path: string;
+  importName: string;
+};
+
 export const styleMap = new Map<ThemeOptionsEnum, StyleDefinition[]>();
 
 styleMap.set(ThemeOptionsEnum.Basic, [
@@ -241,3 +246,49 @@ styleMap.set(ThemeOptionsEnum.LeptonXLite, [
 ]);
 // the code written by Github co-pilot. thank go-pilot. You are the best sidekick.
 export const allStyles = Array.from(styleMap.values()).reduce((acc, val) => [...acc, ...val], []);
+
+export const importMap = new Map<ThemeOptionsEnum, ImportDefinition[]>();
+
+importMap.set(ThemeOptionsEnum.Basic, [
+  {
+    path: '@abp/ng.theme.basic',
+    importName: 'ThemeBasicModule.forRoot()',
+  },
+]);
+
+importMap.set(ThemeOptionsEnum.Lepton, [
+  {
+    path: '@volo/abp.ng.theme.lepton',
+    importName: 'ThemeLeptonModule.forRoot()',
+  },
+]);
+
+importMap.set(ThemeOptionsEnum.LeptonXLite, [
+  {
+    path: '@abp/ng.theme.lepton-x',
+    importName: 'ThemeLeptonXModule.forRoot()',
+  },
+  {
+    path: '@abp/ng.theme.lepton-x/layouts',
+    importName: 'SideMenuLayoutModule.forRoot()',
+  },
+  {
+    path: '@abp/ng.theme.lepton-x/account',
+    importName: 'AccountLayoutModule.forRoot()',
+  },
+]);
+
+importMap.set(ThemeOptionsEnum.LeptonX, [
+  {
+    path: '@volosoft/abp.ng.theme.lepton-x',
+    importName: 'ThemeLeptonXModule.forRoot()',
+  },
+  {
+    path: '@volosoft/abp.ng.theme.lepton-x/layouts',
+    importName: 'SideMenuLayoutModule.forRoot()',
+  },
+  {
+    path: '@volosoft/abp.ng.theme.lepton-x/account',
+    importName: 'AccountLayoutModule.forRoot()',
+  },
+]);

npm/ng-packs/packages/schematics/src/utils/angular/ast-utils.ts

@@ -446,7 +446,6 @@ export function addSymbolToNgModuleMetadata(
       toInsert = `, ${symbolName}`;
     }
   }
-
   if (importPath !== null) {
     return [
       new InsertChange(ngModulePath, position, toInsert),