signaldb

signaldb copied to clipboard

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.

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';

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.

The issue with the imports is resolved in [email protected]

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.

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!

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 😓

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

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

closing as no response received. Feel free to reopen if the issue persists

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';

I had the opposite issue. Reactivity wasn't working and using the normal solid import fixed it.

The issue is finally resolved in [email protected] 🎉