How to handle props properly

[nmerget]

@samijaber

I found this test during development.

In my opinion this syntax is wrong. props should be inside the component function right?

If that's the case I have some suggestions:

• it makes sense to add something like mitosis keywords to "Gotchas", because some keywords will break a lot of generators
• I would suggest that props shouldn't be any or empty like we see in the docs
• There should be a best practices section in docs (and/or the eslint-rule could be updated) to make sure that props are defined properly or at least add a hint that some generators might not work without proper typing of props

[samijaber]

• yeah I never noticed this test: it's definitely not a good test, might cause all sorts of issue.
• Gotchas should definitely have "reserved keywords"
• best way we've handled this is adding eslint rules that forbid using those reserved keywords. Here's an example: https://github.com/BuilderIO/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-prop-name.md

I think it's always better to have an eslint rule than a "best practices": it's an easier way to guide the developer. We can add a "forbid-reserved-keywords" eslint rule that throws an error if any variable declaration uses one of the reserved keywords (props, state, ref, etc. etc.)