[vim/vim] feat(filetype): Add detection for Angular HTML templates (PR #15190)

Dennis van den Berg

unread,

Jul 9, 2024, 5:34:23 AM7/9/24

to vim/vim, Subscribed

Since Angular 17, the new Control Flow Syntax is not valid HTML. This PR adds a new filetype detection for the HTML templates of Angular.

It first checks the filename. The Angular convention is to use *.component.html for the template. However, this is not mandatory.

If the filename does not match, it will check the contents of the file if it contains:

One of the Control-Flow blocks: @if, @for, @switch, @defer
A structural directive: *ngIf, *ngFor, *ngSwitch, *ngTemplateOutlet
Builtin Angular elements: ng-template or ng-content
String interpolation: {{ something }}

This enables the Angular LSP to attach only to htmlangular filetypes, as well as language parsers, such as tree-sitter.

I've added a simple ft test, but only on filename. I'd like to add a testcase to check the contents of the file, but I do not know how. Tips are welcome.

You can view, comment on, or merge this pull request online at:

https://github.com/vim/vim/pull/15190

Commit Summary

b05a8ec feat(filetype): Add detection for Angular HTML templates

File Changes

(3 files)

Patch Links:

—
Reply to this email directly, view it on GitHub.
You are receiving this because you are subscribed to this thread.

Christian Clason

unread,

Jul 9, 2024, 5:38:31 AM7/9/24

to vim/vim, Subscribed

@clason commented on this pull request.

In runtime/ftplugin/htmlangular.vim:

> @@ -0,0 +1,13 @@
+" Vim filetype plugin file
+" Language: Angular HTML Template
+" Maintainer: Dennis van den Berg <den...@vdberg.dev>
+" Last Change: 2024 Jul 8
+
+" Only use this filetype plugin when no other was loaded.
+if exists("b:did_ftplugin")
+  finish
+endif
+
+" Use HTML and Angular template ftplugins
+runtime! ftplugin/html.vim
+runtime! ftplugin/htmlangular.vim

⬇️ Suggested change

-runtime! ftplugin/htmlangular.vim

—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you are subscribed to this thread.

Dennis van den Berg

unread,

Jul 9, 2024, 6:22:31 AM7/9/24

to vim/vim, Push

@dlvandenberg pushed 1 commit.

066f8f3 feat(filetype): Add detection for Angular HTML templates

—
View it on GitHub or unsubscribe.
You are receiving this because you are subscribed to this thread.

Dennis van den Berg

unread,

Jul 9, 2024, 6:41:46 AM7/9/24

to vim/vim, Subscribed

@dlvandenberg commented on this pull request.

In runtime/ftplugin/htmlangular.vim:

> @@ -0,0 +1,13 @@
+" Vim filetype plugin file
+" Language: Angular HTML Template
+" Maintainer: Dennis van den Berg <den...@vdberg.dev>
+" Last Change: 2024 Jul 8
+
+" Only use this filetype plugin when no other was loaded.
+if exists("b:did_ftplugin")
+  finish
+endif
+
+" Use HTML and Angular template ftplugins
+runtime! ftplugin/html.vim
+runtime! ftplugin/htmlangular.vim

No, not sure what to put in such a file.. angular.vim

—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you are subscribed to this thread.

Christian Brabandt

unread,

Jul 9, 2024, 1:22:19 PM7/9/24

to vim/vim, Subscribed

Thanks. One thing I noticed is the *\(ngIf\|ngFor\|ngSwitch\|ngTemplateOutlet\)\|ng-template\|ng-content\|{{.*}}
Let me backslah-escape the * while merging, it's clearer I think.

—
Reply to this email directly, view it on GitHub.

You are receiving this because you are subscribed to this thread.

Christian Brabandt

unread,

Jul 9, 2024, 1:46:21 PM7/9/24

to vim/vim, Subscribed

I've added a simple ft test, but only on filename. I'd like to add a testcase to check the contents of the file, but I do not know how. Tips are welcome.

Have a look https://github.com/vim/vim/blob/4a7a4a3675b6ad90a525524ba4684925df212325/src/testdir/test_filetype.vim#L2485-L2491

Nevermind, I'll add a test while merging.

—
Reply to this email directly, view it on GitHub.

You are receiving this because you are subscribed to this thread.

Christian Brabandt

unread,

Jul 9, 2024, 1:48:41 PM7/9/24

to vim/vim, Subscribed

Closed #15190 via 1ad194c.

—
Reply to this email directly, view it on GitHub.

You are receiving this because you are subscribed to this thread.

zeertzjq

unread,

Jul 9, 2024, 4:12:49 PM7/9/24

to vim/vim, Subscribed

As mentioned in #13594 (comment) detecting angular files by filename is not desired. I think this is still the case.

—
Reply to this email directly, view it on GitHub.

You are receiving this because you are subscribed to this thread.

zeertzjq

unread,

Jul 9, 2024, 4:51:50 PM7/9/24

to vim/vim, Subscribed

@zeertzjq commented on this pull request.

In runtime/ftplugin/htmlangular.vim:

> @@ -0,0 +1,12 @@
+" Vim filetype plugin file
+" Language: Angular HTML Template
+" Maintainer: Dennis van den Berg <den...@vdberg.dev>
+" Last Change: 2024 Jul 8
+
+" Only use this filetype plugin when no other was loaded.
+if exists("b:did_ftplugin")
+  finish
+endif
+
+" Use HTML and Angular template ftplugins

This comment seems wrong now, as it only uses HTML ftplugin.

—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you are subscribed to this thread.

Christian Brabandt

unread,

Jul 10, 2024, 5:25:37 AM7/10/24

to vim/vim, Subscribed

Okay, we can revert looking at the filename and just make it inspect the file, when doing so, we can also fix the comment. @dlvandenberg is that fine for you?

—
Reply to this email directly, view it on GitHub.

You are receiving this because you are subscribed to this thread.

Dennis van den Berg

unread,

Jul 10, 2024, 6:04:31 AM7/10/24

to vim/vim, Subscribed

Okay, we can revert looking at the filename and just make it inspect the file, when doing so, we can also fix the comment. @dlvandenberg is that fine for you?