DEV Community

Michal Bryxí
Michal Bryxí

Posted on

3

Component Arguments vs HTML Attributes bug hunt

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"
/>
Enter fullscreen mode Exit fullscreen mode
{{!-- app/components/avatar.hbs --}}
<aside ...attributes>
  <div class="avatar" title="{{@title}}">{{@initial}}</div>
</aside>
Enter fullscreen mode Exit fullscreen mode

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}} />
Enter fullscreen mode Exit fullscreen mode

Where pageSize should have been a Component Argument, i.e: prepended with an "at" symbol:

<Comments @postId={{this.model.id}} @pageSize={{50}} />
Enter fullscreen mode Exit fullscreen mode

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:

  1. Quick & easy solution that anyone can run.
  2. No 100% solution needed, just a sanity check.
  3. 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}} />
...
Enter fullscreen mode Exit fullscreen mode

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.

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series