Componizer: Easily refactor your Angular components
Are you tired of moving HTML, TS and SCSS around just to refactor one component ? Componizer is a VS code extension that will help you out.
AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!
Combining the best of Angular Schematics and VS Code, it can refactor components with just a mouse click. Check this out :
If you are on a hurry, download the extension and follow the setup guide to play with Componizer. However, I strongly recommend you read the next part to understand how it works and what’s planned for the next releases.
When it comes to refactoring frontend apps, most existing tools focus on the Javascript/Typescript part. However, modern frontend is driven by components which are made of more than just JS/TS. An efficient refactoring tool must take into account all parts of the component (HTML, styles, JS/TS(X), ...) and must also figure out how to correctly add new components to the application.
If we take this Angular home component template for example:
Converting the div card block to a component requires the following points:
- Creating card.component.{ts|html|scss} files
- Adding the card component to the module declaration
- Extracting the {ts|html|scss} code from the home component to use it inside the card component
- Updating the home component to use the card component
The final result should look like this:
Although, it might sound complicated,
the Angular team already provides schematics to generate new components that seamlessly integrate with the app. This means that the first two points are already covered thanks to the component schematic. My idea was to extend this behavior to achieve the third and fourth points.
Enter ng-componize:
Ng-componize uses the component schematic to create the card component. It then moves the div HTML block from the home component template to the card component template and finally updates the home component template with the selector of the card component.
This means that ng-componize is also a schematic that can be invoked from the command line but we all agree that is not very user friendly.
Enter Componizer:
The Componizer extension uses the VS Code API to provide the componize menu option. It prompts the user to choose a name for the new component then invokes ng-componize schematic passing in the necessary params.
What’s missing ? The refactoring of TS and SCSS ! It’s the goal of the next releases.
Our starting point will be the HTML where we can identify Angular template syntax (interpolation, property bindings ..) to extract the correct TS from the home component to the card component. I think a deeper look at the Angular compiler may provide some clues on how to achieve this.
As for the SCSS, the HTML will also be used to identify which classes should be moved from the home component styles to the card component styles.
Once that’s done, Componizer will be out of the beta stage, but it shouldn’t stop there. We can also extend it for other frameworks by building new schematics which the extension part will rely on for refactoring.
I reach out to you open source contributors to help me out on this task. I’m available by mail (bilel@krafted.tech)
