solidjs-community / eslint-plugin-solid

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

Report reactivity issues when using inside solid-start `routeData` function #43

Open nirtamir2 opened 1 year ago

nirtamir2 commented 1 year ago

Describe the need I really like this plugin - it's a must-have for my solid.js projects. I use solid-start and I had a problem that routerData not being called reactively because I did break reactivity. I believe that this rule can prevent such cases. Notice - I am still not confident enough to identify when Solid.js lose reactivity (this is why I think this plugin is important) so I hope this would help me and other users prevent mistakes.

Suggested Solution

Adding an exception to the rule that it would work in routerData function and treat it like a component https://github.com/solidjs-community/eslint-plugin-solid/blob/main/src/rules/reactivity.ts#L390

Possible Alternatives

Maybe add config with functions that should be reactive

Additional context

This is the original function I had that did not update on date change.

NOT WORKING - not reactive when date changes

export function routeData({ params }: RouteDataArgs) {
  const { date } = paramsSchema.parse(params);

  return createRouteData(
    async () => {
      return await client.app.getCalendar.query({
        date, // dynamically page params.date
        hardCodedStuff: "hardCodedStuff"
      });
    },
    { key: () => ["calendar", { date }] }
  );
}

And I end up doing something like

WORKING - reactive and called again when date changes

export function routeData({ params }: RouteDataArgs) {
  const getAPIDate = () => {
    const { date } = paramsSchema.parse(params);
    return { date };
  };

  return createRouteData(
    async ([, date]) => {
      return await client.app.getCalendar.query({
        date, // dynamically page params.date
        hardCodedStuff: "hardCodedStuff"
      });
    },
    { key: () => ["calendar", getAPIDate()] as const }
  );
}

I can try adding exceptions to function declarations that have the name routerData in https://github.com/solidjs-community/eslint-plugin-solid/blob/main/src/rules/reactivity.ts#L390 even if they don't contain jsx and maybe this is a good direction to start.