Show a warning if a variable is not being used in a component

[emilos]

No description provided.

[inikonorov]

hey, I wanna help you with this issue, can you shortly explain what should I do? and can you talk a little bit about project structure? I wanna help you with other issues!

[emilos]

hey @inikonorov, thanks for asking, happy to see you again! :) I'll try to update the descriptions of other tasks today to make it more obvious what is needed

For this task, we'd like to handle the following case:

Step 1:

Define a simple component, like link.html

<a {class} {id}><slot /></a>

Step 2:

Load this component in other place and pass a variable that is not handled by the component.

<import link from "components/link.html" />

<link class="foo" id="bar" href="some-url.html">baz</link>

href attribute is currently not handled inside of the component, so it's unused. We'd like to show an error in this case, something like:

href attribute is not required by the link component

This way the developer can find out where he missed something.

This task might be pretty hard, but potentially good to try to understand the code base a little bit :).

To see how the compiler works, it would be good to check out test cases first. You can try checking unit tests first and acceptance specs after that.

After seeing that you can potentially start be looking how Compiler Renderer and utilities/collect.js work. The code is basically iterating over an html tree and generating a js abstract syntax tree based on that, which is later used as a rendering function.

Knowledge about html/css/javascript syntax trees is required to start, in package.json you can check the dependencies and go through their docs to understand a bit more :).

Thanks!

[inikonorov]

Okay, thanks! I'll try my best :)