solid-js reactivity not working

[KarlitosD]

I was testing signaldb in my solid-js project, but I noticed that adding an element to the collection triggered the effect.

import { Collection } from 'signaldb';
import solidReactivityAdapter from 'signaldb-plugin-solid'
import { createEffect } from 'solid-js';


const posts = new Collection({
  reactivity: solidReactivityAdapter,
});

createEffect(() => {
  console.log(posts.find({ author: 'John' }).count());
});

// ---------------------- INSERTS ---------------------------

(async () => {
  await posts.insert({ id: crypto.randomUUID(), author: 'John' });
  await new Promise((r) => setTimeout(r, 1000));
  await posts.insert({ id: crypto.randomUUID(), author: 'Kevin' });
  await new Promise((r) => setTimeout(r, 1000));
  await posts.insert({ id: crypto.randomUUID(), author: 'David' });
  console.log('Finish inserts');
})();

Testing the same example but with vue and @maverick-js/signals works as expected.

Then check in the documentation to make a custom adapter and add some console.log. It turns out that it never calls the “create” function.

import { Collection } from 'signaldb';
//import solidReactivityAdapter from 'signaldb-plugin-solid'
import { createEffect } from 'solid-js';

const solidReactivityAdapter = createReactivityAdapter({
  create: () => {
    console.log('Create');
    const [depend, rerun] = createSignal(0);
    return {
      depend: () => {
        console.log('Depend');
        depend();
      },
      notify: () => {
        console.log('Notify');
        rerun(depend() + 1);
      },
    };
  },
  isInScope: undefined,
  onDispose: (callback) => {
    onCleanup(callback);
  },
});

const posts = new Collection({
  reactivity: solidReactivityAdapter,
});

createEffect(() => {
  console.log(posts.find({ author: 'John' }).count());
});

// ---------------------- INSERTS ---------------------------

(async () => {
  await posts.insert({ id: crypto.randomUUID(), author: 'John' });
  await new Promise((r) => setTimeout(r, 1000));
  await posts.insert({ id: crypto.randomUUID(), author: 'Kevin' });
  await new Promise((r) => setTimeout(r, 1000));
  await posts.insert({ id: crypto.randomUUID(), author: 'David' });
  console.log('Finish inserts');
})();

I don't know what could be happening, I also leave a link to stackblitz you can try to replicate my experience.

[maxnowack]

Hi @KarlitosD, it looks like you're in a server environment or at least the provided stackblitz is running a nodejs environment. It seems that solid-js doesn't run effects on server side. To get around this, you can import createEffect directly from the browser bundle solid-js/dist/solid. I'm also doing this to run the signaldb tests for the solid-js integration (see https://github.com/maxnowack/signaldb/blob/main/packages/plugin-solid/__tests__/reactivity.spec.ts#L7).

You just have to adjust your import from

import { createEffect } from 'solid-js';

to

import { createEffect } from 'solid-js/dist/solid';

[maxnowack]

But it also seem that there is an issue with imports inside of signaldb-plugin-solid. I'll look into that.
The solution mentioned above should work if you implement the reactivity adapter by yourself, as you've done it in the stackblitz.

[maxnowack]

The issue with the imports is resolved in signaldb-plugin-solid@1.0.2

[KarlitosD]

Thanks for the help 😀
At first I was testing on my vite project, but seeing that the adapter was not working I decided to take it to a stackblitz, so I could install vue and @maverick-js/signals and see if that was the expected behavior in the other libraries, without messing up my project dependencies.

I didn't realize that solid on the server was not running effects.

I will try to implement it again in my project with the latest version, again thanks for your quick response.

[maxnowack]

You're welcome! Thanks for pointing me in the direction to find the imports issue in signaldb-plugin-solid 🙂
Feel free to ask if you need assistance!

[KarlitosD]

Hello me again 😅, related to this it keeps happening to me in a vite project, here I leave the stackblitz with the updated dependencies.

Sorry for the inconvenience again 😓

[maxnowack]

It seems that there is an error in stackblitz while setting up dependencies. I'm not sure if this is related to signaldb

[maxnowack]

@KarlitosD I just downloaded the project locally to try it out. It seems to work properly without stackblitz. Can you confirm this?