solidjs-community / eslint-plugin-solid

Solid-specific linting rules for ESLint.
MIT License
209 stars 24 forks source link

Allow using 'static*' props outside tracked scopes, but forbid passing reactive variables to them in the caller #83

Closed joshwilsonvu closed 1 year ago

joshwilsonvu commented 1 year ago

Closes #78.

There's been some desire in the community to treat some props as "static", i.e. constant over the lifetime of the component, so that they can be assigned at the top level of the component without getting flak from the linter.

I don't recommend this pattern. Though it might save a few keystrokes and potentially an infinitesimal amount of performance over regular access/memoization, it's more idiomatic and maintainable to treat all props as if they could potentially change. Whether a prop will or won't change is not defined near the component code; you or a future collaborator could pass a reactive variable to a "static" prop a long time from now without knowing about the potential issue, and it's easy to run into bugs.

However, if people are going to do this, then the tooling should provide as much safety as it can. So:

  1. To define a prop as "static", prefix it with static when accessing it.

    function Component(props) {
    const name = props.staticName;
    // ...
    }
  2. When providing a "static" prop, don't pass a reactive variable; the linter will warn if you do.

    const [name, setName] = createSignal("Alice");
    
    return <Component staticName={name()} />; // The reactive variable 'name()' should be used within JSX [...] or else changes will be ignored.
    return <Component staticName="Alice" />; // ok