Using ReScript with SolidJS - reactivity issue with proxies

1

Has anyone successfully used ReScript with SolidJS? What guidelines did you follow?

I decided to try SolidJS with TypeScript and within a couple weeks became very frustrated with TypeScript. The biggest hassles - (1) tons on import/export statements, (2) MUST define types for all function inputs which is extremely verbose, (3) No piping, (4) compiler only warns you about open files, (5) no sub-modules so I had trouble organizing my code. So I thought maybe I could use ReScript for all the data manipulation, storage, JSON serialization using ReScriptStruct, and use SolidJS mostly for UI. And then I ran into a problem. Suppose a ReScript function returns a SolidJS Store. The javascript looks ok, something like this…

return SolidStore.value(store);

But with genType, the compiler calls the JS version and wraps it with this…

export const getUserApp: (
  _1: t,
  _2: ApplicationId_t
) => docSubscription<UserApp_App_t> = function (Arg1: any, Arg2: any) {
  const result = Curry._2(FirebaseServicesBS.getUserApp, Arg1, Arg2);
  return { doc: result.doc, status: $$toJS635887709[result.status] };
};

The compiler first calculates result, a SolidJS Store, but then destructures it before returning it. This breaks SolidJS because result is a proxy that tracks reads/writes. I think genType is doing this because I’m using variants like | Loading | Refreshing. If I use the regular variants like [ #loading | #refreshing ] it seems to work.

Anyway this has gotten me spooked about using ReScript with SolidJS because the auto-generated code might break proxies. I could try to only work with Stores in TypeScript. But I just don’t know what other places the auto-generated code is not going to work.

1 Like
2

I had troubles with curried functions while using proxies. So is really the destructing the problem?

3

In the example above, destructuring a proxy was the problem. I had trouble figuring out why my UI wasn’t updating and that was it. I haven’t yet seen the issue with curried functions.