Allow custom hooks as member expressions

[joshwilsonvu]

Is there any possibility of allowing some type of config / overrides file to specify function names that should be considered reactive?

My use case is a little bit weird:

import { css } from 'goober'
import { createMemo } from 'solid-js'
import { styled as solidStyled } from 'solid-styled-components'

const createClassMemo = (tag: TemplateStringsArray, ...props: Array<string | number>) =>
  createMemo(() => css(tag, ...props))

export const styled = {
  ...solidStyled,
  createClassMemo,
}

This custom hook is just used to ensure css styles are reactive. I'm essentially redefining styled from solid-styled-components, because prettier looks for the identifier "styled" specifically to apply nice CSS formatting to the string template. Since eslint-plugin-solid is looking for functions that begin with use or create, I'm kinda stuck between a rock and a hard place - I either can't get nice formatting, or I get a lot of reactivity warnings.

Originally posted by @zjullion in https://github.com/solidjs-community/eslint-plugin-solid/issues/40#issuecomment-1355871283

[joshwilsonvu]

@zjullion are you essentially saying that you want an API like this to work?

function Component(props) {
  const someClass = styled.createClassMemo`
    some-css: ${props.someProp};
  `;
  return <div class={someClass()} />;
}

I think we can fix that on the ESLint side by expanding the use* or create* matching to *.use* and *.create*—basically dropping the requirement for them to be free functions and letting them be property accesses as well. Let me know if that doesn't match up with what you need.

Hmm, I'm not sure there shouldn't be a warning with this API. In my example props.someProp is being evaluated during the initial component execution, which won't be reactive even if you pass the result to a reactive function like createMemo. There needs to be some kind of tracked function at play here—I'm going to hold off on a change until I know what needs to happen a little bit better.

[zjullion]

Sorry, I've had too many issues with reactivity in solid, and I'm going back to react, so I won't be very useful here. My example probably is broken - I believe I did have a working example at one point. Generally speaking, it would be nice to be able to tag custom hooks with // eslint-plugin-solid-is-reactive (or something like that) so that they're treated as reactive, rather than needing to continually disable the warnings when using custom hooks. I realize the plugin currently looks for use or create, but more extensive functionality would be nice.