solidjs-community / eslint-plugin-solid

Solid-specific linting rules for ESLint.
MIT License
216 stars 26 forks source link

Reactivity pattern not allowed #32

Closed philippe-wm closed 1 year ago

philippe-wm commented 1 year ago

Your Question How can we make the 2nd pattern valid wrt reactivity rule?

// OK
function createBar(v: Accessor<unknown>): void {...}
createBar(() => bar());

// KO
function createFoo(v: { onBar: Accessor<unknown> }): void {...}
createFoo({ onBar: () => bar() });
joshwilsonvu commented 1 year ago

Thanks for the question. Since the reactivity rule can't know the implementation of your custom hooks, it should be permissive about calling it with signals. Currently it looks for arguments that are inline functions and allows reactivity there, but it misses anything else like in your case.

I think I'll call this a bug, because your code looks perfectly valid--the rule needs to be more flexible around custom hooks. Look for a fix in the next release!

philippe-wm commented 1 year ago

Maybe related @joshwilsonvu :

  const [baz, setBaz] = createSignal(0);

  function getBar(): unknown {
    return props.params.bar;
  }

  // with or without this `createState` function we get the reactivity warning
  const state = createState({
    get foo() { // ok
      return props.params.foo;
    },
    get bar() { // ok
      return getBar();
    },
    get baz() { // reactity warning
      return baz();
    }
  });

  const state = {
    get foo() { // ok
      return props.params.foo;
    },
    get bar() { // ok
      return getBar();
    },
    get baz() { // reactity warning
      return baz();
    }
  };
joshwilsonvu commented 1 year ago

The warnings you're seeing should be taken care of in v0.7.4. Thanks again!