Possible to count DOM elements as homebrew?

[erikatgreenbyte]

I am finding this tool very interesting, but for my purposes I would like to be able to count both non-DS React Components and DOM elements as "homebrew".

Would it be possible for radius to support that, or is is there an easy way I can modify the source myself to support this?

[smoogly]

Erik,

There are a few different ways to create DOM elements, like createElement and element.innerHtml = markup

These are possible to detect using static code analysis. Though I wonder what does using a DOM element mean when talking about a concept of a component.

What do you think about sharing an example code showing what you mean? It will also help with suggesting a good way to modify tracker to track it.

On Mon 16 Jan 2023, 14:54 Erik Lindqvist, @.***> wrote:

I am finding this tool very interesting, but for my purposes I would like to be able to count both non-DS React Components and DOM elements as "homebrew".

Would it be possible for radius to support that, or is is there an easy way I can modify the source myself to support this?

— Reply to this email directly, view it on GitHub https://github.com/rangle/radius-tracker/issues/44, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABQ5EWQ6HXZT673CR2K2XNLWSVHKXANCNFSM6AAAAAAT4YZSDA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[erikatgreenbyte]

Thanks for the swift reply!

I think I mixed up terms a bit, what I meant was HTML tags.

The backround is that besides seeing what homebrew React Components that exists I would like to know what HTML tags are used. The goal is to reduce the use of homebrew and HTML tags and have teams use the Design System instead.

<DsHeader /> vs <h1 /> etc.

Do I make sense? :)

[smoogly]

Hi Erik,

I'm not sure I understand the goal precisely. Let me give it a shot, and let me know how much sense it makes to you.

"Homebrew" is defined in the tracker as "a component using at least one lowercase tag". This means two things: 1) homebrew components output html tags directly, and 2) compositional components that only use other components and not lowercase tags are not considered homebrew.

So at a first glance, any component in the homebrew list uses raw markup, and is a candidate for replacement.

If you want to be more specific and catalog the exact html tags used throughout the codebase, this can be done by modifying detectHomebrew: https://github.com/rangle/radius-tracker/blob/46fb00879bbf752904d6dcf723687d67bff6f342/src/lib/detectHomebrew/detectHomebrew.ts#L41

At the moment, it returns components containing raw markup, but could be modified to return individual AST nodes of lowercase JSX tags.

What do you think about a call sometime next week to discuss what you are trying to do, and how the tracker could help?

You can reach me at [email protected] — I'll be happy to help. Or we can keep the conversation here in case it is more comfortable this way.

[erikatgreenbyte]

Thanks for the thourough reply!

I know understand better the intentions of the data collection! 🙂

The change you proposed might be what I am looking for, I will consider this change in the near future and see if it yields the results I am looking for! 👍

Thanks for the call offering 🙏 I don't think it is necessary at this time and I don't mind continue here, someone else might find this useful 😃

Feel free to close this "issue" if you'd like and we can continue discussing in the closed "issue" 🙂

[smoogly]

I'm not sure if you had a chance to look at html tag tracking just yet. How did it go with the modifications?

[erikatgreenbyte]

Sorry I haven't had time to test yet due to shifting priorities. Thanks for checking in!