TypeScriptFileUpdate refactoring

jackofdiamond5 commented 5 months ago

Closes #30401, https://github.com/IgniteUI/igniteui-cli/issues/1210

This PR introduces new types AngularTypeScriptFileUpdate, WebComponentsTypeScriptFileUpdate, ReactTypeScriptFileUpdate which use the TypeScriptASTTransformer internally to apply specific mutations to the AST depending on the platform.

The old TypeScriptFileUpdate that was in the core package has now been reworked so that it serves as a base for the platform-specific file updates. This caused the need to update some parts of the CLI that were relying on it, like the add command, the Angular specific templates (AngularTemplate & IgniteUIForAngularTemplate), and the cli-config schematic since they should now point to the AngularTypeScriptFileUpdate.

Additionally, this PR introduces a lot of new custom types that are related to routing and Angular metadata. I've tried to keep these as general as possible so that they can be later extended by the different platforms. The attempt was to make everything as strictly typed as possible and minimize the usage of magic strings and inline type definitions.

The AngularTypeScriptFileUpdate is initialized with a filePath, standalone flag and a formatSettings. The path is used to get to the ts.SourceFIle which the transformer will be mutating while the format settings are used during finalization to apply the desired formatting to the parsed tree. The standalone flag is Angular specific and is pretty self-explanatory - some of the logic in the file update is specific for standalone components and requires that the flag is present.

The reworked version of the TypeScriptFileUpdate that exists in core includes the handling of import declarations as well as general routing. Each platform should use it as a base and add additional logic where needed.

TypeScriptFileUpdate

Public API:

addRoute - Adds a route entry to the specified routes collection. This is an abstract method that must be implemented by the different platforms since every platform has different ways of describing their routes.

addChildRoute - Adds a child route to a parent route. Targeting a parent route (by path), this method will add a route to a route's children array (creating it if it does not exist)

finalize - Parses the AST and returns the resulting formatted source code.

Protected API:

buildRouteStructure - Builds the route structure for the given route per platform. Each platform has a different way of describing its route objects, so they have to implement this abstract method and define how a route is to be built.

createDynamicImport - Creates an arrow function of the form () => import(path).then(m => m.prop).

createArrowFunctionWithCallExpression - Creates an arrow function with a call expression that takes the form memberName: () => callExpressionName(callExpressionArgs).

applyConfigTransformation - Applies a configuration transformation to a string.

asArray - Converts a string or string array union to array.

requestSideEffectsImportForModule - Creates a side effect import declaration for a given module. Checks if the import has been added already.

requestImportForRouteIdentifier - Adds an import declaration for an identifier that exists in a route node. Checks if it does not collide with other imports first.

AngularTypeScriptFileUpdate

Extends the TypeScriptFileUpdate with the following members:

addStandaloneComponentMeta - This method operates for standalone components only and uses a TemplateDependency to apply mutations to a standalone component's @Component decorator constructor function. It also supports replacing specific placeholders/variables that are defined as a KeyValuePair object.

addNgModuleMeta - This method operates for NgModule-based projects only and uses a TemplateDependency to apply mutations to an @NgModule decorator constructor function. It also supports replacing specific placeholders/variables that are defined as a KeyValuePair object.