r/solidjs

I ported EvilCharts to

EvilCharts is a set of good-looking React chart components built on Recharts and Echarts. I was building a dashboard in solidjs and i needed charts, so i ported it. AI helped a lot.

Right now, i am leveraging the use of Echarts only. After this is stable, I will add a layer for tanstack charts.

Please check it out, try it out (hopefully it works hahaha) and lemme know what you think.

repo is here:

P:S:
also working on
a shadcn-like setup for solidjs that uses ark ui as the base component system.
ark ui is pretty first class for solidjs as well.

Kind of really struggling to think of what a nice API should look like for fetching & storing data that is meant to be kept in client-side state across page visits.

I understand that things like fetch calls should go into createMemo blocks so that they could be utilized by Loading and Errored boundary components, but what if that data needs to live across page visits?

I can put a const user = createMemo(() => api.fetchUserData()) in the main entrypoint component, but then I'm kinda lost when I want to keep the user state when moving to a user profile page.

In e.g. Vue it's typical I believe to fetch when mounting a component, then save the result to some other module which will be imported from another page and have access to the same state that was just fetched. With Solid 2, well, I'm not sure how to move/keep the state that was acquired asynchronously across components.

Maybe I'm missing something from the API (I have to confess I've yet to read a lot of the docs), but so far it feels a lot more complicated that expected. If it helps, my backend is not TS, so I'm not using any of the server/ssr features.

I remember using a similar API such as this in a project a couple years back. Can't think of how this should look like in idiomatic solid :(

  const fetchData = () => {
    http.getAuthUser({
      onSuccess(data) {
        userStore.setUser(data); // userStore is then imported in a different page, the data kept and ready to use
      },
      onUnauthorized() {
        //
      },
      onServerError(err) {
        toasterStore.show(err);
      },
    });
  };