Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
nirtamir2 opened this issue Nov 22, 2022 · 0 comments
Open
1 task done
Assignees
Labels
enhancement New feature or request reactivity v2 To be addressed in the rewrite of the solid/reactivity rule

Comments

@nirtamir2
Copy link

nirtamir2 commented Nov 22, 2022

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 would be willing to contribute a PR to implement this feature

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.

@nirtamir2 nirtamir2 added the enhancement New feature or request label Nov 22, 2022
@joshwilsonvu joshwilsonvu added the reactivity v2 To be addressed in the rewrite of the solid/reactivity rule label Jan 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request reactivity v2 To be addressed in the rewrite of the solid/reactivity rule
Projects
None yet
Development

No branches or pull requests

2 participants