feat: add migration for self-closing tags (#416)

docs: add docs for self-closing-tags migration

Co-authored-by: Chau Tran <nartc7789@gmail.com>

docs/src/content/docs/index.mdx

@@ -77,6 +77,7 @@ import { Card, CardGrid, Steps } from '@astrojs/starlight/components';
  - [<strong>output() Migration</strong> - migrate to the new output()](/utilities/migrations/new-outputs-migration/)
  - [<strong>inject() Migration</strong> - migrate to inject() based DI](/utilities/migrations/inject-migration/)
  - [<strong>viewChild(), contentChild(), viewChildren(), contentChildren() Migration</strong> - migrate to the new template queries()](/utilities/migrations/queries-migration/)
+ - [<strong>self-closing tag</strong> - migrate to the new self-closing tag](/utilities/migrations/self-closing-tags/)
  </div>
  </Card>
 

docs/src/content/docs/utilities/Migrations/self-closing-tags.md

@@ -0,0 +1,47 @@
+---
+title: Self Closing Tags Migration
+description: Schematics for migrating non-self-closing tags to self-closing tags.
+entryPoint: convert-to-self-closing-tag
+badge: stable
+contributors: ['enea-jahollari']
+---
+
+Angular supports self-closing tags. This means that you can write tags like `<app-component />` instead of `<app-component></app-component>`.
+This is a feature that was introduced in Angular 16.
+
+### How it works?
+
+The moment you run the schematics, it will look for all the tags that are not self-closing and convert them to self-closing tags.
+
+- It will look for all the tags that don't have any content inside them.
+- It will only convert components that have "-" in their name.
+
+### Usage
+
+In order to run the schematics for all the project in the app you have to run the following script:
+
+```bash
+ng g ngxtension:convert-to-self-closing-tag
+```
+
+If you want to specify the project name you can pass the `--project` param.
+
+```bash
+ng g ngxtension:convert-to-self-closing-tag --project=<project-name>
+```
+
+If you want to run the schematic for a specific component or directive you can pass the `--path` param.
+
+```bash
+ng g ngxtension:convert-to-self-closing-tag --path=<path-to-ts-file>
+```
+
+### Usage with Nx
+
+To use the schematics on a Nx monorepo you just swap `ng` with `nx`
+
+Example:
+
+```bash
+nx g ngxtension:convert-to-self-closing-tag --project=<project-name>
+```

libs/ngxtension/.eslintrc.json

@@ -29,6 +29,7 @@
  {
  "files": ["*.html"],
  "extends": ["plugin:@nx/angular-template"],
+ "excludedFiles": ["*inline-template-*.component.html"],
  "rules": {}
  },
  {

libs/plugin/generators.json

@@ -26,6 +26,11 @@
  "factory": "./src/generators/convert-queries/generator",
  "schema": "./src/generators/convert-queries/schema.json",
  "description": "libs/plugin/src/generators/convert-queries/ generator"
+ },
+ "convert-to-self-closing-tag": {
+ "factory": "./src/generators/convert-to-self-closing-tag/generator",
+ "schema": "./src/generators/convert-to-self-closing-tag/schema.json",
+ "description": "libs/plugin/src/generators/convert-to-self-closing-tag/ generator"
  }
  },
  "schematics": {
@@ -60,6 +65,11 @@
  "factory": "./src/generators/convert-queries/compat",
  "schema": "./src/generators/convert-queries/schema.json",
  "description": "libs/plugin/src/generators/convert-queries/ generator"
+ },
+ "convert-to-self-closing-tag": {
+ "factory": "./src/generators/convert-to-self-closing-tag/compat",
+ "schema": "./src/generators/convert-to-self-closing-tag/schema.json",
+ "description": "libs/plugin/src/generators/convert-to-self-closing-tag/ generator"
  }
  }
 }

libs/plugin/src/generators/convert-to-self-closing-tag/__snapshots__/generator.spec.ts.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`convertToSelfClosingTagGenerator should convert properly for inline template 1`] = `
+"
+import { Component, Input } from '@angular/core';
+
+@Component({
+ template: \`
+ <router-outlet />
+ \`
+})
+export class MyCmp {
+}
+"
+`;
+
+exports[`convertToSelfClosingTagGenerator should convert properly for inline template 2`] = `undefined`;
+
+exports[`convertToSelfClosingTagGenerator should convert properly for templateUrl 1`] = `
+"
+import { Component, Input } from '@angular/core';
+
+@Component({
+ templateUrl: './my-file.html'
+})
+export class MyCmp {
+}
+"
+`;
+
+exports[`convertToSelfClosingTagGenerator should convert properly for templateUrl 2`] = `
+"
+<div>Hello</div>
+<app-my-cmp1>123</app-my-cmp1>
+<app-my-cmp1>123</app-my-cmp1>
+<app-my-cmp2 test="hello">123</app-my-cmp2>
+<app-my-cmp3
+ test="hello">
+ 123
+</app-my-cmp3>
+<app-my-cmp4
+ test="hello"
+>
+ 123
+</app-my-cmp4>
+<app-my-cmp5
+ test="hello"
+>
+ 123
+</app-my-cmp5>
+<app-my-cmp10 test="hello"
+ [test]="hello"
+ (test)="hello()"
+ />
+
+<app-my-cmp11 test="hello"
+ [test]="hello"
+ (test)="hello()"
+ />
+<app-my-cmp12 test="hello"
+ />
+<input type="text" />
+
+<app-my-cmp6 />
+<app-my-cmp7 test="hello" />
+
+<hello-world />
+
+<pagination count="1" [test]="hello" (test)="test"></pagination>
+
+<pagination count="1" />
+
+<hello-world />
+
+<hello-world12>
+ <hello-world13>
+ <hello-world14 count="1" [test]="hello" (test)="test" />
+ <hello-world15>
+ <hello-world16 count="1" [test]="hello" (test)="test" />
+ <hello-world17 count="1" [test]="hello" (test)="test" />
+ <hello-world18 count="1" [test]="hello"
+ (test)="test"
+ />
+ </hello-world15>
+ </hello-world13>
+</hello-world12>
+
+<app-management *ngIf="
+ categoryList &&
+ ((test1 && test1.length > 0) ||
+ (test && test.length > 0))
+ "
+ [test]="test > 2"
+ [test]="test"
+ (testEvent)="test.length > 0 ? test($event) : null"
+ (testEvent2)="test1($event)" />
+"
+`;

libs/plugin/src/generators/convert-to-self-closing-tag/compat.ts

@@ -0,0 +1,4 @@
+import { convertNxGenerator } from '@nx/devkit';
+import convertGenerator from './generator';
+
+export default convertNxGenerator(convertGenerator);

libs/plugin/src/generators/convert-to-self-closing-tag/generator.spec.ts

@@ -0,0 +1,178 @@
+import { Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+
+import convertToSelfClosingTagGenerator from './generator';
+import { ConvertToSelfClosingTagGeneratorSchema } from './schema';
+
+const template = `
+<div>Hello</div>
+<app-my-cmp1>123</app-my-cmp1>
+<app-my-cmp1>123</app-my-cmp1>
+<app-my-cmp2 test="hello">123</app-my-cmp2>
+<app-my-cmp3
+ test="hello">
+ 123
+</app-my-cmp3>
+<app-my-cmp4
+ test="hello"
+>
+ 123
+</app-my-cmp4>
+<app-my-cmp5
+ test="hello"
+>
+ 123
+</app-my-cmp5>
+<app-my-cmp10 test="hello"
+ [test]="hello"
+ (test)="hello()"
+>
+</app-my-cmp10>
+
+<app-my-cmp11
+ test="hello"
+ [test]="hello"
+ (test)="hello()"
+>
+</app-my-cmp11>
+<app-my-cmp12 test="hello"
+>
+
+
+</app-my-cmp12>
+<input type="text" />
+
+<app-my-cmp6 />
+<app-my-cmp7 test="hello" />
+
+<hello-world></hello-world>
+
+<pagination count="1" [test]="hello" (test)="test"></pagination>
+
+<pagination count="1" />
+
+<hello-world></hello-world>
+
+<hello-world12>
+ <hello-world13>
+ <hello-world14 count="1" [test]="hello" (test)="test" ></hello-world14>
+ <hello-world15>
+ <hello-world16 count="1" [test]="hello" (test)="test" />
+ <hello-world17 count="1" [test]="hello" (test)="test" ></hello-world17>
+ <hello-world18
+ count="1" [test]="hello"
+ (test)="test"
+ >
+
+ </hello-world18>
+ </hello-world15>
+ </hello-world13>
+</hello-world12>
+
+<app-management
+ *ngIf="
+ categoryList &&
+ ((test1 && test1.length > 0) ||
+ (test && test.length > 0))
+ "
+ [test]="test > 2"
+ [test]="test"
+ (testEvent)="test.length > 0 ? test($event) : null"
+ (testEvent2)="test1($event)"></app-management>
+`;
+
+const filesMap = {
+ notComponent: `
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MyService {}
+`,
+ componentNoTemplate: `
+import { Component } from '@angular/core';
+
+@Component({})
+export class MyCmp {}
+`,
+
+ componentWithTemplateUrl: `
+import { Component, Input } from '@angular/core';
+
+@Component({
+ templateUrl: './my-file.html'
+})
+export class MyCmp {
+}
+`,
+
+ componentWithInlineTemplate: `
+import { Component, Input } from '@angular/core';
+
+@Component({
+ template: \`
+ <router-outlet></router-outlet>
+ \`
+})
+export class MyCmp {
+}
+`,
+} as const;
+
+describe('convertToSelfClosingTagGenerator', () => {
+ let tree: Tree;
+ const options: ConvertToSelfClosingTagGeneratorSchema = {
+ path: 'libs/my-file.ts',
+ };
+
+ function setup(file: keyof typeof filesMap) {
+ tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+ tree.write('package.json', `{"dependencies": {"@angular/core": "17.1.0"}}`);
+ tree.write(`libs/my-file.ts`, filesMap[file]);
+
+ if (file === 'componentWithTemplateUrl') {
+ tree.write(`libs/my-file.html`, template);
+ return () => {
+ return [
+ tree.read('libs/my-file.ts', 'utf8'),
+ filesMap[file],
+ tree.read('libs/my-file.html', 'utf8'),
+ template,
+ ];
+ };
+ }
+
+ return () => {
+ return [tree.read('libs/my-file.ts', 'utf8'), filesMap[file]];
+ };
+ }
+
+ it('should not do anything if not component/directive', async () => {
+ const readContent = setup('notComponent');
+ await convertToSelfClosingTagGenerator(tree, options);
+ const [updated, original] = readContent();
+ expect(updated).toEqual(original);
+ });
+
+ it('should not do anything if no template', async () => {
+ const readContent = setup('componentNoTemplate');
+ await convertToSelfClosingTagGenerator(tree, options);
+ const [updated, original] = readContent();
+ expect(updated).toEqual(original);
+ });
+
+ it('should convert properly for templateUrl', async () => {
+ const readContent = setup('componentWithTemplateUrl');
+ await convertToSelfClosingTagGenerator(tree, options);
+ const [updated, , updatedHtml] = readContent();
+ expect(updated).toMatchSnapshot();
+ expect(updatedHtml).toMatchSnapshot();
+ });
+
+ it('should convert properly for inline template', async () => {
+ const readContent = setup('componentWithInlineTemplate');
+ await convertToSelfClosingTagGenerator(tree, options);
+ const [updated, , updatedHtml] = readContent();
+ expect(updated).toMatchSnapshot();
+ expect(updatedHtml).toMatchSnapshot();
+ });
+});