Refactoring schematics for standalone migration

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

@@ -5,21 +5,20 @@ import * as ts from 'typescript';
 import { allStyles, importMap, styleMap } from './style-map';
 import { ChangeThemeOptions } from './model';
 import {
-  Change,
-  createDefaultPath,
-  InsertChange,
+  addRootImport,
+  addRootProvider,
+  getAppModulePath,
   isLibrary,
+  isStandaloneApp,
   updateWorkspace,
   WorkspaceDefinition,
+  getAppConfigPath,
+  cleanEmptyExprFromModule,
+  cleanEmptyExprFromProviders,
 } from '../../utils';
 import { ThemeOptionsEnum } from './theme-options.enum';
-import {
-  addImportToModule,
-  addProviderToModule,
-  findNodes,
-  getDecoratorMetadata,
-  getMetadataField,
-} from '../../utils/angular/ast-utils';
+import { findNodes, getDecoratorMetadata, getMetadataField } from '../../utils/angular/ast-utils';
+import { getMainFilePath } from '../../utils/angular/standalone/util';
 
 export default function (_options: ChangeThemeOptions): Rule {
   return async () => {
@@ -68,46 +67,59 @@ function updateProjectStyle(
 
 function updateAppModule(selectedProject: string, targetThemeName: ThemeOptionsEnum): Rule {
   return async (host: Tree) => {
-    const appModulePath = (await createDefaultPath(host, selectedProject)) + '/app.module.ts';
+    const mainFilePath = await getMainFilePath(host, selectedProject);
+    const isStandalone = isStandaloneApp(host, mainFilePath);
+    const appModulePath = isStandalone
+      ? getAppConfigPath(host, mainFilePath)
+      : getAppModulePath(host, mainFilePath);
 
     return chain([
       removeImportPath(appModulePath, targetThemeName),
-      removeImportFromNgModuleMetadata(appModulePath, targetThemeName),
-      removeProviderFromNgModuleMetadata(appModulePath, targetThemeName),
-      insertImports(appModulePath, targetThemeName),
-      insertProviders(appModulePath, targetThemeName),
+      ...(!isStandalone ? [removeImportFromNgModuleMetadata(appModulePath, targetThemeName)] : []),
+      isStandalone
+        ? removeImportsFromStandaloneProviders(appModulePath, targetThemeName)
+        : removeProviderFromNgModuleMetadata(appModulePath, targetThemeName),
+      insertImports(selectedProject, targetThemeName),
+      insertProviders(selectedProject, targetThemeName),
+      formatFile(appModulePath),
+      cleanEmptyExpressions(appModulePath, isStandalone),
     ]);
   };
 }
 
-export function removeImportPath(appModulePath: string, selectedTheme: ThemeOptionsEnum): Rule {
+export function removeImportPath(filePath: string, selectedTheme: ThemeOptionsEnum): Rule {
   return (host: Tree) => {
-    const recorder = host.beginUpdate(appModulePath);
-    const source = createSourceFile(host, appModulePath);
+    const buffer = host.read(filePath);
+    if (!buffer) return host;
+
+    const sourceText = buffer.toString('utf-8');
+    const source = ts.createSourceFile(filePath, sourceText, ts.ScriptTarget.Latest, true);
+    const recorder = host.beginUpdate(filePath);
+
     const impMap = getImportPaths(selectedTheme, true);
 
     const nodes = findNodes(source, ts.isImportDeclaration);
 
-    const filteredNodes = nodes.filter(node =>
-      impMap.some(({ path, importName }) => {
-        const sourceModule = node.getFullText();
-        const moduleName = importName.split('.')[0];
+    const filteredNodes = nodes.filter(node => {
+      const importPath = (node.moduleSpecifier as ts.StringLiteral).text;
+      const namedBindings = node.importClause?.namedBindings;
 
-        if (path && sourceModule.match(path)) {
-          return true;
-        }
+      return impMap.some(({ path, importName }) => {
+        const symbol = importName.split('.')[0];
+        const matchesPath = !!path && importPath === path;
 
-        return !!(moduleName && sourceModule.match(moduleName));
-      }),
-    );
+        const matchesSymbol =
+          !!namedBindings &&
+          ts.isNamedImports(namedBindings) &&
+          namedBindings.elements.some(e => e.name.text === symbol);
 
-    if (filteredNodes?.length < 1) {
-      return;
-    }
+        return matchesPath || matchesSymbol;
+      });
+    });
 
-    filteredNodes.map(importPath =>
-      recorder.remove(importPath.getStart(), importPath.getWidth() + 1),
-    );
+    for (const node of filteredNodes) {
+      recorder.remove(node.getStart(), node.getWidth());
+    }
 
     host.commitUpdate(recorder);
     return host;
@@ -153,6 +165,53 @@ export function removeImportFromNgModuleMetadata(
   };
 }
 
+export function removeImportsFromStandaloneProviders(
+  mainPath: string,
+  selectedTheme: ThemeOptionsEnum,
+): Rule {
+  return (host: Tree) => {
+    const buffer = host.read(mainPath);
+    if (!buffer) return host;
+
+    const sourceText = buffer.toString('utf-8');
+    const source = ts.createSourceFile(mainPath, sourceText, ts.ScriptTarget.Latest, true);
+    const recorder = host.beginUpdate(mainPath);
+
+    const impMap = getImportPaths(selectedTheme, true);
+    const callExpressions = findNodes(source, ts.isCallExpression);
+
+    for (const expr of callExpressions) {
+      const exprText = expr.getText();
+
+      const match = impMap.find(({ importName, provider }) => {
+        const moduleSymbol = importName?.split('.')[0];
+        return (
+          (moduleSymbol && exprText.includes(moduleSymbol)) ||
+          (provider && exprText.includes(provider))
+        );
+      });
+
+      if (match) {
+        const start = expr.getFullStart();
+        const end = expr.getEnd();
+        const nextChar = sourceText.slice(end, end + 1);
+        const prevChar = sourceText.slice(start - 1, start);
+
+        if (nextChar === ',') {
+          recorder.remove(start, end - start + 1);
+        } else if (prevChar === ',') {
+          recorder.remove(start - 1, end - start + 1);
+        } else {
+          recorder.remove(start, end - start);
+        }
+      }
+    }
+
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
 export function removeProviderFromNgModuleMetadata(
   appModulePath: string,
   selectedTheme: ThemeOptionsEnum,
@@ -192,61 +251,36 @@ export function removeProviderFromNgModuleMetadata(
   };
 }
 
-export function insertImports(appModulePath: string, selectedTheme: ThemeOptionsEnum): Rule {
-  return (host: Tree) => {
-    const recorder = host.beginUpdate(appModulePath);
-    const source = createSourceFile(host, appModulePath);
+export function insertImports(projectName: string, selectedTheme: ThemeOptionsEnum): Rule {
+  return addRootImport(projectName, code => {
     const selected = importMap.get(selectedTheme);
+    if (!selected || selected.length === 0) return code.code``;
 
-    if (!selected) {
-      return host;
-    }
-
-    const changes: Change[] = [];
-
-    selected.map(({ importName, path }) =>
-      changes.push(...addImportToModule(source, appModulePath, importName, path)),
-    );
+    const expressions: string[] = [];
 
-    if (changes.length > 0) {
-      for (const change of changes) {
-        if (change instanceof InsertChange) {
-          recorder.insertLeft(change.order, change.toAdd);
-        }
-      }
+    for (const { importName, path, expression } of selected) {
+      const imported = code.external(importName, path);
+      expressions.push(expression ?? imported); // default fallback
     }
-    host.commitUpdate(recorder);
-    return host;
-  };
+
+    return code.code`${expressions.join(',\n')}`;
+  });
 }
 
-export function insertProviders(appModulePath: string, selectedTheme: ThemeOptionsEnum): Rule {
-  return (host: Tree) => {
-    const recorder = host.beginUpdate(appModulePath);
-    const source = createSourceFile(host, appModulePath);
+export function insertProviders(projectName: string, selectedTheme: ThemeOptionsEnum): Rule {
+  return addRootProvider(projectName, code => {
     const selected = importMap.get(selectedTheme);
+    if (!selected || selected.length === 0) return code.code``;
 
-    if (!selected) {
-      return host;
-    }
-
-    const changes: Change[] = [];
-
-    selected.map(({ path, provider }) => {
-      if (provider) {
-        changes.push(...addProviderToModule(source, appModulePath, provider + '()', path));
-      }
-    });
-
-    for (const change of changes) {
-      if (change instanceof InsertChange) {
-        recorder.insertLeft(change.order, change.toAdd);
-      }
-    }
+    const providers = selected
+      .filter(s => !!s.provider)
+      .map(({ provider, path }) => {
+        const symbol = code.external(provider!, path);
+        return `${symbol}()`;
+      });
 
-    host.commitUpdate(recorder);
-    return host;
-  };
+    return code.code`${providers}`;
+  });
 }
 
 export function createSourceFile(host: Tree, appModulePath: string): ts.SourceFile {
@@ -271,7 +305,7 @@ export function createSourceFile(host: Tree, appModulePath: string): ts.SourceFi
  * @param selectedTheme The selected theme
  * @param getAll If true, returns all import paths
  */
-export function getImportPaths(selectedTheme: ThemeOptionsEnum, getAll: boolean = false) {
+export function getImportPaths(selectedTheme: ThemeOptionsEnum, getAll = false) {
   if (getAll) {
     return Array.from(importMap.values()).reduce((acc, val) => [...acc, ...val], []);
   }
@@ -316,3 +350,40 @@ export const styleCompareFn = (item1: string | object, item2: string | object) =
 
   return o1.bundleName && o2.bundleName && o1.bundleName == o2.bundleName;
 };
+
+export const formatFile = (filePath: string): Rule => {
+  return (tree: Tree) => {
+    const buffer = tree.read(filePath);
+    if (!buffer) return tree;
+
+    const source = ts.createSourceFile(filePath, buffer.toString(), ts.ScriptTarget.Latest, true);
+    const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+    const formatted = printer.printFile(source);
+
+    tree.overwrite(filePath, formatted);
+    return tree;
+  };
+};
+
+export function cleanEmptyExpressions(modulePath: string, isStandalone: boolean): Rule {
+  return (host: Tree) => {
+    const buffer = host.read(modulePath);
+    if (!buffer) throw new SchematicsException(`Cannot read ${modulePath}`);
+
+    const source = ts.createSourceFile(
+      modulePath,
+      buffer.toString('utf-8'),
+      ts.ScriptTarget.Latest,
+      true,
+    );
+    const recorder = host.beginUpdate(modulePath);
+
+    if (isStandalone) {
+      cleanEmptyExprFromProviders(source, recorder);
+    } else {
+      cleanEmptyExprFromModule(source, recorder);
+    }
+    host.commitUpdate(recorder);
+    return host;
+  };
+}

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

@@ -12,6 +12,7 @@ export type ImportDefinition = {
   path: string;
   importName: string;
   provider?: string;
+  expression?: string;
 };
 
 export const styleMap = new Map<ThemeOptionsEnum, StyleDefinition[]>();
@@ -284,25 +285,30 @@ importMap.set(ThemeOptionsEnum.Lepton, [
 importMap.set(ThemeOptionsEnum.LeptonXLite, [
   {
     path: '@abp/ng.theme.lepton-x',
-    importName: 'ThemeLeptonXModule.forRoot()',
+    importName: 'ThemeLeptonXModule',
+    expression: 'ThemeLeptonXModule.forRoot()',
   },
   {
     path: '@abp/ng.theme.lepton-x/layouts',
-    importName: 'SideMenuLayoutModule.forRoot()',
+    importName: 'SideMenuLayoutModule',
+    expression: 'SideMenuLayoutModule.forRoot()',
   },
   {
     path: '@abp/ng.theme.lepton-x/account',
-    importName: 'AccountLayoutModule.forRoot()',
+    importName: 'AccountLayoutModule',
+    expression: 'AccountLayoutModule.forRoot()',
   },
 ]);
 
 importMap.set(ThemeOptionsEnum.LeptonX, [
   {
     path: '@volosoft/abp.ng.theme.lepton-x',
-    importName: 'ThemeLeptonXModule.forRoot()',
+    importName: 'ThemeLeptonXModule',
+    expression: 'ThemeLeptonXModule.forRoot()',
   },
   {
     path: '@volosoft/abp.ng.theme.lepton-x/layouts',
-    importName: 'SideMenuLayoutModule.forRoot()',
+    importName: 'SideMenuLayoutModule',
+    expression: 'SideMenuLayoutModule.forRoot()',
   },
 ]);

npm/ng-packs/packages/schematics/src/commands/create-lib/files-package-standalone/__libraryName@kebab__/.eslintrc.json.template

@@ -0,0 +1,44 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/<%= kebab(libraryName) %>/tsconfig.lib.json",
+          "projects/<%= kebab(libraryName) %>/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

npm/ng-packs/packages/schematics/src/commands/create-lib/files-package-standalone/__libraryName@kebab__/config/ng-package.json.template

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
+  "dest": "../../dist/<%= kebab(libraryName) %>/config",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}