SolidJS•10mo ago

Circular references in Stores?

Hi again, Solid community! Coming with another new person question 🙂 Is it possible to have circular references in Stores? I created a Playground which seems to indicate that it's not: https://playground.solidjs.com/anonymous/8f07d9c2-54da-43e9-8e08-88393f446bca If not, are there any recommended alternative patterns for this kind of thing? I can think of a few options, but haven't used Solid for very long yet, so would love to hear from others!

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

17 Replies

fabiospampinato•10mo ago

could it be that the store's setter doesn't work like that? 🤔 circular references should be supported it seems indeed buggy for some reason though 🤔 it looks like a bug to me, I've reposted the repro in #reactivity 👍

QWu4xYVOP•10mo ago

Thanks! Read through #reactivity and it sounds like it's probably a bug but we're not sure why it's happening?

fabiospampinato•10mo ago

I think we figured it out eventually, the "unwrap" is doing something it shouldn't be doing, but I'm not sure if Ryan saw the discussions, it would be best if you could open a GitHub issue about this

QWu4xYVOP•10mo ago

Okay, will do!

QWu4xYVOP•10mo ago

Posted here: https://github.com/solidjs/solid/issues/2056 . Feel free to add any additional context you think might be helpful!

GitHub

Circular references in Stores seem to trigger loss of proxying · Is...

Describe the bug (From Discord support channel here with more investigation details. Was told to file here as a bug) Solid Playground: https://playground.solidjs.com/anonymous/8f3ae147-b722-4b67-85...

QWu4xYVOP•10mo ago

Also, how long does it usually take for issues like this to get a root cause? Just wondering if I should rework my code that originally ran into this issue (which was more complex than dogs and trainers), or wait No pressure or expectation at all to be clear! I'm really grateful for all your prompt responses, and I know most of this is community supported

fabiospampinato•10mo ago

I'm not sure, I don't expect issues like that to be fixed anytime soon actually, most of the focus is allocated elsewhere at the moment I think. Thanks for opening the issue 👍

QWu4xYVOP•10mo ago

Thank you! I assume if I get antsy, I can try to fix it myself? If so, any pointers on where to start?

fabiospampinato•10mo ago

It depends on what the goal is exactly, if you want a fix to be shipped in Solid the first step is getting Ryan to agree that unwrap is indeed buggy, then one should try to agree on what the fix should be, personally the "obvious" fix from my point of view is simply making unwrap a constant-time operation, it just unwraps the store proxy from the input, if any, and that's it If you want to get this fixed in your code sooner rather than later honestly the best option might be to switch to a different store implementation, the one in Solid is borderline unusable as far as I'm concerned, and a better one can be written in userland

mdynnl•10mo ago

you can also use a class to ignore wrap/unwrap imo, it aligns better with the pattern you're going for

fabiospampinato•10mo ago

what purpose would the class have other than as a workaround for this bug?

mdynnl•10mo ago

as a workaround

fabiospampinato•10mo ago

right you said it aligns better with what @QWu4xYV was going for, I assumed you meant it was going to be useful for something else also

mdynnl•10mo ago

{
  dogs,
  setDogs
}

{
  dogs,
  setDogs
}

looks like avoiding classes

fabiospampinato•10mo ago

it just looks like exporting a Solid-style store to me 🤔

mdynnl•10mo ago

the structure of the types and then makePerson looks like a constructor more of a factory function because store needs to be constructed first if these are combined

class Person {
  constructor(name: string) {
    this.name = name;
    [this.dogs, this.setDogs] = createStore<Array<Dog>>([]);
  }
  name: string;
  dogs: Dog[];
  setDogs: ReturnType<typeof createStore<Array<Dog>>>[1];
}

class Person {
  constructor(name: string) {
    this.name = name;
    [this.dogs, this.setDogs] = createStore<Array<Dog>>([]);
  }
  name: string;
  dogs: Dog[];
  setDogs: ReturnType<typeof createStore<Array<Dog>>>[1];
}

QWu4xYVOP•10mo ago

Thanks! It turned out to be easier than I expected to rework my code to avoid this, so that's what I did for now

Gaming

Programming

Circular references in Stores?