Skip to content

fix(eslint-plugin-template): [prefer-self-closing-tags] allow nested ng-content #2257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 26, 2025

Conversation

reduckted
Copy link
Contributor

Fixes #2060

The immediate fix was actually quite simple - anchor the regular expression at the start and end of the string. The problem was that when there were nested ng-content nodes, the regular expression might not match to the first <ng-content tag and/or not match to the last </ng-content> tag. In the example from #2060:

<ng-content select="[slot='icon-only']">
  <ng-content select="[slot=start]" />
  <ng-content />
  <ng-content select="[slot=end]" />
</ng-content>

The regular expression matches to:

<ng-content select="[slot=end]" />
</ng-content>

Adding ^ and $ anchors to the regular expression would fix that, but the problem with using a regular expression is that it doesn't handle quotes. If a selector contained a ">" then it would incorrectly find the end of the opening tag and deduce that there is non-whitespace characters in the inner HTML which may not be true.

I've replaced the regular expression with a search through the string to find the end of the opening tag that handles quoted values, and a simple .endsWith('</ng-content>') check. If there is any non-whitespace characters after the opening tag and before the closing tag, then it's not empty.

Copy link

nx-cloud bot commented Feb 22, 2025

View your CI Pipeline Execution ↗ for commit fc47ad9.

Command Status Duration Result
nx run-many -t e2e-suite --parallel 1 ✅ Succeeded 18s View ↗
nx run-many -t test --codeCoverage ✅ Succeeded 1m 50s View ↗
nx run-many -t build,typecheck,check-rule-docs,... ✅ Succeeded 1m 21s View ↗
nx-cloud record -- pnpm nx sync:check ✅ Succeeded 4s View ↗
nx-cloud record -- pnpm format-check ✅ Succeeded 5s View ↗
nx run-many -t test ✅ Succeeded 23s View ↗
nx run-many -t build ✅ Succeeded 12s View ↗

☁️ Nx Cloud last updated this comment at 2025-02-22 12:23:13 UTC

Copy link

codecov bot commented Feb 22, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.53%. Comparing base (53a2afe) to head (fc47ad9).
Report is 7 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2257   +/-   ##
=======================================
  Coverage   90.53%   90.53%           
=======================================
  Files         179      179           
  Lines        3559     3570   +11     
  Branches      600      604    +4     
=======================================
+ Hits         3222     3232   +10     
- Misses        183      184    +1     
  Partials      154      154           
Flag Coverage Δ
unittest 90.53% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
...gin-template/src/rules/prefer-self-closing-tags.ts 98.07% <100.00%> (-1.93%) ⬇️
...late/tests/rules/prefer-self-closing-tags/cases.ts 100.00% <100.00%> (ø)

@JamesHenry JamesHenry merged commit f4591ac into angular-eslint:main Feb 26, 2025
14 checks passed
@reduckted reduckted deleted the bugfix/2060 branch February 26, 2025 08:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[prefer-self-closing-tags] Breaks structure when ng-content has fallback
2 participants