Linter miss reactivity-breaking pattern

[philippe-wm]

Describe the bug

It is possible to "cheat" the linter using an intermediary function.

To Reproduce

export const MyComp: Component<{ data: string }> = (props) => {
  const data = (): string => props.data;
  const oops = data();
  return <div>{oops}</div>;
}

Expected behavior

Linter should flag that we are breaking reactivity.

Screenshots

Environment (please complete the following information):

• OS: MacOS
• Node version (node --version): v16.15.1
• eslint-plugin-solid version (npm list eslint-plugin-solid/yarn why eslint-plugin-solid): 0.9.1
• eslint version (npm list eslint/yarn why eslint): 8.17.0

Additional context

• [ ] I would be willing to contribute a PR to fix this issue

[joshwilsonvu]

Nice catch! Here's the problem, if you're curious:

solid/reactivity uses a stack-based algorithm based on lexical scopes. It determines whether a function is a component, and therefore whether its props parameter is a reactive variable, based on whether the function contains JSX. The catch is that it only knows whether the function contains JSX on the way back up the AST, and when it reaches your component on the way back up, it has already finished analyzing the data function without knowing that props is reactive. So marking props as reactive then is too late.

There are some upcoming improvements that will bypass this subtle timing issue. In the meantime this could be addressed by marking any single parameter named props as reactive, before checking if the function has JSX.

[philippe-wm]

Thanks for the fix, and for the explanation 😄