In Ember Octane together with angle bracket components we got a syntax that allows us to distinguish between Component Arguments and HTML Attributes. Which is great, because it allows following syntax:
{{!-- app/components/sent-message/avatar.hbs --}}
<Avatar
@title="Zoey's avatar"
@initial="Z"
class="current-user"
/>
{{!-- app/components/avatar.hbs --}}
<aside ...attributes>
<div class="avatar" title="{{@title}}">{{@initial}}</div>
</aside>
Unfortunately during one of my big refactors I either did a manual mistake or hit a bug in angle brackets codemod and suddenly I got a code:
<Comments @postId={{this.model.id}} pageSize={{50}} />
Where pageSize
should have been a Component Argument
, i.e: prepended with an "at" symbol:
<Comments @postId={{this.model.id}} @pageSize={{50}} />
Since the change in the codebase was huge and test coverage is not great, I was thinking about a way to easily uncover such a mistake. The requirements were:
- Quick & easy solution that anyone can run.
- No 100% solution needed, just a sanity check.
- Ignore known HTML attributes. In my example
class
.
I came up with following solution, which needs ripgrep or any grep with negative lookahead capability (not available in native OSX grep):
❯ rg -t hbs --pcre2 '<[A-Z][A-Za-z:]*[^>]* ((?!class)[^ @]*)=[^>]*'
app/post/comments/template.hbs
22:<Comments @postId={{this.model.id}} pageSize={{50}} />
...
So it seems to do it's job. Playground available on regex101. If you have an idea to improve this, please let me know, I am happy to update.
Top comments (0)